Subversion Repositories HomeAutomation

Rev

Blame | Last modification | View Log | SVN | RSS feed

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  3.     <head id="head">
  4.         <meta name="robots" content="nofollow"/>
  5.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  6.  
  7.         <title>Interactive remote control interface</title>
  8.        
  9.         <style type="text/css">
  10.             body
  11.             {
  12.                 font-family: arial;
  13.             }
  14.        
  15.             .clear
  16.             {
  17.                 clear: both;
  18.             }
  19.        
  20.             #remoteList
  21.             {
  22.                 width: 300px;
  23.                 border-right: 2px solid #DDDDDD;
  24.                 background-color: #EEEEEE;
  25.                 text-align: center;
  26.                 position: absolute;
  27.                 top: 0px;
  28.                 left: 0px;
  29.                 bottom: 382px;
  30.             }
  31.            
  32.             #remoteList #remoteListMain
  33.             {
  34.                 position: absolute;
  35.                 top: 30px;
  36.                 left: 0px;
  37.                 bottom: 0px;
  38.                 right: 0px;
  39.                 overflow: auto;
  40.             }
  41.            
  42.             #remoteList .remoteListTitle, #remoteInformation .remoteInformationTitle, #remoteButtons .remoteButtonsTitle, #remoteLog .remoteLogTitle
  43.             {
  44.                 padding: 5px;
  45.                 color: black;
  46.                 background-color: gray;
  47.                 font-weight: bold;
  48.                 height: 20px;
  49.                 text-align: center;
  50.             }
  51.        
  52.             #remoteList .remote
  53.             {
  54.                 cursor: pointer;
  55.                 border: 2px solid gray;
  56.                 padding: 5px;
  57.                 margin: 10px;
  58.                 color: black;
  59.                 background-color: #FFF8BD;
  60.             }
  61.            
  62.             #remoteList .remote:hover, #remoteList .remoteSelected
  63.             {
  64.                 color: white;
  65.                 background-color: gray;
  66.             }
  67.            
  68.             #remoteList .remote:active
  69.             {
  70.                 color: white;
  71.                 background-color: black;
  72.             }
  73.            
  74.             #remoteInformation
  75.             {
  76.                 width: 300px;
  77.                 height: 380px;
  78.                 border-right: 2px solid #DDDDDD;
  79.                 border-top: 2px solid #DDDDDD;
  80.                 background-color: #EEEEEE;
  81.                 text-align: center;
  82.                 position: absolute;
  83.                 bottom: 0px;
  84.                 left: 0px;
  85.             }
  86.            
  87.             #remoteInformation .remoteInformationSubTitle
  88.             {
  89.                 font-weight: bold;
  90.                 border-bottom: 2px solid #DDDDDD;
  91.                 border-top: 2px solid #DDDDDD;
  92.                 padding: 5px;
  93.                
  94.             }
  95.            
  96.             #remoteInformation .remoteInformationData
  97.             {
  98.                 padding: 10px 10px 15px 10px;
  99.                 background-color: white;
  100.             }
  101.            
  102.             #remoteButtons
  103.             {
  104.                 text-align: center;
  105.                 position: absolute;
  106.                 top: 0px;
  107.                 left: 302px;
  108.                 bottom: 202px;
  109.                 right: 0px;
  110.             }
  111.            
  112.             #remoteButtons #remoteButtonsMain
  113.             {
  114.                 position: absolute;
  115.                 top: 30px;
  116.                 left: 0px;
  117.                 bottom: 0px;
  118.                 right: 0px;
  119.                 overflow: auto;
  120.                 padding-top: 10px;
  121.             }
  122.            
  123.             #remoteButtons .button
  124.             {
  125.                 cursor: pointer;
  126.                 border: 2px solid gray;
  127.                 padding: 5px;
  128.                 margin: 0px 0px 10px 10px;
  129.                 color: black;
  130.                 background-color: #FFF8BD;
  131.                 width: 300px;
  132.                 float: left;
  133.             }
  134.            
  135.             #remoteButtons .button:hover
  136.             {
  137.                 color: white;
  138.                 background-color: gray;
  139.             }
  140.            
  141.             #remoteButtons .button:active
  142.             {
  143.                 color: white;
  144.                 background-color: black;
  145.             }
  146.            
  147.             #remoteLog
  148.             {
  149.                 border-top: 2px solid gray;
  150.                 position: absolute;
  151.                 bottom: 0px;
  152.                 right: 0px;
  153.                 left: 302px;
  154.                 height: 200px;
  155.             }
  156.            
  157.             #remoteLog #remoteLogMain
  158.             {
  159.                 padding: 5px;
  160.                 position: absolute;
  161.                 top: 30px;
  162.                 left: 0px;
  163.                 bottom: 0px;
  164.                 right: 0px;
  165.                 overflow: auto;
  166.             }
  167.            
  168.             #remoteLog .remoteLogLine
  169.             {
  170.                 font-family: monospace;
  171.             }
  172.         </style>
  173.        
  174.         <script src="prototype.js" type="text/javascript"></script>
  175.         <script src="IRRemotes.js.php" type="text/javascript"></script>
  176.        
  177.         <script type="text/javascript">
  178.             function onLoadHandler()
  179.             {
  180.                 log("Welcome to the interactive remote control interface");
  181.            
  182.                 var remoteListElement = $('remoteListMain');
  183.            
  184.                 remotes.each(function(remote)
  185.                 {
  186.                     var element = document.createElement("div");
  187.                     element.innerHTML = remote['name'];
  188.                     element.addClassName("remote");
  189.                     element.onclick = function(event) { selectRemote(remote); };
  190.                     remoteListElement.appendChild(element);
  191.                 });
  192.                
  193.                 selectRemote(remotes[0]);
  194.             }
  195.  
  196.             function log(text)
  197.             {
  198.                 var date = new Date();
  199.                 var line = new Element('div', { 'class': 'remoteLogLine' }).update(date.toString() + ": " + text);
  200.                 $('remoteLogMain').appendChild(line);
  201.                 $('remoteLogMain').scrollTop = $('remoteLogMain').scrollHeight;
  202.             }
  203.  
  204.             function selectRemote(remote)
  205.             {
  206.                 $('remoteInformationName').innerHTML = remote['name'];
  207.                 $('remoteInformationProtocol').innerHTML = remote['protocol'];
  208.                 $('remoteInformationBrand').innerHTML = remote['brand'];
  209.                 $('remoteInformationModel').innerHTML = remote['model'];
  210.            
  211.                 $('remoteListMain').childElements().each(function(element)
  212.                 {
  213.                     if (element.innerHTML == remote['name'])
  214.                     {
  215.                         element.addClassName("remoteSelected");
  216.                     }
  217.                     else
  218.                     {
  219.                         element.removeClassName("remoteSelected");
  220.                     }
  221.                 });
  222.            
  223.            
  224.                 var remoteButtonsElement = $('remoteButtonsMain');
  225.            
  226.                 remoteButtonsElement.childElements().each(function(element)
  227.                 {
  228.                     element.remove();
  229.                 });
  230.                
  231.                 var count = 0;
  232.                
  233.                 for (var code in remote['codes'])
  234.                 {
  235.                     var element = document.createElement("div");
  236.                     element.innerHTML = remote['codes'][code];
  237.                     element.addClassName("button");
  238.                     element.id = code;
  239.                     element.onmousedown = function(event) { buttonPressed(remote, this.id); };
  240.                     element.onmouseup = function(event) { buttonReleased(remote, this.id); };
  241.                     remoteButtonsElement.appendChild(element);
  242.                     count++;
  243.                 }
  244.                
  245.                 var element = document.createElement("div");
  246.                 element.addClassName("clear");
  247.                 remoteButtonsElement.appendChild(element);
  248.                
  249.                 log(remote['name'] + " selected, it has " + count + " buttons");
  250.             }
  251.            
  252.             function buttonPressed(remote, code)
  253.             {
  254.                 log(remote['codes'][code] + ", code = " + code + ", pressed on " + remote['name']);
  255.                 ajaxFunction('?remote=' + remote['name'] + '&button=' + remote['codes'][code] + '&code=' + code + '&state=Pressed');
  256.             }
  257.            
  258.             function buttonReleased(remote, code)
  259.             {
  260.                 log(remote['codes'][code] + ", code = " + code + ", released on " + remote['name']);
  261.                 ajaxFunction('?remote=' + remote['name'] + '&button=' + remote['codes'][code] + '&code=' + code + '&state=Released');
  262.             }
  263.            
  264.             function ajaxFunction(dataToSend)
  265.             {
  266.                 var xmlhttp;
  267.                
  268.                 if (window.XMLHttpRequest)
  269.                 {
  270.                     // code for IE7+, Firefox, Chrome, Opera, Safari
  271.                     xmlhttp = new XMLHttpRequest();
  272.                 }
  273.                 else if (window.ActiveXObject)
  274.                 {
  275.                     // code for IE6, IE5
  276.                     xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  277.                 }
  278.                 else
  279.                 {
  280.                     log("Your browser does not support XMLHTTP!");
  281.                 }
  282.  
  283.                 xmlhttp.open("GET", "remote.php" + dataToSend, true);
  284.                 xmlhttp.send(null);
  285.  
  286.                 xmlhttp.onreadystatechange = function()
  287.                 {
  288.                     if (xmlhttp.readyState == 4)
  289.                     {
  290.                         log("Server responded with \"" + xmlhttp.responseText + "\"");
  291.                         //alert('I was executed');
  292.                         // Get data from the server's response
  293.                     }
  294.                 }
  295.             }
  296.        
  297.         </script>
  298.     </head>
  299.     <body onload="onLoadHandler()">
  300.         <div id="remoteInformation">
  301.             <div class="remoteInformationTitle">
  302.                 Remote Information
  303.             </div>
  304.            
  305.             <div class="remoteInformationSubTitle">
  306.                 Name
  307.             </div>
  308.             <div id="remoteInformationName" class="remoteInformationData"></div>
  309.            
  310.             <div class="remoteInformationSubTitle">
  311.                 Protocol
  312.             </div>
  313.             <div id="remoteInformationProtocol" class="remoteInformationData"></div>
  314.            
  315.             <div class="remoteInformationSubTitle">
  316.                 Brand
  317.             </div>
  318.             <div id="remoteInformationBrand" class="remoteInformationData"></div>
  319.            
  320.             <div class="remoteInformationSubTitle">
  321.                 Model
  322.             </div>
  323.             <div id="remoteInformationModel" class="remoteInformationData"></div>
  324.         </div>
  325.        
  326.         <div id="remoteList">
  327.             <div class="remoteListTitle">
  328.                 Available IR Remotes
  329.             </div>
  330.             <div id="remoteListMain"></div>
  331.         </div>
  332.        
  333.         <div id="remoteButtons">
  334.             <div class="remoteButtonsTitle">
  335.                 Buttons
  336.             </div>
  337.             <div id="remoteButtonsMain"></div>
  338.         </div>
  339.        
  340.         <div id="remoteLog">
  341.             <div class="remoteLogTitle">
  342.                 Log
  343.             </div>
  344.             <div id="remoteLogMain"></div>
  345.         </div>
  346.        
  347.     </body>
  348. </html>
  349.