LCD Display for Node-Red

Pete's LCDAs must be obvious by now, I’m on a roll here. Having decided that Node-Red Dashboard is the way forward ( would in the past have used BLYNK or Imperihome) I’ve been getting to grips with the dashboard and as you’ll see if you check recent blogs I’ve had a fair bit of success with various CANVAS based libraries, getting them into the Dashboard.

Pete's LCDAnd so it was that over the weekend, MrShark contacted me with this link – a very nice, simple stand-along clock display. Well, that fired me up and so I grabbed the code and started ripping it apart.  One thing led to another and here we have a nice LCD display programmable in a wide range of (I have to say stunning) colours and able to display temperature or weather icons on the right  – and in the process I learned a few things such as what position-absolute is all about and a great deal about transparency.

Pete's LCDIn the display here you see the use of border shadows, 7-segment display fonts and transparency to give the impression of an old-fashioned LCD display – I think it does a nice job.  The code here displays the time, date and day automatically and you can inject temperature into it – but a brief look and you’ll soon realise that you could put just about anything in there – so I look forward to feedback from readers.  To make this work, from the link above I had to grab 3 fonts (DSEG7Modern-Italic.woff,  DSEG14Modern-Italic.woff and DSEG7Modern-BoldItalic.woff – also required is  DSEGWeather.woff) from the link above (into myfonts – see previous blogs for the reason I made up directory names like myfonts and mycss etc).

Pete's LCDSo – here is the code to put into a Dashboard template – you just need to inject msg.payload to set the temperature OR weather icons depending on mode – see flow – most of this is just for you to experiment with.

tmp484EThere are several spans in here – all position absolute – which means they overlap and are all relative to the top left of the main DIV – the trick with the LCD is simply the 8 figure semi-transparent – with you number or letter sitting on top of it. Works a treat I should say.  You’ll want a 6*2 size for the template… but of course you may choose to resize this completely.


tmpF88BAn important item include the z-index, I’ve used 50 and 51 arbitrarily – the original code this all came from used 100 and that ended up over-writing the Node-Red Dashboard menu! Of course if you don’t want to show temperature you could make that humidity or anything else really.

tmpA42CInjecting weather – see flow – includes: characters “0” to “9” for; background all segments, sun, cloud, rain, hard rain, snow, thunder rain, thunder hard rain, thunder, sun and cloud and finally “:” for all off.

Below is the code for the flow - make sure you have those fonts and inject this lot into a page in the dashboard - you'll need to change the tab details to suit yourself.

Oh, this page I found while looking for colour ideas…

[pcsh lang="js" tab_size="4" message="" hl_lines="" provider="manual"]

