Today I want to share a quick tip I use when I build dashboards that need to send data to the Notecard. For example, this year we at Blues had a booth at CES, and as part of our booth we had a scooter that helped us show off what Blues does.
The dashboard we built for this scooter had a series of charts and graphs to show data coming from the device, but it also had a pretty interesting button in the bottom-right corner.
The red button sent an inbound signal to the Notecard, which in turn told a host microcontroller to honk the horn on the scooter.
In this article I’m going to walk you through exactly how that button works, and how you can build your own dashboards that can send data to the Notecard. Let’s open by discussing how to send data to the Notecard in general, regardless of what sort of dashboard or project you’re building.
Sending Inbound Data
The Notecard provides an easy way to perform bidirectional communication with its backing cloud service, Notehub. This means that in addition to sending data from your device to the cloud (sensor data, location data, etc), you can also send data to your device from the cloud. You can use this approach to turn a light on and off, open or close a valve, or to honk the horn on a scooter.
There are two primary ways to send inbound data to the Notecard.
-
Inbound Notes: Inbound Notes are Notes designed to be sent to a Notecard using the Notehub UI or Notehub API. We have a detailed guide on how to send these Notes in our Remote Command and Control guide.
-
Signals: Signals are special types of Notes designed for low-latency network communication. Signals are sent from Notecard to Notehub, and vice versa, as soon as they are created, and your Notecard must be in continuous mode to use them.
The core difference between the two approaches is Notes are persistent and signals are not. If you need your data to be transmitted to your device no matter what, use Notes. If the data is only relevant when the device is live and online, use signals.
For the scooter we used signals because our Notecard was in continuous mode, and because a horn has to work live. As such, the examples in this article will show off the signal API, but you can easily alter them to use the note.add request and accomplish the same thing.
Using the Signal API
This is the easiest section of this article because the signal API is a single HTTP request. Here it is.
curl -X POST
-L 'https://api.notefile.net/v1/projects/app:123456/devices/dev:123456/signal'
-H 'Authorization: Bearer <your-authentication-token>'
-d '{"body":{"horn":"on"}}'This request sends a single to a device with a DeviceUID of dev:123456 in a project with a ProjectUID of app:123456. It sends the Note of {"horn":"on"}, which we receive on the Notecard, and instruct our host to honk the scooter’s horn.
If you want to run this request yourself you must replace the DeviceUID and ProjectUID with your own values, and also provide the appropriate authentication. You’ll know it worked if you get back an empty JSON object ({}).
Now that you know how to send data to a device, let’s get to the core of this article: how exactly can you send a request like this from a web dashboard?
Putting it all together
I built the dashboard Datacake, as it’s a great platform for building quick dashboards, and because they have a built-in integration with the Notecard that makes getting up and running really easy.
The other reason I used Datacake is because their dashboards support iframe embeds, and iframes are the main trick I use to make this whole article’s approach work.
Specifically, I built a simple web page that uses the Notehub API, put that web page on the public internet, and then included that web page in an iframe in my dashboard.
Let’s walk through each of these steps in detail. If you want to follow along I’d recommend starting by going through our Datacake routing guide first, as it’ll help you get up and running with the basics of setting up a Datacake account, and getting data from Notehub into a Datacake dashboard.
1) Create the web page
As a first step you’ll need to create a web page that uses the Notehub API. So you can see what I mean, below is the code I used for my dashboard’s page.
If you have some web development skills you might want to play around with the code to customize the look. If you’re not a web developer though don’t worry—all you need to do is save this code in a index.html file, and replace the values of the API_KEY, APP_UID, and DEVICE_UID constants.
<html>
<style>
body,
html {
padding: 0;
margin: 0;
}
div {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
}
button {
background: red;
color: white;
border: 0;
border-radius: 150px;
height: 70vh;
width: 90vw;
border-width: 5px;
border-style: solid;
border-color: black;
}
button:hover {
cursor: pointer;
}
</style>
<div>
<button>Press Me</button>
</div>
<script>
function onSubmit() {
const API_KEY = "your_key_here";
const APP_UID = "your_app_uid_here";
const DEVICE_UID = "your_device_uid_here";
fetch(
`https://api.notefile.net/v1/projects/${APP_UID}/devices/${DEVICE_UID}/signal`,
{
method: "POST",
headers: {
"Content-Type": "text/plain",
"X-SESSION-TOKEN": API_KEY,
},
body: JSON.stringify({ body: {} }),
}
)
.then((response) => response.text())
.then((data) => {
console.log(data);
})
.catch((error) => {
console.error("Error:", error);
});
}
document.querySelector("button").addEventListener("click", onSubmit);
</script>
</html>2) Host the web page
In order to import the web page in Datacake it must be available on the public internet. You can use any web hosting provider you like to do this.
If you’re new to web hosting, both Netlify and GitHub Pages have free ways to deploy simple pages like this. When you’re done make note of your app’s URL, as you’ll need it for the next step.
3) Add your URL as an allowed origin
By default, you can not use the Notehub API from an arbitrary web app because of CORS, which is a browser-based security mechanism.
To get things working, open up your Notehub project, go to Settings, and then scroll down to the CORS Allowed Origins section. Here, list your new URL in the textbox and save.
4) Add an iframe widget in Datacake
Back in Datacake, edit your dashboard, click the Add Widget button, and click the option for an iframe widget.
Next, provide the URL for your web app in the dialog that pops up. You’ll likely also want to toggle on the Hide background setting on the Appearance tab.
And with that, you’re all set! If all went well, you can click your button and see the signals or Notes immediately go through to Notehub.
Wrapping up
In this article we looked at how to send inbound messages to a Notecard, how you can build a small web page that sends these messages, and then how to embed that web page into a dashboard service like Datacake.
This solution isn’t perfect, and isn’t going to scale to work on fleets of devices. BUT, it can provide a convenient way to quickly send data to a Notecard for small projects and demos. If nothing else it’s helped us build fun booth demos—and clicking a button to honk a horn is never not fun.
