Writing Custom Templates - FlowFuse Dashboard
In this tutorial, we take a deep dive into the "Template" node. A node in Dashboard which permits you to write completely customised HTML, CSS and JS to create your own widgets.
We deep-dive into the basics of a web component, the in-built variables and functions that Dashboard provides in order to integrate seamlessly with the rest of your flow, before covering VueJS, the underlying technology that powers Dashboard widgets, and some VueJS-essentials that can really accelerate your widget development.
Useful Resources:
Node-RED Documentation: https://nodered.org/docs/
Dashboard Documentation: https://dashboard.flowfuse.com/
ISS Open Notify API Docs: http://open-notify.org/Open-Notify-AP...
Chapters:
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
