New Dashboard 2.0 Tutorial: Custom Templates

Dashboard
1

Another tutorial is up: https://www.youtube.com/watch?v=7bj_DFnRtU8

This talks through from the very basics of HTML/JS in a custom template nodes, through to covering VueJS essentials and examples of using the Vuetify Component Library.

The full chapter list from the YouTube video detail the top-level content:

  • 00:00 Introduction
  • 00:30 What we will build
  • 03:07 Getting ISS Tracking Data
  • 06:38 First Template - Standard HTML/JS/CSS
  • 10:35 In-Built Variables & Functions
  • 18:15 Adding an iframe
  • 21:43 Add Button to drive API
  • 23:09 Vue: Component Structure
  • 29:15 Vue: Conditional Rendering
  • 31:25 Vue: List Rendering
  • 32:50 Vue: Attribute Binding
  • 36:23 Vue: Form Binding (setup)
  • 38:45 Vue: Form Binding (v-model)
  • 40:12 Vuetify Component Library
  • 42:45 Sending Data
  • 45:42 Vue: Event Handlers
  • 47:08 Example: City Distance to ISS
  • 57:15 Example: Combining Inputs
  • 01:02:43 Recap

Feedback on this, the other tutorials, and ideas for future tutorials are all most welcome.

2 Likes
2

Is there a link to an index of tutorials that we can post when someone asks for help?

3

We are gathering them as a playlist on the FlowFuse YouTube Account: https://www.youtube.com/playlist?list=PLpcyqc7kNgp3TWYwWzC7iJtN8XtEhKqlY

Link to that is available on the FlowFuse YouTube profile, I'm also adding them to the Dashboard docs homepage, and the Getting Started page.

4

Great. I will provide a canned text response we can use here, if I can remember how to do it.

5

I have added a canned template to the forum, for getting started with d2:

See Getting Started | Node-RED Dashboard 2.0 for docs and links to video tutorials for Dashboard 2.0 (@flowfuse/node-red-dashboard)

1 Like
6

Thank you very much Joe. This is very helpful.

1 Like