Changeset 295 in tmcsimulator for trunk


Ignore:
Timestamp:
03/05/2019 03:14:44 PM (7 years ago)
Author:
jdalbey
Message:

Adding cms_demo.html and related files

Location:
trunk/src/cptms
Files:
4 added
1 moved

Legend:

Unmodified
Added
Removed

  • trunk/src/cptms/cms_demo.html

    r294 r295  
    77    <title>KML Click Demo</title> 
    88    <style> 
     9        @font-face { 
     10          font-family: GreenLights; 
     11          src: url('GreenLights.otf'); 
     12        } 
    913      html, body { 
    1014        height: 370px; 
    … …  
    1418      #map { 
    1519       height: 560px; 
    16        width: 500px; 
     20       width: 100%; 
    1721       overflow: hidden; 
    18        float: left; 
    1922       border: thin solid #333; 
    2023       } 
    21       #cms-message { 
    22        height: 90px; 
    23        width: 250px; 
     24      #cms-name { 
     25       height: 30px; 
     26       width: 350px; 
    2427       overflow: hidden; 
    25        float: left; 
    2628       background-color: #ECECFB; 
    2729       border: thin solid #333; 
    2830       border-left: none; 
    2931       } 
     32      #cms-message { 
     33       height: 90px; 
     34       width: 550px; 
     35       overflow: hidden; 
     36       float: left; 
     37       border: thin solid #333; 
     38       border-left: none; 
     39       font-family: GreenLights; 
     40       font-size: xx-large; 
     41       background-color: black; 
     42       color: GoldenRod; 
     43       } 
    3044      #userinput { 
    3145       height: 90px; 
    32        width: 250px; 
     46       width: 175px; 
    3347       overflow: hidden; 
    34        float: left; 
    3548       background-color: #ECECFB; 
    3649       border: thin solid #333; 
    … …  
    4053  </head> 
    4154  <body> 
    42     <div id="map"></div> 
     55    <div id="cms-name"  style="display: none;"></div> 
    4356    <div id="cms-message"  style="display: none;"></div> 
    4457    <div id="userinput"    style="display: none;"> 
    45     <input id='userReply' type='text' /> 
     58    <input id='userReply' type='text' />  
     59    <input id='cmsID' value="" type='hidden'/> 
    4660    <button onclick="handleSubmit();">Submit</button> 
    4761    </div> 
     62    <div id="map"></div> 
    4863    <script> 
    4964    var centerPoint = {lat: 33.693385, lng: -117.798937}; 
    5065      var map; 
    51 var src="https://raw.githubusercontent.com/jdalbey/map-spikes/master/cms_single_dyer_rd.kml"; 
     66//var src="http://git.tokomak.net:8888/raw-attachment/ticket/75/dyer1.txt" 
     67var src="https://raw.githubusercontent.com/jdalbey/map-spikes/master/cms_two_signs.kml"; 
     68 
    5269//      var src = "https://www.arb.ca.gov/smp/met/kml/faa.kml"; 
    5370//      var src="https://raw.githubusercontent.com/jdalbey/map-spikes/master/la_airports.kml" 
    … …  
    6279        var kmlLayer = new google.maps.KmlLayer(src, { 
    6380          suppressInfoWindows: true, 
    64           preserveViewport: true,  // false for zoom to placemarks 
     81          preserveViewport: false,  // false for zoom to placemarks 
    6582          map: map 
    6683        }); 
    6784        kmlLayer.addListener('click', function(event) { 
    6885          // grab description from kml file 
    69           var content = event.featureData.infoWindowHtml; 
    70           var cmsMsg = document.getElementById('cms-message'); 
    71           cmsMsg.innerHTML = content;  // assign current msg to display 
    72           cmsMsg.style.display = 'block' 
     86          var feature = event.featureData; 
     87          //var content = event.featureData.infoWindowHtml; 
     88          var cmsName = document.getElementById('cms-name'); 
     89          cmsName.innerHTML = feature.name; // put sign name in display 
     90          cmsName.style.display = 'block' 
     91          cmsID = feature.id 
     92          getMessage(cmsID);  // note: this is async 
    7393          var userReply = document.getElementById('userReply'); 
    74           userReply.value = "";  // clear the response area 
     94          userReply.value = ""  // clear the response area 
     95          document.getElementById('cmsID').value=cmsID ; 
    7596          var userInput = document.getElementById('userinput'); 
    7697          userInput.style.display = 'block' 
     98          console.log("clicked on: "+feature.id+" - " + feature.name); 
    7799        }); 
    78100      } 
    … …  
    82104            document.getElementById('cms-message').style.display = 'none' 
    83105            document.getElementById('userinput').style.display = 'none' 
     106            document.getElementById('cms-name').style.display = 'none' 
    84107            // recover the user's response 
    85108            var response = document.getElementById('userReply').value; 
    86             alert("Message update: " + response); 
     109            saveMessage(response); 
    87110        } 
     111 
     112     function loadJSON(inFile,callback) {    
     113 
     114        var xobj = new XMLHttpRequest(); 
     115        xobj.overrideMimeType("application/json"); 
     116        xobj.open('GET', inFile, true);  
     117        xobj.onreadystatechange = function () { 
     118              if (xobj.readyState == 4 && xobj.status == "200") { 
     119                callback(xobj.responseText); 
     120              } 
     121        }; 
     122        // We want ajax to ignore any cached responses 
     123        xobj.setRequestHeader('If-Modified-Since', 'Sat, 01 Jan 2000 01:01:01 GMT') 
     124        xobj.send(null);   
     125     } 
     126     var messageList; 
     127     // retrieve the current cms message file 
     128     function getMessage(cmsID) 
     129     { 
     130        loadJSON("messagefile.txt",function(response) 
     131        { 
     132            // Parse JSON string into object 
     133            messageList = JSON.parse(response); 
     134            // TODO: select a message from json for the given cmsID 
     135            console.log("get by cmsID="+cmsID); 
     136            var cmsSign = document.getElementById('cms-message'); 
     137            if (cmsSign.length==0) cmsSign = " "; 
     138            cmsSign.innerHTML = messageList[cmsID]; 
     139            cmsSign.style.display = 'block' 
     140        }); 
     141     } 
     142    // Save an updated cms message to the file 
     143    // NB: cms id's are one-based, json array is zero-based. 
     144    function saveMessage(outMessage,cmsID)  
     145    { 
     146      var cmsID = document.getElementById('cmsID').value; 
     147      console.log("Saving " + outMessage + " for cmsID " + cmsID) 
     148      messageList[cmsID] =  outMessage; 
     149      var xhttp = new XMLHttpRequest(); 
     150      xhttp.open("GET", "/cgi-bin/saveMessage.py?msg="+JSON.stringify(messageList), true); 
     151      xhttp.send(); 
     152 
     153// Using POST might be a better idea ... haven't tried this yet 
     154//      var xhr = new XMLHttpRequest(); 
     155//      xhr.open("POST", "/cgi-bin/saveMessage.py?", true); 
     156//      xhr.setRequestHeader('Content-Type', 'application/json; charset=UTF-8'); 
     157 
     158      // send the collected data as JSON 
     159//      xhr.send(JSON.stringify(messageList)); 
     160    } 
     161 
    88162    </script> 
    89163    <script async defer 
Note: See TracChangeset for help on using the changeset viewer.