source: tmcsimulator/trunk/webapps/visualizer/index.html @ 530

Revision 530, 5.6 KB checked in by jdalbey, 6 years ago (diff)

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