diff options
| -rwxr-xr-x | append_latest_list.sh | 92 | ||||
| -rw-r--r-- | client/css/styles.css | 14 | ||||
| -rw-r--r-- | client/index.html | 3 | ||||
| -rw-r--r-- | client/js/radio_emulator.js | 196 |
4 files changed, 289 insertions, 16 deletions
diff --git a/append_latest_list.sh b/append_latest_list.sh new file mode 100755 index 0000000..3b66d93 --- /dev/null +++ b/append_latest_list.sh @@ -0,0 +1,92 @@ +#!/bin/bash + +if [ ! -f hashes/list ] +then + echo 'No list to append, use ./create_list.sh instead' + exit 1 +fi + +function get_latest_list(){ + cat ./hashes/list | jq -r '.latest_list' +} + +latest_list="$(get_latest_list)" + +echo "Latest list's hash: ${latest_list}" +latest_show_object="$(cat hashes/${latest_list} | jq -r '.list' | jq '.[-1:]')" +latest_index_number="$(echo ${latest_show_object} | jq -r '.[].index')" +latest_starts_on="$(echo ${latest_show_object} | jq -r '.[].starts_on')" +latest_duration="$(echo ${latest_show_object} | jq -r '.[].duration')" +list_started_on="$(cat hashes/${latest_list} | jq -r '.started_on')" +list_duration="$(cat hashes/${latest_list} | jq -r '.duration')" +already_in_list="$(mktemp)" +time_now="$(date -u +%s)000" +new_list_file="$(mktemp)" +new_list_started_on="$(($(($(($((${time_now} - ${list_started_on}))/${list_duration}))*${list_duration}))+${list_started_on}))" +new_shows="$(mktemp)" + +cat hashes/${latest_list} | jq -r '.list.[].hash' > ${already_in_list} + +find hashes -type f -size -4096 | sort | while read filepath +do + if [ "${filepath}" == "hashes/list" ] + then + continue + fi + cat "${filepath}" | jq > /dev/null 2>&1 + if [ $? -ne 0 ] + then + continue + fi + if [ "$(cat "${filepath}" | jq -r '.type')" == "show" ] + then + grep $(basename ${filepath}) ${already_in_list} > /dev/null + if [ $? -ne 0 ] + then + echo "New show found: ${filepath}" + echo "${filepath}" >> ${new_shows} + fi + fi +done +function make_new_list(){ + new_show_found="$(cat ${new_shows})" + new_show_hash="$(basename ${new_show_found})" + new_show_starts_on="$((${latest_duration}+${latest_starts_on}))" + new_show_duration="$(cat ${new_show_found}| jq -r '.duration')" + ( + echo -n '{' + echo -n '"type":"list",' + echo -n '"started_on":"'${new_list_started_on}'",' + echo -n '"list":' + echo -n '[' + cat hashes/${latest_list} | jq -r '.list.[]' | sed -e 's/}/},/g' | tr -d '\n' + echo -n '{' + echo -n '"hash":"'${new_show_hash}'",' + echo -n '"index":"'$((${latest_index_number}+1))'",' + echo -n '"starts_on":"'${new_show_starts_on}'",' + echo -n '"duration":"'${new_show_duration}'"' + echo -n '}' + echo -n '],' + echo -n '"duration":"'$((${new_show_duration}+${new_show_starts_on}))'"' + echo -n '}' + )| jq -c -M > ${new_list_file} + sha_live=$(sha512sum ${new_list_file}|cut -d ' ' -f 1) + cat ${new_list_file} | jq + if [ $? -ne 0 ] + then + echo "Corrupted list: ${new_list_file}" + exit 1 + fi + echo '{"latest_list":"'${sha_live}'"}' > ./hashes/list + mv ${new_list_file} ./hashes/${sha_live} + +} +case "$(cat ${new_shows}|wc -l)" in + 0) echo "no new shows";; + 1) make_new_list;; + *) echo "more than one shows...";break; +esac +rm ${new_shows} +rm ${already_in_list} +#cat hashes/${latest_list} | jq -r '.list.[]' | sed -e 's/}/},/g' +#cat hashes/${latest_list} | jq 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 |