29:null 2a:["$","title",null,{"children":"Autocompleting Keyboard | Lucas Barcellos Oliveira | Observable"}] 2f:T404,kiosk = { let kiosk = html`

`; let maindiv = html`

Who are you?

` maindiv.style.border = "20px solid green;"; kiosk.append(maindiv); let invert = invertColors.length>0 ? 100 : 0; maindiv.append(keyboard2()); let [w,h,s,c,b] = [960,960*9/16,1,'black','white']; function onresize () { let fs = document.webkitFullscreenElement || document.mozFullscreenElement; if (fs) { [w,h,s,c,b] = [window.innerWidth,window.innerHeight,window.innerHeight/(960*9/16),'white','black']; } else { [w,h,s,c,b] = [960,960*9/16,1,'black','white']; } kiosk.style = `width: ${w/s}px; height: ${h/s}px; border: 4px solid greeen; filter:invert(${invert}%); transform:scale(${s});`; } onresize(); window.addEventListener('resize', onresize, false); invalidation.then(function () { window.removeEventListener('resize', onresize); }) return kiosk; } 30:Ta66,// @import url('https://fonts.googleapis.com/css?family=Fira+Sans'); // @import url('https://fonts.googleapis.com/css?family=Fira+Sans+Condensed'); // @import url('https://fonts.googleapis.com/css?family=Fira+Mono'); stylesheet = html` `31:Tce5,keyboard2 = function() { let mainDiv = html`

`; let display = html``; mainDiv.append(display); let cancelFunction = function() { mutable name = ""; display.value = ""; mutable partialName = ""; setSuggestions(""); keyAcceptButton.disabled=true; keyAcceptButton.style.cursor="not-allowed"; } let selectSuggestion = function(selectedName) { if (selectedName.length < 2) { cancelFunction(); return; } display.value = selectedName; keyAcceptButton.disabled=false; keyAcceptButton.style.cursor="pointer"; } let send = function(selectedName){ mutable name = selectedName; display.value = ""; mutable partialName = ""; sendName(selectedName); setSuggestions(""); keyAcceptButton.disabled=true; keyAcceptButton.style.cursor="not-allowed"; } let keyPanel = html`

`; let keyCancelButton = html``; let keyAcceptButton = html``; keyCancelButton.onclick = cancelFunction; keyAcceptButton.onclick = () => send(display.value); keyAcceptButton.disabled=true; keyAcceptButton.style.cursor="not-allowed"; let keyDiv = html`

`; keyPanel.append(keyCancelButton); keyPanel.append(keyDiv); keyPanel.append(keyAcceptButton); mainDiv.append(keyPanel); let suggestions = html`

`; mainDiv.append (suggestions); let setSuggestions = function (partial) { suggestions.innerHTML = ""; for (let name of matchingNames(partial)) { let nameButton = html``; nameButton.onclick = function () { selectSuggestion(name) }; suggestions.append(nameButton); } } setSuggestions (""); for (let row of [" QWERTYUIOP","ASDFGHJKL d"," ZXCVBNM.- ","s"]) { let rowdiv = html`

