Controlling via web has become a norm these days. In this simple project, I will show you how to make an application that controls light bulb via web.
Surely it's not something new, but what you may see is that the web-based controlling stuff could only take a few steps to do it yourself. Anyone with some knowledge about web programming can make the web-based applications to control/monitor devices.
You can see the demo here:Hardware component
First is to set up hardware. Here, I use an Arduino Uno board, a PHPoC WiFi Shield and a PHPoC Arduino Relay Board.
Next, it comes to the "Web-based" part. Combining with PHPoC Shield, Arduino board became a Web server/WebSocket server. So, basically we need:
+ Client side code: provide a Web-based User Interface to control the light bulb. The UI should allow users to send the control command to Web server (Arduino board). The UI also displays the status of the light bulb sent in the response from the server. This Web page source code needs to be uploaded to the shield. Upon receiving HTTP request from Web browser (Web client), the shield (Web server) will send the interpreted Web files to Web browser.
+ Server side code: control the light bulb based on the data sent by Web browser. The code is run on Arduino board, and the flow is nothing than looping, check if there is any request from Web client in order to set the relay to turn on/off the light bulb, and then send the light bulb status to Web browser.
In this project, I made an SVG element to display the light bulb and a button to send the control command from Web. The Web browser and Web server communicate with each other via WebSocket. WebSocket connection suits real-time applications.
The more effort you spend on making the UI, the better it may look. But don't worry, there are tons of sharing resources available on the Internet, so you may find some cool free source code for UI instead of doing all the programming stuff by yourself.
Thanks for reading :D.
Learn more about relay in this tutorial