2d:null 2e:["$","title",null,{"children":"Forms | bchoatejr | Observable"}] 33:Ta13,// from https://observablehq.com/@emerycarr/manhattan-particles viewof preset = { let makeDict = (pairs) => Object.assign({}, ...Array.from(pairs, ([key, val]) => ({[key]: val}) )); const params = (keys, vals) => makeDict(keys.map((key, i) => [key, vals[i]])); const opt = { slider: (vals) => slider(params(['title','min','max','step','value'], vals)), color: (vals) => j_color(params(['title','value'], vals)), }; const options = { // title min max step default particles: opt.slider( ["Number of Particles", 1, 200, 1, 140 ]), size: opt.slider( ["Particle Size", .1, 50, .1, 2.5 ]), jitter: opt.slider( ["Particle Jitter", 0, 1, .1, .3 ]), inertia: opt.slider( ["Particle Inertia", 0, .2, .01, .01 ]), minDist: opt.slider( ["Minimum Distance", 0, 200, 1, 50 ]), distRange: opt.slider( ["Distance Range", 0, 200, 1, 50 ]), fillAlpha: opt.slider( ["Particle Fill Opacity", 0, 1, .05, .35 ]), strokeAlpha: opt.slider( ["Particle Stroke Opacity", 0, 1, .05, 1 ]), ghosting: opt.slider( ["Ghosting", 0, 100, 1, 0 ]), // title default bgColor: opt.color( ["Background Color", "#1d252e"]), lineColor: opt.color( ["Line Color", "#9be9ff"]), fillColor: opt.color( ["Particle Fill Color", "#3d97da"]), strokeColor: opt.color( ["Particle Stroke Color", "#ffffff"]), }; const element = html`

${values(options)}

`; element.oninput = function() { const result = {}; for (var x in options) { result[x] = options[x].value } element.value = result; } element.oninput(); return element; function values(dict) { const result = []; for (var x in dict) { result.push(dict[x]); }; return result; } }34:T4ed,function rng(cfg = {}) { let {label, attrs={}, styles={}, fixed=0} = cfg; let input = html` `; let card = html`

`; card.append(input); Object.keys(attrs).forEach(key => { const val = attrs[key]; if (val != null) input.setAttribute(key, val); }); let {max, min, value, name=""} = attrs; card.prepend(html`

${min = min ? min : ""}

${label = label ? label : ""}

${max = max ? max : ""}

`); // ${value = value ? value : ""} let output = html`

${value = value ? value : ""}

` // let out_id = "out_" + name; // card.append(html` // ${value = value ? value : ""} // `); card.append(output) card.oninput = () => { card.value = input.valueAsNumber; // card.out_id.value = card.value; // card.output.value = card.value; output.innerHTML = card.value.toFixed(fixed); return card.value; } card.oninput(); return card; } 35:T456,function color(cfg = {}) { let {label, attrs={}, styles={}} = cfg; let input = html` `; let card = html`

`; card.append(input); Object.keys(attrs).forEach(key => { const val = attrs[key]; if (val != null) input.setAttribute(key, val); }); let {max, min, value, name=""} = attrs; card.prepend(html`

${label = label ? label : ""}

`); // ${value = value ? value : ""} let output = html`

${value = value ? value : ""}

` // let out_id = "out_" + name; // card.append(html` // ${value = value ? value : ""} // `); card.append(output) card.oninput = () => { card.value = input.value; // card.out_id.value = card.value; // card.output.value = card.value; output.innerHTML = card.value; return card.value; } card.oninput(); return card; }36:T54e,// card styles style_card = html`flex styles`37:[] 31:{"id":"70f2a114bea37bce","slug":"forms","title":"Forms","thumbnail":"f3afbc5982c4120bc79274d34a980b62251ab28042a43d6b5b08e8dcc134c8c4","access_level":"public","create_time":"$D2019-03-08T17:51:31.448Z","update_time":"$D2019-07-30T22:55:21.121Z","view_time":null,"first_public_time":"$D2019-03-08T23:45:37.440Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"727607e20e3c61f9","login":"bchoatejr","name":"","avatar_url":"https://avatars-next.observableusercontent.com/4881a705d0248e8076cbb21f9672c3d34d1e29310ae73f42e63f26691173b539","tier":"starter_2024"},"version":348,"publish_version":348,"role":null,"authored":false,"authors":[{"type":"individual","id":"43e14e124e3e99b4","login":"bchoatejr","name":"","avatar_url":"https://avatars-next.observableusercontent.com/4881a705d0248e8076cbb21f9672c3d34d1e29310ae73f42e63f26691173b539","tier":null}],"members":[{"type":"individual","id":"43e14e124e3e99b4","login":"bchoatejr","name":"","avatar_url":"https://avatars-next.observableusercontent.com/4881a705d0248e8076cbb21f9672c3d34d1e29310ae73f42e63f26691173b539","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"70aa9d298d19652f","slug":"ui","title":"UI","owner":{"id":"727607e20e3c61f9","login":"bchoatejr","name":""}},"type":"notebook","body":{"title":"Forms","cells":[{"id":0,"value":"md`# Forms\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":327,"value":"md`\nfrom [@emerycarr/manhattan-particles](https://observablehq.com/@emerycarr/manhattan-particles)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":329,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":314,"value":"viewof form_path_transform = {\n \n const form = html`\n

