Hyperapp, Flipdots & Pixelkunst

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