Since launching the Losant platform, one of our users' most requested features has been the ability to control their devices directly from their dashboards. By bringing this functionality into the primary interface, we've made it so that most users never have to leave their dashboards for day-to-day use.
To commemorate the launch of the Input Controls Block feature, we'll set up a dashboard for a common use case: controlling the colors of an array of lights.
In a true home lighting setup, we would configure a gateway device in Losant (likely a Raspberry Pi) and set up each bulb (a Philips Hue or similar product) as a peripheral of that device. For our demonstration purposes, we are using an Arduino 101 with a WiFi shield as a standalone device and individual Adafruit NeoPixels to represent four different bulbs.
When setting up the Arduino 101 as a device in Losant, we're giving it attributes "led0Color", "led1Color", "led2Color" and "led3Color" and each should be of the type "String".
The Arduino has this sketch loaded onto it, which allows the device to listen for the "setColor" command and to report the state of each LED back to the platform.
Need help with a similar setup? Check out these guides for more info:
Create a new dashboard for managing our lights and viewing their current state, and then add a new Input Controls Block. We'll be adding six control components to the block:
{
"r":{{red}},
"g":{{green}},
"b":{{blue}},
"inverted":{{invert}},
"index":{{index}}{{^index}}999{{/index}}
}
Each {{templateId}} in the payload will be run through Losant's Handlebars templating engine before the payload is sent with the device command, so the values of our individual controls will make it to the device.Once all of the input components are set up and configured, we can rearrange and resize the components as we see fit within the block. It's up to you how to arrange your sliders, toggle, text input and button.
After we've saved our Input Control Block, let's create four individual Gauge Blocks for reflecting the state of each of our LEDs. Each block should reflect the state of one of our microcontroller's four color attributes (led0Color, led1Color, led2Color and led3Color).
With our microcontroller loaded with the sketch and our Neopixels wired up, we're ready to change the colors of our LEDs from the dashboard. We can individually change the red, green and blue values before sending the color to the board, and we can also opt to change just one LED's color or change all of them with each press of the button. Then, the next time the dashboard data refreshes, we'll see what the RGB color of each LED is as of its last reported state.
Now that we can send commands to our devices straight from a dashboard – and we have human-friendly controls for adjusting the numerical, string and boolean values in those payloads – it's now easier than ever to manually adjust our home lighting, turn on a sprinkler system or arm a security system. The short amount of time spent setting up an Input Controls Block will pay off in the time saved from digging into a particular workflow or device page to send the command.
Update, Sept. 7, 2016:
I've been asked a couple times for a wiring diagram of this setup, so here is a schematic created using Fritzing.