jp/interactive-radio-freq
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Filtering and hovering

Browse Source
This commit is contained in:
JP Stringham
2026-02-21 13:34:08 -05:00
parent c7fd22128f
commit 4ac08c0000
2 changed files with 100 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
default.css
View File

@@ -15,13 +15,17 @@ h1 {
.freq-entry {
margin: 0 100px;
border-bottom: 1px solid #ffeecf;
}
.freq-entry span {
display: none;
}
.freq-entry:hover span {
display: block;
background-color: #ffeecf;
}
.cat1,
.cat2,
.cat3 {

167
index.html
View File

@@ -23,100 +23,123 @@
<script>
let content = document.getElementById("content");
data = data.slice(1, -1);
console.log(data);
let service_cats = {};
let min_freq = 9999999;
let max_freq = 0;
buildFreqDOM();
let current_scale = 50000;
resizeFreqDOM(70000, 20000000);
let i = 0;
let str = "";
for (let entry of data) {
i++;
function buildFreqDOM() {
let content = document.getElementById("content");
let services = [];
data = data.slice(1, -1);
console.log(data);
for (service_name in entry.primary) {
let service_slug = service_name.replaceAll(' ', '_');
if (service_cats[service_slug] == null) {
service_cats[service_slug] = 0;
let service_cats = {};
let i = 0;
let str = "";
for (let entry of data) {
i++;
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);
}
service_cats[service_slug]++;
let hi_freq = entry.maxf;
let low_freq = entry.minf;
let service_span = document.createElement("span");
service_span.className = service_slug;
service_span.innerHTML = service_name;
services.push(service_span);
min_freq = Math.min(min_freq, low_freq);
max_freq = Math.max(max_freq, hi_freq);
let container = document.createElement('div');
container.className = "freq-entry";
container.dataset['minf'] = low_freq;
container.dataset['maxf'] = hi_freq;
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);
}
let hi_freq = entry.maxf;
let low_freq = entry.minf;
let max_min = document.createElement('div');
max_min.innerHTML = min_freq + "kHz to " + max_freq + "kHz";
content.prepend(max_min);
min_freq = Math.min(min_freq, low_freq);
max_freq = Math.max(max_freq, hi_freq);
let range = hi_freq - low_freq;
if (range < current_scale) {
continue;
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);
let ci = i * 6.28 / data.length;
let r = Math.sin(ci) * 64 + 127;
let g = Math.sin(ci + 2) * 64 + 127;
let b = Math.sin(ci + 4) * 64 + 127;
let color = `rgb(${r}, ${g}, ${b})`;
let container = document.createElement('div');
container.style.height = range / current_scale + 'px';
container.style.backgroundColor = color;
container.className = "freq-entry";
// 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);
}
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);
current_cat = (current_cat + 1) % 3 + 1;
}
content.appendChild(container);
}
let max_min = document.createElement('div');
max_min.innerHTML = min_freq + "kHz to " + max_freq + "kHz";
content.prepend(max_min);
function resizeFreqDOM(min_freq, max_freq) {
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);
let height = 600;
// 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);
[...document.getElementsByClassName("freq-entry")].forEach((e) => e.style.display = 'none');
let freq_entries = [...document.getElementsByClassName("freq-entry")].filter((e) => e.dataset.minf >= min_freq && e.dataset.maxf < max_freq);
let total_range = max_freq - min_freq;
console.log(`Total range ${total_range} therefore ${height / total_range}px per kHz`);
// console.log(freq_entries);
for (let i = 0; i < freq_entries.length; i++) {
let entry = freq_entries[i];
let range = entry.dataset.maxf - entry.dataset.minf;
console.log(range);
let ci = i * 6.28 / data.length;
let r = Math.sin(ci) * 64 + 127;
let g = Math.sin(ci + 2) * 64 + 127;
let b = Math.sin(ci + 4) * 64 + 127;
let color = `rgb(${r}, ${g}, ${b})`;
entry.style.height = height * range / total_range + 'px';
entry.style.backgroundColor = color;
entry.style.display = 'block';
}
current_cat = (current_cat + 1) % 3 + 1;
}
</script>