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

Revision 330, 13.1 KB checked in by jdalbey, 7 years ago (diff)

cptms v0.6.4 removes fullscreen control, adjusts cms dialog position
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.4</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          left: 25%;
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.4 Remove fullscreen control. (Use Browser F11 instead).
143         Version 6.3 decomposed into modules for each layer
144         Version 6.2 puts cctv and cms and vds in separate data layers.   
145         Version 6.1 Puts cms messages in json formatted file.  Polls for updates.
146         Version 6.0 Adds speed-dependent images to infowindow for cctv icons
147         Version 5.8 Adds an infowindow with a static image for all cctv icons
148         Version 5.7 integrates CCTV icons and button (but empty click handler)
149         Version 5.6 integrates CMS features
150         Version 5.5 renames title to CPTMS, loads static data on startup and dynamic data
151         every ten seconds. 
152         Version 5.4 adds Search box and Center button
153         Version 5.3 fixed dot color update defect, increased refresh rate to 10 sec.
154         Version 5.2 places red dots overlapping yellow dots.
155         Version 5.1 removes the map and street view buttons and the H3 tag.
156         Version 5 uses precomputed perpendicular vector in dot adjustment function
157         Version 4 Adjust the spacing between dots when the map is zoomed.
158         Version 3 does loadGeoJson only once, and subsequently does an ajax load
159         of the highways file, and selectively updates only those placePins whose
160         color has changed.
161         @author jdalbey  2019.2.17
162    -->
163    <!-- The text area input for the Search Box -->
164    <input id="search-input" class="controls" type="text" placeholder="Search Box">
165    <!--The div element where the map appears. -->
166    <div id="mapdiv"></div>
167    <!-- The div element for the popup dialog. Best results when placed here. -->
168    <div id="cms-dialog" class="dialog">
169        <span id="cms-close" class="close">&#x2612;</span>  <!-- close button symbol -->
170        <br>
171        <div id="cms-info-label" style="font-family:'Courier New'">CMS ID: xxx LOCATION: </div>
172        <br>
173        <input id='cmsID' value="" type='hidden'/>
174        <div id="message-input">Phase 1:
175        <input id="msgcontent1" class="cms-input"  maxlength="16" type="text"/><br><br>
176        <input id="msgcontent2" class="cms-input"  maxlength="16" type="text"/><br><br>
177        <input id="msgcontent3" class="cms-input"  maxlength="16" type="text"/><br><br>
178        Phase 2:
179        <input id="msgcontent4" class="cms-input"  maxlength="16" type="text"/><br><br>
180        <input id="msgcontent5" class="cms-input"  maxlength="16" type="text"/><br><br>
181        <input id="msgcontent6" class="cms-input"  maxlength="16" type="text"/><br><br>
182        </div>       
183        <div id="buttonPanel"    style="display: block;"><br><br>
184        <button onclick="handleCMSsubmit();">Send >></button><br><br>
185        <button onclick="handleCMSclear();">Clear >></button><br><br>
186        <button onclick="handleDialogClose('cms-dialog');">Close </button>
187        </div>
188        <div id="message-display"  style="display: block;">Current:
189         <textarea class="cms_sign" readonly id="msgdisplay1" maxlength="16" rows="1" cols="16"></textarea>
190         <textarea class="cms_sign" readonly id="msgdisplay2" maxlength="16" rows="1" cols="16"></textarea>
191         <textarea class="cms_sign" readonly id="msgdisplay3" maxlength="16" rows="1" cols="16"></textarea>
192         <br><br><br>
193         <textarea class="cms_sign" readonly id="msgdisplay4" maxlength="16" rows="1" cols="16"></textarea>
194         <textarea class="cms_sign" readonly id="msgdisplay5" maxlength="16" rows="1" cols="16"></textarea>
195         <textarea class="cms_sign" readonly id="msgdisplay6" maxlength="16" rows="1" cols="16"></textarea>
196        </div>
197    </div>
198    <div id="har-dialog" class="dialog">
199        <span id="har-close" class="close">&#x2612;</span>  <!-- close button symbol -->
200        <div id="har-info-label" style="font-family:'Courier New'">HAR ID: xxx LOCATION: </div>
201        <br>
202        <input id='harID' value="" type='hidden'/>
203        <!--div id="har-message-input"-->Proposed:<br>
204        <input id="har-msgcontent1" class="har-input" type="text" size="50"><br>
205        <!--textarea id="har-msgcontent1" maxlength="150" rows="2" cols="50"/><br><br-->
206
207        <div id="har-buttonPanel" style="display: block;"><br>
208        <button onclick="handleHARsubmit();">Send >></button>
209        <button onclick="handleHARclear();">Clear >></button>
210        <button onclick="handleDialogClose('har-dialog');">Close </button><br><br>
211        </div>
212        <div id="har-message-display"  style="display: block;">Current:<br>
213         <textarea readonly id="har-msgdisplay1" maxlength="150" rows="3" cols="50"></textarea>
214        </div>
215    </div>
216    <!--The div elements where the buttons appear  -->
217    <div id="ctrButton"><img width="30" src="images/btn_mapcenter.png"</div>
218    <button id="harButton" class="unstyled-button"><img id="harBtnImg" src="images/btnReady_HAR.png"></button>
219    <button id="cctvButton" class="unstyled-button"><img id="cctvBtnImg" src="images/btnReady_CCTV.png"></button>
220    <button id="cmsButton" class="unstyled-button"><img id="cmsBtnImg" src="images/btnReady_CMS.png"></button>
221    <button id="vdsButton" class="unstyled-button"><img id="vdsBtnImg" src="images/btnDepressed_VDS.png"></button>
222    <script>
223
224    // a global variable for the google map
225    var map;
226    // a global dictionary to lookup a station's original coordinates
227    var vds_coords = {};
228    // a global variable to hold locations of marked search places
229    var placePins = [];
230    // the cms message local dictionary
231    var messageDict = {}; 
232    // the har message local dictionary
233    var HARmessageDict = {}; 
234    // Constant for map center location: The John Wayne Airport
235    //var centerPoint = {lat: 33.687228, lng: -117.872148};
236    // Constant for map center location in District 12
237    var centerPoint = {
238        lat: 33.693385,
239        lng: -117.798937
240    };
241    // Initial map zoom
242    var initZoom = 11;
243    // Dot colors used in traffic model to indicate free-flowing, slowed, and stopped traffic
244    // and their associated zvalues so slower traffic dots are more visible.
245    // white means a disabled spot
246    var colorZvalues = {
247        "white": 5,
248        "lime": 10,
249        "yellow": 20,
250        "red": 30
251    };
252
253    var kMapPointsFile = "highway_status.json"; // dynamic json data file created by CADserver
254    var kMapStartupFile = "data_layers/highways_startup.json"; // initial (static) highways file used once at startup
255    var kCMSfile = "data_layers/cms_locations_D12.gjson"; // CMS locations
256    var kCCTVfile = "data_layers/cctv_locations_D12.gjson"; // CCTV locations
257    var kHARfile = "data_layers/har_locations_D12.gjson"; // CMS locations
258    var blueFlag = "images/icon_cmsBlue.png";
259    var yellowFlag = "images/icon_cmsYellow.png";
260    var cctvIcon = "images/icon_cctvCyan.png";
261    var cctvIconWhite = "images/icon_cctvWhite.png";
262    var vdsIconGreen = "images/circle-green.png"
263    var vdsIconYellow = "images/circle-yellow.png"
264    var vdsIconRed = "images/circle-red.png"
265    var harActive = "images/icon_harActive.png";
266    var cms_showing = false;
267    var vds_showing = true;
268    var cctv_showing = false;
269    var har_showing = false;
270    var cctv_infowindow; // We create just a single instance of info window.
271
272
273    // Initialize the view/hide buttons
274    function initLayerButtons()
275    {
276        initHARbutton();
277        initCCTVbutton();
278        initCMSbutton();
279        initVDSbutton();
280    }
281
282    // Initialize the map and load the points
283    function initMap()
284    {
285        // Declare the map and where it belongs on the page
286        map = new google.maps.Map(document.getElementById('mapdiv'),
287        {
288            zoom: initZoom,
289            center: centerPoint,
290            styles: night_mode,
291            mapTypeControl: false,
292            streetViewControl: false,
293                        fullscreenControl: false
294        });
295
296        // setup the search box and center button
297        initSearch();
298        initCenter();
299
300        loadVDSlayer(); // go load the map data
301        loadCMSlayer();
302        loadCCTVlayer();
303        loadHARlayer();
304
305        initLayerButtons(); // setup the show/hide layer buttons
306
307        // Start a timer to refresh the vds dots every 10 seconds
308        var myTimer = setInterval(updateVDSlayer, 10000);
309        // start an interval timer to refresh the cms icons every 10 seconds
310        var cmsTimer = setInterval(loadAllcmsMessages, 10000);
311
312        // start an interval timer to refresh the har icons every 10 seconds
313        var harTimer = setInterval(loadAllharMessages, 10000);
314
315        // Listen for zoom changes and move the vds dots so as to keep a nice
316        // visual distance between them appropriate to the zoom factor
317        map.addListener('zoom_changed', function()
318        {
319            // fetch how much the map is currently zoomed
320            currentZoom = map.getZoom();
321            // only bother adjusting within this range
322            if ((currentZoom < 16) && (currentZoom > 10))
323            {
324                // magic formula controls distance between dots
325                adjustCoords(calcDistanceFactor());
326            }
327        });
328
329    }
330
331    </script>
332    <script  src="js/common.js"></script>
333    <script  src="js/vdsLayer.js"></script>
334    <script  src="js/cmsLayer.js"></script>
335    <script  src="js/cctvLayer.js"></script>
336    <script  src="js/harLayer.js"></script>
337    <script  src="js/controls.js"></script>
338    <script  src="js/night_mode.js"></script>
339    <!-- Using John's API Key -->
340    <script async defer
341    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD6iTyN0DjP-9OVkAgicyp4tkC10naE_B8&libraries=places&callback=initMap">
342    </script>
343  </body>
344</html>
Note: See TracBrowser for help on using the repository browser.