Updates

- Image creation based on show's hash
- Some style improvements
- Previous list now shows the artist and title information instead of JSON
- Script for appending an already existing playlist with a show

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