Hyperapp, Flipdots & Pixelkunst

Hyperapp, Flipdots & Pixelkunst

Vortrag auf der neuland.conf, Bremen
https://www.youtube.com/watch?v=IeLGfhHNqM8

457365e2e75c27f3e1c3a3744f5c5e4b?s=128

Michael Geers

October 19, 2018
Tweet

Transcript

  1. Hyperapp Flipdots & Pixelkunst neuland.conf 2018 Michael Geers | @naltatis

  2. hyperapp.js Functional DOM Diffing Komponenten State Management Elm, React/Redux The

    Important Parts 1kB JavaScript Vergleich: ~30kB Elm, ~40kB React+Redux, ~60kB Vue, ~110kB Angular
  3. Interaktionen Zentraler State Template Initialisierung counter.js hyperapp in action

  4. Interaktionen Zentraler State Template Initialisierung counter.jsx hyperapp in action

  5. And Now for Something Completely Different

  6. Homeoffice

  7. Home

  8. None
  9. + = @AndreSchroeter

  10. Keine Glastür Headset für Musik !

  11. On Air LED

  12. Mate Kisten Display 32C3 Hamburg

  13. Mechanische Displays

  14. Split-Flap Display

  15. None
  16. None
  17. https://www.magazin.com/wanduhr-klappzahlenuhr-brick-p1463864/

  18. Flip-Dot Display

  19. None
  20. https://breakfastny.com/flip-disc

  21. AlfaZeta - Flip-Dot Boards XY5 - https://flipdots.com/ 7x7 Dev Board

    - Serielle Steuerung RS485
 Arduino/RPi *yay*
 - 24V Spannung - Erweiterbar über
 Steckverbindung
  22. Serielle Ansteuerung node.js

  23. 0 1 0 0 0 0 0 0 0 1

    1 1 1 1 0 0 1 0 1 1 0 0 0 1 1 1 1 1 0 0 1 0 1 1 0 0 0 1 1 1 1 1 0 1 0 0 0 0 0 Payload berechnen parseInt("0100000", 2) => 32 // 0x20 Jede Spalte ist ein Byte parseInt("0011111", 2) => 31 // 0x1f Basis 2
  24. RS485 to
 USB Adapter Raspberry Pi Zero W Konfiguration (Adresse/Mode)

    Strom Steuersignal Rückseite 24 V Netzteil
  25. On Air Flip-Dot Display

  26. Inhalt? Platz für zwei Buchstaben Lauftext? " Updates sind laut!

  27. Icons Mikro an Kamera an Luft ist rein Zufälliges Monster

  28. Zuverlässigkeit !important

  29. Steuerung Version 1: Button

  30. Steuerung Version 1.5: Button mit LED

  31. Steuerung Version 2: Macbook Micro- und Kamera-Aktivität (automatisch) https://obdev.at/products/microsnitch/

  32. Steuerung Micro Snitch Log-File On-Air Daemon Webservice Flip-Dot Raspberry Pi

    Macbook PUT /status/audio PUT /status/video PUT /status/idle Local Wifi
  33. Pixel 49

  34. Pixel Editor Simple Webapp Etwas CSS Magie hyperapp! Live Vorschau

    *flip*flip*
  35. Kids Pixel Editor #

  36. JavaScript + Types Tooling Support (VSCode, IntelliJ, …)

  37. JavaScript + Types Tooling Support (VSCode, IntelliJ, …)

  38. JavaScript + Types Tooling Support (VSCode, IntelliJ, …)

  39. Debugging Redux DevTools kompatibel https://github.com/andyrj/hyperapp-redux-devtools

  40. Module Bundler like Webpack but Batteries Included Zero Config Schnell!

    https://parceljs.org/
  41. Wenig Pixel - Viele Möglichkeiten Male eine Rakete!

  42. Try it yourself! https://7x7.ninja/ https://github.com/naltatis/7x7ninja Und nein, das ist nicht

    mit meinem Display gekoppelt :) Responsive
 Progressive Webapp Lighthouse Score 100 :) 11kb Script
  43. Animations

  44. Navigation State

  45. Possible Takeaways

  46. hyperapp rocks hyperapp + TypeScript ~= Elm https://github.com/JorgeBucaran/hyperapp

  47. Keine Angst vor Hardware

  48. Simple is Beautiful

  49. Danke! neuland.conf 2018 Michael Geers | @naltatis

  50. Credits John Cleese Desk https://ichef.bbci.co.uk/images/ic/1200x675/p01gk35d.jpg Icons by Freepik https://www.flaticon.com Split-Flap

    Animation+ https://en.wikipedia.org/wiki/Split-flap_display Flip-Disk Schema https://breakfastny.com/flip-disc-system ŠJů (cs:ŠJů) - Own work https://commons.wikimedia.org/w/index.php?curid=10771385 Code: Carbon https://carbon.now.sh/ Fonts: Dank Mono & BPdots https://dank.sh/ https://www.fontsquirrel.com/fonts/BPdots