I have finally found some time last weekend to finalize my smart hot water tank controller project, finalized the code and have it now running for a week. I also put up a small and simple html page to control the unit by changing the value of an emoncms.org feed. I have three modes of operation – Off, On and Auto, the controller subscribes itself to that feed and changes its mode of operation based on its value. Code could be extended to fetch setpoints from feed values as well, but I don’t need that right now and hard-coded those.
<!DOCTYPE html> <html> <head> <title>Remote Control</title> <meta name='viewport' content='width=device-width, initial-scale=1'> <link rel='stylesheet' href='http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css' /> <script src='http://code.jquery.com/jquery-1.6.4.min.js'></script> <script src='http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js'></script> </head> <body><div data-role='page'><div data-role='header'><h1>Remote control</h1></div> <form data-ajax='false' action="http://emoncms.org/api/post" method="get"> <br> Mode:<select data-native-menu='false' name=csv id=csv> <option value='0'>Off</option> <option value='1'>On</option> <option value='2'>Auto</option> </select><br> <input type='hidden' name='node' value='4'></input> <input type='hidden' name='apikey' value='********API************'></input> <button type='reset'>Reset</button> <button type='submit'>Set</button> </form> </div </body></html>
Here is a screenshot of the control page on my badly beaten, but trusty phone, I use JQuery for fancy looks:
