Moon phase icons

General
1

If you have been following this thread, you may be aware that I'm in the process of adding moon phase icons to weather-icons-lite, which would make them available as part of the dashboard core.
However, I've hit a dilemma, because the icons portray different perceptions when the dashboard theme is changed.

This first image is with the CSS written as PlanA, and shows how they look in first the Light Theme, and just below, in the Dark Theme.

planA
planA841Ă—220 29.3 KB

However, changing the CSS to PlanB, again this is how they look, again, Light Theme first and the Dark Theme below.

planB
planB841Ă—220 30.2 KB

2

In the real world the shadow is always dark.

2 Likes
3

Yes - as this is representing a real physical thing then it shouldn't really change colour. (imho)

4

So we need PlanB CSS for the light theme, and PlanA CSS for the dark theme!!

We could have both CSS entries and select them by;
<i class="wi wi-moon-lt-wax-cres"></i> and
<i class="wi wi-moon-dk-wax-cres"></i>
?

5

May be wi-moon-wax-cres for light as default and wi-moon-wax-cres-dark for dark theme.
Will be easier to handle if creating some dynamic stuff..

6

Maybe even lose the leading wi from wi-moon-wax-cres
<i class="wi moon-wax-cres-dark"></i>
It really serves no purpose.

7

Well but all other icons from this set will still have it? Makes them somehow lonely :new_moon_with_face:

8

This is how they look having separate CSS entries for the dark theme;

planC
planC841Ă—220 30.6 KB

5 Likes
9

For me it looks correct.
Confusing is to look them in parallel, brain is somehow trained to read monochrome graphics with some tweaking always applied and in this case it fails in weird way.

10

Version 1.3.1 has just been published to npm.

1 Like
11

The moon phase icons have now been added to node-red-dashboard v2.22.1 and the css mappings are listed here, and used exactly the same as the other weather-icons-lite icons.

4 Likes
12

Hello,
I'm trying to use the new icons, but they will not show up. I'm running dashboard v2.22.1. This is my code inside ui_template node

 <span><i class="wi wi-moon-new-dark"></i></span>

It does not work with the default theme either (without -dark suffix). Other weather icons are working correctly. Is there something that I'm missing?

13

Have you tried to clear browser cache?

1 Like
14

I feel ashamed I did not think of that. Thank you !

15

Moon phase icons are not working for me in Node-RED 1.1.3 with node-red-dashboard 2.23.2 running on Raspbian OS buster using NodeJS 12.18.3, viewied using Chrome running on various version of Linux and Windows.

Using a ui_template node with the following contents I would expect to see three icons. I actually see only two, the WU and Darksky ones. (The commented-out line is what I would like to get working. The three hard-coded values are for testing.)

<div>
    <!--<i class="wi {{msg.payload}}"></i>-->
    <i class="wi wi-moon-wan-gibb"></i>
    <i class="wi wi-darksky-clear-night"></i>
    <i class="wi wi-wu-clear"></i>
</div>

It does not make any difference if I try the dark or light themed versions of the moon icons. I.e. I only see two icons if I use wi-moon-wan-gibb-dark in the preceding, as well.

I have tried clearing my browser cache, switching the theme back and forth between dark and light, and choosing different icon names from https://github.com/Paul-Reed/weather-icons-lite/blob/master/css_mappings.md. I have never seen any moon icons rendered but do see weather related ones.

1 Like
16

Thanks for reporting @parasaurolophus
Same issue here using latest dashboard version.
Checking the node-red-dashboard's css I can see that the dashboard has been built for some reason with an old version of my repo.

@dceejay the css for the moon phases is missing from your latest dashboard version.
Does it need rebuilding?

17

odd- should be pulling in v1.3.1
but yes will need rebuild if not.

1 Like
18

Pushed build to master if someone wants to check (not yet on npm)

19

Yes, all good now
Thanks

20

Now fixed in node-red-dashboard.
Fixed version npm released this morning :blush:

1 Like