Changeset 299 in tmcsimulator for trunk/src


Ignore:
Timestamp:
03/07/2019 12:15:04 PM (7 years ago)
Author:
jdalbey
Message:

cms_demo.html added show/hide toggle.

Location:
trunk/src/cptms
Files:
2 edited

Legend:

Unmodified
Added
Removed

  • trunk/src/cptms/cms_demo.html

    r298 r299  
    6565           float: left; 
    6666       } 
    67     </style> 
     67      #hideButton { 
     68        font-size: 40px; 
     69        margin-right: 9px; 
     70        background-color: #fff; 
     71        color: #47476b; 
     72        cursor: pointer; 
     73      }    </style> 
    6874  </head> 
    6975  <body> 
    … …  
    8288    </div> 
    8389    <div id="map"></div> 
     90    <!--The div element where the show/hide button appears --> 
     91    <div id="hideButton">&#128065;</div> 
     92 
    8493    <script> 
    85     var centerPoint = {lat: 33.693385, lng: -117.798937}; 
    86       var map; 
    87     var kMapStartupFile = "cmsStatusD12.json"; 
    88     //var src="http://git.tokomak.net:8888/raw-attachment/ticket/75/dyer1.txt" 
    89     //var src="https://raw.githubusercontent.com/jdalbey/map-spikes/master/cms_two_signs.kml"; 
    90     //      var src = "https://www.arb.ca.gov/smp/met/kml/faa.kml"; 
    91     //      var src="https://raw.githubusercontent.com/jdalbey/map-spikes/master/la_airports.kml" 
    92     //      var src = 'https://developers.google.com/maps/documentation/javascript/examples/kml/westcampus.kml'; 
    93     var blueFlag = "icon_cmsBlue.png"; 
    94     var yellowFlag = "icon_cmsYellow.png"; 
    95     var messageList; 
    96       function initMap() { 
    97         map = new google.maps.Map(document.getElementById('map'), { 
    98           center: centerPoint, 
    99           zoom: 11, 
    100           /* mapTypeId: 'terrain', */ 
    101           mapTypeControl: false, 
    102           streetViewControl: false  
    103         }); 
    104         getMessage(1);  // load the current message file 
    105         setMarkers(); 
    106       } 
    107  
    108      var cms_info; 
    109      var markerList = []; 
    110  
    111            
    112      function setMarkers() 
    113      { 
    114         var simpleImage = ""; 
    115  
    116         loadcmsJSON(function(response) 
     94var centerPoint = { 
     95    lat: 33.693385, 
     96    lng: -117.798937 
     97}; 
     98var map; 
     99var kMapStartupFile = "cmsStatusD12.json"; 
     100//var src="http://git.tokomak.net:8888/raw-attachment/ticket/75/dyer1.txt" 
     101//var src="https://raw.githubusercontent.com/jdalbey/map-spikes/master/cms_two_signs.kml"; 
     102//      var src = "https://www.arb.ca.gov/smp/met/kml/faa.kml"; 
     103//      var src="https://raw.githubusercontent.com/jdalbey/map-spikes/master/la_airports.kml" 
     104//      var src = 'https://developers.google.com/maps/documentation/javascript/examples/kml/westcampus.kml'; 
     105var blueFlag = "icon_cmsBlue.png"; 
     106var yellowFlag = "icon_cmsYellow.png"; 
     107var messageList; 
     108var cms_info; 
     109var markerList = []; 
     110var showing = true; 
     111 
     112function initMap() 
     113{ 
     114    map = new google.maps.Map(document.getElementById('map'), 
     115    { 
     116        center: centerPoint, 
     117        zoom: 11, 
     118        /* mapTypeId: 'terrain', */ 
     119        mapTypeControl: false, 
     120        streetViewControl: false 
     121    }); 
     122    initButton(); 
     123    getMessage(1); // load the current message file 
     124    setMarkers(); 
     125} 
     126// Initialize the center button (to re-center the map) 
     127function initButton() 
     128{ 
     129    var hideBtnDiv = document.getElementById('hideButton'); 
     130    map.controls[google.maps.ControlPosition.RIGHT_CENTER].push(hideBtnDiv) 
     131    hideBtnDiv.title = 'Click to toggle cms view'; 
     132 
     133    // Setup the click event listeners: reset center location and zoom factor 
     134    hideBtnDiv.addEventListener('click', function() { 
     135            showing = !showing; 
     136            for (var i = 0; i < markerList.length; i++) 
     137            { 
     138                markerList[i].setVisible(showing); 
     139            } 
     140    }); 
     141} 
     142function setMarkers() 
     143{ 
     144    var simpleImage = ""; 
     145    loadcmsJSON(function(response) 
     146    { 
     147        // Parse JSON string into object 
     148        cms_info = JSON.parse(response); 
     149        console.log(cms_info.data[0].cms); 
     150        // Process each new marker  
     151        for (var i = 0; i < cms_info.data.length; i++) 
    117152        { 
    118             // Parse JSON string into object 
    119             cms_info = JSON.parse(response); 
    120             console.log(cms_info.data[0].cms); 
    121             // Process each new marker  
    122             for (var i = 0; i < cms_info.data.length; i++)  
     153            var cms = cms_info.data[i].cms; 
     154            var currLat = Number(cms.location.latitude); 
     155            var currLong = Number(cms.location.longitude); 
     156            // load a yellow flag if there's currently no message 
     157            if (messageList[i] == "||") 
     158                simpleImage = yellowFlag; 
     159            else 
     160                simpleImage = blueFlag; 
     161            var directionCode = cms.location.direction.charAt(0); 
     162            var rolloverText = " " + directionCode + " " + cms.location 
     163                .route + " " + cms.location.postmile + " " + cms 
     164                .location.locationName 
     165            markerList[i] = new google.maps.Marker( 
    123166            { 
    124               var cms = cms_info.data[i].cms; 
    125               var currLat = Number(cms.location.latitude); 
    126               var currLong = Number(cms.location.longitude); 
    127               // load a yellow flag if there's currently no message 
    128               if (messageList[i] == "||") 
    129                  simpleImage = yellowFlag; 
    130               else 
    131                  simpleImage = blueFlag; 
    132               var directionCode = cms.location.direction.charAt(0); 
    133               var rolloverText = " "+ directionCode + " "+cms.location.route + " "+ cms.location.postmile + " " + cms.location.locationName 
    134               markerList[i] = new google.maps.Marker( 
    135               { 
    136                 position: {lat: currLat, lng: currLong}, 
     167                position: 
     168                { 
     169                    lat: currLat, 
     170                    lng: currLong 
     171                }, 
    137172                map: map, 
    138173                icon: simpleImage, 
    139174                title: rolloverText, 
    140                 label: ""+i 
    141               }); 
    142               console.log("built: "+markerList[i].id+" "+markerList[i].title); 
    143  //           } 
    144  //           for (var i = 0; i < markerList.length; i++)  
    145  //           { 
    146               google.maps.event.addListener(markerList[i], 'click', function () { 
    147                   //var content = event.featureData.infoWindowHtml; 
    148                   var cmsName = document.getElementById('cms-name'); 
    149                   cmsName.innerHTML = this.getTitle(); // put sign name in display 
    150                   cmsName.style.display = 'block' 
    151                   var cmsMsg = document.getElementById('cms-message'); 
    152                   cmsMsg.style.display = 'block' 
    153                   cmsID = Number(this.getLabel()); 
    154                   getMessage(cmsID);  // note: this is async 
    155                   document.getElementById('cmsID').value=cmsID ; 
    156                   var userInput = document.getElementById('userinput'); 
    157                   userInput.style.display = 'block' 
     175                label: "" + i 
     176            }); 
     177            google.maps.event.addListener(markerList[i], 'click', 
     178                function() 
     179                { 
     180                    var cmsName = document.getElementById('cms-name'); 
     181                    cmsName.innerHTML = this.getTitle(); // put sign name in display 
     182                    cmsName.style.display = 'block' 
     183                    var cmsMsg = document.getElementById('cms-message'); 
     184                    cmsMsg.style.display = 'block' 
     185                    cmsID = Number(this.getLabel()); 
     186                    getMessage(cmsID); // note: this is async 
     187                    document.getElementById('cmsID').value = cmsID; 
     188                    var userInput = document.getElementById('userinput'); 
     189                    userInput.style.display = 'block' 
    158190                }); 
    159              }             
    160         }); 
    161      } 
    162      function loadcmsJSON(callback) {    
    163  
    164         var xobj = new XMLHttpRequest(); 
    165             xobj.overrideMimeType("application/json"); 
    166         xobj.open('GET', kMapStartupFile, true);  
    167         xobj.onreadystatechange = function () { 
    168               if (xobj.readyState == 4 && xobj.status == "200") { 
    169                 callback(xobj.responseText); 
    170               } 
    171         }; 
    172         // We want ajax to ignore any cached responses 
    173         xobj.setRequestHeader('If-Modified-Since', 'Sat, 01 Jan 2000 01:01:01 GMT') 
    174         xobj.send(null);   
    175      } 
    176         function handleSubmit() 
     191        } 
     192    }); 
     193} 
     194 
     195function loadcmsJSON(callback) 
     196{ 
     197    var xobj = new XMLHttpRequest(); 
     198    xobj.overrideMimeType("application/json"); 
     199    xobj.open('GET', kMapStartupFile, true); 
     200    xobj.onreadystatechange = function() 
     201    { 
     202        if (xobj.readyState == 4 && xobj.status == "200") 
    177203        { 
    178             // hide the display 
    179             document.getElementById('cms-message').style.display = 'none' 
    180             document.getElementById('userinput').style.display = 'none' 
    181             document.getElementById('cms-name').style.display = 'none' 
    182             // recover the user's response 
    183             var response1 = document.getElementById('msgcontent1').value; 
    184             var response2 = document.getElementById('msgcontent2').value; 
    185             var response3 = document.getElementById('msgcontent3').value; 
    186             saveMessage(response1+"|"+response2+"|"+response3); 
    187         } 
    188         function handleCancel() 
     204            callback(xobj.responseText); 
     205        } 
     206    }; 
     207    // We want ajax to ignore any cached responses 
     208    xobj.setRequestHeader('If-Modified-Since', 'Sat, 01 Jan 2000 01:01:01 GMT') 
     209    xobj.send(null); 
     210} 
     211 
     212function handleSubmit() 
     213{ 
     214    // hide the display 
     215    document.getElementById('cms-message').style.display = 'none' 
     216    document.getElementById('userinput').style.display = 'none' 
     217    document.getElementById('cms-name').style.display = 'none' 
     218    // recover the user's response 
     219    var response1 = document.getElementById('msgcontent1').value; 
     220    var response2 = document.getElementById('msgcontent2').value; 
     221    var response3 = document.getElementById('msgcontent3').value; 
     222    saveMessage(response1 + "|" + response2 + "|" + response3); 
     223} 
     224 
     225function handleCancel() 
     226{ 
     227    // hide the display 
     228    document.getElementById('cms-message').style.display = 'none' 
     229    document.getElementById('userinput').style.display = 'none' 
     230    document.getElementById('cms-name').style.display = 'none' 
     231} 
     232 
     233function handleClear() 
     234{ 
     235    document.getElementById('msgcontent1').value = ""; 
     236    document.getElementById('msgcontent2').value = ""; 
     237    document.getElementById('msgcontent3').value = ""; 
     238    document.getElementById('msgcontent1').focus(); 
     239} 
     240 
     241function loadJSON(inFile, callback) 
     242{ 
     243    var xobj = new XMLHttpRequest(); 
     244    xobj.overrideMimeType("application/json"); 
     245    xobj.open('GET', inFile, true); 
     246    xobj.onreadystatechange = function() 
     247    { 
     248        if (xobj.readyState == 4 && xobj.status == "200") 
    189249        { 
    190             // hide the display 
    191             document.getElementById('cms-message').style.display = 'none' 
    192             document.getElementById('userinput').style.display = 'none' 
    193             document.getElementById('cms-name').style.display = 'none' 
    194         } 
    195         function handleClear() 
    196         { 
    197             document.getElementById('msgcontent1').value=""; 
    198             document.getElementById('msgcontent2').value=""; 
    199             document.getElementById('msgcontent3').value=""; 
    200             document.getElementById('msgcontent1').focus(); 
    201         } 
    202  
    203      function loadJSON(inFile,callback) {    
    204  
    205         var xobj = new XMLHttpRequest(); 
    206         xobj.overrideMimeType("application/json"); 
    207         xobj.open('GET', inFile, true);  
    208         xobj.onreadystatechange = function () { 
    209               if (xobj.readyState == 4 && xobj.status == "200") { 
    210                 callback(xobj.responseText); 
    211               } 
    212         }; 
    213         // We want ajax to ignore any cached responses 
    214         xobj.setRequestHeader('If-Modified-Since', 'Sat, 01 Jan 2000 01:01:01 GMT') 
    215         xobj.send(null);   
    216      } 
    217      // retrieve the current cms message file 
    218      function getMessage(cmsID) 
    219      { 
    220         loadJSON("messagefile.txt",function(response) 
    221         { 
    222             // Parse JSON string into object 
    223             messageList = JSON.parse(response); 
    224             // select a message from json for the given cmsID 
    225             console.log("get by cmsID="+cmsID); 
    226             var cmsSign = document.getElementById('msgcontent1'); 
    227             //cmsSign.innerHTML = messageList[cmsID]; 
    228             messageparts = messageList[cmsID].split("|"); 
    229             cmsSign.value = messageparts[0]; 
    230             document.getElementById('msgcontent2').value = messageparts[1]; 
    231             document.getElementById('msgcontent3').value = messageparts[2]; 
    232             cmsSign.style.display = 'block' 
    233             cmsSign.focus(); 
    234         }); 
    235      } 
    236     // Save an updated cms message to the file 
    237     // NB: cms id's are one-based, json array is zero-based. 
    238     function saveMessage(outMessage,cmsID)  
    239     { 
    240       var cmsID = document.getElementById('cmsID').value; 
    241       console.log("Saving " + outMessage + " for cmsID " + cmsID) 
    242       messageList[cmsID] =  outMessage; 
    243       if (outMessage.length < 4) 
    244        markerList[cmsID].setIcon(yellowFlag); 
    245       else 
    246        markerList[cmsID].setIcon(blueFlag); 
    247       var xhttp = new XMLHttpRequest(); 
    248       xhttp.open("GET", "/cgi-bin/saveMessage.py?msg="+JSON.stringify(messageList), true); 
    249       xhttp.send(); 
    250  
    251 // Using POST might be a better idea ... haven't tried this yet 
    252 //      var xhr = new XMLHttpRequest(); 
    253 //      xhr.open("POST", "/cgi-bin/saveMessage.py?", true); 
    254 //      xhr.setRequestHeader('Content-Type', 'application/json; charset=UTF-8'); 
    255  
    256       // send the collected data as JSON 
    257 //      xhr.send(JSON.stringify(messageList)); 
    258     } 
    259  
    260     </script> 
     250            callback(xobj.responseText); 
     251        } 
     252    }; 
     253    // We want ajax to ignore any cached responses 
     254    xobj.setRequestHeader('If-Modified-Since', 'Sat, 01 Jan 2000 01:01:01 GMT') 
     255    xobj.send(null); 
     256} 
     257// retrieve the current cms message file 
     258function getMessage(cmsID) 
     259{ 
     260    loadJSON("http://localhost:8080/messagefile.txt", function(response) 
     261    { 
     262        // Parse JSON string into object 
     263        messageList = JSON.parse(response); 
     264        // select a message from json for the given cmsID 
     265        console.log("get by cmsID=" + cmsID); 
     266        var cmsSign = document.getElementById('msgcontent1'); 
     267        //cmsSign.innerHTML = messageList[cmsID]; 
     268        messageparts = messageList[cmsID].split("|"); 
     269        cmsSign.value = messageparts[0]; 
     270        document.getElementById('msgcontent2').value = messageparts[1]; 
     271        document.getElementById('msgcontent3').value = messageparts[2]; 
     272        cmsSign.style.display = 'block' 
     273        cmsSign.focus(); 
     274    }); 
     275} 
     276// Save an updated cms message to the file 
     277// NB: cms id's are one-based, json array is zero-based. 
     278function saveMessage(outMessage, cmsID) 
     279{ 
     280    var cmsID = document.getElementById('cmsID').value; 
     281    console.log("Saving " + outMessage + " for cmsID " + cmsID) 
     282    messageList[cmsID] = outMessage; 
     283    // Change icon if something was saved 
     284    if (outMessage == "||") 
     285        markerList[cmsID].setIcon(yellowFlag); 
     286    else 
     287        markerList[cmsID].setIcon(blueFlag); 
     288    var xhttp = new XMLHttpRequest(); 
     289    xhttp.open("GET", "http://localhost:8080/cgi-bin/saveMessage.py?msg=" + JSON 
     290        .stringify(messageList), true); 
     291    xhttp.send(); 
     292    // Using POST might be a better idea ... haven't tried this yet 
     293    //      var xhr = new XMLHttpRequest(); 
     294    //      xhr.open("POST", "/cgi-bin/saveMessage.py?", true); 
     295    //      xhr.setRequestHeader('Content-Type', 'application/json; charset=UTF-8'); 
     296    // send the collected data as JSON 
     297    //      xhr.send(JSON.stringify(messageList)); 
     298}    </script> 
    261299    <script async defer 
    262300    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD6iTyN0DjP-9OVkAgicyp4tkC10naE_B8&callback=initMap"> 

  • trunk/src/cptms/messagefile.txt

    r298 r299  
    1 ["","||","||","||","||","||","||","||","||","||","slow for|work zone|","||","||","||","||","||","||","||","||","||","||","||","||","||","||","||","||","||","||","||","||","Road Work|10PM - 6AM|","||","||","slow traffic|ahead|","SLOW TRAFFIC||","||","||","||","||","||","||","||","||","||","||","||","||","||","||","||","||","||","||","||","||","||","||","||","||","||","||","||","caution|debris on road|","||","||","||","||","||","||","||","||","||","||","||","||"] 
     1["zero||","||","||","||","||","||","||","||","||","||","slow for|work zone |","||","||","||","||","||","||","||","||","||","||","||","||","||","||","||","||","||","||","||","||","Road Work|10PM - 6AM|","||","||","slow traffic|ahead|","SLOW TRAFFIC||","||","free tomatoes!|U-Pick from |roadway","||","||","||","||","||","||","||","||","||","||","||","||","watch out for|falling rocks|","||","||","||","||","||","||","||","||","||","ABC||","||","||","caution|debris on road|","||","||","||","||","||","||","||","||","||","||","||","||"] 
Note: See TracChangeset for help on using the changeset viewer.