2c:null 2d:["$","title",null,{"children":"ImageBox3 in Observable | Praful Bhawsar | Observable"}] 32:T424,viewof tileParams = Object.assign( Inputs.form({ tileX: Inputs.range([0, imageInfo.width], { step: 1, value: Math.floor((imageInfo.width - 256) / 2), label: html`Tile X:` }), tileY: Inputs.range([0, imageInfo.height], { step: 1, value: Math.floor((imageInfo.height - 256) / 2), label: html`Tile Y:` }), tileWidth: Inputs.range([0, 4096], { step: 1, value: 1024, label: html`Region Width:` }), tileHeight: Inputs.range([0, 4096], { step: 1, value: 1024, label: html`Region Height:` }), tileSize: Inputs.radio([256, 512, 1024, 2048], { value: 256, format: (x) => `${x}x${x}`, label: html`Tile Resolution:` }) }), { oninput: (event) => event.isTrusted && event.stopImmediatePropagation(), onchange: (event) => event.currentTarget.dispatchEvent(new Event("input")) } )33:[] 30:{"id":"dd6c23633d26c17c","slug":"imagebox3-in-observable","title":"ImageBox3 in Observable","thumbnail":"0c684850e3cfc2c5b9cdb6b25b099a020f1f40678af7100cff9fb8d6260eb973","access_level":"public","create_time":"$D2021-11-10T21:05:42.022Z","update_time":"$D2024-10-10T22:13:18.893Z","view_time":null,"first_public_time":"$D2021-11-18T19:58:19.616Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"b0b4412d0985303e","login":"prafulb","name":"Praful Bhawsar","avatar_url":"https://avatars-next.observableusercontent.com/765f5b661080e697f1ac35466b8e2cef535a03897b0dc7163c9b13484530ac2a","tier":"starter_2024"},"version":648,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"49bdf3232a315bf5","login":"prafulb","name":"Praful Bhawsar","avatar_url":"https://avatars-next.observableusercontent.com/765f5b661080e697f1ac35466b8e2cef535a03897b0dc7163c9b13484530ac2a","tier":null}],"members":[{"type":"individual","id":"4355fe13cb71b11d","login":"episphere","name":"Jonas Almeida","avatar_url":"https://avatars-next.observableusercontent.com/3a0ff5abff6da0cdbd100da305ba323e12d43c8fcb7604275e6c72591db9dc69","tier":null,"role":"editor"},{"type":"individual","id":"2fe10bd213abfed1","login":"jonasalmeida","name":"Jonas Almeida","avatar_url":"https://avatars-next.observableusercontent.com/bd90e360f80f2fda3dd6aa9bdda3474b409710441d06e67f9ac936b3660aba05","tier":null,"role":"editor"},{"type":"individual","id":"49bdf3232a315bf5","login":"prafulb","name":"Praful Bhawsar","avatar_url":"https://avatars-next.observableusercontent.com/765f5b661080e697f1ac35466b8e2cef535a03897b0dc7163c9b13484530ac2a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"titling":"auto","title":"ImageBox3 in Observable","cells":[{"id":30,"value":"# ImageBox3 in Observable","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"Imagebox3 = (\n await import(\"https://episphere.github.io/imagebox3/imagebox3.mjs\")\n).default","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":265,"value":"viewof imageURL = Inputs.text({\n label: html`URL to WSI: `,\n value:\n \"https://storage.googleapis.com/imagebox_test/openslide-testdata/Aperio/CMU-1.svs\",\n width: 700,\n submit: true\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":546,"value":"OR","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":550,"value":"viewof imageLocal = Inputs.file({\n label: html`Choose Local File: `,\n accept: \".svs,.tiff,.tif,.ndpi\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":591,"value":"
","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":38,"value":"html`
Image Tile:

$\"No$ `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":337,"value":"html`
Try changing these parameters to see the tile server in action:
`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":297,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":390,"value":"The tile above is loaded straight from the storage service into the browser, without an intermediate tile server!\n
Try opening up the Network tab in your browser's developer tools to verify this - you should see HTTP range requests being made each time the tile parameters are changed.\n
\n
\nThis is what ImageBox3 does behind the scenes:
\ni) translates the tile parameters into byte ranges corresponding to that section of the WSI file,
\nii) makes the HTTP request to the storage service (which should support range requests), and
\niii) renders the returned data as the image of the tile that you see above.","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":408,"value":"A demo of ImageBox3 being used to view an entire WSI is available at:
\nhttps://episphere.github.io/imagebox3","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":376,"value":"html`
`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":342,"value":"imageInfo = await imagebox3Instance.getInfo(imageURL)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":532,"value":"imagebox3Instance = {\n const instance = new Imagebox3(imageSource);\n await instance.init();\n return instance;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":642,"value":"await imagebox3Instance.tiff.ifdRequests[0]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"getImageTile = async (imageURL, tileParams) => {\n const tileURL = URL.createObjectURL(\n await imagebox3Instance.getTile(...Object.values(tileParams))\n );\n return tileURL;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":306,"value":"tileURL = await getImageTile(imageSource, tileParams)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":566,"value":"mutable imageSource = {\n let imageSrc = undefined;\n if (imageURL) {\n imageSrc = imageURL;\n }\n if (imageLocal && localStorage.imageLocal !== imageLocal.name) {\n viewof imageURL.value = \"\";\n imageSrc = await imageLocal.blob();\n localStorage.imageLocal = await imageLocal.name;\n }\n return imageSrc;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":624,"value":"localStorage.clear()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1"}} 31:"$30:body"