Button does not send timestamp

rei-vilo commented 1 year ago

To install the latest version of the Moddable SDK, including patches not yet included in a release,

Consider downloading and installing https://github.com/Moddable-OpenSource/moddable/archive/refs/heads/public.zip manually.

Consider this basic flow:

The button sends the timestamp as message.

Problem, both text and debug 1 show empty as a result.

How to send a timestamp from a button?

Thank you!

Code

``` [ { "id": "0ec1e89f3bf550ba", "type": "ui_button", "z": "860610d68b7b7247", "name": "", "group": "bf78367624b9346f", "order": 2, "width": 0, "height": 0, "passthru": false, "label": "timestamp", "tooltip": "", "color": "", "bgcolor": "", "className": "", "icon": "", "payload": "", "payloadType": "date", "topic": "topic", "topicType": "msg", "_mcu": { "mcu": true }, "x": 150, "y": 100, "wires": [ [ "ab2918dc7b69f01b", "ebb1553f4a811a8d" ] ] }, { "id": "ebb1553f4a811a8d", "type": "ui_text", "z": "860610d68b7b7247", "group": "bf78367624b9346f", "order": 4, "width": 8, "height": 2, "name": "", "label": "text", "format": "{{msg.payload}}", "layout": "row-spread", "className": "", "_mcu": { "mcu": true }, "x": 430, "y": 180, "wires": [] }, { "id": "ab2918dc7b69f01b", "type": "debug", "z": "860610d68b7b7247", "name": "debug 1", "active": true, "tosidebar": true, "console": false, "tostatus": false, "complete": "false", "statusVal": "", "statusType": "auto", "_mcu": { "mcu": true }, "x": 440, "y": 100, "wires": [] }, { "id": "bf78367624b9346f", "type": "ui_group", "name": "Default", "tab": "4b8489d389053d4b", "order": 1, "disp": true, "width": 8, "collapse": false, "className": "", "_mcu": { "mcu": false } }, { "id": "4b8489d389053d4b", "type": "ui_tab", "name": "Home", "icon": "dashboard", "disabled": false, "hidden": false, "_mcu": { "mcu": false } } ] ```

ralphwetzel commented 1 year ago

It looks like uiButton is only partially implemented:

https://github.com/phoddie/node-red-mcu/blob/d6a4fd3d6dd1260e7b0a9330fb17ca375971a79d/nodes/ui/ui_nodes.js#L42-L52

Contributions are welcome! 😉

phoddie commented 1 year ago

@rei-vilo – thanks for the report. The initial work on the Dashboard UI nodes, including Button, focused on properly rendering the elements and connecting them into flows. That was a big enough challenge for the first step! We didn't try to implement all the options for constructing payloads. You have bumped into that limitation. The solution is to update nodered2mcu to generate the code needed to construct the payload. This should be about the same as what it does today for the Inject Node. @patrick-soquet and I have been intending to look at nodered2mcu support for Dashboard UI nodes. Let's see if we can sort this out.

By the way, I saw your tweet today. It links to a very nice article. Please continue to share your successes (and report the problems you encounter) so we can continue improving Node-RED MCU Edition.

rei-vilo commented 1 year ago

Thank you for the answers.

The initial work on the Dashboard UI nodes, including Button, focused on properly rendering the elements and connecting them into flows.

I understand the incremental steps required. The case with payload as timestamp was just a minimal example I wanted to share on my review.

It links to a very nice article.

You're welcome! I hope the article will help getting more people involved and gaining traction on the project.

To be continued...

phoddie commented 1 year ago

I did a quick proof-of-concept test this evening. It seems to work. I'll review and work on getting that committed. No doubt there are more issues like this to address, but it is a start.

https://user-images.githubusercontent.com/6856458/212245440-43f12a22-ab91-4fd9-896d-4dbc4f7b7689.mov

phoddie commented 1 year ago

UI nodes now support the same payload types as Inject, not just Boolean. They also implement topic passthrough.

To try it, get the latest Node-RED MCU Edition and the latest Moddable SDK (and rebuild Moddable SDK tools -- to implement this required updating the nodered2mcu conversion tool).

