31:T4c4,md `O código HTML + Javascript completo que carrega alguns elementos deste documeto está funcionando em [https://www.ranoya.com/public/PCD/observable-embed.html](https://www.ranoya.com/public/PCD/observable-embed.html). O código deste documento está inteiramente apresentado abaixo: \`\`\`html

\`\`\` `32:T53c,md`O código acima insere 3 elementos (células) deste documento Observable (ou mais precisamente, do documento original, pois este aqui é um *fork* dele) na página HTML externa. Os elementos que serão incorporados são a variável \`gt\` (que contém o *sketch* de Processing funcionando), a variável \`viewof k\` (que contém a barra de entrada de valores de \`k\`), e a variável \`meuSketch\` (que contém o código Processing). Estas três células serão exibidas no código HTML externo. Os elementos que serão exibidos estão definidos na *array associativa* \`cell2div\`. No trecho do código: \`\`\`js cell2div['gt'] = 'viz'; cell2div['viewof k'] = 'entrada'; cell2div['meuSketch'] = 'codigo'; \`\`\` O índice da variável indica o nome da célula Observable, e o valor da variável indica o *id* do elemento HTML. Logo, a célula \`viewof k\` será inserida no \`

\` que possui o *id* \`entrada\`: \`\`\`html

\`\`\` Naturalmente, ao criar seus documentos e variáveis no Observable, você precisará modificar este trecho do código para apresentar as celulas desejadas nos elementos escolhidos do seu código HTML. Você pode incluir apenas uma única célula, ou pode incluir todas as células de seu documento Observable. `33:T4ed,md`Um exemplo que informa o valor original da variável \`k\`, e o substitui por \`0\`, está funcionando no endereço [https://www.ranoya.com/public/PCD/observable-variaveis.html](https://www.ranoya.com/public/PCD/observable-variaveis.html), e seu código está integralmente abaixo: \`\`\`html

\`\`\` `34:[] 2f:{"title":"O que se faz no Observable, não fica só no Observable","cells":[{"id":148,"value":"md`# O que se faz no Observable, não fica só no Observable`","pinned":false,"hidden":false,"mode":"ojs"},{"id":143,"value":"html`\n\n

\n\n

por Guilherme Ranoya

\n\n

@ranoya

\n\n

documento original no Observable

\n\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":0,"value":"md`\n## Usando Embed com programação Javascript para aproveitar códigos construídos no Observable em qualquer website\n\nEste texto e códigos estão baseado no artigo do Medium [Using ObservableHQ in JavaScript with your own data](https://towardsdatascience.com/using-an-observablehq-plot-in-javascript-with-your-own-data-5eabeb6224f5) de Daniel Elis, e no [Advanced Embedding and Downloading](https://next.observablehq.com/@observablehq/downloading-and-embedding-notebooks) de Jeremy Ashkenas.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":61,"value":"md`
** 1. A parte do Observable **`","pinned":false,"hidden":false,"mode":"ojs"},{"id":34,"value":"md`Iremos utilizar um código em Processing para este exemplo, então, a primeira etapa aqui é *importar* o Processing para o Observable.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"import {processing} from '@ranoya/processing'","pinned":false,"hidden":false,"mode":"ojs"},{"id":43,"value":"md`O código de Processing que utilizaremos é este abaixo, o mesmo presente no documento [As formas mais fáceis de se utilizar Processing no Observable](https://next.observablehq.com/@processingbrasil/as-formas-mais-faceis-de-se-utilizar-processing-no-observab?collection=@processingbrasil/introducoes). A única alteração feita é na **última linha** onde o valor \\`30\\` original foi substituído por uma variável \\`k\\`, e, consequentemente, sua visualização mostrará o código como: \n\n\\`\\`\\`\nrect(${k}, 30, radius, radius);\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"meuSketch = `\n void setup() {\n size(160, 160);\n background(255);\n }\n void draw() {\n stroke(#2299FF);\n fill(255);\n radius = sin(frameCount / 60) * 50 + 50;\n rect(` + k + `, 30, radius, radius);\n}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":170,"value":"meuSketch2 = `\n void setup() {\n size(360, 260);\n background(255);\n }\n void draw() {\n stroke(#000000);\n fill(255);\n radius = sin(frameCount / 20) * 50 + 50;\n rect(` +\n k +\n `, 30, radius, radius);\n}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":165,"value":"Este é um trecho de código documentado:\n\n```js\nlet estavariavel = 0;\nlet estafuncao = function() {\n\n return \"nada\";\n \n}\n\n```","pinned":false,"hidden":false,"mode":"md"},{"id":38,"value":"md`A variável \\`k\\` que registrará um parâmetro a ser modificado no código, recebe valores através de uma barra gráfica de entrada. Essa variável modificará o valor no eixo \\`x\\` do canto superior esquerdo do retângulo desenhado pelo código. Repare que a modificação do valor de \\`k\\` altera imediatamente o código acima, e as linhas \\`rect(${k},30, radius, radius);\\` nas explicações textuais neste documento.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"viewof k = html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":20,"value":"k","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"gt = processing(meuSketch, 'width: 160px; height: 170px;')","pinned":true,"hidden":false,"mode":"ojs"},{"id":167,"value":"gt2 = processing(meuSketch2, \"width: 360px; height: 270px;\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":56,"value":"md`Também se incluiu uma modificação ao invocar a função \\`processing()\\`, atribuída agora à variável \\`gt\\`. Esta modificação é importante pois a inclusão de células do Observable em documentos HTML externos, por programação Javascript, necessita que estas celulas tenham um nome (estejam associadas a uma variável).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":64,"value":"md`
** 2. A parte externa (HTML + Javascript) **`","pinned":false,"hidden":false,"mode":"ojs"},{"id":67,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":72,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":85,"value":"md`O segundo ponto do código que precisará ser modificado é aquele que informa de qual *notebook* Observable as variáveis/células são retiradas. Isto é definido aqui:\n\n\\`\\`\\`js\n import notebook from \"https://api.observablehq.com/@ranoya/embed-test.js?v=3\";\n\\`\\`\\`\n\nEste endereço precisará ser modificado com o endereço do seu próprio documento Observable. É importante perceber que este endereço **não é** a URL do documento, mas sim a URL da API do Observable, com o seu usuário no lugar de \\`@ranoya\\`, e com o nome do seu documento no lugar de \\`embed-test\\`. O resto deste endereço não deve ser modificado.\n\nOutro ponto relevante é que estamos utilizando um **módulo javascript**, que opera com sitaxe \\`stric\\`, e possui, dessa forma, algumas regras importantes como não acessar outros códigos na página, não utilizar variáveis globais, não utilizar \\`eval()\\`, e a declaração obrigatória de todas as variáveis com \\`const\\` ou \\`let\\`. \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":118,"value":"md`
\n**3. Modificando ou capturando valores e variáveis externamente**`","pinned":false,"hidden":false,"mode":"ojs"},{"id":122,"value":"md`Por fim, é possível modificar os valores das variáveis/células importadas do Observable, ou capturar estes valores através de Javascript para que aquilo que está sendo apresentado no documento HTML possa também interagir diretamente com outros elementos presentes. Para alterar os valores/células do Observable, inclua a seguinte instrução no seu código Javascript:\n\n\\`\\`\\`js\nfromObservable.redefine(variavel,valor);\n\\`\\`\\`\n\n**Exemplo:**\n\\`\\`\\`\nfromObservable.redefine(\"k\", 30);\n\\`\\`\\`\n\nIsso travará o valor de \\`k\\` em \\`30\\`, independente do valor da barra de entrada importada do documento Observable.\n\nSe desejar obter o valor de alguma célula basta utilizar a instrução abaixo:\n\n\\`\\`\\`\nlet minhanovavariavel = await fromObservable.value(variavelObservable);\n\\`\\`\\`\n\n**Exemplo:**\n\\`\\`\\`\nlet valordacelula_k = await fromObservable.value(\"k\");\n\\`\\`\\`\n\nEsta instrução atribuirá à variável \\`valordacelula_k\\` o valor atual da variável \\`k\\`.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":138,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}