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

Revision 298, 9.8 KB checked in by jdalbey, 7 years ago (diff)

cms_demo.html modified to add street name to rollover text
Line 
1<!DOCTYPE html>
2<html>
3  <head>
4<!-- Launch with  python -m CGIHTTPServer 8080  -->
5    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
6    <meta charset="utf-8">
7    <title>CMS Manager Demo</title>
8    <style>
9        @font-face {
10          font-family: Scoreboard;
11          src: url('scoreboard.ttf');
12        }
13      html, body {
14            height: 370px;
15            padding: 0;
16            margin: 0;
17        }
18        textarea {
19           width: 272px;
20           resize: none;
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;
27        }
28      #map {
29           height: 560px;
30           width: 100%;
31           overflow: hidden;
32           border: thin solid #333;
33       }
34      #cms-name {
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}
50      #cms-message {
51           height: 122px;
52           width: 300px;
53           overflow: hidden;
54           float: left;
55           /* border: thin solid #333;*/
56           /* border-left: none;*/
57       }
58      #userinput {
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;
66       }
67    </style>
68  </head>
69  <body>
70    <div id="cms-name"  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'/>
78    <div id="userinput"    style="display: none;">
79    <button onclick="handleClear();">Clear</button>
80    <button onclick="handleSubmit();">OK</button>
81    <button onclick="handleCancel();">Cancel</button>
82    </div>
83    <div id="map"></div>
84    <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)
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              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},
137                map: map,
138                icon: simpleImage,
139                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'
158                });
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()
177        {
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()
189        {
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>
261    <script async defer
262    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD6iTyN0DjP-9OVkAgicyp4tkC10naE_B8&callback=initMap">
263    </script>
264  </body>
265</html>
Note: See TracBrowser for help on using the repository browser.