forked from dnlow/caltransCCTV
-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.js
205 lines (190 loc) · 8.18 KB
/
index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
function init()
{
updateFeeds();
}
// Function gets the selected region and then sends info to getImages()
function updateFeeds()
{
camera_count = 0;
rows = 0;
removeCurrentFeeds();
// Get the selection menu
var selection = document.getElementById("segment_selection");
var selected_area = document.getElementById("selected_area");
// Get the selected value
var region = selection.options[selection.selectedIndex].value;
selected_area.innerHTML = selection.options[selection.selectedIndex].innerHTML;
// Send value to getImages
getImages(region);
}
/* Function that gets the correct image link, creates a dict of them and sends
dict to setImageS() */
function getImages(region)
{
var all_regions = ["AG", "AT", "SLO", "PB", "PR", "SM"];
// See the getFeeds() function for what this var is
var allfeeds = getFeeds();
var regional_feeds = null;
// Get current time to append to our images
var current_time = Date.now();
// get an Array containing dicts of the selected region (if it's not "ALL")
if (region != "ALL")
{
regional_feeds = allfeeds[region];
// Now we are going to append to the IMG links with our current time in milliseconds
// Iterate through each Camera dictionary in the array
for (var i = 0, len = regional_feeds.length; i < len; i++)
{
regional_feeds[i].img += ("?" + current_time);
}
// Now go set the image feeds
var row = null;
row = setImages(regional_feeds, row);
var camera_div = document.getElementById("camera_table");
camera_div.appendChild(row);
}
else
{
regional_feeds = allfeeds;
var row = null;
for (var n = 0, l = all_regions.length; n < l; n ++)
{
for (var i = 0, len = regional_feeds[all_regions[n]].length; i < len; i++)
{
regional_feeds[all_regions[n]][i].img += ("?" + current_time);
}
// Now go set the image feeds
row = setImages(regional_feeds[all_regions[n]], row);
}
var camera_div = document.getElementById("camera_table");
camera_div.appendChild(row);
}
}
/* Function that sets the provided images and titles of the feeds onto the html
in table rows of 5 */
var rows = 0;
var camera_count = 0;
function setImages(cameras, row)
{
var feed_row;
// check if it's the first row to be added
if (row == null)
{
feed_row = document.createElement('div');
feed_row.id = "camera_row_" + rows;
feed_row.style = "display:table-row";
}
else
{
feed_row = row;
}
// Get the Camera table
var camera_div = document.getElementById("camera_table");
for (var i = 0, len = cameras.length; i < len; i++, camera_count++)
{
var img = document.createElement("img");
var lbl = document.createElement("h4");
var div = document.createElement('div');
// We've maxed the row, time to make a new row
if (camera_count != 0 && camera_count%5 == 0)
{
camera_div.appendChild(feed_row);
rows++;
feed_row = document.createElement('div');
feed_row.id = "camera_row_" + rows;
feed_row.style = "display:table-row";
}
div.style = "display:table-cell";
img.src = cameras[i].img;
lbl.innerHTML = cameras[i].name;
div.appendChild(lbl);
div.appendChild(img);
feed_row.appendChild(div);
}
return feed_row;
}
function removeCurrentFeeds()
{
var camera_div = document.getElementById("camera_table");
while (camera_div.hasChildNodes())
{
console.log("Removed a child");
camera_div.removeChild(camera_div.lastChild);
}
}
/* Function populates a dictionary of arrays of dictionarys (complicated, I know)
Heres the nested mess:
OUTER DICTIONARY:
1st KEY - REGION ("PR", "AT", etc.)
1st VALUE - ARRAY OF DICTIONARIES
ARRAY INDEXES - Point to a DICTIONARY
INNER DICTIONARIES:
1st KEY - NAME
1st VALUE - the name of the camera, i.e. 'Paso Robles : SR-46 East'
2nd KEY - IMG
2nd VALUE - URL of the image of the feed snapshot
The good news is by using this we can simply filter what region we want by doing this:
var pismo_beach_feeds = all_feeds["PB"];
This will give us an array that points to the individual dictionaries containing names/images of all
pismo beach traffic cameras */
function getFeeds()
{
var feeds = {
"PR" : [
{"name":'Paso Robles : SR-46 East',
"img":'http://cwwp2.dot.ca.gov/data/d5/cctv/image/us101sr46east/us101sr46east.jpg'}
],
"AT" : [
{"name":'Atascadero : Traffic Way',
"img":'http://cwwp2.dot.ca.gov/data/d5/cctv/image/us101trafficway/us101trafficway.jpg'},
{"name":'Atascadero : Hwy 41 West in Atascadero',
"img":'http://cwwp2.dot.ca.gov/data/d5/cctv/image/us101sr41west/us101sr41west.jpg'},
{"name":'Atascadero : Curbaril',
"img":'http://cwwp2.dot.ca.gov/data/d5/cctv/image/us101curbaril/us101curbaril.jpg'},
{"name":'Atascadero :Santa Rosa Rd',
"img":'http://cwwp2.dot.ca.gov/data/d5/cctv/image/us101santarosard/us101santarosard.jpg'},
{"name":'Atascadero : Santa Barbara Rd',
"img":'http://cwwp2.dot.ca.gov/data/d5/cctv/image/us101santabarbarard/us101santabarbarard.jpg'},
{"name":'Atascadero : SR-58',
"img":'http://cwwp2.dot.ca.gov/data/d5/cctv/image/us101sr58/us101sr58.jpg'}
],
"SLO" : [{"name":'San Luis Obispo : Fox Hollow',
"img":'http://cwwp2.dot.ca.gov/data/d5/cctv/image/us101foxhollow/us101foxhollow.jpg'},
{"name":'San Luis Obispo : Broad Street',
"img":'http://cwwp2.dot.ca.gov/data/d5/cctv/image/us101broadstreet/us101broadstreet.jpg'},
{"name":'San Luis Obispo : Marsh Street',
"img":'http://cwwp2.dot.ca.gov/data/d5/cctv/image/us101marshstreet/us101marshstreet.jpg'},
{"name":'San Luis Obispo : Monterey Street',
"img":'http://cwwp2.dot.ca.gov/data/d5/cctv/image/us101montereystreet/us101montereystreet.jpg'},
{"name":'San Luis Obispo : Madonna Road',
"img":'http://cwwp2.dot.ca.gov/data/d5/cctv/image/us101madonnaroad/us101madonnaroad.jpg'},
{"name":'San Luis Obispo : Los Osos Valley Road',
"img":'http://cwwp2.dot.ca.gov/data/d5/cctv/image/us101losososvalleyroad/us101losososvalleyroad.jpg'},
{"name":'San Luis Obispo : South Higuera Street',
"img":'http://cwwp2.dot.ca.gov/data/d5/cctv/image/us101southhiguerastreet/us101southhiguerastreet.jpg'},
{"name":'San Luis Obispo : San Luis Bay Drive',
"img":'http://cwwp2.dot.ca.gov/data/d5/cctv/image/us101sanluisbaydrive/us101sanluisbaydrive.jpg'}
],
"PB" : [{"name":'Pismo Beach : Avila Beach Drive',
"img":'http://cwwp2.dot.ca.gov/data/d5/cctv/image/us101avilabeachdrive/us101avilabeachdrive.jpg'},
{"name":'Pismo Beach : Spyglass',
"img":'http://cwwp2.dot.ca.gov/data/d5/cctv/image/us101spyglassdr/us101spyglassdr.jpg'},
{"name":'Pismo Beach : Mattie Road',
"img":'http://cwwp2.dot.ca.gov/data/d5/cctv/image/us101mattieroad/us101mattieroad.jpg'},
{"name":'Pismo Beach : 101 at Bello and Route 1',
"img":'http://cwwp2.dot.ca.gov/data/d5/cctv/image/us101sr1andbellost/us101sr1andbellost.jpg'},
{"name":'Pismo Beach : 4th Street',
"img":'http://cwwp2.dot.ca.gov/data/d5/cctv/image/us1014thstreet/us1014thstreet.jpg'}
],
"AG" : [{"name":'Arroyo Grande : Camino Mercado',
"img":'http://cwwp2.dot.ca.gov/data/d5/cctv/image/us101caminomercado/us101caminomercado.jpg'},
{"name":'Arroyo Grande : Grand Avenue',
"img":'http://cwwp2.dot.ca.gov/data/d5/cctv/image/us101grandavenue/us101grandavenue.jpg'}
],
"SM" : [{"name":'Santa Maria : SR-135 Broadway',
"img":'http://cwwp2.dot.ca.gov/data/d5/cctv/image/us101sr135broadway/us101sr135broadway.jpg'},
{"name":'Santa Maria : Union Valley Parkway in Santa Maria',
"img":'http://cwwp2.dot.ca.gov/data/d5/cctv/image/us101unionvalleyparkway/us101unionvalleyparkway.jpg'}
]};
return feeds;
}