Alex Tyler / tiInterface

Personal web interface for the BasicKeyboard program.

Dependents:   BasicKeyboard

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?

UserRevisionLine numberNew 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: &nbsp</span><span id='statusbox1'>Disconnected</span></div>
alexandertyler 0:f456beccdf56 186 <br>
alexandertyler 0:f456beccdf56 187 <div><p>Current String:&nbsp<span id="currString"></span></p></div>
alexandertyler 0:f456beccdf56 188 <div><p>Last Saved String:&nbsp<span id="lastString"></span></p></div>
alexandertyler 0:f456beccdf56 189 <div id="keypressTable">
alexandertyler 0:f456beccdf56 190 <div><p>Current Key:&nbsp<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:&nbsp<span id="buttonvalue11"></span></div>
alexandertyler 0:f456beccdf56 195 <div>Button 2:&nbsp<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>