Personal web interface for the BasicKeyboard program.
tiButton.html@0:f456beccdf56, 2014-10-07 (annotated)
- Committer:
- alexandertyler
- Date:
- Tue Oct 07 18:34:04 2014 +0000
- Revision:
- 0:f456beccdf56
Final update
Who changed what in which revision?
User | Revision | Line number | New contents of line |
---|---|---|---|
alexandertyler | 0:f456beccdf56 | 1 | <html> |
alexandertyler | 0:f456beccdf56 | 2 | <head> |
alexandertyler | 0:f456beccdf56 | 3 | <link rel="stylesheet" type="text/css" href="tiCss.css"> |
alexandertyler | 0:f456beccdf56 | 4 | <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> |
alexandertyler | 0:f456beccdf56 | 5 | <script src="https://www.fabryq.net/fabryq/lib/fabryq.js"></script> |
alexandertyler | 0:f456beccdf56 | 6 | <script type="text/javascript"> |
alexandertyler | 0:f456beccdf56 | 7 | var alphaArray = []; |
alexandertyler | 0:f456beccdf56 | 8 | var currLetter; |
alexandertyler | 0:f456beccdf56 | 9 | var currKeyCode; |
alexandertyler | 0:f456beccdf56 | 10 | |
alexandertyler | 0:f456beccdf56 | 11 | |
alexandertyler | 0:f456beccdf56 | 12 | window.onkeydown = function(evt) { |
alexandertyler | 0:f456beccdf56 | 13 | evt = evt || window.event; |
alexandertyler | 0:f456beccdf56 | 14 | console.log(evt); |
alexandertyler | 0:f456beccdf56 | 15 | currKeyCode = evt.keyCode; |
alexandertyler | 0:f456beccdf56 | 16 | currLetter = String.fromCharCode(evt.keyCode); |
alexandertyler | 0:f456beccdf56 | 17 | if (evt.keyCode == 32) { |
alexandertyler | 0:f456beccdf56 | 18 | $('#keypress').text("Space"); |
alexandertyler | 0:f456beccdf56 | 19 | } else if (evt.keyCode == 190) { |
alexandertyler | 0:f456beccdf56 | 20 | $('#keypress').text("."); |
alexandertyler | 0:f456beccdf56 | 21 | } else if (evt.keyCode == 8) { |
alexandertyler | 0:f456beccdf56 | 22 | $('#keypress').text("Backspace"); |
alexandertyler | 0:f456beccdf56 | 23 | } else if(evt.keyCode == 13) { |
alexandertyler | 0:f456beccdf56 | 24 | $('#keypress').text("Enter"); |
alexandertyler | 0:f456beccdf56 | 25 | } else if (evt.ctrlKey) { |
alexandertyler | 0:f456beccdf56 | 26 | $('#keypress').text("Copy"); |
alexandertyler | 0:f456beccdf56 | 27 | } else { |
alexandertyler | 0:f456beccdf56 | 28 | $('#keypress').text(currLetter); |
alexandertyler | 0:f456beccdf56 | 29 | } |
alexandertyler | 0:f456beccdf56 | 30 | } |
alexandertyler | 0:f456beccdf56 | 31 | |
alexandertyler | 0:f456beccdf56 | 32 | |
alexandertyler | 0:f456beccdf56 | 33 | |
alexandertyler | 0:f456beccdf56 | 34 | // Fabryq example app 1. This app logs temperature data and button presses from a TI SensorTag |
alexandertyler | 0:f456beccdf56 | 35 | // and displays them in a webpage. |
alexandertyler | 0:f456beccdf56 | 36 | |
alexandertyler | 0:f456beccdf56 | 37 | |
alexandertyler | 0:f456beccdf56 | 38 | //put install id here |
alexandertyler | 0:f456beccdf56 | 39 | iid = 33; |
alexandertyler | 0:f456beccdf56 | 40 | |
alexandertyler | 0:f456beccdf56 | 41 | app = undefined; |
alexandertyler | 0:f456beccdf56 | 42 | |
alexandertyler | 0:f456beccdf56 | 43 | // Fill in the access token here |
alexandertyler | 0:f456beccdf56 | 44 | token="798dd629aab0f603614b87e4019385c77e13df5a702d4276cf0d78b6b4e454bb"; |
alexandertyler | 0:f456beccdf56 | 45 | |
alexandertyler | 0:f456beccdf56 | 46 | $(function() { |
alexandertyler | 0:f456beccdf56 | 47 | |
alexandertyler | 0:f456beccdf56 | 48 | $('#acctable1').hide(); |
alexandertyler | 0:f456beccdf56 | 49 | $('#humidtable1').hide(); |
alexandertyler | 0:f456beccdf56 | 50 | //$('#buttontable1').hide(); |
alexandertyler | 0:f456beccdf56 | 51 | |
alexandertyler | 0:f456beccdf56 | 52 | $('#statusbox').hide(); |
alexandertyler | 0:f456beccdf56 | 53 | //$('#statusbox1').hide(); |
alexandertyler | 0:f456beccdf56 | 54 | |
alexandertyler | 0:f456beccdf56 | 55 | |
alexandertyler | 0:f456beccdf56 | 56 | app = new fabryqApp(); |
alexandertyler | 0:f456beccdf56 | 57 | app.connect(iid, connected, handler, token, "client", true); |
alexandertyler | 0:f456beccdf56 | 58 | |
alexandertyler | 0:f456beccdf56 | 59 | }); |
alexandertyler | 0:f456beccdf56 | 60 | |
alexandertyler | 0:f456beccdf56 | 61 | var bean; |
alexandertyler | 0:f456beccdf56 | 62 | var hrm; |
alexandertyler | 0:f456beccdf56 | 63 | // Runs after a connection is established to the fabryq server |
alexandertyler | 0:f456beccdf56 | 64 | function connected(){ |
alexandertyler | 0:f456beccdf56 | 65 | |
alexandertyler | 0:f456beccdf56 | 66 | // The SET commands enable and configure the sensors and the NOTIFY |
alexandertyler | 0:f456beccdf56 | 67 | // commands set up notifcations for changed sensor values. The GET |
alexandertyler | 0:f456beccdf56 | 68 | // commands are optional and can be used to read the last value of |
alexandertyler | 0:f456beccdf56 | 69 | // a sensor. |
alexandertyler | 0:f456beccdf56 | 70 | |
alexandertyler | 0:f456beccdf56 | 71 | |
alexandertyler | 0:f456beccdf56 | 72 | app.dataHandler = handler; |
alexandertyler | 0:f456beccdf56 | 73 | |
alexandertyler | 0:f456beccdf56 | 74 | var dts = app.getDeviceTypes(); |
alexandertyler | 0:f456beccdf56 | 75 | |
alexandertyler | 0:f456beccdf56 | 76 | for(var dt in dts){ |
alexandertyler | 0:f456beccdf56 | 77 | |
alexandertyler | 0:f456beccdf56 | 78 | if(dts[dt].name == "TI SensorTag"){ |
alexandertyler | 0:f456beccdf56 | 79 | devices = dts[dt].getDevices(); |
alexandertyler | 0:f456beccdf56 | 80 | |
alexandertyler | 0:f456beccdf56 | 81 | for(var dev in devices){ |
alexandertyler | 0:f456beccdf56 | 82 | device = devices[dev]; |
alexandertyler | 0:f456beccdf56 | 83 | console.log(device); |
alexandertyler | 0:f456beccdf56 | 84 | //device.SET("humidity_service", "humidity_enable", "01"); |
alexandertyler | 0:f456beccdf56 | 85 | //device.NOTIFY("humidity_service", "humidity_value"); |
alexandertyler | 0:f456beccdf56 | 86 | device.NOTIFY("button_service", "button_value"); |
alexandertyler | 0:f456beccdf56 | 87 | |
alexandertyler | 0:f456beccdf56 | 88 | device.errorHandler = resetHandler; |
alexandertyler | 0:f456beccdf56 | 89 | |
alexandertyler | 0:f456beccdf56 | 90 | } |
alexandertyler | 0:f456beccdf56 | 91 | } |
alexandertyler | 0:f456beccdf56 | 92 | |
alexandertyler | 0:f456beccdf56 | 93 | } |
alexandertyler | 0:f456beccdf56 | 94 | |
alexandertyler | 0:f456beccdf56 | 95 | } |
alexandertyler | 0:f456beccdf56 | 96 | |
alexandertyler | 0:f456beccdf56 | 97 | function resetHandler(e){ |
alexandertyler | 0:f456beccdf56 | 98 | console.log(e); |
alexandertyler | 0:f456beccdf56 | 99 | if(e.name=="ERROR_VIRTUAL_DEVICE_TIMED_OUT") { |
alexandertyler | 0:f456beccdf56 | 100 | //e.object.SET("humidity_service", "humidity_enable", "01"); |
alexandertyler | 0:f456beccdf56 | 101 | } |
alexandertyler | 0:f456beccdf56 | 102 | return false; |
alexandertyler | 0:f456beccdf56 | 103 | } |
alexandertyler | 0:f456beccdf56 | 104 | |
alexandertyler | 0:f456beccdf56 | 105 | // Runs on the result (success or failure) of all commands |
alexandertyler | 0:f456beccdf56 | 106 | // Update any UI with new data here |
alexandertyler | 0:f456beccdf56 | 107 | |
alexandertyler | 0:f456beccdf56 | 108 | function handler(completed_action) { |
alexandertyler | 0:f456beccdf56 | 109 | // console.log(completed_action); |
alexandertyler | 0:f456beccdf56 | 110 | // console.log(completed_action.parsedResults) |
alexandertyler | 0:f456beccdf56 | 111 | if(completed_action.result!=null){ |
alexandertyler | 0:f456beccdf56 | 112 | |
alexandertyler | 0:f456beccdf56 | 113 | var currentvUUID = parseInt(completed_action.vUUID); |
alexandertyler | 0:f456beccdf56 | 114 | |
alexandertyler | 0:f456beccdf56 | 115 | $('#sensorname1').text(app.fabryqNodeRoot.findDeviceByvUUID(completed_action.vUUID).name+" "); |
alexandertyler | 0:f456beccdf56 | 116 | |
alexandertyler | 0:f456beccdf56 | 117 | $('#statusbox1').show(); |
alexandertyler | 0:f456beccdf56 | 118 | $('#statusbox1').text("Connected") |
alexandertyler | 0:f456beccdf56 | 119 | if(completed_action.parsedResults!=undefined){ |
alexandertyler | 0:f456beccdf56 | 120 | /*if(completed_action.parsedResults["accel_x"]!=undefined){ |
alexandertyler | 0:f456beccdf56 | 121 | $('#acctable1').show(); |
alexandertyler | 0:f456beccdf56 | 122 | $('#accvalue11').text(completed_action.parsedResults["accel_x"]); |
alexandertyler | 0:f456beccdf56 | 123 | $('#accvalue21').text(completed_action.parsedResults["accel_y"]); |
alexandertyler | 0:f456beccdf56 | 124 | $('#accvalue31').text(completed_action.parsedResults["accel_z"]); |
alexandertyler | 0:f456beccdf56 | 125 | } |
alexandertyler | 0:f456beccdf56 | 126 | if(completed_action.parsedResults["humidity"]!=undefined){ |
alexandertyler | 0:f456beccdf56 | 127 | $('#humidtable1').show(); |
alexandertyler | 0:f456beccdf56 | 128 | var d = new Date(); |
alexandertyler | 0:f456beccdf56 | 129 | $('#humvalue11').text((Math.round(100.0*completed_action.parsedResults["temperature"])/100.0)+" at "+d.toTimeString()); |
alexandertyler | 0:f456beccdf56 | 130 | $('#humvalue21').text(Math.round(completed_action.parsedResults["humidity"])); |
alexandertyler | 0:f456beccdf56 | 131 | }*/ |
alexandertyler | 0:f456beccdf56 | 132 | if(completed_action.parsedResults["button"]!=undefined){ |
alexandertyler | 0:f456beccdf56 | 133 | $('#buttontable1').show(); |
alexandertyler | 0:f456beccdf56 | 134 | var val = completed_action.parsedResults["button"]; |
alexandertyler | 0:f456beccdf56 | 135 | var button1 = (val==1||val==3)?1:0; |
alexandertyler | 0:f456beccdf56 | 136 | var button2 = (val==2||val==3)?1:0; |
alexandertyler | 0:f456beccdf56 | 137 | $('#buttonvalue11').text(button1); |
alexandertyler | 0:f456beccdf56 | 138 | $('#buttonvalue21').text(button2); |
alexandertyler | 0:f456beccdf56 | 139 | if (button2) { |
alexandertyler | 0:f456beccdf56 | 140 | recordAlpha(); |
alexandertyler | 0:f456beccdf56 | 141 | } |
alexandertyler | 0:f456beccdf56 | 142 | if (button1) { |
alexandertyler | 0:f456beccdf56 | 143 | saveWord(); |
alexandertyler | 0:f456beccdf56 | 144 | } |
alexandertyler | 0:f456beccdf56 | 145 | |
alexandertyler | 0:f456beccdf56 | 146 | |
alexandertyler | 0:f456beccdf56 | 147 | } |
alexandertyler | 0:f456beccdf56 | 148 | } |
alexandertyler | 0:f456beccdf56 | 149 | |
alexandertyler | 0:f456beccdf56 | 150 | |
alexandertyler | 0:f456beccdf56 | 151 | |
alexandertyler | 0:f456beccdf56 | 152 | } else { |
alexandertyler | 0:f456beccdf56 | 153 | $('#statusbox').show(); |
alexandertyler | 0:f456beccdf56 | 154 | $('#statusbox').text("Connection failed. Make sure the device is on, then refresh the page."); |
alexandertyler | 0:f456beccdf56 | 155 | } |
alexandertyler | 0:f456beccdf56 | 156 | } |
alexandertyler | 0:f456beccdf56 | 157 | |
alexandertyler | 0:f456beccdf56 | 158 | function recordAlpha() { |
alexandertyler | 0:f456beccdf56 | 159 | if (currKeyCode == 8) { |
alexandertyler | 0:f456beccdf56 | 160 | alphaArray.pop(); |
alexandertyler | 0:f456beccdf56 | 161 | } else if (currKeyCode == 13) { |
alexandertyler | 0:f456beccdf56 | 162 | saveWord(); |
alexandertyler | 0:f456beccdf56 | 163 | alphaArray.length = 0; |
alexandertyler | 0:f456beccdf56 | 164 | } else if (currKeyCode == 190) { |
alexandertyler | 0:f456beccdf56 | 165 | alphaArray.push("."); |
alexandertyler | 0:f456beccdf56 | 166 | } else { |
alexandertyler | 0:f456beccdf56 | 167 | alphaArray.push(currLetter); |
alexandertyler | 0:f456beccdf56 | 168 | } |
alexandertyler | 0:f456beccdf56 | 169 | $('#currString').text(alphaArray.join("")); |
alexandertyler | 0:f456beccdf56 | 170 | |
alexandertyler | 0:f456beccdf56 | 171 | } |
alexandertyler | 0:f456beccdf56 | 172 | |
alexandertyler | 0:f456beccdf56 | 173 | function saveWord() { |
alexandertyler | 0:f456beccdf56 | 174 | prompt("Press RIGHT to copy, then LEFT to return.", alphaArray.join("")); |
alexandertyler | 0:f456beccdf56 | 175 | |
alexandertyler | 0:f456beccdf56 | 176 | $('#lastString').text(alphaArray.join("")); |
alexandertyler | 0:f456beccdf56 | 177 | } |
alexandertyler | 0:f456beccdf56 | 178 | |
alexandertyler | 0:f456beccdf56 | 179 | |
alexandertyler | 0:f456beccdf56 | 180 | </script> |
alexandertyler | 0:f456beccdf56 | 181 | </head> |
alexandertyler | 0:f456beccdf56 | 182 | <h1>Hands-Free</h1> |
alexandertyler | 0:f456beccdf56 | 183 | <body id=container> |
alexandertyler | 0:f456beccdf56 | 184 | <div><span id='statusbox'>Disconnected</span></div><br> |
alexandertyler | 0:f456beccdf56 | 185 | <div id="sensorStat"> <span id="sensorname1">Remote Status:  </span><span id='statusbox1'>Disconnected</span></div> |
alexandertyler | 0:f456beccdf56 | 186 | <br> |
alexandertyler | 0:f456beccdf56 | 187 | <div><p>Current String: <span id="currString"></span></p></div> |
alexandertyler | 0:f456beccdf56 | 188 | <div><p>Last Saved String: <span id="lastString"></span></p></div> |
alexandertyler | 0:f456beccdf56 | 189 | <div id="keypressTable"> |
alexandertyler | 0:f456beccdf56 | 190 | <div><p>Current Key: <span id="keypress"></span></p></div> |
alexandertyler | 0:f456beccdf56 | 191 | </div><br> |
alexandertyler | 0:f456beccdf56 | 192 | <div id="buttontable1"> |
alexandertyler | 0:f456beccdf56 | 193 | <div> Button Data </div> |
alexandertyler | 0:f456beccdf56 | 194 | <div>Button 1: <span id="buttonvalue11"></span></div> |
alexandertyler | 0:f456beccdf56 | 195 | <div>Button 2: <span id="buttonvalue21"></span></div> |
alexandertyler | 0:f456beccdf56 | 196 | </div> |
alexandertyler | 0:f456beccdf56 | 197 | <br> |
alexandertyler | 0:f456beccdf56 | 198 | </body> |
alexandertyler | 0:f456beccdf56 | 199 | </html> |