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 { .freq-entry {
margin: 0 100px; margin: 0 100px;
border-bottom: 1px solid #ffeecf;
} }
.freq-entry span { .freq-entry span {
display: none; display: none;
} }
.freq-entry:hover span {
display: block;
background-color: #ffeecf;
}
.cat1, .cat1,
.cat2, .cat2,
.cat3 { .cat3 {

167
index.html
View File

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