Feature request: adding specific device

[KokinSSJ]

Hi, first it's nice feature for HA ;)

About FR, it would be cool if we could add also custom device to the flow, something like for water or gas, but specific for electric devices e.g. eletric heater, heat pump or EV charger. What I was thinking is that you need to provide icon, name, sensor value with power. There is a question if all devices power has to sum to power consumed by house and I think that there are at least two solutions, first sum(devices.power) != house.power, or second there is another "entity" which is called something like "Other devices" and sum(devices.power) + other = house.power.

[DBT85]

I agree it would be great to be able to add a car charger or a power diverter, rather/as well as the current Gas and Water entities. Sadly I believe the dev has said they have no plans to do that right now. I can undserstand it as it moves things around on the screen and possibly might be a pain.

Having just tried this and the tesla flow card, power-flow-card is the much better looking and easier to get working so I really do prefer it.

If there is no desire to add in extra entities then simply (I say simply, its probably stupid hard I have no idea) allow users to change the label on Gas and Water, and allow the path to be swapped to the other direction. I can put my power diverter sensor on no issues and it displays the right value, the only thing missing is changing the label and the bead flow direction. Ideally allow a different icon too.

[KokinSSJ]

Having just tried this and the tesla flow card, power-flow-card is the much better looking and easier to get working so I really do prefer it.

Hehe for me is reverse :D I prefer how this just looks like, that is similar to energy card. Thanks :)

[glynhudson]

I've repurposed water and to show power from the EV charger and heatpump, is it possible to change to name and icon?

[flixlix]

You would have to change the source code. To change the Icon, change this line: https://github.com/ulic75/power-flow-card/blob/d0baa571a9879f33dc0967e6c5c69951e4ff9dec/src/power-flow-card.ts#L412 and this line: https://github.com/ulic75/power-flow-card/blob/d0baa571a9879f33dc0967e6c5c69951e4ff9dec/src/power-flow-card.ts#L595

To change the name, change this section of code: https://github.com/ulic75/power-flow-card/blob/d0baa571a9879f33dc0967e6c5c69951e4ff9dec/src/power-flow-card.ts#L405-L410

[DBT85]

I don't know how these things work, but you can't just open that file on your HA install and change it can you?

[flixlix]

I'll assume you are running Home Assistant OS. If that's the case, the easiest way to change the source code is as follows: Go to the Addons Menu -> Add-On Store -> File Editor -> Install it and start it after installing. Open the File Editor and go to the "www", the "community" and then the "power-flow-card" directory. Open the file power-flow-card.js. In here you can apply any changes as you wish. Hopefully this helped you further :)

[glynhudson]

Thanks for the info, that's helpful. I'm running HA via docker on a NAS. In the www/community/power-flow-card folder I don't have a src folder only a .js file and a zip archive:

Any idea where I might find the src folder?

[flixlix]

That's normal. You can just change the .js file

[glynhudson]

The .js file doest contain any reference to mdiWater icons. Is it possible to edit the .ts files then compile them into the .js?

[xsirpreisx]

I would be interested in setting up a development environment to change this card as well, to be able to use EV and heat pump instead of gas/water. I was able to set up Visual Studio Code and download the github project, but when compiling, I get multiple .js instead of one, and I haven't been able to get them to work in my HA. If anyone knows how to properly build this, please let me know, I would gladly fork this and try to exchange gas/water for other appliances.

[flixlix]

I just created a fork for this card allowing for Individual Devices. It is still very much a work in progress, since you can't change the label, color or icon in the yaml yet. Currently, the individual1 is an electric car and the individual2 in an electric motorbike. My plan is to add this functionality in the future.

It is also on my todo-list, to add the click functionality, for more info or even to toggle the individual devices.

Here is the fork. To install the card, go to the last release of the fork, download the js file and place it in the "www" directory.

I am open for feedback and support :)

[pbranly]

Hi Will you the one who will accept to add energy from gaz to energy from electricity, solar, etc ... This is really a lack of such representations. And please as well recalculate carbon dioxide percentage taking into account gaz Phil

[xsirpreisx]

I just created a fork for this card allowing for Individual Devices.

Awesome, thank you!

Could you explain how to compile the source so that the one power-flow-card.js file gets build? I would like to help, but haven't been able to set up a proper development environment. My Visual Studio Code (on Windows) creates one .js file for all of the .ts files when I build it.

[xsirpreisx]

Your fork Works great. I changed stuff manually in the JS.

[DBT85]

Are the moving dots going in the right direction for the car and heater? Maybe you could post your changes @xsirpreisx so those of us that are not quite so clever can see? I can't see in there where I might set one to be "heater" like you have.

Ideally if @flixlix manages to get to that point you'd set the icon and label in the yaml but that is something I wouldn't even know where to begin making possible. Maybe worth opening the "issues" area on your fork so people can discuss their changes and stuff?

[xsirpreisx]

Are the moving dots going in the right direction for the car and heater? Maybe you could post your changes @xsirpreisx so those of us that are not quite so clever can see? I can't see in there where I might set one to be "heater" like you have.

The flow is moving in the correct direction. That was @flixlixs work. I only changed the color and the icons in the power-flow-card.js. As far as I can see it will be possible to change colors and icons via yaml in the future.

One thing I am missing is different flow speeds (the flow from grid to house when importing 2 watts is just as quick as the flow from solar to house when solar is generating 6 kW :-D). But until I manage to get a working development environment running I guess I won't be able to help implement that.

https://user-images.githubusercontent.com/37976738/227494005-a04c45e3-b3c2-43f9-8092-d56a83cc9dc2.mp4

Edit: Ok, maybe the flows aren't all the same speed. Some calculation is being done. But not for the individual entities, I guess. And flow speed between grid / solar / house is also not totally intuitive.

[DBT85]

I only changed the color and the icons

It also looks like you have one called Helzung which I believe is heating, that isn't one of the original names nor "car" or "motorbike" as flix noted in their post?

And sorry to sound pathetic, but how do you change the things you changed? Where in the .js?

[xsirpreisx]

Yea, you're right, I did change the label as well, I forgot to mention that.

I changed all of that directly in the power-flow-card.js located (in my installation) in /config/www.

Not sure how to properly upload the file, to be honest.

We should start a Discussion thread in the Fork website, but I don't think there is a Discussion tab yet?

[flixlix]

You can just change the name in the YAML. The color and icons can't yet (!) be changed in YAML, you would need to change that in the above mentioned js file for now. I am going to open the discussion tab in the forked repo, feel free to start a discussion ;)

Edit: from now on, you can change everything (label text, icon and color) from the YAML, check the readme for more info

[kpfleming]

If you would, please move discussion related to the fork over to the fork repository. This has already happened once, there's another active fork out there too :-)