node-red-mcu-plugin: ui_node support

[ralphwetzel]

@phoddie -- Hello Peter!
Due to the success of your presentation @ Node-RED Con 22 (👍 👍) I feel it's mandatory now that the plugin supports as well ui_nodes. Based on what I've seen in uitest there seem to be additional steps necessary to initialize a graphical app on a MCU:

node-red-mcu/uitest/main.js

Lines 1 to 9 in 5d8bde9

	import "nodered";
	import builder from "flows";
	import buildModel from "./ui_nodes";
	import { REDApplication } from "./ui_templates";
	RED.build(builder);
	const model = buildModel();
	export default new REDApplication(model, { commandListLength:8192, displayListLength:8192+4096, touchCount:1, pixels: 240 * 64 });

Can I take this as a standard template - or do I need to provide a way to customize the setup?
Shall the options provided to REDApplication (e.g. commandListLength) be configurable? Is there any documentation concerning these parameters?
Is there anything relevant - from your perspective - to be considered additionally?

[phoddie]

@ralphwetzel – yes, we should get UI nodes supported. What is currently committed works (very) nicely. However, it is set-up primarily for our exploration so it isn't so easy to use yet.

That said, the uitest/main.js is reasonable to use as a starting template. There will eventually need to be a way to configure commandListLength, displayListLength, and pixels as they can easily vary by project. Multi-touch is rare so leaving touchCount as 1 is reasonable.

The bigger challenge is building an optimized manifest. But that's another discussion.

[ralphwetzel]

The bigger challenge is building an optimized manifest.

As the whole stuff currently resides in one directory, I would start by adding the given manifest.json; later adaptations should be easy then.

[phoddie]

That's true for the UI. I was referring to the larger Node-RED MCU project manifest (but obviously wasn't clear!).

[ralphwetzel]

larger Node-RED MCU project manifest

The success rate of the plugin for building complex manifests is meanwhile quite nice. Of course there are always edge cases that require a small adaptation. If you stumble across a difficult case, just pass it to me - to improve the logic step by step.

[ralphwetzel]

@phoddie --
I'm almost done integrating ui_nodes into the plugin. The flow builds - but when launching the device, I'm either getting an out-of-memory error or a stack overflow message. Even reducing complexity & limiting the test to one of the examples doesn't improve the situation. Could you please advise a set of creation parameters that enables the example flows (either in total or in portions) to be run on a Moddable Two? Is there anything else to be considered to run this example?

For reference, find below manifest.json & flow.json I'm currently testing with.

manifest.json

{
  "build": {
    "MODULES": "/Users/ralph/Projekte/Moddable/moddable/modules",
    "MCUROOT": "/Users/ralph/Projekte/node-red-mcu-plugin/node-red-mcu",
    "REDNODES": "/Users/ralph/Projekte/node-red/packages/node_modules/@node-red/nodes"
  },
  "include": [
    "$(MCUROOT)/manifest_runtime.json",
    "$(MCUROOT)/nodes/ui/manifest.json",
    "$(MCUROOT)/nodes/random/manifest.json",
    "$(MCUROOT)/nodes/trigger/manifest.json"
  ],
  "modules": {
    "*": [
      "./main",
      {
        "source": "./flows",
        "transform": "nodered2mcu"
      }
    ],
    "~": []
  },
  "creation": {
    "static": 0,
    "keys": {
      "available": 512
    },
    "stack": 512
  },
  "config": {
    "noderedmcu": {
      "editor": true
    }
  }
}

flows.json

