Jump to content

Icon request for a fountain


Recommended Posts

Here is an icon I found and loaded it up for my fountain.  That same website has a bunch of variations as well.

https://img.freepik.com/premium-vector/water-fountain-icon-logo-vector-design-template_827767-158.jpg

The problem I have with it is that when the fountain is on, I want it to turn red, but setting it to do that just overwrites the entire box with solid red.  I could make a second icon that is red, but as far as I can tell, you can only upload an icon from a url.  While I could probably figure a way to load an image to a website so that it is accessible by url, is there an easier way?

 

Other issue is that since it is not the default icon, I can only configure a custom icon in the advanced settings section which are triggered to appear only when the conditions you set are met.  Since it takes a few seconds for the status of the node to populate, it defaults to the standard icon and then only shows the custom icon after the value is populated.

 

@Javi

Edited by apostolakisl
Link to comment
1 hour ago, apostolakisl said:

Here is an icon I found and loaded it up for my fountain.  That same website has a bunch of variations as well.

https://img.freepik.com/premium-vector/water-fountain-icon-logo-vector-design-template_827767-158.jpg

The problem I have with it is that when the fountain is on, I want it to turn red, but setting it to do that just overwrites the entire box with solid red.  I could make a second icon that is red, but as far as I can tell, you can only upload an icon from a url.  While I could probably figure a way to load an image to a website so that it is accessible by url, is there an easier way?

The image must be a PNG for color, other types will color the entire image view port.

I ran a simple test below and this appears to work with color and URL.

Downloaded the sailing image in PNG format

https://fonts.google.com/icons?icon.set=Material+Symbols&icon.query=water&icon.platform=web&selected=Material+Symbols+Outlined:sailing:FILL@0;wght@400;GRAD@0;opsz@24&icon.size=24&icon.color=%23e8eaed

Added to Google Drive then followed the example below to get the URL for the icon. Note this is not the shared URL. 

https://support.exclaimer.com/hc/en-gb/articles/4445816657309-How-to-host-images-using-Google-Drive

Colors are now honored.

1 hour ago, apostolakisl said:

Other issue is that since it is not the default icon, I can only configure a custom icon in the advanced settings section which are triggered to appear only when the conditions you set are met.  Since it takes a few seconds for the status of the node to populate, it defaults to the standard icon and then only shows the custom icon after the value is populated.

 

@Javi

 

Currently this is the only way to override the default for the Home Tab, Favorites allows a default icon to be set in the Favorites Editor.  However it is possible to use the function "If value is Greater Than or equal to" the lowest possible value then the icon will be populated for all values.  This should now honor the Global Color Values.

 

NOTES:

I found a bug which may cause the wrong icon to display (view recycled) which will be fixed in the next update.

Link to comment

@Javi

 

I tried that and it didnt't work.  Still just get a red box when I tried to change the color to red.  I opened the icon in my photo editor, saved as a png file, uploaded to google drive and then put the id into the format listed on the webpage.  

 

You can see it is a png file in google drive.  

image.png.324df41690c418f4abb1aa9687e02448.png

 

 

https://lh3.googleusercontent.com/d/1iBEDJtkUlm3NYaSeevobRod6QGrtY558

 

1iBEDJtkUlm3NYaSeevobRod6QGrtY558

 

Also, when I open ud mobile after not using for a while, the value isn't populated at all.  So why would listing any value or value range trigger the substitution of the desired icon when there is no value at all?  I tried "greater than or equal to 0" and it still puts the default icon up for about 5 seconds until the values populate.

 

EDIT:  I found an online tool that lets me replace all the pixels of one color with a different color.  So I can just have two icons of different colors that are otherwise identical.

It appears that UD mobile access the URL every single time it uses the imgae.  Correct?  Rather than download and save the image?  

Edited by apostolakisl
Link to comment

I got it to work with two url's one for each color.  But what is not clear is why they both show up as blue on this website and the one is red and the other blue on UD mobile.

image.png.1914ff81c2df589ea8c818e7db396e82.png

 
https://lh3.googleusercontent.com/d/1YggIgfB681Rp3bLwxBVPOA2wNQY6Gpgv
https://lh3.googleusercontent.com/d/1iBEDJtkUlm3NYaSeevobRod6QGrtY558

