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

Revision 326, 10.4 KB checked in by jdalbey, 7 years ago (diff)

cptms v0.6.3 decomposed into modules
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.2</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        textarea {
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       input {
38           border: thin solid #333;
39           padding: 2px;
40           font-family: "Lucida Console", Monaco, monospace;
41           font-size: medium;
42        }
43      #search-input {
44        background-color: #17263c;  /* #CD853F;  /*#E6E6FA; /* lavender */
45        color: #E6E6FA;  /* #FFEFD5; */
46        font-family: Roboto;
47        font-size: 18px;
48        font-weight: 400;
49        margin-left: 12px;
50        padding: 0 11px 0 13px;
51        text-overflow: ellipsis;
52        border-color: #746855;   /* #4d90fe; */
53        width: 400px;
54      }
55      #search-input:focus {
56        border-color: #E6E6FA; 
57      }
58      #ctrButton {
59        cursor: pointer;
60        background-color: #fff;
61        margin-right: 7px;
62        border: thick solid white;
63      }
64      #cms-info-label {
65           height: 20px;
66           width: 590px;
67           overflow: hidden;
68           background-color: #A8C5FF;  /*#ECECFB; */
69           border: thin solid #BDBDBD;
70           padding: 5px;
71       }
72      #message-display {
73           height: 172px;
74           width: 300px;
75           overflow: hidden;
76           float: left;
77       }
78      #message-input {
79           height: 122px;
80           width: 165px;
81           background-color: #729FFF;
82           float: left;
83       }
84        /* CMS Dialog button panel */
85       #buttonPanel {
86           height: 122px;
87           width: 130px;
88           background-color: #729FFF;
89           border-left: none;
90           float: left;
91           padding: 20px;
92        }
93       .wrapper {
94           position: relative;\
95        }
96        /* CMS Edit Message Dialog */
97       #dialog {
98          position: absolute;
99          top: 10%;
100          right: 20%;
101          background-color: #729FFF; /* #ECECFB; */
102          margin: auto;
103          padding: 20px;
104          border: 1px solid #888;
105          width: 680px;
106          display: none;           
107        }
108      .unstyled-button {
109        border: 0 none;
110        padding: 0;
111        background: none;
112        cursor: pointer;
113      }   
114    /* The Close Button in the CMS Dialog */
115    .close {
116      color: #2E2E2E;
117      float: right;
118      font-size: 30px;
119      font-weight: bold;
120    }
121    .close:hover,
122    .close:focus {
123      color: black;
124      text-decoration: none;
125      cursor: pointer;
126    }
127
128    </style>
129  </head>
130  <body>
131    <!--
132         Version 6.3 decomposed into modules for each layer
133         Version 6.2 puts cctv and cms and vds in separate data layers.   
134         Version 6.1 Puts cms messages in json formatted file.  Polls for updates.
135         Version 6.0 Adds speed-dependent images to infowindow for cctv icons
136         Version 5.8 Adds an infowindow with a static image for all cctv icons
137         Version 5.7 integrates CCTV icons and button (but empty click handler)
138         Version 5.6 integrates CMS features
139         Version 5.5 renames title to CPTMS, loads static data on startup and dynamic data
140         every ten seconds. 
141         Version 5.4 adds Search box and Center button
142         Version 5.3 fixed dot color update defect, increased refresh rate to 10 sec.
143         Version 5.2 places red dots overlapping yellow dots.
144         Version 5.1 removes the map and street view buttons and the H3 tag.
145         Version 5 uses precomputed perpendicular vector in dot adjustment function
146         Version 4 Adjust the spacing between dots when the map is zoomed.
147         Version 3 does loadGeoJson only once, and subsequently does an ajax load
148         of the highways file, and selectively updates only those placePins whose
149         color has changed.
150         @author jdalbey  2019.2.17
151    -->
152    <!-- The text area input for the Search Box -->
153    <input id="search-input" class="controls" type="text" placeholder="Search Box">
154    <!--The div element where the map appears. -->
155    <div id="mapdiv"></div>
156    <!-- The div element for the popup dialog. Best results when placed here. -->
157    <div id="dialog" style="display:none;">
158        <span class="close">&#x2612;</span>  <!-- close button symbol -->
159        <br>
160        <div id="cms-info-label" style="font-family:'Courier New'">CMS ID: xxx LOCATION: </div>
161        <br>
162        <input id='cmsID' value="" type='hidden'/>
163        <div id="message-input">Proposed:
164        <input id="msgcontent1"  maxlength="16" type="text"/><br><br>
165        <input id="msgcontent2"  maxlength="16" type="text"/><br><br>
166        <input id="msgcontent3"  maxlength="16" type="text"/>
167        </div>       
168        <div id="buttonPanel"    style="display: block;">
169        <button onclick="handleCMSsubmit();">Send >></button><br>
170        <button onclick="handleCMSclear();">Clear >></button><br>
171        <button onclick="handleDialogClose();">Close </button>
172        </div>
173        <div id="message-display"  style="display: block;">Current:
174         <textarea readonly id="msgdisplay1" maxlength="16" rows="1" cols="16"></textarea>
175         <textarea readonly id="msgdisplay2" maxlength="16" rows="1" cols="16"></textarea>
176         <textarea readonly id="msgdisplay3" maxlength="16" rows="1" cols="16"></textarea>
177        </div>
178    </div>
179    <!--The div elements where the buttons appear  -->
180    <div id="ctrButton"><img width="30" src="images/btn_mapcenter.png"</div>
181    <button id="cctvButton" class="unstyled-button"><img id="cctvBtnImg" src="images/btnReady_CCTV.png"></button>
182    <button id="cmsButton" class="unstyled-button"><img id="cmsBtnImg" src="images/btnReady_CMS.png"></button>
183    <button id="vdsButton" class="unstyled-button"><img id="vdsBtnImg" src="images/btnDepressed_VDS.png"></button>
184    <script>
185
186    // a global variable for the google map
187    var map;
188    // a global dictionary to lookup a station's original coordinates
189    var vds_coords = {};
190    // a global variable to hold locations of marked search places
191    var placePins = [];
192    // the cms message local dictionary
193    var messageDict = {}; 
194    // Constant for map center location: The John Wayne Airport
195    //var centerPoint = {lat: 33.687228, lng: -117.872148};
196    // Constant for map center location in District 12
197    var centerPoint = {
198        lat: 33.693385,
199        lng: -117.798937
200    };
201    // Initial map zoom
202    var initZoom = 11;
203    // Dot colors used in traffic model to indicate free-flowing, slowed, and stopped traffic
204    // and their associated zvalues so slower traffic dots are more visible.
205    // white means a disabled spot
206    var colorZvalues = {
207        "white": 5,
208        "lime": 10,
209        "yellow": 20,
210        "red": 30
211    };
212
213    var kMapPointsFile = "highways.json"; // dynamic json data file created by CADserver
214    var kMapStartupFile = "data_layers/highways_startup.json"; // initial (static) highways file used once at startup
215    var kCMSfile = "data_layers/cms_locations_D12.gjson"; // CMS locations
216    var kCCTVfile = "data_layers/cctv_locations_D12.gjson"; // CCTV locations
217    var blueFlag = "images/icon_cmsBlue.png";
218    var yellowFlag = "images/icon_cmsYellow.png";
219    var cctvIcon = "images/icon_cctvCyan.png";
220    var cctvIconWhite = "images/icon_cctvWhite.png";
221    var vdsIconGreen = "images/circle-green.png"
222    var vdsIconYellow = "images/circle-yellow.png"
223    var vdsIconRed = "images/circle-red.png"
224    var cms_showing = false;
225    var vds_showing = true;
226    var cctv_showing = false;
227    var cctv_infowindow; // We create just a single instance of info window.
228
229
230    // Initialize the view/hide buttons
231    function initLayerButtons()
232    {
233        initCCTVbutton();
234        initCMSbutton();
235        initVDSbutton();
236    }
237
238    // Initialize the map and load the points
239    function initMap()
240    {
241        // Declare the map and where it belongs on the page
242        map = new google.maps.Map(document.getElementById('mapdiv'),
243        {
244            zoom: initZoom,
245            center: centerPoint,
246            styles: night_mode,
247            mapTypeControl: false,
248            streetViewControl: false
249        });
250
251        // setup the search box and center button
252        initSearch();
253        initCenter();
254
255        loadVDSlayer(); // go load the map data
256        loadCMSlayer();
257        loadCCTVlayer();
258
259        initLayerButtons(); // setup the show/hide layer buttons
260
261        // Start a timer to refresh the vds dots every 10 seconds
262        var myTimer = setInterval(updateVDSlayer, 10000);
263        // start an interval timer to refresh the cms icons every 10 seconds
264        var cmsTimer = setInterval(loadAllMessages, 10000);
265        // Listen for zoom changes and move the vds dots so as to keep a nice
266        // visual distance between them appropriate to the zoom factor
267        map.addListener('zoom_changed', function()
268        {
269            // fetch how much the map is currently zoomed
270            currentZoom = map.getZoom();
271            // only bother adjusting within this range
272            if ((currentZoom < 16) && (currentZoom > 10))
273            {
274                // magic formula controls distance between dots
275                adjustCoords(calcDistanceFactor());
276            }
277        });
278
279    }
280
281    </script>
282    <script  src="js/common.js"></script>
283    <script  src="js/vdsLayer.js"></script>
284    <script  src="js/cmsLayer.js"></script>
285    <script  src="js/cctvLayer.js"></script>
286    <script  src="js/controls.js"></script>
287    <script  src="js/night_mode.js"></script>
288    <!-- Using John's API Key -->
289    <script async defer
290    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD6iTyN0DjP-9OVkAgicyp4tkC10naE_B8&libraries=places&callback=initMap">
291    </script>
292  </body>
293</html>
Note: See TracBrowser for help on using the repository browser.