In mobile browsers first render of LED has width of 1, properly calculated if resized

[Rollem1]

Hi,

Since upgrading to 0.4.8 most LEDs (but not all) on my node red dashboard appear as a line rather than a circle. I don't remember what version I had before but previously this wasn't an issue.

I have several tabs to my dashboard for different elements of home control. On one tab the LEDs always display perfectly, on all the others initially they display as a line. If you rotate the screen so the display gets resized the LEDs display normally again. Rotating back to the original orientation the LEDs stay as a circle correctly. It doesn’t matter which orientation you start in.

I think this is the same issue that @bburkett52 raised in thread #68 however as its a different issue than the OP raised I have created a new issue.

On opening page

On rotating the iPad Screen

• node-red-contrib-ui-led: 0.4.8

• node-red-dashboard: 2.28.0 also tried 2.26.2

• Node-red 1.2.7

• OS: iOS 14.4

• Browser chrome & safari the problem happens on both

[yoiang]

Hey @Rollem1, thank you for further reporting the issue and including screenshots! I've been able to reproduce the bug but not why it's happening, something to do with the workaround I'm using that doesn't appear to work the first time it's rendered on mobile browsers but properly calculates how it should appear if one does something to resize the screen (such as rotate).

I'll try to track down why a little longer, if not I have a hacky solution that I think should work!

[bburkett52]

@yoiang

I have discovered an additional issue with Chrome browser on iPhoneX IOS 14.4

The initial display of the LEDs shows as a width of 1 as previously reported:

After rotating the device to landscape orientation and still when rotated again back to portrait orientation, the display is too large to fit the device:

With manual re-scaling (pinch gesture) the image again fits the device.
Rotating the display does correct the LED size.

-Node-red-contrib-ui-led: 0.4.8
-Node-red-dashboard: 2.27.0
-Node-red 1.2.5

Thanks for your efforts!

~Bob

[yoiang]

(props on both your and @Rollem1 's beautiful dashboards btw 🤩)

Even stranger! I'd hoped I had built the component to respond to situations flexibly but it appears to not flex well in these situations on mobile. It's making me suspect I may have to lean on the hack, it won't change anything on your side (besides actually working properly), it'll just mean maintenance of the code will be a little more manual!

[zakx]

Any news on this? Ran into it just now on an iPad

[bburkett52]

This issue is also appearing on an Ubuntu Linux OS PC

~Bob

[yoiang]

Sorry for the delay in pushing a fix, life stuff has gotten in the way (just moved at the beginning of the week for a new project).

I should have an attempted fix pushed this weekend, thanks for being patient everyone!

[bburkett52]

@yoiang

Your work is greatly appreciated!
Moving in Brooklyn can't be easy!

~Bob

[yoiang]

Thanks all for your patience, I just pushed 0.4.9!

In the effort of getting a fix for the squishing out sooner there is an unresolved issue it introduces where the glow's edge at some sizes is cut off. I'll address that in a later version, this fix was more important ;)

Please let me know if this doesn't resolve the issue or introducing any other bugs!

[bburkett52]

Thanks fir all your work! This is much appreciated! I do notice that the diameter of the LED is smaller? Regards ~Bob

…

On Sun, Mar 7, 2021 at 11:48 Ian G ***@***.***> wrote: Thanks all for your patience, I just pushed 0.4.9! In the effort of getting a fix for the squishing out sooner there is an unresolved issue it introduces where the glow's edge at some sizes is cut off. I'll address that in a later version, this fix was more important ;) Please let me know if this doesn't resolve the issue or introducing any other bugs! — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#72 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AIOUEODM66ECKJHAFH5NWZTTCOU6ZANCNFSM4XR6RMFQ> .

[Rollem1]

Thanks for providing the update! I can confirm it works and I actually prefer the smaller LED's

Cheers,
Jon

[smithy-eng]

Thank you so much! LEDs looking very fine now!

[yoiang]

Y'alls dashboard game is on point

@bburkett52 ya, I'll have to look into why it was able to be larger before when I have more time and potentially make that configurable. Now I'm matching the silly algorithm Node-RED uses to decide a control row's height so it is guaranteed to fit. Keep your eyes peeled!

Closing for now, thanks again for everyone's help!