Please give it a try when you can. I hope it is a step in the right direction.

rei-vilo commented 1 year ago

Thank you for the update. I went through https://github.com/Moddable-OpenSource/moddable/blob/public/documentation/Moddable%20SDK%20-%20Getting%20Started.md#updating to update the Moddable SDK and https://github.com/ralphwetzel/node-red-mcu-plugin#installation to update node-red-mcu-plugin.

Alas, setting payload to timestamp raises an exception.

/Users/USER/.node-red/node_modules/@ralphwetzel/node-red-mcu-plugin/node-red-mcu/nodes/ui/ui_nodes.js (174) # Break: UIButtonNode.prototype.onTap: no function!

The exception occurs both on the simulator and the Moddable Two board.

Code

``` [ { "id": "0ec1e89f3bf550ba", "type": "ui_button", "z": "860610d68b7b7247", "name": "", "group": "bf78367624b9346f", "order": 2, "width": 0, "height": 0, "passthru": false, "label": "timestamp", "tooltip": "", "color": "", "bgcolor": "", "className": "", "icon": "", "payload": "", "payloadType": "date", "topic": "datetime", "topicType": "str", "_mcu": { "mcu": true }, "x": 150, "y": 100, "wires": [ [ "ebb1553f4a811a8d" ] ] }, { "id": "ebb1553f4a811a8d", "type": "ui_text", "z": "860610d68b7b7247", "group": "bf78367624b9346f", "order": 4, "width": 8, "height": 2, "name": "", "label": "text", "format": "{{msg.payload}}", "layout": "row-spread", "className": "", "_mcu": { "mcu": true }, "x": 430, "y": 180, "wires": [] }, { "id": "ab2918dc7b69f01b", "type": "debug", "z": "860610d68b7b7247", "name": "debug 1", "active": true, "tosidebar": true, "console": false, "tostatus": false, "complete": "true", "targetType": "full", "statusVal": "", "statusType": "auto", "_mcu": { "mcu": true }, "x": 440, "y": 100, "wires": [] }, { "id": "7064a26285ddacf7", "type": "junction", "z": "860610d68b7b7247", "x": 301, "y": 140, "wires": [ [ "ab2918dc7b69f01b" ] ] }, { "id": "bf78367624b9346f", "type": "ui_group", "name": "Default", "tab": "4b8489d389053d4b", "order": 1, "disp": true, "width": 8, "collapse": false, "className": "", "_mcu": { "mcu": false } }, { "id": "4b8489d389053d4b", "type": "ui_tab", "name": "Home", "icon": "dashboard", "disabled": false, "hidden": false, "_mcu": { "mcu": false } } ] ```

Does nodered2mcu have a -v or --version parameter to check the version?

ralphwetzel commented 1 year ago

Does nodered2mcu have a -v or --version parameter to check the version?

In case you're using the node-red-mcu-plugin: It's stating the full config data as MCU Build system check at the beginning of the build log.

Starting build process...
Host system check: Darwin Kernel Version 22.2.0: Fri Nov 11 02:03:51 PST 2022; root:xnu-8792.61.2~4/RELEASE_ARM64_T6000
MCU Build system check: p1.1.2-post + #d6a4fd3 @ m3.6.0-25-g491f8c5
HOME directory check: /Users/ralph
Creating build environment for platform sim/moddable_two.

The #d6a4fd3 is the commit state of node-red-mcu.

rei-vilo commented 1 year ago

Strange, version says 1.1.2 for node-red-mcu but 3.5.0 for moddable although I have performed a clean installation. Is it because my Mac runs on an ARM and not an Intel?

Host system check: Darwin Kernel Version 22.2.0: Fri Nov 11 02:04:44 PST 2022; root:xnu-8792.61.2~4/RELEASE_ARM64_T8103
MCU Build system check: p1.1.2-post + #08c095c @ m3.5.0-0-gf9a0787

ralphwetzel commented 1 year ago

p1.1.2-post + #08c095c @ m3.5.0-0-gf9a0787

node-red-mcu- p lugin: 1.1.2-post node-red-mcu commit #: 08c095c m oddable: 3.5.0 w/ 0 additional commits

