2f:T402,

## [Inputs.radio](https://observablehq.com/@observablehq/input-radio?collection=@observablehq/inputs): Select An Individual Image A local copy of ***images*** is created and a [Map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map) is instantiated with an individual image for a given map entry's key. To allow for re-display, a clone of the image is assigned to the **Map** entry value. The ***Radio's*** selected value (initially the second image) is assigned to the ***value*** property by way of the ***getValue*** function which utilizes the [***values***](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map/values) iterator. The ***format*** property is a function that is passed **Map** entries (***[key,value]***) and returns the image ***keys*** from the **Map** for display. When selected, the viewof for the **Radio** returns the cloned image with its associated ***name***, ***height*** and ***width*** attributes:30:[{"id":"865cd211b28bab207c71c51bbdfdea3b7b02c4be5458fed088d36716d0b9256478fa8dddb46d00d15f08ab41eb96e829b96ded1555a31caeea8a85d8b3f139ce","href":"https://static.observableusercontent.com/files/865cd211b28bab207c71c51bbdfdea3b7b02c4be5458fed088d36716d0b9256478fa8dddb46d00d15f08ab41eb96e829b96ded1555a31caeea8a85d8b3f139ce","name":"Act_1-Scene_2.jpg","type":"image/jpeg","lastModified":1670938202095.596,"size":106178},{"id":"3231107b283d78b4ea4319bf66d87491a79c9a8f34a3bbb88db27f28763ef3db1d7bcfae89ce2bfb34d28785d83cb9465b98a35398a54199b04af322255ecdda","href":"https://static.observableusercontent.com/files/3231107b283d78b4ea4319bf66d87491a79c9a8f34a3bbb88db27f28763ef3db1d7bcfae89ce2bfb34d28785d83cb9465b98a35398a54199b04af322255ecdda","name":"Act_1-Scene_1.jpg","type":"image/jpeg","lastModified":1670938202095.596,"size":134940},{"id":"6ab02369b154504bbc5ce00296f68f551fd53ab4e12978ffc9bed4b5634e4cb433e43091a19022fbd9fd9e113bb33021962c69bdf337efce939decfd6add45d0","href":"https://static.observableusercontent.com/files/6ab02369b154504bbc5ce00296f68f551fd53ab4e12978ffc9bed4b5634e4cb433e43091a19022fbd9fd9e113bb33021962c69bdf337efce939decfd6add45d0","name":"Act_1-Scene_3.jpg","type":"image/jpeg","lastModified":1670938202095.596,"size":95599},{"id":"6ace156d17162777f45eeed63f802895c08c9f81ebd1d2323ef0684fbb46cfee473b927b25b549ba7a7c99f6da9ee987fecf8a20b1794fb22d0f319beeaa1532","href":"https://static.observableusercontent.com/files/6ace156d17162777f45eeed63f802895c08c9f81ebd1d2323ef0684fbb46cfee473b927b25b549ba7a7c99f6da9ee987fecf8a20b1794fb22d0f319beeaa1532","name":"Act_2-Scene_1.jpg","type":"image/jpeg","lastModified":1670938202095.596,"size":144838},{"id":"ff2edecee6898f780b893a721c45a2f389f65f7021fbbc37e54aa58f248af36e19562134b74df4e3a09eb630586e263db8c56595e5f0267eb37ebda5e23959ea","href":"https://static.observableusercontent.com/files/ff2edecee6898f780b893a721c45a2f389f65f7021fbbc37e54aa58f248af36e19562134b74df4e3a09eb630586e263db8c56595e5f0267eb37ebda5e23959ea","name":"Act_2-Scene_3.jpg","type":"image/jpeg","lastModified":1670938202095.596,"size":129132},{"id":"52c868af71d31f9e60d79135191ea02c632c4533c9bb7481c43570dae88ed61336746fe04fa95c3c2d897b1756747e0f0a0fd9342e590eaefb247c3156f94680","href":"https://static.observableusercontent.com/files/52c868af71d31f9e60d79135191ea02c632c4533c9bb7481c43570dae88ed61336746fe04fa95c3c2d897b1756747e0f0a0fd9342e590eaefb247c3156f94680","name":"Act_2-Scene_5.jpg","type":"image/jpeg","lastModified":1670938202095.596,"size":104296},{"id":"0a563ed166f913a11fd6478ab3656c61ba54894bf5fa44c85389df8c28ed83147a993430fa563b7639b68a7979b0f690dd48691a45d9d0528e7ca43652a441c9","href":"https://static.observableusercontent.com/files/0a563ed166f913a11fd6478ab3656c61ba54894bf5fa44c85389df8c28ed83147a993430fa563b7639b68a7979b0f690dd48691a45d9d0528e7ca43652a441c9","name":"Act_2-Scene_6.jpg","type":"image/jpeg","lastModified":1670938202095.596,"size":91036},{"id":"85892e1eecabe0fe23621b5fce3d3f9f414473b11933aceaa3e8190a137506f072088778ceb7336bd4a7314cc8d4c0aeaae60b7898cde1e2f107cdf2c913d9ec","href":"https://static.observableusercontent.com/files/85892e1eecabe0fe23621b5fce3d3f9f414473b11933aceaa3e8190a137506f072088778ceb7336bd4a7314cc8d4c0aeaae60b7898cde1e2f107cdf2c913d9ec","name":"Act_2-Scene_2.jpg","type":"image/jpeg","lastModified":1670938202095.596,"size":142181},{"id":"57733d7340060b375b0acb0ea8bca8fcde0907ce06abb55543d7f0c87f2bfab286cb8b1c07e78d8ee7d3e0241aa86631f8d1e8c0e9e401423e20d128f033c46b","href":"https://static.observableusercontent.com/files/57733d7340060b375b0acb0ea8bca8fcde0907ce06abb55543d7f0c87f2bfab286cb8b1c07e78d8ee7d3e0241aa86631f8d1e8c0e9e401423e20d128f033c46b","name":"Act_2-Scene_4.jpg","type":"image/jpeg","lastModified":1670938202095.596,"size":135648},{"id":"02ea55c026e5c678b730a0a314ee32c4eb051e0400910367a82500d18a59e5699bdca27c197c6ba32075ecc9031f05276bf057ab4ae95b4bc392a6508b2ae559","href":"https://static.observableusercontent.com/files/02ea55c026e5c678b730a0a314ee32c4eb051e0400910367a82500d18a59e5699bdca27c197c6ba32075ecc9031f05276bf057ab4ae95b4bc392a6508b2ae559","name":"Act_1-Scene_4.jpg","type":"image/jpeg","lastModified":1670938202095.596,"size":172433}] 2d:{"title":"Mashups of FileAttachment Images and Observable Inputs","cells":[{"id":0,"value":"# [Mashups](https://en.wikipedia.org/wiki/Mashup_(web_application_hybrid%29) of [FileAttachment Images](https://observablehq.com/@observablehq/file-attachments) and [Observable Inputs](https://observablehq.com/collection/@observablehq/inputs)\nA collection techniques integrating the use of images with Inputs.\n\n","pinned":false,"hidden":false,"mode":"md"},{"id":822,"value":"toc(\"h2,h3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":797,"value":"{\n const images = await Promise.all(\n fileAttachments.map((file) =>\n file.image({\n height: 100,\n width: 75\n })\n )\n );\n\n return md`

