node-openvg-canvas

(Portuguese)
What's node-openvg-canvas, how to use it and what is the platform it runs on.
Covers raspberry pi, node, openvg and html canvas.

Transcript

1. node-openvg-canvas Sangue, Suor e o Camandro Sábado, 15 de Dezembro de 12
2. Olá! • @luismreis Sábado, 15 de Dezembro de 12
3. Raspberry Pi • Computador do tamanho de um cartão de visita - mas isso vocês já sabem... • É powered-by um Broadcom BCM2835, que é um System On a Chip que inclui um GPU VideoCore 4. • O BCM não é um CPU com um GPU integrado. É um GPU com um CPU de brinde. • (memory-split) Sábado, 15 de Dezembro de 12
4. Programação Gráfica no rPI • A distribuição standard do rPI inclui bibliotecas para: • OpenGL/ES • OpenVG • OpenMAX Sábado, 15 de Dezembro de 12
5. Pilha Fonte: http://elinux.org/RPi_VideoCore_APIs Sábado, 15 de Dezembro de 12
6. node.js no rPI • node 0.6.x está à distância de um apt-get install. • node 0.8.x compila out-of-the-box desde o 0.8.10. • Código de origem tem um buffer de 10MB para operações de SSL. Funciona sem problemas com 512kB. • V8 tem muito menos optimizações em ARM do que em x86. Sábado, 15 de Dezembro de 12
7. OpenVG no rPI • Módulo node-openvg suporta a API completa de OpenVG. • Driver de EGL tem um bug na inicialização. Esta tem de ser feita antes do bootstrap do V8. • O node tem hooks para inicialização após o bootstrap do V8, mas não antes. • Solução: Usar o LD_LIBRARY_PRELOAD • Basta arrancar o node com o comando node- openvg. Sábado, 15 de Dezembro de 12
8. Canvas sobre OpenVG • OpenVG foi criado para suportar SVG e não Canvas. • Módulo openvg-canvas • Executável: node-canvas • Implementação actual (1.0) tem paridade com os browsers correntes à excepção do suporte para dropShadow (que já está a caminho). • Algumas funcionalidades como paths, arcos de elipse e texto sobre curvas superam os browsers actuais. Sábado, 15 de Dezembro de 12
9. Pilha OpenVG Node FreeType FreeImage node-openvg-canvas node-image node-openvg EGL V8 Sábado, 15 de Dezembro de 12
10. Mãe, onde está o meu browser!?! (1) • Código para WEB var canvas = document.getElementById(‘my-canvas’); • Código para node var Canvas = require(‘Canvas’); var canvas = new Canvas(); Sábado, 15 de Dezembro de 12
11. Mãe, onde está o meu browser!?! (2) • Código para WEB // Actually no code • Código para node canvas.vgSwapBuffers(); Sábado, 15 de Dezembro de 12
12. Mãe, onde está o meu browser!?! (3) • Código para WEB var img = new Image(); // Create new img element img.src = 'myImage.png'; • Código para node var Canvas = require(‘Canvas’); var Image = Canvas.Image; var img = new Image(); img.src = fs.readFileSync(__dirname + '/images/grid.gif'); // Buffer img.vgDestroy(); // Sorry, no GC for now Sábado, 15 de Dezembro de 12
13. Mãe, onde está o meu browser!?! (4) • Código para WEB var handle = window.requestAnimationFrame(animloop); • Código para node var handle = requestAnimationFrame(animloop); // Sorry: global scope Sábado, 15 de Dezembro de 12
14. Suporte WEB + node • Projecto https://github.com/luismreis/lxjs-tweetwall • Mover o código todo que pinta no canvas para um módulo isolado. • Se for preciso usar imagens, implementar um destroy que seja um no-op no browser. Sábado, 15 de Dezembro de 12
15. Futuro • Usar vários objectos Canvas no mesmo ecrã. • Combinar com módulos para leitura de teclado e rato (ou outros). • Combinar com módulo para leitura de CEC (Controlo remoto via HDMI). • Implementar um backend do ACE em Canvas. • Implementar uma demo à Bret Victor. (http://worrydream.com/ LearnableProgramming/) • Implementar processing.js (sobre Canvas ou OpenVG ??) Sábado, 15 de Dezembro de 12
16. Divirtam-se! Obrigado! Sábado, 15 de Dezembro de 12