Separated code for image generation

3 files changed, 144 insertions, 135 deletions

diff --git a/client/index.html b/client/index.html
index c4cd2b3..db4d0eb 100644
--- a/client/index.html
+++ b/client/index.html
@@ -206,6 +206,7 @@
                 </div>
             </div>
         </div>
+        <script src="./js/image_generator.js"></script>
         <script src="./js/radio_emulator.js"></script>
     </body>
 </html>
diff --git a/client/js/image_generator.js b/client/js/image_generator.js
new file mode 100644
index 0000000..bf248c8
--- /dev/null
+++ b/client/js/image_generator.js
@@ -0,0 +1,143 @@
+// Image generator from SHA512SUM to 256px*256px canvas
+//
+// Kaotisk Hund - 2024
+//
+// @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL v3.0
+//
+
+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
diff --git a/client/js/radio_emulator.js b/client/js/radio_emulator.js
index 1bb9b76..19a8719 100644
--- a/client/js/radio_emulator.js
+++ b/client/js/radio_emulator.js
@@ -372,139 +372,4 @@ 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