Support Japanese character on Node-RED MCU Dashboard

[kitazaki]

I tried to display Japanese characters on Node-RED MCU Dashboard.

Node-RED flow editor outputs localized flows.json at default, so the name of tags are in Japanese.
English -> Japanese
home -> "ホーム"
default -> "デフォルト"
button -> "ボタン"

It looks like as below.
home -> "???"
default -> "???"
button A -> "???A"
button B -> "???B"

• before

I successed to display Japanese characters by creating fonts and changing
manifest.json
ui_templates.js

• after

• details on my blog
  https://qiita.com/kitazaki/items/a59fad56db2d6ec99ee0

I think that it is useful to change the Piu font from Node-RED flow editor (node-red-mcu-plugin).
Is there any other good idea?!

[phoddie]

This looks very cool! Nice work. I need a little time to read the (translated) article. Then, let's discuss how to make this convenient for developers.

[phoddie]

Apologies for being a little slow. Now that Moddable SDK 4.5 is out, I should have time to come back to this.

[phoddie]

After reading your article, I understand that you are doing the following:

• Generating a font with Shift-JIS characters
• Modifying the Node-RED MCU manifest to include the font
• Modifying the Node-RED MCU dashboard styles to use the font

Using this recent PR from @NW-Lab it is possible to add manifests directly to your flow. It eliminates the need to modify the existing manifest to add the font.

The Dashboard running on computers uses CSS for styling. This could be a way to change the font. But, the MCU does not have CSS. We could use Node-RED environment variables instead. For example, "DASHBOARD_FONT" could be an environment variable to select a font. This can be put on the flow, for example. Then we would update the Node_RED MCU dashboard in ui_template.js to use the environment variable. Here's how that might look:

	const FONT = RED.util.getSetting(node, 'DASHBOARD_FONT') ?? "Roboto";

	const result = {
		colors: {
			gauge: halfGray,
			group,
			halfGray,
			transparent: TRANSPARENT,
			white: WHITE,
			widget,
			widgetText,
		},
		skins: {},
		styles: {
			chartNoData: new Style({ font:`18px ${FONT}`, color:halfGray, horizontal:"center" }),
			chartX: new Style({ font:`medium 12px ${FONT}`, color:widgetText, horizontal:"center" }),
			chartY: new Style({ font:`medium 12px ${FONT}`, color:widgetText, horizontal:"right" }),
			notification: new Style({ font:`18px ${FONT}`, color:widgetText, horizontal:"left", left:10, right:10, top:10, bottom:10 }),
			keyboard: new Style({ font:`18px ${FONT}`, color:BLACK }),
			textName: new Style({ font:`18px ${FONT}`, color:widgetText, left:5, right:5 }),
			textValue: new Style({ font:`medium 18px ${FONT}`, color:widgetText, left:5, right:5 }),
			textNameLeft: new Style({ font:`18px ${FONT}`, color:widgetText, horizontal:"left", left:10 }),
			textValueLeft: new Style({ font:`medium 18px ${FONT}`, color:widgetText, horizontal:"left", left:10 }),
			textNameRight: new Style({ font:`18px ${FONT}`, color:widgetText, horizontal:"right", right:10 }),
			textValueRight: new Style({ font:`medium 18px ${FONT}`, color:widgetText, horizontal:"right", right:10 }),
			textField: new Style({ font:`medium 18px ${FONT}`, color:[TRANSPARENT,widgetText,widgetText,widget], horizontal:"left", left:10 }),
		},
		textures: {
		}
	};

This are just some ideas to make it easier for developers to use different fonts. What do you think?

[NW-Lab]

hello

I think it's better to take variables from manifest config.

import config from "mc/config";

const FONT = (config.DASHBOARD_FONT) ? config.DASHBOARD_FONT : "Roboto";

I'm trying it now, so I'll write another comment.

Thank you.

[phoddie]

@NW-Lab – thank you for joining the discussion! We could use configuration values from the manifest here. It is definitely worth exploring.

