source: tmcsimulator/trunk/webapps/cms_monitor.html @ 331

Revision 331, 3.2 KB checked in by jdalbey, 7 years ago (diff)

cms monitor v0.2 adds css columns for CMS, HAR, LCS and dark color scheme
Line 
1<!DOCTYPE html>
2<html>
3  <head>
4<!-- Launch with  python -m CGIHTTPServer 80  -->
5  <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
6    <title>CMS Monitor v0.2</title> 
7<style>
8* {
9  box-sizing: border-box;
10}
11body {
12   background-color: #000033;
13}
14/* Create three unequal columns that float next to each other */
15.column {
16  float: left;
17  padding: 10px;
18  background-color:black; 
19  color:goldenrod
20}
21
22.left {
23  width: 50%;
24}
25
26.middle, .right {
27  width: 25%;
28}
29
30/* Clear floats after the columns */
31.row:after {
32  content: "";
33  display: table;
34  clear: both;
35}
36</style>
37</head>
38<body>
39<div class="row">
40  <div class="column left" >
41    <h2>Active CMS Messages</h2>
42    <p id="msgs"></p>
43  </div>
44  <div class="column middle" >
45    <h2>Active HAR Messages</h2>
46    <p>Not implemented yet.</p>
47  </div>
48  <div class="column right" >
49    <h2>Active Lane Closures</h2>
50    <p>Not implemented yet.</p>
51  </div>
52</div>
53
54
55    <script  src="js/common.js"></script>
56   <script>
57    var cmsLocations = {};
58    // Load the CMS locations from the geojson file
59    function loadCMSlocations()
60    {
61        loadJSON("data_layers/cms_locations_D12.gjson", function(response)
62        {
63            // Parse JSON string into object
64            var cmsjson = JSON.parse(response);
65            for (var i = 0; i < cmsjson.features.length; i++)
66            {
67                var item = cmsjson.features[i];
68                // Add each item to a lookup dictionary
69                cmsLocations[item.id] = item;
70            }
71        });
72    }
73    // Load the file of CMS messages
74    function loadAllcmsMessages()
75    {
76        var display = document.getElementById("msgs");
77        display.innerHTML = ""
78        loadJSON("cms_messages.json", function(response)
79        {
80            // Parse JSON string into object
81            messagejson = JSON.parse(response);
82            // Consider each message
83            for (var i = 0; i < messagejson.data.length; i++)
84            {
85                var item = messagejson.data[i];
86                // Find the location for this message
87                var cmsLoc = cmsLocations[item.cms.index];
88                // Build the message display
89                var current = (item.cms.message.phase1.Line1.toUpperCase() + ":" +
90                    item.cms.message.phase1.Line2.toUpperCase() + ":" +
91                    item.cms.message.phase1.Line3.toUpperCase() + ":" +
92                    item.cms.message.phase2.Line1.toUpperCase() +  ":" +
93                    item.cms.message.phase2.Line2.toUpperCase() + ":" +
94                    item.cms.message.phase2.Line3.toUpperCase())
95                // If the message isn't blank, append it to the list
96                if (current != ":::::")
97                {
98                    display.innerHTML += "<br>" + item.cms.index + ": " + 
99                        cmsLoc.properties.location + " " + cmsLoc.properties.street;
100                    display.innerHTML += "<br>" + current + "<br>";
101                }
102            }
103        });
104    }
105
106// Start
107loadCMSlocations();
108loadAllcmsMessages();
109// start an interval timer to refresh the cms icons every 10 seconds
110var cmsTimer = setInterval(loadAllcmsMessages, 10000);
111
112   </script>
113  </body>
114</html>
Note: See TracBrowser for help on using the repository browser.