document.write('
Data hosted with ♥ by Pastebin.com - Download Raw - See Original
  1. <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd\\">
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <h1>Real Time</h1>
  6. <script src="https://cdn.socket.io/socket.io-1.3.5.js"></script>
  7. <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  8. <script src="jquery/iphone-style-checkboxes.js"></script>
  9. <link rel="stylesheet" href="style.css">
  10. <script>
  11.   $(document).ready(function() {
  12.     $(\':checkbox\').iphoneStyle({
  13.         onChange: function(elem,val) {
  14.         if (val) {
  15.             socket.emit(\'publish\', {topic:"led",payload:"on"});
  16.         } else {
  17.             socket.emit(\'publish\', {topic:"led",payload:"off"});
  18.         }
  19.         }
  20.     });
  21.     });
  22. </script>
  23. <script>
  24.   var socket = io.connect(\'192.168.1.116:5000\');
  25.   socket.on(\'connect\', function () {
  26.     socket.on(\'mqtt\', function (msg) {
  27.       console.log(msg.topic+\' \'+msg.payload);
  28.       if (msg.payload == "off") {
  29.         if ($(\'input[name=led]\').is(\':checked\')) {
  30.           $(\'input[name=led]\').prop(\'checked\',false).change();
  31.         }
  32.       }
  33.       if (msg.payload == "on") {
  34.         if (!$(\'input[name=led]\').is(\':checked\')) {
  35.           $(\'input[name=led]\').prop(\'checked\',true).change();
  36.         }
  37.       }
  38.     });
  39.     socket.emit(\'subscribe\',{topic:\'led\'});
  40.   });
  41. </script>
  42. </head>
  43.  
  44. <body>
  45.   <div class=\'table\'>
  46.     <table>
  47.       <tr>
  48.         <td style=\'vertical-align: middle !important;\'>
  49.           LED:
  50.         </td>
  51.         <td>
  52.           <input name="led" checked=\'checked\' class=\'yesno\' type=\'checkbox\' />
  53.         </td>
  54.       </tr>
  55.     </table>
  56.   </div>
  57. </body>
  58. </html>
');