Some background. The reason I suggested environment variables is because this is a solution for Node-RED. Using a Node-RED tool should be more familiar to Node-RED developers are familiar with environment variables.

[NW-Lab]

@phoddie san

Since I need to specify the FONT in the manifest resource, I thought it would be easier to understand if I changed it in the same place.

Thank you.

[NW-Lab]

Hello

I have confirmed that it works, so I pulled request it.
#124

Thank you.

[kitazaki]

@phoddie
I think your idea is great. The update is reasonable for the Node_RED MCU dashboard in ui_template.js to use the environment variable.

@NW-Lab
Your PR works fine for my environment (macOS).

[phoddie]

@kitazaki – thank you!

I see the latest PR from @NW-Lab implements the support for using the manifest. I think both the manifest and environment approaches are reasonable. We are exploring right now, so I think we could support both. @NW-Lab, would you be willing to update your PR for that? I think it could be something like:

const FONT = config.DASHBOARD_FONT ?? RED.util.getSetting(node, 'DASHBOARD_FONT')  ?? "Roboto";

(Yes, I am a big fan of the nullish coalescing operator.)

[phoddie]

(It turns out that we cannot use ?? here because RED.util.getStting() is defined to return the empty string when the environment variable is not present. So, I had to switch it to use || instead.

[kitazaki]

@phoddie
For further discussion, I think it is better to prepare some font files for people not familiar to fontbm tool and characters code.

Other bitmap font files are in $MODDABLE/examples/assets/fonts directory and a Japanese scalable font in $MODDABLE/examples/assets/scalablefonts/NotoSans directory.

To avoid pre-create font files, one of option is to add bitmap font files in above directory and another option is to create bitmap font from scalable font in mcconfig build process by defining manifest like below.

"resources": {
    "*-mask": [
        {
            "source": "$(MODDABLE)/examples/assets/scalablefonts/NotoSans/NotoSansJP-Regular",
            "size": 18,
            "blocks": [
                "Hiragana",
                "Katakana",
                "Basic Latin"
            ],
            "characters": "亜唖娃阿哀愛挨姶逢葵茜穐悪握渥旭葦芦鯵梓圧斡扱宛姐虻飴絢綾鮎或"
        }
    ]
}

[phoddie]

The change to mcconfig to support "characterFiles" is now live. Please give it a try.

[phoddie]

@kitazaki – did you have a chance to try this out?

[kitazaki]

@phoddie
Sorry for taking a little time to fix another issue in node-red-mcu-plugin environment.
It just works fine for my environment.

Starting build process...
Host system check: Darwin Kernel Version 23.2.0: Wed Nov 15 21:53:34 PST 2023; root:xnu-10002.61.3~2/RELEASE_ARM64_T8103
MCU Build system check: p1.4.1-beta.1 + #a02cd43 @ m4.5.0-0-gdd55984
HOME directory check: /Users/kitazaki
Creating build environment for platform sim/moddable_two.
Working directory: /Users/kitazaki/tmp/20240320/mcu-plugin-cache/79g0nnznfq
> cd /Users/kitazaki/tmp/20240320/mcu-plugin-cache/79g0nnznfq
Creating build script file...
> /bin/bash ./build.sh
>> mcconfig -d -x localhost:5004 -m -p sim/moddable_two
### Error: $(FONTBM) environment variable not set. Is fontbm installed?

added FONTBM environment variable to mcu_plugin.js (just submit pull request for @ralphwetzel )

% diff mcu_plugin.js mcu_plugin.js_org
1866d1865
<             "FONTBM": process.env.FONTBM,

[kitazaki]

@ralphwetzel

ralphwetzel/node-red-mcu-plugin#48

[phoddie]

Great, thanks for confirming.

[kitazaki]

closed.

[phoddie]

FYI – Now that this is working, I updated the documentation for fontbm support in the manifest to explain characterFiles in the "Selecting Glyphs to Include" section. (The changes should be live later this week)