Changeset 305 in tmcsimulator for trunk/src/cptms/cptms_map.html


Ignore:
Timestamp:
03/12/2019 09:49:19 AM (7 years ago)
Author:
jdalbey
Message:

cptms_map.html v 0.6 adds dynamic cctv images

File:
1 edited

Legend:

Unmodified
Added
Removed

  • trunk/src/cptms/cptms_map.html

    r304 r305  
    44<!-- Launch with  python -m CGIHTTPServer 8080  --> 
    55  <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> 
    6     <title>CPTMS Map v0.5.6</title>  
     6    <title>CPTMS Map v0.6.0</title>  
    77    <style> 
    88        @font-face { 
    … …  
    3636           font-size: large; 
    3737        } 
     38        /*img.resize { 
     39          max-width:auto; 
     40          max-height:500px; 
     41        }*/ 
    3842      #search-input { 
    3943        background-color: #17263c;  /* #CD853F;  /*#E6E6FA; /* lavender */ 
    … …  
    126130  <body> 
    127131    <!--  
     132         Version 6.0 Adds speed-dependent images to infowindow for cctv icons 
     133         Version 5.8 Adds an infowindow with a static image for all cctv icons 
    128134         Version 5.7 integrates CCTV icons and button (but empty click handler) 
    129135         Version 5.6 integrates CMS features 
    … …  
    200206var blueFlag = "images/CPTMSImages/icon_cmsBlue.png"; 
    201207var yellowFlag = "images/CPTMSImages/icon_cmsYellow.png"; 
    202 var cctvIcon = "images/CPTMSImages/icon_cctvBlue.png"; 
     208var cctvIcon = "images/CPTMSImages/icon_cctvCyan.png"; 
     209var cctvIconWhite = "images/CPTMSImages/icon_cctvWhite.png"; 
    203210var messageList; 
    204211var cms_info; 
    … …  
    578585    loadJSON(kCCTVfile, function(response) 
    579586    { 
     587        var imgTag = '<IMG WIDTH="700" SRC="images/CPTMSImages/'; 
    580588        // Parse JSON string into object 
    581589        cctv_info = JSON.parse(response); 
    … …  
    587595            var currLong = Number(cctv.location.longitude); 
    588596            var locationInfo = cctv.location.locationName; 
     597            var imgIcon = cctvIcon 
     598            if ((typeof map.data.getFeatureById(cctv.location.nearVDS)) == "undefined") 
     599            { 
     600                imgIcon = cctvIconWhite; 
     601            } 
     602 
     603            var vdsResult = map.data.getFeatureById(cctv.location.nearVDS) 
     604            //console.log("building "+locationInfo+" near "+cctv.location.nearVDS + " found "+vdsResult);  
    589605            cctvList[i] = new google.maps.Marker( 
    590606            { 
    … …  
    595611                }, 
    596612                map: map, 
    597                 icon: cctvIcon, 
     613                icon: imgIcon, 
    598614                title: "#"+i+" " +locationInfo, 
    599615                cctvid: "" + i, 
    … …  
    602618                nearVDS: cctv.location.nearVDS 
    603619            }); 
     620            cctvList[i].info=new google.maps.InfoWindow({ 
     621                content: locationInfo 
     622            }); 
     623         
    604624            cctvList[i].setVisible(false); // initially hidden 
    605             google.maps.event.addListener(cctvList[i], 'click', 
     625            cctvList[i].addListener('click', 
    606626                function() 
    607627                { 
    608                     // fetch the sequential msg # 
    609628                    cctvIndex = this.index; 
    610                     alert("here will be the view of cctv: " + cctvIndex); 
     629                    //console.log(this.title + " is looking for " + this.nearVDS); 
     630                    currentFeature = map.data.getFeatureById(this.nearVDS); 
     631                    currentColor = currentFeature.getProperty("color"); 
     632                    var imgDir = "CCTVFast/"; 
     633                    if (currentColor == "red" || currentColor == "yellow") 
     634                    { 
     635                        imgDir = "CCTVSlow/" 
     636                    } 
     637                    //console.log(currentFeature.getId() +  ' ' + currentColor + " " + cctvIndex); 
     638                    this.info.setContent('<div>' + this.location + "&nbsp;nearVDS:"  
     639         + this.nearVDS + "&nbsp;" + currentColor + "<BR>"+ imgTag + imgDir + cctvIndex + '.jpg">' + "</div>"); 
     640                    this.info.open(map, this); 
    611641                }); 
    612642        } 
    … …  
    615645 
    616646 
    617  
     647// Center justify message text in a 16 column field 
     648function justifyText(message) 
     649{ 
     650    var kBlanks = "                "; 
     651    var padLen = (16 - message.length)/2; 
     652    var padding = kBlanks.substring(0,padLen); 
     653    return padding + message; 
     654} 
    618655 
    619656function handleSubmit() 
    620657{ 
    621658    // recover the user's response 
    622     var response1 = document.getElementById('msgcontent1').value; 
    623     var response2 = document.getElementById('msgcontent2').value; 
    624     var response3 = document.getElementById('msgcontent3').value; 
     659    var response1 = justifyText(document.getElementById('msgcontent1').value.trim()); 
     660    var response2 = justifyText(document.getElementById('msgcontent2').value.trim()); 
     661    var response3 = justifyText(document.getElementById('msgcontent3').value.trim()); 
    625662    var newMsg = response1+response2+response3; 
    626663    if (newMsg.length == 0) 
    … …  
    710747        getMessage(1); // load the current message file 
    711748        setCMSmarkers(); 
    712         setCCTVmarkers(); 
     749        var startTime = setTimeout(setCCTVmarkers, 3000); 
    713750 
    714751        // Start a timer to refresh the map every 10 seconds 
Note: See TracChangeset for help on using the changeset viewer.