Update color renderer

docs/render/color.css

@@ -8,11 +8,104 @@ body {
   justify-content: center;
   align-items: center;
   font-size:10vmin;
-  margin:0
+  margin:0;
+  color:white;
 }
 
-canvas {
+/* canvas# {
   border:2px solid black;
   box-shadow: 2px 2px 0 black;
-  border-radius:4px
+  border-radius:4px;
+} */
+
+
+canvas {
+  background-color: red;;
 }
+
+body:not(.edit) #lumCanvas {
+  opacity:0.0;
+}
+
+
+#hueCanvas {
+  /* border-radius: 8px; */
+  border-top: 16px solid currentColor;
+}
+body:not(.edit) #hue {
+  height:0;
+}
+
+
+#info {
+  display:
+  flex;
+  justify-content: space-between;
+  align-items: center;
+  margin: 8px 0;
+}
+
+div#rectangle {
+    width: 256px;
+    height: 256px;
+    border: 16px solid currentColor;
+    overflow:
+    hidden;
+    display: flex;
+    flex-direction: column;
+    transition: height 218ms;
+}
+
+.edit div#rectangle {
+  height: 288px;
+}
+#hue {
+  height:48px;
+  overflow:
+  hidden;
+  background-color: yellow;
+  transition:
+  height 1s;
+  border:16px solid green;
+  /* border-top:
+  none; */
+  /* box-sizing:
+  border-box; */
+  /* width:256px; */
+}
+
+div#title {
+    font-size: 32px;
+    flex-grow:1;
+    /* color: white; */
+}
+
+#copy, #edit {
+  font-size:12px;
+  font-weight:bold;
+  text-transform: uppercase;
+  margin-left:1em;
+  cursor:default;
+}
+
+#edit:before {
+  content:"edit"
+}
+.edit #edit:before {
+  content:"done"
+}
+
+.edit #lumCanvas {
+  opacity:1.0;
+  transition: opacity 1s ease-out;
+
+  pointer-events: all;
+}
+canvas#lumCanvas {
+    /* border-bottom: 16px solid white; */
+    transition: opacity 200ms linear;
+    pointer-events: none;
+    opacity:0.0;
+    /* box-shadow: inset 0 0 10px  1px black; */
+    /* border: 1px solid rgba(0,0,0,0.1); */
+}

docs/render/color.js

@@ -1,6 +1,7 @@
 let script = document.currentScript?.src || import.meta?.url;
 
- import Color from "https://colorjs.io/dist/color.js";
+// 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)
 
@@ -41,100 +42,128 @@ let currentColor;
       y: (event.pageY - pos.y)
   };
 }
-
+function edit() {
+  document.body.classList.toggle("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}, "*");
+  //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];
-  window.canvas = el("canvas", {width:320, height:320});
+  window.lumCanvas = el("canvas#lumCanvas", {width:256, height:256});
+  window.hueCanvas = el("canvas#hueCanvas", {width:256, height:16});
+
   document.body.appendChild(
     el("div", {}, [ 
-        // el("div", {innerHTML: colors.join("<br>")}),
-        window.canvas
+        el("div#rectangle", window.lumCanvas, window.hueCanvas),
+        
+        el("div#info",
+          el("div#title", colors[0]),
+          el("div#copy", ""),
+          el("div#edit",{onclick: edit}, "")
+        )
       ]
     )
   )
-  window.canvas.addEventListener("pointerdown",update);
-  window.canvas.addEventListener("pointermove",update);
+  window.hueCanvas.addEventListener("pointerdown",update);
+  window.hueCanvas.addEventListener("pointermove",update);
+  window.lumCanvas.addEventListener("pointerdown",update);
+  window.lumCanvas.addEventListener("pointermove",update);
   renderCanvas()
+  updateURL()
 }
 
 function update (e){
   if (!e.buttons) return;
- // Get the coordinates of the click
- var eventLocation = getEventLocation(this,event);
- // Get the data of the pixel according to the location generate by the getEventLocation function
- var context = this.getContext('2d');
- var pixelData = context.getImageData(eventLocation.x, eventLocation.y, 1, 1).data; 
 
- // If transparency on the pixel , array = [0,0,0,0]
- if((pixelData[0] == 0) && (pixelData[1] == 0) && (pixelData[2] == 0) && (pixelData[3] == 0)){
-     // Do something if the pixel is transparent
- }
- currentColor = `rgb(${pixelData[0]},${pixelData[1]},${pixelData[2]}})`;
+  let isHue = e.target === window.hueCanvas;
+  
+  var eventLocation = getEventLocation(this,event);
+  var context = e.target.getContext('2d');
+  let x = eventLocation.x;
+  let y = isHue ? 0 : eventLocation.y;
 
- updateURL();
- renderCanvas()
+  x = Math.min(Math.max(0, x),e.target.width);
+  y = Math.min(Math.max(0, y),e.target.height);
 
- 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);
+  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)
   timeout = setTimeout(() => {
-    parent.postMessage({updateHash:"#/c:" + new Color(currentColor).to("srgb").toString({format: "hex"})}, "*");
+    let hex = new Color(currentColor).to("srgb").toString({format: "hex"});
+    parent.postMessage({title:hex, updateHash:"#/c:" + hex}, "*");
   },100);
 }
 
 function renderCanvas() {
-  let ctx = canvas.getContext("2d");
-  let w = canvas.width, h = canvas.height;
-
-  var luminance = ctx.createLinearGradient(0, 0, w, 0);
-  luminance.addColorStop(0, "white");
-  luminance.addColorStop(1, "black");
-  ctx.fillStyle = luminance;
-  ctx.fillRect(0, h/4, canvas.width, h * 3/4);
-
-
+  renderHueCanvas();
+  renderLumCanvas();
+}
+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.0,    "#FAC22B");
-  hue.addColorStop(0.1448, "#0E8E51");
-  hue.addColorStop(0.349,  "#0E638E");
-  hue.addColorStop(0.503,  "#67378D");
-  hue.addColorStop(0.7423, "#D42A20");
-  hue.addColorStop(0.8907, "#E77625");
-  hue.addColorStop(1.0,    "#FAC22B");
+  hue.addColorStop(0.02, "#FAC22B");
+  hue.addColorStop(0.16, "#099351");
+  hue.addColorStop(0.28, "#008884");
+  hue.addColorStop(0.41, "#0E638E");
+  hue.addColorStop(0.52, "#2E36A9");
+  hue.addColorStop(0.64, "#6C18AE");
+  hue.addColorStop(0.74, "#AE1872");
+  hue.addColorStop(0.82, "#D42A20");
+  hue.addColorStop(0.91, "#E96523");
+  hue.addColorStop(1.00, "#FAC22B");
+
   ctx.fillStyle = hue;
