Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Hyperapp, Flipdots & Pixelkunst

Hyperapp, Flipdots & Pixelkunst

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

Michael Geers

October 19, 2018
Tweet

More Decks by Michael Geers

Other Decks in Technology

Transcript

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

    View Slide

  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

    View Slide

  3. Interaktionen
    Zentraler State
    Template
    Initialisierung
    counter.js
    hyperapp
    in action

    View Slide

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

    View Slide

  5. And Now for Something
    Completely Different

    View Slide

  6. Homeoffice

    View Slide

  7. Home

    View Slide

  8. View Slide

  9. + =
    @AndreSchroeter

    View Slide

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

    View Slide

  11. On Air LED

    View Slide

  12. Mate
    Kisten
    Display
    32C3
    Hamburg

    View Slide

  13. Mechanische
    Displays

    View Slide

  14. Split-Flap
    Display

    View Slide

  15. View Slide

  16. View Slide

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

    View Slide

  18. Flip-Dot
    Display

    View Slide

  19. View Slide

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

    View Slide

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

    Arduino/RPi *yay*

    - 24V Spannung
    - Erweiterbar über

    Steckverbindung

    View Slide

  22. Serielle
    Ansteuerung
    node.js

    View Slide

  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

    View Slide

  24. RS485 to

    USB Adapter
    Raspberry Pi
    Zero W
    Konfiguration
    (Adresse/Mode)
    Strom
    Steuersignal
    Rückseite
    24 V Netzteil

    View Slide

  25. On Air
    Flip-Dot
    Display

    View Slide

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

    View Slide

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

    View Slide

  28. Zuverlässigkeit !important

    View Slide

  29. Steuerung
    Version 1: Button

    View Slide

  30. Steuerung
    Version 1.5: Button mit LED

    View Slide

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

    View Slide

  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

    View Slide

  33. Pixel
    49

    View Slide

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

    View Slide

  35. Kids Pixel Editor
    #

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  40. Module Bundler
    like Webpack but
    Batteries
    Included
    Zero Config
    Schnell!
    https://parceljs.org/

    View Slide

  41. Wenig Pixel - Viele Möglichkeiten
    Male eine Rakete!

    View Slide

  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

    View Slide

  43. Animations

    View Slide

  44. Navigation State

    View Slide

  45. Possible
    Takeaways

    View Slide

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

    View Slide

  47. Keine Angst
    vor Hardware

    View Slide

  48. Simple is
    Beautiful

    View Slide

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

    View Slide

  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

    View Slide