2a:null 2b:["$","title",null,{"children":"Palette Extractor | Stephen Osserman | Observable"}] 30: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(); }) } }); }31:[{"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}] 2e:{"id":"d6512be81e170ece","slug":"palette-extractor","title":"Palette Extractor","thumbnail":"a81515f61d557dcb498557c1f65e9dcaae60b09ebfe33025c0d570de898cc34b","access_level":"public","create_time":"$D2022-05-31T04:58:02.639Z","update_time":"$D2024-01-24T18:27:09.613Z","view_time":null,"first_public_time":"$D2022-12-05T20:50:44.214Z","has_unpublished_edits":null,"fork":false,"stars":5,"starred":false,"owner":{"type":"team","id":"1be7bc7ec19604c8","login":"osserman","name":"Stephen Osserman","avatar_url":"https://avatars-next.observableusercontent.com/be39c326cb74434f06103eaf074df11b322455f92476794003315a927d30208a","tier":"starter_2024"},"version":326,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"d0fe706fc5eb3479","login":"osserman","name":"Stephen Osserman","avatar_url":"https://avatars-next.observableusercontent.com/be39c326cb74434f06103eaf074df11b322455f92476794003315a927d30208a","tier":null}],"members":[{"type":"individual","id":"d0fe706fc5eb3479","login":"osserman","name":"Stephen Osserman","avatar_url":"https://avatars-next.observableusercontent.com/be39c326cb74434f06103eaf074df11b322455f92476794003315a927d30208a","tier":null,"role":"editor"}],"comments":[{"id":"fe75aec7afa53fbb","reply_to_id":null,"content":"Nice! Could be beneficial to save the palette to an external array called \"palette\", make it easier to save out or use elsewhere.","create_time":"$D2022-12-12T20:51:38.306Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"284cdf205719c86e","login":"zachperiscopic","name":"Zach Bogart","avatar_url":"https://avatars-next.observableusercontent.com/6f18b0401ce7dbd258bca1afb27a7a9d850d10197a42ad23e35e242ca095a4e9","tier":null}},{"id":"91147f7bcf730180","reply_to_id":"fe75aec7afa53fbb","content":"Thanks for the suggestion! Just implemented.","create_time":"$D2022-12-13T17:42:28.106Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"d0fe706fc5eb3479","login":"osserman","name":"Stephen Osserman","avatar_url":"https://avatars-next.observableusercontent.com/be39c326cb74434f06103eaf074df11b322455f92476794003315a927d30208a","tier":null}},{"id":"47d5d47f7129c120","reply_to_id":"fe75aec7afa53fbb","content":"Excellent!","create_time":"$D2022-12-13T17:45:43.498Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"284cdf205719c86e","login":"zachperiscopic","name":"Zach Bogart","avatar_url":"https://avatars-next.observableusercontent.com/6f18b0401ce7dbd258bca1afb27a7a9d850d10197a42ad23e35e242ca095a4e9","tier":null}}],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Palette Extractor","cells":[{"id":0,"value":"# Palette Extractor","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":160,"value":"## Build your palette","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":210,"value":"Enter image url or upload a file to get started: ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":6,"value":"viewof image = imageInput({\n crossOrigin: \"anonymous\",\n initialUrl: await FileAttachment(\"tree.jpg\").url(),\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"viewof cRadius = Inputs.range([5,50], {label: 'Inspector Radius', step: 1})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":110,"value":"viewof imgScale = Inputs.range([0.1,1], {label: 'Image Size', step: .01, value:0.5}) ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":227,"value":"Click on the image below to select colors. Click color swatch to inspect or remove. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":294,"value":"palette = paletteView","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":166,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":287,"value":"viewof paletteView = Inputs.input([])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":21,"value":"d3 = require('d3@7')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"import {imageInput} from \"@mbostock/file-input\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W31","stdlib":"1"}} 2f:"$2e:body"