1iBEDJtkUlm3NYaSeevobRod6QGrtY558

1YggIgfB681Rp3bLwxBVPOA2wNQY6Gpgv

Edited by apostolakisl
Link to comment
4 hours ago, Techman said:

@Javi

RE: Icons, I noticed that when you have grouped devices only the primary icon can be changed.  Is that by design?

 

On the Home Tab?  If the group is expanded then the icon should be visible.  The Device Dashboard does not yet have colors/icons implemented for groups.

 

3 hours ago, apostolakisl said:

@Javi

 

I tried that and it didnt't work.  Still just get a red box when I tried to change the color to red.  I opened the icon in my photo editor, saved as a png file, uploaded to google drive and then put the id into the format listed on the webpage. 

 This likely will not work as the image does not have an alpha channel so the color will fill the entire image.  The test described above works, so if this does not work with another image it is due to how the image was created.

 

3 hours ago, apostolakisl said:

Also, when I open ud mobile after not using for a while, the value isn't populated at all.  So why would listing any value or value range trigger the substitution of the desired icon when there is no value at all?  I tried "greater than or equal to 0" and it still puts the default icon up for about 5 seconds until the values populate.

My mistake this also requires "If value equals NULL". for the null value, unless this is a favorite.

3 hours ago, apostolakisl said:

 

It appears that UD mobile access the URL every single time it uses the imgae.  Correct?  Rather than download and save the image?  

I'm still working on caching.

3 hours ago, apostolakisl said:

I got it to work with two url's one for each color.  But what is not clear is why they both show up as blue on this website and the one is red and the other blue on UD mobile.

image.png.1914ff81c2df589ea8c818e7db396e82.png

 

 

 

They show up as blue and read in my browser could be the browser does not support a property of the image like tint (the fill color UDM uses to color the image)

Screenshot 2024-06-19 at 6.53.17 PM.png

 

Link to comment

This one tile lacks several of the choices like advanced status config. 

 

Screenshot_20240619_202321_UD Mobile.jpg

 

Edit. Looks like you must have a display node to get advanced options. 

However also it is showing the wrong icon in upper left corner. That is supposed to be a light bulb. It does show a light bulb after a while. 

Edited by apostolakisl
Link to comment
2 hours ago, apostolakisl said:

Edit. Looks like you must have a display node to get advanced options. 

Yes, there is no way to map icons to values if values do not exist.

2 hours ago, apostolakisl said:

However also it is showing the wrong icon in upper left corner. That is supposed to be a light bulb. It does show a light bulb after a while. 

This is likely do to the bug referenced above.

11 hours ago, Javi said:

NOTES:

I found a bug which may cause the wrong icon to display (view recycled) which will be fixed in the next update.

 

Link to comment
7 hours ago, Javi said:

Yes, there is no way to map icons to values if values do not exist.

This is likely do to the bug referenced above.

 

But advanced options is the only way to use a custom icon even if you don't want to map to any particular value. I ended up putting a node in there that is always off as a work around. 

Link to comment
2 hours ago, apostolakisl said:

But advanced options is the only way to use a custom icon even if you don't want to map to any particular value. I ended up putting a node in there that is always off as a work around. 

There should be a switch above the icon section in Favorites Editor (Edit Favorite) which allows the same option.  This is not tied to a value.

Link to comment
5 hours ago, Javi said:

There should be a switch above the icon section in Favorites Editor (Edit Favorite) which allows the same option.  This is not tied to a value.

Indeed, I just missed it.  And curiously, on this computer, both of the water fountain icons above are blue.  Computer at home, one is red and one is blue.  This is curious.  No matter, they are the correct color on UD mobile.

Link to comment
17 hours ago, apostolakisl said:

Indeed, I just missed it.  And curiously, on this computer, both of the water fountain icons above are blue.  Computer at home, one is red and one is blue.  This is curious.  No matter, they are the correct color on UD mobile.

At a higher level this is likely due to the browser, operating system, and/or device not supporting the tint color of SVG/PNG images, so the original color is shown and not filled with the specified tint property.  

I'll try to add mappings to cover all null and non-null values, but may be some time.

Link to comment

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • Create New...