aboutsummaryrefslogtreecommitdiff
path: root/client
diff options
context:
space:
mode:
Diffstat (limited to 'client')
-rw-r--r--client/css/styles.css14
-rw-r--r--client/index.html3
-rw-r--r--client/js/radio_emulator.js196
3 files changed, 197 insertions, 16 deletions
diff --git a/client/css/styles.css b/client/css/styles.css
index 68c597d..48b2bed 100644
--- a/client/css/styles.css
+++ b/client/css/styles.css
@@ -21,6 +21,12 @@ body {
div {
display: flex;
flex-direction: column;
+ gap: 10px;
+}
+
+.div-groups-row {
+ display: flex;
+ flex-direction: row;
}
progress {
@@ -86,6 +92,7 @@ summary:hover {
table {
background-color: lightgreen;
+ width: 100%;
}
th, td {
@@ -106,3 +113,10 @@ tr {
audio {
width: auto;
}
+
+.generated {
+ width: 128px;
+ height: 128px;
+ max-width: 128px;
+ max-height: 128px;
+}
diff --git a/client/index.html b/client/index.html
index f203c6a..e85a411 100644
--- a/client/index.html
+++ b/client/index.html
@@ -106,7 +106,8 @@
</div>
<div>
<h2>Current "show" info</h2>
- <div class="groups">
+ <div class="div-groups-row">
+ <img class="generated"/>
<table>
<tr>
<th>Artist</th>
diff --git a/client/js/radio_emulator.js b/client/js/radio_emulator.js
index 40c7b89..2e0b5de 100644
--- a/client/js/radio_emulator.js
+++ b/client/js/radio_emulator.js
@@ -214,18 +214,6 @@ function loadShowCallback(json, params)
});
}
-function slowIncreaseVolume()
-{
- if (audioElement.volume < 0.91)
- {
- audioElement.volume += 0.05;
- }
- else
- {
- audioElement.volume = 1;
- }
-}
-
function preciseIncreaseVolume(value)
{
if ( value <= 1 ) audioElement.volume = value;
@@ -269,13 +257,54 @@ function syncOnDOMfromListCallback(now, hash_of_list, json)
placeholders.listInfo.innerText = JSON.stringify(json, null, 2);
}
+function infoShowCallback(json, params)
+{
+ var [ hash ] = params;
+ if ( document.querySelector(`#t-${hash}`) === null )
+ {
+ var parent = document.querySelector(`#d-${hash}`);
+ var tableElement = document.createElement('table');
+ tableElement.id = `t-${hash}`;
+
+ var atr = document.createElement('tr');
+ var artistth = document.createElement('th');
+ artistth.innerText = "Artist";
+ var artistElement = document.createElement('td');
+ artistElement.innerText = `${json.artist}`;
+ atr.appendChild(artistth);
+ atr.appendChild(artistElement);
+ tableElement.appendChild(atr);
+
+ var ttr = document.createElement('tr');
+ var titleth = document.createElement('th');
+ titleth.innerText = "Title";
+ var titleElement = document.createElement('td');
+ titleElement.innerText = `${json.title}`;
+ ttr.appendChild(titleth);
+ ttr.appendChild(titleElement);
+ tableElement.appendChild(ttr);
+
+ parent.appendChild(tableElement);
+ }
+}
+
function appendPreviouslyPlayedShows(listItem){
if ( document.querySelector(`#s-${listItem.hash}`) === null )
{
- var tmp = document.createElement('pre');
- tmp.id = `s-${listItem.hash}`;
- tmp.innerText = JSON.stringify(listItem, null, 2);
+ var tmp = document.createElement('div');
+ var tmpp = document.createElement('pre');
+ // tmp.style = 'flex-direction:row-reverse;';
+ tmp.style = 'flex-direction:row;align-items:center;';
+ tmp.id = `d-${listItem.hash}`;
+ // tmpp.id = `s-${listItem.hash}`;
+ // tmpp.innerText = JSON.stringify(listItem, null, 2);
+ var tmpc = document.createElement('img');
+ tmpc.id = `i-${listItem.hash}`;
+ // tmp.append(tmpp);
+ tmp.append(tmpc);
placeholders.previouslyPlayed.append(tmp);
+ generateImage(listItem.hash, 'new');
+ FetchJSON(`${jsonRequest}${listItem.hash}`, infoShowCallback, [listItem.hash]);
}
}
@@ -309,6 +338,7 @@ function listCallback(json, params)
values.now_on_sequence = values.now_on_sequence - json.list[i].starts_on;
debugLog(`now_on_sequence (1updated): ${values.now_on_sequence}`);
FetchJSON(`${jsonRequest}${json.list[i].hash}`, loadShowCallback, [json, values.now_on_sequence, json.list[i], hash_of_list]);
+ generateImage(json.list[i].hash);
debugLog('First!');
break;
}
@@ -317,6 +347,7 @@ function listCallback(json, params)
if( i !== 0 ) appendPreviouslyPlayedShows(json.list[i]);
values.now_on_sequence = values.now_on_sequence - json.list[i+1].starts_on;
FetchJSON(`${jsonRequest}${json.list[i+1].hash}`, loadShowCallback, [json, values.now_on_sequence, json.list[i+1], hash_of_list]);
+ generateImage(json.list[i].hash);
debugLog('Second!');
break;
}
@@ -341,4 +372,139 @@ function hashCallback(json, params)
FetchJSON(`${listRequest}`, hashCallback, [ new Date().getTime() ]);
+function generateImage(hash, what)
+{
+ var pixels = [];
+
+ var yi = 0;
+ var xi = 0;
+ for ( var y = 0; y < 256; ++y ){
+ pixels[y] = [];
+ for ( var x = 0; x < 256; ++x )
+ {
+ pixels[y][x] = '#000';
+ }
+ }
+ var z = 1;
+ for ( var y = 0; y < 256; ++y )
+ {
+ yi = y - 128;
+ for ( var x = 0; x < 256; ++x )
+ {
+ var pixel;
+ xi = x - 128;
+ z=Math.abs(Math.floor((yi*yi+xi*xi)/3));
+ //z=Math.abs(Math.floor((xi*yi)/1));
+ var r1 = hash[z] === undefined ?'0':hash[z];
+ var r2 = hash[z+1] === undefined ?'0':hash[z+1];
+ var g1 = hash[z+2] === undefined ?'0':hash[z+2];
+ var g2 = hash[z+3] === undefined ?'0':hash[z+3];
+ var b1 = hash[z+4] === undefined ?'0':hash[z+4];
+ var b2 = hash[z+5] === undefined ?'0':hash[z+5];
+ var t1 = hash[z+6] === undefined ?'0':hash[z+6];
+ var t2 = hash[z+7] === undefined ?'0':hash[z+7];
+ if (t2 === undefined)
+ {
+ pixel = "#000";
+ }
+ else
+ {
+ // pixel = `#${r1}${r2}${g1}${g2}${b1}${b2}`;
+ pixel = `#${r1}${r2}${g1}${g2}${b1}${b2}${t1}${t2}`;
+ //pixel = `#${r1}${r1}${r1}${r1}${r1}${r1}${r1}${r1}`;
+ //pixel = `#${r1}${r1}${r1}${r1}${r1}${r1}`;
+ //pixel = `#${r1}${g1}${b1}`;
+ }
+ if ( 0 >= xi && 0 >= yi )
+ {
+ // //z=Math.abs(Math.floor((yi*xi)/4));
+ // //if ( z > 120 ) z = z-120;
+ // //pixel = `#${hash[z-113]}${hash[z-114]}${hash[z-115]}${hash[z-116]}${hash[z-117]}${hash[z-118]}${hash[z-119]}${hash[z-120]}`;
+ // pixel = `#${hash[z]}${hash[z+1]}${hash[z+2]}${hash[z+3]}${hash[z+4]}${hash[z+5]}${hash[z+6]}${hash[z+7]}`;
+ // //pixel = '#2a2'
+ }
+ else if ( 0 <= xi && 0 >= yi )
+ {
+ //pixel = `#${hash[z]}${hash[z+1]}${hash[z+2]}${hash[z+3]}${hash[z+4]}${hash[z+5]}`; //${hash[z+6]}${hash[z+7]}`;
+ // //z=Math.abs(Math.floor((yi*xi)/128));
+ // pixel = `#${hash[z]}${hash[z+1]}${hash[z+2]}${hash[z+3]}${hash[z+4]}${hash[z+5]}${hash[z+6]}${hash[z+7]}`;
+ // // pixel = '#000';
+ // //pixel = '#22a';
+ }
+ else if ( 0 >= xi && 0 <= yi )
+ {
+ //pixel = `#${hash[z]}${hash[z+1]}${hash[z+2]}${hash[z+3]}${hash[z+4]}${hash[z+5]}`; //${hash[z+6]}${hash[z+7]}`;
+ // z=Math.abs(Math.floor((yi*xi)/128));
+ // // pixel = '#000';
+ // pixel = '#a22';
+ }
+ else if ( 0 <= xi && 0 <= yi )
+ {
+ //pixel = `#${hash[z]}${hash[z+1]}${hash[z+2]}${hash[z+3]}${hash[z+4]}${hash[z+5]}`; //${hash[z+6]}${hash[z+7]}`;
+ // z=Math.abs(Math.floor((yi*xi)/128));
+ // pixel = '#000';
+ }
+ pixels[y][x] = pixel;
+ }
+ }
+ createImage( pixels, hash, what );
+}
+
+function createImage(pixels, hash, what)
+{
+ //debugLog(pixels);
+ canvas = document.createElement('canvas');
+ //canvas.width = pixels[0].length;
+ //canvas.height = pixels.length;
+ var output_x_y = 256;
+
+ canvas.width = output_x_y;
+ canvas.height = output_x_y;
+ var context = canvas.getContext('2d');
+ var zoom_factor = 5;
+ var zoom_size = Math.floor(output_x_y/zoom_factor);
+ var radius = Math.floor(output_x_y/zoom_size);
+ debugLog(`Radius: ${radius}`);
+ for ( var y = 0; y < zoom_size; ++y )
+ {
+ for ( var x = 0; x < zoom_size; ++x )
+ {
+ var fy = (canvas.height-zoom_size)/2;
+ var fx = (canvas.width-zoom_size)/2;
+ var ax = Math.floor(x+fx+1);
+ var ay = Math.floor(y+fy+1);
+ //debugLog(`${ax} + ${ay}`);
+ var pixel_to_be_enhanced = pixels[ay][ax];
+ var c = 0;
+ var r = 0;
+ for (var i = 0; i < radius; ++i)
+ {
+ for (var k = 0; k < radius; ++k)
+ {
+ var subpixel = pixel_to_be_enhanced;
+ if ( i > radius - Math.floor(radius/2) )
+ {
+ debugLog(i);
+ }
+ c = (x*radius)+k;
+ r = (y*radius)+i;
+ context.fillStyle = subpixel;
+ context.fillRect(c, r, radius, radius);
+ context.stroke();
+ //debugLog(`${x} -> ${c}, ${y} -> ${r}`);
+ }
+ }
+ }
+ }
+ if ( what !== 'new' )
+ {
+ document.querySelector('.generated').src = canvas.toDataURL('image/png');
+ }
+ else
+ {
+ document.querySelector(`#i-${hash}`).src = canvas.toDataURL('image/png');
+ document.querySelector(`#i-${hash}`).width = 128;
+ }
+}
+
// @license-end
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-21 20:46:14 +0000