Warning: Can't use blame annotator: 
svn blame failed on trunk/src/cptms/cms_demo.html: ("Can't find a temporary directory: Internal error", 20014)

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

Revision 297, 9.7 KB checked in by jdalbey, 7 years ago (diff)

Add icons for cms signs, scoreboard font, and update cms demo
RevLine 
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              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             }           
158        });
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     }
174        function handleSubmit()
175        {
176            // hide the display
177            document.getElementById('cms-message').style.display = 'none'
178            document.getElementById('userinput').style.display = 'none'
179            document.getElementById('cms-name').style.display = 'none'
180            // recover the user's response
181            var response1 = document.getElementById('msgcontent1').value;
182            var response2 = document.getElementById('msgcontent2').value;
183            var response3 = document.getElementById('msgcontent3').value;
184            saveMessage(response1+"|"+response2+"|"+response3);
185        }
186        function handleCancel()
187        {
188            // hide the display
189            document.getElementById('cms-message').style.display = 'none'
190            document.getElementById('userinput').style.display = 'none'
191            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();
199        }
200
201     function loadJSON(inFile,callback) {   
202
203        var xobj = new XMLHttpRequest();
204        xobj.overrideMimeType("application/json");
205        xobj.open('GET', inFile, true); 
206        xobj.onreadystatechange = function () {
207              if (xobj.readyState == 4 && xobj.status == "200") {
208                callback(xobj.responseText);
209              }
210        };
211        // We want ajax to ignore any cached responses
212        xobj.setRequestHeader('If-Modified-Since', 'Sat, 01 Jan 2000 01:01:01 GMT')
213        xobj.send(null); 
214     }
215     // retrieve the current cms message file
216     function getMessage(cmsID)
217     {
218        loadJSON("messagefile.txt",function(response)
219        {
220            // Parse JSON string into object
221            messageList = JSON.parse(response);
222            // select a message from json for the given cmsID
223            console.log("get by cmsID="+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];
230            cmsSign.style.display = 'block'
231            cmsSign.focus();
232        });
233     }
234    // Save an updated cms message to the file
235    // NB: cms id's are one-based, json array is zero-based.
236    function saveMessage(outMessage,cmsID) 
237    {
238      var cmsID = document.getElementById('cmsID').value;
239      console.log("Saving " + outMessage + " for cmsID " + cmsID)
240      messageList[cmsID] =  outMessage;
241      if (outMessage.length < 4)
242       markerList[cmsID].setIcon(yellowFlag);
243      else
244       markerList[cmsID].setIcon(blueFlag);
245      var xhttp = new XMLHttpRequest();
246      xhttp.open("GET", "/cgi-bin/saveMessage.py?msg="+JSON.stringify(messageList), true);
247      xhttp.send();
248
249// Using POST might be a better idea ... haven't tried this yet
250//      var xhr = new XMLHttpRequest();
251//      xhr.open("POST", "/cgi-bin/saveMessage.py?", true);
252//      xhr.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
253
254      // send the collected data as JSON
255//      xhr.send(JSON.stringify(messageList));
256    }
257
258    </script>
259    <script async defer
260    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD6iTyN0DjP-9OVkAgicyp4tkC10naE_B8&callback=initMap">
261    </script>
262  </body>
263</html>
Note: See TracBrowser for help on using the repository browser.