API tools faq
paste
Redfern_89

piev2.html

Redfern_89
Sep 19th, 2020 (edited)
137
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 4.47 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="ru-RU">
  3. <head>
  4.     <link rel="shortcut icon" type="image/gif" href='data:image/gif;base64,Qk12AgAAAAAAAHYAAAAoAAAAIAAAACAAAAABAAQAAAAAAAACAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAgAAAgAAAAICAAIAAAACAAIAAgIAAAICAgADAwMAAAAD/AAD/AAAA//8A/wAAAP8A/wD//wAA////AP///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////u7u7u7u7u7u7u7u7u7u7+7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7MzMzMzMzMzMzu7u7szMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzLu8y7vMu7zLu8y7vMu7zMy5vMurzLq8y8vMvLzLy8zMu7zLu8y7vMu7zLu8y7vMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzu7u7szMzMzMzMzMzO7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7+7u7u7u7u7u7u7u7u7u7v////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////'>
  5.     <title>PIE Arduino Webserver v2.0</title>
  6.     <script type="text/javascript">
  7.        
  8.         let domReady_Flag = 0;
  9.         let channel_TPL = '';
  10.         let reqAddr = '/';
  11.        
  12.         function send_request(addr, params, callbackResponse) {
  13.             let xhr = new XMLHttpRequest();
  14.             xhr.open('POST', addr);
  15.             xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  16.             xhr.send(params);
  17.            
  18.             if (typeof callbackResponse !== 'undefined') {
  19.                 if (typeof xhr.onload !== 'undefined') {
  20.                     xhr.onload = function() {
  21.                         if (xhr.status == 200) {
  22.                             callbackResponse(xhr.responseText);
  23.                         }
  24.                     }
  25.                 }
  26.             }
  27.         }
  28.  
  29.         function setChannel_state(channel, state) {
  30.             send_request(reqAddr, 'act=setChannel_state&state=' + state + '&channel=' + channel, function(response) {
  31.                 var channelTD = document.getElementById('ch' + channel) || undefined;
  32.                 if (channelTD) {
  33.                     try {
  34.                         var js = JSON.parse(response);
  35.                         channelTD.setAttribute('class', js.state);
  36.                     } catch (e) {
  37.                        
  38.                     }
  39.                 }
  40.             });
  41.         }
  42.        
  43.         function readChannel_State(channel, callback, callbackError) {
  44.            
  45.             send_request(reqAddr, 'act=readChannel_State&channel=' + channel, function(response) {
  46.                 try {
  47.                     var js = JSON.parse(response);
  48.                     result = js[channel];
  49.                     if (typeof callback !== 'undefined') callback(channel, result);
  50.                 } catch(e) {
  51.                     if (typeof callbackError !== 'undefined') callbackError(e);
  52.                 }
  53.             });
  54.         }
  55.        
  56.         setInterval(function() {
  57.             if (domReady_Flag) {
  58.                 for (var i = 1; i <= 5; i++) {
  59.                         readChannel_State(i, function(ch, state) {
  60.                         var td = document.getElementById('ch' + ch);
  61.                         if (typeof td !== 'undefined') {
  62.                             td.setAttribute('class', state);
  63.                         }
  64.                     });
  65.                 }
  66.             }
  67.            
  68.         }, 1000);
  69.        
  70.         window.onload = function() {
  71.             send_request(reqAddr, 'act=getChannels_Count', function(response) {
  72.                 try {
  73.                     var js = JSON.parse(response);
  74.                     var count = js.channels;
  75.                     var channels_Row = document.getElementById('channels_Row') || undefined;
  76.                     var channelsActions_Row = document.getElementById('channelsActions_Row') || undefined;
  77.                     var channelRow_TPL = '<td align="center" id="ch%{id}%" class="off"><b><br>Канал %{id}%<br><br></b></td>';
  78.                     var channelRowAction_TPL = '<td align="center"><input style="background:lime" type="button" value="Вкл" onClick="return setChannel_state(%{id}%, \'on\');" /><input type="button" value="Откл" onClick="return setChannel_state(%{id}%, \'off\');" /></td>';
  79.                    
  80.                     channelsActions_Row.innerHTML = '';
  81.                     channels_Row.innerHTML = '';
  82.                     // make the rows channels
  83.                     var html_data1='';
  84.                     var html_data2='';
  85.                     for (var i = 1; i <= count; i++) {
  86.                         html_data1 += channelRow_TPL.replace(/%\{id\}%/g, i);
  87.                         html_data2 += channelRowAction_TPL.replace(/%\{id\}%/g, i);
  88.                     }
  89.                    
  90.                     channels_Row.innerHTML = html_data1;
  91.                     channelsActions_Row.innerHTML = html_data2;
  92.                     domReady_Flag = 1;
  93.                 } catch (e) {
  94.                    
  95.                 }
  96.             });
  97.         }
  98.     </script>
  99.     <style type="text/css">
  100.          body {
  101.              background: lightgray;
  102.          }
  103.          td.on {
  104.              background: lime;
  105.          }
  106.          td.off {
  107.              background: gray;
  108.          }
  109.     </style>
  110. </head>
  111. <body>
  112.     <h1 align="center">PIE Home Server v2.0</h1>
  113.     <h2 align="center">(based on Arduino with W5500)</h2>
  114.     <table align="center"  cellspacing="5">
  115.         <tr>
  116.             <th colspan="5">
  117.                 <font color="blue">Доступные каналы для управления:</font>
  118.             </th>
  119.         </tr>
  120.         <tr id="channels_Row"></tr>
  121.         <tr id="channelsActions_Row"></tr>
  122.     </table>
  123. </body>
  124. </html>
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!