Huge icons on webui

[davidusb-geek]

Hi @GeoDerp I don't know if you can see this same issue but in my webui there are now huge icons:

These icons where normal size on upper right corner on v0.8.1

[GeoDerp]

Interesting, I don't think nothing changed from 0.8.1. ( I'll have a look) By webui, it's like a PWA? I'll have a look to see if there is any max sizing on the buttons. If not I'll set some. It may be a good idea to have a PR that just focuses on improved PWA support.

Edit. Sorry you mean webui in HA 🤦🏼‍♂️. (Haven't had a coffee)

It seems fine on my side. I wonder if it's an OS/web browser specific issue? I'll definitely have a look at the sizing restrictions.

Those icons should also be blue. It's like there is a style override happening.

I might also remove the GitHub (or modify it) as it's not working on webui (at least mobile)

Edit 2: another thought. Maybe the url for style.css is wrong for some reason

[purcell-lab]

I get large icons on mobile but not my laptop.

[GeoDerp]

Thanks @purcell-lab , It looks like the same issue with some sort of styling not being propperly enabled. Im having a look at this now.

Its kinda annoying that this doesn't seem to be an issue on my end. Does the other elements styling look correct? (buttons have shadows, etc). If you run http://yourhaip:5000, does it still look that same.

Also, @purcell-lab is your mobile an IPhone? Mine is a Android.

[GeoDerp]

Is it possible that one of you can test this out: https://github.com/GeoDerp/emhass/tree/index-icon-fix

I'm worried this won't fix it and it's in fact a style sheet import issue.

Let me know if one if you will like to do a voice call to work this out.

Forgive my tiredness today.

[GeoDerp]

Just added an JS function that checks if stylsheet exists, if not adds it. (redundancy) This may slow down page load performance unnecessarily, so we can remove this if its found that another solution has fixed it.

[GeoDerp]

My father had the idea it could be a DNS issue. He might not be wrong. Ie. If you're using DNS it may not be getting called probably inside the webui. The JS function may help with this I'm not sure.

If anyone who has the issue could test the PR that would be great.

I guess maybe also try with and without the DNS name/IP as the url, to see if you're using DNS is the issue, if still occurring.

[GeoDerp]

Let me know if this has been fixed for you guys. 👍

[michaelpiron]

Thanks @michaelpiron, It looks like the same issue with some sort of styling not being propperly enabled. Im having a look at this now.

Its kinda annoying that this doesn't seem to be an issue on my end. Does the other elements styling look correct? (buttons have shadows, etc). If you run http://yourhaip:5000, does it still look that same.

Also @michaelpiron , is your mobile an IPhone? Mine is a Android.

Hi @GeoDerp , could it be that you addressed the wrong person? I don’t recall this issue.

[GeoDerp]

Sorry @michaelpiron, that was my bad. Meant that to be @purcell-lab. Was dead tired that day.

[purcell-lab]

Using an Android Pixel 8a, just updated EMHASS to 0.8.4.

When calling direct http://site:5000 I get small icons:

When calling from the add on WebUI button I get big icons:

[purcell-lab]

Yes I do get styling from the webUI interface.

[GeoDerp]

Yes I do get styling from the webUI interface.

Yeah interesting. You do, but even things like the basic info box doesn't show up.

This is frustrating 🤦🏼‍♂️

It's not like your webui is using an old cached version of the stylesheet or something? I'm not quite sure how to replicate this issue to bug fix.

Thanks @purcell-lab, this gives more info to work on for what kind of bug.

[GeoDerp]

@purcell-lab , could you clear the app cache in the android settings then force killing the app and rerunning?

[purcell-lab]

Cache cleared, no change unfortunately.

[GeoDerp]

Cache cleared, no change unfortunately.

@purcell-lab does the buttons (svg and actions) work? If so I may just embed the CSS file. If k could replicate the issue I could debug it. I just don't know how. 🤔

[purcell-lab]

Buttons are functional with large icons.

Not sure how to test svg?

Happy to invite you into my system to test.

[GeoDerp]

@purcell-lab could you test this for me. Made a EMHASS fork, Bellow are the steps to build emhass-add-on using EMHASS from my repo and branch. (feel free to keep your original EMHASS, just run this version on a separate port)

cd ~/addons/
git clone https://github.com/davidusb-geek/emhass-add-on
sed -i.bak '/image:/ s/./#&/' ~/addons/emhass-add-on/emhass/config.yml
sed -i.bak "s/build_version:.*/build_version: addon-git/g"  ~/addons/emhass-add-on/emhass/build.yaml
repo=https://github.com/GeoDerp/emhass.git
branch=index-icon-fix
sed -i.bak "s%build_repo:\s.*%build_repo: $repo%g"  ~/addons/emhass-add-on/emhass/build.yaml
sed -i.bak "s/build_branch:\s.*/build_branch: $branch/g"  ~/addons/emhass-add-on/emhass/build.yaml

I use the Terminal & SSH HA addon to run these commands.

Then install the add-on in the add-on store in Local add-ons

[GeoDerp]

If that doesn't work. Yeah I may need to find a way to access an external HA environment to test.

You could also look at Settings > Companion app > Troubleshooting > Show and share logs. Just to see if there was any glaring issues after running the WebUI

The WebView Remote Debugging would be ideal. But I would do that personally if the above two options don't work. (Unless you will like to)

[GeoDerp]

Update, tested with Nabu Casa . No problems with current EMHASS-Add-On version or fork. @davidusb-geek or @purcell-lab . If your still having issues if you could test the fork above and see if that fixes your current solution, that would be great.

[purcell-lab]

I haven't updated since 0.8.4.

Icons are now a good size on laptop and mobile:

Graphs are also a lot more usable on mobile as well, I even get yellow for PV ;-)

Great work..

[GeoDerp]

I haven't updated since 0.8.4.

Icons are now a good size on laptop and mobile:

Graphs are also a lot more usable on mobile as well, I even get yellow for PV ;-)

Great work..

I guess it was a cache problem after all. @davidusb-geek, if you think the PR is still good (replacing urls with relatives). free to merge it.

Otherwise I'll close it, and I may make another PR with just the CSS JS function removed. As I believe it slows down the page loading time.

[GeoDerp]

@purcell-lab, the diagram is just the inverted colour of the light mode. PV being yellow is an accidental benefit. 😂

[GeoDerp]

@davidusb-geek, feel free to close this issue after reading this. 👍🏼

[davidusb-geek]

@davidusb-geek, feel free to close this issue after reading this. 👍🏼

Ok but what do you recommend regarding PR #239? If load times are affected then it should be better to do this?:

Otherwise I'll close it, and I may make another PR with just the CSS JS function removed. As I believe it slows down the page loading time.

[GeoDerp]

@davidusb-geek, feel free to close this issue after reading this. 👍🏼

Ok but what do you recommend regarding PR #239? If load times are affected then it should be better to do this?:

Otherwise I'll close it, and I may make another PR with just the CSS JS function removed. As I believe it slows down the page loading time.

PR #239 has the JS function removed, plus replaced fetch url using relatives (as a cleaner alternative). I have tested this locally and with Nabu Casa and it seems to work. But there is a concern for other proxies (since I can't test). (Could always be reverted if someone mentions an issue).

Alternatively I could make a PR with just the JS function removed.

[GeoDerp]

@davidusb-geek , If you have any issues @ me and ill help revert.

[davidusb-geek]

Ok, I merged. Then will test it and see how it goes.

[davidusb-geek]

Seems solved to me. Closing