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.