Qual é o seu nome?

`; // kiosk.append(matchingNamesBox(partialName)); kiosk.append(maindiv); let video = html`

`; maindiv.append(video); maindiv.append(keyboard()); attachWebcam(video); let [w,h,s,c,b] = [960,960*9/16,1,'black','white']; function onresize () { let fs = document.webkitFullscreenElement || document.mozFullscreenElement; let invert = 0; if (fs) { [w,h,s,c,b] = [window.innerWidth,window.innerHeight,window.innerHeight/580,'white','black']; invert = 100; } else { [w,h,s,c,b] = [960,960*9/16,1,'black','white']; invert = 0; } //kiosk.style = 'width:'+(w/s)+"px; color:"+c+"; background-color:"+b+"; transform: scale("+s+");"; kiosk.style = 'width:'+(w/s)+"px; filter:invert("+invert+"%);transform: scale("+s+");"; video.style.filter = "invert("+invert+")"; } onresize(); window.addEventListener('resize', onresize, false); invalidation.then(function () { window.removeEventListener('resize', onresize); }) return kiosk; } 31:T4bc,namestatistics = function (name, action, dismiss) { let mainDiv = html`

`; let matchName = name; if (matchName.length>0) { matchName = matchName[0]+matchName.substring(1).toLowerCase(); } let datum = null; for (let d of data) { if (d.Nome == matchName) { datum = d; break; } } if (datum) { let statDiv = html`

`; let statStory = html`

${matchName} é o nome de ${datum.ate2010} brasileiros registrados entre 2000 e 2010

`; statDiv.append(statStory); statDiv.append(scaledChart([name],0.5)); mainDiv.append(statDiv); } else { mainDiv.append(html`

${matchName} não é um nome comum entre brasileiros

`); } let include = html``; include.onclick = action; let cancel = html``; cancel.onclick = dismiss; mainDiv.append (include); mainDiv.append (cancel); return mainDiv; }32:T75c,stylesheet = html` `33:Taaa,keyboard = function() { let mainDiv = html`

`; let keyDiv = html`

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

`; keyDiv.append (suggestions); let display = html``; keyDiv.append(display); let enterFunction = function(selectedName) { mutable name = selectedName; display.value = ""; mutable partialName = ""; showChoice(selectedName); setSuggestions(""); } let showChoice = function (selectedName) { let removeChoice = function() { mainDiv.removeChild(mainDiv.querySelector("div.statistics")); keyDiv.style.visibility = "visible"; } let action = function () { sendCard(selectedName); removeChoice(); } let dismiss = function() { removeChoice(); } keyDiv.style.visibility = "hidden"; let statistics = namestatistics(selectedName,action,dismiss); mainDiv.append (statistics); } let setSuggestions = function (partial) { suggestions.innerHTML = ""; for (let name of matchingNames(partial)) { let nameButton = html``; nameButton.onclick = function () { enterFunction(name) }; suggestions.append(nameButton); } } setSuggestions (""); for (let row of [" QWERTYUIOP","ASDFGHJKL d"," ZXCVBNM e"]) { 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 if (key == 'e') { let button = html``; button.onclick = function () { enterFunction (display.value); } rowdiv.append(button); } else { let button = html``; button.onclick = (function () { return function() { display.value = display.value+key; mutable partialName = display.value; setSuggestions (display.value); } })(); rowdiv.append(button); } } keyDiv.append(rowdiv) } return mainDiv; }34:[] 2e:{"title":"Kiosk interface","cells":[{"id":0,"value":"md`# Kiosk interface\n\nThe idea here is to create a kiosk interface that asks a name from the user and takes her picture with the webcam, storing the info in localStorage so that it can be consumed by some application running in another browser window\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":127,"value":"{ \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.onclick = function () { \n fullScreen (kiosk) \n };\n return button;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":286,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"defaults = ({\n fontfamily: \"arial\",\n vwidth : 200, \n vheight : 200*3/4, \n keyfontsize : 15,\n cardfontsize : 20,\n nwidth : 300,\n nheight: 200,\n nfontsize : 20,\n npadding : 10\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":83,"value":"mutable name = \"\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":209,"value":"mutable partialName=\"\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":91,"value":"sendCard = function (name) {\n let video = document.getElementById(\"video\");\n let context = DOM.context2d(defaults.vwidth, defaults.vheight);\n context.drawImage(video, 0, 0, defaults.vwidth, defaults.vheight);\n let usercard = { name : name, picture : context.canvas.toDataURL() };\n window.localStorage.setItem('KioskUserCard',JSON.stringify(usercard));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":231,"value":"matchingNames = function (partialName) {\n let matchName = partialName;\n if (matchName.length>0) {\n matchName = matchName[0]+matchName.substring(1).toLowerCase();\n }\n let names = [];\n for (let d of data) {\n let name = d.Nome;\n if (name.slice(0,matchName.length) == matchName) {\n names.push (name);\n if (names.length > 300) break;\n }\n }\n if (names.length == 0) names.push (matchName);\n return names;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":88,"value":"mutable capabilities = \"\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":86,"value":"function attachWebcam(video) {\n if (navigator.mediaDevices.getUserMedia) { \n navigator.mediaDevices.getUserMedia({video: true})\n .then(function(stream) {\n video.srcObject = stream;\n mutable capabilities = stream.getVideoTracks()[0].getCapabilities();\n })\n .catch(function(err0r) {\n mutable capabilities = \"No Video Camera\";\n });\n return \"OK\"\n }\n return \"navigator does not support mediaDevices\"\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":186,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":188,"value":"import { data, chart as nameChart } from \"@esperanc/nomes-populares-no-brasil\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":411,"value":"data","pinned":false,"hidden":false,"mode":"ojs"},{"id":414,"value":"scaledChart = function (names,scale=1.0) {\n let chart = nameChart(names);\n let svg = chart.querySelector(\"svg\");\n svg.style.height=410*scale;\n svg.style.width=610*scale;\n return chart;\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}