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 {

71
index.html
View File

@@ -23,6 +23,13 @@
<script> <script>
let min_freq = 9999999;
let max_freq = 0;
buildFreqDOM();
resizeFreqDOM(70000, 20000000);
function buildFreqDOM() {
let content = document.getElementById("content"); let content = document.getElementById("content");
data = data.slice(1, -1); data = data.slice(1, -1);
@@ -30,11 +37,6 @@
let service_cats = {}; let service_cats = {};
let min_freq = 9999999;
let max_freq = 0;
let current_scale = 50000;
let i = 0; let i = 0;
let str = ""; let str = "";
for (let entry of data) { for (let entry of data) {
@@ -62,22 +64,10 @@
min_freq = Math.min(min_freq, low_freq); min_freq = Math.min(min_freq, low_freq);
max_freq = Math.max(max_freq, hi_freq); max_freq = Math.max(max_freq, hi_freq);
let range = hi_freq - low_freq;
if (range < current_scale) {
continue;
}
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'); let container = document.createElement('div');
container.style.height = range / current_scale + 'px';
container.style.backgroundColor = color;
container.className = "freq-entry"; container.className = "freq-entry";
container.dataset['minf'] = low_freq;
container.dataset['maxf'] = hi_freq;
let freq_range_span = document.createElement('span'); let freq_range_span = document.createElement('span');
freq_range_span.innerHTML = `${low_freq} → ${hi_freq}`; freq_range_span.innerHTML = `${low_freq} → ${hi_freq}`;
@@ -103,20 +93,53 @@
// find all elements tagged with service cats and replace them with cat{x} // find all elements tagged with service cats and replace them with cat{x}
// for styling // for styling
console.log(service_cats); // console.log(service_cats);
let current_cat = 1; let current_cat = 1;
for (let service in service_cats) { for (let service in service_cats) {
console.log(`Searching for elements with ${service}`); // console.log(`Searching for elements with ${service}`);
let elems = [...document.getElementsByClassName(service)]; let elems = [...document.getElementsByClassName(service)];
console.log(elems); // console.log(elems);
for (let elem of elems) { for (let elem of elems) {
console.log(`Removing ${service} from ${elem}`) // console.log(`Removing ${service} from ${elem}`)
console.log(elem); // console.log(elem);
elem.classList.remove(service); elem.classList.remove(service);
elem.classList.add("cat" + current_cat); elem.classList.add("cat" + current_cat);
} }
current_cat = (current_cat + 1) % 3 + 1; current_cat = (current_cat + 1) % 3 + 1;
}
}
function resizeFreqDOM(min_freq, max_freq) {
let height = 600;
[...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';
}
} }
</script> </script>