16:9 layout for the card

[LucianTothezan]

Is there an existing issue for this?

• I have searched the existing issues

Current Behavior

the card layout is a square so using it as a single card in Panel layout on a tablet would not display the card on the whole area of the 16:9 display.

Expected behaviour

I would like to use this card as Panel on a wall mount tablet so the card should cover the whole display area. Therefore a 16:9 and/or 9:16 layout would be great.

Possible Solutions

No response

Mode

Both

Context / Reason

wallmount 16:9 tablet with this card as Panel display.

[slipx06]

The card is rendered as an SVG element with a viewbox that is set to preserve aspect ratio . At this stage there is no quick fix. You can try adjust the card_height: , card_width: and panel: attributes. You can also experiment with different dashboard layouts i.e. grid layout etc

[LucianTothezan]

Thank You for the reply. I really really appreciate this card. I have already tried what you suggested but unfortunately the result remains the same: if panel mode I can modify the height but it will auto adjust also the width. In grid mode also, it will modify the width but also automatically will keep the aspect ratio. It would really need an 16:9 SVG that way if we modify the width or the height, it would preserve the native wide format of the SVG. Unfortunately I do not have the proper knowledge to create such an element by myself.... Best regards, Lucian Tothezan lun., 28 oct. 2024, 19:20 slipx06 ***@***.***> a scris:

…

The card is rendered as an SVG element with a viewbox that is set to preserve aspect ratio . At this stage there is no quick fix. You can try adjust the card_height: , card_width: and panel: attributes. You can also experiment with different dashboard layouts i.e. grid layout etc — Reply to this email directly, view it on GitHub <#534 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/APILPXUYNB72KAPQGR5OXPTZ5ZW5XAVCNFSM6AAAAABQT6A6C6VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDINBSGE4DKMBVGE> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[slipx06]

Its a lot of work as all the elements need to be re-positioned. Moving this to an idea and maybe someone will pick it up

[LucianTothezan]

i would like to try to modify it but i am a total noob. i think i get the jist of it but i do not know how You then "pack" all the source code into one .js file. Could You please give me a pointer into the right direction? thank You in advance. Best regards.

L.E. neverind, i found the way to generate the .js file.

[LucianTothezan]

after a few hours of "reading" the code, i have a result which still can be improved but it is the goal i was setting.

[slipx06]

Well done for figuring that out. Maybe you can share your changes in case other users want to try this

[LucianTothezan]

Thank You for the kind words. Yes I could just that I have modified only the full card and only the entities that I have now on display. It's only half work done. dum., 3 nov. 2024, 12:11 slipx06 ***@***.***> a scris:

…

Well done for figuring that out. Maybe you can share your changes in case other users want to try this — Reply to this email directly, view it on GitHub <#542 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/APILPXVGF6LGRBXL4664XSTZ6XZFZAVCNFSM6AAAAABRCNRUICVHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTCMJTGM2DOMY> . You are receiving this because you authored the thread.Message ID: <slipx06/sunsynk-power-flow-card/repo-discussions/542/comments/11133473@ github.com>