[{"id":"5439cd84.a88ae4","type":"ui_template","z":"c552e8d2.712b48","group":"1e03a2b2.83a61d","name":"Time and Temp","order":0,"width":"6","height":"2","format":"<script>\n    var icon=\"T\";\n\n        \n    var colours={\n    \"blackOnOrange\": {items:[\"#222\",\"#fb7c00\"]},    \n    \"blackOnGreen\" : {items:[\"#222\",\"#66ac66\"]},\n    \"blackOnBlue\" : {items:[\"#222\",\"#8888ff\"]},\n    \"blackOnYellow\" : {items:[\"#222\",\"#bbbb44\"]},\n    \"blackOnWhite\" : {items:[\"#222\",\"#aaaaaa\"]},\n    \"blackOnPink\" : {items:[\"#222\",\"#ff8888\"]},\n    \"yellowOnRed\" : {items:[\"#ccaa22\",\"#aa2222\"]},\n    \"whiteOnCyan\" : {items:[\"#dddddd\",\"#227777\"]},\n    \"orangeOnBlack\" : {items:[\"#ff8800\",\"#000000\"]},  \n    \"limeOnBlack\" : {items:[\"#00cc55\",\"#000000\"]},  \n    }  \n    \n    var daylist = [\"sun\", \"mon\", \"tue\", \"wed\", \"thu\", \"fri\", \"sat\"];\n    (function(scope){ \n            scope.$watch('msg', function(msg) {\n               if (typeof(msg.type) != \"undefined\") icon=msg.type;\n    \n               if (icon==\"t\")\n                    {\n                        $(\"#DSEGWEATHER-BACK\").text(\" \");\n                        $(\"#DSEGWEATHER-ICON\").text(\" \");\n                        $(\"#DSEGTempcF\").text(\"C\");\n                        $(\"#DSEGTempcB\").text(\"8\");                        \n                        if (typeof(msg.payload) != \"undefined\") { $(\"#DSEGTempF\").text(msg.payload);  $(\"#DSEGTempB\").text(\"88\"); }\n                    }\n                else\n                    {\n                        $(\"#DSEGTempF\").text(\"\");\n                        $(\"#DSEGTempcF\").text(\"\");\n                        $(\"#DSEGTempB\").text(\"\");\n                        $(\"#DSEGTempcB\").text(\"\");\n                        $(\"#DSEGWEATHER-BACK\").text(\"0\");\n                        if (typeof(msg.payload) != \"undefined\") $(\"#DSEGWEATHER-ICON\").text(msg.payload);\n                        \n                    }\n               if (typeof(msg.colour) != \"undefined\") {\n                              $(\".Clock-Wrapper\").css('background-color', colours[msg.colour].items[1]);  $(\".lcdClock\").css('color', colours[msg.colour].items[0]); \n                              if (colours[msg.colour].items[1]==\"#000000\") $(\".background\").css('color',\"rgba(255,255,255,0.15)\"); else  $(\".background\").css('color',\"rgba(0,0,0,0.1)\");\n                        }\n            });\n    })(scope);\n\n    function genTimerStrings(tm, num){\n    \n    \tvar i;\n    \tvar ret = tm.toString(10);\n    \tvar left = ret.length;\n    \n    \tif( left < num){\n    \t\tfor(i=0; i<( num - left ); i++ ){\n    \t\t\tret = String(0) + ret;\n    \t\t}\n    \t}\n    \treturn ret;\n    }\n\n    function updateTimer(){\n    \tvar ret;\n    \tvar date = new Date();\n    \tvar tm_year, tm_mon, tm_date, tm_hour, tm_min, tm_sec, tm_msec,tm_day;\n    \tvar colon;\n    \ttm_year = date.getFullYear();\n    \ttm_mon = date.getMonth()+1;\n    \ttm_date = date.getDate();\n    \ttm_day = date.getDay();\n    \ttm_hour = date.getHours();\n    \ttm_min = date.getMinutes();\n    \ttm_sec = date.getSeconds();\n    \ttm_msec = date.getMilliseconds();\n    \n    \ttm_mon = genTimerStrings(tm_mon, 2);\n    \ttm_date = genTimerStrings(tm_date, 2);\n    \ttm_hour = genTimerStrings(tm_hour, 2);\n    \ttm_min = genTimerStrings(tm_min, 2);\n    \ttm_sec = genTimerStrings(tm_sec, 2);\n    \ttm_day = daylist[tm_day];\n    \n    \tif( tm_msec > 499 ){\n    \t\tcolon = ' ';\n    \t}else{\n    \t\tcolon = ':';\n    \t}\n    \n    \tdocument.getElementById(\"DSEGClock\").innerHTML = tm_hour + colon + tm_min + \"<span style=\\\"font-size:30px;\\\">\"  + tm_sec + \"</span>\";\n    \tdocument.getElementById(\"DSEGClock-Year\").innerHTML = \"<span class=\\\"D7MI\\\">\" + tm_year + \"-\" + tm_mon + \"-\" + tm_date + ' ' + \"</span><span class=\\\"D14MI\\\">\" + tm_day  +  \".\" + \"</span>\";\n    \n    \tsetTimeout(\"updateTimer()\", 500 - date.getMilliseconds()%500 );\n    }\n\n    updateTimer();\n    \n</script>\n\n<style type=\"text/css\">\n.lcdClock {\n\tbackground-color:#fbfbfb;\n\tfont-size:100%;\n\tpadding-left:10px;\n\tpadding-right:10px;\n\tpadding-bottom:10px;\n\tmax-width:300px;\n\tline-height:160%;\n\tcolor:#222;\n\tfont-family:Meiryo, 'Lucida Grande','Hiragino Kaku Gothic ProN', sans-serif;\n}\n\n@font-face {\n  font-family: \"D7MI\";\n  src: url(\"/myfonts/DSEG7Modern-Italic.woff\") format('woff');\n}\n\n@font-face {\n  font-family: \"D14MI\";\n  src: url(\"/myfonts/DSEG14Modern-Italic.woff\") format('woff');\n}\n\n@font-face {\n  font-family: \"D7MBI\";\n  src: url(\"/myfonts/DSEG7Modern-BoldItalic.woff\") format('woff');\n}\n\n@font-face {\n  font-family: \"DWEATHER\";\n  src: url(\"/myfonts/DSEGWeather.woff\") format('woff');\n}\n\n.Weather-Background{\n\tz-index:50;\n\tposition:absolute;\n\ttop:24px;\n\tleft:226px;\n\tfont-size:68px;\n}\n\n.Weather-Front{\n\tz-index:51;\n\tposition:absolute;\n\ttop:24px;\n\tleft:226px;\n\tfont-size:68px;\n}\n\n.D7MI {\nfont-family: \"D7MI\";\n}\n\n.D7MBI {\nfont-family: \"D7MBI\";\n}\n\n.D14MI {\nfont-family: \"D14MI\";\n}\n\n.DWEATHER {\nfont-family: \"DWEATHER\";\nfont-size:68px;\nheight:68px;\n}\n\n.Clock-Wrapper{\n\tposition:relative;\n\tborder:6px solid #000;\n\tborder-radius:9px;\n\theight:68px;\n\twidth:280px;\n\tbackground-color:#fb7c00;\n\tbackground-color:#66ac66;\n\tbox-shadow: 4px 4px 28px 0px rgba(0,0,0,0.3) inset; \n}\n\n.Clock-Time-Background{\n\tz-index:50;\n}\n\n.Clock-Time-Front{\n\tz-index:51;\n}\n\n.Clock-Time-Background,.Clock-Time-Front {\n   \tposition:absolute;\n\ttop:38px;\n\tleft:5px; \n\tfont-size:42px;\n}\n\n.background { color:rgba(0,0,0,0.1); }\n\n.Clock-Year-Background{\n\tz-index:50;\n\tfont-size:18px;\n}\n\n.Clock-Year-Front{\n\tz-index:51;\n}\n\n.Clock-Year-Background,.Clock-Year-Front {\n   \tposition:absolute;\n\ttop:2px;\n\tleft:5px; \n\tfont-size:18px;\n}\n\n.temp { z-index:51; }\n.tempBack { z-index:50; color:rgba(0,0,0,0.1); }\n.temp,.tempBack {\n   \tposition:absolute;\n\ttop:28px;\n\tleft:210px; \n\tfont-size:42px;\n}\n\n.tempc { z-index:51; }\n.tempcBack { z-index:50;  }\n.tempc,.tempcBack {\n   \tposition:absolute;\n\ttop:36px;\n\tleft:278px; \n\tfont-size:24px;\n}\n\n#DSEG7_OUTPUT{\n\tfont-family: \"D7MI\";\n}\n\n#DSEG14_OUTPUT{\n\tfont-family: \"D14MI\";\n}\n\n#DSEG14_OUTPUT, #DSEG7_OUTPUT{\n\tfont-size:18px;\n\tmargin-top:2px;\n\tmargin-bottom:10px;\n}\n\n</style>\n\n\n<div class=\"Clock-Wrapper center lcdClock\">\n\t<span class=\"Clock-Time-Background background  D7MBI\">88:88<span style=\"font-size:30px;\">88</span></span>\n\t<span id=\"DSEGClock\" class=\"Clock-Time-Front D7MBI\"></span>\n\t<span class=\"Clock-Year-Background background\"><span class=\"D7MI\">2088-88-88</span><span class=\"D14MI\"> ~~~</span></span>\n\t<span id=\"DSEGClock-Year\" class=\"Clock-Year-Front\"></span>\n\t\n\t<span id=\"DSEGTempF\" class=\"temp D7MBI\">00</span>\n\t<span id=\"DSEGTempB\" class=\"tempBack background D7MBI\">88</span>\t\n\t<span id=\"DSEGTempcF\" class=\"tempc D7MI\">C</span>\n\t<span id=\"DSEGTempcB\" class=\"tempcBack background D7MI\">8</span>\n\t\n\t\n\t<span id=\"DSEGWEATHER-BACK\" class=\"Weather-Background background DWEATHER\"></span>\n\t<span id=\"DSEGWEATHER-ICON\" class=\"Weather-Front DWEATHER\"></span>\n\t\t\n</div>\n\n","storeOutMessages":true,"fwdInMessages":false,"x":480,"y":1480,"wires":[[]]},{"id":"e26a920b.fd916","type":"inject","z":"c552e8d2.712b48","name":"21c","topic":"","payload":"21","payloadType":"num","repeat":"","crontab":"","once":false,"x":90,"y":1220,"wires":[["5439cd84.a88ae4"]]},{"id":"a92b9b7a.795228","type":"inject","z":"c552e8d2.712b48","name":"32c","topic":"","payload":"32","payloadType":"num","repeat":"","crontab":"","once":false,"x":90,"y":1260,"wires":[["5439cd84.a88ae4"]]},{"id":"6d378317.dd743c","type":"inject","z":"c552e8d2.712b48","name":"green","topic":"","payload":"blackOnGreen","payloadType":"str","repeat":"","crontab":"","once":false,"x":90,"y":1400,"wires":[["a23865de.5f59b8"]]},{"id":"24a314bf.90927c","type":"inject","z":"c552e8d2.712b48","name":"orange","topic":"","payload":"blackOnOrange","payloadType":"str","repeat":"","crontab":"","once":false,"x":90,"y":1440,"wires":[["a23865de.5f59b8"]]},{"id":"a23865de.5f59b8","type":"function","z":"c552e8d2.712b48","name":"","func":"msg.colour=msg.payload;\nmsg.payload=undefined;\nreturn msg;","outputs":1,"noerr":0,"x":270,"y":1480,"wires":[["5439cd84.a88ae4"]]},{"id":"c8edfc9b.be6ce","type":"inject","z":"c552e8d2.712b48","name":"blue","topic":"","payload":"blackOnBlue","payloadType":"str","repeat":"","crontab":"","once":false,"x":90,"y":1480,"wires":[["a23865de.5f59b8"]]},{"id":"18a1c3a.b9c283c","type":"inject","z":"c552e8d2.712b48","name":"yellow","topic":"","payload":"blackOnYellow","payloadType":"str","repeat":"","crontab":"","once":false,"x":90,"y":1520,"wires":[["a23865de.5f59b8"]]},{"id":"a5c4dd24.4b6ff","type":"inject","z":"c552e8d2.712b48","name":"white","topic":"","payload":"blackOnWhite","payloadType":"str","repeat":"","crontab":"","once":false,"x":90,"y":1560,"wires":[["a23865de.5f59b8"]]},{"id":"83e6ddc0.ec7bd","type":"inject","z":"c552e8d2.712b48","name":"pink","topic":"","payload":"blackOnPink","payloadType":"str","repeat":"","crontab":"","once":false,"x":90,"y":1600,"wires":[["a23865de.5f59b8"]]},{"id":"ebfd33d8.c8b13","type":"inject","z":"c552e8d2.712b48","name":"red and light text","topic":"","payload":"yellowOnRed","payloadType":"str","repeat":"","crontab":"","once":false,"x":120,"y":1640,"wires":[["a23865de.5f59b8"]]},{"id":"26972f6.8af94d","type":"inject","z":"c552e8d2.712b48","name":"cyan and white","topic":"","payload":"whiteOnCyan","payloadType":"str","repeat":"","crontab":"","once":false,"x":120,"y":1680,"wires":[["a23865de.5f59b8"]]},{"id":"10449ff5.d9588","type":"inject","z":"c552e8d2.712b48","name":"Type t for TEXT","topic":"","payload":"t","payloadType":"str","repeat":"","crontab":"","once":false,"x":120,"y":1760,"wires":[["fe927255.d2e2a"]]},{"id":"3e44785a.6181b8","type":"inject","z":"c552e8d2.712b48","name":"Type w for weather","topic":"","payload":"w","payloadType":"str","repeat":"","crontab":"","once":false,"x":130,"y":1800,"wires":[["fe927255.d2e2a"]]},{"id":"fe927255.d2e2a","type":"function","z":"c552e8d2.712b48","name":"","func":"msg.type=msg.payload;\nmsg.payload=undefined;\nreturn msg;","outputs":1,"noerr":0,"x":310,"y":1740,"wires":[["5439cd84.a88ae4"]]},{"id":"94706c5b.a9292","type":"inject","z":"c552e8d2.712b48","name":"weather 2","topic":"","payload":"2","payloadType":"str","repeat":"","crontab":"","once":false,"x":100,"y":1299,"wires":[["5439cd84.a88ae4"]]},{"id":"77b95bb8.1ce774","type":"inject","z":"c552e8d2.712b48","name":"weather 3","topic":"","payload":"3","payloadType":"str","repeat":"","crontab":"","once":false,"x":100,"y":1339,"wires":[["5439cd84.a88ae4"]]},{"id":"30c75186.ef732e","type":"inject","z":"c552e8d2.712b48","name":"lime on black","topic":"","payload":"limeOnBlack","payloadType":"str","repeat":"","crontab":"","once":false,"x":110,"y":1720,"wires":[["a23865de.5f59b8"]]},{"id":"1e03a2b2.83a61d","type":"ui_group","z":"","name":"testy","tab":"f9bab960.c839b8","disp":true,"width":"6"},{"id":"f9bab960.c839b8","type":"ui_tab","z":"","name":"testy","icon":"dashboard"}]