[
  {
    "id": "e76ac5d10d5129d8",
    "type": "tab",
    "label": "Flow 15",
    "disabled": false,
    "info": "",
    "env": []
  },
  {
    "id": "f414995783d9c912",
    "type": "ui_button",
    "z": "e76ac5d10d5129d8",
    "name": "",
    "group": "82ae5262e98d7428",
    "order": 3,
    "width": "3",
    "height": "1",
    "passthru": false,
    "label": "false",
    "tooltip": "",
    "color": "",
    "bgcolor": "",
    "className": "",
    "icon": "",
    "payload": "false",
    "payloadType": "bool",
    "topic": "topic",
    "topicType": "msg",
    "x": 290,
    "y": 200,
    "wires": [
      [
        "7455f78f7552838b"
      ]
    ]
  },
  {
    "id": "7455f78f7552838b",
    "type": "ui_switch",
    "z": "e76ac5d10d5129d8",
    "name": "",
    "label": "switch",
    "tooltip": "",
    "group": "82ae5262e98d7428",
    "order": 2,
    "width": 0,
    "height": 0,
    "passthru": true,
    "decouple": "false",
    "topic": "topic",
    "topicType": "msg",
    "style": "",
    "onvalue": "true",
    "onvalueType": "bool",
    "onicon": "",
    "oncolor": "",
    "offvalue": "false",
    "offvalueType": "bool",
    "officon": "",
    "offcolor": "",
    "animate": false,
    "className": "",
    "x": 470,
    "y": 220,
    "wires": [
      [
        "5b55d5ae28e44faa"
      ]
    ]
  },
  {
    "id": "5b55d5ae28e44faa",
    "type": "ui_text",
    "z": "e76ac5d10d5129d8",
    "group": "82ae5262e98d7428",
    "order": 1,
    "width": 0,
    "height": 0,
    "name": "",
    "label": "value",
    "format": "{{msg.payload}}",
    "layout": "row-spread",
    "className": "",
    "x": 670,
    "y": 220,
    "wires": []
  },
  {
    "id": "2189c57287ebd9a8",
    "type": "ui_button",
    "z": "e76ac5d10d5129d8",
    "name": "",
    "group": "82ae5262e98d7428",
    "order": 4,
    "width": "3",
    "height": "1",
    "passthru": false,
    "label": "true",
    "tooltip": "",
    "color": "",
    "bgcolor": "",
    "className": "",
    "icon": "",
    "payload": "true",
    "payloadType": "bool",
    "topic": "topic",
    "topicType": "msg",
    "x": 290,
    "y": 240,
    "wires": [
      [
        "7455f78f7552838b"
      ]
    ]
  },
  {
    "id": "954946ab8c989af5",
    "type": "ui_tab",
    "name": "Controls",
    "icon": "dashboard",
    "order": 3,
    "disabled": false,
    "hidden": false
  },
  {
    "id": "82ae5262e98d7428",
    "type": "ui_group",
    "name": "Boolean",
    "tab": "954946ab8c989af5",
    "order": 2,
    "disp": true,
    "width": "6",
    "collapse": true,
    "className": ""
  },
  {
    "id": "81730d2f14c63675",
    "type": "ui_base",
    "theme": {
      "name": "theme-dark",
      "lightTheme": {
        "default": "#0094CE",
        "baseColor": "#0094CE",
        "baseFont": "-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif",
        "edited": true,
        "reset": false
      },
      "darkTheme": {
        "default": "#097479",
        "baseColor": "#097479",
        "baseFont": "-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif",
        "edited": true,
        "reset": false
      },
      "customTheme": {
        "name": "Untitled Theme 1",
        "default": "#4B7930",
        "baseColor": "#4B7930",
        "baseFont": "-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif"
      },
      "themeState": {
        "base-color": {
          "default": "#097479",
          "value": "#097479",
          "edited": false
        },
        "page-titlebar-backgroundColor": {
          "value": "#097479",
          "edited": false
        },
        "page-backgroundColor": {
          "value": "#111111",
          "edited": false
        },
        "page-sidebar-backgroundColor": {
          "value": "#333333",
          "edited": false
        },
        "group-textColor": {
          "value": "#0eb8c0",
          "edited": false
        },
        "group-borderColor": {
          "value": "#555555",
          "edited": false
        },
        "group-backgroundColor": {
          "value": "#333333",
          "edited": false
        },
        "widget-textColor": {
          "value": "#eeeeee",
          "edited": false
        },
        "widget-backgroundColor": {
          "value": "#097479",
          "edited": false
        },
        "widget-borderColor": {
          "value": "#333333",
          "edited": false
        },
        "base-font": {
          "value": "-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif"
        }
      },
      "angularTheme": {
        "primary": "indigo",
        "accents": "blue",
        "warn": "red",
        "background": "grey",
        "palette": "dark"
      }
    },
    "site": {
      "name": "Node-RED Dashboard",
      "hideToolbar": "false",
      "allowSwipe": "false",
      "lockMenu": "false",
      "allowTempTheme": "none",
      "dateFormat": "DD.MM.YYYY",
      "sizes": {
        "sx": 48,
        "sy": 48,
        "gx": 6,
        "gy": 6,
        "cx": 6,
        "cy": 6,
        "px": 0,
        "py": 0
      }
    }
  }
]

[ralphwetzel]

Thank you for these updates. With some additional tuning (it looks as if the pixel x & pixel y settings have a huge impact) I was able to launch the flows on the Moddable Two. Very cool... 👍 !
I'll adapt the defaults a bit to reflect this experience ... and would then be happy if you could do some additional testing with the latest version of the plugin. With the support of ui_nodes in place, I'm considering to release the first npm'ed version in a week or so...

[phoddie]

Glad it works.

it looks as if the pixel x & pixel y settings have a huge impact

Can you expand on that? I'm not quite sure what you mean.

[ralphwetzel]

Can you expand on that?

node-red-mcu/uitest/main.js

Line 9 in 54a241f

export default new REDApplication(model, { commandListLength:4096, displayListLength:+4096, touchCount:1, pixels: 240 * 48 });

At first, I thought it's necessary to provide for the pixel property the true resolution of the device (240 x 320 = 76.800). That immediately lead to "Memory full" errors. Reducing it to a smaller value, e.g. 240 x 48 = 11.520, solved this ... and the flow still runs fine using the whole screen.

[phoddie]

Thanks, I see now. The pixels property is the size of the render buffer, not the number of pixels on the screen (trying to buffer the entire screen would be 3202402=153,600 bytes, which is very impractical on an ESP32 with everything else that's going on here.

The pixels property is optional -- a small default will be used. Bigger values allow more efficient rendering, which is obviously helpful, but it also uses more memory. The optimal number varies. For the Node-RED dashboard I've found 32 lines to be a good compromise between memory use and performance.

[phoddie]

I'll adapt the defaults a bit to reflect this experience ... and would then be happy if you could do some additional testing with the latest version of the plugin. With the support of ui_nodes in place, I'm considering to release the first npm'ed version in a week or so...

I can do that. Just let me know.