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

Revision 296, 6.8 KB checked in by jdalbey, 7 years ago (diff)

cms demo modified for 3 input lines
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        textarea {
19           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;
30        }
31      #map {
32       height: 560px;
33       width: 100%;
34       overflow: hidden;
35       border: thin solid #333;
36       }
37      #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       }
45      #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;
56       }
57      #userinput {
58       height: 93px;
59       width: 200px;
60       overflow: hidden;
61       background-color: #ECECFB;
62       border: thin solid #333;
63       border-left: none;
64       }
65    </style>
66  </head>
67  <body>
68    <div id="cms-name"  style="display: none;"></div>
69    <div id="cms-message"  style="display: none;"></div>
70    <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>
76    <button onclick="handleCancel();">Cancel</button>
77    </div>
78    <div id="map"></div>
79    <script>
80    var centerPoint = {lat: 33.693385, lng: -117.798937};
81      var map;
82//var src="http://git.tokomak.net:8888/raw-attachment/ticket/75/dyer1.txt"
83var 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';
88      function initMap() {
89        map = new google.maps.Map(document.getElementById('map'), {
90          center: centerPoint,
91          zoom: 11,
92          mapTypeId: 'terrain'
93        });
94
95        var kmlLayer = new google.maps.KmlLayer(src, {
96          suppressInfoWindows: true,
97          preserveViewport: false,  // false for zoom to placemarks
98          map: map
99        });
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      }
119        function handleSubmit()
120        {
121            // hide the display
122            document.getElementById('cms-message').style.display = 'none'
123            document.getElementById('userinput').style.display = 'none'
124            document.getElementById('cms-name').style.display = 'none'
125            // recover the user's response
126            var response1 = document.getElementById('msgcontent1').value;
127            var response2 = document.getElementById('msgcontent2').value;
128            var response3 = document.getElementById('msgcontent3').value;
129            saveMessage(response1+"<br>"+response2+"<br>"+response3);
130        }
131        function handleCancel()
132        {
133            // hide the display
134            document.getElementById('cms-message').style.display = 'none'
135            document.getElementById('userinput').style.display = 'none'
136            document.getElementById('cms-name').style.display = 'none'
137        }
138
139     function loadJSON(inFile,callback) {   
140
141        var xobj = new XMLHttpRequest();
142        xobj.overrideMimeType("application/json");
143        xobj.open('GET', inFile, true); 
144        xobj.onreadystatechange = function () {
145              if (xobj.readyState == 4 && xobj.status == "200") {
146                callback(xobj.responseText);
147              }
148        };
149        // We want ajax to ignore any cached responses
150        xobj.setRequestHeader('If-Modified-Since', 'Sat, 01 Jan 2000 01:01:01 GMT')
151        xobj.send(null); 
152     }
153     var messageList;
154     // retrieve the current cms message file
155     function getMessage(cmsID)
156     {
157        loadJSON("messagefile.txt",function(response)
158        {
159            // Parse JSON string into object
160            messageList = JSON.parse(response);
161            // select a message from json for the given cmsID
162            console.log("get by cmsID="+cmsID);
163            var cmsSign = document.getElementById('cms-message');
164            cmsSign.innerHTML = messageList[cmsID];
165            cmsSign.style.display = 'block'
166        });
167     }
168    // Save an updated cms message to the file
169    // NB: cms id's are one-based, json array is zero-based.
170    function saveMessage(outMessage,cmsID) 
171    {
172      var cmsID = document.getElementById('cmsID').value;
173      console.log("Saving " + outMessage + " for cmsID " + cmsID)
174      messageList[cmsID] =  outMessage;
175      var xhttp = new XMLHttpRequest();
176      xhttp.open("GET", "/cgi-bin/saveMessage.py?msg="+JSON.stringify(messageList), true);
177      xhttp.send();
178
179// Using POST might be a better idea ... haven't tried this yet
180//      var xhr = new XMLHttpRequest();
181//      xhr.open("POST", "/cgi-bin/saveMessage.py?", true);
182//      xhr.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
183
184      // send the collected data as JSON
185//      xhr.send(JSON.stringify(messageList));
186    }
187
188    </script>
189    <script async defer
190    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD6iTyN0DjP-9OVkAgicyp4tkC10naE_B8&callback=initMap">
191    </script>
192  </body>
193</html>
Note: See TracBrowser for help on using the repository browser.