60 thoughts on “LCD Display for Node-Red

      1. The code is in the blog entry and also will change as time goes on.

        Note there is an amendment needed - any reference to z-index: 100 should be changed to z-inded:51 to avoid over-writing the Dashboard menu.

  1. Hi Pete,

    nice find - this makes a nice addition to NodeRed, indeed!!

    Thanks for writing it up!

    Btw. you can get rid of the lots of 'if' statements (and make the code more readable imo), if you do something like this:

    var daylist = ["sun", "mon", "tue", "wed", "thu", "fri", "sat"];
    var colours = {
    "orange": "#fb7c00",
    "green": "#66ac66",
    "blue": "#8888ff",
    "yellow": "#bbbb44",
    "white": "aaaaaa",
    "pink": "#ff8888"

    scope.$watch('msg', function(msg) {
    if (typeof(msg.payload) != "undefined") $("#DSEGTemp").text(msg.payload);
    $(".Clock-Wrapper").css('background-color', colours[msg.colour] || 'transparent' );


    scope.$watch('msg', function(msg) {
    if (typeof(msg.payload) != "undefined") $("#DSEGTemp").text(msg.payload);
    if (msg["colour"]) {
    $(".Clock-Wrapper").css('background-color', colours[msg.colour]);


  2. exercise for readers: add the degree sign to the temperature... html entity:
    &#xB0 ;
    or just the old fashioned html one:
    &deg ;

    p.s.: remove the space before the ; to have the entity, if i remove it now, you'll get the actual entity, not its code...

  3. i'm going to have to admit defeat with this one, I can't seem to get the fonts to work.

    have downloaded the files and placed them in the following dir.


    but no mater what I try and put in

    src: url("~/.node-red/public/myfonts /DSEGWeather.woff") format('woff');

    I can see the correct font, any pointers?

      1. Wherever .node-red directory is there is a settings.js.

        in there set up a public folder wherever you want. that is your base folder. In there setup myjs, myimages, mycss. Dont use js, css name. Reboot Node Red, use directories like /mycss

      2. do yourself a favour, and use node-red on linux (a vm or a raspberry or a vps or an old pc, whatever)... node-red on windows is JUST a bit less insane and invasive than Docker, without the automatism that the linux shell allows...

  4. Well that's just fabulous 🙂

    After experimenting with the out of the box node-red dashboard nodes , I came away thinking that these were really very good, a bit limited but now realize I can do customized stuff like this.

    For the record I've got my root and static paths setup like this in settings.js:

    httpRoot: '/red',
    httpStatic: '/ui',

    the reason being is that I wanted to serve the admin editor from one location with one set of auth credentials and the dashboard from another location with a different set of auth credentials. This seems to work well enough and it means I drop fonts and other static resources into folders like /node-red/public/ui/fonts, /node-red/public/ui/img etc

  5. Hi Peter.
    I'm not very experienced on Node-RED - been trying for a few days, and have installed bigtimer which works like a dream!
    Now I want to try your LCD contribution - have found the code, but don't know what to do with it.
    I'm sure this is very basic, but since I'm not familiar with the concepts, I'm lost. Found nothing I could use on google. I guess the code should go into a file, but which?

    Best regards

    1. Hi there Ulf

      Teaching programming is beyond the scope of this blog - if any readers care to help - then by all means. You need to study how to use the Node-Red Dashboard (there are plenty of videos out there) and how to use functions within Node-Red.


      1. Hi Peter
        I see I have a LONG way to go. I started to dig into C# some months ago, and I'm able to do some simple programming, but still a lot to learn. Next step is Java.
        My goal is to be able to get input to Raspberry Pi so I can set start and stop time (scheduling) for different items on and off from the user interface in a simple way. This is, of course, not difficult if I do it from the management window, but the user should be able to do this from a simple ui.
        Not asking you for advice - just to inform you, and as I told you, I feel I have a long way to go.

        All the best from

        1. For this environment - learning Javascript (with emphasis on node-js - well worthwhile - you can take advantage of Node-Red visual wiring and pre-build nodes - while using your own functions to go deeper...

          1. problem is that generic javascript books and courses are mostly pointed to web development, while this, even if same language, requires different skills and features addressed, and there are not so many good books or courses on THIS javascript kind of development... if anyone knows something, well appreciated, i'm still learning 🙂

          2. Hi Peter.
            First of all, thank you so much for all the information you are supplying! I have been reading and experimenting, and I have so far been able to import your code, but I have problems with the fonts.
            Have copied the font files to /myfonts and set the owner to pi.pi, but does not seem to work. Do I need anything else than the .woff files in the directory?

            Best regards

            1. After some digging, I finally found the answer. Took some time to find where to look, but I thing I'm starting to get a grip on how I can find what I need in your tons of information!

  6. the WAF on this is super high. thank you! i especially love the 'old-timey' effect with the faded digits ... and its potential to burn our screens 🙂

    i've put this in a super large widget (22x14) -- the #back div changes image-background on a timer; then #inside (has the clock) and 2 animations to move it around.

    #inside { animation: screenSaveX 200s alternate infinite,
    screenSaveY 175s alternate infinite }
    @keyframes screenSaveY { 0% {top : 20px; }100% { top : 250px; }}
    @keyframes screenSaveX { 0% {left: 30px; }100% { left: 400px; }}

  7. I am maybe wanting to use the LCD display. It really looks great.

    I believe there are also fonts needing to be downloaded and installed.

    Is there a place which shows me where to get all the things needed to get a LCD working?

    And on a side note: Fonts.... Ok, but do they go on the machine with the web page, the machine viewing it, or both?

      1. I just looked at the settings.js file and did a grep for "myfonts" and it didn't find anything.

        pi@TimePi:~/.node-red $ cat settings.js | grep myfonts
        pi@TimePi:~/.node-red $

        (Not trying to be difficult.)

            1. One small thing I see is that the "clock" (code above) with the colon.
              As the colon flashes (on/off) with each second, the minutes/seconds wiggle slightly left/right.

              Do other people see that too?

  8. Sorry was that for the slightly moving digits or the weather icon?

    I tried IE (on another machine) and FF (again on other machine) and both have the same problem.

    On the weather icon thinigy.

    When I press the "weather 2" node all I get is the time and the digit 2 where the temperature was shown.

  9. Here are some pictures of the screen.

    Picture 1 (by name) is what I get status quo after re-installing the entire flow. (Check size of the wnidow)
    Picture 2 I set the width to 10.
    Picture 3 with the size of the function node set to 8 x 4
    Picture 4 after I press the temp set to 32 degrees.
    Picture 5 after I pressed the "Weather 3" injection point.
    Seems I can't add more than 1 picture.
    Stay tuned. This is picture 1.

  10. you're missing the fonts... that's completely different from the opening images, don't you see that???
    read the post, there's the link to the font file, then put them into the folder i already said in previous comments...

  11. Ok, but...... I did install them (though there was some confusion)


    look at code: you have to put font files into the myfonts folder (which should be under the folder you defined as public in your settings.js)

    Village idiot Village idiot
    June 28, 2018 at 9:44 am

    I just looked at the settings.js file and did a grep for "myfonts" and it didn't find anything.

    pi@TimePi:~/.node-red $ cat settings.js | grep myfonts
    pi@TimePi:~/.node-red $

    (Not trying to be difficult.)
    DrFragle and MrShark DrFragle and MrShark
    June 28, 2018 at 9:54 am

    you have to look for "public" there, and create a myfonts folder in the folder you'll find there... then put fonts in there
    end quote

    See attached picture for a graphical view of what I did.
    See the two red rectangles.
    Is that correct?

    1. "is that correct?"

      if you had read the article, you should have noted this, by Peter:
      "To make this work, from the link above I had to grab 3 fonts (DSEG7Modern-Italic.woff, DSEG14Modern-Italic.woff and DSEG7Modern-BoldItalic.woff – also required is DSEGWeather.woff) from the link above (into myfonts – see previous blogs for the reason I made up directory names like myfonts and mycss etc)."

      so, ONLY the woff files should go in that folder, NOT their container directory! And when i wrote to look at the code, you should have noted the paths:
      "/myfonts/DSEG14Modern-Italic.woff" for example... there's no way an other folder between myfonts and the actual font file...

      1. Thanks.

        I am looking up and down in the replies and there is a very poor explination of what to do.

        Someone else did exactly what I did (I now see) and though he got it working, there is not a clear "THIS IS WHAT I DID" part.

        WAY way up at the top is the link to the fonts. Granted.

        A few lines down is the part where it is explained what you just said, but it is "hidden" in the text.

        I am thinking it would have helped the other person (Neil East) and myself a lot of pain had there been clearer stuff saying what to do.

        I'm not angry/upset/(what ever). I am just saying.

        This is where you get the fonts .......
        Set up of "myfonts" in the settings.js file .......
        Copy these to "myfonts" .........

        But that's just a thought.

        Shall apply and see what happens.

        1. All you need is in Peter's post... Where to find fonts, where to put them... If you want the why, too, as he said: look in previous blog posts... "use the search, Luke"...
          P.S.: nowhere is said to put myfonts in settings.js... You just need to create a folder named as such in the "public" one, which THIS yes is in settings... And is already setup by the script...

          About the other comment: fonts go on server folder, and client will receive them via http because this is the way an http server works and what an http request produce... Hoping you're not going to ask to explain this, too...

          1. No, I won't ask about the fonts on both machine.

            (It is just I have seen sites which when you go to them and they use fonts not on your machine, the site looks weird. So you have to have the fonts on YOUR machine before the site works/looks as it should.)

            I am now messing around with the flow and seeing what the other weather icons are, and the like.

            Thanks for the help. Believe me when I say I wasn't trying to be difficult. It is just I don't think like most people and so HOW I see things is not always as "easy" as others.

  12. Just to add:
    I copied the files from ONE of those directories and put them in that "myfonts" directory.

    Rebooted the machine.

    Still no luck.

    But this also (to me) harps back to my first question:
    On which machine do these fonts need to be installed?
    The source - which would make sense.
    BOTH - I'll get to that in a sec'
    The destination?

    Why the destination?

    Well, as I am looking at the page via http, it sends information from the source machine to the destination.
    If it is using "font x" and the destination machine doesn't have "font x" what will happen?

    I can't see how the destination machine can magically display a font it doesn't have.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.