Testing the card

[BadgerLoaf]

Thanks again @flyrmyr for sharing your card.

Can you confirm how we should go about installing this to test it? I can't seem to find the js file in here.

Thanks!

[flyrmyr]

Ah, was playing around with a testing branch on here. Just merged to main, so you should see the /dist/system_flow_card.js visible now. Download that .js file and pop it into the /config/www folder. Might need to reload your Hassio instance but it should appear as a Lovelace card option!

[BadgerLoaf]

Thanks! Will check it out later today

[flyrmyr]

Big news, no idea why, but HACS just allowed my latest update of this code to be added to the store. So you can install through them for testing as well! No idea how to update/version this - still new to open source business - but thats the path of least resistance for what I have now. btw thanks for hopping in and being involved with the tinkering here!

[BadgerLoaf]

Ok good news! Can't see it in HACS yet, but am guessing maybe it takes a short time... will check it out later

Unfortunately I have no experience with that process, so can't advise/assist on that. But happy to do what I can on the card.... planning on getting a few entities added to it

[flyrmyr]

Weird, it popped up in my HACS > frontend as "newly added" or whatever verbage on my latest push. Try searching System Flow Card but I guess otherwise, the /dist/system_flow_card.js is definitely 'un gitignored' / added to the repo now if you go that route. Just a reminder for anyone who follows: After any edits, yarn build will produce a system_flow_card.js for your testing. Just drop that new file in your /config/www and reload. You'll see the changes, assuming you haven't installed via HACS - not sure how the /config/custom-components/ folder dukes out vs a native .js file in /config/www with the same name. Disable cache though on browser, and in the Hassio app, you'll have to hit Settings > Companion App > Debugging > Reset Frontend Cache to see changes.

[Zaphod360]

just started playing with this card, thanks for your work. Is there any documentation for it? I have a couple of entities that I need to inverse if possible. Also the flow lines don't all line up with the element boxes?

[BadgerLoaf]

@flyrmyr - Just thinking, would it be worth us setting up a thread for your project on https://community.home-assistant.io to have ongoing discussions?

[flyrmyr]

@BadgerLoaf That sounds great! Pretty new to the HA community, but happy to work with people there as well!

@Zaphod360 I've added some lines about my configuration and the available yaml configurations in the top of the ReadMe. Since its still in beta/active development I haven't gotten to re-writing the original ReadMe yet.

Since people can define overall element numbers, or individual production/consumption numbers, I wasn't sure if "inverted" would only effect the total, or we'd invert production/consumption numbers as well... For now, I just have a HA template inverting my values as needed.

Been playing with the lines and responsivity. Feeling like it might have to be limited to 2 elements on top/bottom for web display, and 1 on top/bottom on mobile. Haven't managed to fit more, with the confines of the responsive box. Could perhaps shrink the element boxes a bit if 2 on top/bottom for mobile is crucial.. Wasn't sure which route to go. Otherwise, my lines are lining up well. Could I see a screenshot of what you're seeing?

[Zaphod360]

I've attached a pic, I need to invert my grid and battery sensors but you get the idea. Just playing around at the minute.

On Wed, 16 Nov 2022, 22:20 Eric M., @.***> wrote:

@BadgerLoaf https://github.com/BadgerLoaf That sounds great! Pretty new to the HA community, but happy to work with people there as well!

@Zaphod360 https://github.com/Zaphod360 I'll add some lines about my configuration and the available yaml configurations in the top of the ReadMe. Since its still in beta/active development I haven't gotten to re-writing the original ReadMe yet. Been playing with the lines and responsivity. Feeling like it might have to be limited to 2 elements on top/bottom for web display, and 1 on top/bottom on mobile. Haven't managed to fit more, with the confines of the responsive box. Could perhaps shrink the element boxes a bit if 2 on top/bottom for mobile is crucial.. Wasn't sure which route to go. Otherwise, my lines are lining up well. Could I see a screenshot of what you're seeing?

— Reply to this email directly, view it on GitHub https://github.com/flyrmyr/system-flow-card/issues/1#issuecomment-1317749195, or unsubscribe https://github.com/notifications/unsubscribe-auth/ACV2Q576KEW44XALYMH4KIDWIVMZFANCNFSM6AAAAAASAIZC7U . You are receiving this because you were mentioned.Message ID: @.***>

[BadgerLoaf]

@flyrmyr - Interestingly I'm still not seeing the card in my HACS instance, so not sure what is happening there.

