Changeset 567 in tmcsimulator for trunk/webapps/GTEC

Timestamp:

01/24/2020 12:54:29 PM (6 years ago)

Author:

jdalbey

Message:

GTEC vdsLayer.js Add color buttons.

File:

• trunk/webapps/GTEC/js/vdsLayer.js (modified) (13 diffs)

trunk/webapps/GTEC/js/vdsLayer.js

@@ -1 +1 @@
 var postmileList = [];  // the list of postmiles saved from the json file.
-var chosenColor = null;
-
+var chosenColor = null; // stores color that user picks
+
+// function to find differences between two arrays
 Array.prototype.diff = function(a) {
     return this.filter(function(i) {return a.indexOf(i) < 0;});
@@ -52 +53 @@
             };
         });
-        var clicked = false;
-        var first = [];
-        var asc = false;
-        var color_arr = [];
-        var white_arr = [];
+        var clicked = false; 
+        var first = []; // stores first dot
+        var asc = false; //ascending
+        //var color_arr = []; 
+        var white_arr = []; //stores all white dots
         map.data.addListener('click', function(event) 
         {
             var event_arr = event.feature.getId().split(/[ ,]+/);
-            // var start = parseFloat(event[4]); // extract postmile field
+            // if user has already made the first click and the second click is 
+            // on the same highway and same direction
             if (clicked && event_arr[0] === first[0] && event_arr[1] === first[1])
             {
-                // console.log('clicked ' + first + "/" + event_arr + event.feature);
+                // compute range between the two clicked dots
                 var range = Math.abs(parseFloat(event_arr[2]) - parseFloat(first[2]));
                 var clicked_dots = [];
+                // checks highway direction to determine if postmiles are ascending or descending 
                 if (parseFloat(event_arr[2]) < parseFloat(first[2]))
                 {
@@ -74 +77 @@
                     asc = true;
                 }
+                // searches map for all dots between the two clicked dots and adds it to list "clicked_dots"
                 map.data.forEach(function (marker) 
                 {
                     var marker_arr = marker.getId().split(/[ ,]+/);
+                    // if the dot in the map matches the highway and direction of the clicked dot
                     if (marker_arr[0] === event_arr[0] && marker_arr[1] === event_arr[1])
                     {
+                        // compute distance based on direction of highway
                         if (asc)
                         {
@@ -87 +93 @@
                             var dist = parseFloat(parseFloat(first[2]) - (marker_arr[2]));
                         }
+                        // if dist within range of the two clicked dots, add to list "clicked_dots"
                         if (dist <= range && dist >= 0)
                         {
@@ -93 +100 @@
                     }
                 });
-                color_arr.push(clicked_dots);
+                //color_arr.push(clicked_dots);
                 console.log(clicked_dots);
                 console.log(range);
+                // extracts ids for all the white dots
                 var white_arr_ids = white_arr.map(function (marker) {
                     return marker.id;
                 });
+                // extracts ids for all the clicked dots
                 var clicked_dots_ids = clicked_dots.map(function (marker) {
                     return marker.getId();
                 });
+                // computes difference between the white dots and clicked dots to find the unused dots
                 var unused_ids = white_arr_ids.diff(clicked_dots_ids);
                 console.log("Unused: ",unused_ids, "White: ",white_arr_ids);
+                // change the dot color of all the unused white dots back to their previous color
                 unused_ids.forEach(function (id){
                     var marker = white_arr.filter(function (dot) {
@@ -112 +123 @@
                 });
                 white_arr = [];
+                // change the color of all the dots between the two clicked dots to the user picked color
                 if (chosenColor)
                 {
@@ -131 +143 @@
                 xhr.send("msg="+lineOut + "\n")
             }
+            // if user has not yet clicked on a dot
             else if (!clicked)
             {
@@ -171 +184 @@
                 }
             }
+            // if the user's second click is made on a dot not on the first dot's highway
             else 
             {
@@ -249 +263 @@
     }
 
-    // Builds array to store the previous colors of the targetDots
-    /*function storePrev(marker, targetMarkers) 
-    {
-        target = marker.id;
-        newColor = marker.properties.color;
-        // see if new color is different than current color
-        currentFeature = map.data.getFeatureById(target);
-        currentColor = currentFeature.getProperty("color");
-        // if a new color is desired then assign it to the feature's color property
-        if (currentColor != newColor)
-        {
-            targetMarkers.push({"id" : currentFeature.getId(),
-                "properties" : {"color" : currentColor}});
-        }
-    }*/
-
     // Load the highways dynamic json file and update the map
     function updateVDSlayer()
@@ -288 +286 @@
     }
 
+    // gets the starting letter of a given color
     function getColorAbbr(str){
         if (str === "red")
@@ -297 +296 @@
     }
 
-// Parses the traffic events file and builds an array of target dots for each line
-    /*function processVDS() {
-        var parsed_JSON;
-        loadJSON(kVDSstatusFile, function(response)
-        { 
-            // Parse JSON string into object
-            parsed_JSON = JSON.parse(response);
-            // Process each new marker - lookup in current map
-            var parsed_features =  parsed_JSON.features;
-            var eventsFile = '';
-            var xmlhttp = new XMLHttpRequest();
-            xmlhttp.onreadystatechange = function(){
-                if(xmlhttp.status == 200 && xmlhttp.readyState == 4){
-                    eventsFile = xmlhttp.responseText;
-                    var lines = eventsFile.toString().split("\n");
-                    for (var line = 1; line < lines.length; line++) {
-                        if (lines[line][0] !== '#') //ignores lines with #
-                        {
-                            var dots = [];
-                            var event = lines[line].split(/[ ,]+/);
-                            var start = parseFloat(event[4]); // extract postmile field
-                            var range = parseFloat(event[5]); // extract distance
-                            var newColor = getColorName(event[6]); // extract DotColor
-                            eventTimes.push(event[1]);
-                            parsed_features.forEach(function (marker) {
-                                var id_arr = marker.id.split(" ");
-                                if (id_arr[0] === event[2] && id_arr[1] === event[3]){
-                                    var dist = parseFloat(id_arr[2]) - start; //computes difference in postmiles
-                                    if (dist <= range && dist >= 0){ // adds all dots within computed range
-                                        dots.push({"marker": marker, "color": newColor});
-                                    }
-                                }
-                            });
-                            targetDots.push(dots);
-                        }
-                    }
-                }
-            };
-            xmlhttp.open("GET",trafficEventsFile,true); //read traffic events text file
-            xmlhttp.send();
-        });
-    }
-
-    // Increments the eventIndex from and updates all the targetDots on map
-    function updateForwards() {
-        eventIndex++;
-        // limit eventIndex to length of targetDots
-        if (eventIndex >= targetDots.length) 
-        {
-            eventIndex = targetDots.length - 1;
-        }
-        // update all the target dots
-        if  (targetDots[eventIndex] !== undefined) {
-            targetDots[eventIndex].forEach(function(item){
-            item.marker.properties.color = item.color;
-            updateMarker(item.marker);
-            });
-        }
-    }
-
-    // Decrements the eventIndex and updates all the targetDots from diff_arr on map
-    function updateBackwards() {
-        //update each target dot in order to revert to previous color
-        if  (diff_arr[eventIndex] !== undefined) {
-            diff_arr[eventIndex].forEach(function(item){
-                updateMarker(item);
-            });
-        }
-        eventIndex--; 
-        // restrict eventIndex to -1
-        if (eventIndex < -1)
-        {
-            eventIndex = -1;
-        }
-    }
-    
-    // Calls updateMarker for all targetDots after storing the previous marker in diff_arr 
-    function buildDiff() {
-        for (var i = 0; i <= targetDots.length; i++)
-        {
-            if  (targetDots[i] !== undefined)
-            {
-                var targetMarkers = new Array();
-                targetDots[i].forEach(function(item){
-                    item.marker.properties.color = item.color;
-                    storePrev(item.marker, targetMarkers);
-                    updateMarker(item.marker);
-                });
-                diff_arr.push(targetMarkers);
-            }
-        }
-    }
-*/
-/*function initVDSbutton()
-{
-
-    var vdsBtnDiv = document.getElementById('vdsButton');
-    map.controls[google.maps.ControlPosition.LEFT_BOTTOM].push(vdsBtnDiv)
-    vdsBtnDiv.title = 'Click to toggle vds view';
-
-    // Setup the click event listeners to toggle icon display
-    vdsBtnDiv.addEventListener('click', function()
-    {
-        vds_showing = !vds_showing;
-        // reveal or hide all the dots
-        map.data.forEach(function(feature)
-        {
-            map.data.overrideStyle(feature,
-            {
-                visible: vds_showing
-            });
-        });
-        // Determine which button image to show
-        if (vds_showing)
-        {
-            pic = "images/btnDepressed_VDS.png"
-        }
-        else
-        {
-            pic = "images/btnReady_VDS.png"
-        }
-        document.getElementById('vdsBtnImg').src = pic;
-    });
-}*/
-
 function initColorButtons()
 {
+    // add the respective color buttons onto the map
     var redColor = document.getElementById('redButton');
     var greenColor = document.getElementById('greenButton');
@@ -430 +305 @@
     map.controls[google.maps.ControlPosition.BOTTOM_CENTER].push(greenColor);
     map.controls[google.maps.ControlPosition.BOTTOM_CENTER].push(yellowColor);
+    // store the user picked color in "chosenColor"
     redColor.addEventListener('click', function() {
         chosenColor = "red";
@@ -440 +316 @@
     });
 }
-
-// init beginning, forward and back buttons as well as time display on map
-/*function initControlButtons()
-{
-    var i = 0;
-    var time = document.getElementById('time');
-    map.controls[google.maps.ControlPosition.BOTTOM_CENTER].push(time)
-    var start = document.getElementById('start');
-    map.controls[google.maps.ControlPosition.BOTTOM_CENTER].push(start)
-    start.title = 'Click to see the first event';
-    var forward = document.getElementById('forward');
-    map.controls[google.maps.ControlPosition.BOTTOM_CENTER].push(forward)
-        var backward = document.getElementById('backward');
-        map.controls[google.maps.ControlPosition.BOTTOM_CENTER].push(backward)
-    forward.title = 'Click to see the next event';
-    forward.addEventListener('click', function() {
-        updateForwards();
-        backward.disabled = false;
-        if (i < eventTimes.length - 1) // get the next eventTime 
-        {
-            ++i;
-            time.innerHTML = eventTimes[i];
-        }
-        if (eventIndex === targetDots.length - 1) // disable next button if last event reached
-        {
-            forward.disabled = true;
-        }
-    });
-        backward.addEventListener('click', function() {
-        updateBackwards();
-        forward.disabled = false;
-        if (i > 0)  // get the prev eventTime 
-        {
-            --i;
-            time.innerHTML = eventTimes[i];
-        }
-        if (eventIndex < 0) // disable back button if at first event 
-        {
-            backward.disabled = true;
-        }
-        });
-    start.addEventListener('click', function() {
-        updateVDSlayer(); // redraw markers on map from startup file
-        i = 0;
-        time.innerHTML = "00:00:00";
-    });
-}
-*/