112 lines
3.7 KiB
HTML
112 lines
3.7 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
|
||
|
|
<head>
|
||
|
|
<title>Radio Freq Visualizer</title>
|
||
|
|
<script src="js/data.js"></script>
|
||
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
|
|
<link href="https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&display=swap"
|
||
|
|
rel="stylesheet">
|
||
|
|
<link
|
||
|
|
href="https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400..900;1,6..96,400..900&family=Jost:ital,wght@0,100..900;1,100..900&display=swap"
|
||
|
|
rel="stylesheet">
|
||
|
|
<link rel="stylesheet" href="default.css" />
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
<h1>Interactive Canadian Radio Frequency Allocation</h1>
|
||
|
|
|
||
|
|
<label for="min_freq">Frequency</label>
|
||
|
|
<input type="range" id="min_freq" min="0" max="25670" />
|
||
|
|
<input type="range" id="max_freq" min="1" max="25670" />
|
||
|
|
<div id="content"></div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
|
||
|
|
let content = document.getElementById("content");
|
||
|
|
console.log(data);
|
||
|
|
|
||
|
|
let service_cats = {};
|
||
|
|
|
||
|
|
let min_freq = 9999999;
|
||
|
|
let max_freq = 0;
|
||
|
|
|
||
|
|
let i = 0;
|
||
|
|
let str = "";
|
||
|
|
for (let entry of data) {
|
||
|
|
|
||
|
|
let services = [];
|
||
|
|
|
||
|
|
for (service_name in entry.primary) {
|
||
|
|
let service_slug = service_name.replaceAll(' ', '_');
|
||
|
|
if (service_cats[service_slug] == null) {
|
||
|
|
service_cats[service_slug] = 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
service_cats[service_slug]++;
|
||
|
|
|
||
|
|
let service_span = document.createElement("span");
|
||
|
|
service_span.className = service_slug;
|
||
|
|
service_span.innerHTML = service_name;
|
||
|
|
services.push(service_span);
|
||
|
|
}
|
||
|
|
|
||
|
|
let hi_freq = entry.maxf;
|
||
|
|
let low_freq = entry.minf;
|
||
|
|
|
||
|
|
min_freq = Math.min(min_freq, low_freq);
|
||
|
|
max_freq = Math.max(max_freq, hi_freq);
|
||
|
|
|
||
|
|
|
||
|
|
let range = hi_freq - low_freq;
|
||
|
|
let color = `rgb(${i}, 0, 0)`;
|
||
|
|
let container = document.createElement('div');
|
||
|
|
container.style.height = range + 'px';
|
||
|
|
container.style.backgroundColor = color;
|
||
|
|
container.className = "freq-entry";
|
||
|
|
|
||
|
|
let freq_range_span = document.createElement('span');
|
||
|
|
freq_range_span.innerHTML = `${low_freq} → ${hi_freq}`;
|
||
|
|
container.appendChild(freq_range_span);
|
||
|
|
for (let s of services) {
|
||
|
|
container.appendChild(s);
|
||
|
|
}
|
||
|
|
content.appendChild(container);
|
||
|
|
i++;
|
||
|
|
}
|
||
|
|
|
||
|
|
let max_min = document.createElement('div');
|
||
|
|
max_min.innerHTML = min_freq + "kHz to " + max_freq + "kHz";
|
||
|
|
content.prepend(max_min);
|
||
|
|
|
||
|
|
let categories = document.createElement('div');
|
||
|
|
for (let service in service_cats) {
|
||
|
|
let span = document.createElement('span');
|
||
|
|
span.className = service;
|
||
|
|
span.innerHTML = service.replaceAll('_', ' ');
|
||
|
|
categories.appendChild(span);
|
||
|
|
}
|
||
|
|
content.prepend(categories);
|
||
|
|
|
||
|
|
// find all elements tagged with service cats and replace them with cat{x}
|
||
|
|
// for styling
|
||
|
|
console.log(service_cats);
|
||
|
|
let current_cat = 1;
|
||
|
|
for (let service in service_cats) {
|
||
|
|
console.log(`Searching for elements with ${service}`);
|
||
|
|
let elems = [...document.getElementsByClassName(service)];
|
||
|
|
console.log(elems);
|
||
|
|
for (let elem of elems) {
|
||
|
|
console.log(`Removing ${service} from ${elem}`)
|
||
|
|
console.log(elem);
|
||
|
|
elem.classList.remove(service);
|
||
|
|
elem.classList.add("cat" + current_cat);
|
||
|
|
}
|
||
|
|
|
||
|
|
current_cat = (current_cat + 1) % 3 + 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
|
||
|
|
</html>
|