Path Transform

\n ${rng({label:\"x\", attrs:{name:\"x\", step:1, min:1, max:width, value:width/2}})}\n ${rng({label:\"y\", attrs:{name:\"y\", step:1, min:1, max:height, value:height/2}})}\n ${rng({label:\"scaleX\", attrs:{name:\"scaleX\", step:0.01, min:0.01, max:10, value:1.0}})}\n ${rng({label:\"scaleY\", attrs:{name:\"scaleY\", step:0.01, min:0.01, max:10, value:1.0}})}\n ${rng({label:\"rotate\", attrs:{name:\"rotate\", step:0.01, min:0, max:4*Math.PI, value:0}, fixed:2})}\n

\n`\n form.oninput = () => form.value = {\n \"x\":form.x.valueAsNumber, \n \"y\":form.y.valueAsNumber, \n \"scaleX\":form.scaleX.valueAsNumber, \n \"scaleY\":form.scaleY.valueAsNumber, \n \"rotate\":form.rotate.valueAsNumber, \n };\n \n form.oninput();\n return form; \n\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":306,"value":"// const displaySet = new Set([\"year\", \"month\", \"week\", \"day\", \"hour\", \"minute\"]);\nviewof form_sty1 = {\n \n const form = html`\n \n

Color Config

\n ${color({label:\"year\", attrs:{name:\"year\", value:\"#f293fe\"}})}\n ${color({label:\"month\", attrs:{name:\"month\", value:\"#00efdc\"}})}\n ${color({label:\"week\", attrs:{name:\"week\", value:\"#0193b0\"}})}\n ${color({label:\"day\", attrs:{name:\"day\", value:\"#cffcff\"}})}\n ${color({label:\"hour\", attrs:{name:\"hour\", value:\"#855fb2\"}})}\n ${color({label:\"minute\", attrs:{name:\"minute\", value:\"#005c7b\"}})}\n\n

\n`\n form.oninput = () => form.value = {\n \"year\":form.year.value, \n \"month\":form.month.value, \n \"week\":form.week.value, \n \"day\":form.day.value, \n \"hour\":form.hour.value, \n \"minute\":form.minute.value, \n // \"x\":form.x.valueAsNumber, \n };\n \n form.oninput();\n return form; \n\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":308,"value":"Number.parseFloat(\"1.2222\").toFixed(0)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":258,"value":"html`x:${form.x}, y:${form.y}, z:${form.z}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":260,"value":"viewof form = {\n const form = html`\n \n

Config

\n ${rng({label:\"x\", attrs:{name:\"x\", max:1, min:-1, value:\"1\"}})}\n ${rng({label:\"y\", attrs:{name:\"y\", max:1, min:-1, value:\"1\"}})}\n ${rng({label:\"z\", attrs:{name:\"z\", max:1, min:-1, value:\"1\"}})}\n\n

\n`\n form.oninput = () => form.value = {\n \"x\":form.x.valueAsNumber, \n \"y\":form.y.valueAsNumber, \n \"z\":form.z.valueAsNumber, \n };\n \n form.oninput();\n return form; \n\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":118,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":316,"value":"height=200","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":302,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":304,"value":"// https://observablehq.com/@mbostock/linked-inputs?\nviewof x = {\n const div = html`\n \n \n `;\n const range = div.querySelector(\"[type=range]\");\n const number = div.querySelector(\"[type=number]\");\n div.value = range.value = number.value = 50;\n range.oninput = () => number.value = div.value = range.valueAsNumber;\n number.oninput = () => range.value = div.value = number.valueAsNumber;\n return div;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":322,"value":"md` ## Needs work\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":319,"value":"viewof pause_check = { // doesn't work\n let input = html``;\n let div = html`

pause

`;\n div.append(input);\n\n div.oninput = () => {\n div.value = input.checked;\n return div.value;\n }\n \n div.oninput();\n \n return div;\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":324,"value":"md`## Styles`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"$36","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":335,"value":"import { slider, color as j_color } from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":87,"value":"md`##### References\n- [SO](https://stackoverflow.com/questions/40158910/combining-rows-and-columns-in-flexbox) flex\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W37","stdlib":"1","titling":"auto"}} 32:"$31:body"