focus on new button-bar widget

Author: tve

README.md

@@ -1,34 +1,10 @@
-node-red-fd-testbutton
-===============================
+node-red-fd-testnodes
+======================
 
-A few Node-RED dashboard FlexDash nodes to test simple UI nodes implemented with FlexDash.
+A collection of Node-RED test nodes for FlexDash in various states of working and non-working...
 
-## How it works...
+## Installation
 
-When a Node-RED FlexDash UI node is instantiated it calls `initWidget`, which establishes a 1-1 relationship with a widget shown in the dashboard.
-The first time the node is instantiated the widget has to be created, but later, e.g. on redeploy
-or Node-RED restarts, the existing widget is located.
-This happens by storing the ID of the "owning" node in the widget's config.
-
-FlexDash widgets have a bunch of params (equivalent to config fields), for example, title, color,
-text, value, etc.
-Each param can be given a so-called static value or a dynamically linked value:
-
-- A static value is stored in the FlexDash config json and is part of what is sent to a new
-  browser that connects so it can initialize the widgets to be shown.
-- A dynamic value is stored in a JSON data tree that is sent to the browser and is updated
-  as values in the tree are changing (kind'of a reactive observer paradigm across server and browser).
-  If a param is to receive a dynamic value, then a link into the JSON data tree is stored in
-  the config.
-
-The way FlexDash UI nodes can deal with config and values is more flexible than standard UI nodes.
-This is because FlexDash does not distinguish between config and data. Everything is a param.
-Many params are simple values, such a title or color, but some params may contain complex data
-structures, such as the data to be plotted in a chart.
-
-Each widget param can be given a static value in the NR flow editor's config panel.
-This is stored in the config.
-But an input message can override any of the params too. In that case, the config is altered to point
-"somewhere" in the JSON data tree and the value in the message is stored there.
-Unless the input message's value is null, in that case the link in the config is removed and the
-widget will use the static value again.
+Some nodes rely on the node generator in `node-red-flexdash`, which is expected to be
+in a sibling directory.
+After that `./generate.sh` should do the trick...

button-bar.html

@@ -0,0 +1,92 @@
+<!-- Node-RED editor code for the FlexDash ButtonBar widget -->
+
+<script type="module">
+  // fetch the widget info: a bunch of JSON produced by gen-widget-node.js
+  import widgetInfo from './resources/@flexdash/node-red-fd-testnodes/button-bar-info.js'
+
+  // construct defaults for the node, setting all but bool to null so widget defaults happen
+  var widgetDefaults = Object.fromEntries(Object.values(widgetInfo.props).map(p =>
+    [p.name, {value: p.default}]
+  ))
+  //console.log(widgetInfo.name, "widgetDefaults", widgetDefaults)
+  
+  // construct the palette label
+  var paletteLabel = widgetInfo.name_text.toLocaleLowerCase()
+
+  // update the text for the help sidebar
+  var helpHtml = flexdash.load_help_html(widgetInfo, paletteLabel)
+
+  flexdash.insert_general_edit("fd-button-bar", "fd-tab-general")
+
+
+  RED.nodes.registerType(widgetInfo.type_kebab, {
+    // properties of the NR node used by NR itself
+    category: 'flexdash',
+    color: "#F0E4B8",
+    inputs: 1,
+    outputs: widgetInfo.output ? 1 : 0,
+    icon: "font-awesome/fa-rocket", // icon in flow editor
+    paletteLabel,
+
+    // node config properties that the user can edit in the flow editor
+    defaults: {
+      // required fields for FlexDash Widget nodes
+      fd_container: {
+        type: "flexdash container", value: "", required: true, // grid/panel
+        validate: flexdash.validate_widget_container },
+      fd_cols: { value: 1, validate(v) { return v>0 && v<=20 } }, // widget width
+      fd_rows: { value: 1, validate(v) { return v>0 && v<=100 } }, // widget height
+      fd_array: { value: false }, // create array of this widget
+      fd_array_max: { value: 10, validate(v) { return v>0 && v<1000} }, // max array size
+      // name field of Node-RED node (standard)
+      name: { value: '' },
+  
+      // widget fields, i.e. values being transmitted to the FlexDash Widget as props
+      ...widgetDefaults,
+    },
+
+    // Node-RED node label
+    label() {
+      const lbl = this.name || paletteLabel
+      return this.fd_array ? lbl+'[ ]' : lbl // indicate whether this is an array-widget 
+    },
+    labelStyle() { return this.name ? "node_label_italic" : "" },
+
+    oneditprepare() {
+      // fetch the html to edit the widget props and insert into DOM
+      flexdash.load_props_edit(this, widgetInfo, "fd-tab-props")
+      // select last-used container
+      flexdash.select_last_container()
+
+      // manage tabs
+      const tabs = RED.tabs.create({id: "fd-tabs", onchange: function(tab) {
+        $("#fd-tabs-content").children().hide()
+        $("#" + tab.id).show()
+        RED.tray.resize()
+      }})
+      tabs.addTab({ id: "fd-tab-general", label: "General" })
+      tabs.addTab({ id: "fd-tab-props", label: "Widget props" })
+      tabs.activateTab(this.fd_container ? "fd-tab-props" : "fd-tab-general")
+    },
+  })
+</script>
+
+<script type="text/html" data-template-name="fd-button-bar">
+  <div class="form-row">
+    <ul id="fd-tabs" style="min-width: 600px; margin-bottom: 20px;"></ul>
+  </div>
+  <div id="fd-tabs-content" style="min-height: calc(100% - 95px);">
+    <!-- general properties tab -->
+    <div id="fd-tab-general" style="display:none"><!-- dynamically loaded --></div>
+    <!-- widget props -->
+    <div id="fd-tab-props" style="display:none"><!-- dynamically loaded --></div>
+  </div>
+  <!-- non-tab alternative, remove all above, remove 'manage tabs' code, and use this:
+  <div id="fd-tab-general" style="display:contents"></div>
+  <div id="fd-tab-props" style="display:contents"></div>
+  -->
+</script>
+
+<script type="text/markdown" data-help-name="fd-button-bar">
+  <p id="fd-button-bar-help-text"><i>Ooops, this should have filled-in dynamically...</i></p>
+</script>

generate.sh

@@ -0,0 +1,6 @@
+#! /bin/bash -e
+for f in $(cd widgets; echo *.vue); do
+  b=$(basename $f .vue)
+  rm -f resources/$b-* $b.js $b.html
+done
+node ../node-red-flexdash/gen-widget-nodes.js

package.json

@@ -20,14 +20,17 @@
     "url": "git+https://github.com/flexdash/node-red-fd-testnodes.git"
   },
   "node-red": {
-    "version": "^2.0.0",
+    "version": ">2.0.0",
     "nodes": {
-      "flexdash testbutton": "testbutton.js",
-      "flexdash testgauge": "testgauge.js",
-      "flexdash testcustom": "testcustom.js",
-      "foo": "inputtype.js"
+      "flexdash button-bar": "button-bar.js"
     }
   },