plugin & node-red-mcu are @ latest version - yet the Moddable SDK ist outdated.

rei-vilo commented 1 year ago

I have moved the question to How to update to release 3.6.0? #1010 at the Moddable SDK conversation forum.

ralphwetzel commented 1 year ago

What's the result when you issue a

cd $MODDABLE
git describe --abbrev=7 --always  --long

Is $MODDABLE pointing to the directory where you've installed the latest version of the Moddable SDK?

rei-vilo commented 1 year ago

It shows 3.5.0-0-gf9a0787.

The update is performed at the $MODDABLE folder

cd $MODDABLE
git pull
rm -rf build/bin
rm -rf build/tmp
cd ${MODDABLE}/build/makefiles/mac
make

So I took another approach.

I deleted the $MODDABLE folder and performed a clean install.

Now git describe --abbrev=7 --always --long shows 3.6.0-55-g5569674.

rei-vilo commented 1 year ago

Now, Moddable SDK in 3.6.0. I also cleaned the ESP32-related folder.

cd $MODDABLE/build
rm -rf bin/esp32
rm -rf tmp/esp32

However, the button doesn't send the timestamp.

{"_msgid":"81cb36cd7acbe989","source":{"id":"ab2918dc7b69f01b","type":"debug","name":"debug 1"}}

phoddie commented 1 year ago

I can take a look at this. Would you mind posting the full exported flow? The original flows.json at the start of this issue is a fragment -- there's no "tab" or "ui_base" elements. I had to rebuild it to test previously. It is possible that what I'm running and you are running are different. I'd like to be sure we are running the same flow. Thank you.

Note: to get the "ui_base" Node, it is necessary to select "all flows" when Exporting from Node-RED. If you use "current flow", it will include the "tab" but not the "ui_base". (it seems like a bug in Node-RED that it is not included when exporting "current flow", but maybe there is a good reason)

rei-vilo commented 1 year ago

Please find the export of all flows.

``` [ { "id": "e6e2a9adf5f579ac", "type": "tab", "label": "Flow 1", "disabled": false, "info": "", "env": [], "_mcu": { "mcu": true } }, { "id": "73a227984e71831e", "type": "ui_tab", "name": "Home", "icon": "dashboard", "disabled": false, "hidden": false, "_mcu": { "mcu": false } }, { "id": "62d7a9fb5ecf53d3", "type": "ui_group", "name": "Default", "tab": "73a227984e71831e", "order": 1, "disp": true, "width": "6", "collapse": false, "className": "", "_mcu": { "mcu": false } }, { "id": "6c35286eaa7b20bd", "type": "ui_base", "theme": { "name": "theme-light", "lightTheme": { "default": "#0094CE", "baseColor": "#0094CE", "baseFont": "-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif", "edited": false }, "darkTheme": { "default": "#097479", "baseColor": "#097479", "baseFont": "-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif", "edited": 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": "#0094CE", "value": "#0094CE", "edited": false }, "page-titlebar-backgroundColor": { "value": "#0094CE", "edited": false }, "page-backgroundColor": { "value": "#fafafa", "edited": false }, "page-sidebar-backgroundColor": { "value": "#ffffff", "edited": false }, "group-textColor": { "value": "#1bbfff", "edited": false }, "group-borderColor": { "value": "#ffffff", "edited": false }, "group-backgroundColor": { "value": "#ffffff", "edited": false }, "widget-textColor": { "value": "#111111", "edited": false }, "widget-backgroundColor": { "value": "#0094ce", "edited": false }, "widget-borderColor": { "value": "#ffffff", "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": "light" } }, "site": { "name": "Node-RED Dashboard", "hideToolbar": "false", "allowSwipe": "false", "lockMenu": "false", "allowTempTheme": "true", "dateFormat": "DD/MM/YYYY", "sizes": { "sx": 48, "sy": 48, "gx": 6, "gy": 6, "cx": 6, "cy": 6, "px": 0, "py": 0 } } }, { "id": "b11fa35f1cd35221", "type": "ui_button", "z": "e6e2a9adf5f579ac", "name": "", "group": "62d7a9fb5ecf53d3", "order": 0, "width": 0, "height": 0, "passthru": false, "label": "button", "tooltip": "", "color": "", "bgcolor": "", "className": "", "icon": "", "payload": "", "payloadType": "date", "topic": "topic", "topicType": "msg", "_mcu": { "mcu": true }, "x": 190, "y": 100, "wires": [ [ "a41745474b5e5f35" ] ] }, { "id": "a41745474b5e5f35", "type": "ui_text", "z": "e6e2a9adf5f579ac", "group": "62d7a9fb5ecf53d3", "order": 1, "width": 0, "height": 0, "name": "", "label": "text", "format": "{{msg.payload}}", "layout": "row-spread", "className": "", "_mcu": { "mcu": true }, "x": 490, "y": 100, "wires": [] } ] ```

