Card Size

[Pieterjvr]

Hi Dante

Nice work on the card. I am no where close to be a programmer etc. Looking at the card on a dashboard on a big screen looks very nice, but when opening HA om a mobile phone the card is huge and feels a bit out of per portion. Is this something that can be change for example to auto resize for smaller mobile screens?

Kind regards,
pieter

[DanteWinters]

Hi Pieter,

Thanks for the feedback. Shortly after you started this discussion, I got a message from @guybw that the card looks strange on a tablet (I had only tested it on a PC browser and my mobile phone). When looking at it on a tablet, it does indeed look very weird. I attached 2 photos, one from the mobile and one from the tablet. Please let me know if this is the same issue you are having?

Although I do programming for a living, I have no other experience with JavaScript or HTML so there's a lot of trial and error involved in this card.

Hope to get it sorted soon.

Tablet	Mobile

[Pieterjvr]

Good Morning I assume the top images is from your tablet. I have an iPhone and my image looks exactly the same. I’m in infrastructure and has no clue where to start to help with code 😊 Kind regards, Pieter From: Dante Winters ***@***.***> Sent: Monday, July 10, 2023 8:52 AM To: DanteWinters/lux-power-distribution-card ***@***.***> Cc: Pieter Janse van Rensburg ***@***.***>; Author ***@***.***> Subject: Re: [DanteWinters/lux-power-distribution-card] Card Size (Discussion #25) Hi Pieter, Thanks for the feedback. Shortly after you started this discussion, I got a message from @guybw<https://github.com/guybw> that the card looks strange on a tablet (I had only tested it on a PC browser and my mobile phone). When looking at it on a tablet, it does indeed look very weird. I attached 2 photos, one from the mobile and one from the tablet. Please let me know if this is the same issue you are having? Although I do programming for a living, I have no other experience with JavaScript or HTML so there's a lot of trial and error involved in this card. Hope to get it sorted soon. [Tablet]<https://user-images.githubusercontent.com/63704455/252257404-4ad6ee0e-99f4-4f23-ad48-f58c4f09b72b.PNG> [Mobile]<https://user-images.githubusercontent.com/63704455/252257480-37eda881-3daf-4eaa-a3d7-ce41a8c62b25.jpeg> — Reply to this email directly, view it on GitHub<#25 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AI2JQ6JO2RZ23FBCF5PH4ZTXPORBJANCNFSM6AAAAAA2CY5PLE>. You are receiving this because you authored the thread.Message ID: ***@***.******@***.***>>

[DanteWinters]

Good news.

I think I found the issue. Went looking and it looks like Safari (and by extension Apple devices) handle the some default css properties a little differently. This explains why it looks weird on an @Pieterjvr 's iPhone or my iPad. I also got it tested on a Mac on Safari and Brave, the issue was definitely with Apple. Latest release (v0.4.2) isn't perfect, but solves Apple issue (tested on all above devices except an iPhone).

@guybw , I hope this also fixes the issue on your tablet. Please let me know if it doesn't because then it's back to the drawing board.

[guybw]

Hey @DanteWinters So it's MUCH better than it was!
I've dropped you an email with a photo of how it looks. FYI I'm using Android so it's going to be a chromium browser.

[Pieterjvr]

Good Evening Dante from a cold South Africa

I have quickly updated my module with the new one. Below are screenprint it took froom google chrome, safari and from the home assistant app on my iphone. Chrome and safari looks way better but getting to the home assistant app, it still look out of per portion.

Google Chrome Iphone:

Safari:

Home Assistant App:

As can see from the home assistant app, it expand almost over two screen and require to scroll down. The other thing I picked up are,

1. When switching over toe EPS, my icon still show 0W for home consumption sensor and do not disappear or change the icon. (Not sure if this is suppose to change)

2. When required to switch over to EPS and enough solar PV is there to take the load, the warning icon/color also do not change. I have notice on my inverter the error code is different. Think 129 which means solar, battery, grid or some thing in that line. I assume on the card error section we can just add the addition error code to trigger the warning to turn red as well to indicate grid is missing.

I have load VSCode on my machine to see if I can decipher the code to assist with amendment but when looking at the code, some tuff make sense but not sure how HTML Elements and JavaScript work at all.

I will try to test it over the weekend with Kiosk Browser on a Samsung galaxy tab

[Pieterjvr]

Dante,

Please see below my Lux Status which means my grid disconnected but running from Solar PV and Battery and the warning still show normal

Grid Disconnected and battery charge:

Grid Disconnected and Battery Discard:

[DanteWinters]

Hi Pieter,
The current implementation of the status label is absolute bare minimum. My plan is to eventually have it properly integrate with the lux status codes and give a proper message. For now, it goes based on the status codes you add to the list in the lux_fail_status_codes config list. Codes added to the list will result in a warning message and everything will result in normal. I'm pretty sure that the ones I currently have are 64 and 192. I know this is poor integration, but it will get there eventually (same as the layout)

[Pieterjvr]

Good Morning Dante

Thanks for the great work you done so far and the updates.

A interesting thing I picked up over the weekend when playing with my Iphone and Samsung Galaxy phone were that it seems the out of per portion of the HA app only happens on my Iphone. When installing the app on my Samsung and opened the app, everything looked correct. IOS definitely process or work different than Android.

[DanteWinters]

Good evening,

Very strange that Apple handles it like this, but at least we have confirmed that it is only the iPhone. I'm sure there has to be something online that can help me get to the bottom of this. Unfortunately it will take time as it's very difficult for me to debug without an iPhone.

Will keep you posted.

[DanteWinters]

I opened a new discussion for the status codes. The next update will make it more reactive without you needing to add the list of Items. Guy did a great job making a list of the know status codes, so I'm using that as the base. I don't want to have too much info in there, the idea is just a small message, so I just need to find out how to classify all the codes and then I can make a new release.

[DanteWinters]

Hi @Pieterjvr
How is the card looking on your iPhone currently? I recently got hold of an iPhone that I testing a few things one. It's an iPhone X and doesn't have iOS 17, but the card looks fine on it? Let me know if it is still looking weird, then I can take a look on my side.