source: tmcsimulator/trunk/webapps/GTEC/index.html @ 569

Revision 569, 7.8 KB checked in by jdalbey, 6 years ago (diff)

GTEC remove search box.
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>Graphic Traffic Events Creator</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
39    <!--The div element where the map appears. -->
40    <div id="mapdiv"></div>
41    <!-- The div element for the popup dialog. Best results when placed here. -->
42   <!--The div elements where the buttons appear-->
43    <div id="ctrButton"><img width="30" src="images/btn_mapcenter.png"></div>
44    <button id="redButton">Red</button>
45    <button id="greenButton">Green</button>
46    <button id="yellowButton">Yellow</button>
47    <!-- <button id="harButton" class="unstyled-button"><img id="harBtnImg" src="images/btnReady_HAR.png"></button>
48    <button id="cctvButton" class="unstyled-button"><img id="cctvBtnImg" src="images/btnReady_CCTV.png"></button>
49    <button id="cmsButton" class="unstyled-button"><img id="cmsBtnImg" src="images/btnReady_CMS.png"></button>-->
50    <!--<button id="vdsButton" class="unstyled-button"><img id="vdsBtnImg" src="images/btnDepressed_VDS.png"></button>
51    <p id="time">00:00:00</p>
52    <button id="start" >Beginning</button>
53    <button id="forward" >Next</button>
54        <button id="backward" >Back</button> -->
55    <script  src="../common/js/fileutils.js"></script>
56    <script  src="../common/js/revision_number.dat"></script>
57    <script  src="../common/js/displayutils.js"></script> 
58    <script  src="js/vdsLayer.js"></script>
59    <script  src="js/controls.js"></script>
60    <script  src="js/night_mode.js"></script>
61    <script>
62    showRevision();
63    // a global variable for the google map
64    var map;
65    // a global dictionary to lookup a station's original coordinates
66    var vds_coords = {};
67    // a global variable to hold locations of marked search places
68    var placePins = [];
69    // Constant for map center location: The John Wayne Airport
70    //var centerPoint = {lat: 33.687228, lng: -117.872148};
71    // Constant for map center location in District 12
72    var centerPoint = {
73        lat: 33.693385,
74        lng: -117.798937
75    };
76    // Initial map zoom
77    var initZoom = 11;
78    // Dot colors used in traffic model to indicate free-flowing, slowed, and stopped traffic
79    // and their associated zvalues so slower traffic dots are more visible.
80    // white means a disabled spot
81    var colorZvalues = {
82        "white": 5,
83        "lime": 10,
84        "yellow": 20,
85        "red": 30
86    };
87
88    var kVDSstatusFile = "../dynamicdata/highway_status.json"; // dynamic json data file created by CADserver
89    //var kMapStartupFile = "../dynamicdata/highway_status(1).json"; // initial (static) highways file used once at startup
90    var kMapStartupFile = "data_layers/highways_startup.json"; // initial (static) highways file used once at startup
91    var trafficEventsFile = "traffic_events.txt"; // traffic events file
92    var iconVDSgreen = "images/circle_green.png"
93    var iconVDSyellow = "images/circle_yellow.png"
94    var iconVDSred = "images/circle_red.png"
95    var iconVDSwhite = "images/circle_white.png"
96    var vds_showing = true;
97    var targetDots = []; // 2d array containing targetDots parsed from each line in traffic events file
98    var eventTimes = []; //array to hold times of each traffic event
99    eventTimes[0] = "00:00:00";
100    var diff_arr = []; // 2d array containing
101    var eventIndex = -1; //to index into above array
102
103    // Use larger VDS icons if we're being displayed on the video wall
104    // at the front of the classroom.  Launch page with any non-blank request parameter
105    // to trigger larger icons.
106    function initVDSicons()
107    {
108        var param_string = '';
109
110        // get url parameters from the window
111        url = window.location.search; // e.g. ?num1=43&num2=23
112        // split into separate parameters
113        var parts = url.substring(1).split('&');
114        // Extract the first parameter
115        param_string = parts[0];
116        // If we have a non-blank parameter
117        if(param_string != undefined && param_string.trim() != "")
118        {
119            // Use large size circle icons
120            iconVDSgreen = "images/circle_green_lg.png";
121            iconVDSyellow = "images/circle_yellow.png"
122            iconVDSred = "images/circle_red.png"
123            iconVDSwhite = "images/circle_white.png"
124            //var parts = param_string.split('&');
125        } 
126    }
127
128    // Initialize the view/hide buttons
129    function initLayerButtons()
130    {
131       // initVDSbutton();
132        //initControlButtons();
133        initColorButtons();
134        initVDSicons();
135    }
136
137    // Initialize the map and load the points
138    function initMap()
139    {
140        // Declare the map and where it belongs on the page
141        map = new google.maps.Map(document.getElementById('mapdiv'),
142        {
143            zoom: initZoom,
144            center: centerPoint,
145            styles: night_mode,
146            mapTypeControl: false,
147            streetViewControl: false,
148                        fullscreenControl: false
149        });
150
151        // setup the center button
152        initCenter();
153       
154        loadVDSlayer(); // go load the map data
155       // processVDS();
156
157        initLayerButtons(); // setup the show/hide layer buttons
158
159        updateVDSlayer();
160        setTimeout(function() {
161         //   buildDiff();
162            updateVDSlayer();
163        }, 3000);
164
165        // Listen for zoom changes and move the vds dots so as to keep a nice
166        // visual distance between them appropriate to the zoom factor
167        map.addListener('zoom_changed', function()
168        {
169            // fetch how much the map is currently zoomed
170            currentZoom = map.getZoom();
171            // only bother adjusting within this range
172            if ((currentZoom < 16) && (currentZoom > 10))
173            {
174                // clever formula controls distance between dots
175                adjustCoords(calcDistanceFactor());
176            }
177        });
178
179    }
180
181    </script>
182
183    <!-- Project API Key -->
184    <script async defer
185    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCJuoPR3s6_qekC-GA1v5rvTcVocL3AXHE&libraries=places&callback=initMap"></script>
186
187<!--
188export GOOGLE_APPLICATION_CREDENTIALS="/home/<path to file>/TMC Simulator-c3ae15ddb96b.json"
189-->
190  </body>
191</html>
Note: See TracBrowser for help on using the repository browser.