Skip to content
⚡️🌋🌔 The cutest IoT dashboard of your dreams ☁️
JavaScript Vue CSS Batchfile Other
Branch: master
Clone or download
jeffnhorner and noopkat Additional Frontend Component Code Coverage (#153)
* saving work

* saving work

* ButtonCard code coverage extended

* added 'for' attribute to buttonSettings label with new ids added on the inputs for accessibility updates. This was prompted by our jest-axe set up

* update buttonSettings unit test

* saving progress for BaseCard unit test

* added code coverage for BaseCard - work in progress

* BaseCard component up to 75% code coverage, work in progress

* BaseCard component now has ~93% code coverage

* 100% code coverage for FormFields component

* updates from code review
Latest commit 462468f Aug 4, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.config/configstore initial Glitch code Apr 16, 2018
.data Revert "refactor(form): Make form card more declarative" May 30, 2018
lib Update dependencies. Add .eslintrc.json. Enable linting for .vue files. Jul 21, 2019
public Additional Frontend Component Code Coverage (#153) Aug 5, 2019
.babelrc Defines browser support (#123) Jun 17, 2019
.deployment add azure web app compatibility Nov 15, 2018
.dockerignore Use docker ignore for git and node_modules, no need to waste containe… Jun 3, 2018
.env Replace .env (#134) Jul 7, 2019
.eslintrc.json Update dependencies. Add .eslintrc.json. Enable linting for .vue files. Jul 21, 2019
.gitignore Merge branch 'issues/10' of github.com:mpaarating/electric-io into is… Jun 3, 2018
.glitch-assets initial Glitch code Apr 16, 2018
CODE_OF_CONDUCT.md Create CODE_OF_CONDUCT.md May 26, 2018
CONTRIBUTING.md Clean up readme & friends (#151) Jul 29, 2019
Dockerfile build(Dockerfile): changed Node to 10.14.1-alpine Dec 4, 2018
LICENSE.md Clean up readme & friends (#151) Jul 29, 2019
README.md Clean up readme & friends (#151) Jul 29, 2019
azure-pipelines.yml Set up CI with Azure Pipelines Feb 13, 2019
deploy.cmd remove unused puppeteer dependency (#138) Jul 14, 2019
docker-compose-azure.yml fix volume directive Sep 25, 2018
docker-compose.yml Separate docker-compose strategies Sep 22, 2018
jest.config.js updated jest config globals, updated App component unit test from cod… Jun 11, 2019
package-lock.json migrate from chart.js to chartist (#150) Jul 28, 2019
package.json migrate from chart.js to chartist (#150) Jul 28, 2019
screenshot.png public release Apr 16, 2018
server.js Update dependencies. Add .eslintrc.json. Enable linting for .vue files. Jul 21, 2019
webpack.config.js migrate from chart.js to chartist (#150) Jul 28, 2019

README.md

electric-io

The cutest IoT dashboard of your dreams ☁️

screenshot of electric io dashboard

Built with:

Sections

Installation

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.

Native Installation

  1. Install NodeJS. You can see the recommended version in the “engines” entry in package.json.

  2. Install Git.

  3. Open your terminal and do the following:

    1. 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.

    2. Navigate to the electric-iodirectory:

      cd electric-io
      
    3. Install electric-io’s dependencies:

      npm install
      

      If this fails with an error message, you can have a look at common NPM errors.

  4. Open the file .env in and fill in the CONNECTION_STRING property with your Azure IoT Hub connection string.

  5. Optional. Specify the CONSUMER_GROUP in .env. If in doubt, you can skip this step.

  6. Go back to your terminal and start electric-io:

    npm start
    
  7. 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 Installation Method

Install Docker

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.

Clone the electric-io repository

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

Build and run this project

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

Build and run the project in simulating mode

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

Shut down the Docker Compose stack

docker-compose down

How to send the right data

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
}

Types of cards and their settings

Button

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:

  • Title: Text displayed at the top of the card
  • Device Id: The id of the device (from IoT Hub) that you want to call a method on
  • Device Method Name: The name of the device method you want to call on your device
  • Button text: The text you want your button to say, e.g. “turn on LED”

〰️〰️〰️〰️〰️〰️

Line Chart

This card will plot the last 20 numeric values it received of the property you’re watching

Fields:

  • Title: Text displayed at the top of the card
  • Device Id: The id of the device (from IoT Hub) that you want to display telemetry for
  • Data Property: The name of the device payload property you want to display the value of (eg. humidity)
  • Line Color: The color you’d like the plotted line and points to be. Accepts #00ff00, rgb(0,255,0), and salmonpink color formats 🌈

〰️〰️〰️〰️〰️〰️

Number

This card will display the last value it received from a numeric property you’re watching

Fields:

  • Title: Text displayed at the top of the card
  • Device Id: The id of the device (from IoT Hub) that you want to display telemetry for
  • Data Property: The name of the device payload property you want to display the value of (eg. humidity)
  • Text Color: The color you’d like the number to be. Accepts #00ff00, rgb(0,255,0), and salmonpink color formats 🌈

〰️〰️〰️〰️〰️〰️

Sticker

This card will display a sticker on your dashboard.

Fields:

  • Title: Text displayed at the top of the card
  • Url: A full URL link to the picture you want to display on the sticker. GIFs will work! MJPEG streams are also supported. You may be able to install mjpg-streamer or ffmpeg/ffserver on your device (e.g. Raspberry Pi) to stream MJPEG via HTTP.

〰️〰️〰️〰️〰️〰️

Text

The simplest of them all! This card will display text.

Fields:

  • Title: Text displayed at the top of the card
  • Text: Text to be displayed on the card. Markdown syntax is supported!

〰️〰️〰️〰️〰️

Got ideas for more cards? Open an issue on this repo and let me know! 👀

Transferring dashboard settings

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.

Locking your dashboard

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.

Browser support

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 💀.

Contributing

We gladly accept contributions!

If you’d like to contribute to this repo, please read the Contributing guide.

Code of conduct

To participate, please read and follow the Contributor Code of Conduct agreement.

You can’t perform that action at this time.