`; for (let key of row) { if (key == " ") { rowdiv.append(html` `); } else if (key == 'd') { let button = html``; button.onclick = (function () { return function() { display.value = display.value.slice(0,display.value.length-1); mutable partialName = display.value; setSuggestions (display.value); } })(); rowdiv.append(button); } else { let button = html``; if (key=="s") button = html``; button.onclick = (function () { return function() { if (key=="s") key=" "; display.value = display.value+key; mutable partialName = display.value; setSuggestions (display.value); } })(); rowdiv.append(button); } } keyDiv.append(rowdiv) } return mainDiv; }32:[] 2d:{"id":"992dfce05e1b7b74","slug":"autocompleting-keyboard","title":"Autocompleting Keyboard","thumbnail":"7949727d2696b9e71b35558ec912c97ef597df8f4d30ebbcb47c9baae3b0e302","access_level":"public","create_time":"$D2019-08-15T04:32:15.136Z","update_time":"$D2019-10-14T15:31:16.441Z","view_time":null,"first_public_time":"$D2019-08-15T05:27:08.447Z","has_unpublished_edits":null,"fork":{"id":"3feecae6840e517c","slug":"interface-redes-de-nos","title":"Interface Redes de Nós ","owner":{"id":"e9fcee55f21948e0","login":"esperanc","name":"Claudio Esperança"}},"stars":0,"starred":false,"owner":{"type":"team","id":"78ed5d16c7b764e3","login":"lucasbarcellosoliveira","name":"Lucas Barcellos Oliveira","avatar_url":"https://avatars-next.observableusercontent.com/f666bfbf81c5ce3e07b141f9368d214d65395420ff64ff65964a78fd85ca75c2","tier":"starter_2024"},"version":1394,"publish_version":1394,"role":null,"authored":false,"authors":[{"type":"individual","id":"1f921ee8155bda89","login":"lucasbarcellosoliveira","name":"Lucas Barcellos Oliveira","avatar_url":"https://avatars-next.observableusercontent.com/f666bfbf81c5ce3e07b141f9368d214d65395420ff64ff65964a78fd85ca75c2","tier":null}],"members":[{"type":"individual","id":"1f921ee8155bda89","login":"lucasbarcellosoliveira","name":"Lucas Barcellos Oliveira","avatar_url":"https://avatars-next.observableusercontent.com/f666bfbf81c5ce3e07b141f9368d214d65395420ff64ff65964a78fd85ca75c2","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"Autocompleting Keyboard","cells":[{"id":0,"value":"md`# Autocompleting Keyboard\n# Using Local Storage\nInterface for VISAP'19 Visualization: Visualizing Visualizers\n\nAvailable and Ready to Use in [This Notebook](https://observablehq.com/@lucasbarcellosoliveira/dblp-collaboration-network)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":127,"value":"fullScreenButton = { \n function fullScreen(element) {\n if(element.requestFullScreen) {\n element.requestFullScreen();\n console.log ('standard');\n } else if(element.webkitRequestFullScreen ) {\n element.webkitRequestFullScreen();\n console.log ('webkit');\n } else if(element.mozRequestFullScreen) {\n console.log ('mozilla');\n element.mozRequestFullScreen();\n }\n }\n \n let button = html``;\n button.style[\"font-size\"] = \"25px\";\n button.style[\"padding\"] = \"10px\";\n button.onclick = function () { \n fullScreen (kiosk) \n };\n return button;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1055,"value":"viewof invertColors = checkbox({\n options: ['Inverter Cores'],\n value: ['Inverter Cores']})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"defaults = ({\n keyfontsize : 15,\n nfontsize : 20\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"mutable name = \"\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":209,"value":"mutable partialName=\"\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"sendName = function (name) {\n window.localStorage.setItem('KioskName',name);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1069,"value":"fonts = html`\n\n\n\nFira Sans
\nFira Sans Condensed
\nFira Mono`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1079,"value":"acceptColor = invertColors.length > 0 ? \"rgb(233,52,52)\" : \"rgb(178, 223, 242)\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1083,"value":"cancelColor = invertColors.length > 0 ? \"rgb(178, 223, 242)\" : \"rgb(233,52,52)\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":811,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":231,"value":"matchingNames = function (partialName) {\n let matchName = partialName;\n if (matchName.length>0) {\n matchName = matchName.split(\" \").map(function(n){if (n.length>0) return n[0]+n.substring(1).toLowerCase();}).join(\" \");\n }\n let names = [];\n for (let d of data) {\n let name = d;\n if (name.slice(0,matchName.length) == matchName) {\n names.push (name);\n if (names.length > 300) break;\n }\n }\n return names;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":88,"value":"mutable capabilities = \"\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":186,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":576,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1057,"value":"import {checkbox} from \"@esperanc/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1356,"value":"dataRaw=d3.csv(\"https://rawcdn.githack.com/lucasbarcellosoliveira/fonts/2dc61a5808868cac200ba3c00a2d9c0896a300cf/allAuthors.csv\") //SELECT 'name' UNION ALL SELECT DISTINCT name FROM author INTO OUTFILE 'allAuthors.csv';","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1362,"value":"data=dataRaw.map(d=>d.name)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 2e:"$2d:body"