Though I have manually installed the .js file from here.

I haven't yet fully configured it (and my solar panels don't actually get installed till next week), but I have put in elements to test it out. I think I am seeing the same issue with some lines not matching up (though can't see @Zaphod360 screenshot)

I was also wondering if there was something you could do to allow some customisation of sizes etc.

To fit my dashboard, I used card-mod to set the size of the card, however the graphics don't then resize correctly (you can see the battery element falls off the bottom of the card).

style: |
  ha-card {
  height: 390px;
  width: 350px;
  }

I was wondering if there might be a way to include card height and width variables within the card config? Not sure if maybe we could have text and icon size variables too?

Sorry... I'm not wanting to look like I'm putting down a shopping list of things I want.... just a few ideas, I'm really grateful for the work you are doing on this.

[Zaphod360]

I'd replied to the email, didn't realise that it doesn't attach the attachments.

Hopefully this works..

[flyrmyr]

Ah, thank you both for the screenshots. Turns out I had not tested without a title, some funky things happen to the spacing with/without one. Fixed for both cases now 😄

Sizing is tricky... In order to get the lines drawn right I had to make some assumptions about the shape/size of each element. I added some overflow scrolling so you can at least size your box correctly, but as of now the system diagram gets drawn in the same way (ie. you will have to scroll if you make it smaller). On the plus side, it can now handle being bigger than expected, at least!

My hope is to eventually navigate away from those assumptions and calculate dot lines based on the actual position of the elements, instead of percentage calcs of where the elements "should" end up getting drawn.

[flyrmyr]

And got the "fill" property working! Not sure if this is a feature people want but I like it.

Working on a property to define the bolder circle outline colors - what was around the "house" element in the Power/Energy cards. Ideally a:

• "default" option for elements to show where their production goes to, or their consumption comes from
• "custom" option defined as a %, in the same color, for things like "solar production / expected solar production"

[mutzl]

Can't see it in HACS, too.

But will definitely follow your project. Keep goin'!

[flyrmyr]

Super strange nobody else is seeing it on HACS.. I wasn't even expecting it to be there yet but I got a "new repo" badge for it in there.

One thing to try in HACS: Top right menu > Custom repositories: Repo: https://github.com/flyrmyr/system-flow-card Category: Lovelace

Adding it from there might work.

[Zaphod360]

Firstly, really appreciate your work on this, is looking great. Is there a way to invert the sensors or should I just create some inverted ones?

[flyrmyr]

Thanks! 😃 Yes, I got the inverted working on the build yesterday, sorry the documentation is a bit gnarly as I settle on what will be in the final build. Add inverted: true to that element definition, and the value will be flipped. That flag has no effect if you define toSystem or fromSystem values, but if your element only reports the total that should do it.

[BadgerLoaf]

Looking good @flyrmyr I'll try out the latest version over the weekend.

Interesting idea on the battery fill. Not sure it's for me, but I like that the option is there for those who want it.

Maybe one that could be considered, having a "dynamic" battery icon. Where for example, if set, the card would use something like the following icons, depending on the charge level, but with an option to replace it with 1 icon of choice (such as your car battery) if someone preferred that. I guess you could set something like a optional Type: option in the element, so that it is set to battery, it would use the "dynamic" icons.

mdi:battery-low
mdi:battery-medium
mdi:battery-high

When the battery was getting charged, you could even then use these icons:

mdi:battery-charging-low
mdi:battery-charging-medium
mdi:battery-charging-high

Just an idea!

[Zaphod360]

I'm still having issues if I don't use a title, is updated version the current one? I also can't get the full to work (like the idea of that). As an aside, any chance we could have the option to add gas supply? If I add it as an element it messes up the house consumption so would need to be separate?

[flyrmyr]

@Zaphod360 Sorry, sounds like I might not have committed my earlier changes after creating my own dist file. Should be good now. And good call, I meant to add that functionality earlier. I've included an exclude flag. Also, to preserve naming convention, I've renamed inverted to invert. So, to have both, you'll want you element to include: invert: true, exclude: true

[flyrmyr]

@BadgerLoaf Been tinkering with that one, a bit tricky to define a concise convention for defining those, but definitely something on my radar. I'd see it something like the yaml for red/yellow/green color breaks on the classic gauge card. Working out how to swap between a single definition or a multi level definition, keeping it easy for those that wouldn't understand why its necessary to define 100: mdi-battery as a list below the icon definition. In the works though.

[Zaphod360]

@BadgerLoaf Been tinkering with that one, a bit tricky to define a concise convention for defining those, but definitely something on my radar. I'd see it something like the yaml for red/yellow/green color breaks on the classic gauge card. Working out how to swap between a single definition or a multi level definition, keeping it easy for those that wouldn't understand why its necessary to define 100: mdi-battery as a list below the icon definition. In the works though.

This might just be me (hopefully), but I've downloaded the latest system-flow-card.js file and replaced the one in:

and still get this when I remove the title:

Any ideas what I'm doing wrong? I have rebooted home assistant.

[flyrmyr]

Hmm, that is showing stale code for several tiny reasons... Hassio does some strange things with cacheing the front end. Any time you want to play with updated resources (assuming only the manually added ones): in Chrome's inspect Network tab, hit disable cache. I can't speak to the other browsers... On the phone apps, go to Settings > Companion App > Debugging > Reset Front End Cache. These should allow the latest changes to show.

One thing I should mention, your system seems to be displaying 2 different systems, energy (kWh) and power (w). You might be aware, but for others checking out this thread, wH / kWh measure energy over time and will keep rising until reset, W measures just the current state of power going in or out of the element.

Someday I'd love to see somebody build a full flow for both, toggling between overall Energy, and live Power. Ideally the extra tags would allow for both at once, but obviously arrows and the flow dots only correspond to one at a time.

[Zaphod360]

Hmm, that is showing stale code for several tiny reasons... Hassio does some strange things with cacheing the front end. Any time you want to play with updated resources (assuming only the manually added ones): in Chrome's inspect Network tab, hit disable cache. I can't speak to the other browsers... On the phone apps, go to Settings > Companion App > Debugging > Reset Front End Cache. These should allow the latest changes to show.

One thing I should mention, your system seems to be displaying 2 different systems, energy (kWh) and power (w). You might be aware, but for others checking out this thread, wH / kWh measure energy over time and will keep rising until reset, W measures just the current state of power going in or out of the element.

Someday I'd love to see somebody build a full flow for both, toggling between overall Energy, and live Power. Ideally the extra tags would allow for both at once, but obviously arrows and the flow dots only correspond to one at a time.

Thanks for the reply, still not having look. When I have issues I try things in incognito mode to make sure it's not a cache issue. I am using desktop chome but have checked in the app as well. I've also tried clearing the cache but still no luck. I am displaying kwh and w, I'm using kwh as the 'extra' info to monitr daily useage, shoudn't be a problem shoud it? Let me know if anyone has any idea what I'm doing wrong, I even gone as far as fully removing the card and reinstalling it.

[flyrmyr]

@Zaphod360 Some of my poor git-fu reset the .gitignore, and the dist file never got submitted with the commit... Current dist file is now working for me: uninstalled, downloaded and added that way. Shouldn't be necessary but wanted to make sure. Apologies again, Thanksgiving and Covid kinda smacked me this week. Expecting to get back into ongoing dev soon!

[Zaphod360]

Firstly, you don't need to apologies! This is amazing free work! I am not complaining. Secondly, still doesn't work?????? The git repository says that it was uploaded today. I've uninstalled it and removed the HACS method so I can manually install it. I removed the dashboard HACS repository and added the manual one. Rebooted and cleared the cache, still the same for me? No 'fill', 'invert', or 'exclude' and removing the title still makes everything look funny.

Take your time, I'm in no rush, really appreciate your work on this.

[Zaphod360]

Ok, I've been playing around today and found some interesting things, not sure if will help.

If I remove the title it shows like this on chrome desktop (windows 10): but like this on my phone (android Chrome): if I add the 'fill' option I get this on desktop: and this when I set it to false: If add gas and set the exclude tag on desktop I get: but the on my phone: Additionaly , if I for example duplicate the solar element and add exclude, it doesn't 'exclude' it, I get this on desktop: and on my phone it seems to work with the calculation and desplays this on my phone:

This is an example of the code:

`
`type: custom:system-flow-card
speed: 3
title: false
fadeIdylElements: 'yes'
system:
  unit: W
  icon: mdi:home
elements:
  - value: sensor.battery_flow_invert
    icon: mdi:battery-charging
    fill: 'yes'
    extra: sensor.lux_battery
    color: '#B000CE'
    position: bottom
  - value: sensor.grid_flow_invert
    icon: mdi:transmission-tower
    extra: sensor.lux_power_from_grid_daily
    color: '#6070B9'
    position: left
  - value: sensor.lux_solar_output_live
    icon: mdi:solar-power-variant
    extra: sensor.lux_solar_output_daily
    color: '#E5BD03'
    position: top
  - value: sensor.gas_import_daily
    icon: mdi:fire
    exclude: true
    extra: sensor.daily_gas_cost_money
    color: brown
    position: bottom
  - value: sensor.zappi_invert
    icon: mdi:car-electric
    extra: sensor.zappi_today
    color: '#2E369B'
    position: right
    inverted: false
  - value: sensor.eddi_invert
    icon: mdi:water-thermometer
    extra: sensor.eddi_today
    color: ' #37C7B8'
    position: right
    inverted: false
`

[bastelbert]

Hi @flyrmyr, thank you very much for sharing the card, it's awesome! In my case the lines and dots are shown correctly on the desktop and the phone, but not on the tablet. Here the lines are broken.

Furthermore, I am wondering why the system value gets negative? In my case it's supposed to show the energy consumption of the house (minus the wallbox and the heatpump):

`type: custom:system-flow-card speed: 3 fadeIdylElements: true invert: true system: unit: W icon: mdi:home-circle-outline extra: sensor.power_total_today elements:

• value: sensor.power_from_grid icon: mdi:transmission-tower position: left extra: sensor.power_from_grid_today
• value: sensor.power_heatpump_inverted icon: mdi:heat-pump-outline position: right extra: sensor.power_heatpump_today invert: true
• value: sensor.solar_prod icon: mdi:solar-power-variant position: top extra: sensor.solar_prod_today
• value: sensor.power_wallbox_inverted icon: mdi:car-electric position: bottom extra: sensor.power_wallbox_today `

The extras feature is great, it saves me some extra cards for the values on the dashboard.

@BadgerLoaf I also tried to adapt the card size with card-mod, but it's not working as supposed.

Feature requests:

• maybe we could also use the space in the corners for displaying more entities? For example, if only 4 boxes are displayed in total, there is still enough space in the corners.
• regarding the connections I would love to see a similar approach like Loxone did lately with their new energy flow meter: Here the elements are connected via a knot in the central, the system called "Rest" is created automatically.

Either way, the card is already helping me a lot and I look forward to future expansions ;)

[flyrmyr]

@Zaphod360 Apologies again for leaving you hanging. I still think those issues are somehow result of not getting the latest code. I just rebuild everything and pushed it up again for ya, hoping this times the charm? It looks like your yaml entry should be fine...

Mine has been working well on chrome, iPhone 12 and the desktop app. I can squish it down to about here before it starts looking off:

Could you give the new dist a shot again and see if you get the fixes?

[flyrmyr]

@bastelbert As above, hoping you could try to play with the latest dist and see if your spacing issues get corrected. All of the broken line bugs I fixed a while ago, maybe I'm an idiot with git but its saying the dist file is getting updated..

Per your system value, you have 500w coming in and 60w going out, the system is just set to show anything unaccounted for. Its negative because its taking from the system, whereas an untracked solar charger would show a positive value there because its providing. So if theres untracked loads, or mysterious chargers, you can see your values aren't lining up. Open to giving an option for a catch all outside of the central box, but thats the best I could come up with for extra values...

I definitely know the UI needs work, big pet peeve that the svg lines for the dot flow are skewed when they shouldn't be. In my off time I've been tinkering unsuccessfully with different options for that. Once thats finished I'll really put work in to formalizing this card, getting it onto HACS officially, and advertising it. Hopefully that would keep the features moving.

[Zaphod360]

Huge improvement, thanks very much. I will note that downloading from hacs preduced a very old version of the card. I deleted it, did the manual install and cleared cache and it's up and running. Only thing that is strange is that when on desktop chrome on windows PC I get scroll bars on the right and bottom? They don't appear on mobile browser or in the app.

[flyrmyr]

@Zaphod360 Good catch, I haven't used any windows machines for testing, but was able to fix and validate on Parallels (windows for mac). The v0.1.0 release is up-to-date and available as an HACS custom repo when manually added, it has the updated code with your fix.

I've also submitted this version as the formal first version for the official HACS repo list - pending review. I feel I've hit just about all beta issues in this conversation, but if not, @everyone please follow up here soon once you've played with the latest release! If I don't hear anything in a bit I'll be closing this issue, but staying active/open to future bug reports and feature requests on this repo.