\n## Introduction\nThis notebook has 10 images attached: \n\n${images.map((image) => html`${image} `)}\n\nThey're from from a musical performance's [blocking diagrams](https://dramatics.org/blocking-101/) developed by a director to illustrate the performers' staging.\n\nFor ease of referencing, the file attached images are collected into an array of [Promises](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) named ***fileAttachments***:`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":202,"value":"// Array of File Attachments Promises\nfileAttachments = [\n FileAttachment(\"Act_1-Scene_1.jpg\"),\n FileAttachment(\"Act_1-Scene_2.jpg\"),\n FileAttachment(\"Act_1-Scene_3.jpg\"),\n FileAttachment(\"Act_1-Scene_4.jpg\"),\n FileAttachment(\"Act_2-Scene_1.jpg\"),\n FileAttachment(\"Act_2-Scene_2.jpg\"),\n FileAttachment(\"Act_2-Scene_3.jpg\"),\n FileAttachment(\"Act_2-Scene_4.jpg\"),\n FileAttachment(\"Act_2-Scene_5.jpg\"),\n FileAttachment(\"Act_2-Scene_6.jpg\")\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":425,"value":"

\n## [Inputs.range](https://observablehq.com/@observablehq/input-range?collection=@observablehq/inputs): Set an Image's Size\nThe range slider can be used to set an image's height and width by way of the [options passed to the image promise](https://github.com/observablehq/stdlib#attachment_image):","pinned":false,"hidden":false,"mode":"md"},{"id":222,"value":"viewof height = Inputs.range([100, 800], {\n label: \"Image Height (pixels)\",\n value: 200,\n step: 1\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":205,"value":"carouselImage = fileAttachments[index].image({\n height: height,\n width: 0.75 * height\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":813,"value":"[@mbostock](https://observablehq.com/@mbostock)'s [Scrubber](https://observablehq.com/@mbostock/scrubber) is used to select or animate a carousel of the newly sized images:","pinned":false,"hidden":false,"mode":"md"},{"id":294,"value":"viewof index = Scrubber(\n fileAttachments.map((_, i) => i),\n {\n autoplay: false,\n loop: true,\n format: (i) => `File Name: ${fileAttachments[i].name}`,\n delay: 1000\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":841,"value":"