-  ctx.fillRect(0, 0, w, h/4);
+  ctx.fillRect(0, 0, w, h);
+}
+
+function renderLumCanvas() {
+  let ctx = lumCanvas.getContext("2d");
+  let w = lumCanvas.width, h = lumCanvas.height;
 
   let color = new Color(currentColor);
-  document.body.style.backgroundColor = color;
 
 
   color.hsl.s = 100;
 
-  var chroma =  ctx.createLinearGradient(0, h, 0, h/4); // ctx.createRadialGradient(w/2, h/4, h/8, w/2, h/4, w/2);
+
+  var chroma =  ctx.createLinearGradient(0, 0, w, 0); // ctx.createRadialGradient(w/2, h/4, h/8, w/2, h/4, w/2);
   chroma.addColorStop(0, color);
-  color.alpha = 0.0;
-
-  chroma.addColorStop(1, color);
-
+  chroma.addColorStop(1, "white");
   ctx.fillStyle = chroma;
-  ctx.fillRect(0, h/4, canvas.width, h * 3/4);
-}
+  ctx.fillRect(0, 0, w, h);
 
+  var luminance = ctx.createLinearGradient(0, 0, 0, h);
+  luminance.addColorStop(0, "transparent");
+  luminance.addColorStop(1, "black");
+  ctx.fillStyle = luminance;
+  ctx.fillRect(0, 0, lumCanvas.width, h );
+}
 
 var path = script.substring(0, script.lastIndexOf("."));
 var cssURL = path + ".css";
 Promise.all([ 
-  loadSyle("https://fonts.googleapis.com/icon?family=Material+Icons+Outlined"),
+  // loadSyle("https://fonts.googleapis.com/icon?family=Material+Icons+Outlined"),
   loadSyle(cssURL)
 ]).then(render);
 

docs/render/recipe.js

@@ -304,7 +304,7 @@ function render() {
         m("header",
           m("a", {href:originalURL, target:"_blank"},
             m("img.publisher", { src: json.publisher?.image ?.[0]?.url ?? json.publisher ?.logo ?.url }),
-          ), 
+          ),
           m("h1", title),
           m(".metadata",
             (yield) ? m("div", m("span.yield", m(".icon.material-icons-outlined", "restaurant"), yield)) : null,
@@ -349,9 +349,6 @@ function render() {
       )
     )
   )
-
-
-
 }
 
 var path = script.src.substring(0, script.src.lastIndexOf("."));

netlify.toml

@@ -10,4 +10,9 @@
 [[headers]]
   for = "/render/*"
   [headers.values]
+  Access-Control-Allow-Origin = "*"
+
+[[headers]]
+  for = "/js/*"
+  [headers.values]
   Access-Control-Allow-Origin = "*"