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

Revision 334, 13.2 KB checked in by jdalbey, 7 years ago (diff)

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