rampak21 / dashboard-for-everybody Goto Github PK

Check out the documentation page for this project!

A Dashboard for Everybody is a small, speculative demo project that shows how real-time dashboards, like those used for IoT systems, can be enhanced using accessible design and development practices.

It is intended to be an educational resource providing accessible solutions for common UI/UX challenges found in dashboards, like dealing with charts, working with asynchronous data, and handling dynamic content.

It was (mostly) built as part of IoT HackDay 2019 in St. Paul, MN by Jason Webb and John Haus.

• Fully operable via keyboard
• Chart data is available to people using screen readers through visually-hidden tables.
• Important asynchronous information (like the availability of input and output devices) is announced through live regions
• All focusable and interactive elements have strong, consistent focus indicators
• Meets WCAG 2.0 (Level AA) requirements
• Works great on mobile devices and tablets, which are very popular among people with motor and visual conditions

• Vanilla ES6 JavaScript for interactivity, logic, and DOM manipulation
• Chart.js for live sensor data charts
• MQTT.js for communication with IoT-enabled input and output devices
• Semantic HTML5
• Light usage of ARIA based on WAI-ARIA Authoring Practices and insight from real users
• Gulp-based build system
• Sass for styling, organized using the 7-1 pattern

See the README under the ./dashboard folder for details.

To demo how the dashboard might be used with real hardware, we built two IoT-enabled devices during IoT Hackday - one to feed data to the dashboard and another to receive data and create physical notifications. The devices and dashboard all communicated over MQTT thanks to the Mosquitto test server.

See this diagram for a breakdown of how the whole system was set up.

Both devices use Adafruit Huzzah32 boards and communicate over MQTT using the PubSubClient Arduino library.

1. Has a Sharp 2Y0A02 infrared distance sensor connected to pin 32
2. Reads sensor data and transmits it to dashboard using MQTT (see ./Input_Device for the Arduino sketch)

1. Has a hobby DC motor connected to digital pin 12 via a L298-based motor controller
2. Controls the motor based on MQTT messages sent from the dashboard (see ./Output_Device for the Arduino sketch)