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

Revision 579, 6.5 KB checked in by jdalbey, 6 years ago (diff)

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