Alex Tyler / tiInterface

Personal web interface for the BasicKeyboard program.

Dependents:   BasicKeyboard

tiButton.html

Committer:
alexandertyler
Date:
2014-10-07
Revision:
0:f456beccdf56

File content as of revision 0:f456beccdf56:

<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>