diff options
Diffstat (limited to 'client/js')
| -rw-r--r-- | client/js/radio_emulator.js | 196 |
1 files changed, 181 insertions, 15 deletions
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 |