Merge pull request #8 from tuftsceeo/newSPIKEtutorials

Tutorials and Service updates
tuftsceeo · Jan 31, 2021 · 4ccbf72 · 4ccbf72
2 parents 9161c14 + 0c68cf9
commit 4ccbf72
Show file tree

Hide file tree

Showing 116 changed files with 24,452 additions and 2,194 deletions.
diff --git a/docs/PrimeHub.left_button.html b/docs/PrimeHub.left_button.html
diff --git a/docs/PrimeHub.light_matrix.html b/docs/PrimeHub.light_matrix.html
diff --git a/docs/PrimeHub.motion_sensor.html b/docs/PrimeHub.motion_sensor.html
diff --git a/docs/PrimeHub.right_button.html b/docs/PrimeHub.right_button.html
diff --git a/docs/PrimeHub.speaker.html b/docs/PrimeHub.speaker.html
diff --git a/docs/PrimeHub.status_light.html b/docs/PrimeHub.status_light.html
diff --git a/docs/ServiceDock_Airtable.js.html b/docs/ServiceDock_Airtable.js.html
diff --git a/docs/ServiceDock_SPIKE.js.html b/docs/ServiceDock_SPIKE.js.html
diff --git a/docs/ServiceDock_SystemLink.js.html b/docs/ServiceDock_SystemLink.js.html
diff --git a/docs/Service_Airtable.html b/docs/Service_Airtable.html
diff --git a/docs/Service_SPIKE.ColorSensor.html b/docs/Service_SPIKE.ColorSensor.html
diff --git a/docs/Service_SPIKE.DistanceSensor.html b/docs/Service_SPIKE.DistanceSensor.html
diff --git a/docs/Service_SPIKE.ForceSensor.html b/docs/Service_SPIKE.ForceSensor.html
diff --git a/docs/Service_SPIKE.Motor.html b/docs/Service_SPIKE.Motor.html
diff --git a/docs/Service_SPIKE.MotorPair.html b/docs/Service_SPIKE.MotorPair.html
diff --git a/docs/Service_SPIKE.PrimeHub.html b/docs/Service_SPIKE.PrimeHub.html
diff --git a/docs/Service_SPIKE.html b/docs/Service_SPIKE.html
diff --git a/docs/Service_SystemLink.html b/docs/Service_SystemLink.html
diff --git a/docs/index.html b/docs/index.html
diff --git a/docs/modules/ServiceDock_Airtable.js b/docs/modules/ServiceDock_Airtable.js
diff --git a/docs/modules/ServiceDock_SPIKE.js b/docs/modules/ServiceDock_SPIKE.js
diff --git a/docs/modules/ServiceDock_SystemLink.js b/docs/modules/ServiceDock_SystemLink.js
@@ -136,7 +136,7 @@ class servicesystemlink extends HTMLElement {
     }
 
     set apikey(val) {
-        console.log("%cTuftsCEEO ", "color: #3ba336;", val);
+        // console.log("%cTuftsCEEO ", "color: #3ba336;", val);
         if ( val ) {
             this.setAttribute("apikey", val);
         }
@@ -146,6 +146,7 @@ class servicesystemlink extends HTMLElement {
     }
 
     attributeChangedCallback (name, oldValue, newValue) {
+        console.log("%cTuftsCEEO ", "color: #3ba336;", "new value of apikey: ", newValue);
         this.APIKey = newValue;
     }
 
@@ -303,7 +304,7 @@ function Service_SystemLink() {
 
     /** Change the current value of a tag on SystemLink cloud. 
      * 
-     * @public
+     * @private
      * @param {string} name name of tag to update
      * @param {any} value new value's data type must match the Tag's data type.
      * @param {function} callback function to execute after tag is updated
@@ -335,6 +336,7 @@ function Service_SystemLink() {
      * @param {any} tagName 
      * @param {any} newValue 
      * @param {any} callback 
+     * @example
      * // set a string type Value of a Tag and display
      * mySL.setTagValueNotStrict("message", 123, function () {
      *    let messageValue = mySL.getTagValue("message");
@@ -365,6 +367,42 @@ function Service_SystemLink() {
         });
     }
 
+    /** Change the current value of a tag on SystemLink cloud with strict data types. There will be no implicit data type conversions. E.g. Updating tags of INT type will only work with javascript number.
+     * 
+     * @public
+     * @param {any} name name of tag to update
+     * @param {any} value value to update tag to
+     * @param {any} callback function to execute after tag is updated
+    * @example
+     * // set a string type Value of a Tag and display
+     * mySL.setTagValueStrict("message", "hello there", function () {
+     *    let messageValue = mySL.getTagValue("message");
+     *    console.log("message: ", messageValue); // display the updated value
+     * })
+     * // set value of a boolean Tag
+     * mySL.setTagValueStrict("aBoolean", true);
+     *
+     * // set value of an integer Tag
+     * mySL.setTagValueStrict("anInteger", 10);
+     *
+     * // set value of a double Tag
+     * mySL.setTagValueStrict("aDouble", 5.2);
+     */
+    function setTagValueStrict(tagName, newValue, callback) {
+        // changes the value of a tag on the cloud
+        changeValue(tagName, newValue, true, function (valueChanged) {
+            if (valueChanged) {
+                // wait for changed value to be retrieved
+                setTimeout(function () {
+                    if (typeof callback === 'function') {
+                        callback();
+                    }
+                }, 1000)
+            }
+        });
+    }
+
+
     /** Get the current value of a tag on SystemLink cloud
      * 
      * @public
@@ -409,7 +447,7 @@ function Service_SystemLink() {
      * @param {function} callback optional callback
      * @example
      * mySL.createTag("message", "hi", function () {
-     *      mySL.setTagValue("message", "bye"); // change the value of 'message' from "hi" to "bye"
+     *      mySL.setTagValueStrict("message", "bye"); // change the value of 'message' from "hi" to "bye"
      * })
      */
     function createTag(tagName, tagValue, callback) {
@@ -464,27 +502,6 @@ function Service_SystemLink() {
     //                                      //
     //////////////////////////////////////////
 
-    /** Change the current value of a tag on SystemLink cloud with strict data types. There will be no implicit data type conversions. E.g. Updating tags of INT type will only work with javascript number.
-     * 
-     * @private
-     * @param {any} name name of tag to update
-     * @param {any} value value to update tag to
-     * @param {any} callback function to execute after tag is updated
-     */
-    function setTagValueStrict(tagName, newValue, callback) {
-        // changes the value of a tag on the cloud
-        changeValue(tagName, newValue, true, function (valueChanged) {
-            if (valueChanged) {
-                // wait for changed value to be retrieved
-                setTimeout(function () {
-                    if (typeof callback === 'function') {
-                        callback();
-                    }
-                }, 1000)
-            }
-        });
-    }
-
     /** sleep function
      * 
      * @private
@@ -681,7 +698,7 @@ function Service_SystemLink() {
 
                     expectedValueType = tagsInfo[tagPath].type;
                     inputValueType = getValueTypeStrict(newValue);
-                    console.log("%cTuftsCEEO ", "color: #3ba336;", expectedValueType, " vs ", inputValueType);
+                    // console.log("%cTuftsCEEO ", "color: #3ba336;", expectedValueType, " vs ", inputValueType);
                     if (inputValueType !== expectedValueType) {
                         console.error("%cTuftsCEEO ", "color: #3ba336;", "Could not update value of tag on SystemLink Cloud. The given value is not of the data type defined for the tag in the database");
                         throw new Error("Could not update value of tag on SystemLink Cloud.The given value is not of the data type defined for the tag in the database");
@@ -954,8 +971,8 @@ function Service_SystemLink() {
     return {
         init: init,
         getTagsInfo: getTagsInfo,
-        setTagValue: setTagValue,
         setTagValueNotStrict: setTagValueNotStrict,
+        setTagValueStrict: setTagValueStrict,
         getTagValue: getTagValue,
         executeAfterInit: executeAfterInit,
         setAPIKey: setAPIKey,

diff --git a/docs/pong.png b/docs/pong.png
diff --git a/docs/servicedock.html b/docs/servicedock.html
@@ -30,28 +30,50 @@
         </div>
     </body>
     <script>
-        /* testing micropyUtils */
-        var mySPIKE = document.getElementById("service_spike").getService();
-        var userDefinedGlobalVariable = "okay";
-        var objectGlobalVariable = { "test": 0 };
-
-        mySPIKE.executeAfterInit(doSomething);
-        async function doSomething() {
-            var objectVariable = {"test": 0};
-            var integerVariable = 2;
-            var doubleVariable = 3.1;
-            var stringDoubleQuotesVariable = "heya"
-            var stringSingleQuotesVariable = 'heya'
-            mySPIKE.micropython(slotid = 10, `
-from spike import Motor
-# Initialize the motor
-motor = Motor('C')
-# Rotate clockwise for time defined in Airtable at 75% speed
-motor.run_for_seconds(integerVariable, 75)
-`);
+        var some = 1;
+
+        const anObject = () => {
+            var something = some;
+
+            function printSomething() {
+                console.log("anObject1: ", something);
+            }
+
+            return {
+                printSomething: printSomething
+            }
+        }
+
+        function anObject2() {
+            var something = some;
+
+            function printSomething () {
+                console.log("anObject2: ", something);
+            }
+
+            return {
+                printSomething: printSomething
+            }
         }
-        // micropyUtils.init(); // this needs to be run after global variable declarations but before hoisted functions
-        </script>
+
+        function changeSome() {
+            some++;
+        }
+
+        changeSome();
+
+        var object1 = anObject();
+        var object2 = new anObject2();
+
+        object1.printSomething();
+        object2.printSomething();
+
+        changeSome();
+
+        object1.printSomething();
+        object2.printSomething();
+
+    </script>
 </html>
 <script>
 

diff --git a/docs/servicedock_SystemLinkSimpleRemote.html b/docs/servicedock_SystemLinkSimpleRemote.html
@@ -0,0 +1,46 @@
+<!--
+    Project: SPIKE Prime Web Interface
+    File: servicedock_systemLinkSimpleRemote.html
+    Author: Emma Bethel
+    Last Update: 1/29/21
+    History:
+        created by Emma on 1/28/21
+    Purpose: send user-inputted value (via slider) into System Link
+-->
+<html>
+    <head>
+        <script type="text/javascript" src="./modules/ServiceDock_SystemLink.js"></script>
+        <style>
+            #controls {
+                text-align: center;
+                font-size: 30px;
+                padding: 100px;
+            }
+        </style>
+    </head>
+    <body style="background-image: url('./modules/views/CEEOInnovationsbackground.png');">
+         <div id = "servicedock" style = "float:right;">
+            <service-systemlink id = "service_systemlink"></service-systemlink>
+        </div>
+        <div id = "controls">
+            <label for="speed_slider">Motor Speed (-100 to 100): </label>
+            <input type="range" id="speed_slider" onchange="sendMotorSpeed(this.value)" min="-100" max="100">
+        </div>
+    </body>
+    <script>
+        var systemLinkElement = document.getElementById("service_systemlink")
+        var mySystemLink = systemLinkElement.getService()
+
+        // ensuring motor speed tag exists
+        mySystemLink.executeAfterInit(function() { 
+            mySystemLink.createTag("motor_speed", 0)
+        })
+
+        /* sets value of motor_speed tag to given speed
+         * NOTE: assumes motor_speed tag exists
+         */
+        function sendMotorSpeed(speed) {
+            mySystemLink.setTagValueStrict("motor_speed", parseInt(speed)) 
+        }
+    </script>
+</html>
diff --git a/docs/servicedock_airtableShooterLocal.html b/docs/servicedock_airtableShooterLocal.html
@@ -0,0 +1,110 @@
+<!--
+    Project: SPIKE Prime Web Interface
+    File: servicedock_airtableShooterLocal.html
+    Author: Emma Bethel
+    Last Update: 1/29/21
+    Purpose: run a shooter with a left and right shooting speed as well as an angle position based on Airtable input
+-->
+<html>
+    <head>
+        <script type="text/javascript" src="./modules/ServiceDock_Airtable.js"></script>
+        <script type="text/javascript" src="./modules/ServiceDock_SPIKE.js"></script>
+        <style>
+            #displays {
+                text-align: center;
+                font-size: 30px;
+                padding: 100px;
+                background-color:rgb(0,255,133)
+            }
+        </style>
+    </head>
+    <body style="background-image: url('./modules/views/CEEOInnovationsbackground.png');">
+         <div id = "servicedock" style = "float:right;">
+            <service-airtable id = "service_airtable"></service-airtable>
+            <service-spike id="service_spike"></service-spike>
+        </div>
+        <div id = "displays">
+            <div id = "angle_display">angle: unknown</div>
+            <div id = "left_speed_display">left speed: unknown</div>
+            <div id = "right_speed_display">right speed: unknown</div>
+        </div>
+    </body>
+    <script>
+        var airtableElement = document.getElementById("service_airtable")
+        var myTable = airtableElement.getService()
+
+        var mySPIKE = document.getElementById("service_spike").getService()
+
+        var motorSpeeds = {
+            left: null,
+            right: null,
+        }
+
+        myTable.executeAfterInit(function() {
+            // start the periodic checks and updates
+           checkTable({})
+        })
+
+
+        // checks current table values against those of last check and controls motors and page displays accordingly
+        function checkTable(pastTable) {
+            var  currentTable = myTable.getEntriesInfo()
+
+            checkEntry("shooter_angle", currentTable, pastTable, updateAngle)
+            checkEntry("left_speed", currentTable, pastTable, function(newSpeed) { updateSpeed("left", newSpeed) } )
+            checkEntry("right_speed", currentTable, pastTable, function(newSpeed) { updateSpeed("right", newSpeed) })
+
+            if(currentTable["shoot_mode"] != undefined && currentTable["shoot_mode"].value == "shoot")
+                shoot()
+
+            // check again in one second
+            setTimeout(function() { checkTable(currentTable) }, 1000)
+        }
+
+        // runs action if value of entry called name is different in pastTable than currentTable
+        function checkEntry(name, currentTable, pastTable, action) {
+            if(currentTable[name] != undefined && (pastTable[name] == undefined || currentTable[name].value != pastTable[name].value)) {
+                action(currentTable[name].value)
+                console.log("running action for " + name)
+            }
+        }
+
+        // runs shooting motors at specified speeds
+        function shoot() {
+            // change display div color to indicate shooting mode
+            document.getElementById("displays").style.backgroundColor = "rgb(163,255,143)"
+
+            // if spike is connected, run shooter motors w/ specified speeds
+            if(mySPIKE.isActive()) {
+                mySPIKE.Motor("A").run_for_seconds(2, motorSpeeds.left)
+                mySPIKE.Motor("B").run_for_seconds(2, -motorSpeeds.right)
+            }
+
+            // revert div color back once shooting is done
+            setTimeout(function() { document.getElementById("displays").style.backgroundColor = "rgb(0,255,133)" }, 2000)
+
+            myTable.setEntryValueStrict("shoot_mode", "wait")
+        }
+
+        /* updates stored speed value and screen display for specified side (a)
+         * NOTE: assumes side is "left" or "right"
+         */
+        function updateSpeed(side, newSpeed) {
+            if(side == "left")
+                motorSpeeds.left = newSpeed
+            else if(side == "right")
+                motorSpeeds.right = newSpeed
+
+            document.getElementById(side + "_speed_display").innerText = side + " speed: " + newSpeed
+        }
+
+        // changes angle displayed on page and repositions angle motor to given newAngle
+        function updateAngle(newAngle) {
+            document.getElementById("angle_display").innerText = "angle: " + newAngle
+
+            // run motor to new position if SPIKE is connected
+            if(mySPIKE.isActive())
+                mySPIKE.Motor("C").run_to_degrees_counted(newAngle)
+        }
+    </script>
+</html>