circle and font size

[caitotheonlypotato]

Feature suggestion for circle diameter and/or font size adjustment to stop the text inside circles from being cut off as per the attached image

[reptilex]

for now you can always change you sensor data, for axample not to show kWh, but yes this would be a nice enhancement some day.

[xsirpreisx]

I would really like to have the option to scale, especially the icons (if that's not possible already). The icons of the HA-build in energy dashboard are much smaller and it would be great if the tesla card icons could be scaled to the same siize (also leaving room for more text).

[matban666]

If you edit config/www/community/tesla-style-solar-power-card/tesla-style-solar-power-card.js

remove 'overflow: hidden;' from .acc_text_extra.

The extra info strings do not get cropped. Not that pretty but a bit better I think.

[caitotheonlypotato]

If you edit config/www/community/tesla-style-solar-power-card/tesla-style-solar-power-card.js

remove 'overflow: hidden;' from .acc_text_extra.

The extra info strings do not get cropped. Not that pretty but a bit better I think.

Hi @matban666

I tried this on my installation, and it had no bearing on the display at all. I removed 'overflow: hidden' and left behind the 'position: absolute;' I also tried modifying the radius here and there but also no change. Browser cache also reset no change

[matban666]

Hi @caitotheonlypotato There are a few things I had issues with when editing this myself and getting it to show up in the browser and app.

Things to try:

1. Serving of .js rather than .gz In the same directory as tesla-style-solar-power-card.js is a gz file, you either need to re-create it by re gzipping the js, or renaming it. I renamed mine and it forced it to serve the js file instead.

2. Browser Side Caching Do a deep refresh of the web browser (often crtl-f5), or clear the browser cache. On a mobile clear the app's cached data.

3. Server side caching Home Assistant has aggressive server side caching. Probably restarting home assistant will clear the cache, if it doesn't appear to be serving up the modified version.

I hope that fixes it.

[caitotheonlypotato]

Hi @caitotheonlypotato There are a few things I had issues with when editing this myself and getting it to show up in the browser and app.

Things to try:

1. Serving of .js rather than .gz In the same directory as tesla-style-solar-power-card.js is a gz file, you either need to re-create it by re gzipping the js, or renaming it. I renamed mine and it forced it to serve the js file instead.
2. Browser Side Caching Do a deep refresh of the web browser (often crtl-f5), or clear the browser cache. On a mobile clear the app's cached data.
3. Server side caching Home Assistant has aggressive server side caching. Probably restarting home assistant will clear the cache, if it doesn't appear to be serving up the modified version.

I hope that fixes it.

Thank you, point (1) fixed it by renaming the .gz file. Is there something in that file we can use to enlarge the circles?

I played with a few lines (assuming "r" might be a variable for 'Radius'), but nothing I tried worked.

[matban666]

That's great. I have tried some tweaks to the js for reducing the size of the icons as an alternative to increasing the circle size but it didn't work. I've downloaded the source, the original typescript is much easier to read than the transpiled js. I'll post here if I can figure it out.

[tomcoleman]

guys keep posting your findings!!!

This card could be amazing but seems the main orginal dev has dumped it - hasnt been updated in years.

Im also intrested in changing the circle sizes/scale.

Would also be amazing if we could add another circle for say water flor or something (then the 2 that you can add "extra")

[tomcoleman]

i changed this code and it made the circles more square

.acc_container { height: 20px; width: 20px; border: 1px solid black; border-radius: 50px; padding: 12px; color: var(--primary-text-color); border-color: var(--primary-text-color); position:relative; cursor:pointer;

[caitotheonlypotato]

Unfortunately, this code did not make any changes for me, at least not on the PC browsers

    .acc_container {
        height: 20px;
        width: 20px;
        border: 1px solid black;
        border-radius: 50px;
        padding: 12px;
        color: var(--primary-text-color);
        border-color: var(--primary-text-color);
        position:relative;
        cursor:pointer;
    }

[tomcoleman]

Unfortunately, this code did not make any changes for me, at least not on the PC browsers

    .acc_container {
        height: 20px;
        width: 20px;
        border: 1px solid black;
        border-radius: 50px;
        padding: 12px;
        color: var(--primary-text-color);
        border-color: var(--primary-text-color);
        position:relative;
        cursor:pointer;
    }

You need to rename the .gz file and clear your cache completely or try incognito mode

[caitotheonlypotato]

Unfortunately, this code did not make any changes for me, at least not on the PC browsers

    .acc_container {
        height: 20px;
        width: 20px;
        border: 1px solid black;
        border-radius: 50px;
        padding: 12px;
        color: var(--primary-text-color);
        border-color: var(--primary-text-color);
        position:relative;
        cursor:pointer;
    }

You need to rename the .gz file and clear your cache completely or try incognito mode

Hi @tomcoleman

Please rest assured this has been done and nothing seems to change for me. Pretty much as per @matban666 post, these protocols have been observed -

1. Serving of .gz rather than .js In the same directory as tesla-style-solar-power-card/tesla-style-solar-power-card.js is a gz file, you either need to re-create it by re gzipping the js, or renaming it. I renamed mine and it forced it to serve the js file instead.
2. Browser Side Caching Do a deep refresh of the web browser (often crtl-f5), or clear the browser cache. On a mobile clear the app's cached data.
3. Server side caching Home Assistant has aggressive server side caching. Probably restarting home assistant will clear the cache, if it doesn't appear to be serving up the modified version.

[matban666]

I've forked and branched the code, currently working on: https://github.com/matban666/tesla-style-solar-power-card/tree/restyle-to-better-fit-extra-text Smaller icons, bigger circles and thicker lines, now need to sort the layout inside the bubbles as the other sizing has messed it up.

If you want to try it the file you need is: https://github.com/matban666/tesla-style-solar-power-card/blob/restyle-to-better-fit-extra-text/tesla-style-solar-power-card.js

[matban666]

Unfortunately, this code did not make any changes for me, at least not on the PC browsers

    .acc_container {
        height: 20px;
        width: 20px;
        border: 1px solid black;
        border-radius: 50px;
        padding: 12px;
        color: var(--primary-text-color);
        border-color: var(--primary-text-color);
        position:relative;
        cursor:pointer;
    }

You need to rename the .gz file and clear your cache completely or try incognito mode

Hi @tomcoleman

Please rest assured this has been done and nothing seems to change for me. Pretty much as per @matban666 post, these protocols have been observed -

1. Serving of .gz rather than .js In the same directory as tesla-style-solar-power-card/tesla-style-solar-power-card.js is a gz file, you either need to re-create it by re gzipping the js, or renaming it. I renamed mine and it forced it to serve the js file instead.
2. Browser Side Caching Do a deep refresh of the web browser (often crtl-f5), or clear the browser cache. On a mobile clear the app's cached data.
3. Server side caching Home Assistant has aggressive server side caching. Probably restarting home assistant will clear the cache, if it doesn't appear to be serving up the modified version.

It looks like you managed to remove 'overflow: hidden;' judging by your screenshot, so I think the file is making it to the browser. However, the styles in the js seem to be only part of the story, some of them take affect but I am not sure if all of them do. The styles are mostly dynamically applied in a couple of the original typescript files. Even though theoretically you should be able to find them somewhere in the js file I could not. I have taken to editing the typescript files and re-building the project. See my other comment on the fork and branch I am using.

[caitotheonlypotato]

Hi @matban666

Can confirm that restyle......js file produces the same for me as you.

[matban666]

I've got the bubble content a bit better laid out.

Looks pretty good in my pc browser but on my mobile app the icons are a little to the right and the circle is a bit tight to the text. Let me know if it looks OK on your devices or not.

https://github.com/matban666/tesla-style-solar-power-card/blob/restyle-to-better-fit-extra-text/tesla-style-solar-power-card.js

[caitotheonlypotato]

All good here

[matban666]

Working on getting the Wh/kWh for extra entities working is the same way as the main entities do for W/kW. As well as looking neater, this saves quite a bit of space so that there is less chance the text will collide with the circles. It is working but there is a brief error on startup that I need to resolve before I can commit.

[matban666]

Committed the code with the Wh/kWh working now. I can't quite get the accessory lines to join the circles correctly on different browsers. My chrome is OK but my adroid app shows a slight miss-alignment as does Firefox.

https://github.com/matban666/tesla-style-solar-power-card/blob/restyle-to-better-fit-extra-text/tesla-style-solar-power-card.js

[caitotheonlypotato]

Committed the code with the Wh/kWh working now. I can't quite get the accessory lines to join the circles correctly on different browsers. My chrome is OK but my adroid app shows a slight miss-alignment as does Firefox.

https://github.com/matban666/tesla-style-solar-power-card/blob/restyle-to-better-fit-extra-text/tesla-style-solar-power-card.js) https://github.com/matban666/tesla-style-solar-power-card/blob/restyle-to-better-fit-extra-text/tesla-style-solar-power-card.js

I think my Firefox is OK as is Chrome. Mobile on Android companion app also looks quite OK.

Firefox on PC

Chrome on PC

Edge on PC

[xsirpreisx]

I was wondering if it wouldn't be a better idea to try and get the other "power flow card", which uses the look/feel as the original Home Assistant energy dashboard flow card, to have appliances like EV and heat pump? It looks and also behaves quite a bit better than the tesla power card, from my point of view. It doens't "break" when switching between browser windows / window sizes. Only thing missing are appliances (instead it allows for gas / water consumption to be added),

https://github.com/ulic75/power-flow-card

The house circles displays percentages of what's being used in colors (just like the energy dashboard one).

Not trying to keep you guys from advancing this card, I was just thinking that it doesn't make all that much sense to have multiple cards to the same thing, and the power flow card seems to be a better start.

I would definitely want to help with that :-)

[matban666]

Thanks @caitotheonlypotato for the feedback. I've fixed some of the resizing/layout issues. https://github.com/matban666/tesla-style-solar-power-card/blob/restyle-to-better-fit-extra-text/tesla-style-solar-power-card.js

[matban666]

@xsirpreisx that is a fair point. Looks like https://github.com/ulic75/power-flow-card has active development too. I've fixed up a fair bit of scaling/layout issues in the commit to my latest fork and branch but some still remain.

[caitotheonlypotato]

Thanks @caitotheonlypotato for the feedback. I've fixed some of the resizing/layout issues. https://github.com/matban666/tesla-style-solar-power-card/blob/restyle-to-better-fit-extra-text/tesla-style-solar-power-card.js

Cool, the only other thing I'd suggest for formatting is to introduce a small separation between the sensor value and the unit of measurement. I realise we are looking to make everything fit, but I think a small separation would still work, and it will be more aesthetically pleasing.

[matban666]

Thanks @caitotheonlypotato for the feedback. I've fixed some of the resizing/layout issues. https://github.com/matban666/tesla-style-solar-power-card/blob/restyle-to-better-fit-extra-text/tesla-style-solar-power-card.js

Cool, the only other thing I'd suggest for formatting is to introduce a small separation between the sensor value and the unit of measurement. I realise we are looking to make everything fit, but I think a small separation would still work, and it will be more aesthetically pleasing.

I have added some configuration options as I thought the space looks wrong for some unit types but makes others look clearer.

https://github.com/matban666/tesla-style-solar-power-card/issues/3

You can try it with the js file from my master branch.

So we don't hijack this thread any more, if you have any feedback can you see if you can add it to the issue on my fork. Or add any other issues there?

I'll see if the author wants to merge my changes when I can fix the unit tests which are a little broken.

[h3llrais3r]

@matban666 You seem to have added some nice options. Would it be possible to create a PR with your changes so it can be merged into this repo?