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

Revision 404, 10.9 KB checked in by jdalbey, 7 years ago (diff)

Fine tune HAR dialog: move buttons closer to upper message area.
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="harButton" class="unstyled-button"><img id="harBtnImg" src="images/btnReady_HAR.png"></button>
101    <button id="cctvButton" class="unstyled-button"><img id="cctvBtnImg" src="images/btnReady_CCTV.png"></button>
102    <button id="cmsButton" class="unstyled-button"><img id="cmsBtnImg" src="images/btnReady_CMS.png"></button>
103    <button id="vdsButton" class="unstyled-button"><img id="vdsBtnImg" src="images/btnDepressed_VDS.png"></button>
104    <script  src="../common/js/fileutils.js"></script>
105    <script  src="../common/js/revision_number.dat"></script>
106    <script  src="../common/js/displayutils.js"></script> 
107    <script  src="js/vdsLayer.js"></script>
108    <script  src="js/cmsLayer.js"></script>
109    <script  src="js/cctvLayer.js"></script>
110    <script  src="js/harLayer.js"></script>
111    <script  src="js/controls.js"></script>
112    <script  src="js/night_mode.js"></script>
113    <script>
114    showRevision();
115    // a global variable for the google map
116    var map;
117    // a global dictionary to lookup a station's original coordinates
118    var vds_coords = {};
119    // a global variable to hold locations of marked search places
120    var placePins = [];
121    // the cms message local dictionary
122    var messageDict = {}; 
123    // the har message local dictionary
124    var HARmessageDict = {}; 
125    // Constant for map center location: The John Wayne Airport
126    //var centerPoint = {lat: 33.687228, lng: -117.872148};
127    // Constant for map center location in District 12
128    var centerPoint = {
129        lat: 33.693385,
130        lng: -117.798937
131    };
132    // Initial map zoom
133    var initZoom = 11;
134    // Dot colors used in traffic model to indicate free-flowing, slowed, and stopped traffic
135    // and their associated zvalues so slower traffic dots are more visible.
136    // white means a disabled spot
137    var colorZvalues = {
138        "white": 5,
139        "lime": 10,
140        "yellow": 20,
141        "red": 30
142    };
143
144    var kVDSstatusFile = "../dynamicdata/highway_status.json"; // dynamic json data file created by CADserver
145    var kMapStartupFile = "data_layers/highways_startup.json"; // initial (static) highways file used once at startup
146    var kCMSfile = "data_layers/cms_locations_D12.gjson"; // CMS locations
147    var kCCTVfile = "data_layers/cctv_locations_D12.gjson"; // CCTV locations
148    var kHARfile = "data_layers/har_locations_D12.gjson"; // CMS locations
149    var iconCMSactive = "images/icon_cms_active.png";
150    var iconCMSidle = "images/icon_cms_idle.png";
151    var cctvIcon = "images/icon_cctvCyan.png";
152    var cctvIconWhite = "images/icon_cctvWhite.png";
153    var iconVDSgreen = "images/circle_green.png"
154    var iconVDSyellow = "images/circle_yellow.png"
155    var iconVDSred = "images/circle_red.png"
156    var iconVDSwhite = "images/circle_white.png"
157    var iconHARactive = "images/icon_har_active.png";
158    var iconHARidle = "images/icon_har_idle.png";
159    var cms_showing = false;
160    var vds_showing = true;
161    var cctv_showing = false;
162    var har_showing = false;
163    var cctv_infowindow; // We create just a single instance of info window.
164
165
166    // Initialize the view/hide buttons
167    function initLayerButtons()
168    {
169        initHARbutton();
170        initCCTVbutton();
171        initCMSbutton();
172        initVDSbutton();
173    }
174
175    // Initialize the map and load the points
176    function initMap()
177    {
178        // Declare the map and where it belongs on the page
179        map = new google.maps.Map(document.getElementById('mapdiv'),
180        {
181            zoom: initZoom,
182            center: centerPoint,
183            styles: night_mode,
184            mapTypeControl: false,
185            streetViewControl: false,
186                        fullscreenControl: false
187        });
188
189        // setup the search box and center button
190        initSearch();
191        initCenter();
192
193        loadVDSlayer(); // go load the map data
194        loadCMSlayer();
195        loadCCTVlayer();
196        loadHARlayer();
197
198        initLayerButtons(); // setup the show/hide layer buttons
199
200        // Start a timer to refresh the vds dots every 10 seconds
201        var myTimer = setInterval(updateVDSlayer, 10000);
202        // start an interval timer to refresh the cms icons every 10 seconds
203        var cmsTimer = setInterval(loadAllcmsMessages, 10000);
204
205        // start an interval timer to refresh the har icons every 10 seconds
206        var harTimer = setInterval(loadAllharMessages, 10000);
207
208        // Listen for zoom changes and move the vds dots so as to keep a nice
209        // visual distance between them appropriate to the zoom factor
210        map.addListener('zoom_changed', function()
211        {
212            // fetch how much the map is currently zoomed
213            currentZoom = map.getZoom();
214            // only bother adjusting within this range
215            if ((currentZoom < 16) && (currentZoom > 10))
216            {
217                // clever formula controls distance between dots
218                adjustCoords(calcDistanceFactor());
219            }
220        });
221
222    }
223
224    </script>
225
226    <!-- Project API Key -->
227    <script async defer
228    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCJuoPR3s6_qekC-GA1v5rvTcVocL3AXHE&libraries=places&callback=initMap"></script>
229
230<!--
231export GOOGLE_APPLICATION_CREDENTIALS="/home/<path to file>/TMC Simulator-c3ae15ddb96b.json"
232-->
233  </body>
234</html>
Note: See TracBrowser for help on using the repository browser.