A local HTML copy of https://github.com/davidsword/node-unicorn 's state

unicorn-phat.html

<style type="text/css">
	:root {
		--padding: 2px;
		--size: 5px;
		--total: 7px;
	}
	body {
		background: black;
		padding:2px;
		margin:0;
	}
	.leds {
		display: grid;
		grid-gap: var(--padding);
		grid-template-columns: auto auto auto auto;
		width: calc( var(--total)*4 );
		height: calc( var(--total)*8 );
	}
	.leds.comm_error::before {
		content: "\274C"; /* ❌*/
		display: block;
		position: absolute;
		width: 100%;
		height: 100%;
		box-sizing: border-box;;
		left:0;
		top:0;
		padding-top: 46%;
		z-index:1;
		animation: blinker 2s ease infinite;
	}
	.leds.comm_error .led {
		opacity: 0.3;
	}
	@keyframes blinker {
		25% { opacity: 1; }
		50% { opacity: 0.75; }
		75% { opacity: 1; }
	}
	.led {
		background: red;
		display: inline-block;
		width: var(--size);
		height: var(--size);
		border-radius: var(--size);
	}
</style>
<div class="leds">
</div>

<script type='text/css'>
(function () {
	"use strict"

	const leds = document.querySelector('.leds');
	const rpiUrl = 'http://localhost:3001/state';

	let div;
	if ( ! document.querySelector('[data-lednum="0"]') )  {
		for ( let i=0;i!=32;i++ ) {
			div = document.createElement("div");
			div.className = "led";
			div.dataset.lednum = i;
			leds.appendChild(div);
		}
	}

	async function getState(url) {
		let response = await fetch(url);
		let data = await response.json()
		return data;
	}

	function updateState() {
		let ledEle;
		let color;
		getState( rpiUrl )
			.then( data => {
				console.dir( data );
				leds.classList.remove('comm_error');
				data.leds.forEach( ( led, index ) => {
					color = led == 0 ? '333' : led;
					//console.dir( `index ${index} - [data-lednum="${index}"], color ${color}` );
					ledEle = document.querySelector(`[data-lednum="${index}"]`);
					ledEle.style.background = '#'+color;
					ledEle.style.boxShadowColor = '#'+color;
				});
			})
			.catch( err => {
				if ( err ) {
					//console.error( err );
					leds.classList.add('comm_error');
				}
			});
	}
	updateState();
	setInterval( updateState, 5000 );

} ());
</script>