document.write('
Data hosted with ♥ by Pastebin.com - Download Raw - See Original
  1. <html>
  2. <head>
  3. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  4. <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
  5. <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
  6. <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
  7. <style>
  8.  
  9. </style>
  10. <script \'text/javascript\'>
  11.     var data;
  12.     var ip=\'your ip address\'
  13.     var webSocket;
  14.     function ws() {
  15.             webSocket = new WebSocket("ws://"+ip+":9000");
  16.             webSocket.onmessage = function(e) {
  17.                parseData(e.data);
  18.             }
  19.             webSocket.onclose= function(){
  20.                 setTimeout(ws(),5000);
  21.             }
  22.     }
  23.  
  24.     function parseData(info) {
  25.         var data= info;
  26.         //run through the result
  27.         if(data!=null)
  28.            for(x=0;x<data.length;x++){
  29.             //read status and changed text of button
  30.             var status = data[x]==1?        $(\'#input_\'+x.toString()).data(\'text_true\'):$(\'#input_\'+x.toString()).data(\'text_false\');
  31.             $(\'#input_\'+x.toString()+\'  .ui-btn-text\').html(status);
  32.             //color the buttons
  33.             if(data[x]==\'1\')
  34.                 $(\'#input_\' +x.toString() ).css("color", $(\'#input_\'+x.toString()).data("textcolortrue"));
  35.             if(data[x]==\'0\')
  36.                 $(\'#input_\' +x.toString() ).css("color", $(\'#input_\'+x.toString()).data("textcolorfalse"));
  37.            }
  38.    }
  39.  
  40. $(document).ready(function(){
  41.     ws();
  42.     //bind all content with id containing \'input\' to click events
  43.     $("[id^=\'input\']").bind("click", function (event, ui) {
  44.             //we are sending the output number we want to toggle. we grab this from the
  45.             // $(this).data(\'command\')
  46.                 webSocket.send($(this).data(\'command\'));
  47.             });
  48.    });
  49. </script>
  50. </head>
  51. <body data-ajax=\'false\'>
  52. <div data-role=\'page\' class="ui-responsive-panel" data-ajax=\'false\'>
  53. <div data-role=\'content\'>
  54.    <div id=\'mh\'>
  55.     <h3>
  56.            <label style="position:relative; top:15px;" for=\'Porch_Light_Status\'>Porch Light:</label>
  57.             <div  class="ui-li-aside"  data-theme="a" data-inline="true" data-role="button"
  58.                id="input_0" name=\'Porch_Light_Status\'
  59.                style="text-align:center;width:100px;height:40px;margin-left:8px" data-command="0"
  60.                data-text_true="On" data-text_false="Off"
  61.                 data-textcolorfalse="Gray" data-textcolorTrue="Yellow">
  62.                 <img height=\'15px\' width=\'15px\' src=\'scripts/ajax-loader.gif\' />
  63.             </div>
  64.         </h3></br>
  65.     <h3>
  66.            <label style="position:relative; top:15px;" for=\'Entryway_Light_Status\'>Entryway Light:</label>
  67.             <div  class="ui-li-aside"  data-theme="a" data-inline="true" data-role="button"
  68.                id="input_1" name=\'Entryway_Light_Status\'
  69.                style="text-align:center;width:100px;height:40px" data-command="1"
  70.                data-text_true="On" data-text_false="Off"
  71.                        data-textcolorfalse="Gray" data-textcolorTrue="Yellow">
  72.                         <img height=\'15px\' width=\'15px\' src=\'/scripts/ajax-loader.gif\' />
  73.             </div>
  74.         </h3>
  75.  
  76.    </div>
  77. </div>
  78. </body>
  79. </html>
');