Changeset 301 in tmcsimulator for trunk/src/cptms/cms_demo.html


Ignore:
Timestamp:
03/10/2019 01:20:33 PM (7 years ago)
Author:
jdalbey
Message:

cms_demo.html modified edit dialog to atms color scheme, added atms style button. added images folder.

File:
1 edited

Legend:

Unmodified
Added
Removed

  • trunk/src/cptms/cms_demo.html

    r300 r301  
    1717        } 
    1818        textarea { 
     19           height: 33px; 
    1920           width: 272px; 
    2021           resize: none; 
    2122           font-family: Scoreboard; 
    2223           font-size: xx-large; 
    23            background-color: black; 
     24           background-color: #2F4F4F; 
    2425           color: yellow; 
    2526        } 
    … …  
    4041           width: 540px; 
    4142           overflow: hidden; 
    42            background-color: #ECECFB; 
     43           background-color: #A8C5FF;  /*#ECECFB; */ 
    4344           border: thin solid #BDBDBD; 
    4445           padding: 5px; 
    … …  
    5556           height: 122px; 
    5657           width: 135px; 
    57            background-color: #ECECFB; 
     58           background-color: #729FFF; 
    5859           float: left; 
    5960            
    … …  
    6263           height: 122px; 
    6364           width: 100px; 
    64            background-color: #ECECFB; 
     65           background-color: #729FFF; 
    6566           border-left: none; 
    6667           float: left; 
    … …  
    7475          top: 10%; 
    7576          right: 20%; 
    76           background-color: #ECECFB; 
     77          background-color: #729FFF; /* #ECECFB; */ 
    7778          margin: auto; 
    7879          padding: 20px; 
    … …  
    8182          display: none;            
    8283        } 
    83       #hideButton { 
    84         font-size: 40px; 
    85         margin-right: 9px; 
    86         background-color: #fff; 
    87         color: #47476b; 
     84      .unstyled-button { 
     85        border: 0 none; 
     86        padding: 0; 
     87        background: none; 
    8888        cursor: pointer; 
    8989      }     
     90 
    9091 
    9192    /* The Close Button */ 
    … …  
    106107  </head> 
    107108  <body> 
    108 <!--    <div id="cms-name"  style="display: none;"></div> 
    109     <div id="cms-message"  style="display: none;"> 
    110  
    111     <input id="msgcontent1" size="16" maxlength="16"/> 
    112     <input id="msgcontent2" size="16" maxlength="16"/> 
    113     <input id="msgcontent3" size="16" maxlength="16"/> 
    114     </div> 
    115     <input id='cmsID' value="" type='hidden'/> 
    116     <div id="userinput"    style="display: none;"> 
    117     <button onclick="handleClear();">Clear</button> 
    118     <button onclick="handleSubmit();">OK</button> 
    119     <button onclick="handleCancel();">Cancel</button> 
    120     </div> 
    121  --> 
    122109    <div id="map"></div> 
    123110    <!--The div element where the show/hide button appears --> 
    124     <div id="hideButton">&#128065;</div> 
     111    <!-- div id="hideButton">&#128065;</div --> 
     112    <button id="cmsButton" class="unstyled-button"><img id="cmsBtnImg" src="images/btnDepressed_CMS.png"></button> 
     113    <button id="vdsButton" class="unstyled-button"><img id="vdsBtnImg" src="images/btnDepressed_VDS.png"></button> 
    125114    <div id="map" class = "wrapper"></div> 
    126115    <!-- The div element for the popup dialog --> 
    … …  
    156145var map; 
    157146var kMapStartupFile = "cmsStatusD12.json"; 
    158 var blueFlag = "icon_cmsBlue.png"; 
    159 var yellowFlag = "icon_cmsYellow.png"; 
     147var blueFlag = "images/icon_cmsBlue.png"; 
     148var yellowFlag = "images/icon_cmsYellow.png"; 
    160149var messageList; 
    161150var cms_info; 
    162151var markerList = []; 
    163 var showing = true; 
     152var cms_showing = true; 
     153var vds_showing = true; 
    164154 
    165155function initMap() 
    … …  
    176166    setMarkers(); 
    177167} 
    178 // Initialize the view/hide button  
     168// Initialize the view/hide buttons  
    179169function initButton() 
    180170{ 
    181     var hideBtnDiv = document.getElementById('hideButton'); 
    182     map.controls[google.maps.ControlPosition.RIGHT_CENTER].push(hideBtnDiv) 
    183     hideBtnDiv.title = 'Click to toggle cms view'; 
     171    var cmsBtnDiv = document.getElementById('cmsButton'); 
     172    map.controls[google.maps.ControlPosition.LEFT_BOTTOM].push(cmsBtnDiv) 
     173    cmsBtnDiv.title = 'Click to toggle cms view'; 
    184174 
    185175    // Setup the click event listeners to toggle icon display 
    186     hideBtnDiv.addEventListener('click', function() { 
    187             showing = !showing; 
     176    cmsBtnDiv.addEventListener('click', function() { 
     177            cms_showing = !cms_showing; 
     178            // reveal or hide all the icons 
    188179            for (var i = 0; i < markerList.length; i++) 
    189180            { 
    190                 markerList[i].setVisible(showing); 
    191             } 
     181                markerList[i].setVisible(cms_showing); 
     182            } 
     183            // Determine which button image to show 
     184            if (cms_showing) 
     185            { 
     186                pic = "images/btnDepressed_CMS.png" 
     187            } 
     188            else 
     189            { 
     190                pic = "images/btnReady_CMS.png" 
     191            } 
     192            document.getElementById('cmsBtnImg').src=pic; 
     193    }); 
     194    var vdsBtnDiv = document.getElementById('vdsButton'); 
     195    map.controls[google.maps.ControlPosition.LEFT_BOTTOM].push(vdsBtnDiv) 
     196    vdsBtnDiv.title = 'Click to toggle vds view'; 
     197 
     198    // Setup the click event listeners to toggle icon display 
     199    vdsBtnDiv.addEventListener('click', function() { 
     200            vds_showing = !vds_showing; 
     201            // reveal or hide all the icons 
     202            alert("Not implemented yet") 
     203            // Determine which button image to show 
     204            if (vds_showing) 
     205            { 
     206                pic = "btnDepressed_VDS.png" 
     207            } 
     208            else 
     209            { 
     210                pic = "btnReady_VDS.png" 
     211            } 
     212            document.getElementById('vdsBtnImg').src=pic; 
    192213    }); 
    193214} 
    … …  
    212233                simpleImage = blueFlag; 
    213234            var directionCode = cms.location.direction.charAt(0); 
    214             var rolloverText = " " + directionCode + " " + cms.location 
     235            var locationInfo = directionCode + " " + cms.location 
    215236                .route + " " + cms.location.postmile + " " + cms 
    216237                .location.locationName 
    … …  
    224245                map: map, 
    225246                icon: simpleImage, 
    226                 title: rolloverText, 
    227                 label: "" + i 
     247                title: "#"+i+" " +locationInfo, 
     248                cmsid: "" + i, 
     249                location: locationInfo 
    228250            }); 
    229251            google.maps.event.addListener(markerList[i], 'click', 
    … …  
    233255                    dialog.style.display = 'block'; 
    234256                    // fetch the sequential msg # 
    235                     cmsID = Number(this.getLabel()); 
     257                    cmsID = Number(this.cmsid); 
    236258                    // Assign to the hidden field 
    237259                    document.getElementById('cmsID').value = cmsID; 
    238260                    getMessage(cmsID); // note: this is async 
    239                     document.getElementById('cms-info-label').innerHTML = "CMS id: " + 
    240                         cmsID + "&nbsp;&nbsp;&nbsp;LOCATION: " + this.title; 
     261                    document.getElementById('cms-info-label').innerHTML = "CMS ID: " + 
     262                        cmsID + "&nbsp;&nbsp;&nbsp;LOCATION: " + this.location; 
    241263                    // clear input fields 
    242264                    document.getElementById('msgcontent1').value = ""; 
Note: See TracChangeset for help on using the changeset viewer.