29:null 2a:["$","title",null,{"children":"selectFlatImages: native input | Pierre Ripoll | Observable"}] 2f:T8a9,mobileAndTabletCheck = function() { let check = false; (function(a) { if ( /(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino|android|ipad|playbook|silk/i.test( a ) || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test( a.substr(0, 4) ) ) check = true; })(navigator.userAgent || navigator.vendor || window.opera); return check; }30:Tebf,// adapted from "@jashkenas/inputs" and "@fil/selectFlat" function selectFlatImages(config = {}) { let { value: formValue, title, description, submit, multiple, size, init, hover = true, getValue = o => o, concatHighlight = false, selectWidth = `${width}px`, selectHeight, imageWidth, imageHeight, margin, output, options } = Array.isArray(config) ? { options: config } : config; options = options.map(o => typeof o === "object" ? o : { value: o, label: o } ); if (!imageHeight & !imageWidth) { imageHeight = 30; imageWidth = 30; } imageHeight = imageHeight || imageWidth; // if one dimension is missing canvas is a square imageWidth = imageWidth || imageHeight; var currentValue = null; const id = DOM.uid().id; const canvas = DOM.canvas(imageWidth, imageHeight); const ctx = canvas.getContext('2d'); var oninput = () => {}; const form = input({ type: "select", title, description: `${ description ? (output ? `${description}: ` : description) : "" }`, submit, getValue: input => { const selected = Array.prototype.filter .call(input.options, i => i.selected) .map(i => i.value); if (multiple) return getValue( currentValue !== null ? concatHighlight ? [...new Set(selected.concat([currentValue]))] : [currentValue] : selected ); else return getValue(currentValue !== null ? currentValue : selected[0]); }, form: html`

${selectFlatStyle( id, output, selectWidth, selectHeight, imageWidth, imageHeight, margin )}

` }); form.output.style = ""; d3.select(form) .select("span") .node() .appendChild(form.output); const s = form.getElementsByTagName("select")[0]; const scrollDiv = html`

`; wrap(s, scrollDiv); s.size = 2; d3.select(s) .on("mouseleave", function() { currentValue = null; if (hover) form.dispatchEvent(new CustomEvent("input", { detail: 'hover' })); }) .selectAll("option") .on("mouseenter", function() { d3.select(this).classed("hovered", true); if (hover) { currentValue = this.disabled ? null : this.value; form.dispatchEvent(new CustomEvent("input", { detail: 'hover' })); } }) .on("mouseleave", function() { d3.select(this).classed("hovered", false); }); Object.defineProperty(form, 'selection', { set(val) { currentValue = null; for (let opt of form.input.options) opt.selected = val === opt.value || val.includes(opt.value); form.dispatchEvent(new CustomEvent("input", { detail: 'setter' })); } }); return form; }31:T4ec,function selectFlatStyle( id, show_ouput = false, selectWidth, selectHeight, imageWidth, imageHeight, margin = 1 ) { if (!selectHeight) selectHeight = `${imageHeight}px`; else if (typeof selectHeight === 'number') selectHeight = `${selectHeight}px`; if (typeof selectWidth === 'number') selectWidth = `${selectWidth}px`; return html` `; }32:T54b,/** * By Ken Fyrstenberg Nilsen * * drawImageProp(context, image [, x, y, width, height [,offsetX, offsetY]]) * * If image and context are only arguments rectangle will equal canvas */ function drawImageProp(ctx, img, x, y, w, h, offsetX, offsetY) { if (arguments.length === 2) { x = y = 0; w = ctx.canvas.width; h = ctx.canvas.height; } // default offset is center offsetX = typeof offsetX === "number" ? offsetX : 0.5; offsetY = typeof offsetY === "number" ? offsetY : 0.5; // keep bounds [0.0, 1.0] if (offsetX < 0) offsetX = 0; if (offsetY < 0) offsetY = 0; if (offsetX > 1) offsetX = 1; if (offsetY > 1) offsetY = 1; var iw = img.width, ih = img.height, r = Math.min(w / iw, h / ih), nw = iw * r, // new prop. width nh = ih * r, // new prop. height cx, cy, cw, ch, ar = 1; // decide which gap to fill if (nw < w) ar = w / nw; if (Math.abs(ar - 1) < 1e-14 && nh < h) ar = h / nh; // updated nw *= ar; nh *= ar; // calc source rectangle cw = iw / (nw / w); ch = ih / (nh / h); cx = (iw - cw) * offsetX; cy = (ih - ch) * offsetY; // make sure source rectangle is valid if (cx < 0) cx = 0; if (cy < 0) cy = 0; if (cw > iw) cw = iw; if (ch > ih) ch = ih; // fill image in dest. rectangle ctx.drawImage(img, cx, cy, cw, ch, x, y, w, h); }33:[{"id":"2c545355f410fb62bbfdb410175842b0a3ac93bebcd900e7852a83011e35b501ecb9347a7fb97316c898747c23ddbb627c8303f2cb032038b597e46c4aca23d0","href":"https://static.observableusercontent.com/files/2c545355f410fb62bbfdb410175842b0a3ac93bebcd900e7852a83011e35b501ecb9347a7fb97316c898747c23ddbb627c8303f2cb032038b597e46c4aca23d0","name":"gun.png","type":"image/png","lastModified":1600258490732.778,"size":1012850},{"id":"76ace95897bcc970bedb45fa63dc1c73349459e22b999c09a1f6f075f967d489415e0a4a3011c29c4b8ce2e54afc8bd846db5285d752998ee102613ad7f83454","href":"https://static.observableusercontent.com/files/76ace95897bcc970bedb45fa63dc1c73349459e22b999c09a1f6f075f967d489415e0a4a3011c29c4b8ce2e54afc8bd846db5285d752998ee102613ad7f83454","name":"gun.jpg","type":"image/jpeg","lastModified":1600260793646.867,"size":181026},{"id":"ebd501736a9aa9539e98d7a60974e6bcdea39290a15ff01a5f057d82302f6ba1eeeb1ced98777c27923482aee0b1c7149e46eba7256e011cfb232c1b8b248ef9","href":"https://static.observableusercontent.com/files/ebd501736a9aa9539e98d7a60974e6bcdea39290a15ff01a5f057d82302f6ba1eeeb1ced98777c27923482aee0b1c7149e46eba7256e011cfb232c1b8b248ef9","name":"simon_roussin_singer.jpeg","type":"image/jpeg","lastModified":1600179343496.034,"size":20224},{"id":"5ad88b4e9497a6dc75cc74f5590ae439dcfd681e26ab8adf16e83b40c24e68ce671413308df54483b59a7d00f441758dde2bc085dc1da21d4334d4bc50d0d36b","href":"https://static.observableusercontent.com/files/5ad88b4e9497a6dc75cc74f5590ae439dcfd681e26ab8adf16e83b40c24e68ce671413308df54483b59a7d00f441758dde2bc085dc1da21d4334d4bc50d0d36b","name":"roussin_kayak.jpeg","type":"image/jpeg","lastModified":1600179340954.039,"size":11925},{"id":"759f3fe91b987905c9a840efd0a2c64e47f40a34f1b6c9b42cf04c4c0ac04320e3298880ec3784ea7303d308acfd766a822310e09855a973653defc202f13598","href":"https://static.observableusercontent.com/files/759f3fe91b987905c9a840efd0a2c64e47f40a34f1b6c9b42cf04c4c0ac04320e3298880ec3784ea7303d308acfd766a822310e09855a973653defc202f13598","name":"swimmer.jpg","type":"image/jpeg","lastModified":1600259738421.921,"size":148762},{"id":"5f87a2b9dc8b659e64ebd597ec268f7c3de2b6577ba4165f7799628f52c78750db1f68c450c80256e0e7f1cfcbe17fa1b4190b7f62f297a32e0e8a5e47781041","href":"https://static.observableusercontent.com/files/5f87a2b9dc8b659e64ebd597ec268f7c3de2b6577ba4165f7799628f52c78750db1f68c450c80256e0e7f1cfcbe17fa1b4190b7f62f297a32e0e8a5e47781041","name":"horse.jpg","type":"image/jpeg","lastModified":1600258490046.563,"size":441748},{"id":"d7e9c8c2fd8713e949afb8689ebc4e3f2d0890407873f07340eea760f0ff06c638fb271612ee726d81fe6bde39c2a1c080b8df8ee06e2895f063f8b1f13007e8","href":"https://static.observableusercontent.com/files/d7e9c8c2fd8713e949afb8689ebc4e3f2d0890407873f07340eea760f0ff06c638fb271612ee726d81fe6bde39c2a1c080b8df8ee06e2895f063f8b1f13007e8","name":"dead_tree.jpg","type":"image/jpeg","lastModified":1600258490158.343,"size":473735},{"id":"e70ef267504031a4c9599a060636baa596db7cde4e79b443a9a4d1e4fe41e8953bb497c2ed88ea73d317f0c31b32a493d31cc2ff4c6558fbcb7fd526f8bf744c","href":"https://static.observableusercontent.com/files/e70ef267504031a4c9599a060636baa596db7cde4e79b443a9a4d1e4fe41e8953bb497c2ed88ea73d317f0c31b32a493d31cc2ff4c6558fbcb7fd526f8bf744c","name":"driver_face.jpg","type":"image/jpeg","lastModified":1600258490029.605,"size":397918},{"id":"0c0259e7a8933e3b8bab42b2f0bd9829fb2955bccf46581df7cfae31fdb6ca908a960465b4f00bf39a5e83bc736f73f1254279b5b9ad432f193600c79cfce602","href":"https://static.observableusercontent.com/files/0c0259e7a8933e3b8bab42b2f0bd9829fb2955bccf46581df7cfae31fdb6ca908a960465b4f00bf39a5e83bc736f73f1254279b5b9ad432f193600c79cfce602","name":"red_shirt.jpg","type":"image/jpeg","lastModified":1600260786159.343,"size":184755},{"id":"356fde3d358ade220f3ee04b973c1c7ce75300dddaf86dba191e575a588daf36f17064da808fae3dac5aedf03985810e710c96cbd52b26f8fd1d9d014c5b88bb","href":"https://static.observableusercontent.com/files/356fde3d358ade220f3ee04b973c1c7ce75300dddaf86dba191e575a588daf36f17064da808fae3dac5aedf03985810e710c96cbd52b26f8fd1d9d014c5b88bb","name":"driver_glasses.jpg","type":"image/jpeg","lastModified":1600260773598.917,"size":203896},{"id":"6dc4a2f04c7fa5b160bd7169da62d265d1935869de939420999b6944ff9811602301ddb16a5851cffaf061b1619d9c54b48d2db9e58242b7d16f3adb25679567","href":"https://static.observableusercontent.com/files/6dc4a2f04c7fa5b160bd7169da62d265d1935869de939420999b6944ff9811602301ddb16a5851cffaf061b1619d9c54b48d2db9e58242b7d16f3adb25679567","name":"photo_pilot.jpg","type":"image/jpeg","lastModified":1600260307831.41,"size":155007},{"id":"9b6424b9d68f85496d60b3644ee11e7d9e5fde559e8a704c53740e812e182637e3781c65312c8531a67d128efbc089b5d7f3acc3f230a1889ef3850abc827eb4","href":"https://static.observableusercontent.com/files/9b6424b9d68f85496d60b3644ee11e7d9e5fde559e8a704c53740e812e182637e3781c65312c8531a67d128efbc089b5d7f3acc3f230a1889ef3850abc827eb4","name":"dying_cowboy.jpg","type":"image/jpeg","lastModified":1600260307873.29,"size":138180},{"id":"d19b618570e8bbb7fa1bbac2f8cfe52deba504614840a17dfbb8382a1489fd90406f36f49eb8dbc1e128ca665666c46917769715cd85947dc31c5e8b66df6e92","href":"https://static.observableusercontent.com/files/d19b618570e8bbb7fa1bbac2f8cfe52deba504614840a17dfbb8382a1489fd90406f36f49eb8dbc1e128ca665666c46917769715cd85947dc31c5e8b66df6e92","name":"woman_dark.jpg","type":"image/jpeg","lastModified":1600259747527.966,"size":140763},{"id":"d3fb51dfb05998c9ad227572527c112ee32923966ed1ed1193bbce757653b6d09e289704b37e691e5c955116b04f9e544c657551991068c8ced141d47f8edb10","href":"https://static.observableusercontent.com/files/d3fb51dfb05998c9ad227572527c112ee32923966ed1ed1193bbce757653b6d09e289704b37e691e5c955116b04f9e544c657551991068c8ced141d47f8edb10","name":"red_shirt.png","type":"image/png","lastModified":1600258490737.551,"size":1026137},{"id":"b0ffb310f9ccba0ada251a16f17a7fd1ade9f2d16147266f8f579099b5819adfc8b7fa97c0d9e6f583e287c3616721fda8a038f1ee2535801ae7fb40aa98e142","href":"https://static.observableusercontent.com/files/b0ffb310f9ccba0ada251a16f17a7fd1ade9f2d16147266f8f579099b5819adfc8b7fa97c0d9e6f583e287c3616721fda8a038f1ee2535801ae7fb40aa98e142","name":"back_night.jpg","type":"image/jpeg","lastModified":1600260804774.313,"size":153875},{"id":"672214162feff4e6a752b237660eb497c503cf353e338ee598ddb48368c0e8e8192d9305bccf4c6b4ebf5a287c4fa49572cf2e8c35873b386a258d4ecf0801aa","href":"https://static.observableusercontent.com/files/672214162feff4e6a752b237660eb497c503cf353e338ee598ddb48368c0e8e8192d9305bccf4c6b4ebf5a287c4fa49572cf2e8c35873b386a258d4ecf0801aa","name":"driver_glasses.png","type":"image/png","lastModified":1600258490770.632,"size":1087073},{"id":"2481ed64906f0c75bdb0246a4871ec1324a8e16a9af272da1df98d563894db6f80ea563c6e36098f42fb05e93c0fd647583641e49b326152733b888a84f2729d","href":"https://static.observableusercontent.com/files/2481ed64906f0c75bdb0246a4871ec1324a8e16a9af272da1df98d563894db6f80ea563c6e36098f42fb05e93c0fd647583641e49b326152733b888a84f2729d","name":"back_night.png","type":"image/png","lastModified":1600258490666.361,"size":949170},{"id":"23fc08e8113beb98d972bf0ad811233d3eaf3ddf569b626520a024a1038bfc921796b872c0a4961be4e41c785103f58af6121ee2de8d467ee21b2f257fad5448","href":"https://static.observableusercontent.com/files/23fc08e8113beb98d972bf0ad811233d3eaf3ddf569b626520a024a1038bfc921796b872c0a4961be4e41c785103f58af6121ee2de8d467ee21b2f257fad5448","name":"simon_roussin_4.jpg","type":"image/jpeg","lastModified":1600175371879.354,"size":219267}] 2d:{"id":"145efa4f0d37107f","slug":"selectflatimages","title":"selectFlatImages: native input","thumbnail":"78aac8cac58befe175c096537e50994bed263d5801ac31f1fc67569c224b5e00","access_level":"public","create_time":"$D2020-09-13T11:23:11.098Z","update_time":"$D2024-08-13T13:22:52.706Z","view_time":null,"first_public_time":"$D2020-09-28T17:41:38.916Z","has_unpublished_edits":null,"fork":{"id":"4989633f4cfb3056","slug":"selectflat","title":"selectFlat input","owner":{"id":"da2a32154638c457","login":"fil","name":"Fil"}},"stars":6,"starred":false,"owner":{"type":"team","id":"4b6918df760e73ca","login":"pierreleripoll","name":"Pierre Ripoll","avatar_url":"https://avatars-next.observableusercontent.com/a228ad56cf675f22f000d821fcc5eff96cb60bbff4135f603575a1ceaad2712a","tier":"starter_2024"},"version":1955,"publish_version":1955,"role":null,"authored":false,"authors":[{"type":"individual","id":"5aed0c8feb597b86","login":"pierreleripoll","name":"Pierre Ripoll","avatar_url":"https://avatars-next.observableusercontent.com/a228ad56cf675f22f000d821fcc5eff96cb60bbff4135f603575a1ceaad2712a","tier":null}],"members":[{"type":"individual","id":"5aed0c8feb597b86","login":"pierreleripoll","name":"Pierre Ripoll","avatar_url":"https://avatars-next.observableusercontent.com/a228ad56cf675f22f000d821fcc5eff96cb60bbff4135f603575a1ceaad2712a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":7,"collection":null,"type":"notebook","body":{"title":"selectFlatImages: native input","cells":[{"id":0,"value":"md`# selectFlatImages: native input\n\nA fast selector to explore a gallery of images. The value changes on mouseover, and sticks when you click. It should behave as the native <*select*> input, including Shift+Click, Ctrl+Click and dragged selection. Original code from [Philippe Rivière](https://observablehq.com/@fil/selectflat).\n\nImages are from [Simon Roussin](http://simonroussin.blogspot.com/), all rights reserved.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"viewof values = selectFlatImages({\n options: [\n { value: 'boat', image: boat },\n { value: 'kayak', image: kayak },\n {\n value: 'singer',\n image: await FileAttachment('simon_roussin_singer.jpeg').image()\n }\n ],\n imageWidth: 180,\n imageHeight: 100,\n output: true,\n multiple: true\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":297,"value":"md`Usage:\n~~~{js}\nimport {selectFlatImages} from \"@pierreleripoll/selectflatimages\"\nviewof value = selectFlatImages({options})\n~~~\n\nThe options are those of a normal *select* input, with the addition of:\n- *output* (bool) to show or hide the value next to the description;\n- *imageWidth* & *imageHeight* (number) to set the size of images (smaller images improves performance)\n- *selectWidth* & *selectHeight* (string css value or number of pixels) specifying the dimensions of the input\n- *concatHighlight* (boolean), false by default, if set to true when hover input will return the selected values and the highlited one in an array\n- *hover* (boolean) *true* by default, if false hover an image will no longer generate an input event\n- *options* takes objects with {value, label, disabled} but also an image : can be either a string URL, an object to draw witch the *ctx.drawImage(object)* method, or a function (ctx) => {}\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":264,"value":"md`Can be useful when you want to quickly select an image, or a collection of images. Here's an example with output, concatHighlight, a disabled value and a scrollbar:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1124,"value":"viewof gallery = selectFlatImages({\n options: [\n { value: 'red_shirt', image: red_shirt },\n { value: 'swimmer', image: swimmer },\n { value: 'driver_glasses', image: driver_glasses },\n { value: 'woman_dark', image: woman_dark },\n { value: 'back_night', image: back_night },\n { value: 'horse', image: horse },\n { value: 'dead_tree', image: dead_tree, disabled: true },\n { value: 'driver_face', image: driver_face },\n { value: 'dying_cowboy', image: dying_cowboy },\n { value: 'photo_pilot', image: photo_pilot },\n { value: 'gun', image: gun }\n ],\n value: ['red_shirt', 'gun'],\n imageHeight: 300,\n imageWidth: 150,\n concatHighlight: true,\n output: true,\n multiple: true,\n description: \"Selected values\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1242,"value":"gallery","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1254,"value":"md`This solution is useful when working with a list of icons, for example using [@severo/preload](https://observablehq.com/@severo/preload-a-list-of-images):`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1267,"value":"viewof idx = selectFlatImages({\n options: urls.map((url, i) => ({ value: url, image: url })),\n value: urls[0],\n output: true,\n description: \"your choice\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1272,"value":"images.get(idx)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1274,"value":"images = await preload(urls)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1837,"value":"md`And finally why not use it to create a interpolator selector ?`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1871,"value":"viewof colorScale = selectFlatImages({\n options: interpolators.map((name, i) => ({\n value: name,\n image: ramp(d3[name])\n })),\n value: interpolators[0],\n imageHeight: 80,\n imageWidth: width / interpolators.length - 2,\n output: true,\n description: \"your choice\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1559,"value":"md`## TODO\n\n- on mobile/tablet the select becomes a dropdown element, if someone has any idea how to prevent that from happening please let me know !\n- background-image does not implement alt attribute, if image can't load no alternative text will show up, suggestion welcome to improve this behavior\n\n_suggestions welcome_\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":226,"value":"md`---\n\n### Credits\n\n_Developed for the [LIRIS M2i project](https://projet.liris.cnrs.fr/mi2/) by Pierre Ripoll with help, code and suggestions from Sylvain Lesage and Philippe Rivière._\n\n---\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1824,"value":"md`Mobile devices and tablets won't show the select properly, it's then pretty usefull to set the values as labels to make the select input usable.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1813,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1819,"value":"isMobileDevice = mobileAndTabletCheck()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1888,"value":"interpolators = Object.keys(d3).filter(s => s.includes('interpolate'))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1840,"value":"// ramp function is directly adapted from @mbostock/color-ramp\nfunction ramp(color, n = 50) {\n const w = 80,\n h = 120;\n const canvas = DOM.canvas(w, h);\n const context = canvas.getContext(\"2d\");\n // canvas.style.imageRendering = \"-moz-crisp-edges\";\n // canvas.style.imageRendering = \"pixelated\";\n for (let i = 0; i < n; ++i) {\n context.fillStyle = color(i / (n - 1));\n context.fillRect(0, (i * h) / n, w, 1 + h / n);\n }\n return canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1101,"value":"md`## Images from [Simon Roussin](http://simonroussin.blogspot.com/), all rights reserved`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":886,"value":"boat = await FileAttachment(\"simon_roussin_4.jpg\").url()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":504,"value":"singer = await FileAttachment(\"simon_roussin_singer.jpeg\").url()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1084,"value":"driver_glasses = await FileAttachment(\"driver_glasses.jpg\").url()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1087,"value":"driver_face = await FileAttachment(\"driver_face.jpg\").url()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1092,"value":"red_shirt = await FileAttachment(\"red_shirt.jpg\").url()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1095,"value":"gun = await FileAttachment(\"gun.jpg\").url()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1098,"value":"back_night = await FileAttachment(\"back_night.jpg\").url()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":500,"value":"kayak = await FileAttachment(\"roussin_kayak.jpeg\").url()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1112,"value":"horse = await FileAttachment(\"horse.jpg\").url()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1115,"value":"dead_tree = await FileAttachment(\"dead_tree.jpg\").url()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1171,"value":"woman_dark = await FileAttachment(\"woman_dark.jpg\").url()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1175,"value":"swimmer = await FileAttachment(\"swimmer.jpg\").url()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1197,"value":"photo_pilot = await FileAttachment(\"photo_pilot.jpg\").url()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1200,"value":"dying_cowboy = await FileAttachment(\"dying_cowboy.jpg\").url()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1107,"value":"md`## Code`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":573,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1261,"value":"import { preload, urls } from '@severo/preload-a-list-of-images'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1651,"value":"import { input } from '@jashkenas/inputs'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1221,"value":"function wrap(el, wrapper) {\n el.parentNode.insertBefore(wrapper, el);\n wrapper.appendChild(el);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1021,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":696,"value":"createUrl = (img, ctx, width, height) => {\n var url = \"\";\n if (img === null || img === undefined) return img;\n if (typeof img === \"string\") url = img;\n else if (img instanceof HTMLImageElement) url = img.src;\n else if (img instanceof HTMLCanvasElement) url = img.toDataURL();\n else {\n if (typeof img === \"function\") img(ctx, width, height);\n else drawImageProp(ctx, img, 0, 0, width, height);\n url = ctx.canvas.toDataURL();\n }\n return url;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":122,"value":"d3 = require(\"d3-selection@1\", \"d3-scale-chromatic@1\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 2e:"$2d:body"