31:Tcdd,colors = { const container = d3.create('div') let selectedColors = []; const colorList = container.append('div').text('Selected colors:') const removeAllBtn = container.append('button').style('visibility','hidden') .on('click', () => {selectedColors = []; updateSelectedColors()}) const selectedColorsDiv = container.append('div').attr('id', 'selected-colors') function updateSelectedColors() { set(viewof paletteView, selectedColors) removeAllBtn .style('visibility',selectedColors.length > 0 ? 'visible': 'hidden') .text(selectedColors.length > 1 ? 'remove all selected colors' : 'remove selected color') colorList.html('Selected colors: ' + selectedColors.join(', ')) selectedColorsDiv.selectAll('div').remove() // otherwise getting extra remove buttons. const colorSwatches = selectedColorsDiv.selectAll('div').data(selectedColors).join('div') .style('background-color',d=> d) .classed('hide-buttons',true) colorSwatches .on('click', function(e, d){ console.log(e,d) const buttonHidden = d3.select(this).node().classList.contains('hide-buttons') colorSwatches.classed('hide-buttons',true) colorList.html('Selected colors: ' + selectedColors.map(c => c==d? '' + c + '' : c).join(', ')) if(buttonHidden){ d3.select(this).classed('hide-buttons',false)} }) colorSwatches.append('button').text('remove') .on('click', function(e,d){ selectedColors.splice(selectedColors.indexOf(d), 1); updateSelectedColors(); }) } const imageWrapper = container.append('div').attr('class','image-wrapper') return Object.assign(container.node(), { update(inspectorRadius, imgScale) { d3.select('.image-wrapper').select('canvas').remove() d3.select('.image-wrapper').select('svg').remove() const imageCanvas = imageWrapper.append("canvas") .style('position', 'absolute') .attr("width", width * imgScale) .attr("height", image.height * (width / image.width) * imgScale) const context = imageCanvas.node().getContext("2d"); context.drawImage(image, 0, 0, width * imgScale,image.height * (width / image.width) * imgScale ); const svg = imageWrapper.append('svg') .style('position', 'absolute').style('max-width','100%') .attr('height', context.canvas.height) .attr('width', context.canvas.width) .style('pointer-events', 'none') const colorCircle = svg.append('circle') .attr('r', inspectorRadius) .attr('fill',initialColor(context)).attr('stroke','white') let inspectorCircle = function(e){ const pixData = context.getImageData(e.offsetX, e.offsetY, 1, 1).data const direction = (width * imgScale - e.offsetX) < (2*inspectorRadius + 10) ? -1 : 1; colorCircle .attr('fill', getColor(context, e)) .attr('cx', e.offsetX + direction * (inspectorRadius + 10)) .attr('cy', e.offsetY) }; imageCanvas .on('mousemove', (e) => inspectorCircle(e)) .on('click', (e) => { selectedColors.push(getColor(context, e)) updateSelectedColors(); }) } }); }32:[{"id":"6c49424f88e7f736f0c1164edac914018502b3f809838ffa6912379637e23f56feb22cdf528cee26734917ca8647f1eda5fb999a38fe14009bb83c299cf3b148","href":"https://static.observableusercontent.com/files/6c49424f88e7f736f0c1164edac914018502b3f809838ffa6912379637e23f56feb22cdf528cee26734917ca8647f1eda5fb999a38fe14009bb83c299cf3b148","name":"tree.jpg","type":"image/jpeg","lastModified":1654143355143.088,"size":188865},{"id":"2ff5349c3892efe79dffeda2a6dafa01a6e96b748780053856d9fe86a7264c4d0c5fa55ed74a42ffa4b3b044002514336036dc2752c4cf8f47d641e0ce664286","href":"https://static.observableusercontent.com/files/2ff5349c3892efe79dffeda2a6dafa01a6e96b748780053856d9fe86a7264c4d0c5fa55ed74a42ffa4b3b044002514336036dc2752c4cf8f47d641e0ce664286","name":"PaletteExtractor.png","type":"image/png","lastModified":1654149377276.88,"size":1933651}] 2f:{"title":"Palette Extractor","cells":[{"id":0,"value":"# Palette Extractor","pinned":false,"hidden":false,"mode":"md"},{"id":153,"value":"

An experiment in manual construction of color palettes from images.

Upload a file below. Then move your mouse around the uploaded image to find colors you want, click to add. Click on a color swatch to remove it.

","pinned":false,"hidden":false,"mode":"html"},{"id":160,"value":"## Build your palette","pinned":false,"hidden":false,"mode":"md"},{"id":210,"value":"Enter image url or upload a file to get started: ","pinned":false,"hidden":false,"mode":"md"},{"id":6,"value":"viewof image = imageInput({\n crossOrigin: \"anonymous\",\n initialUrl: await FileAttachment(\"tree.jpg\").url(),\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":95,"value":"viewof cRadius = Inputs.range([5,50], {label: 'Inspector Radius', step: 1})","pinned":false,"hidden":false,"mode":"ojs"},{"id":110,"value":"viewof imgScale = Inputs.range([0.1,1], {label: 'Image Size', step: .01, value:0.5}) ","pinned":false,"hidden":false,"mode":"ojs"},{"id":227,"value":"Click on the image below to select colors. Click color swatch to inspect or remove. ","pinned":false,"hidden":false,"mode":"md"},{"id":294,"value":"palette = paletteView","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":166,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":169,"value":"update = colors.update(cRadius, imgScale) // to update the color selector and image size without resetting the selected colors (when the inspector radius changes or scale changes). Pattern described here: https://observablehq.com/@osserman/update-cells-without-re-rendering","pinned":true,"hidden":false,"mode":"ojs"},{"id":268,"value":"hexFromPixelData = pd => { \n return '#' + Array.from(pd).slice(0,3)\n .map(pd=> ('0' + pd.toString(16)).substr(-2).toUpperCase())\n .join('')\n}\n ","pinned":false,"hidden":false,"mode":"ojs"},{"id":272,"value":"getColor = (ctx, e) => {\n const pixData = ctx.getImageData(e.offsetX, e.offsetY, 1, 1).data\n return hexFromPixelData(pixData)\n }\n ","pinned":false,"hidden":false,"mode":"ojs"},{"id":274,"value":"initialColor = ctx => {\n const pixData = ctx.getImageData(0, 0, 1, 1).data\n return hexFromPixelData(pixData)\n }\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":287,"value":"viewof paletteView = Inputs.input([])","pinned":false,"hidden":false,"mode":"ojs"},{"id":289,"value":"function set(input, value) {\n input.value = value;\n input.dispatchEvent(new Event(\"input\", {bubbles: true}));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":66,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":21,"value":"d3 = require('d3@7')","pinned":true,"hidden":false,"mode":"ojs"},{"id":13,"value":"import {imageInput} from \"@mbostock/file-input\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}