Details | Last modification | View Log | SVN | RSS feed
| Rev | Author | Line No. | Line |
|---|---|---|---|
| 1340 | arune | 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> |