source: tmcsimulator/trunk/webapps/cptms.html @ 327

Revision 327, 13.0 KB checked in by jdalbey, 7 years ago (diff)

Add HAR layer.
Line 
1<!DOCTYPE html>
2<html>
3  <head>
4<!-- Launch with  python -m CGIHTTPServer 80  -->
5<!-- map center button icon from http://icons8.com/.  (Obligatory backlink, don't remove ) -->
6  <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
7    <title>CPTMS Map v0.6.2</title> 
8  <!--  Styles  -->
9  <link rel="stylesheet" href="">   
10<style>
11        @font-face {
12          font-family: Scoreboard;
13          src: url('js/scoreboard.ttf');
14        }
15      /* Set the size of the div element that contains the map */
16      #mapdiv {
17        height: 100%;
18        width: 100%; 
19       }
20        /* Makes the page fill the window. */
21      html, body {
22        height: 100%;
23        margin: 0;
24        padding: 0;
25      }
26        /* A line of the CMS message display */
27        .cms_sign {
28           height: 33px;
29           width: 272px;
30           resize: none;
31           font-family: Scoreboard;
32           font-size: xx-large;
33           background-color: #2F4F4F;
34           color: yellow;
35        }
36        /* Field for entering CMS Message line */
37       .cms-input {
38           border: thin solid #333;
39           padding: 2px;
40           font-family: "Lucida Console", Monaco, monospace;
41           font-size: medium;
42           width: 163px;
43        }
44        /* Field for entering HAR Message line */
45       .har-input {
46           border: thin solid #333;
47           padding: 2px;
48           font-size: medium;
49        }
50      #search-input {
51        background-color: #17263c;  /* #CD853F;  /*#E6E6FA; /* lavender */
52        color: #E6E6FA;  /* #FFEFD5; */
53        font-family: Roboto;
54        font-size: 18px;
55        font-weight: 400;
56        margin-left: 12px;
57        padding: 0 11px 0 13px;
58        text-overflow: ellipsis;
59        border-color: #746855;   /* #4d90fe; */
60        width: 400px;
61      }
62      #search-input:focus {
63        border-color: #E6E6FA; 
64      }
65      #ctrButton {
66        cursor: pointer;
67        background-color: #fff;
68        margin-right: 7px;
69        border: thick solid white;
70      }
71      #cms-info-label {
72           height: 20px;
73           width: 590px;
74           overflow: hidden;
75           background-color: #A8C5FF;  /*#ECECFB; */
76           border: thin solid #BDBDBD;
77           padding: 5px;
78       }
79      #message-display {
80           height: 300px;
81           width: 300px;
82           overflow: hidden;
83           float: left;
84       }
85      #har-msgdisplay1 {
86            background-color: darkgray;
87      }
88      #message-input {
89           height: 122px;
90           width: 170px;
91           background-color: #729FFF;
92           float: left;
93       }
94        /* CMS Dialog button panel */
95       #buttonPanel {
96           height: 122px;
97           width: 125px;
98           background-color: #729FFF;
99           float: left;
100           padding: 20px;
101        }
102       .wrapper {
103           position: relative;\
104        }
105        /* CMS Edit Message Dialog */
106       .dialog {
107          position: absolute;
108          top: 10%;
109          right: 20%;
110          background-color: #729FFF; /* #ECECFB; */
111          margin: auto;
112          padding: 20px;
113          border: 1px solid #888;
114          width: 680px;
115          height: 360px;
116          display: none;           
117        }
118      .unstyled-button {
119        border: 0 none;
120        padding: 0;
121        background: none;
122        cursor: pointer;
123      }   
124    /* The Close Button in the CMS Dialog */
125    .close {
126      color: #2E2E2E;
127      float: right;
128      font-size: 30px;
129      font-weight: bold;
130    }
131    .close:hover,
132    .close:focus {
133      color: black;
134      text-decoration: none;
135      cursor: pointer;
136    }
137
138    </style>
139  </head>
140  <body>
141    <!--
142         Version 6.3 decomposed into modules for each layer
143         Version 6.2 puts cctv and cms and vds in separate data layers.   
144         Version 6.1 Puts cms messages in json formatted file.  Polls for updates.
145         Version 6.0 Adds speed-dependent images to infowindow for cctv icons
146         Version 5.8 Adds an infowindow with a static image for all cctv icons
147         Version 5.7 integrates CCTV icons and button (but empty click handler)
148         Version 5.6 integrates CMS features
149         Version 5.5 renames title to CPTMS, loads static data on startup and dynamic data
150         every ten seconds. 
151         Version 5.4 adds Search box and Center button
152         Version 5.3 fixed dot color update defect, increased refresh rate to 10 sec.
153         Version 5.2 places red dots overlapping yellow dots.
154         Version 5.1 removes the map and street view buttons and the H3 tag.
155         Version 5 uses precomputed perpendicular vector in dot adjustment function
156         Version 4 Adjust the spacing between dots when the map is zoomed.
157         Version 3 does loadGeoJson only once, and subsequently does an ajax load
158         of the highways file, and selectively updates only those placePins whose
159         color has changed.
160         @author jdalbey  2019.2.17
161    -->
162    <!-- The text area input for the Search Box -->
163    <input id="search-input" class="controls" type="text" placeholder="Search Box">
164    <!--The div element where the map appears. -->
165    <div id="mapdiv"></div>
166    <!-- The div element for the popup dialog. Best results when placed here. -->
167    <div id="cms-dialog" class="dialog">
168        <span id="cms-close" class="close">&#x2612;</span>  <!-- close button symbol -->
169        <br>
170        <div id="cms-info-label" style="font-family:'Courier New'">CMS ID: xxx LOCATION: </div>
171        <br>
172        <input id='cmsID' value="" type='hidden'/>
173        <div id="message-input">Phase 1:
174        <input id="msgcontent1" class="cms-input"  maxlength="16" type="text"/><br><br>
175        <input id="msgcontent2" class="cms-input"  maxlength="16" type="text"/><br><br>
176        <input id="msgcontent3" class="cms-input"  maxlength="16" type="text"/><br><br>
177        Phase 2:
178        <input id="msgcontent4" class="cms-input"  maxlength="16" type="text"/><br><br>
179        <input id="msgcontent5" class="cms-input"  maxlength="16" type="text"/><br><br>
180        <input id="msgcontent6" class="cms-input"  maxlength="16" type="text"/><br><br>
181        </div>       
182        <div id="buttonPanel"    style="display: block;"><br><br>
183        <button onclick="handleCMSsubmit();">Send >></button><br><br>
184        <button onclick="handleCMSclear();">Clear >></button><br><br>
185        <button onclick="handleDialogClose('cms-dialog');">Close </button>
186        </div>
187        <div id="message-display"  style="display: block;">Current:
188         <textarea class="cms_sign" readonly id="msgdisplay1" maxlength="16" rows="1" cols="16"></textarea>
189         <textarea class="cms_sign" readonly id="msgdisplay2" maxlength="16" rows="1" cols="16"></textarea>
190         <textarea class="cms_sign" readonly id="msgdisplay3" maxlength="16" rows="1" cols="16"></textarea>
191         <br><br><br>
192         <textarea class="cms_sign" readonly id="msgdisplay4" maxlength="16" rows="1" cols="16"></textarea>
193         <textarea class="cms_sign" readonly id="msgdisplay5" maxlength="16" rows="1" cols="16"></textarea>
194         <textarea class="cms_sign" readonly id="msgdisplay6" maxlength="16" rows="1" cols="16"></textarea>
195        </div>
196    </div>
197    <div id="har-dialog" class="dialog">
198        <span id="har-close" class="close">&#x2612;</span>  <!-- close button symbol -->
199        <div id="har-info-label" style="font-family:'Courier New'">HAR ID: xxx LOCATION: </div>
200        <br>
201        <input id='harID' value="" type='hidden'/>
202        <!--div id="har-message-input"-->Proposed:<br>
203        <input id="har-msgcontent1" class="har-input" type="text" size="50"><br>
204        <!--textarea id="har-msgcontent1" maxlength="150" rows="2" cols="50"/><br><br-->
205
206        <div id="har-buttonPanel" style="display: block;"><br>
207        <button onclick="handleHARsubmit();">Send >></button>
208        <button onclick="handleHARclear();">Clear >></button>
209        <button onclick="handleDialogClose('har-dialog');">Close </button><br><br>
210        </div>
211        <div id="har-message-display"  style="display: block;">Current:<br>
212         <textarea readonly id="har-msgdisplay1" maxlength="150" rows="3" cols="50"></textarea>
213        </div>
214    </div>
215    <!--The div elements where the buttons appear  -->
216    <div id="ctrButton"><img width="30" src="images/btn_mapcenter.png"</div>
217    <button id="harButton" class="unstyled-button"><img id="harBtnImg" src="images/btnReady_HAR.png"></button>
218    <button id="cctvButton" class="unstyled-button"><img id="cctvBtnImg" src="images/btnReady_CCTV.png"></button>
219    <button id="cmsButton" class="unstyled-button"><img id="cmsBtnImg" src="images/btnReady_CMS.png"></button>
220    <button id="vdsButton" class="unstyled-button"><img id="vdsBtnImg" src="images/btnDepressed_VDS.png"></button>
221    <script>
222
223    // a global variable for the google map
224    var map;
225    // a global dictionary to lookup a station's original coordinates
226    var vds_coords = {};
227    // a global variable to hold locations of marked search places
228    var placePins = [];
229    // the cms message local dictionary
230    var messageDict = {}; 
231    // the har message local dictionary
232    var HARmessageDict = {}; 
233    // Constant for map center location: The John Wayne Airport
234    //var centerPoint = {lat: 33.687228, lng: -117.872148};
235    // Constant for map center location in District 12
236    var centerPoint = {
237        lat: 33.693385,
238        lng: -117.798937
239    };
240    // Initial map zoom
241    var initZoom = 11;
242    // Dot colors used in traffic model to indicate free-flowing, slowed, and stopped traffic
243    // and their associated zvalues so slower traffic dots are more visible.
244    // white means a disabled spot
245    var colorZvalues = {
246        "white": 5,
247        "lime": 10,
248        "yellow": 20,
249        "red": 30
250    };
251
252    var kMapPointsFile = "highways.json"; // dynamic json data file created by CADserver
253    var kMapStartupFile = "data_layers/highways_startup.json"; // initial (static) highways file used once at startup
254    var kCMSfile = "data_layers/cms_locations_D12.gjson"; // CMS locations
255    var kCCTVfile = "data_layers/cctv_locations_D12.gjson"; // CCTV locations
256    var kHARfile = "data_layers/har_locations_D12.gjson"; // CMS locations
257    var blueFlag = "images/icon_cmsBlue.png";
258    var yellowFlag = "images/icon_cmsYellow.png";
259    var cctvIcon = "images/icon_cctvCyan.png";
260    var cctvIconWhite = "images/icon_cctvWhite.png";
261    var vdsIconGreen = "images/circle-green.png"
262    var vdsIconYellow = "images/circle-yellow.png"
263    var vdsIconRed = "images/circle-red.png"
264    var harActive = "images/icon_harActive.png";
265    var cms_showing = false;
266    var vds_showing = true;
267    var cctv_showing = false;
268    var har_showing = false;
269    var cctv_infowindow; // We create just a single instance of info window.
270
271
272    // Initialize the view/hide buttons
273    function initLayerButtons()
274    {
275        initHARbutton();
276        initCCTVbutton();
277        initCMSbutton();
278        initVDSbutton();
279    }
280
281    // Initialize the map and load the points
282    function initMap()
283    {
284        // Declare the map and where it belongs on the page
285        map = new google.maps.Map(document.getElementById('mapdiv'),
286        {
287            zoom: initZoom,
288            center: centerPoint,
289            styles: night_mode,
290            mapTypeControl: false,
291            streetViewControl: false
292        });
293
294        // setup the search box and center button
295        initSearch();
296        initCenter();
297
298        loadVDSlayer(); // go load the map data
299        loadCMSlayer();
300        loadCCTVlayer();
301        loadHARlayer();
302
303        initLayerButtons(); // setup the show/hide layer buttons
304
305        // Start a timer to refresh the vds dots every 10 seconds
306        var myTimer = setInterval(updateVDSlayer, 10000);
307        // start an interval timer to refresh the cms icons every 10 seconds
308        var cmsTimer = setInterval(loadAllcmsMessages, 10000);
309
310        // start an interval timer to refresh the har icons every 10 seconds
311        var harTimer = setInterval(loadAllharMessages, 10000);
312
313        // Listen for zoom changes and move the vds dots so as to keep a nice
314        // visual distance between them appropriate to the zoom factor
315        map.addListener('zoom_changed', function()
316        {
317            // fetch how much the map is currently zoomed
318            currentZoom = map.getZoom();
319            // only bother adjusting within this range
320            if ((currentZoom < 16) && (currentZoom > 10))
321            {
322                // magic formula controls distance between dots
323                adjustCoords(calcDistanceFactor());
324            }
325        });
326
327    }
328
329    </script>
330    <script  src="js/common.js"></script>
331    <script  src="js/vdsLayer.js"></script>
332    <script  src="js/cmsLayer.js"></script>
333    <script  src="js/cctvLayer.js"></script>
334    <script  src="js/harLayer.js"></script>
335    <script  src="js/controls.js"></script>
336    <script  src="js/night_mode.js"></script>
337    <!-- Using John's API Key -->
338    <script async defer
339    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD6iTyN0DjP-9OVkAgicyp4tkC10naE_B8&libraries=places&callback=initMap">
340    </script>
341  </body>
342</html>
Note: See TracBrowser for help on using the repository browser.