+  "node-red-unused": {
+    "flexdash testbutton": "testbutton.js",
+    "flexdash testgauge": "testgauge.js",
+    "flexdash testcustom": "testcustom.js",
+    "foo": "inputtype.js"
+  },
   "engines": {
     "node": ">=12.0.0"
   },

widgets/button-bar.vue

@@ -0,0 +1,75 @@
+<!-- PushButton - Simple button that sends a message when clicked
+     Copyright ©2021 Thorsten von Eicken, MIT license, see LICENSE file
+-->
+<template>
+  <div class="button-bar d-flex align-center justify-center">
+    <v-defaults-provider :defaults="density">
+      <v-btn-toggle :model-value="toggle" @update:modelValue="change" class="ma-auto" max-width="95%" divided
+                    variant="outlined" density="default">
+        <v-btn v-for="(btn,ix) in buttons" v-bind:key="ix" v-bind="btn_bindings[ix]">
+          <v-icon v-if="btn.icon" :size="btn.label ? 'default' : 'large'" class="mr-1" :icon="btn.icon" />
+          <div class="d-flex flex-column">
+            <span v-if="btn.label">{{ btn.label }}</span>
+            <span v-if="btn.line2 && !btn.line2_color">{{ btn.line2 }}</span>
+            <v-chip v-if="btn.line2 && btn.line2_color">{{ btn.line2 }}</v-chip>
+          </div>
+        </v-btn>
+      </v-btn-toggle>
+    </v-defaults-provider>
+  </div>
+</template>
+  
+<style scoped>
+.button-bar { height: 100%; }
+</style>
+
+<script scoped>
+export default {
+  name: 'ButtonBar',
+
+  help: `Bar of buttons.
+Pressing a button sends a message with a specified payload.
+Each button may contain an icon and/or a title string and is centered in the widget.
+Icon names can be found at https://materialdesignicons.com.`,
+
+  props: {
+    value: { default: null, tip: "index or value of current selected button" },
+    buttons: { default: [{label:"button 1"}],
+      tip: "array of buttons with icon, label, color, line2, line2_color, disabled, value" },
+  },
+
+  output: { default: null },
+
+  computed: {
+
+    // actual bindings passed into v-btn
+    btn_bindings() {
+      return this.buttons.map(b => ({
+        disabled: !!b.disabled,
+        style: "background-color: " + (b.color || "primary"),
+      }))
+    },
+
+    density() {
+      return {
+        VBtnToggle: {
+          density: this.buttons.some(b => b.line2) ? "default" : "compact",
+        },
+      }
+    },
+
+  },
+
+  methods: {
+    change(ix) {
+      const btn = this.buttons[ix]
+      if (btn && 'value' in btn) {
+        this.$emit('send', btn.value)
+      } else {
+        this.$emit('send', ix)
+      }
+    },
+  },
+
+}
+</script>

widgets/test-button.vue

@@ -4,7 +4,7 @@
 <template>
   <div class="pushbutton d-flex align-center justify-center">
     <v-btn large dense class="ma-auto" max-width="95%" v-bind="bindings" @click="clickEv($event)">
-      <v-icon :large="!title"  v-if="icon">mdi-{{icon}}</v-icon> <span>{{ title }}</span>
+      <v-icon :large="!title"  v-if="icon">{{icon}}</v-icon> <span>{{ title }}</span>
     </v-btn>
   </div>
 </template>