source: tmcsimulator/trunk/src/cptms/cms_demo.html @ 295

Revision 295, 5.8 KB checked in by jdalbey, 7 years ago (diff)

Adding cms_demo.html and related files
Line 
1<!DOCTYPE html>
2<html>
3  <head>
4<!-- Launch with  python -m SimpleHTTPServer 8080  -->
5    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
6    <meta charset="utf-8">
7    <title>KML Click Demo</title>
8    <style>
9        @font-face {
10          font-family: GreenLights;
11          src: url('GreenLights.otf');
12        }
13      html, body {
14        height: 370px;
15        padding: 0;
16        margin: 0;
17        }
18      #map {
19       height: 560px;
20       width: 100%;
21       overflow: hidden;
22       border: thin solid #333;
23       }
24      #cms-name {
25       height: 30px;
26       width: 350px;
27       overflow: hidden;
28       background-color: #ECECFB;
29       border: thin solid #333;
30       border-left: none;
31       }
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       }
44      #userinput {
45       height: 90px;
46       width: 175px;
47       overflow: hidden;
48       background-color: #ECECFB;
49       border: thin solid #333;
50       border-left: none;
51       }
52    </style>
53  </head>
54  <body>
55    <div id="cms-name"  style="display: none;"></div>
56    <div id="cms-message"  style="display: none;"></div>
57    <div id="userinput"    style="display: none;">
58    <input id='userReply' type='text' /> 
59    <input id='cmsID' value="" type='hidden'/>
60    <button onclick="handleSubmit();">Submit</button>
61    </div>
62    <div id="map"></div>
63    <script>
64    var centerPoint = {lat: 33.693385, lng: -117.798937};
65      var map;
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
69//      var src = "https://www.arb.ca.gov/smp/met/kml/faa.kml";
70//      var src="https://raw.githubusercontent.com/jdalbey/map-spikes/master/la_airports.kml"
71//      var src = 'https://developers.google.com/maps/documentation/javascript/examples/kml/westcampus.kml';
72      function initMap() {
73        map = new google.maps.Map(document.getElementById('map'), {
74          center: centerPoint,
75          zoom: 11,
76          mapTypeId: 'terrain'
77        });
78
79        var kmlLayer = new google.maps.KmlLayer(src, {
80          suppressInfoWindows: true,
81          preserveViewport: false,  // false for zoom to placemarks
82          map: map
83        });
84        kmlLayer.addListener('click', function(event) {
85          // grab description from kml file
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
93          var userReply = document.getElementById('userReply');
94          userReply.value = ""  // clear the response area
95          document.getElementById('cmsID').value=cmsID ;
96          var userInput = document.getElementById('userinput');
97          userInput.style.display = 'block'
98          console.log("clicked on: "+feature.id+" - " + feature.name);
99        });
100      }
101        function handleSubmit()
102        {
103            // hide the display
104            document.getElementById('cms-message').style.display = 'none'
105            document.getElementById('userinput').style.display = 'none'
106            document.getElementById('cms-name').style.display = 'none'
107            // recover the user's response
108            var response = document.getElementById('userReply').value;
109            saveMessage(response);
110        }
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
162    </script>
163    <script async defer
164    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD6iTyN0DjP-9OVkAgicyp4tkC10naE_B8&callback=initMap">
165    </script>
166  </body>
167</html>
Note: See TracBrowser for help on using the repository browser.