source: tmcsimulator/trunk/webapps/cptms/index.html @ 534

Revision 534, 12.1 KB checked in by jdalbey, 6 years ago (diff)

cptms/index.html add callout btn and stub for callout map 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 v</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" oninput="this.value = this.value.toUpperCase()"/><br><br>
51        <input id="msgcontent2" class="cms-input"  maxlength="16" type="text" oninput="this.value = this.value.toUpperCase()"/><br><br>
52        <input id="msgcontent3" class="cms-input"  maxlength="16" type="text" oninput="this.value = this.value.toUpperCase()"/><br><br><br>
53        Phase 2:
54        <input id="msgcontent4" class="cms-input"  maxlength="16" type="text" oninput="this.value = this.value.toUpperCase()"/><br><br>
55        <input id="msgcontent5" class="cms-input"  maxlength="16" type="text" oninput="this.value = this.value.toUpperCase()"/><br><br>
56        <input id="msgcontent6" class="cms-input"  maxlength="16" type="text" oninput="this.value = this.value.toUpperCase()"/><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="hideElementById('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-msg-display">
79
80        <!--div id="har-message-input"-->Proposed:<br>
81        <!-- <input id="har-msgcontent1" class="har-input" type="text" size="50" oninput="this.value = this.value.toUpperCase()"><br> -->
82        <div class="har-msg">
83            <textarea id="har-msgcontent1" maxlength="150" rows="5" cols="50" style="resize:none"   oninput="this.value = this.value.toUpperCase()"></textarea>
84        </div>
85
86        <div id="har-buttonPanel" style="display: block; width: 375px;">
87        <button onclick="handleHARsubmit();">Send >></button>
88        <button onclick="handleHARclear();">Clear >></button>
89        <button onclick="hideElementById('har-dialog');">Close </button>
90        </div>
91        <div id="har-message-display"  style="display: block;">Current:<br>
92         <textarea readonly id="har-msgdisplay1" maxlength="150" rows="5" cols="50" style="resize:none"></textarea>
93        </div>
94
95        </div>
96
97    </div>
98    <!--The div elements where the buttons appear  -->
99    <div id="ctrButton"><img width="30" src="images/btn_mapcenter.png"</div>
100    <button id="calloutButton" class="unstyled-button"><img id="calloutBtnImg" src="images/btnReady_Callout.png"></button>
101    <button id="harButton" class="unstyled-button"><img id="harBtnImg" src="images/btnReady_HAR.png"></button>
102    <button id="cctvButton" class="unstyled-button"><img id="cctvBtnImg" src="images/btnReady_CCTV.png"></button>
103    <button id="cmsButton" class="unstyled-button"><img id="cmsBtnImg" src="images/btnReady_CMS.png"></button>
104    <button id="vdsButton" class="unstyled-button"><img id="vdsBtnImg" src="images/btnDepressed_VDS.png"></button>
105    <script  src="../common/js/fileutils.js"></script>
106    <script  src="../common/js/revision_number.dat"></script>
107    <script  src="../common/js/displayutils.js"></script> 
108    <script  src="js/vdsLayer.js"></script>
109    <script  src="js/cmsLayer.js"></script>
110    <script  src="js/cctvLayer.js"></script>
111    <script  src="js/harLayer.js"></script>
112    <script  src="js/calloutLayer.js"></script>
113    <script  src="js/controls.js"></script>
114    <script  src="js/night_mode.js"></script>
115    <script>
116    showRevision();
117    // a global variable for the google map
118    var map;
119    // a global dictionary to lookup a station's original coordinates
120    var vds_coords = {};
121    // a global variable to hold locations of marked search places
122    var placePins = [];
123    // the cms message local dictionary
124    var CMSmessageDict = {}; 
125    // the har message local dictionary
126    var HARmessageDict = {}; 
127    // Constant for map center location: The John Wayne Airport
128    //var centerPoint = {lat: 33.687228, lng: -117.872148};
129    // Constant for map center location in District 12
130    var centerPoint = {
131        lat: 33.693385,
132        lng: -117.798937
133    };
134    // Initial map zoom
135    var initZoom = 11;
136    // Dot colors used in traffic model to indicate free-flowing, slowed, and stopped traffic
137    // and their associated zvalues so slower traffic dots are more visible.
138    // white means a disabled spot
139    var colorZvalues = {
140        "white": 5,
141        "lime": 10,
142        "yellow": 20,
143        "red": 30
144    };
145
146    var kVDSstatusFile = "../dynamicdata/highway_status.json"; // dynamic json data file created by CADserver
147    var kMapStartupFile = "data_layers/highways_startup.json"; // initial (static) highways file used once at startup
148    var kCMSfile = "data_layers/cms_locations_D12.gjson"; // CMS locations
149    var kCCTVfile = "data_layers/cctv_locations_D12.gjson"; // CCTV locations
150    var kHARfile = "data_layers/har_locations_D12.gjson"; // CMS locations
151    var iconCMSactive = "images/icon_cms_active.png";
152    var iconCMSidle = "images/icon_cms_idle.png";
153    var cctvIcon = "images/icon_cctvCyan.png";
154    var cctvIconWhite = "images/icon_cctvWhite.png";
155    var iconVDSgreen = "images/circle_green.png"
156    var iconVDSyellow = "images/circle_yellow.png"
157    var iconVDSred = "images/circle_red.png"
158    var iconVDSwhite = "images/circle_white.png"
159    var iconHARactive = "images/icon_har_active.png";
160    var iconHARidle = "images/icon_har_idle.png";
161    var cms_showing = false;
162    var vds_showing = true;
163    var cctv_showing = false;
164    var har_showing = false;
165    var callout_showing = false;
166    var cctv_infowindow; // We create just a single instance of info window.
167
168    // Use larger VDS icons if we're being displayed on the video wall
169    // at the front of the classroom.  Launch page with any non-blank request parameter
170    // to trigger larger icons.
171    function initVDSicons()
172    {
173        var param_string = '';
174
175        // get url parameters from the window
176        url = window.location.search; // e.g. ?num1=43&num2=23
177        // split into separate parameters
178        var parts = url.substring(1).split('&');
179        // Extract the first parameter
180        param_string = parts[0];
181        // If we have a non-blank parameter
182        if(param_string != undefined && param_string.trim() != "")
183        {
184            // Use large size circle icons
185            iconVDSgreen = "images/circle_green_lg.png";
186            iconVDSyellow = "images/circle_yellow.png"
187            iconVDSred = "images/circle_red.png"
188            iconVDSwhite = "images/circle_white.png"
189            //var parts = param_string.split('&');
190        } 
191    }
192
193    // Initialize the view/hide buttons
194    function initLayerButtons()
195    {
196        initCalloutbutton();
197        initHARbutton();
198        initCCTVbutton();
199        initCMSbutton();
200        initVDSbutton();
201        initVDSicons();
202    }
203
204    // Initialize the map and load the points
205    function initMap()
206    {
207        // Declare the map and where it belongs on the page
208        map = new google.maps.Map(document.getElementById('mapdiv'),
209        {
210            zoom: initZoom,
211            center: centerPoint,
212            styles: night_mode,
213            mapTypeControl: false,
214            streetViewControl: false,
215                        fullscreenControl: false
216        });
217
218        // setup the search box and center button
219        initSearch();
220        initCenter();
221
222        loadVDSlayer(); // go load the map data
223        loadCMSlayer();
224        loadCCTVlayer();
225        loadHARlayer();
226
227        initLayerButtons(); // setup the show/hide layer buttons
228
229        // Start a timer to refresh the vds dots every 10 seconds
230        var myTimer = setInterval(updateVDSlayer, 10000);
231        // start an interval timer to refresh the cms icons every 10 seconds
232        var cmsTimer = setInterval(loadAllcmsMessages, 10000);
233
234        // start an interval timer to refresh the har icons every 10 seconds
235        var harTimer = setInterval(loadAllharMessages, 10000);
236
237        // Listen for zoom changes and move the vds dots so as to keep a nice
238        // visual distance between them appropriate to the zoom factor
239        map.addListener('zoom_changed', function()
240        {
241            // fetch how much the map is currently zoomed
242            currentZoom = map.getZoom();
243            // only bother adjusting within this range
244            if ((currentZoom < 16) && (currentZoom > 10))
245            {
246                // clever formula controls distance between dots
247                adjustCoords(calcDistanceFactor());
248            }
249        });
250
251    }
252
253    </script>
254
255    <!-- Project API Key -->
256    <script async defer
257    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCJuoPR3s6_qekC-GA1v5rvTcVocL3AXHE&libraries=places&callback=initMap"></script>
258
259<!--
260export GOOGLE_APPLICATION_CREDENTIALS="/home/<path to file>/TMC Simulator-c3ae15ddb96b.json"
261-->
262  </body>
263</html>
Note: See TracBrowser for help on using the repository browser.