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

Revision 336, 10.1 KB checked in by jdalbey, 7 years ago (diff)

added favicon and moved css to external style sheet
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<link rel="icon" 
9      type="image/png" 
10      href="images/favicon.png">
11  <!--  Styles  -->
12  <link rel="stylesheet" href="css/styles.css">
13  </head>
14  <body>
15    <!--
16         Version 6.5 Adjust cms dialog dimensions for Chrome.
17             Version 6.4 Remove fullscreen control. (Use Browser F11 instead).
18         Version 6.3 decomposed into modules for each layer
19         Version 6.2 puts cctv and cms and vds in separate data layers.   
20         Version 6.1 Puts cms messages in json formatted file.  Polls for updates.
21         Version 6.0 Adds speed-dependent images to infowindow for cctv icons
22         Version 5.8 Adds an infowindow with a static image for all cctv icons
23         Version 5.7 integrates CCTV icons and button (but empty click handler)
24         Version 5.6 integrates CMS features
25         Version 5.5 renames title to CPTMS, loads static data on startup and dynamic data
26         every ten seconds. 
27         Version 5.4 adds Search box and Center button
28         Version 5.3 fixed dot color update defect, increased refresh rate to 10 sec.
29         Version 5.2 places red dots overlapping yellow dots.
30         Version 5.1 removes the map and street view buttons and the H3 tag.
31         Version 5 uses precomputed perpendicular vector in dot adjustment function
32         Version 4 Adjust the spacing between dots when the map is zoomed.
33         Version 3 does loadGeoJson only once, and subsequently does an ajax load
34         of the highways file, and selectively updates only those placePins whose
35         color has changed.
36         @author jdalbey  2019.2.17
37    -->
38    <!-- The text area input for the Search Box -->
39    <input id="search-input" class="controls" type="text" placeholder="Search Box">
40    <!--The div element where the map appears. -->
41    <div id="mapdiv"></div>
42    <!-- The div element for the popup dialog. Best results when placed here. -->
43    <div id="cms-dialog" class="dialog">
44        <span id="cms-close" class="close">&#x2612;</span>  <!-- close button symbol -->
45        <br>
46        <div id="cms-info-label" style="font-family:'Courier New'">CMS ID: xxx LOCATION: </div>
47        <br>
48        <input id='cmsID' value="" type='hidden'/>
49        <div id="message-input">Phase 1:
50        <input id="msgcontent1" class="cms-input"  maxlength="16" type="text"/><br><br>
51        <input id="msgcontent2" class="cms-input"  maxlength="16" type="text"/><br><br>
52        <input id="msgcontent3" class="cms-input"  maxlength="16" type="text"/><br><br><br>
53        Phase 2:
54        <input id="msgcontent4" class="cms-input"  maxlength="16" type="text"/><br><br>
55        <input id="msgcontent5" class="cms-input"  maxlength="16" type="text"/><br><br>
56        <input id="msgcontent6" class="cms-input"  maxlength="16" type="text"/><br><br>
57        </div>       
58        <div id="buttonPanel"    style="display: block;"><br><br>
59        <button onclick="handleCMSsubmit();">Send >></button><br><br>
60        <button onclick="handleCMSclear();">Clear >></button><br><br>
61        <button onclick="handleDialogClose('cms-dialog');">Close </button>
62        </div>
63        <div id="cms-message-display"  style="display: block;">Current:
64         <textarea class="cms_sign" readonly id="msgdisplay1" maxlength="16" rows="1" cols="16"></textarea>
65         <textarea class="cms_sign" readonly id="msgdisplay2" maxlength="16" rows="1" cols="16"></textarea>
66         <textarea class="cms_sign" readonly id="msgdisplay3" maxlength="16" rows="1" cols="16"></textarea>
67         <br><br>
68         <textarea class="cms_sign" readonly id="msgdisplay4" maxlength="16" rows="1" cols="16"></textarea>
69         <textarea class="cms_sign" readonly id="msgdisplay5" maxlength="16" rows="1" cols="16"></textarea>
70         <textarea class="cms_sign" readonly id="msgdisplay6" maxlength="16" rows="1" cols="16"></textarea>
71        </div>
72    </div>
73    <div id="har-dialog" class="dialog">
74        <span id="har-close" class="close">&#x2612;</span>  <!-- close button symbol -->
75        <div id="har-info-label" style="font-family:'Courier New'">HAR ID: xxx LOCATION: </div>
76        <br>
77        <input id='harID' value="" type='hidden'/>
78        <!--div id="har-message-input"-->Proposed:<br>
79        <input id="har-msgcontent1" class="har-input" type="text" size="50"><br>
80        <!--textarea id="har-msgcontent1" maxlength="150" rows="2" cols="50"/><br><br-->
81
82        <div id="har-buttonPanel" style="display: block;"><br>
83        <button onclick="handleHARsubmit();">Send >></button>
84        <button onclick="handleHARclear();">Clear >></button>
85        <button onclick="handleDialogClose('har-dialog');">Close </button><br><br>
86        </div>
87        <div id="har-message-display"  style="display: block;">Current:<br>
88         <textarea readonly id="har-msgdisplay1" maxlength="150" rows="3" cols="50"></textarea>
89        </div>
90    </div>
91    <!--The div elements where the buttons appear  -->
92    <div id="ctrButton"><img width="30" src="images/btn_mapcenter.png"</div>
93    <button id="harButton" class="unstyled-button"><img id="harBtnImg" src="images/btnReady_HAR.png"></button>
94    <button id="cctvButton" class="unstyled-button"><img id="cctvBtnImg" src="images/btnReady_CCTV.png"></button>
95    <button id="cmsButton" class="unstyled-button"><img id="cmsBtnImg" src="images/btnReady_CMS.png"></button>
96    <button id="vdsButton" class="unstyled-button"><img id="vdsBtnImg" src="images/btnDepressed_VDS.png"></button>
97    <script>
98
99    // a global variable for the google map
100    var map;
101    // a global dictionary to lookup a station's original coordinates
102    var vds_coords = {};
103    // a global variable to hold locations of marked search places
104    var placePins = [];
105    // the cms message local dictionary
106    var messageDict = {}; 
107    // the har message local dictionary
108    var HARmessageDict = {}; 
109    // Constant for map center location: The John Wayne Airport
110    //var centerPoint = {lat: 33.687228, lng: -117.872148};
111    // Constant for map center location in District 12
112    var centerPoint = {
113        lat: 33.693385,
114        lng: -117.798937
115    };
116    // Initial map zoom
117    var initZoom = 11;
118    // Dot colors used in traffic model to indicate free-flowing, slowed, and stopped traffic
119    // and their associated zvalues so slower traffic dots are more visible.
120    // white means a disabled spot
121    var colorZvalues = {
122        "white": 5,
123        "lime": 10,
124        "yellow": 20,
125        "red": 30
126    };
127
128    var kVDSstatusFile = "highway_status.json"; // dynamic json data file created by CADserver
129    var kMapStartupFile = "data_layers/highways_startup.json"; // initial (static) highways file used once at startup
130    var kCMSfile = "data_layers/cms_locations_D12.gjson"; // CMS locations
131    var kCCTVfile = "data_layers/cctv_locations_D12.gjson"; // CCTV locations
132    var kHARfile = "data_layers/har_locations_D12.gjson"; // CMS locations
133    var iconCMSactive = "images/icon_cms_active.png";
134    var iconCMSidle = "images/icon_cms_idle.png";
135    var cctvIcon = "images/icon_cctvCyan.png";
136    var cctvIconWhite = "images/icon_cctvWhite.png";
137    var iconVDSgreen = "images/circle_green.png"
138    var iconVDSyellow = "images/circle_yellow.png"
139    var iconVDSred = "images/circle_red.png"
140    var iconHARactive = "images/icon_har_active.png";
141    var cms_showing = false;
142    var vds_showing = true;
143    var cctv_showing = false;
144    var har_showing = false;
145    var cctv_infowindow; // We create just a single instance of info window.
146
147
148    // Initialize the view/hide buttons
149    function initLayerButtons()
150    {
151        initHARbutton();
152        initCCTVbutton();
153        initCMSbutton();
154        initVDSbutton();
155    }
156
157    // Initialize the map and load the points
158    function initMap()
159    {
160        // Declare the map and where it belongs on the page
161        map = new google.maps.Map(document.getElementById('mapdiv'),
162        {
163            zoom: initZoom,
164            center: centerPoint,
165            styles: night_mode,
166            mapTypeControl: false,
167            streetViewControl: false,
168                        fullscreenControl: false
169        });
170
171        // setup the search box and center button
172        initSearch();
173        initCenter();
174
175        loadVDSlayer(); // go load the map data
176        loadCMSlayer();
177        loadCCTVlayer();
178        loadHARlayer();
179
180        initLayerButtons(); // setup the show/hide layer buttons
181
182        // Start a timer to refresh the vds dots every 10 seconds
183        var myTimer = setInterval(updateVDSlayer, 10000);
184        // start an interval timer to refresh the cms icons every 10 seconds
185        var cmsTimer = setInterval(loadAllcmsMessages, 10000);
186
187        // start an interval timer to refresh the har icons every 10 seconds
188        var harTimer = setInterval(loadAllharMessages, 10000);
189
190        // Listen for zoom changes and move the vds dots so as to keep a nice
191        // visual distance between them appropriate to the zoom factor
192        map.addListener('zoom_changed', function()
193        {
194            // fetch how much the map is currently zoomed
195            currentZoom = map.getZoom();
196            // only bother adjusting within this range
197            if ((currentZoom < 16) && (currentZoom > 10))
198            {
199                // magic formula controls distance between dots
200                adjustCoords(calcDistanceFactor());
201            }
202        });
203
204    }
205
206    </script>
207    <script  src="js/common.js"></script>
208    <script  src="js/vdsLayer.js"></script>
209    <script  src="js/cmsLayer.js"></script>
210    <script  src="js/cctvLayer.js"></script>
211    <script  src="js/harLayer.js"></script>
212    <script  src="js/controls.js"></script>
213    <script  src="js/night_mode.js"></script>
214    <!-- Using John's API Key -->
215    <script async defer
216    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD6iTyN0DjP-9OVkAgicyp4tkC10naE_B8&libraries=places&callback=initMap">
217    </script>
218<!--
219export GOOGLE_APPLICATION_CREDENTIALS="/home/jdalbey/Dropbox/TMCdocuments/TMC Simulator-c3ae15ddb96b.json"
220-->
221  </body>
222</html>
Note: See TracBrowser for help on using the repository browser.