AWS IOT Project Architecture
My latest project allows me to utilize a web application to change the state of an IoT device. I wanted to test out the Drag-n-Drop capability of HTML5 so I use that capability built into the browser. You can basically change the color of the IoT device by dragging and dropping one of the color blocks on top of the IoT device. You can also turn the IoT device on/off by clicking on the on/off button. I have added a more enhanced version of the IoT control page that runs in what I would call a “Serverless” configuration. All of the functionality is implemented through AWS S3, Lambda, MQTT over Websockets and an API gateway. The device that you are controlling actually runs a version of Linux and the control software is written in Python but all of the client control has been implemented in the AWS cloud without a server to maintain. The best enhancement I made was to make the web interface aware of other clients (i.e. if another client changes the state of the device your webpage is dynamically updated to reflect this change). You can access the project on my website using the following link:
IoT Control (Serverless)
The older version that utilizes PHP (without some of the enhancements) can be found with the following link:
NOTE: I have tested this with Chrome (Version 66.0.3359.181 (64-bit)) and Microsoft Edge (Microsoft Edge 42.17134.1.0 / Microsoft EdgeHTML 17.17134)