Skip to content

Commit

Permalink
Low resource functions for old or slower devices
Browse files Browse the repository at this point in the history
  • Loading branch information
@molikk
molikk committed Jan 9, 2025
1 parent abd8909 commit a1c31ad
Show file tree
Hide file tree
Showing 14 changed files with 150 additions and 63 deletions.
6 changes: 3 additions & 3 deletions dist/mlk-power-flow-card.js
View file

Large diffs are not rendered by default.

62 changes: 42 additions & 20 deletions docs/configuration.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,23 +32,24 @@ The card can be configured through the following attributes:

## General

| Editor name (en) | Attribute | Default | Description |
|-------------------------------|------------------------------|---------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| Large Font | large_font: | `false` | Increases font size of sensor data |
| Wide View | wide_view_mode: | `false` | Toggles panel mode setting card width to `720px`. For use with Panel(1 card) view types or grid layouts |
| Card Height (px or %) | card_height: | `100%` | Sets the card height in pixels or percentage. Specify the value i.e. `400px` or provide a sensor i.e. `input.number_height` |
| Card Width (px or %) | card_width: | `100%` | Sets the card width in pixels or percentage. Specify the value i.e. `400px`, `80%` or provide a sensor i.e. `input.number_width`. For adjustments when using the Panel(1 card) view types or grid layouts |
| Show Solar | show_solar: | `true` | Toggle display of solar information |
| Show Battery | show_battery: | `true` | Toggle display of battery information |
| Show Grid | show_grid: | `true` | Toggle display of grid information |
| Align grid to left | align_grid: | `false` | Aligns grid group to left side of viewbox. Use with [Viewbox:min-x](#general-viewbox) |
| Align load to right | align_load: | `false` | Aligns load and AUX group to right side of viewbox. Use with `wide_view_mod` and [Viewbox:width](#general-viewbox) |
| Dynamic Line Width | dynamic_line_width: | `false` | Adjusts the width of the lines and animated dot based on the ratio of current power to `max_power` (defined in each section below). Requires `max_power` to be explicitly defined |
| Max Line Width | max_line_width: | `4` | Sets the maximum line width when `dynamic_line_width: true`. If you prefer thick lines set a larger value. Reduce this value for a more subtle scaling affect. Values greater the `8` are ignored |
| Min Line Width | min_line_width: | `1` | Sets the minimum or default line width on the card. Values greater the `8` are ignored |
| Decimal Places | decimal_places: | `2` | Sets the number of decimal places to display when using the `auto_scale` option. |
| Decimal Places (Daily Energy) | decimal_places_energy: | `1` | Sets the number of decimal places to display for the daily energy values. |
| Adv. ViewBox Options | [Sub-menu](#general-viewbox) | | Shows sub-menu with Advanced ViewBox options details. **Use with cautious!** Check [link](https://svgwg.org/svg2-draft/coords.html#ViewBoxAttribute) for more information. |
| Editor name (en) | Attribute | Default | Description |
|-------------------------------|------------------------------------|---------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| Large Font | large_font: | `false` | Increases font size of sensor data |
| Wide View | wide_view_mode: | `false` | Toggles panel mode setting card width to `720px`. For use with Panel(1 card) view types or grid layouts |
| Card Height (px or %) | card_height: | `100%` | Sets the card height in pixels or percentage. Specify the value i.e. `400px` or provide a sensor i.e. `input.number_height` |
| Card Width (px or %) | card_width: | `100%` | Sets the card width in pixels or percentage. Specify the value i.e. `400px`, `80%` or provide a sensor i.e. `input.number_width`. For adjustments when using the Panel(1 card) view types or grid layouts |
| Show Solar | show_solar: | `true` | Toggle display of solar information |
| Show Battery | show_battery: | `true` | Toggle display of battery information |
| Show Grid | show_grid: | `true` | Toggle display of grid information |
| Align grid to left | align_grid: | `false` | Aligns grid group to left side of viewbox. Use with [Viewbox:min-x](#general-viewbox) |
| Align load to right | align_load: | `false` | Aligns load and AUX group to right side of viewbox. Use with `wide_view_mod` and [Viewbox:width](#general-viewbox) |
| Dynamic Line Width | dynamic_line_width: | `false` | Adjusts the width of the lines and animated dot based on the ratio of current power to `max_power` (defined in each section below). Requires `max_power` to be explicitly defined |
| Max Line Width | max_line_width: | `4` | Sets the maximum line width when `dynamic_line_width: true`. If you prefer thick lines set a larger value. Reduce this value for a more subtle scaling affect. Values greater the `8` are ignored |
| Min Line Width | min_line_width: | `1` | Sets the minimum or default line width on the card. Values greater the `8` are ignored |
| Decimal Places | decimal_places: | `2` | Sets the number of decimal places to display when using the `auto_scale` option. |
| Decimal Places (Daily Energy) | decimal_places_energy: | `1` | Sets the number of decimal places to display for the daily energy values. |
| Adv. ViewBox Options | [Sub-menu](#general-viewbox) | | Shows sub-menu with Advanced ViewBox options details. **Use with cautious!** Check [link](https://svgwg.org/svg2-draft/coords.html#ViewBoxAttribute) for more information. |
| Low resources Options | [Sub-menu](#general-low-resources) | | shows sub-menu with Low resource devices options details. **Use with cautious!** |

### General: ViewBox

Expand All @@ -59,6 +60,26 @@ The card can be configured through the following attributes:
| width | viewbox_width | | ViewBox width (if not given, value depends on number of aux and essential loads) |
| height | viewbox_height | | ViewBox height (if not given, value depends on show_solar, show_battery, additional_loads & aux_loads values) |

### General: Low Resources

| Editor name (en) | Attribute | Default | Description |
|------------------|------------------|---------|--------------------------------------------------------------------------------------------------------|
| Refresh Interval | refresh_interval | `500` | Sets data and view refresh interval. Doesn't affect animations smoothness. See table below for meaning |
| Animations | animations | | If sets to `true` shows all animations like flow animation |

| Refresh Interval | Refresh Rate |
|------------------|--------------------------------------------------------------------------------------|
| 1 | 1000Hz - fastest refresh, high CPU load |
| 10 | 100Hz - old default |
| 15 | 60Hz - screen refresh rate |
| 100 | 10Hz |
| 500 | 2Hz |
| 1000 | 1Hz - Once per second, still should be visible as smooth, recommended for most usage |
| 10000 | 0,1Hz once per 10 sec, user might see latency in data refresh, very low CPU Load |

Note: values of refresh rates aren't 100% accurate and depends on browser/app and device load. Value means highest Refresh Rate possible and might be lower when
device is in high CPU load.

## Inverter

| Editor name (en) | Attribute | Default | Description |
Expand Down Expand Up @@ -772,11 +793,12 @@ inverter_status_59 Entity expects a sensor that contains inverter status represe
| **Victron** | | | | | `2`, `fault` | **off**: `0`, `off`<br/> **lowpower**: `1`, `low power`<br/> **bulk**: `3`, `bulk`<br/> **absorption**: `4`, `absorption`<br/> **float**: `5`, `float`<br/> **storage**: `6`, `storage`<br/> **equalize**: `7`, `equalize`<br/> **passthru**: `8`, `passthru`<br/> **inverting**: `9`, `inverting`<br/> **powerassist**: `10`, `power assist`<br/> **powersupply**: `11`, `power supply`<br/> **sustain**: `244`, `sustain`<br/> **externalcontrol**: `252`, `external control` |
| **Sungrow** | `standby`,`initial standby` | `startup` | | `warn running` | `update failed`, `maintain mode`,`emergency stop`,<br/>`fault`,`unknown`,`un-initialized`,`open loop`,<br/>`safe mode`,`dispatch run` | **running**: `running`<br/> **offgrid**: `off-grid mode`<br/> **externalcontrol**: `external ems mode`,`forced mode`<br/> **shutdown**: `shutdown`,`restarting`,`afci self test shutdown`<br/> **normalstop**: `stop`<br/> **sustain**: `de-rating running` |

Sunsynk `0, 1, 2, 3, 4` or `standby, selftest, normal, alarm, fault`. For Lux `0,1,2,4,5,7,8,9,10,11,12,16,17,20,32,40,64,136,192`. For Solis expects a numeric
value `0-57`. For Goodwe `0,1,2,3,4,5` or `Wait mode, Normal (On-Grid), Normal (Off-Grid), Fault Mode, Flash Mode, Check Mode`. For Goodwe_gridmode `0,1,2` or
Sunsynk `0, 1, 2, 3, 4` or `standby, selftest, normal, alarm, fault`. For Lux `0,1,2,4,5,7,8,9,10,11,12,16,17,20,32,40,64,136,192`. For `Solis` expects a
numeric
value `0-57`. For `Goodwe` `0,1,2,3,4,5` or `Wait mode, Normal (On-Grid), Normal (Off-Grid), Fault Mode, Flash Mode, Check Mode`. For `Goodwe_gridmode` `0,1,2`
or
`Idle, Exporting, Importing`


## "Custom element doesn't exist: mlk-power-flow-card" handling

### Android:
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "mlk-power-flow-card",
"version": "1.3.0",
"version": "1.4.0",
"description": "A customizable Home Assistant card to emulate power flow based on Sunsynk's Inverter screen with load devices controls.",
"main": "mlk-power-flow-card.js",
"scripts": {
Expand Down
4 changes: 2 additions & 2 deletions src/cards/compact/auxLoad.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,10 +37,10 @@ export class AuxLoad {
const line1 = `M ${lineBegin} 190 L ${lineBegin} 180 Q ${lineBegin} 153 ${lineBegin + 27} 153 L ${lineEnd} 153`;
const line2 = `M ${lineEnd + 70} 153 L ${lineEnd + 70} 153 Q ${lineEnd + 70 + 27} 153 ${lineEnd + 70 + 27} 126 L ${lineEnd + 70 + 27} 46 Q ${lineEnd + 70 + 27} 39 ${lineEnd + 70 + 27 + 5} 39 L ${lineEnd - x + Load.column1 + Load.xGaps[1]} 39`;

const circle2 = this.getCircle(Math.round(data.auxPower) > 0, 'aux-dot2', '#aux-line2', lineWidth, data, duration, keyPoints);
const circle2 = this.getCircle(Math.round(data.auxPower) > 0 && config.low_resources.animations, 'aux-dot2', '#aux-line2', lineWidth, data, duration, keyPoints);
const path2 = this.getPath(config.load.aux_loads > 0, 'aux-flow2', 'aux-line2', line2, data, lineWidth, circle2);

const circle1 = this.getCircle(Math.round(data.auxPower) > 0, 'aux-dot1', '#aux-line1', lineWidth, data, animationSpeed, keyPoints);
const circle1 = this.getCircle(Math.round(data.auxPower) > 0 && config.low_resources.animations, 'aux-dot1', '#aux-line1', lineWidth, data, animationSpeed, keyPoints);
const path1 = this.getPath(true, 'aux-flow1', 'aux-line1', line1, data, lineWidth, circle1);

return svg`
Expand Down
2 changes: 1 addition & 1 deletion src/cards/compact/battery.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -163,7 +163,7 @@ export class Battery {
let keyPoints = data.batteryPower > 0 ? '1;0' : '0;1';
keyPoints = config.battery.invert_flow ? Utils.invertKeyPoints(keyPoints) : keyPoints;

let circle = data.batteryPower != 0 ? svg`
let circle = data.batteryPower != 0 && config.low_resources.animations ? svg`
<circle id="power-dot" cx="0" cy="0"
r="${Math.min(2 + data.batLineWidth + Math.max(data.minLineWidth - 2, 0), 8)}"
fill="${Battery.batteryColour(data, config)}">
Expand Down
4 changes: 2 additions & 2 deletions src/cards/compact/grid.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -87,8 +87,8 @@ export class Grid {
const lineEnd = 215 + xTransform;
const animationDuration = (lineEnd - 175) / (215 - 175) * data.durationCur['grid'];

let circle1 = this.getCircle(data.totalGridPower > 0, 'grid-dot1', data, animationDuration, keyPoints, '#grid-line1');
let circle2 = this.getCircle(data.totalGridPower > 0, 'grid-dot2', data, data.durationCur['grid'], keyPoints, '#grid-line2');
let circle1 = this.getCircle(data.totalGridPower > 0 && config.low_resources.animations, 'grid-dot1', data, animationDuration, keyPoints, '#grid-line1');
let circle2 = this.getCircle(data.totalGridPower > 0 && config.low_resources.animations, 'grid-dot2', data, data.durationCur['grid'], keyPoints, '#grid-line2');

return svg`
<svg id="grid-flow1" style="overflow: visible">
Expand Down
4 changes: 2 additions & 2 deletions src/cards/compact/gridLoad.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -179,8 +179,8 @@ export class GridLoad {
const line1 = `M ${startX} 328 L 135 328 Q 140 328 140 323 L 140 320`;
const line2 = "M 140 290 L 140 234";

const circle1 = this.getCircle(config.grid.show_nonessential && data.nonessentialPower > 0, 'nes-dot1', data, config, '#nes-line1');
const circle2 = this.getCircle(config.grid.show_nonessential && data.nonessentialPower > 0, 'nes-dot2', data, config, '#nes-line2');
const circle1 = this.getCircle(config.grid.show_nonessential && data.nonessentialPower > 0 && config.low_resources.animations, 'nes-dot1', data, config, '#nes-line1');
const circle2 = this.getCircle(config.grid.show_nonessential && data.nonessentialPower > 0 && config.low_resources.animations, 'nes-dot2', data, config, '#nes-line2');

const flowLine1 = this.getFlowLine(config.grid.additional_loads > 0, 'nes-flow1', 'nes-line1', line1, data, circle1);
const flowLine2 = this.getFlowLine(true, 'nes-flow2', 'nes-line2', line2, data, circle2);
Expand Down
4 changes: 2 additions & 2 deletions src/cards/compact/load.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,8 +55,8 @@ export class Load {
const line2 = `M ${start2} 218.5 L ${stop2} 218.5`;

const animationSpeed = (stop1 - (start1 - xTransform)) / (stop1 - start1) * data.durationCur['load'];
const circleMotion = this.getCircleMotion(data.essentialPower > 0, 'es-dot', '#es-line', data, config, animationSpeed);
const circle1Motion = this.getCircleMotion(data.essentialPower > 0, 'es-dot1', '#es-line1', data, config, animationSpeed);
const circleMotion = this.getCircleMotion(data.essentialPower > 0 && config.low_resources.animations, 'es-dot', '#es-line', data, config, animationSpeed);
const circle1Motion = this.getCircleMotion(data.essentialPower > 0 && config.low_resources.animations, 'es-dot1', '#es-line1', data, config, animationSpeed);

return svg`
<svg id="load-flow" style="overflow: visible">
Expand Down
Loading

0 comments on commit a1c31ad

Please sign in to comment.