\n## [Inputs.toggle](https://observablehq.com/@observablehq/input-toggle?collection=@observablehq/inputs): Set Label to an Image\nThe [label property](https://github.com/observablehq/inputs/blob/main/README.md#toggle) for a toggle can be an HTML element. In the following cell, toggleImage is assigned the current image from the carousel utilizing the user-selected ***index*** into the ***fileAttachments*** array:","pinned":false,"hidden":false,"mode":"md"},{"id":828,"value":"viewof toggleImage = Inputs.toggle({\n label: html`${await fileAttachments[index].image({\n height: 100,\n width: 75\n })}`,\n value: fileAttachments[index].name,\n values: [fileAttachments[index].name, \"No image selected\"]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":838,"value":"toggleImage","pinned":false,"hidden":false,"mode":"ojs"},{"id":1001,"value":"

\n## [Inputs.button](https://observablehq.com/@observablehq/input-button?collection=@observablehq/inputs): Select an Image from an Array of Buttons\nUtilizing the [Promise.all](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all) method, the images in ***fileAttachments*** are collected into an array; ***images***.\n\nNote how the ***name*** property is propagated to the image via the option property. It will be utilized for a button's selection value. We'll also add the image's url as a property; in the event the logic wants to refer to it via a '[*src*](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img)' attribute for an image element:","pinned":false,"hidden":false,"mode":"md"},{"id":1051,"value":"images = await Promise.all(\n fileAttachments.map(\n async (file) =>\n await file.image({\n name: file.name, // Propagate name to image object.\n height: 100,\n width: 75,\n url: await file.url() // Add image's url as an additional attribute.\n })\n )\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1055,"value":"***images*** is then mapped into [*content*, *reduce*] tuples to create a display of multiple buttons. Each button will return the image's name when clicked: ${imageButton ? imageButton : ``}","pinned":false,"hidden":false,"mode":"md"},{"id":903,"value":"viewof imageButton = {\n const buttons = Inputs.button(\n images.map((image, i) => [image, () => image.name])\n );\n // For new Observable: https://talk.observablehq.com/t/try-the-new-observable-today/10698/76\n Object.assign(buttons, { style: \"width: auto;\" });\n return buttons;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":999,"value":"imageButton","pinned":true,"hidden":false,"mode":"ojs"},{"id":1884,"value":"

