Barcode display in Dashboard

[AmrDwarf]

Hi all,

I am trying to find a way to display a barcode (code-128) in the node-red dashboard.
The barcode needs to be created on the fly from a incoming msg.payload.
I have looked in to using jsbarcode in a function node, but it is beyond my capabilitys.
Any pointers in the right direction if it is possible is much appriciated.

// Tobbe

[edje11]

Maybe you can use a barcode font.
Never done it myself, but changing the font in the dashboard with Ui_template should be possible
https://www.dafont.com/code-128.font

[AmrDwarf]

Dooh... Its so simple... Why did I not think about that?
Thank you, I will try it shortly.

// Tobbe

[AmrDwarf]

Manged to get it to show the barcode in the dashboard.

My problem now is that no reader is able to read it. Tried with two different type of readers and my cellphone.
Any ideas?

Cheers
Tobbe

[AmrDwarf]

Seems I need to generate start, check and stop characters also....

[edje11]

What I remember form using these fonts a long time ago you need to start and end with an *

[AmrDwarf]

I am afraid that it is a bit more complicated then that.
It needs a start-code, a checksum and a stop-code.

Trying to figure out what they are and how to calculate.

[jclark58]

FWIW This is what I saw when I scanned it with Google Lens on an Android phone

[AmrDwarf]

Thanks,
About the same results as me when trying that barcode.

I got it working now. Inserted chars for start, stop and modulo 103 calculated check bit.
The thing that got me first was the difference between the chars code128 value and its actual numerical value when calculating the checksum. But looking at a table on Wikipedia for a couple of minutes I figured it out.

Cheers
Tobbe

[Steve-Mcl]

Good stuff. In the interest of future readers with same requirements would you be kind enough to post a demo in the flows library and post a link here? Or at minimum, post a demo flow in response on this thread?

Cheers

[AmrDwarf]

Oh, I will post the code. Just give me a little time to get the system it is intended for up and running.
And mind you, it is not pretty and only works with numbers for the time being. Needs some tweaks with type-casting in the right places to get it working with letters.

Cheers
Tobbe

[AmrDwarf]

Oups, Seems I spoke to soon

Some checksums give me trouble.
Trying to encode "012345" gives checksum value 97. Thats a special char that has no representation in the code128.ttf font. So instead I just get a rectangle.

Doing the checksum calculation by hand gives me the same results.
Any ideas what´s up? Are there not characters enough in the charset?

Seems I need to dig deeper into this.

kod = msg.payload.toString();
checksum = 103;
for (t=0; t<kod.length; t++)
{
    value = kod.charCodeAt(t) -32;
    checksum = checksum + (value * (t+1));
}
checksum = checksum % 103;
msg.checksum = checksum;

result = String.fromCharCode(203);
result = result + kod + String.fromCharCode(checksum+32) + String.fromCharCode(206);
msg.payload = result;

return msg;

Cheers
/ Tobias

[AmrDwarf]

I think I got it now.
I found that there was "a gap" in the value table for code128 compared to the ascii-table.
The code below is used in a function node and as input in msg.payload it takes a string.
Output msg.payload is a string that when displayed with font code128.ttf displays a code 128 barcode of type B.

kod = msg.payload.toString();
checksum = 104;
for (t=0; t<kod.length; t++)
{
    value = kod.charCodeAt(t) -32;
    checksum = checksum + (value * (t+1));
}
checksum = checksum % 103;
checksumChar = checksum + 32;
if (checksumChar > 126)
    {
    checksumChar = checksumChar + 68;
    }
result = String.fromCharCode(204);
result = result + kod + String.fromCharCode(checksumChar) + String.fromCharCode(206);
msg.payload = result;
return msg;

Sample Flow:
(You need code128.ttf font installed on the machine viewing the dashboard).

[{"id":"95c4ed88.b5109","type":"function","z":"e11eeb25.55a068","name":"To Code 128","func":"kod = msg.payload.toString();\nchecksum = 104;\nfor (t=0; t<kod.length; t++)\n{\n    value = kod.charCodeAt(t) -32;\n    checksum = checksum + (value * (t+1));\n}\nchecksum = checksum % 103;\nchecksumChar = checksum + 32;\nif (checksumChar > 126)\n    {\n    checksumChar = checksumChar + 68;\n    }\nresult = String.fromCharCode(204);\nresult = result + kod + String.fromCharCode(checksumChar) + String.fromCharCode(206);\nmsg.payload = result;\nreturn msg;","outputs":1,"noerr":0,"x":270,"y":960,"wires":[["335868bd.1408c8"]]},{"id":"335868bd.1408c8","type":"ui_template","z":"e11eeb25.55a068","group":"534a47c2.a947d8","name":"","order":0,"width":"6","height":"6","format":"<style>\n    .bar\n    {\n        font-family: 'code 128';\n        font-size: 60px;\n    }\n</style>\n<div class = 'bar' ng-bind-html=\"msg.payload\"></div>","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":420,"y":960,"wires":[[]]},{"id":"9ec1e58e.a48c18","type":"ui_text_input","z":"e11eeb25.55a068","name":"","label":"","tooltip":"","group":"efe50b8a.7ad188","order":0,"width":0,"height":0,"passthru":true,"mode":"text","delay":300,"topic":"","x":100,"y":960,"wires":[["95c4ed88.b5109"]]},{"id":"534a47c2.a947d8","type":"ui_group","z":"","name":"Barcode","tab":"fd476524.098798","disp":true,"width":"6","collapse":false},{"id":"efe50b8a.7ad188","type":"ui_group","z":"","name":"Testar","tab":"fd476524.098798","disp":true,"width":"6","collapse":false},{"id":"fd476524.098798","type":"ui_tab","z":"","name":"Testar","icon":"dashboard","disabled":false,"hidden":false}]

[zenofmud]

What did you do to get the barcode font installed. Currently the output of your sample flow returns text.

[AmrDwarf]

As said in the description it outputs a string that needs to be displayed with code128.ttf font.
That font needs to be installed in the machine looking at the dashboard. So how you install it depends on what OS you are using in the machine browsing the dashboard. It is not installed in node-red.

In windows you go to type face settings and add the file.
In Raspian/Debian you copy the .ttf file to /home/pi/.fonts
The code128.ttf is free to download.

To get the barcode to display on the dashboard you use css to display the output string with font family code 128. That could also be found in the sample flows template node.

Cheers
Tobbe

[zenofmud]

Nice! For any one using a Mac, download the font and go to your username/Library/Fonts folder and copy the font into it. Then restart your browser.