Changeset 351 in tmcsimulator for trunk/webapps/js

Timestamp:

03/31/2019 10:20:47 AM (7 years ago)

Author:

jdalbey

Message:

updated ei notebook proof of concepts

Location:

trunk/webapps/js

Files:

• cctvLayer.js (modified) (1 diff)
• cmsLayer.js (modified) (5 diffs)
• harLayer.js (modified) (3 diffs)

trunk/webapps/js/cctvLayer.js

@@ -68 +68 @@
             imgDir = "CCTVSlow/"
         }
+        var label = "freeflow";
+        if (currentColor == "red")
+        {
+            label = "stopped";
+        }
+        if (currentColor == "yellow")
+        {
+            label = "slow";
+        }
+
         // Demo of video embed - only on highway 241 locations
         if (cctvIndex.startsWith("12-241"))
         {
-            cctv_infowindow.setContent('<div style="font-weight:bold;font-family: monospace">' +  cctvIndex + "&nbsp;" + cctvLocation + "&nbsp;" +currentColor + '<BR><video width="320" height="240" autoplay  controls loop><source src="images/TrafficFreeflow.ogv" type="video/ogg"></div>');
+            cctv_infowindow.setContent('<div style="font-weight:bold;font-family: monospace">' +  cctvIndex + "&nbsp;" + cctvLocation + "&nbsp;" + '<BR><video  autoplay loop><source src="images/TrafficFreeflow.ogv" type="video/ogg"></div>');
         }
         else 
         // image from fast or slow directories
         {
-            cctv_infowindow.setContent('<div style="font-weight:bold;font-family: monospace">' +  cctvIndex + "&nbsp;" + cctvLocation + "&nbsp;" +currentColor + "<BR>" + imgTag + imgDir + cctvIndex + '.jpg">' + "</div>");
+            cctv_infowindow.setContent('<div style="font-weight:bold;font-family: monospace">' +  cctvIndex + "&nbsp;" + cctvLocation + "&nbsp;" +label+ "<BR>" + imgTag + imgDir + cctvIndex + '.jpg">' + "</div>");
         }
         cctv_infowindow.setPosition(event.feature.getGeometry().get());

trunk/webapps/js/cmsLayer.js

@@ -115 +115 @@
             document.getElementById('msgdisplay5').value = response5;
             document.getElementById('msgdisplay6').value = response6;
-            saveMessage(response1 + "|" + response2 + "|" + response3 + "|" +
+            saveCMSMessage(response1 + "|" + response2 + "|" + response3 + "|" +
                         response4 + "|" + response5 + "|" + response6);
         }
@@ -128 +128 @@
         document.getElementById('msgdisplay5').value = "";
         document.getElementById('msgdisplay6').value = "";
-        saveMessage("|||||");
+        saveCMSMessage("|||||");
     }
 
     // Save an updated cms message to the file
-    function saveMessage(outMessage)
+    function saveCMSMessage(outMessage)
     {
         // Fetch cmsID from hidden field where it was put when dialog opened.
@@ -144 +144 @@
         messageDict[cmsID].cms.message.phase2.Line2 = msgParts[4];
         messageDict[cmsID].cms.message.phase2.Line3 = msgParts[5];
+        // Check if there was any messages to save and
         // Set icon to reflect message state
         if (outMessage == "|||||")
@@ -155 +156 @@
         cmsLayer.overrideStyle(cmsLayer.getFeatureById(cmsID), currentIcon)
         // break the json string into lines for readability
-        jsonstring = JSON.stringify(Object.values(messageDict)); //,null,4);
+        jsonstring = JSON.stringify(Object.values(messageDict)); //Can't use these in GET parameter  ,null,4);
         outString = "{\"data\":" + jsonstring + "}";
-
+        console.log("outString = " + outString);
         var xhttp = new XMLHttpRequest();
         xhttp.open("GET", "cgi-bin/saveCMSmessage.py?msg=" + outString, true);
@@ -163 +164 @@
         // Using POST might be a better idea ... haven't tried this yet
         //      var xhr = new XMLHttpRequest();
-        //      xhr.open("POST", "/cgi-bin/saveMessage.py?", true);
+        //      xhr.open("POST", "/cgi-bin/saveCMSmessage.py?", true);
         //      xhr.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
         // send the collected data as JSON

trunk/webapps/js/harLayer.js

@@ -93 +93 @@
     {
         document.getElementById('har-msgdisplay1').value = "";
-        saveMessage("");
+        saveHARMessage("");
     }
 
@@ -102 +102 @@
         var harID = document.getElementById('harID').value;
         HARmessageDict[harID].har.message.phase1.Line1 = outMessage;
-
-        // TODO Set icon to reflect message state
+        // Set icon to reflect message state
         if (outMessage == "")
         {
+            currentIcon = {icon: iconHARidle};
         }
         else
         {
+            currentIcon = {icon: iconHARactive};
         }
-        //harLayer.overrideStyle(harLayer.getFeatureById(harID), currentIcon)
-        // break the json string into lines for readability
+        harLayer.overrideStyle(harLayer.getFeatureById(harID), currentIcon)
+        // convert messasge to json string 
         jsonstring = JSON.stringify(Object.values(HARmessageDict));
         outString = "{\"data\":" + jsonstring + "}";
@@ -147 +148 @@
                 var item = messagejson.data[i];
                 HARmessageDict[item.har.index] = item;
-                // TODO Set the appropriate icon on the har icon
+                // Set the appropriate icon on the har icon
                 //  if there's currently no message
                 if (item.har.message.phase1.Line1 == "")
                 {
+                    cmsLayer.overrideStyle(cmsLayer.getFeatureById(item.har.index), {icon: iconHARidle})
                 }
                 else
                 {
-                }
+                    cmsLayer.overrideStyle(cmsLayer.getFeatureById(item.har.index), {icon: iconHARactive})
+                }   
             }
         });