source: tmcsimulator/trunk/webapps/cptms/CameraDisplay.html @ 616

Revision 616, 7.7 KB checked in by jdalbey, 6 years ago (diff)

Add CAD Viewer prototype
Line 
1<html>
2<head>
3<meta charset="UTF-8">
4<title>CPTMS Camera Display Controller V1</title>
5<style>
6.toprow {
7  text-align: center
8}
9td {
10  border: 1px solid black;
11}
12img {  /* confine the image to the cell dimensions */
13    max-width: 100%;
14    max-height: 100%;
15}
16.caption {
17    font-family: sans-serif;
18    text-align: center
19}
20</style>
21<script  src="../common/js/fileutils.js"></script>
22<script>
23/* Camera Controller for CPTMS
24 * @author jdalbey   Apr 2020
25 */
26var kVDSstatusFile = "../dynamicdata/highway_status.json"; // dynamic json data file
27var kCCTVfile = "data_layers/cctv_locations_D12.gjson"; // CCTV locations
28var vdsList;
29var cctvList;
30var routeCameras = {};  // for each route, a list of cameras on that route
31var cameraDict = {};    // for each cameraid, the associated nearVDS and locationName properties
32function init()
33{
34    loadJSON(kVDSstatusFile, function(response)
35    {
36        // Parse JSON string into list of VDS's
37        vdsList = JSON.parse(response);
38
39    });
40    loadJSON(kCCTVfile, function(response)
41    {
42        // Parse JSON string into list of cctv's
43        cctvList = JSON.parse(response);
44        cctvList.features.forEach(buildDict);
45        // Build the route dropdowns using routeCameras keys
46        for (var quadrant = 1; quadrant <= 4; quadrant++)
47        {
48            routecombo = document.getElementById("R"+quadrant)
49            removeOptions(routecombo);
50            routecombo.add(document.createElement('option')); // an empty entry
51            // Get all the routes and sort them
52            var routeList =  Object.keys(routeCameras);
53            routeList.sort()
54            // Add all the routes to the route dropdown box
55            for (var route of routeList)
56            {
57                opt1 = document.createElement('option')
58                opt1.text = opt1.value = route
59                routecombo.add(opt1);
60            }
61        }
62    });
63
64    // Start a timer to refresh the traffic colors every 30 seconds
65    var myTimer = setInterval(updateVDSlist, 30000);
66}
67
68// Build a lookup dictionary that maps route to camera id's
69function buildDict(cctvItem)
70{
71    id = cctvItem.id
72    route = id.substring(3,6); // extract 3 character route number
73    if (route in routeCameras)
74    {
75        routeCameras[route].push(id); // add the camera id to the list for the route
76    }
77    else
78    {
79        routeCameras[route] = [id]; // special case for first occurrence of route
80    }
81    // Add a camera's info to the cameraDict
82    cameraDict[id] = {'nearVDS':cctvItem.properties["nearVDS"],
83                      'locationName':cctvItem.properties["locationName"]}
84}
85
86/* When a route is selected from the combobox, filter the
87   list of cameras for just those on that route. */
88function routechanged(routechoice, cameraselect) 
89{
90  // get the selected route
91  var e = document.getElementById(routechoice);
92  var currentRoute = e.options[e.selectedIndex].text;
93  // update the list of cameras
94  removeOptions(document.getElementById(cameraselect)); 
95  fillOptions(currentRoute, cameraselect);
96}
97
98// Helper: Remove all the options from a combo box
99function removeOptions(selectbox)
100{
101    var idx;
102    for(idx = selectbox.options.length - 1 ; idx >= 0 ; idx--)
103    {
104       selectbox.remove(idx);
105    }
106}
107
108// Fill the selectbox with items from the lookup table that match route
109// route param may be empty if the first item in the combo box was chosen
110function fillOptions(route,cameraselect)
111{
112  // IF the route is not empty
113  if (route.length > 0)
114  {
115      var cameracombo = document.getElementById(cameraselect)
116      // grab cameras from lookup table
117      cameranames = routeCameras[route];
118      //console.log(cameranames.length + " cameras for route " + route);
119      // Create a new select OPTION for each camera
120      for (var idx = 0; idx < cameranames.length; idx++)
121      {
122        var opt1 = document.createElement('option')
123        opt1.value = cameranames[idx]
124        opt1.text = cameraDict[cameranames[idx]].locationName
125        cameracombo.add(opt1);
126      }
127   } 
128}
129
130// Display the image requested from a camera dropdrown box
131function showView(cameraselect)
132{
133    var quadrant = cameraselect.charAt(1)  // extract numeric part of camera identifier
134    var imgElement = document.getElementById("img"+quadrant)   
135    var e = document.getElementById(cameraselect);
136    // if no camera was selected
137    if (e.selectedIndex == -1)
138    {
139        imgElement.src="" // remove the image
140    }
141    else
142    {
143        var chosenCamera = e.options[e.selectedIndex].value;
144        nearvds = cameraDict[chosenCamera].nearVDS
145        // Search for the vds that is nearest
146        var idx = 0; 
147        while (idx < vdsList.features.length && vdsList.features[idx].id != nearvds)
148        {
149            idx++;
150        }
151        // If we found the nearVDS
152        if (idx < vdsList.features.length)
153        {
154            // Obtain color and convert to speed
155            var foundVDS = vdsList.features[idx]
156            var color =  foundVDS.properties['color']
157            var speed = "freeflow"
158            if (color == "yellow")
159            {
160                speed = "slow"
161            }
162            if (color == "red")
163            {
164                speed = "stopped"
165            }
166            // construct filename
167            var filename =  chosenCamera + "-day-"+speed+".jpg"
168            //console.log("Found " + foundVDS.id + " " + foundVDS.properties['color'] + " " + filename)
169            // Load the desired image
170            var preload = new Image();
171            preload.onload = function() {
172                if (imgElement) 
173                { 
174                    imgElement.src = preload.src; // image
175                    imgElement.title=chosenCamera // tooltip
176                }
177            };
178            // if couldn't load show as unavailable
179            preload.onerror = function() {
180                if (imgElement) { imgElement.src = "images/CCTV/video_unavailable.jpg" }
181            };
182            // attempt to load the image
183            preload.src = "images/CCTV/"+filename; 
184    //Reference: https://www.daniweb.com/programming/web-development/threads/272293/javascript-test-for-file-existence
185        }
186    }
187}
188// Execute periodically to reload the vds list with current data
189function updateVDSlist()
190{
191    loadJSON(kVDSstatusFile, function(response)
192    {
193        // Reload the vds list with current data
194        vdsList = JSON.parse(response);
195        // Refresh each camera view
196        var views = document.getElementsByClassName("camcombo");
197        for (var quadrant of views)
198        {
199            showView(quadrant);
200        }
201    });
202   
203}
204</script>
205</head>
206<body onload="init()">
207<div style="text-align: center; width:80%">
208CPTMS Camera Controller
209</div>
210<table width="80%">
211  <tr>
212    <td class="caption" width="50%"><img id="img1" src=""/><br>
213  Choose Route
214  <select id="R1" onchange='routechanged("R1","C1")'>
215    <option value="0"></option>
216  </select>
217  <br>Choose Camera
218  <select id="C1" class="camcombo" onchange='showView("C1")'>
219  </select></td>
220    <td class="caption"><img  id="img2"src=""/><br>
221  Choose Route
222  <select id="R2" onchange='routechanged("R2","C2")'>
223    <option value="0"></option>
224  </select>
225  <br>Choose Camera
226  <select id="C2" class="camcombo" onchange='showView("C2")'>
227  </select></td>
228  </tr>
229  <tr>
230    <td class="caption"><img id="img3" src=""/><br>
231  Choose Route
232  <select id="R3"  onchange='routechanged("R3","C3")'>
233    <option value="0"></option>
234  </select>
235  <br>Choose Camera
236  <select id="C3" class="camcombo" onchange='showView("C3")'>
237  </select>
238</td>
239    <td class="caption"><img id="img4" src=""/><br>
240  Choose Route
241  <select id="R4" onchange='routechanged("R4","C4")'>
242    <option value="0"></option>
243  </select>
244  <br>Choose Camera
245  <select id="C4" class="camcombo" onchange='showView("C4")'>
246</select>
247</td>
248  </tr>
249</table> 
250</body>
251</html>
Note: See TracBrowser for help on using the repository browser.