Personal web interface for the BasicKeyboard program.

Dependents:   BasicKeyboard

Files at this revision

API Documentation at this revision

Comitter:
alexandertyler
Date:
Tue Oct 07 18:34:04 2014 +0000
Commit message:
Final update

Changed in this revision

tiButton.html Show annotated file Show diff for this revision Revisions of this file
tiCss.css Show annotated file Show diff for this revision Revisions of this file
diff -r 000000000000 -r f456beccdf56 tiButton.html
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/tiButton.html	Tue Oct 07 18:34:04 2014 +0000
@@ -0,0 +1,199 @@
+<html>
+<head>
+<link rel="stylesheet" type="text/css" href="tiCss.css">
+<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
+<script src="https://www.fabryq.net/fabryq/lib/fabryq.js"></script>
+<script type="text/javascript">
+    var alphaArray = [];
+    var currLetter;
+    var currKeyCode;
+
+
+    window.onkeydown = function(evt) {
+        evt = evt || window.event;
+        console.log(evt);
+        currKeyCode = evt.keyCode;
+        currLetter = String.fromCharCode(evt.keyCode);
+        if (evt.keyCode == 32) {
+            $('#keypress').text("Space");
+        } else if (evt.keyCode == 190) {
+            $('#keypress').text(".");
+        } else if (evt.keyCode == 8) {
+            $('#keypress').text("Backspace");
+        } else if(evt.keyCode == 13) {
+            $('#keypress').text("Enter");
+        } else if (evt.ctrlKey) {
+            $('#keypress').text("Copy");
+        } else {
+            $('#keypress').text(currLetter);
+        }
+    }
+
+    
+    
+    // Fabryq example app 1. This app logs temperature data and button presses from a TI SensorTag 
+    // and displays them in a webpage. 
+
+
+    //put install id here
+    iid = 33; 
+
+    app = undefined;
+
+    // Fill in the access token here
+    token="798dd629aab0f603614b87e4019385c77e13df5a702d4276cf0d78b6b4e454bb";
+
+    $(function() {
+
+        $('#acctable1').hide();
+        $('#humidtable1').hide();
+        //$('#buttontable1').hide();
+
+        $('#statusbox').hide();
+        //$('#statusbox1').hide();
+
+
+        app = new fabryqApp(); 
+        app.connect(iid, connected, handler, token, "client", true);
+
+    });
+
+    var bean;
+    var hrm;
+    // Runs after a connection is established to the fabryq server
+    function connected(){
+
+        // The SET commands enable and configure the sensors and the NOTIFY
+        // commands set up notifcations for changed sensor values. The GET
+        // commands are optional and can be used to read the last value of 
+        // a sensor.
+
+
+        app.dataHandler = handler;
+
+        var dts = app.getDeviceTypes();
+
+        for(var dt in dts){
+
+            if(dts[dt].name == "TI SensorTag"){
+                devices = dts[dt].getDevices();
+
+                for(var dev in devices){
+                    device = devices[dev];
+                    console.log(device);
+                    //device.SET("humidity_service", "humidity_enable", "01");
+                    //device.NOTIFY("humidity_service", "humidity_value");
+                    device.NOTIFY("button_service", "button_value");
+
+                    device.errorHandler = resetHandler;
+
+                }
+            } 
+
+        }
+
+    }
+
+    function resetHandler(e){
+        console.log(e);
+                if(e.name=="ERROR_VIRTUAL_DEVICE_TIMED_OUT") {
+             //e.object.SET("humidity_service", "humidity_enable", "01");
+                }
+        return false;
+    }
+
+    // Runs on the result (success or failure) of all commands
+    // Update any UI with new data here
+
+    function handler(completed_action) {
+        // console.log(completed_action);
+        // console.log(completed_action.parsedResults)
+        if(completed_action.result!=null){
+
+            var currentvUUID = parseInt(completed_action.vUUID);
+
+            $('#sensorname1').text(app.fabryqNodeRoot.findDeviceByvUUID(completed_action.vUUID).name+" ");
+
+            $('#statusbox1').show();
+            $('#statusbox1').text("Connected")
+            if(completed_action.parsedResults!=undefined){
+                /*if(completed_action.parsedResults["accel_x"]!=undefined){
+                    $('#acctable1').show();
+                    $('#accvalue11').text(completed_action.parsedResults["accel_x"]);
+                    $('#accvalue21').text(completed_action.parsedResults["accel_y"]);
+                    $('#accvalue31').text(completed_action.parsedResults["accel_z"]);
+                }
+                if(completed_action.parsedResults["humidity"]!=undefined){
+                    $('#humidtable1').show();
+                    var d = new Date();
+                    $('#humvalue11').text((Math.round(100.0*completed_action.parsedResults["temperature"])/100.0)+" at "+d.toTimeString());
+                    $('#humvalue21').text(Math.round(completed_action.parsedResults["humidity"]));
+                }*/
+                if(completed_action.parsedResults["button"]!=undefined){
+                    $('#buttontable1').show();
+                    var val = completed_action.parsedResults["button"];
+                    var button1 = (val==1||val==3)?1:0;
+                    var button2 = (val==2||val==3)?1:0;
+                    $('#buttonvalue11').text(button1);
+                    $('#buttonvalue21').text(button2);
+                    if (button2) {
+                        recordAlpha();
+                    }
+                    if (button1) {
+                        saveWord();
+                    }
+                    
+
+                }
+            }
+
+
+
+        } else {
+            $('#statusbox').show();
+            $('#statusbox').text("Connection failed. Make sure the device is on, then refresh the page.");
+        }
+    }
+
+    function recordAlpha() {
+        if (currKeyCode == 8) {
+            alphaArray.pop();
+        } else if (currKeyCode == 13) { 
+            saveWord();
+            alphaArray.length = 0;
+        } else if (currKeyCode == 190) {
+            alphaArray.push(".");
+        } else {
+            alphaArray.push(currLetter);
+        }
+        $('#currString').text(alphaArray.join(""));
+       
+    }
+    
+    function saveWord() {
+        prompt("Press RIGHT to copy, then LEFT to return.", alphaArray.join(""));
+        
+        $('#lastString').text(alphaArray.join(""));            
+    }
+    
+
+</script>
+</head>
+<h1>Hands-Free</h1>
+<body id=container>
+<div><span id='statusbox'>Disconnected</span></div><br>
+<div id="sensorStat"> <span id="sensorname1">Remote Status: &nbsp</span><span id='statusbox1'>Disconnected</span></div>
+<br>
+<div><p>Current String:&nbsp<span id="currString"></span></p></div>
+<div><p>Last Saved String:&nbsp<span id="lastString"></span></p></div>
+<div id="keypressTable">
+    <div><p>Current Key:&nbsp<span id="keypress"></span></p></div>
+</div><br>
+<div id="buttontable1">
+    <div> Button Data </div>
+    <div>Button 1:&nbsp<span id="buttonvalue11"></span></div>
+    <div>Button 2:&nbsp<span id="buttonvalue21"></span></div>
+</div>
+<br>
+</body>
+</html>
diff -r 000000000000 -r f456beccdf56 tiCss.css
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/tiCss.css	Tue Oct 07 18:34:04 2014 +0000
@@ -0,0 +1,5 @@
+h1 { font-size: 24px; font-weight: bold; position: relative; text-align: center; }
+#sensorStat{ font-weight: bold; } 
+#container{ background-color: CornflowerBlue; font-family: "Georgia", "Lucida Sans"; font-variant: small-caps; font-size: 20px; }
+#keypressTable{ position: relative; font-weight: bold; font-size: 40px; color: #000; text-align: center; float: center; border: 2px solid black; }
+#keypress{ font-size: 50px; padding-left: 10px;}