ralphwetzel commented 1 year ago

The issue is in nodered2mcu:

That's the config passed via flows.json:

    "payload": "",
    "payloadType": "date",
    "topic": "topic",
    "topicType": "msg",

nodered2mcu checks for config.payload (beginning line 1307):

    if (config.payload)
        setter.push(`\t\t\ttarget.payload = ${this.resolveValue(config.payloadType, config.payload)};`);
    if (config.topic) {
        setter.push(`\t\t\tconst topic = ${this.resolveValue(config.topicType, config.topic)};`);
        setter.push(`\t\t\tif (undefined !== topic)`);
        setter.push(`\t\t\t\ttarget.topic = topic;`);
    }

Looks like payload doesn't need to be defined if payloadType is defined.

phoddie commented 1 year ago

@rei-vilo – thanks for the complete flows.json, that did help. The analysis by @ralphwetzel is correct. The check for if (config.payload) should be removed. That should get you working. After making that change, rebuild Moddable SDK tools (shown here for macOS):

cd $MODDABLE/build/makefiles/mac
make

To full solve this requires some changes to resolveValue to expect that the payload can be an empty string. That won't get in your way. I'll make those changes and commit to the Moddable SDK repository along with this fix.

Thank you for your patience in working through this one.

rei-vilo commented 1 year ago

Glad to know you have found the cause of the issue.

phoddie commented 1 year ago

All should be good now.

rei-vilo commented 1 year ago

Sadly, I can't manage to get it work with

MCU Build system check: p1.1.2-post + #3f2d1a1 @ m3.6.0-0-g4f1e32c

Anything wrong with my configuration?

phoddie commented 1 year ago

That's frustrating. To be clear, when you say you "can't manage to get it [to] work" you mean: using the exported "all flows" above, you are able to build the project, deploy it to the device, and run. When tapping the button on the display, a message is sent but it does not display the timestamp output on the screen. Is that correct? I just want to be sure we aren't talking about a build issue or something else. Thank you.

ralphwetzel commented 1 year ago

MCU Build system check: p1.1.2-post + #3f2d1a1 @ m3.6.0-0-g4f1e32c

Looks like a similar issue as the last time: Your Moddable SDK version is outdated...

rei-vilo commented 1 year ago

That's frustrating. To be clear, when you say you "can't manage to get it [to] work" you mean: using the exported "all flows" above, you are able to build the project, deploy it to the device, and run. When tapping the button on the display, a message is sent but it does not display the timestamp output on the screen. Is that correct? I just want to be sure we aren't talking about a build issue or something else. Thank you.

Yes, it is exactly what you have described. I am keeping the exact same project to test the feature.

MCU Build system check: p1.1.2-post + #3f2d1a1 @ m3.6.0-0-g4f1e32c Looks like a similar issue as the last time: Your Moddable SDK version is outdated...

That is odd. I have performed

First, an xs-dev update to no avail, then
A clean install with xs-dev setup plus xs-dev setup --device=esp32 and finally cd cd ${MODDABLE}/build/makefiles/mac ; make.

The resulting versions are still MCU Build system check: p1.1.2-post + #3f2d1a1 @ m3.6.0-0-g4f1e32c.

phoddie / node-red-mcu

Button does not send timestamp #68