Changeset 297 in tmcsimulator


Ignore:
Timestamp:
03/07/2019 08:05:05 AM (7 years ago)
Author:
jdalbey
Message:

Add icons for cms signs, scoreboard font, and update cms demo

Location:
trunk/src/cptms
Files:
4 added
1 deleted
2 edited

Legend:

Unmodified
Added
Removed

  • trunk/src/cptms/cms_demo.html

    r296 r297  
    22<html> 
    33  <head> 
    4 <!-- Launch with  python -m SimpleHTTPServer 8080  --> 
     4<!-- Launch with  python -m CGIHTTPServer 8080  --> 
    55    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
    66    <meta charset="utf-8"> 
    7     <title>KML Click Demo</title> 
     7    <title>CMS Manager Demo</title> 
    88    <style> 
    99        @font-face { 
    10           font-family: GreenLights; 
    11           src: url('GreenLights.otf'); 
     10          font-family: Scoreboard; 
     11          src: url('scoreboard.ttf'); 
    1212        } 
    1313      html, body { 
    14         height: 370px; 
    15         padding: 0; 
    16         margin: 0; 
     14            height: 370px; 
     15            padding: 0; 
     16            margin: 0; 
    1717        } 
    1818        textarea { 
     19           width: 272px; 
    1920           resize: none; 
    20            min-height: 16px; 
    21            max-height: 18px; 
    22            white-space: pre; 
    23         } 
    24         input { 
    25             max-height: 12px; 
    26         } 
    27         button { 
    28             min-height: 21px; 
    29             max-height: 25px; 
     21           overflow-wrap: break-word; 
     22           font-family: Scoreboard; 
     23           font-size: xx-large; 
     24           background-color: black; 
     25           color: GoldenRod; 
     26           overflow-y: hidden; 
    3027        } 
    3128      #map { 
    32        height: 560px; 
    33        width: 100%; 
    34        overflow: hidden; 
    35        border: thin solid #333; 
     29           height: 560px; 
     30           width: 100%; 
     31           overflow: hidden; 
     32           border: thin solid #333; 
    3633       } 
    3734      #cms-name { 
    38        height: 30px; 
    39        width: 335px; 
    40        overflow: hidden; 
    41        background-color: #ECECFB; 
    42        border: thin solid #333; 
    43        border-left: none; 
    44        } 
     35           height: 30px; 
     36           width: 300px; 
     37           overflow: hidden; 
     38           background-color: #ECECFB; 
     39           border: thin solid #333; 
     40           /* border-left: none; */ 
     41       } 
     42       input { 
     43           font-family: Scoreboard; 
     44           font-size: xx-large; 
     45           font-weight: bold; 
     46           background-color: black; 
     47           color: Yellow; 
     48           border: thin solid #333; 
     49} 
    4550      #cms-message { 
    46        height: 93px; 
    47        width: 335px; 
    48        overflow: hidden; 
    49        float: left; 
    50        border: thin solid #333; 
    51        border-left: none; 
    52        font-family: GreenLights; 
    53        font-size: xx-large; 
    54        background-color: black; 
    55        color: GoldenRod; 
     51           height: 122px; 
     52           width: 300px; 
     53           overflow: hidden; 
     54           float: left; 
     55           /* border: thin solid #333;*/ 
     56           /* border-left: none;*/ 
    5657       } 
    5758      #userinput { 
    58        height: 93px; 
    59        width: 200px; 
    60        overflow: hidden; 
    61        background-color: #ECECFB; 
    62        border: thin solid #333; 
    63        border-left: none; 
     59           height: 122px; 
     60           width: 100px; 
     61           overflow: hidden; 
     62           background-color: #ECECFB; 
     63           border: thin solid #333; 
     64           border-left: none; 
     65           float: left; 
    6466       } 
    6567    </style> 
    … …  
    6769  <body> 
    6870    <div id="cms-name"  style="display: none;"></div> 
    69     <div id="cms-message"  style="display: none;"></div> 
     71    <div id="cms-message"  style="display: none;"> 
     72<!--    <textarea id="msgcontent1" maxlength="48" rows="3" cols="10" wrap="hard" style="display: none;"></textarea> --> 
     73    <input id="msgcontent1" size="16" maxlength="16"/> 
     74    <input id="msgcontent2" size="16" maxlength="16"/> 
     75    <input id="msgcontent3" size="16" maxlength="16"/> 
     76    </div> 
     77    <input id='cmsID' value="" type='hidden'/> 
    7078    <div id="userinput"    style="display: none;"> 
    71     <input id='cmsID' value="" type='hidden'/> 
    72     <textarea id="msgcontent1" maxlength="16" cols="16"></textarea> 
    73     <textarea id="msgcontent2" maxlength="16" cols="16"></textarea> 
    74     <textarea id="msgcontent3" maxlength="16" cols="16"></textarea> 
    75     <button onclick="handleSubmit();">Submit</button> 
     79    <button onclick="handleClear();">Clear</button> 
     80    <button onclick="handleSubmit();">OK</button> 
    7681    <button onclick="handleCancel();">Cancel</button> 
    7782    </div> 
    … …  
    8085    var centerPoint = {lat: 33.693385, lng: -117.798937}; 
    8186      var map; 
    82 //var src="http://git.tokomak.net:8888/raw-attachment/ticket/75/dyer1.txt" 
    83 var src="https://raw.githubusercontent.com/jdalbey/map-spikes/master/cms_two_signs.kml"; 
    84  
    85 //      var src = "https://www.arb.ca.gov/smp/met/kml/faa.kml"; 
    86 //      var src="https://raw.githubusercontent.com/jdalbey/map-spikes/master/la_airports.kml" 
    87 //      var src = 'https://developers.google.com/maps/documentation/javascript/examples/kml/westcampus.kml'; 
     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; 
    8896      function initMap() { 
    8997        map = new google.maps.Map(document.getElementById('map'), { 
    9098          center: centerPoint, 
    9199          zoom: 11, 
    92           mapTypeId: 'terrain' 
     100          /* mapTypeId: 'terrain', */ 
     101          mapTypeControl: false, 
     102          streetViewControl: false  
    93103        }); 
    94  
    95         var kmlLayer = new google.maps.KmlLayer(src, { 
    96           suppressInfoWindows: true, 
    97           preserveViewport: false,  // false for zoom to placemarks 
    98           map: map 
     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) 
     117        { 
     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++)  
     123            { 
     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              markerList[i] = new google.maps.Marker( 
     133              { 
     134                position: {lat: currLat, lng: currLong}, 
     135                map: map, 
     136                icon: simpleImage, 
     137                title: " "+cms.location.route + " "+ cms.location.direction+ " "+ cms.location.postmile, 
     138                label: ""+i 
     139              }); 
     140              console.log("built: "+markerList[i].id+" "+markerList[i].title); 
     141 //           } 
     142 //           for (var i = 0; i < markerList.length; i++)  
     143 //           { 
     144              google.maps.event.addListener(markerList[i], 'click', function () { 
     145                  //var content = event.featureData.infoWindowHtml; 
     146                  var cmsName = document.getElementById('cms-name'); 
     147                  cmsName.innerHTML = this.getTitle(); // put sign name in display 
     148                  cmsName.style.display = 'block' 
     149                  var cmsMsg = document.getElementById('cms-message'); 
     150                  cmsMsg.style.display = 'block' 
     151                  cmsID = Number(this.getLabel()); 
     152                  getMessage(cmsID);  // note: this is async 
     153                  document.getElementById('cmsID').value=cmsID ; 
     154                  var userInput = document.getElementById('userinput'); 
     155                  userInput.style.display = 'block' 
     156                }); 
     157             }             
    99158        }); 
    100         kmlLayer.addListener('click', function(event) { 
    101           // grab description from kml file 
    102           var feature = event.featureData; 
    103           //var content = event.featureData.infoWindowHtml; 
    104           var cmsName = document.getElementById('cms-name'); 
    105           cmsName.innerHTML = feature.name; // put sign name in display 
    106           cmsName.style.display = 'block' 
    107           cmsID = feature.id 
    108           getMessage(cmsID);  // note: this is async 
    109           // clear the response area 
    110           document.getElementById('msgcontent1').value=""; 
    111           document.getElementById('msgcontent2').value=""; 
    112           document.getElementById('msgcontent3').value=""; 
    113           document.getElementById('cmsID').value=cmsID ; 
    114           var userInput = document.getElementById('userinput'); 
    115           userInput.style.display = 'block' 
    116           console.log("clicked on: "+feature.id+" - " + feature.name); 
    117         }); 
    118       } 
     159     } 
     160     function loadcmsJSON(callback) {    
     161 
     162        var xobj = new XMLHttpRequest(); 
     163            xobj.overrideMimeType("application/json"); 
     164        xobj.open('GET', kMapStartupFile, true);  
     165        xobj.onreadystatechange = function () { 
     166              if (xobj.readyState == 4 && xobj.status == "200") { 
     167                callback(xobj.responseText); 
     168              } 
     169        }; 
     170        // We want ajax to ignore any cached responses 
     171        xobj.setRequestHeader('If-Modified-Since', 'Sat, 01 Jan 2000 01:01:01 GMT') 
     172        xobj.send(null);   
     173     } 
    119174        function handleSubmit() 
    120175        { 
    … …  
    127182            var response2 = document.getElementById('msgcontent2').value; 
    128183            var response3 = document.getElementById('msgcontent3').value; 
    129             saveMessage(response1+"<br>"+response2+"<br>"+response3); 
     184            saveMessage(response1+"|"+response2+"|"+response3); 
    130185        } 
    131186        function handleCancel() 
    … …  
    135190            document.getElementById('userinput').style.display = 'none' 
    136191            document.getElementById('cms-name').style.display = 'none' 
     192        } 
     193        function handleClear() 
     194        { 
     195            document.getElementById('msgcontent1').value=""; 
     196            document.getElementById('msgcontent2').value=""; 
     197            document.getElementById('msgcontent3').value=""; 
     198            document.getElementById('msgcontent1').focus(); 
    137199        } 
    138200 
    … …  
    151213        xobj.send(null);   
    152214     } 
    153      var messageList; 
    154215     // retrieve the current cms message file 
    155216     function getMessage(cmsID) 
    … …  
    161222            // select a message from json for the given cmsID 
    162223            console.log("get by cmsID="+cmsID); 
    163             var cmsSign = document.getElementById('cms-message'); 
    164             cmsSign.innerHTML = messageList[cmsID]; 
     224            var cmsSign = document.getElementById('msgcontent1'); 
     225            //cmsSign.innerHTML = messageList[cmsID]; 
     226            messageparts = messageList[cmsID].split("|"); 
     227            cmsSign.value = messageparts[0]; 
     228            document.getElementById('msgcontent2').value = messageparts[1]; 
     229            document.getElementById('msgcontent3').value = messageparts[2]; 
    165230            cmsSign.style.display = 'block' 
     231            cmsSign.focus(); 
    166232        }); 
    167233     } 
    … …  
    173239      console.log("Saving " + outMessage + " for cmsID " + cmsID) 
    174240      messageList[cmsID] =  outMessage; 
     241      if (outMessage.length < 4) 
     242       markerList[cmsID].setIcon(yellowFlag); 
     243      else 
     244       markerList[cmsID].setIcon(blueFlag); 
    175245      var xhttp = new XMLHttpRequest(); 
    176246      xhttp.open("GET", "/cgi-bin/saveMessage.py?msg="+JSON.stringify(messageList), true); 

  • trunk/src/cptms/messagefile.txt

    r295 r297  
    1 ["","slow traffic ahead","left lane closed"] 
     1["","||","||","||","||","||","||","||","||","||","||","||","||","||","||","||","||","||","||","||","||","||","||","||","||","||","||","||","||","||","||","Road Work|10PM - 6AM|","||","||","slow traffic|ahead|","SLOW TRAFFIC||","||","||","||","||","||","||","||","||","||","||","||","||","||","||","||","||","||","||","||","||","||","||","||","||","closed||","||","||","||","||","||","||","||","||","||","||","||","||","||","||","||"] 
Note: See TracChangeset for help on using the changeset viewer.