Design Technologist
Public
Edited
Aug 22, 2022
isLoading = false
svgPattern = (color) => {
const g = document.createElementNS("http://www.w3.org/2000/svg", "g");
const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
path.setAttribute("d", "M0,0L0,1L1,1L1,0Z");
path.setAttribute("fill", color);
const circle = document.createElementNS(
"http://www.w3.org/2000/svg",
"circle"
);
circle.setAttribute("cx", "0.5");
circle.setAttribute("cy", "0.5");
circle.setAttribute("r", circleRadius);
circle.setAttribute("fill", color);
if (blackWhite.length) {
path.setAttribute("fill-opacity", backgroundOpacity);
circle.setAttribute("fill-opacity", circleOpacity);
}
if (hasRectangle.length) {
g.appendChild(path);
}
g.appendChild(circle);
return g;
}
function getCorner(idx) {
const cornerSize = 8;
const row = Array.from(table.getElementsByTagName("tr")[0].childNodes);
const size = row.length;
let ox = 0;
let oy = 0;
let oox = 0;
let ooy = 0;
if (idx === 1) {
oy = size - cornerSize;
ooy = 1;
}
if (idx === 2) {
ox = size - cornerSize;
oox = 1;
}
const unit = 1 / size;
const g = document.createElementNS("http://www.w3.org/2000/svg", "g");
const rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
rect.setAttribute("x", unit * ox);
rect.setAttribute("y", unit * oy);
rect.setAttribute("width", unit * cornerSize);
rect.setAttribute("height", unit * cornerSize);
rect.setAttribute("fill", backColor.toString());
// inner rects
const rect2 = document.createElementNS("http://www.w3.org/2000/svg", "rect");
rect2.setAttribute("x", unit * (ox + oox));
rect2.setAttribute("y", unit * (oy + ooy));
rect2.setAttribute("width", unit * 7);
rect2.setAttribute("height", unit * 7);
rect2.setAttribute("fill", ringColor.toString());
const rect3 = document.createElementNS("http://www.w3.org/2000/svg", "rect");
rect3.setAttribute("x", unit * (1 + ox + oox));
rect3.setAttribute("y", unit * (1 + oy + ooy));
rect3.setAttribute("width", unit * 5);
rect3.setAttribute("height", unit * 5);
rect3.setAttribute("fill", backColor.toString());
const rect4 = document.createElementNS("http://www.w3.org/2000/svg", "rect");
rect4.setAttribute("x", unit * (2 + ox + oox));
rect4.setAttribute("y", unit * (2 + oy + ooy));
rect4.setAttribute("width", unit * 3);
rect4.setAttribute("height", unit * 3);
rect4.setAttribute("fill", dotColor.toString());
g.appendChild(rect);
g.appendChild(rect2);
g.appendChild(rect3);
g.appendChild(rect4);
return g;
}
table = {
const el = document.createElement("div");
el.innerHTML = qrCode._qr.createTableTag();
const table = el.getElementsByTagName("table")[0];
table.style.width = "200px";
table.style.height = "200px";
return el;
}
qrCode = new QRCodeStyling({
width: 300,
height: 300,
type: "svg",
data: qrData
})
getLookup = (black = false) => {
const canvas2 = document.createElement("canvas");
canvas2.width = pixelSize;
canvas2.height = pixelSize;
const ctx2 = canvas2.getContext("2d");
const ctx = canvas.getContext("2d");
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
const data = imageData.data;
const row = Array.from(table.getElementsByTagName("tr")[0].childNodes);
const arr = Array.from(table.getElementsByTagName("td"));
let x = 0;
let y = 0;
const size = row.length;
function findColor(cx, cy) {
function colorAt(xx, yy) {
const idx = Math.floor(yy * pixelSize + xx);
return new ColorRGB(
data[idx * 4] / 255,
data[idx * 4 + 1] / 255,
data[idx * 4 + 2] / 255,
data[idx * 4 + 3] / 255
);
}
function validColor(xx, yy) {
let color = colorAt(xx, yy);
// if it is in the valid colors
function distance(cc) {
const [r, g, b] = cc.toTuple();
const a = Math.abs;
return a(cc.R - color.R) + a(g - color[1]) + a(b - color[2]);
}
return validColors.sort((a, b) => {
const da = a.distance(color);
const db = b.distance(color);
return da - db;
})[0];
}
if (black) {
const centerColorAt = colorAt(cx, cy);
// assume bg to white
let color = colorAt(cx, cy);
if (color[3] === 0) {
return "black";
}
const isWhite = isWhiteText(centerColorAt);
return isWhite ? "white" : "black";
}
// color matching
return validColor(cx, cy);
}
// for each pixel
for (let i = 0; i < pixelSize * pixelSize; i++) {
const x = i % pixelSize;
const y = Math.floor(i / pixelSize);
const color = findColor(x, y);
ctx2.fillStyle = color;
ctx2.fillRect(x, y, 1, 1);
}
return canvas2;
}
drawImage = async (c) => {
c.width = pixelSize;
c.height = pixelSize;
// draw image
const ctx = c.getContext("2d");
ctx.imageSmoothingEnabled = false;
if (inputImage) {
const img = await inputImage.image();
await img.decode();
// crop image center fit
const cropSize = Math.min(img.width, img.height);
const cropX = (img.width - cropSize) / 2;
const cropY = (img.height - cropSize) / 2;
ctx.drawImage(
img,
cropX,
cropY,
cropSize,
cropSize,
0,
0,
pixelSize,
pixelSize
);
}
}
colorSwatches(lightColors)
colorSwatches(darkColors)
darkColors = quantizedColors.filter((c) => isWhiteText(c))
lightColors = quantizedColors.filter((c) => !isWhiteText(c))
quantizedColors = quantizeImage(await inputImage.url())
QRCodeStyling = require("https://unpkg.com/qr-code-styling@1.6.0-rc.1")
import { quantizeImage } from "@mateh/extract-palette"
import { SwatchInput } from "@mateh/swatch-input"
import { isWhiteText, colorSwatches, ColorRGB, generate } from "@mateh/palette"
import { contrast } from "@mbostock/wcag-contrast-ratio"
import { loading } from "@mateh/loading"
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