\n***Tip:***\nTo reference the image's asynchronously retrieved url attribute, use an [img element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img). This would be useful with an application like [leaflet.js](https://leafletjs.com/) where the [DivOverlay's](https://leafletjs.com/reference.html#divoverlay) ***content*** attribute can be an *HTMLElement*.\n\nExample, to use the first image in the images array in an img element: \n\n```javascript\n

\n```\n

","pinned":false,"hidden":false,"mode":"md"},{"id":1506,"value":"Nice, but what if the goal is to have the button selection return the ***image*** itself and possibly re-display it at some later point...both display and return the ***image***?🤔 \n\nRemember, \"[[a]n HTML element can only appear once in the page\"](https://talk.observablehq.com/t/cell-marked-detached-why-what-does-it-mean/7309/2).\n\nFor that scenario a [clone](https://developer.mozilla.org/en-US/docs/Web/API/Node/cloneNode) of the ***image*** is used as the value for its reduced value: ","pinned":false,"hidden":false,"mode":"md"},{"id":1492,"value":"imagesToClone = await Promise.all(\n fileAttachments.map((file) =>\n file.image({\n name: file.name, // Propagate name to image object\n height: 100,\n width: 75\n })\n )\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1498,"value":"viewof imageButtonCloned = {\n const buttons = Inputs.button(\n imagesToClone.map((image, i) => [image, () => image.cloneNode(true)]) // Return a clone of the image allowing for re-display\n );\n // For new Observable: https://talk.observablehq.com/t/try-the-new-observable-today/10698/76\n Object.assign(buttons, { style: \"width: auto;\" }); \n return buttons;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1503,"value":"Cloned Image Selected: ${imageButtonCloned}","pinned":true,"hidden":false,"mode":"html"},{"id":1556,"value":"$2f","pinned":false,"hidden":false,"mode":"md"},{"id":1824,"value":"viewof imagesClonedRadio = {\n const images = new Map(\n (\n await Promise.all(\n fileAttachments.map((file) =>\n file.image({\n name: file.name,\n height: 100,\n width: 75\n })\n )\n )\n ).map((image) => [image, image.cloneNode(true)]) // clone of image is used for the Map value\n );\n\n const getValue = (n) => {\n let img;\n const itr = images.values();\n\n for (let i = 0; i < n; i++) {\n img = itr.next().value;\n }\n return img;\n };\n\n return Inputs.radio(images, {\n label: html`Cloned Radio Images`,\n value: getValue(2),\n format: ([img, imgClone]) => img\n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1618,"value":"| Image Selected | Name | Height | Width |\n| -------------- | ---- | ------ | ----- |\n|${imagesClonedRadio} | ${imagesClonedRadio.name} | ${imagesClonedRadio.height} | ${imagesClonedRadio.width} |\n","pinned":true,"hidden":false,"mode":"md"},{"id":1066,"value":"

\n## [Inputs.checkbox](https://observablehq.com/@observablehq/input-checkbox?collection=@observablehq/inputs): Select Multiple Images\nEmulating the pattern established with the **Radio**, a **CheckBox** can be used to select and display multiple images and their associated attributes: ","pinned":false,"hidden":false,"mode":"md"},{"id":1314,"value":"viewof imagesClonedCheckBox = {\n const images = new Map(\n (\n await Promise.all(\n fileAttachments.map((file) =>\n file.image({\n name: file.name,\n height: 100,\n width: 75\n })\n )\n )\n ).map((image) => [image, image.cloneNode(true)]) // clone of image is used for the Map value\n );\n\n return Inputs.checkbox(images, {\n label: html`Cloned Checkbox Images`,\n format: ([img, imgClone]) => img\n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1646,"value":"// See: https://observablehq.com/@mbostock/html-in-markdown\nmd`\n \n \n \n \n \n \n \n \n \n${imagesClonedCheckBox.map(\n (image) =>\n html`\n \n

Image(s) Selected	Name	Height	Width
${image}	${image.name}	${image.height}	${image.width}`\n)}\n

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":868,"value":"

\n## [Inputs.search](https://observablehq.com/@observablehq/input-search?collection=@observablehq/inputs): Filter an Array of Images\nIn the next notebook cell, the ***exifMetadata*** array is generated with help from the [ExifReader](https://github.com/mattiasw/ExifReader) utility to extract an image's [EXIF Metadata](https://en.wikipedia.org/wiki/Exif). \n(Related Notebook: [EXIF Geotag Reader](https://observablehq.com/d/551938a30e343d6c))\n\nNote that the map's function is designated as an [async](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function) function to allow for the [await(s)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/await) within an [await](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/await):","pinned":false,"hidden":false,"mode":"md"},{"id":765,"value":"// Additional metadata for images via: https://github.com/mattiasw/ExifReader\n// exifMetadata will be reused later on in the notebook\nexifMetadata = await Promise.all(\n fileAttachments.map(async (file) => {\n const arrayBuffer = await file.arrayBuffer();\n return await ExifReader.load(arrayBuffer);\n })\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":415,"value":" ***exifMetadata*** is then used to create ***keyedImages***; an array of image objects keyed on the image's name and an extracted property ([JFIF Version](https://en.wikipedia.org/wiki/JPEG_File_Interchange_Format)) from the ordered metadata. \n \n As illustrated in the beginning of this notebook, images are sized using the user-settable [***height***](#height) attribute, re-displayed in the next cell for convenience via [Inputs.bind](https://observablehq.com/@observablehq/synchronized-inputs)","pinned":false,"hidden":false,"mode":"md"},{"id":1551,"value":"Inputs.bind(\n Inputs.range([100, 800], {\n label: \"Image Height (pixels)\",\n value: 200,\n step: 1\n }),\n viewof height\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":694,"value":"// Array of keyed images\nkeyedImages = (\n await Promise.all(\n // exifMetadata could have been created with that map via an async function, but it's in a separate cell for reuse later in the notebook\n fileAttachments.map((file) =>\n file.image({ name: file.name, height: height, width: 0.75 * height })\n )\n )\n).map((image, i) => ({\n name: image.name,\n \"JFIF Version\": exifMetadata[i][\"JFIF Version\"].description, // Referenced in fileAttachments' order\n image\n}))","pinned":true,"hidden":false,"mode":"ojs"},{"id":880,"value":"***keyedImages*** can now be filtered to generate a ***search*** array of images within an Act of the performance. \n\n'Act_2' is pre-filtered in the notebook cells below:","pinned":false,"hidden":false,"mode":"md"},{"id":704,"value":"// Initiate table search with Act 2 images\nviewof search = Inputs.search(keyedImages, {\n label: \"Search Images\",\n query: \"Act_2\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":877,"value":"search","pinned":true,"hidden":false,"mode":"ojs"},{"id":884,"value":"

\n## [Inputs.table](https://observablehq.com/@observablehq/input-table?collection=@observablehq/inputs): Display a List of Filtered Images\nUsing the ***search*** results, the filtered images are displayed in a table by way of the versatile [format function](https://github.com/observablehq/inputs/blob/main/README.md#table). \n \nAs with the [**Buttons**](#cell-1001) and [**Checkboxes**](#cell-1066), a [clone](https://developer.mozilla.org/en-US/docs/Web/API/Node/cloneNode) of the image is utilized:","pinned":false,"hidden":false,"mode":"md"},{"id":721,"value":"// Only 'search'-ed images are 'table'-ed\nviewof imagesTable = Inputs.table(search, {\n format: {\n image: (image) => image.cloneNode(true) // Cloning allows re-dislay of original image from selections; if any.\n }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1163,"value":"The ***imagesTable***'s [selection(s)](https://observablehq.com/@observablehq/input-table#cell-370) are available via the [***viewof***](https://observablehq.com/@observablehq/views) operator. \n\nBecause a clone of the image is being displayed in the table, the original images are available (**imagesTable[n].image**) for re-display.","pinned":false,"hidden":false,"mode":"md"},{"id":1161,"value":"imagesTable","pinned":true,"hidden":false,"mode":"ojs"},{"id":1476,"value":"html`Table image(s):${imagesTable.map(\n (tableRow) => html`
${tableRow.name}: ${tableRow.image}`\n)}`","pinned":true,"hidden":false,"mode":"ojs"},{"id":1273,"value":"

\n## [Inputs.select](https://observablehq.com/@observablehq/input-select?collection=@observablehq/inputs): Set Label to an Image\nA select's label can also be set to an image. \n\nThe next cell re-uses the ***exifMetadata*** to [Map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map) the attributes for a user-selected image (via [***index***](https://observablehq.com/d/94a4d8e99ad05a5f#index)) into ***imageMetadata***:","pinned":false,"hidden":false,"mode":"md"},{"id":1285,"value":"imageMetadata = new Map(\n Object.keys(exifMetadata[index]).map((attribute) => [\n attribute,\n exifMetadata[index][attribute].description\n ])\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1294,"value":"The mapped attributes are then used in the ***imageAttribute*** select with the image for its label:","pinned":false,"hidden":false,"mode":"md"},{"id":1287,"value":"viewof imageAttribute = Inputs.select(imageMetadata, {\n label: html`${await fileAttachments[index].image({\n height: 150,\n width: 150 * 0.75\n })}`\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1247,"value":"imageAttribute","pinned":true,"hidden":false,"mode":"ojs"},{"id":818,"value":"import { toc } from \"@mbostock/toc\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":290,"value":"import { Scrubber } from \"@mbostock/scrubber\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":762,"value":"// require.resolve(\"exifreader@4.6.0\")\n// https://www.npmjs.com/package/exifreader\n// https://github.com/mattiasw/ExifReader\nExifReader = require(\"exifreader@4.6.0\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":57,"value":"{\n return md``;\n // Old Logic\n // viewof animate = Inputs.toggle({ label: \"Animate\" })\n /*viewof image = Inputs.range([1, images.length], {\n label: \"Image\",\n value: animationCounter.image,\n step: 1,\n disabled: animate\n}) */\n // https://observablehq.com/@jashkenas/simple-canvas-animation-with-pause\n /* animationCounter = {\n var obj = {};\n obj.image = (this && this.image) || 1;\n while (animate) {\n await Promises.delay(speed * 1000);\n obj.image = Math.max((obj.image + 1) % (images.length + 1), 1);\n yield obj;\n }\n yield obj;\n} */\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}