Line thickness to represent power flow?

[mirams]

I played around with altering the line thickness (and circle size) to represent power flow, and I think it makes the diagram a bit more useful in terms of seeing what is happening at a glance, without having to read all the numbers.

Here's a screenshot:

Some of the asthetics might want tweaking in terms of the sizes of the circles relative to lines.

Code changes were pretty simple with one method to set the line width (I guess you'd want peak power flow to be configurable, to set these more flexibly):

    lineWidthDependingOnPower(power: number) {
        let lineWidth: number
        switch (true) {
            case Math.abs(power) > 4000:
                lineWidth = 6;
                break;
            case Math.abs(power) > 3000:
                lineWidth = 5;
                break;
            case Math.abs(power) > 2000:
                lineWidth = 4;
                break;
            case Math.abs(power) > 1000:
                lineWidth = 3;
                break;
            case Math.abs(power) > 500:
                lineWidth = 2;
                break;
            default:
                lineWidth = 1;
                break;
        }
        return lineWidth;
    }

(a log-scale might be nicer, I have a bit more resolution at the bottom with only 500W to get to linewidth of 2)
with calls to this from the top:

        let gridLineWidth = this.lineWidthDependingOnPower(total_grid_power);
        let batteryLineWidth = this.lineWidthDependingOnPower(battery_power);
        let pv1LineWidth = this.lineWidthDependingOnPower(pv1_power_watts);
        let pv2LineWidth = this.lineWidthDependingOnPower(pv2_power_watts);
        let pvLineWidth = this.lineWidthDependingOnPower(totalsolar);

and changes to the svg like this

It's not a proper pull request because I just found the lines I need for my diagram, but hopefully you get the idea

[slipx06]

Thanks for sharing your idea. I'll take a look

[slipx06]

@mirams I've implemented your idea in https://github.com/slipx06/sunsynk-power-flow-card/releases/tag/v4.11.0. Give it a try. The logic is slightly different. It requires the global card attribute dynamic_line_width: true as well as max_power (used by the card animations) defined in the card sections that you want this active. This means that you can have independent line widths for each of the sections. I also reduced the maximum scaling effect slightly and implemented a logarithmic scale

[mirams]

Works a treat, thanks very much for including it.

[mirams]

Did notice that the svg and display is actually perfectly happy with decimal linewidths (I guess they get discretised when deciding how many pixels to light up on the screen), so you can notice some small increases and don't really need the log scale. Playing around a bit, this is quite pleasing on the eye to me, starting at linewidth = 0.5 for no current:

    dynamicLineWidth(power: number, maxpower: number) {
        let lineWidth: number;
        // Check if dynamic_line_width is disabled in the config
        if (!this._config.dynamic_line_width) {
            lineWidth = 1;
        } else {
            lineWidth = 0.5 + Math.min(power / maxpower, 1) * 4.5;
        }
        return lineWidth;
    }

and gives this simple relationship (red) compared to the one that's in now (blue):

Anyway, this is all minor messing around, it looks great anyway :-)

[slipx06]

Ok great. I'll take a look at the revised logic.

[slipx06]

I've applied a more linear scaling affect in v4.1.2
I've also introduced a new attribute max_line_width that lets you configure how thick the line should be when max_power is reached

[Roving-Ronin]

Is the max_line_width per section? i.e. grid / solar / battery etc can have their own max_line_width set?

[slipx06]

max_line_width is a global card attribute. Each section can have their own max_power which determines the visual affect. The width of of the line is calculated using the ratio of power to max_power. As this approaches 1 the line width will increase to max_line_width . Since each section can have a different max_power you will have independent line widths depending on this ratio.