Skip to content

Instantly share code, notes, and snippets.

@robot56

robot56/matrice.html

Last active July 23, 2019 01:43
Show Gist options
  • Save robot56/b7093958e68be7ed14a4fe0f937c33fb to your computer and use it in GitHub Desktop.
Save robot56/b7093958e68be7ed14a4fe0f937c33fb to your computer and use it in GitHub Desktop.
Download ZIP
matrice with font rendering
Raw
matrice.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Matrice Tester</title>
<style>
body {
background-color: black;
}
#holder td {
background-color: black;
color: white;
width: 32px;
}
</style>
</head>
<body>
<div>
<table id='holder'>
<!-- <tr>
<td>&nbsp;</td>
<td style='background-color:green;'>&nbsp;</td>
</tr> -->
</table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
function isAlphaNumeric(str) {
var code, i, len;
for (i = 0, len = str.length; i < len; i++) {
code = str.charCodeAt(i);
if (!(code > 47 && code < 58) && // numeric (0-9)
!(code > 64 && code < 91) && // upper alpha (A-Z)
!(code > 96 && code < 123)) { // lower alpha (a-z)
return false;
}
}
return true;
};
var table_dims = [8, 32];
var TABLE_HEIGHT = 8;
var TABLE_WIDTH = 32;
var table = [];
// char font table
var C = {};
C['0'] = [[1,0],[1,1],[1,2],[3,2],[3,2],[2,2],[4,2],[5,2],[5,1],[5,0],[4,0],[3,0],[2,0]];
C['1'] = [[2,0],[1,1],[1,2],[2,2],[3,2],[4,2],[5,2]];
C['2'] = [[1,0],[1,1],[1,2],[2,2],[3,2],[3,1],[4,0],[5,0],[5,1],[5,2]];
C['3'] = [[1,0],[1,1],[1,2],[2,2],[3,2],[3,1],[4,2],[5,2],[5,1],[5,0]];
C['4'] = [[1,0],[2,0],[3,0],[3,1],[3,2],[1,2],[2,2],[3,2],[4,2],[5,2]];
// C['5'] = [[1,3],[1,2],[1,0],[1,0],[1,1],[2,0],[3,0],[3,1],[3,2],[4,3],[5,2],[5,1],[5,0]];
C['5'] = [[1,2],[1,1],[1,0],[2,0],[3,0],[3,1],[4,2],[5,1],[5,0]];
C['6'] = [[1,2],[1,1],[1,0],[2,0],[3,0],[4,0],[5,0],[5,1],[5,2],[4,2],[3,2],[3,1]];
C['7'] = [[1,0],[1,1],[1,2],[2,2],[3,1],[4,1],[5,1]]
C['8'] = [[1,0],[1,1],[1,2],[2,2],[3,2],[3,1],[3,0],[2,0],[4,0],[5,0],[5,1],[5,2],[4,2]];
C['9'] = [[1,2],[1,1],[1,0],[2,0],[3,0],[3,1],[3,2],[2,2],[4,2],[5,2],[5,1],[5,0]];
C['A'] = [[5,0],[3,0],[3,0],[4,0],[2,0],[1,1],[1,2],[2,3],[3,3],[3,3],[4,3],[5,3],[3,1],[3,2]];
C['B'] = [[1,0],[2,0],[3,0],[4,0],[5,0],[1,1],[1,2],[2,3],[3,3],[3,2],[3,1],[5,1],[5,2],[4,3]];
C['C'] = [[1,2],[1,1],[1,0],[2,0],[3,0],[4,0],[5,0],[5,1],[5,2]];
C['D'] = [[1,0],[2,0],[3,0],[3,0],[4,0],[5,0],[1,1],[1,2],[5,1],[5,2],[2,3],[3,3],[4,3]];
C['E'] = [[1,2],[1,1],[1,0],[2,0],[3,0],[4,0],[5,0],[5,1],[5,2],[3,1]];
C['F'] = [[1,0],[1,1],[1,2],[2,0],[3,0],[4,0],[5,0],[3,1],[3,2]];
C['G'] = [[1,2],[1,1],[1,0],[3,0],[3,0],[3,0],[2,0],[4,0],[5,0],[5,1],[5,2],[5,3],[4,3],[3,3],[3,2],[1,3]];
C['H'] = [[1,0],[2,0],[3,0],[4,0],[5,0],[3,1],[3,2],[1,2],[2,2],[3,2],[4,2],[5,2]];
C['I'] = [[1,0],[1,1],[1,2],[2,1],[3,1],[4,1],[4,1],[5,1],[5,0],[5,2]];
C['J'] = [[1,0],[1,1],[1,2],[1,3],[2,2],[3,2],[4,2],[5,1],[5,0],[5,2]];
C['K'] = [[1,0],[2,0],[3,0],[4,0],[5,0],[3,1],[4,2],[5,3],[2,2],[1,3]];
C['L'] = [[1,0],[1,0],[2,0],[3,0],[4,0],[5,0],[5,1],[5,2]];
C['M'] = [[5,0],[4,0],[3,0],[2,0],[1,0],[2,1],[3,2],[2,3],[1,4],[2,4],[4,4],[3,4],[5,4]];
C['N'] = [[5,0],[4,0],[3,0],[2,0],[1,0],[2,1],[3,2],[1,3],[2,3],[3,3],[4,3],[5,3]];
C['O'] = [[1,0],[2,0],[2,0],[4,0],[5,0],[5,1],[5,2],[3,0],[1,1],[1,2],[1,3],[2,3],[3,3],[4,3],[5,3]];
C['P'] = [[1,0],[2,0],[3,0],[4,0],[5,0],[1,1],[1,2],[2,2],[3,2],[3,1]]
C['Q'] = [[5,3],[4,2],[3,3],[2,3],[5,0],[5,1],[4,0],[3,0],[2,0],[1,0],[1,1],[1,2],[1,3]]
C['R'] = [[1,0],[2,0],[3,0],[3,0],[4,0],[5,0],[1,1],[1,2],[1,2],[1,3],[2,3],[3,3],[3,2],[3,1],[4,2],[5,3]]
C['S'] = [[1,3],[1,2],[1,1],[1,0],[2,0],[3,0],[3,2],[3,2],[3,1],[3,3],[5,3],[4,3],[5,2],[5,0],[5,1]]
C['T'] = [[1,0],[1,1],[1,2],[2,1],[3,1],[4,1],[5,1]]
C['U'] = [[1,0],[2,0],[3,0],[4,0],[5,1],[5,2],[4,3],[3,3],[2,3],[1,3]]
C['V'] = [[1,0],[2,0],[3,0],[4,1],[5,2],[4,3],[3,4],[2,4],[1,4]]
C['W'] = [[1,0],[2,0],[3,0],[4,0],[5,1],[4,2],[3,2],[3,2],[2,2],[2,2],[1,2],[5,3],[4,4],[3,4],[2,4],[1,4]]
C['X'] = [[1,0],[2,1],[3,2],[4,3],[5,4],[5,0],[4,1],[2,3],[1,4]]
C['Y'] = [[1,0],[2,1],[3,2],[2,3],[1,4],[4,2],[5,2]]
C['Z'] = [[1,0],[1,1],[1,2],[2,2],[3,1],[4,0],[5,0],[5,1],[5,2]]
C['°'] = [[1,0],[0,1],[1,2],[2,1]];
C['!'] = [[0,0],[1,0],[2,0],[3,0],[5,0]]
C['a'] = [[6,1],[6,2],[6,3],[6,4],[5,4],[4,4],[3,4],[2,3],[2,2],[2,1],[4,3],[4,2],[4,1],[5,0]];
C['b'] = [[6,0],[6,1],[6,2],[6,3],[5,4],[4,4],[3,4],[2,3],[2,2],[3,1],[5,0],[4,0],[3,0],[2,0],[1,0],[0,0]];
C['c'] = [[6,1],[6,2],[6,3],[5,4],[5,0],[4,0],[3,0],[2,1],[2,2],[2,2],[2,3]];
C['d'] = [[6,1],[6,2],[6,3],[6,4],[5,4],[3,4],[4,4],[1,4],[2,4],[0,4],[4,0],[5,0],[3,0],[2,1],[2,2],[3,3]];
C['e'] = [[6,1],[6,2],[6,3],[5,0],[4,0],[3,0],[2,1],[2,2],[2,3],[3,4],[4,4],[4,3],[4,2],[4,1]];
C['f'] = [[6,1],[5,1],[4,1],[3,1],[2,1],[1,1],[0,2],[0,3],[1,4],[3,2],[3,0]];
C['g'] = [[6,1],[6,2],[6,3],[5,4],[4,4],[3,4],[2,4],[2,2],[2,3],[2,1],[3,0],[4,1],[4,2],[4,3]];
C['h'] = [[6,0],[5,0],[4,0],[3,0],[2,0],[0,0],[1,0],[4,1],[3,2],[3,3],[4,4],[5,4],[6,4]];
C['i'] = [[5,0],[6,0],[3,0],[3,0],[2,0],[4,0],[0,0]];
C['j'] = [[5,0],[6,1],[6,2],[5,3],[4,3],[3,3],[2,3],[0,3]];
C['k'] = [[0,0],[1,0],[2,0],[3,0],[4,0],[4,0],[5,0],[6,0],[4,1],[5,2],[6,3],[3,2],[2,3]];
C['l'] = [[1,0],[1,1],[2,1],[3,1],[5,1],[4,1],[6,1],[6,0],[6,2]];
C['m'] = [[6,0],[5,0],[4,0],[3,0],[2,0],[2,1],[3,2],[4,2],[5,2],[6,2],[2,3],[3,4],[4,4],[5,4],[6,4]];
C['n'] = [[6,0],[5,0],[3,0],[4,0],[2,0],[3,1],[2,2],[2,3],[3,4],[4,4],[5,4],[6,4]];
C['o'] = [[3,0],[4,0],[5,0],[6,1],[6,2],[6,3],[5,4],[4,4],[3,4],[2,1],[2,2],[2,3]];
C['p'] = [[6,0],[5,0],[4,0],[4,1],[4,2],[4,3],[3,4],[2,3],[2,1],[2,2],[2,0],[3,0]];
C['q'] = [[6,4],[6,4],[5,4],[4,4],[3,4],[6,4],[5,4],[4,4],[3,4],[2,4],[3,3],[4,3],[4,2],[4,1],[3,0],[2,1],[2,2]];
C['r'] = [[6,0],[5,0],[4,0],[4,0],[3,0],[2,0],[3,1],[2,2],[2,3],[3,4]];
C['s'] = [[6,0],[6,1],[6,2],[6,3],[5,4],[4,3],[4,1],[4,2],[3,0],[2,1],[2,2],[2,3]];
C['t'] = [[6,2],[6,3],[5,4],[5,1],[4,1],[3,1],[2,1],[1,1],[0,1],[2,0],[2,2]];
C['u'] = [[6,1],[6,2],[5,3],[5,4],[6,4],[3,4],[4,4],[2,4],[5,0],[4,0],[4,0],[3,0],[2,0]];
C['v'] = [[2,0],[3,0],[4,0],[5,1],[6,2],[5,3],[4,4],[3,4],[2,4]];
C['w'] = [[2,0],[3,0],[4,0],[5,0],[6,1],[5,2],[4,2],[6,3],[5,4],[4,4],[3,4],[2,4]];
C['x'] = [[2,0],[3,1],[4,2],[5,3],[6,4],[5,1],[6,0],[3,3],[2,4]];
C['y'] = [[2,0],[3,0],[4,1],[4,2],[4,3],[3,4],[2,4],[4,4],[5,4],[6,3],[6,2],[6,1]];
C['z'] = [[6,0],[6,1],[6,2],[6,3],[6,4],[5,1],[4,2],[3,3],[2,4],[2,3],[2,2],[2,0],[2,1],[2,1]];
function draw(x, y, style) {
table[y][x] = style || 'background-color:green';
}
function drawChar(xoff, yoff, char, style) {
let pm = C[char];
if (!pm) {
return 0; // dont have pixel map for char, spaces
}
let cwidth = 0;
for (var i in pm) {
let pix = pm[i];
cwidth = Math.max(cwidth, pix[1]+1);
let x = pix[1] + xoff;
let y = pix[0] + yoff;
if (x >= table_dims[1] || y >= table_dims[0] || x < 0 || y < 0) continue;
table[y][x] = style || 'background-color: green;';
}
return cwidth;
}
function write(text, style, startingIndex) {
let x = startingIndex || 0;
let lwlen = 0;
for (var i in text) {
let c = text[i];
let s = null;
lwlen = drawChar(x, 0, c, style);
x += lwlen + 1;
}
return x;
}
function genPixMap() { // init/flush
let rows = table_dims[1]
let cols = table_dims[0]
for (var i = 0; i < cols; i++) {
var col = [];
for (var j = 0; j < rows; j++) {
col.push(null);
}
table.push(col);
}
}
genPixMap();
function flush() {
for (var i = 0; i < table.length; i++) {
var cval = table[i];
for (var j = 0; j < cval.length; j++) {
cval[j] = null;
}
}
}
var preRender = (p1, p2) => {};
var preRenderP1 = 0;
var preRenderP2 = 0;
function setPreRenderer(func, param1, param2) {
if (typeof(func) == 'function') {
preRender = func;
preRenderP1 = param1;
preRenderP2 = param2;
// console.log('set!')
}
// console.log(typeof(func))
}
function removePreRenderer() {
preRender = (p1, p2) => {};
}
function render() {
preRender(preRenderP1, preRenderP2);
$('#holder').empty()
for (var i = 0; i < table.length; i++) {
var cval = table[i];
var col = [];
for (var j = 0; j < cval.length; j++) {
col.push(cval[j] || 'background-color: lightgray;');
}
var str = '<tr>'
for (var j in col) {
let c = col[j]
str += `<td style="${c}" row="${i}" col="${j}">&nbsp;</td>`
}
str += '</tr>'
$('#holder').append(str);
}
}
function randomIntBetween(max,min) {
var random = Math.random() * (+max - +min) + +min;
return Math.round(random);
}
function randomWithIn(...options) {
console.log(options)
let ri = randomIntBetween(0, options.length);
console.log(ri)
return options[ri];
}
function shuffle() {
for (var i = 0; i < table.length; i++) {
var cval = table[i];
for (var j = 0; j < cval.length; j++) {
cval[j] = randomWithIn('background-color: purple;', 'background-color: orange', 'background-color: pink', 'background-color: green');
}
}
}
function colorize() {
for (var i = 0; i < table.length; i++) {
var cval = table[i];
for (var j = 0; j < cval.length; j++) {
cval[j] = `background-color: rgb(${randomIntBetween(0,255)}, ${randomIntBetween(0, 255)}, ${randomIntBetween(0,255)});`;
}
}
}
var sg_comp = [[1, 1, 'down']]; // x,y,vector
function snakeGameRender() {
for (var i = 0; i < sg_comp.length; i++) {
let sgp = sg_comp[i];
table[sgp[1]][sgp[0]] = 'background-color: red';
}
let current_position = sg_comp[sg_comp.length - 1];
let cx = current_position[0];
let cy = current_position[1];
let cv = current_position[2];
if (cv == 'down') {
if ((cy + 1) < TABLE_HEIGHT) {
console.log(current_position, cy + 1, TABLE_HEIGHT)
sg_comp.push([cx, cy + 1, 'down']);
} else {
}
}
render();
}
let yc = -8;
let ci = 0;
let cs = '1230';
let sequences = ['time', 'weather'];
let sequencesi = 0;
let counts = 0;
setInterval(() => {
counts++;
// let ri = randomIntBetween(0, 100);
// if (ri > 80) blacken()
// else shuffle()
// Render colorier
// {
// colorize();
// render();
// }
// Render flying down text
// {
// if (yc > 8) {
// yc = -8;
// ci++;
// }
// flush();
// drawChar(0, yc++, cs[ci]);
// render();
// }
// Render time
// if (counts < 64)
// {
// if (yc > 8) {
// yc = -8;
// ci++;
// }
// flush();
// write('....'+new Date().toLocaleTimeString())
// // write('12:55:22 AM')
// // drawChar(0, yc++, cs[ci]);
// render();
// }
// else
// {
// flush();
// if (counts > 200) {
// counts = 0;
// }
// else if (counts > 160) {
// write('96° 1HR')
// render()
// }
// else if (counts > 128) {
// write('99° TMR');
// render();
// } else {
// write('94° NOW');
// render();
// }
// }
// Snake game
// {
// render()
// snakeGameRender();
// }
}, 500);
// let text = 'Hello world, I love you all!'.toUpperCase();
// let offi = 0;
// setInterval(() => {
// flush();
// if (offi > text.length) {
// offi = 0;
// }
// write(text.substr(offi++, text.len), `background-color: rgb(${randomIntBetween(0,255)}, ${randomIntBetween(0, 255)}, ${randomIntBetween(0,255)});`);
// render()
// }, 200);
function loopText(text, style, speed, startingIndex) {
let ti = startingIndex || 0;
var speed = speed || 100;
let took = 0;
var timer = setInterval(() => {
flush();
write(text, style, ti);
ti--;
// console.log(startingIndex)
if ((ti * 0.20) <= -text.length) {
clearInterval(timer);
// console.log('done', took, text.length);
}
render();
took += speed;
}, speed);
return speed * (text.length / 0.2);
}
function writeScrolling(text, style, speed, startingIndex, until) {
let ti = startingIndex || 0;
var speed = speed || 100;
let took = 0;
var timer = setInterval(() => {
flush();
write(text, style, ti);
ti--;
console.log(ti)
if ((ti) == (TABLE_WIDTH - until)) {
clearInterval(timer);
// console.log('done', took, text.length);
}
render();
took += speed;
}, speed);
return speed * Math.abs(TABLE_WIDTH - until);
}
function printOrScroll(text) {
var writable = write(text);
if (writable > TABLE_WIDTH) {
return writeScrolling(text, null, null, null, writable);
}
}
// var looped = printOrScroll("hello world!");
// console.warn(looped)
// setTimeout(() => {
// console.log('done!')
// flush();
// write("DONE!");
// render();
// }, looped + 500);
var SHOW_PROGRESS_BAR = true;
function drawProgressbar(current, max) {
var cp = current / max;
var n = Math.floor(cp * ((TABLE_WIDTH - 1)/2));
console.log('PB', n)
draw(n, 7, 'background-color:white;');
// for (var i = 0; i < n; i++) {
// draw(i, 7);
// }
}
function loopTextFlash(text, style, speed, startingIndex) {
let s = text.split(' ');
let ti = startingIndex || 0;
var speed = speed || 800;
let tempTime = 0;
var timer = null;
var loop = () => {
// let cp = ti / (s.length - 1);
// console.log('cp %', Math.ceil(cp * 100));
flush();
let len = write(s[ti++], style);
// ti--;
console.log(startingIndex)
if (len > TABLE_WIDTH) {
// console.log('OVERFLOW!');
let looped = writeScrolling(s[ti - 1], style, 100, 0, len);
clearInterval(timer);
setTimeout(() => {
timer = setInterval(loop, speed);
}, looped);
}
if (ti >= s.length) {
clearInterval(timer);
removePreRenderer();
}
// drawProgressbar(ti, s.length - 1);
setPreRenderer(drawProgressbar, ti, s.length - 1);
render();
};
timer = setInterval(loop, speed);
return timer;
}
write("NYC ALRT");
setTimeout(() => {
loopTextFlash(`Due to recent severe heat, traffic signals without power may be present in various parts of NYC. Drivers should treat impacted intersections as an all-way stop, except when directed by NYPD. Drive with caution and always yield to pedestrians and cyclists.`, 'background-color: purple;', 850);
}, 1000);
// write("NEARBY");
// setTimeout(() => {
// loopTextFlash(`Due to recent severe heat, traffic signals without power may be present in various parts of NYC. Drivers should treat impacted intersections as an all-way stop, except when directed by NYPD. Drive with caution and always yield to pedestrians and cyclists.`, 'background-color: purple;', 850);
// }, 1000);
// loopText("I like pi", null, 200, 10);
function ws2128bToPixelMap(pixnum) {
var col = Math.floor(pixnum / table_dims[0]);
var row = pixnum % table_dims[0];
console.log(col,row)
if (col % 2) {
var y = 7 - row;
} else {
var y = row;
}
// return [col, y];
if (table[y][col] !== undefined)
table[y][col] = 'background-color: blue;'
// render();
}
function pixelMapToWs2128b(x, y) {
let pixnum = x * 8;
if (x % 2) {
pixnum += 7 - (y % 8);
} else {
pixnum += y % 8;
}
console.log('mapping', x,y, 'to', pixnum)
return pixnum;
}
function drawCharWS(xoff, yoff, char, style) {
let pm = C[char];
if (!pm) {
return 0; // dont have pixel map for char, spaces
}
let cwidth = 0;
for (var i in pm) {
let pix = pm[i];
cwidth = Math.max(cwidth, pix[1]+1);
let x = pix[1] + xoff;
let y = pix[0] + yoff;
if (x >= table_dims[1] || y >= table_dims[0] || x < 0 || y < 0) continue;
var pixnum = pixelMapToWs2128b(x, y);
ws2128bToPixelMap(pixnum)
// table[y][x] = style || 'background-color: green;';
}
return cwidth;
}
// drawCharWS(0, 0, 'A')
// let i = 0;
// setInterval(() => {
// ws2128bPixelMap(i);
// render();
// i++;
// }, 100);
// drawChar(1, 0, '1');
// write('RAIN!', `background-color: rgb(${randomIntBetween(0,255)}, ${randomIntBetween(0, 255)}, ${randomIntBetween(0,255)});`);
// write('1234567890');
render()
var vectors = [];
function save() {
console.log(JSON.stringify(vectors))
}
$('td').on('click', function(){
let [row,col] = [$(this).attr('row'), $(this).attr('col')];
console.log(row,col);
vectors.push([parseInt(row), parseInt(col)]);
$(this).css('background-color', 'blue')
})
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment