2e:null 2f:["$","title",null,{"children":"Scaling artboards for ai2html | Luis Sevillano | Observable"}] 34:[{"id":"87258830e566a1f67192886d319f80f465f43ca51e2e59d3f71ff8a459c057c990c415960129acd6adf07931ec0360b9b7dfd6584a73137ae0fc91aed24d52fb","href":"https://static.observableusercontent.com/files/87258830e566a1f67192886d319f80f465f43ca51e2e59d3f71ff8a459c057c990c415960129acd6adf07931ec0360b9b7dfd6584a73137ae0fc91aed24d52fb","name":"screenshot.jpg","type":"image/jpeg","lastModified":1701774724170.345,"size":73985},{"id":"5095ff967cb6d5f18d5440a736211b3789e40c710e62b29cdf5e098eea2a57a7e20e1bcfa1ab17540f1732e1e83dc4ef232c296a6239f887cdbb1c73dfb052a5","href":"https://static.observableusercontent.com/files/5095ff967cb6d5f18d5440a736211b3789e40c710e62b29cdf5e098eea2a57a7e20e1bcfa1ab17540f1732e1e83dc4ef232c296a6239f887cdbb1c73dfb052a5","name":"transform.png","type":"image/png","lastModified":1701775376613.088,"size":59295}] 32:{"id":"5f470e792e8aff6b","slug":"scaling-artboards-for-ai2html","title":"Scaling artboards for ai2html","thumbnail":"d7fc3f4f52e835553d3ade0401827e488db272b0c81455737c08793a29865490","access_level":"public","create_time":"$D2023-12-04T13:21:38.792Z","update_time":"$D2024-04-05T08:37:34.988Z","view_time":null,"first_public_time":"$D2023-12-04T13:21:38.792Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"aca7accb784cc34f","login":"luissevillano","name":"Luis Sevillano","avatar_url":"https://avatars-next.observableusercontent.com/3c9b0d4d8e2b79d27d5963625d270d87cbdc9c4cd5579c9464c09bd3db5d18ef","tier":"starter_2024"},"version":374,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"7bd128609d447fe6","login":"luissevillano","name":"Luis Sevillano","avatar_url":"https://avatars-next.observableusercontent.com/3c9b0d4d8e2b79d27d5963625d270d87cbdc9c4cd5579c9464c09bd3db5d18ef","tier":null}],"members":[{"type":"individual","id":"7bd128609d447fe6","login":"luissevillano","name":"Luis Sevillano","avatar_url":"https://avatars-next.observableusercontent.com/3c9b0d4d8e2b79d27d5963625d270d87cbdc9c4cd5579c9464c09bd3db5d18ef","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Scaling artboards for ai2html","cells":[{"id":0,"value":"# Scaling artboards for ai2html\n\n_A super basic tool for resizing artboards when using ai2html_. \n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":336,"value":"thumbnail = FileAttachment(\"screenshot.jpg\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":266,"value":"Sometimes, specially when you are working with maps in Adobe Illustrator, scale from one artboard to another is not easy. That can be because the design exceeds the artboard limits, the design contains heavy data that makes your computer slow or anything else. This tiny tool lets you find the _magic_ number you have to resize the next artboard to. Lets start:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":131,"value":"Your artboard has a size of:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":144,"value":"viewof artboardSourceSize = Inputs.text({ label: \"Artboard origin size\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":150,"value":"...and its the type of:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":134,"value":"viewof artboardSourceLabel = Inputs.select(artboardsNames, {\n label: \"Artboard origin\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":157,"value":"..and the design you want to resize to is:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":160,"value":"viewof artboardToLabel = Inputs.select(artboardsNames, {\n label: \"Artboard to scale\",\n value: \"mobile2\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"$${![NaN, 0].includes(result) ? 'You should resize your artboard to:': '❗️ Please introduce a valid value in the _Artboard origin size_ input text.'}","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":297,"value":"[NaN, 0].includes(result)\n ? \"Waiting for a valid result...\"\n : ![NaN, 0].includes(result) &&\n Inputs.button(result.toLocaleString(), {\n value: result,\n reduce: () => navigator.clipboard.writeText(result.toLocaleString())\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":348,"value":"transform = FileAttachment(\"transform.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":353,"value":"_This tool is specially useful in combination of the 'Transform' panel_","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":170,"value":"___","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":328,"value":"If you want to use this notebook with your own settings just fork it and update _absSettings_ variable.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":168,"value":"<><><><><><><><><><><><><><><><><><><><><><><><>","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":358,"value":"isEmpty = ![NaN, 0].includes(result) &&\n Inputs.button(result.toLocaleString(), {\n value: result,\n reduce: () => navigator.clipboard.writeText(result.toLocaleString())\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"absSettings = ({\n mobile: 280,\n mobile2: 335,\n tablet: 600,\n desktop: 900\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":371,"value":"function parseInput(input) {\n return parseFloat(input.replace(/[px\\s]/gi, \"\").replace(/,/gi, \".\"));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"artboardsNames = Object.keys(absSettings)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":88,"value":"mutable result = scaleFrom(\n parseInput(artboardSourceSize),\n artboardSourceLabel,\n artboardToLabel\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"function scaleFrom(\n currentArtboardSize,\n whichArtboardIsFrom,\n whichArtboardIsTo\n) {\n const from = absSettings[whichArtboardIsFrom];\n const to = absSettings[whichArtboardIsTo];\n let difference = to / from;\n return parseFloat(currentArtboardSize) * difference;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":341,"value":"Object.assign(thumbnail, {\n style: `max-width:${width}px; max-height: 280px`\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":349,"value":"Object.assign(transform, {\n style: `max-width:${width}px; max-height: 280px`\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 33:"$32:body"