⚡️🌋🌔 The cutest IoT dashboard of your dreams ☁️
MIT License
The cutest IoT dashboard of your dreams ☁️
Built with:
This will be remixable on Glitch pretty soon, but if you want to run it locally you can!
You’ll need to have an Azure IoT Hub instance of your own running in Azure, as this is what the dashboard is designed for. If you’d like to see more IoT messaging providers, let me know by opening an issue.
You’ll need to have your Azure IoT Hub connection string handy. You can find it under your “Shared Access Policies” section in the IoT Hub’s Azure Portal blade. Choose a policy that allows “registry read”, “service connect” and “device connect” at the least.
You can also list your connections strings via the command line.
Now you’re ready to install the app.
We have two different ways you can do this. You can do this via the native installation method below, or you can use Docker, mentioned a bit lower.
Install NodeJS. You can see the recommended version in the “engines” entry in package.json.
Install Git.
Open your terminal and do the following:
Clone the electric-io repository:
git clone https://github.com/noopkat/electric-io.git
If this fails with an error message, you can have a look at GitHub HTTPS cloning errors.
Navigate to the electric-io directory:
cd electric-io
Install electric-io’s dependencies:
npm install
If this fails with an error message, you can have a look at common NPM errors.
Open the file .env
and fill in the CONNECTION_STRING
property with your Azure IoT Hub connection string.
Optional. Specify the CONSUMER_GROUP
in .env
. If in doubt, you can skip this step.
Go back to your terminal and start electric-io:
npm start
Navigate to http://localhost:3000
in your favourite modern browser and away you go! Try adding new cards via the settings pane on the right and click “edit” to fill in the details.
Docker is a container technology. There are native applications available for Windows and Mac. And Docker is fully supported on Linux. If you are in the latter group, this part of the guide is probably not for you. You can get Docker for Mac, Windows, Linux right over here.
You can install GIT using the instructions in the Native installation section above.
git clone https://github.com/noopkat/electric-io.git && cd electric-io
docker-compose up --build
You should now see log ouput. If you Ctrl-C this will stop the container. If you would rather run this in the background, and tail the container’s log output you can run the following
docker-compose up --build -d
docker logs -f electric-io
The docker compose file has been configured to read from the .env file, or you can pass in your own override for whether to run in simulating mode with the following:
SIMULATING=true docker-compose up --build
docker-compose down
For this dashboard to work, all data payloads coming in from device to Azure IoT Hub should be in JSON format and properties should not be nested. If you’d like to see nested properties, pull requests are very welcome! 😇
Example:
{
"humidity": 45.68,
"temperature": 27.3
}
This card will give you a big button to press that can map to any device method active on your device! Pretty cool. You can’t send payloads yet, but that’s coming soon!
Fields:
〰️〰️〰️〰️〰️〰️
This card will plot the last 20 numeric values it received of the property you’re watching
Fields:
humidity
)#00ff00
, rgb(0,255,0)
, and salmonpink
color formats 🌈〰️〰️〰️〰️〰️〰️
This card will display the last value it received from a numeric property you’re watching
Fields:
humidity
)#00ff00
, rgb(0,255,0)
, and salmonpink
color formats 🌈〰️〰️〰️〰️〰️〰️
This card will display a sticker on your dashboard.
Fields:
〰️〰️〰️〰️〰️〰️
The simplest of them all! This card will display text.
Fields:
️〰️〰️〰️〰️〰️
Got ideas for more cards? Open an issue on this repo and let me know! 👀
electric-io saves your dashboard configuration to ./.data/dashboard.json
. To safely transfer this elsewhere, stop the source and destination electric-io instances and copy dashboard.json
across.
# With both the source and destination electric-io instances stopped
cp ./electric-io-testing/.data/dashboard.json ./electric-io-production/.data/dashboard.json
On Windows:
xcopy electric-io-testing\.data\dashboard.json electric-io-production\.data\dashboard.json
# Choose F at the prompt to complete the copy
The transferred settings should show up when electric-io is started again.
A common thing you might want to do is to share your dashboard with folks without them changing things against your permission. If you’d like to temporarily “lock” your dashboard, place the following line in your ./.env
file:
EDIT_MODE=locked
This mode will show your cards and your telemetry, but won’t let them create, edit, delete, or drag cards around. The dashboard settings will also not be available.
This might also be handy for when you’re happy with how everything is and want the dashboard to look a little cleaner.
Electric-io will work in modern web browsers, and we aim for it to run on any released in the last 2 years. Support does not extend to any version of Internet Explorer 💀.
We gladly accept contributions!
If you’d like to contribute to this repo, please read the Contributing guide.
To participate, please read and follow the Contributor Code of Conduct agreement.