Nuggets

Building real-time projector dashboards with node.js, Socket.IO, and Raspberry Pi.

Transcript

1. Throwing Up Numbers
   

   View Slide

2. @robhruska
   

   View Slide

3. Dashboards
   

   View Slide

4. View Slide

5. View Slide

6. View Slide

7. Nuggets
   

   View Slide

8. View Slide

9. View Slide

10. They’re Awesome.
    

    View Slide

11. View Slide

12. View Slide

13. Communal Dashboards
    

    View Slide

14. Communal Dashboards
    With the growing interest in data analytics and visualizations, we're
    seeing more effort put into interesting visualizations that allow people to
    draw insight from data floating around in an organization. Most of these
    dashboards are aimed at individual usage, but there is a growing
    tendency to use them for a more communal purpose.
    “
    martinfowler.com/bliki/CommunalDashboard.html
    ...creating an emotional engagement with how the business is running.
    “
    ...a form information radiator.
    “
    

    View Slide

15. Communal Dashboards
    martinfowler.com/bliki/CommunalDashboard.html Photo: Chris Kapcar (via Martin Fowler)
    

    View Slide

16. This is less about helping people make
    decisions, more about educating people
    about what's happening, providing
    background information and context for their
    regular work.
    “
    Communal Dashboards
    martinfowler.com/bliki/CommunalDashboard.html
    

    View Slide

17. Today’s Menu
    ● Project structure
    ● Examples
    ● Hardware
    

    View Slide

18. socket.io
    event handler / emitter
    socket.io
    client
    node.js browser
    message
    subscribe
    

    View Slide

19. http://nodejs.org
    node.js
    

    View Slide

20. Event loop
    ● Single-threaded message processor
    Non-blocking I/O
    ● Node does all the I/O outside the event loop
    

    View Slide

21. View Slide

22. View Slide

23. http://nodejs.org
    node.js
    

    View Slide

24. socket.io
    http://socket.io
    

    View Slide

25. Client
    Server
    

    View Slide

26. View Slide

27. nugget
    https://github.com/hudl/nugget
    

    View Slide

28. socket.io
    event handler / emitter
    Datasource
    External
    API
    subscribe:
    stat
    socket.io
    client
    stat
    node.js browser
    Display
    stat Display
    Datasource
    stat
    stat
    subscribe:
    stat
    

    View Slide

29. nugget
    |_ client
    |_ server
    |_ user
    |_ datasources
    |_ displays
    |_ resources
    |_ server-config.json
    |_ datasources
    |_ datasource-name.js
    |_ ...
    |_ displays
    |_ display-name.css
    |_ display-name.js
    |_ display-name.html
    |_ ...
    

    View Slide

30. current-time
    Example
    

    View Slide

31. socket.io
    event handler / emitter
    system-time
    System
    Time
    subscribe:
    time
    socket.io
    client
    time
    node.js browser
    current-time
    time
    

    View Slide

32. nugget
    |_ client
    |_ server
    |_ user
    |_ datasources
    |_ displays
    |_ resources
    |_ server-config.json
    |_ datasources
    |_ server-time.js
    |_ ...
    |_ displays
    |_ current-time.css
    |_ current-time.js
    |_ current-time.html
    |_ ...
    

    View Slide

33. server/user/datasources/system-time.js
    

    View Slide

34. server/user/displays/current-time.js
    

    View Slide

35. server/user/displays/current-time.css
    server/user/displays/current-time.html
    

    View Slide

36. current-time
    Demo
    

    View Slide

37. current-users
    Example
    

    View Slide

38. socket.io
    event handler / emitter
    current-users
    Chartbeat
    subscribe:
    current-users
    socket.io
    client
    current-users
    node.js browser
    current-users
    current-users
    Splunk
    

    View Slide

39. server/user/displays/current-users.js
    

    View Slide

40. current-users
    Demo
    

    View Slide

41. github-commits
    Example
    

    View Slide

42. View Slide

43. server/user/displays/github-commits.js
    http://your-server/inbound/datasource-name
    

    View Slide

44. github-commits
    Demo
    

    View Slide

45. Control Panel
    

    View Slide

46. View Slide

47. View Slide

48. Hardware
    

    View Slide

49. Acer X1220H
    $380
    Raspberry Pi
    $35
    

    View Slide

50. Edimax EW-7811Un - $10
    Rosewill RPM-MP0010 - $35
    2.1A USB wall charger - $10 4-port powered USB hub - $15
    

    View Slide

51. Shopping LIst
    $380 35 10 15 35 10
    ~$500
    10
    

    View Slide

52. Automation
    ● Power on/off automatically
    ● Projector power
    

    View Slide

53. View Slide

54. Schematic: Alex Bain, http://alexba.in/
    

    View Slide

55. View Slide

56. Molten Lead
    

    View Slide

57. Images: http://sparkfun.com
    IR LED 850nm
    $0.95 x 3
    100g leaded solder
    $5.95
    10k Ohm resistor
    $0.25
    1" ProtoBoard (2)
    $2.50
    30W soldering iron
    $9.95
    12" M/F Jumper (10)
    $4.50
    PN2222 Transistor (10)
    $1.95
    

    View Slide

58. View Slide

59. View Slide

60. LIRC
    

    View Slide

61. Make Your Own Awesome
    What’s important to you and your organization?
    ● Current users
    ● GitHub commits
    ● Items purchased
    ● Videos watched
    ● App downloads
    

    View Slide

62. Fork it!
    https://github.com/hudl/nugget
    

    View Slide

63. View Slide

64. Resources
    ● @robhruska / robhruska@gmail.com
    ● http://github.com/hudl/nugget
    ● http://github.com/hudl/nugget-hudl
    ● http://elinux.org/RPi_VerifiedPeripherals
    ● http://nodejs.org/
    ● http://socket.io/
    ● http://alexba.in/blog/2013/01/06/setting-up-lirc-on-the-raspberrypi/
    

    View Slide

65. Questions
    

    View Slide