# Barcode display in Dashboard

**URL:** <https://discourse.nodered.org/t/barcode-display-in-dashboard/23022>\
**Category:** Dashboard\
**Created:** [12 March 2020 10:19 UTC](https://discourse.nodered.org/t/barcode-display-in-dashboard/23022 "2020-03-12T10:19:23Z")\
**Posts on this page:** 17\
**Page:** 1

<div class="post-metadata">

**Author:** ![AmrDwarf](https://avatars.discourse-cdn.com/v4/letter/a/839c29/32.png) [@AmrDwarf](https://discourse.nodered.org/u/AmrDwarf)\
**Post date:** [12 March 2020 10:19 UTC](https://discourse.nodered.org/t/barcode-display-in-dashboard/23022/1 "2020-03-12T10:19:23Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![edje11](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/edje11/32/572_2.png) [@edje11](https://discourse.nodered.org/u/edje11)\
**Post date:** [12 March 2020 10:42 UTC](https://discourse.nodered.org/t/barcode-display-in-dashboard/23022/2 "2020-03-12T10:42:06Z")

</div>

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](https://www.dafont.com/code-128.font)

---

<div class="post-metadata">

**Author:** ![AmrDwarf](https://avatars.discourse-cdn.com/v4/letter/a/839c29/32.png) [@AmrDwarf](https://discourse.nodered.org/u/AmrDwarf)\
**Post date:** [12 March 2020 11:21 UTC](https://discourse.nodered.org/t/barcode-display-in-dashboard/23022/3 "2020-03-12T11:21:32Z")

</div>

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

// Tobbe

---

<div class="post-metadata">

**Author:** ![AmrDwarf](https://avatars.discourse-cdn.com/v4/letter/a/839c29/32.png) [@AmrDwarf](https://discourse.nodered.org/u/AmrDwarf)\
**Post date:** [12 March 2020 13:11 UTC](https://discourse.nodered.org/t/barcode-display-in-dashboard/23022/4 "2020-03-12T13:11:26Z")

</div>

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

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/7/d7eaec5e07bd3367ceba9a50c06c86675f82820a.png)

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

---

<div class="post-metadata">

**Author:** ![AmrDwarf](https://avatars.discourse-cdn.com/v4/letter/a/839c29/32.png) [@AmrDwarf](https://discourse.nodered.org/u/AmrDwarf)\
**Post date:** [12 March 2020 13:17 UTC](https://discourse.nodered.org/t/barcode-display-in-dashboard/23022/5 "2020-03-12T13:17:29Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![edje11](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/edje11/32/572_2.png) [@edje11](https://discourse.nodered.org/u/edje11)\
**Post date:** [12 March 2020 13:56 UTC](https://discourse.nodered.org/t/barcode-display-in-dashboard/23022/6 "2020-03-12T13:56:37Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![AmrDwarf](https://avatars.discourse-cdn.com/v4/letter/a/839c29/32.png) [@AmrDwarf](https://discourse.nodered.org/u/AmrDwarf)\
**Post date:** [12 March 2020 14:01 UTC](https://discourse.nodered.org/t/barcode-display-in-dashboard/23022/7 "2020-03-12T14:01:09Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![jclark58](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/jclark58/32/2215_2.png) [@jclark58](https://discourse.nodered.org/u/jclark58)\
**Post date:** [13 March 2020 04:55 UTC](https://discourse.nodered.org/t/barcode-display-in-dashboard/23022/8 "2020-03-13T04:55:57Z")

</div>

![Screenshot_20200313-155329](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/b/2b69d57ac891a986c4308a87db225167a6182364.png)

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

---

<div class="post-metadata">

**Author:** ![AmrDwarf](https://avatars.discourse-cdn.com/v4/letter/a/839c29/32.png) [@AmrDwarf](https://discourse.nodered.org/u/AmrDwarf)\
**Post date:** [13 March 2020 05:18 UTC](https://discourse.nodered.org/t/barcode-display-in-dashboard/23022/9 "2020-03-13T05:18:37Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [13 March 2020 07:00 UTC](https://discourse.nodered.org/t/barcode-display-in-dashboard/23022/10 "2020-03-13T07:00:05Z")

</div>

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

Cheers

---

<div class="post-metadata">

**Author:** ![AmrDwarf](https://avatars.discourse-cdn.com/v4/letter/a/839c29/32.png) [@AmrDwarf](https://discourse.nodered.org/u/AmrDwarf)\
**Post date:** [13 March 2020 07:15 UTC](https://discourse.nodered.org/t/barcode-display-in-dashboard/23022/11 "2020-03-13T07:15:08Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![AmrDwarf](https://avatars.discourse-cdn.com/v4/letter/a/839c29/32.png) [@AmrDwarf](https://discourse.nodered.org/u/AmrDwarf)\
**Post date:** [13 March 2020 12:56 UTC](https://discourse.nodered.org/t/barcode-display-in-dashboard/23022/12 "2020-03-13T12:56:50Z")

</div>

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.

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/e/7/e72d01adfa04e58af027e44a841a0df80a40a7ec.png)

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.

```auto
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

---

<div class="post-metadata">

**Author:** ![AmrDwarf](https://avatars.discourse-cdn.com/v4/letter/a/839c29/32.png) [@AmrDwarf](https://discourse.nodered.org/u/AmrDwarf)\
**Post date:** [13 March 2020 14:05 UTC](https://discourse.nodered.org/t/barcode-display-in-dashboard/23022/13 "2020-03-13T14:05:51Z")

</div>

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.

```auto
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).

```auto
[{"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}]

```

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/1/b136644ec0b4d20ffc7a68ac363145921b1a66e5.png)

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [13 March 2020 14:20 UTC](https://discourse.nodered.org/t/barcode-display-in-dashboard/23022/14 "2020-03-13T14:20:59Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![AmrDwarf](https://avatars.discourse-cdn.com/v4/letter/a/839c29/32.png) [@AmrDwarf](https://discourse.nodered.org/u/AmrDwarf)\
**Post date:** [13 March 2020 14:50 UTC](https://discourse.nodered.org/t/barcode-display-in-dashboard/23022/15 "2020-03-13T14:50:48Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [13 March 2020 15:11 UTC](https://discourse.nodered.org/t/barcode-display-in-dashboard/23022/16 "2020-03-13T15:11:56Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [12 April 2020 15:11 UTC](https://discourse.nodered.org/t/barcode-display-in-dashboard/23022/17 "2020-04-12T15:11:56Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.