Skip to content

Flow dots count #837

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
alminljajic wants to merge 9 commits into
base: main
Choose a base branch
from
Open

Flow dots count #837

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
ca491b9
first draft, working fine, further testing required
alminljajic Jun 19, 2025
9cffc3d
adding languages
alminljajic Jun 19, 2025
95b841a
correction, taking the right "newDur"
alminljajic Jul 10, 2025
5003ec4
first draft, working fine, further testing required
alminljajic Dec 29, 2025
a3fe17d
adding languages
alminljajic Dec 29, 2025
7d7c7a4
correction, taking the right "newDur"
alminljajic Dec 29, 2025
d33333e
Merge branch 'flow_dots_count' of https://github.com/alminljajic/powe…
alminljajic Dec 29, 2025
7f7865c
instead of "begin" use "keyPoints/keyTimes"
alminljajic Jan 1, 2026
804820c
correct "Indiviual" elements
alminljajic Jan 1, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -120,6 +120,7 @@ Else, if you prefer the graphical editor, use the menu to add the resource:
| clickable_entities | `boolean` | false | If true, clicking on the entity will open the entity's more info dialog. |
| min_expected_power | `number` | 0.01 | Represents the minimum amount of power (in Watts) expected to flow through the system at a given moment. Only used in the [New Flow Formula](#new-flow-formula). |
| max_expected_power | `number` | 2000 | Represents the maximum amount of power (in Watts) expected to flow through the system at a given moment. Only used in the [New Flow Formula](#new-flow-formula). |
| flow_dots_count | `number` | 1 | To visualize multiple dots flowing from source to sink. |
| display_zero_lines | `object` | `{mode: "show"}` | Check [Display Zero Lines](#display-zero-lines) |
| full_size | `boolean` | false | Warning: This option is experimental. To use this option, you must set your view to panel mode. If set to true, the card will take up the full height of the screen. And the Card should go to the center of the screen. |
| style_ha_card | `css` | | [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) Styling to apply to the container of the card (border and background of the card). |
Expand Down
31 changes: 25 additions & 6 deletions src/components/flows/batteryGrid.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,8 @@ import { styleLine } from "@/utils/styleLine";
import { type Flows } from "./index";
import { checkHasBottomIndividual, checkHasRightIndividual } from "@/utils/computeIndividualPosition";
import { checkShouldShowDots } from "@/utils/checkShouldShowDots";
import { checkFlowDotsCount } from "@/utils/checkFlowDotsCount";


type FlowBatteryGridFlows = Pick<Flows, Exclude<keyof Flows, "solar">>;

Expand All @@ -26,35 +28,52 @@ export const flowBatteryGrid = (config: PowerFlowCardPlusConfig, { battery, grid
vector-effect="non-scaling-stroke"
></path>
${checkShouldShowDots(config) && grid.state.toBattery
? svg`<circle
? svg`${Array.from({ length: checkFlowDotsCount(config) ?? 1 }).map((_, i) => {
const n = checkFlowDotsCount(config) ?? 1;
const start = i / n;
const end = (i + 1) / n;
return svg`

<circle
r="1"
class="battery-from-grid"
vector-effect="non-scaling-stroke"
>
<animateMotion
dur="${newDur.batteryGrid}s"
dur="${newDur.batteryGrid / n}s"
keyTimes="0;1;1"
keyPoints="${(i + 1) / n} ; ${i / n} ; ${(i + 1) / n}"
repeatCount="indefinite"
keyPoints="1;0" keyTimes="0;1"
calcMode="linear"
>
<mpath xlink:href="#battery-grid" />
</animateMotion>
</circle>`
</circle>`})}`
: ""}
${checkShouldShowDots(config) && battery.state.toGrid
? svg`<circle
? svg`
${Array.from({ length: checkFlowDotsCount(config) ?? 1 }).map((_, i) => {
const n = checkFlowDotsCount(config) ?? 1;
const start = i / n;
const end = (i + 1) / n;
return svg`

<circle
r="1"
class="battery-to-grid"
vector-effect="non-scaling-stroke"
>
<animateMotion
dur="${newDur.batteryGrid}s"
dur="${newDur.batteryGrid / n}s"
keyTimes="0;1;1"
keyPoints="${(i) / n} ; ${(i+1) / n}; ${(i) / n}"
repeatCount="indefinite"
calcMode="linear"
>
<mpath xlink:href="#battery-grid" />
</animateMotion>
</circle>`
})}`
: ""}
</svg>
</div>`
Expand Down
16 changes: 14 additions & 2 deletions src/components/flows/batteryToHome.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,8 @@ import { styleLine } from "@/utils/styleLine";
import { type Flows } from "./index";
import { checkHasBottomIndividual, checkHasRightIndividual } from "@/utils/computeIndividualPosition";
import { checkShouldShowDots } from "@/utils/checkShouldShowDots";
import { checkFlowDotsCount } from "@/utils/checkFlowDotsCount";


type FlowBatteryToHomeFlows = Pick<Flows, Exclude<keyof Flows, "solar">>;

Expand All @@ -26,19 +28,29 @@ export const flowBatteryToHome = (config: PowerFlowCardPlusConfig, { battery, gr
vector-effect="non-scaling-stroke"
></path>
${checkShouldShowDots(config) && battery.state.toHome
? svg`<circle
? svg`${Array.from({ length: checkFlowDotsCount(config) ?? 1 }).map((_, i) => {
const n = checkFlowDotsCount(config) ?? 1;
const start = i / n;
const end = (i + 1) / n;
return svg`


<circle
r="1"
class="battery-home"
vector-effect="non-scaling-stroke"
>
<animateMotion
dur="${newDur.batteryToHome}s"
dur="${newDur.batteryToHome / n}s"
keyTimes="0;1;1"
keyPoints="${(i) / n} ; ${(i+1) / n}; ${(i) / n}"
repeatCount="indefinite"
calcMode="linear"
>
<mpath xlink:href="#battery-home" />
</animateMotion>
</circle>`
})}`
: ""}
</svg>
</div>`
Expand Down
16 changes: 13 additions & 3 deletions src/components/flows/gridToHome.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import { styleLine } from "@/utils/styleLine";
import { type Flows } from "./index";
import { checkHasBottomIndividual, checkHasRightIndividual } from "@/utils/computeIndividualPosition";
import { checkShouldShowDots } from "@/utils/checkShouldShowDots";
import { checkFlowDotsCount } from "@/utils/checkFlowDotsCount";

export const flowGridToHome = (config: PowerFlowCardPlusConfig, { battery, grid, individual, solar, newDur }: Flows) => {
return grid.has && showLine(config, grid.state.fromGrid) && !config.entities.home?.hide
Expand All @@ -24,19 +25,28 @@ export const flowGridToHome = (config: PowerFlowCardPlusConfig, { battery, grid,
vector-effect="non-scaling-stroke"
></path>
${checkShouldShowDots(config) && grid.state.toHome
? svg`<circle
? svg`
${Array.from({ length: checkFlowDotsCount(config) ?? 1 }).map((_, i) => {
const n = checkFlowDotsCount(config) ?? 1;
const start = i / n;
const end = (i + 1) / n;
return svg`
<circle
r="1"
class="grid"
vector-effect="non-scaling-stroke"
>
<animateMotion
dur="${newDur.gridToHome}s"
dur="${newDur.gridToHome / n}s"
keyTimes="0;1;1"
keyPoints="${(i) / n} ; ${(i+1) / n}; ${(i) / n}"
repeatCount="indefinite"
calcMode="linear"
>
<mpath xlink:href="#grid" />
</animateMotion>
</circle>`
</circle>`;
})}`
: ""}
</svg>
</div>`
Expand Down
15 changes: 13 additions & 2 deletions src/components/flows/solarToBattery.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,8 @@ import { styleLine } from "@/utils/styleLine";
import { type Flows } from "./index";
import { checkHasBottomIndividual, checkHasRightIndividual } from "@/utils/computeIndividualPosition";
import { checkShouldShowDots } from "@/utils/checkShouldShowDots";
import { checkFlowDotsCount } from "@/utils/checkFlowDotsCount";


type FlowSolarToBatteryFlows = Pick<Flows, Exclude<keyof Flows, "grid">>;

Expand All @@ -26,19 +28,28 @@ export const flowSolarToBattery = (config: PowerFlowCardPlusConfig, { battery, i
vector-effect="non-scaling-stroke"
></path>
${checkShouldShowDots(config) && solar.state.toBattery
? svg`<circle
? svg`
${Array.from({ length: checkFlowDotsCount(config) ?? 1 }).map((_, i) => {
const n = checkFlowDotsCount(config) ?? 1;
const start = i / n;
const end = (i + 1) / n;
return svg`
<circle
r="1"
class="battery-solar"
vector-effect="non-scaling-stroke"
>
<animateMotion
dur="${newDur.solarToBattery}s"
dur="${newDur.solarToBattery / n}s"
keyTimes="0;1;1"
keyPoints="${(i) / n} ; ${(i+1) / n}; ${(i) / n}"
repeatCount="indefinite"
calcMode="linear"
>
<mpath xlink:href="#battery-solar" />
</animateMotion>
</circle>`
})}`
: ""}
</svg>
</div>`
Expand Down
14 changes: 12 additions & 2 deletions src/components/flows/solarToGrid.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,8 @@ import { styleLine } from "@/utils/styleLine";
import { type Flows } from "./index";
import { checkHasBottomIndividual, checkHasRightIndividual } from "@/utils/computeIndividualPosition";
import { checkShouldShowDots } from "@/utils/checkShouldShowDots";
import { checkFlowDotsCount } from "@/utils/checkFlowDotsCount";


export const flowSolarToGrid = (config: PowerFlowCardPlusConfig, { battery, grid, individual, solar, newDur }: Flows) => {
return grid.hasReturnToGrid && solar.has && showLine(config, solar.state.toGrid || 0)
Expand All @@ -24,19 +26,27 @@ export const flowSolarToGrid = (config: PowerFlowCardPlusConfig, { battery, grid
vector-effect="non-scaling-stroke"
></path>
${checkShouldShowDots(config) && solar.state.toGrid && solar.has
? svg`<circle
? svg`${Array.from({ length: checkFlowDotsCount(config) ?? 1 }).map((_, i) => {
const n = checkFlowDotsCount(config) ?? 1;
const start = i / n;
const end = (i + 1) / n;
return svg`
<circle
r="1"
class="return"
vector-effect="non-scaling-stroke"
>
<animateMotion
dur="${newDur.solarToGrid}s"
dur="${newDur.solarToGrid / n}s"
keyTimes="0;1;1"
keyPoints="${(i) / n} ; ${(i+1) / n}; ${(i) / n}"
repeatCount="indefinite"
calcMode="linear"
>
<mpath xlink:href="#return" />
</animateMotion>
</circle>`
})}`
: ""}
</svg>
</div>`
Expand Down
14 changes: 12 additions & 2 deletions src/components/flows/solarToHome.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,8 @@ import { styleLine } from "@/utils/styleLine";
import { type Flows } from "./index";
import { checkHasBottomIndividual, checkHasRightIndividual } from "@/utils/computeIndividualPosition";
import { checkShouldShowDots } from "@/utils/checkShouldShowDots";
import { checkFlowDotsCount } from "@/utils/checkFlowDotsCount";


export const flowSolarToHome = (config: PowerFlowCardPlusConfig, { battery, grid, individual, solar, newDur }: Flows) => {
return solar.has && showLine(config, solar.state.toHome || 0) && !config.entities.home?.hide
Expand All @@ -24,19 +26,27 @@ export const flowSolarToHome = (config: PowerFlowCardPlusConfig, { battery, grid
vector-effect="non-scaling-stroke"
></path>
${checkShouldShowDots(config) && solar.state.toHome
? svg`<circle
? svg`${Array.from({ length: checkFlowDotsCount(config) ?? 1 }).map((_, i) => {
const n = checkFlowDotsCount(config) ?? 1;
const start = i / n;
const end = (i + 1) / n;
return svg`
<circle
r="1"
class="solar"
vector-effect="non-scaling-stroke"
>
<animateMotion
dur="${newDur.solarToHome}s"
dur="${newDur.solarToHome / n}s"
keyTimes="0;1;1"
keyPoints="${(i) / n} ; ${(i+1) / n}; ${(i) / n}"
repeatCount="indefinite"
calcMode="linear"
>
<mpath xlink:href="#solar" />
</animateMotion>
</circle>`
})}`
: ""}
</svg>
</div>`
Expand Down
42 changes: 27 additions & 15 deletions src/components/individualLeftBottomElement.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { PowerFlowCardPlusConfig } from "../power-flow-card-plus-config";
import { IndividualObject } from "../states/raw/individual/getIndividualObject";
import { NewDur, TemplatesObj } from "../type";
import { checkShouldShowDots } from "../utils/checkShouldShowDots";
import { checkFlowDotsCount } from "../utils/checkFlowDotsCount";
import { computeIndividualFlowRate } from "../utils/computeFlowRate";
import { showLine } from "../utils/showLine";
import { styleLine } from "../utils/styleLine";
Expand All @@ -29,22 +30,33 @@ export const individualLeftBottomElement = (
? html`
<svg width="80" height="30">
<path d="M40 40 v-40" id="individual-bottom" class="${styleLine(individualObj?.state || 0, config)}" />



${checkShouldShowDots(config) && individualObj?.state && individualObj.state >= (individualObj.displayZeroTolerance ?? 0)
? svg`<circle
r="1.75"
class="individual-bottom"
vector-effect="non-scaling-stroke"
>
<animateMotion
dur="${computeIndividualFlowRate(individualObj.field?.calculate_flow_rate !== false, duration)}s"
repeatCount="indefinite"
calcMode="linear"
keyPoints=${individualObj.invertAnimation ? "0;1" : "1;0"}
keyTimes="0;1"
>
<mpath xlink:href="#individual-bottom" />
</animateMotion>
</circle>`
? svg`
${Array.from({ length: checkFlowDotsCount(config) ?? 1 }).map((_, i) => {
const n = checkFlowDotsCount(config) ?? 1;
const start = i / n;
const end = (i + 1) / n;
return svg`
<circle
r="1.75"
class="individual-bottom"
vector-effect="non-scaling-stroke"
>
<animateMotion
dur="${computeIndividualFlowRate(individualObj.field?.calculate_flow_rate !== false, duration) / n}s"
repeatCount="indefinite"
calcMode="linear"
keyPoints=${individualObj.invertAnimation ? `${start} ; ${end}; ${start}` : `${end} ; ${start}; ${end}`}
keyTimes="0;1;1"
>
<mpath xlink:href="#individual-bottom" />
</animateMotion>
</circle>
`;
})}`
: ""}
</svg>
`
Expand Down
17 changes: 13 additions & 4 deletions src/components/individualLeftTopElement.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,8 @@ import { IndividualObject } from "../states/raw/individual/getIndividualObject";
import { PowerFlowCardPlus } from "../power-flow-card-plus";
import { styleLine } from "../utils/styleLine";
import { checkShouldShowDots } from "../utils/checkShouldShowDots";
import { checkFlowDotsCount } from "@/utils/checkFlowDotsCount";


interface TopIndividual {
newDur: NewDur;
Expand Down Expand Up @@ -52,21 +54,28 @@ export const individualLeftTopElement = (
<svg width="80" height="30">
<path d="M40 -10 v50" id="individual-top" class="${styleLine(individualObj.state || 0, config)}" />
${checkShouldShowDots(config) && individualObj.state && individualObj.state >= (individualObj.displayZeroTolerance ?? 0)
? svg`<circle
? svg`${Array.from({ length: checkFlowDotsCount(config) ?? 1 }).map((_, i) => {
const n = checkFlowDotsCount(config) ?? 1;
const start = i / n;
const end = (i + 1) / n;
return svg`

<circle
r="1.75"
class="individual-top"
vector-effect="non-scaling-stroke"
>
<animateMotion
dur="${computeIndividualFlowRate(individualObj?.field?.calculate_flow_rate, duration)}s"
dur="${computeIndividualFlowRate(individualObj?.field?.calculate_flow_rate, duration) / n}s"
repeatCount="indefinite"
calcMode="linear"
keyPoints=${individualObj.invertAnimation ? "0;1" : "1;0"}
keyTimes="0;1"
keyPoints=${individualObj.invertAnimation ? `${start} ; ${end}; ${start}` : `${end} ; ${start}; ${end}`}
keyTimes="0;1;1"
>
<mpath xlink:href="#individual-top" />
</animateMotion>
</circle>`
})}`
: ""}
</svg>
`
Expand Down
Loading