29:null 2a:["$","title",null,{"children":"Interface Redes de Nós | Claudio Esperança | Observable"}] 2f:Ta66,kiosk = { let kiosk = html`

`; let maindiv = html`

Quem é você?

` // kiosk.append(matchingNamesBox(partialName)); maindiv.style.border = "20px solid green;"; kiosk.append(maindiv); let videodiv = html`

`; let video = html`

`; attachWebcam(video); videodiv.append(video); maindiv.append(videodiv); let invert = invertColors.length>0 ? 100 : 0; let showChoice = function (selectedName) { let keyDiv = maindiv.querySelector("div.keyboard"); let removeChoice = function() { maindiv.removeChild(maindiv.querySelector("div.statistics")); keyDiv.style.visibility = "visible"; keyDiv.style.display = "block"; videodiv.style.visibility = "visible"; videodiv.style.display = "block"; } let action = function () { sendCard(selectedName); removeChoice(); } let dismiss = function() { removeChoice(); } keyDiv.style.visibility = "hidden"; keyDiv.style.display = "none"; videodiv.style.visibility = "hidden"; videodiv.style.display = "none"; let statistics = showStatistics(selectedName,action,dismiss); let stat = statistics.querySelector("div.chartpanel"); stat.querySelector ("canvas").style.filter = "invert("+invert+")"; maindiv.append (statistics); } maindiv.append(keyboard2(showChoice)); let [w,h,s,c,b] = [960,960*3/4,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*3/4),'white','black']; } else { [w,h,s,c,b] = [960,960*3/4,1,'black','white']; } //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+");"; kiosk.style = `width: ${w/s}px; height: ${h/s}px; border: 4px solid greeen; filter:invert(${invert}%); transform:scale(${s});`; video.style.filter = "invert("+invert+")"; let stat = maindiv.querySelector("div.chartpanel canvas"); if (stat) { stat.style.filter = "invert("+invert+")"; } } onresize(); window.addEventListener('resize', onresize, false); invalidation.then(function () { window.removeEventListener('resize', onresize); }) return kiosk; } 30:T6f3,showStatistics = function (name, action, dismiss) { mutable lastStatistics = [name,action,dismiss]; let mainDiv = html`

`; mainDiv.style = `position:relative;text-align:center;width:100%;height:600px;`; let keyPanel = html`

`; keyPanel.style.position="absolute"; keyPanel.style["margin-top"]="200px"; keyPanel.style["z-index"]="1"; keyPanel.style.left="0px"; let cancelButton = html``; cancelButton.onclick = dismiss; let acceptButton = html``; acceptButton.onclick = action; let keyDiv = html`

`; keyPanel.append(cancelButton); keyPanel.append(keyDiv); keyPanel.append(acceptButton); mainDiv.append(keyPanel); let matchName = name; if (matchName.length>0) { matchName = matchName[0]+matchName.substring(1).toLowerCase(); } let chartPanel = html`

`; chartPanel.style["margin-top"]="10px"; chartPanel.style["margin-right"]="0px"; chartPanel.style.position="absolute"; chartPanel.style["z-index"]="10"; chartPanel.style["display"]="block"; mainDiv.append(chartPanel); let chart = scaledChart(matchName); chart.style = `display:inline-block;pointer-events: none;`; chartPanel.append(chart); chartPanel.append(html`
`); let disclaimer = html`

`; disclaimer.innerHTML = `Ao clicar novamente no botão ACEITAR você autoriza a inclusão de seus dados nesta obra`; chartPanel.append(disclaimer); return mainDiv; }31:Tcbe,// @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` `32:Tb9b,keyboard2 = function(showChoice) { let mainDiv = html`

`; let display = html``; mainDiv.append(display); let cancelFunction = function() { mutable name = ""; display.value = ""; mutable partialName = ""; setSuggestions(""); } let enterFunction = function(selectedName) { if (selectedName.length < 2) { cancelFunction(); return; } mutable name = selectedName; display.value = ""; mutable partialName = ""; showChoice(selectedName); setSuggestions(""); } let keyPanel = html`

`; let keyCancelButton = html``; let keyAcceptButton = html``; keyCancelButton.onclick = cancelFunction; keyAcceptButton.onclick = () => enterFunction(display.value); 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 () { enterFunction(name) }; suggestions.append(nameButton); } } setSuggestions (""); for (let row of [" QWERTYUIOP","ASDFGHJKL d"," ZXCVBNM "]) { 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; }33:T6d4,scaledChart = { let locale = { "decimal": ",", "thousands": ".", "grouping": [3], "currency": ["R$", ""] } d3.formatDefaultLocale(locale); var format = d3.format(","); return function (name) { let d = datum(name); if (d == null) { d = {Nome: name, ate1930: 0, ate1940: 0, ate1950: 0, ate1960: 0, ate1970: 0, ate1980: 0, ate1990: 0, ate2000: 0, ate2010: 0}; } let total = 0; for (let field in d) { if (field[0] == 'a') total += d[field]; } let chart = nameChart(d,600,400,'canvas'); let chartCanvas = chart.querySelector("canvas"); let canvas = DOM.canvas(600,520); let ctx = canvas.getContext("2d"); ctx.fillStyle = "#F5F5F5"; ctx.fillRect (0,0,600,450) let video = document.querySelector("#video"); if (video) { ctx.drawImage(video, 72, 14, 514, 360); lastPhoto.getContext("2d").drawImage(video, 0,0,400,300); } mutable photoCount++; ctx.textAlign = "center"; ctx.fillStyle = "black"; ctx.font = "Bold 24px Fira Sans Condensed"; ctx.fillText ("DÉCADAS x POPULARIDADE(%)", 56+538/2,400,538,40); ctx.drawImage(chartCanvas,0,43,600,400); ctx.font = "Bold 70px Fira Sans Condensed"; ctx.fillStyle = "rgb(247, 244, 190)"; ctx.shadowColor = '#000'; ctx.shadowOffsetY = 2; ctx.shadowOffsetX = 2; ctx.fillText (name, 56+538/2,74,538,40); ctx.fillStyle = "rgb(247, 213, 0)"; ctx.fillRect (0,445,600,80); ctx.fillStyle = 'black'; ctx.shadowColor = '#0000'; ctx.font = "Bold 50px Fira Sans Condensed"; total = (total || 1); ctx.fillText (format(total)+ (total == 1 ? " tem" : " têm")+" esse nome", 56+538/2,500,600,40); return canvas; } }34:T5cd,nameChart = function (d, width = 600*1.2, height = 400*1.2, renderer = 'svg') { let locale = { "decimal": ",", "thousands": ".", "grouping": [3], "currency": ["R$", ""] } d3.formatDefaultLocale(locale); let data = vegavalues(d); let x = vega_explicit({ data: {values: data}, config: { style: { cell: { stroke: "transparent" } } }, layer: [{ mark: {type: "line", interpolate: "linear" , "color": "rgb(0,0,0)", xOffset:3, yOffset:2}, width: width, height: height, encoding: { x: { field: "category", type: "ordinal", axis: {labelAngle:"0", title: "", labelFont: "Fira Mono", titleFontSize: 14, labelFontSize: 16} }, y: { field: "value", type: "quantitative", axis: {format: "f", title: "", labelFont: "Fira Mono", format: ">7g", titleFontSize: 14, labelFontSize: 16, grid : false} }, opacity: { value: 0.3}, size: { value:14 }, } }, { mark: {type: "line", interpolate: "linear" , "color": "rgb(247, 213, 0)"}, width: width, height: height, encoding: { x: { field: "category", type: "ordinal", }, y: { field: "value", type: "quantitative", }, opacity: { value: 0.8}, size: { value:14 }, } }] }, renderer); return x; }35:[] 2d:{"id":"3feecae6840e517c","slug":"interface-redes-de-nos","title":"Interface Redes de Nós ","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2018-09-01T15:08:45.837Z","update_time":"$D2018-09-18T23:25:58.624Z","view_time":null,"first_public_time":"$D2018-09-01T21:52:26.498Z","has_unpublished_edits":null,"fork":{"id":"342b076ad99f5977","slug":"kiosk-interface","title":"Kiosk interface","owner":{"id":"e9fcee55f21948e0","login":"esperanc","name":"Claudio Esperança"}},"stars":0,"starred":false,"owner":{"type":"team","id":"e9fcee55f21948e0","login":"esperanc","name":"Claudio Esperança","avatar_url":"https://avatars-next.observableusercontent.com/91db65fe4bf8e490e5ff1a548612f36ccc04fa7781189e7e4dc7ba6633a66e52","tier":"starter_2024"},"version":1198,"publish_version":1198,"role":null,"authored":false,"authors":[{"type":"individual","id":"591dcad3c6121253","login":"esperanc","name":"Claudio Esperança","avatar_url":"https://avatars-next.observableusercontent.com/91db65fe4bf8e490e5ff1a548612f36ccc04fa7781189e7e4dc7ba6633a66e52","tier":null}],"members":[{"type":"individual","id":"591dcad3c6121253","login":"esperanc","name":"Claudio Esperança","avatar_url":"https://avatars-next.observableusercontent.com/91db65fe4bf8e490e5ff1a548612f36ccc04fa7781189e7e4dc7ba6633a66e52","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Interface Redes de Nós ","cells":[{"id":0,"value":"md`# Interface Redes de Nós \n\nInterface para o quiosque\n`","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":1155,"value":"chartUpdate = {\n let i = 0;\n while (true) {\n await Promises.delay(200);\n let kdiv = kiosk.querySelector (\"div.kiosk\");\n let stat = kdiv.querySelector (\"div.statistics\");\n if (!!stat) {\n let [name, afunc, cfunc] = mutable lastStatistics;\n let chartPanel = stat.querySelector(\"div.chartpanel\");\n let canvas = chartPanel.querySelector (\"canvas\");\n let newCanvas = new scaledChart (name);\n chartPanel.replaceChild(newCanvas, canvas);\n let invert = invertColors.length>0 ? 100 : 0;\n if (invert) {\n newCanvas.style.filter = \"invert(\"+invert+\")\";\n }\n yield \"chart updated: \"+(i++)\n }\n else i = 0;\n }\n}","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":1180,"value":"mutable lastStatistics = []","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":566,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":919,"value":"cardReductionFactor = 0.4","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":809,"value":"mutable cardDataUrl = null","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":917,"value":"lastCard = {\n if (cardDataUrl) {\n let img = new Image();\n img.src = cardDataUrl;\n return img;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1097,"value":"mutable photoCount = 0","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1094,"value":"lastPhoto = DOM.canvas(400,300)\n ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":902,"value":"resizeImage = function (img, fraction) {\n let canvas = DOM.canvas (img.width*fraction,img.height*fraction);\n let ctx = canvas.getContext(\"2d\");\n ctx.drawImage(img,0,0,canvas.width,canvas.height);\n return canvas;\n}\n ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","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":"sendCard = function (name) {\n let chart = document.querySelector (\"div.statistics canvas\");\n mutable cardDataUrl = resizeImage(chart,cardReductionFactor).toDataURL();\n let usercard = { name : name, picture : mutable cardDataUrl };\n window.localStorage.setItem('KioskUserCard',JSON.stringify(usercard));\n try {\n sendPhoto(name)\n } catch (e) {\n console.log ('server not running?')\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1108,"value":"sendPhoto = function (name) {\n let photoDataUrlvalue = lastPhoto.toDataURL();\n var XHR = new XMLHttpRequest();\n var FD = new FormData();\n FD.append ('name', name);\n FD.append ('photo', photoDataUrlvalue);\n XHR.onload = function(event) {\n console.log (event.target.responseText);\n }\n XHR.onerror = function(event) {\n console.log ('Oops! Something went wrong.');\n };\n XHR.open(\"POST\", \"/cgi-bin/storephoto.py\");\n\n // The data sent is what the user provided in the form\n XHR.send(FD);\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":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":811,"value":"$32","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[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","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":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","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":188,"value":"import { data, datum, vegavalues } from \"@esperanc/nomes-populares-no-brasil\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":411,"value":"data","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":414,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":793,"value":"vega_explicit = {\n const [Vega, VegaLite] = await Promise.all([\n require(\"vega@4/build/vega.min.js\"),\n require('vega-lite@3.0.0-rc4/build/vega-lite.min.js').catch(() => window.vl)\n ]);\n Vega.formatLocale({\n \"decimal\": \",\",\n \"thousands\": \".\",\n \"grouping\": [3],\n \"currency\": [\"R$\", \"\"]\n });\n return (spec, renderer = 'svg') => {\n const div = document.createElement(\"div\");\n div.value = new Vega.View(Vega.parse(VegaLite.compile(spec).spec)).renderer(renderer).initialize(div).run();\n return div;\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":734,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 2e:"$2d:body"