feat: Playtube Stream Dock Plugin 1.0.0 (Ajazz AKP153E) mit Icon-Pack
This commit is contained in:
@@ -0,0 +1,141 @@
|
||||
// Symbole fuer die Tasten, gezeichnet in Einheitskoordinaten [-1, 1] um (cx, cy) mit Radius r.
|
||||
|
||||
function heartPoints() {
|
||||
const points = [];
|
||||
for (let i = 0; i < 72; i += 1) {
|
||||
const t = (i / 72) * Math.PI * 2;
|
||||
points.push([
|
||||
(16 * Math.sin(t) ** 3) / 17,
|
||||
-(13 * Math.cos(t) - 5 * Math.cos(2 * t) - 2 * Math.cos(3 * t) - Math.cos(4 * t)) / 17,
|
||||
]);
|
||||
}
|
||||
return points;
|
||||
}
|
||||
const HEART = heartPoints();
|
||||
|
||||
export const GLYPHS = [
|
||||
'play', 'pause', 'next', 'previous', 'rewind', 'forward', 'volup', 'voldown', 'vol', 'mute',
|
||||
'note', 'heart', 'heartfill', 'shuffle', 'repeat', 'repeatone', 'playlist', 'tabs', 'window',
|
||||
];
|
||||
|
||||
/**
|
||||
* @param {import('./raster.mjs').Canvas} canvas
|
||||
* @param {string} name - Eintrag aus GLYPHS
|
||||
* @param {number} cx
|
||||
* @param {number} cy
|
||||
* @param {number} r - halbe Symbolgroesse in Pixeln
|
||||
* @param {string} color - Symbolfarbe
|
||||
* @param {string} background - Farbe hinter dem Symbol (fuer "ausgeschnittene" Formen)
|
||||
*/
|
||||
export function drawGlyph(canvas, name, cx, cy, r, color, background) {
|
||||
const p = (x, y) => [cx + x * r, cy + y * r];
|
||||
const poly = (points) => canvas.polygon(points.map(([x, y]) => p(x, y)), color);
|
||||
const stroke = (x1, y1, x2, y2, w = 0.2) => {
|
||||
const [ax, ay] = p(x1, y1);
|
||||
const [bx, by] = p(x2, y2);
|
||||
canvas.line(ax, ay, bx, by, w * r, color);
|
||||
};
|
||||
const path = (points, w = 0.2) => points.slice(1).forEach((pt, i) => stroke(...points[i], ...pt, w));
|
||||
const speaker = (dx = 0) => poly([[-0.9 + dx, -0.3], [-0.5 + dx, -0.3], [-0.1 + dx, -0.7],
|
||||
[-0.1 + dx, 0.7], [-0.5 + dx, 0.3], [-0.9 + dx, 0.3]]);
|
||||
const arc = (dx, outer, inner) => {
|
||||
const [ax, ay] = p(dx, 0);
|
||||
canvas.ring(ax, ay, outer * r, inner * r, color, Math.PI * 2 - 0.75, Math.PI * 2);
|
||||
canvas.ring(ax, ay, outer * r, inner * r, color, 0, 0.75);
|
||||
};
|
||||
const heart = (scale, fill) => canvas.polygon(
|
||||
HEART.map(([x, y]) => [cx + x * r * scale, cy + (y * scale + 0.05) * r]), fill);
|
||||
|
||||
switch (name) {
|
||||
case 'play':
|
||||
poly([[-0.7, -0.85], [0.75, 0], [-0.7, 0.85]]);
|
||||
break;
|
||||
case 'pause':
|
||||
poly([[-0.65, -0.8], [-0.2, -0.8], [-0.2, 0.8], [-0.65, 0.8]]);
|
||||
poly([[0.2, -0.8], [0.65, -0.8], [0.65, 0.8], [0.2, 0.8]]);
|
||||
break;
|
||||
case 'next':
|
||||
poly([[-0.8, -0.75], [0.4, 0], [-0.8, 0.75]]);
|
||||
poly([[0.55, -0.75], [0.85, -0.75], [0.85, 0.75], [0.55, 0.75]]);
|
||||
break;
|
||||
case 'previous':
|
||||
poly([[0.8, -0.75], [-0.4, 0], [0.8, 0.75]]);
|
||||
poly([[-0.55, -0.75], [-0.85, -0.75], [-0.85, 0.75], [-0.55, 0.75]]);
|
||||
break;
|
||||
case 'rewind':
|
||||
poly([[0.05, -0.65], [-0.55, 0], [0.05, 0.65]]);
|
||||
poly([[0.85, -0.65], [0.25, 0], [0.85, 0.65]]);
|
||||
break;
|
||||
case 'forward':
|
||||
poly([[-0.05, -0.65], [0.55, 0], [-0.05, 0.65]]);
|
||||
poly([[-0.85, -0.65], [-0.25, 0], [-0.85, 0.65]]);
|
||||
break;
|
||||
case 'volup':
|
||||
speaker(-0.1);
|
||||
stroke(0.3, 0, 0.9, 0);
|
||||
stroke(0.6, -0.3, 0.6, 0.3);
|
||||
break;
|
||||
case 'voldown':
|
||||
speaker(-0.1);
|
||||
stroke(0.3, 0, 0.9, 0);
|
||||
break;
|
||||
case 'vol':
|
||||
speaker(-0.2);
|
||||
arc(-0.3, 0.75, 0.55);
|
||||
arc(-0.3, 1.1, 0.9);
|
||||
break;
|
||||
case 'mute':
|
||||
speaker(-0.1);
|
||||
stroke(0.3, -0.35, 0.9, 0.35);
|
||||
stroke(0.3, 0.35, 0.9, -0.35);
|
||||
break;
|
||||
case 'note': {
|
||||
const [nx, ny] = p(-0.35, 0.5);
|
||||
canvas.circle(nx, ny, 0.38 * r, color);
|
||||
stroke(0.0, 0.45, 0.0, -0.85, 0.2);
|
||||
stroke(0.0, -0.85, 0.7, -0.5, 0.2);
|
||||
break;
|
||||
}
|
||||
case 'heart':
|
||||
heart(1, color);
|
||||
heart(0.62, background);
|
||||
break;
|
||||
case 'heartfill':
|
||||
heart(1, color);
|
||||
break;
|
||||
case 'shuffle':
|
||||
path([[-0.9, 0.5], [-0.3, 0.5], [0.3, -0.5], [0.55, -0.5]], 0.18);
|
||||
path([[-0.9, -0.5], [-0.3, -0.5], [0.3, 0.5], [0.55, 0.5]], 0.18);
|
||||
poly([[0.5, -0.85], [0.95, -0.5], [0.5, -0.15]]);
|
||||
poly([[0.5, 0.15], [0.95, 0.5], [0.5, 0.85]]);
|
||||
break;
|
||||
case 'repeat':
|
||||
case 'repeatone':
|
||||
path([[-0.8, 0.15], [-0.8, -0.4], [0.3, -0.4]], 0.18);
|
||||
poly([[0.3, -0.8], [0.9, -0.4], [0.3, 0]]);
|
||||
path([[0.8, -0.15], [0.8, 0.4], [-0.3, 0.4]], 0.18);
|
||||
poly([[-0.3, 0.8], [-0.9, 0.4], [-0.3, 0]]);
|
||||
if (name === 'repeatone') {
|
||||
stroke(0.0, -0.18, 0.0, 0.2, 0.14);
|
||||
stroke(-0.13, -0.1, 0.0, -0.18, 0.14);
|
||||
}
|
||||
break;
|
||||
case 'playlist':
|
||||
stroke(-0.85, -0.55, 0.15, -0.55, 0.18);
|
||||
stroke(-0.85, -0.05, 0.15, -0.05, 0.18);
|
||||
stroke(-0.85, 0.45, -0.25, 0.45, 0.18);
|
||||
poly([[0.3, 0.05], [0.95, 0.45], [0.3, 0.85]]);
|
||||
break;
|
||||
case 'tabs':
|
||||
canvas.roundRect(...p(-0.85, -0.7), 1.1 * r, 0.9 * r, 0.12 * r, color);
|
||||
canvas.roundRect(...p(-0.75, -0.6), 0.9 * r, 0.7 * r, 0.06 * r, background);
|
||||
canvas.roundRect(...p(-0.25, -0.15), 1.1 * r, 0.9 * r, 0.12 * r, color);
|
||||
break;
|
||||
case 'window':
|
||||
canvas.roundRect(...p(-0.9, -0.7), 1.8 * r, 1.4 * r, 0.14 * r, color);
|
||||
canvas.roundRect(...p(-0.75, -0.25), 1.5 * r, 0.85 * r, 0.05 * r, background);
|
||||
break;
|
||||
default:
|
||||
throw new Error(`Unbekanntes Symbol: ${name}`);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user