prehistoric-systems/itty-bitty
1
0
Fork 0
mirror of https://github.com/arfct/itty-bitty.git synced 2026-03-11 08:54:33 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Updated color formatting

Browse source
This commit is contained in:
Nicholas Jitkoff 2022-07-03 12:40:29 -07:00
parent e783615915
commit cb5ad426c4
2 changed files with 8 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
docs/render/color.css
View file

@ -82,10 +82,13 @@ div#title {
#copy, #edit {
font-size:12px;
font-weight:bold;
font-weight:
bold;
text-transform: uppercase;
margin-left:1em;
cursor:default;
cursor:
default;
height: 2.5em;
}
#edit:before {

18
docs/render/color.js
View file

@ -2,8 +2,6 @@ let script = document.currentScript?.src || import.meta?.url;
// import Color from "https://colorjs.io/dist/color.js";
import Color from "/js/color.min.js";
// import Color from (new URL("/js/color.global.min.js", script.src)).href;
console.log("script",script)
function share() {
parent.postMessage({share:{}}, "*");
@ -47,8 +45,6 @@ function edit() {
}
function render() {
let colors = params.body.substring(2).split(";");
console.log("params", params, colors)
//parent.postMessage({title:title, favicon:"🍴", image:image, description:description, wakeLock:true, updateURL:true}, "*");
document.body.style.backgroundColor = colors[0];
document.body.style.color = colors[1];
currentColor = colors[0];
@ -58,7 +54,6 @@ function render() {
document.body.appendChild(
el("div", {}, [
el("div#rectangle", window.lumCanvas, window.hueCanvas),
el("div#info",
el("div#title", colors[0]),
el("div#copy", ""),
@ -89,26 +84,19 @@ function update (e){
y = Math.min(Math.max(0, y),e.target.height);
var pixelData = context.getImageData(x, y, 1, 1).data;
currentColor = `rgb(${pixelData[0]},${pixelData[1]},${pixelData[2]})`;
console.log("currentColor", currentColor)
document.body.style.backgroundColor = currentColor;
updateURL();
if (isHue) renderLumCanvas()
console.log(pixelData[0], pixelData[1], pixelData[2]);
// Convert it to HEX if you want using the rgbToHex method.
// var hex = "#" + ("000000" + rgbToHex(pixelData[0], pixelData[1], pixelData[2])).slice(-6);
}
let timeout;
function updateURL() {
clearTimeout(timeout)
let hex = new Color(currentColor).to("srgb").toString({format: "hex"});
document.getElementById("title").innerText = hex.toString().toUpperCase();
timeout = setTimeout(() => {
let hex = new Color(currentColor).to("srgb").toString({format: "hex"});
parent.postMessage({title:hex, updateHash:"#/c:" + hex}, "*");
},100);
}
@ -120,7 +108,7 @@ function renderCanvas() {
function renderHueCanvas() {
let ctx = hueCanvas.getContext("2d");
let w = hueCanvas.width, h = hueCanvas.height;
console.log("hue", hueCanvas)
var hue = ctx.createLinearGradient(0, 0, w, 0);
hue.addColorStop(0.02, "#FAC22B");
hue.addColorStop(0.16, "#099351");