Changeset 616 in tmcsimulator for trunk/webapps/cptms/CameraDisplay.html


Ignore:
Timestamp:
06/06/2020 12:53:44 PM (6 years ago)
Author:
jdalbey
Message:

Add CAD Viewer prototype

File:
1 edited

Legend:

Unmodified
Added
Removed

  • trunk/webapps/cptms/CameraDisplay.html

    r614 r616  
    11<html> 
    22<head> 
    3 <title>UI Prototype - CPTMS Camera Display Controller</title> 
     3<meta charset="UTF-8"> 
     4<title>CPTMS Camera Display Controller V1</title> 
    45<style> 
    56.toprow { 
    … …  
    1819} 
    1920</style> 
     21<script  src="../common/js/fileutils.js"></script> 
    2022<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 
    2186/* When a route is selected from the combobox, filter the 
    2287   list of cameras for just those on that route. */ 
    … …  
    3095  fillOptions(currentRoute, cameraselect); 
    3196} 
    32 // Remove all the options from a combo box 
     97 
     98// Helper: Remove all the options from a combo box 
    3399function removeOptions(selectbox) 
    34100{ 
    … …  
    41107 
    42108// 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 
    43110function fillOptions(route,cameraselect) 
    44111{ 
    45   var cameracombo = document.getElementById(cameraselect) 
    46   items = lookup[route];  // grab cameras from lookup table 
    47   // Create a new select OPTION for each camera 
    48   for (idx = 0; idx < items.length; idx++) 
     112  // IF the route is not empty 
     113  if (route.length > 0) 
    49114  { 
    50     opt1 = document.createElement('option') 
    51     opt1.text = opt1.value = items[idx] 
    52     cameracombo.add(opt1); 
    53   } 
    54 } 
    55 // A dictionary that maps routes to cameras on that route 
    56 var lookup = { 
    57 "5":["SB 5 N/O MAGNOLIA AVE (S/O 91)","NB 5 HARBOR BLVD","NB 5 RTE 22","NB 5 GRAND AVE","SB 5 17TH ST (7TH)","NB 5 BAKE PKWY (LAKE FOREST)","SB 5 ENTERPRISE ST /12-405 (235)","NB 5 ORTEGA HWY","NB 5 JUNIPERO SERRA RD ","NB 5 CROWN VALLEY PKWY (MV)","NB 5 N/O LA PAZ RD (S/O ALICIA)","NB 5 OSO PKWY O/C (MV)","NB 5 N/O OSO PKWY","NB 5 LA PAZ RD ( MV)","NB 5 ALICIA PKWY ON ( MV)","NB 5 ALICIA PKWY","NB 5 EL TORO RD","NB 5 NO EL TORO RD (CARLOTA)","NB 5 ALTON PKWY","NB 5 JEFFREY RD","NB 5 YALE AVE","NB 5 CULVER DR","NB 5 JAMBOREE RD","NB 5 TUSTIN RANCH RD","NB 5 S/O NEWPORT AVE","SB 5 22 FWY","NB 5 STATE COLLEGE BLVD","SB 5 ORANGEWOOD AVE","NB 5 KATELLA AVE","NB 5 WEST ST","NB 5 LINCOLN AVE","NB 5 EUCLID AVE","NB 5 BROOKHURST ST","NB 5 GILBERT ST","NB 5 MAGNOLIA AVE","NB 5 N/O ORANGETHORPE BLVD","NB 5 ANAHEIM BL","NB 5 MANCHESTER AVE (S/O STANTON)","WB 91 GILBERT ST","NB 5 N/O BEACH BLVD","NB 5 AVERY PKWY","NB 5 N/O YALE AVE","NB 5 S/O REDHILL AVE","NB 5 S/O ARTESIA BLVD","NB 5 CHRISTIANITOS RD","NB 5 PRESIDIO DR ON","NB 5 AVENIDA PALIZADA ON","NB 5 VIA HERMOSA","NB 5 S/O AVENIDA VAQUERO ON","NB 5 CAMINO DE ESTRELLA ON","NB 5 STONEHILL DR (CAPISTRANO/STONEHILL)","NB 5 AVENIDA AEROPUERTO","NB 5 VALLE RD ON (SAN JUAN CREEK)","NB 5 S/O ORTEGA HWY (SAN JUAN CREEK)","NB 5 73 FWY (NO LOC DESC)"], 
    58 "22":["EB 22 7TH ST","WB 22 BROOKHURST ST","WB 22 EUCLID ST","WB 22 HARBOR BLVD","WB 22 CITY DRIVE","WB 22 CAMBRIDGE ST","EB 22 GLASSELL ST","WB 22 MAIN ST","EB 22 MAGNOLIA ST","WB 22 MAGNOLIA ST","WB 22 BEACH BLVD","EB 22 KNOTT AVE","WB 22 KNOTT AVE","EB 22 VALLEY VIEW AVE","EB 22 LOS ALISOS ST"], 
    59 "55":["SB 55 DEL MAR AVE","NB 55 4TH ST","NB 55 MCFADDEN AVE","NB 55 EDINGER AVE","NB 55 WARNER AVE ","SB 55 @RTE405","SB 55 RTE 22 ","NB 55 CHAPMAN AVE ","NB 55 WALNUT ST","NB 55 COLLINS AVE","NB 55 KATELLA AVE","NB 55 S/O MEATS AVE","NB 55 17TH ST","NB 55 WILSON ST","NB 55 DEL MAR AVE EXT","NB 55 RTE 73","NB 55 N/O BAKER ST"], 
    60 "57":["NB 57 BALL ROAD","NB 57 KATELLA AVE","NB 57 LINCOLN AVE","NB 57 ORANGETHORPE AVE","NB 57 IMPERIAL HWY","NB 57 LAMBERT ST","NB 57 CHAPMAN AVE (ORANGE)","NB 57 ORANGEWOOD AVE ON","NB 57 N/O WAGNER AVE","NB 57 S/O MIRALOMA OC","NB 57 NUTWOOD ST","NB 57 YORBA LINDA BLVD","NB 57 BASTANCHURY RD U/C","NB 57 ROLLING HILLS RD U/C","NB 57 S/O OF TONNER CYN RD","NB 57 N/O OF TONNER CYN RD"], 
    61 "73":["NB 73 MAINLINE S/O BIRCH ST OC","NB 73 MAINLINE N/O CAMPUS DR OC","NB 73 MAINLINE N/O REDHILL AVE OC","NB 73 MAINLINE N/O PASEO DE COLINAS UC","NB 73 MAINLINE N/O CROWN VALLEY PKWY UC","SB 73 MAINLINE N/O GREENFIELD DR UC","SB 73 MAINLINE S/O MOULTON PKWY UC","SB 73 MAINLINE N/O MOULTON PKWY UC","NB 73 MAINLINE N/O LA PAZ RD UC","SB 73 MAINLINE AT ALICIA PKWY OC", 
    62 "SB 73 AT ALICIA CREEK RD","SB 73 MAINLINE S/O LAGUNA HILLS DR OC","SB 73 MAINLINE N/O LAGUNA HILLS DR OC","SB 73 MAINLINE AT GLENWOOD DR OC","NB 73 OFF-RAMP EL ORO RD","SB 73 MAINLINE N/O EL TORO RD UC","NB 73 CD N/O LAGUNA CYN RD UC","SB 73 MAINLINE N/O LAGUNA CYN RD UC","SB 73 MAINLINE N/O LAGUNA CYN RD UC","SB 73 MAINLINE S/O MAINLINE TOLL PLAZA","SB 73 MAINLINE MAINLINE TOLL PLAZA","SB 73 MAINLINE N/O MAINLINE TOLL PLAZA","SB 73 MAINLINE N/O MAINLINE TOLL PLAZA","SB 73 MAINLINE N/O NEWPORT COAST DR","SB 73 MAINLINE S/O NEWPORT COAST DR","SB 73 MAINLINE S/O NEWPORT COAST DR","NB 73 MAINLINE S/O BISON AVE OC","SB 73 MAINLINE S/O BISON AVE OC","NB 73 MAINLINE S/O UNIVERSITY DR UC","NB 73 MAINLINE JAMBOREE RD"], 
    63 "91":["WB 91 BEACH BLVD","WB 91 FROM NB 57 FWY","EB 91 SCALE HOUSE","EB 91 BROOKHURST ST","EB 91 HARBOR BLVD","WB 91 W/O 57 FWY","EB 91 RAYMOND AVE","WB 91 STATE COLLEGE BLVD","WB 91 WEST / KRAEMER BLVD","WB 91 KRAEMER BLVD","EB 91 E/O GLASSELL ST","EB 91 EUCLID AVE","EB 91 LEMON ST","WB 91 MAGNOLIA ST","WB 91 STANTON AVE"], 
    64 "133":["NB 133 MAINLINE S/O MARINE WAY UC","NB 133 MAINLINE S/O TRABUCO RD OC","NB 133 MAINLINE N/O TRABUCO RD OC","NB 133      MAINLINE N/O IRVINE BLVD OC","NB 133    MAINLINE S/O TOLL PLAZA"], 
    65 "241":["NB 241 MAINLINE N/O ANTONIO PKWY OC","NB 241 MAINLINE 530M N/O ANTONIO PKWY UC","NB 241 MAINLINE N/O SANTA MARGARITA PKWY UC","NB 241 MAINLINE 30M S/O MELINDA ROAD UC","NB 241 MAINLINE 50M S/O EL TORO ROAD UC","NB 241 MAINLINE 80M S/O PORTOLA PKWY UC","NB 241 MAINLINE 40M S/O LAKE FOREST DRIVE UC","NB 241 MAINLINE 310M N/O BAKE PKWY OC","NB 241 MAINLINE 80M S/O ALTON PKWY OC","NB 241 MAINLINE 780M S/O PORTOLA PKWY OC","NB 241 MAINLINE 750M S/O BEE CANYON ROAD","NB 241 MAINLINE 50M S/O BEE CANYON ROAD","NB 241 MAINLINE 800M S/O HAUL ROAD","NB 241 MAINLINE 180M N/O HAUL ROAD","NB 241 MAINLINE 500M S/O SOUTH CULVER DR","NB 241 MAINLINE 400M N/O SOUTH CULVER DR","NB 241 MAINLINE 600M S/O NORTH CULVER DR","NB 241 MAINLINE 430M N/O NORTH CULVER DR","NB 241 MAINLINE 1400M N/O NORTH CULVER DR","NB 241 MAINLINE 230M S/O SANTIAGO CANYON ROAD OC","NB 241 MAINLINE 900M N/O SANTIAGO CANYON ROAD OC","NB 241 MAINLINE 1700M N/O SANTIAGO CANYON ROAD OC","NB 241 MAINLINE 2600M N/O SANTIAGO CANYON ROAD OC","NB 241 MAINLINE 2000M S/O WINDY RIDGE TOLL PLAZA","NB 241 MAINLINE 920M S/O WINDY RIDGE TOLL PLAZA","NB 241 MAINLINE 600M N/O WINDY RIDGE TOLL PLAZA","NB 241 MAINLINE 1200M N/O WINDY RIDGE TOLL PLAZA","NB 241 MAINLINE 2300M N/O WINDY RIDGE TOLL PLAZA","NB 241 MAINLINE 1100M S/O STATE ROUTE 91","EB 91 TO SB 241 CONNECTOR", 
    66 "NB 241 TO EB 91 CONNECTOR","NB 241 MAINLINE 40M N/O PORTOLA PKWY"], 
    67 "261":["SB 261 MAINLINE 200M S/O 5 ","NB 261 MAINLINE 100M S/O BRYAN AVE OC","NB 261 MAINLINE 70M S/O IRVINE BLVD OC","NB 261 MAINLINE 370M N/O IRVINE BLVD NB TOLL PLAZA","NB 261 MAINLINE 80M S/O PORTOLA PKWY (WEST) OC","NB 261 MAINLINE 940M N/O PORTOLA PKWY (WEST) OC","NB 261 MAINLINE 1900M N/O PORTOLA PKWY (WEST) OC","NB 261 MAINLINE 1500M S/O HANDY CREEK RD","NB 261 MAINLINE 290 M N/O HANDY CREEK RD"], 
    68 "405":["SB 405 N/O BRISTOL ST","NB 405 SEAL BEACH BLVD","NB 405 S/O 605 ","NB 405 S/O EUCLID ST","NB 405 BROOKHURST ST","NB 405 WARNER AVE","NB 405 S/O NEWLAND ST","NB 405 GOLDENWEST AVE"], 
    69 "605":["NB 605 S/O KATELLA AVE"] 
    70 }; 
     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} 
    71204</script> 
    72205</head> 
    73 <body> 
    74 <div style="text-align: center"> 
     206<body onload="init()"> 
     207<div style="text-align: center; width:80%"> 
    75208CPTMS Camera Controller 
    76209</div> 
    77 <table> 
     210<table width="80%"> 
    78211  <tr> 
    79     <td class="caption"><img src="images/CCTV/12-005-CCTV-0029-day-slow.jpg"/> 
    80   Choose Route 
    81   <select id="R1"> 
    82     <option value="0"></option> 
    83     <option value="1">1</option> 
    84     <option value="2" selected>5</option> 
    85     <option value="3">73</option> 
    86     <option value="4">405</option> 
    87   </select> 
    88   Choose Camera 
    89   <select id="C1"> 
    90     <option value="0"></option> 
    91     <option value="1" selected>SB 17th St</option> 
    92     <option value="2">NB 5 Ortega Hwy</option> 
    93     <option value="3">NB 5 Crown Valley Pkwy</option> 
    94     <option value="4">NB 5 Alicia Pkwy</option> 
     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")'> 
    95219  </select></td> 
    96     <td class="caption"><img src="images/CCTV/12-005-CCTV-0084-day-slow.jpg"/> 
    97   Choose Route 
    98   <select id="R2"> 
    99     <option value="0"></option> 
    100     <option value="1">1</option> 
    101     <option value="2" selected>5</option> 
    102     <option value="3">73</option> 
    103     <option value="4">405</option> 
    104   </select> 
    105   Choose Camera 
    106   <select id="C2"> 
    107     <option value="0"></option> 
    108     <option value="1">SB 17th St</option> 
    109     <option value="2" selected>NB 5 Ortega Hwy</option> 
    110     <option value="3">NB 5 Crown Valley Pkwy</option> 
    111     <option value="4">NB 5 Alicia Pkwy</option> 
     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")'> 
    112227  </select></td> 
    113228  </tr> 
    114229  <tr> 
    115     <td class="caption"><img src="images/CCTV/12-005-CCTV-0088-day-slow.jpg"/> 
    116   Choose Route 
    117   <select id="R3"> 
    118     <option value="0"></option> 
    119     <option value="1">1</option> 
    120     <option value="2" selected>5</option> 
    121     <option value="3">73</option> 
    122     <option value="4">405</option> 
    123   </select> 
    124   Choose Camera 
    125   <select id="C3"> 
    126     <option value="0"></option> 
    127     <option value="1">SB 17th St</option> 
    128     <option value="2">NB 5 Ortega Hwy</option> 
    129     <option value="3" selected>NB 5 Crown Valley Pkwy</option> 
    130     <option value="4">NB 5 Alicia Pkwy</option> 
     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")'> 
    131237  </select> 
    132238</td> 
    133     <td class="caption"> 
     239    <td class="caption"><img id="img4" src=""/><br> 
    134240  Choose Route 
    135241  <select id="R4" onchange='routechanged("R4","C4")'> 
    136     <option value="0" selected></option> 
    137     <option value="1">5</option> 
    138     <option value="2">22</option> 
    139     <option value="3">57</option> 
    140     <option value="4">73</option> 
    141   </select> 
    142   Choose Camera 
    143   <select id="C4"> 
    144     <option value="0" selected></option> 
     242    <option value="0"></option> 
     243  </select> 
     244  <br>Choose Camera 
     245  <select id="C4" class="camcombo" onchange='showView("C4")'> 
    145246</select> 
    146247</td> 
Note: See TracChangeset for help on using the changeset viewer.