Skip to content

Commit

Permalink
remove panel mode and improve display in wide view mode
Browse files Browse the repository at this point in the history
  • Loading branch information
@molikk
molikk committed Jan 2, 2025
1 parent bd52f7b commit 52f3659
Show file tree
Hide file tree
Showing 22 changed files with 104 additions and 87 deletions.
2 changes: 1 addition & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ See the project's [documentation](https://molikk.github.io/mlk-power-flow-card/i
* Configurable battery size and shutdown SOC to calculate and display remaining battery runtime based on current battery usage and system time slot setting i.e. SOC, Grid Charge. Can be toggled off.
* Daily Totals that can be toggled on or off.
* Hide all solar data if not installed or specify number of mppts in use (up to 5 MPPTs). Set custom MPPT labels.
* Panel mode & wide view mode for bigger card.
* Custom card scaling by turning on Wide View Mode or setting Card height and width.
* AUX and Non-essential can be hidden from the full card or assigned configurable labels.
* Customisable - Change colours and images.
* Most entities can be clicked to show more-info dialog.
Expand Down
35 changes: 17 additions & 18 deletions docs/configuration.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,24 +32,23 @@ 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 |
| Panel Mode | panel_mode: | `false` | Toggles panel mode setting card height to `100%`. For use with Panel(1 card) view types or grid layouts |
| 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) | card_height: | `396px` | Only used when `panel_mode: false`. Sets the card height in pixels. Specify the value i.e. `400px` or provide a sensor i.e. `input.number_height` |
| Card Width (px) | card_width: | `100%` | Only used when `panel_mode: true`. 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. |

### General: ViewBox

Expand Down
1 change: 0 additions & 1 deletion docs/examples/foxess.rst
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@ Example 1 - Integration via https://github.com/nathanmarlor/foxess_modbus
:linenos:
type: custom:mlk-power-flow-card
panel_mode: true
card_width: 80%
show_solar: true
inverter:
Expand Down
1 change: 0 additions & 1 deletion docs/examples/goodwe.rst
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@ Example 1
:linenos:
type: custom:mlk-power-flow-card
panel_mode: false
large_font: true
title: Goodwe
title_colour: grey
Expand Down
5 changes: 0 additions & 5 deletions docs/examples/huawei.rst
View file
Original file line number Diff line number Diff line change
Expand Up @@ -99,7 +99,6 @@ Example 1 - 1 x L1 1phase inverter with a 15kWh LUNA ESS battery - 2 PV strings
:linenos:
type: custom:mlk-power-flow-card
panel_mode: false
large_font: false
title: Huawei - Power Monitor
title_size: 18px
Expand Down Expand Up @@ -262,7 +261,6 @@ Example 2 - 2 x L1 1phase inverter with a 15kWh LUNA ESS battery - 4 PV strings
:linenos:
type: custom:mlk-power-flow-card
panel_mode: false
large_font: false
title: Huawei - Power Monitor
title_size: 18px
Expand Down Expand Up @@ -434,7 +432,6 @@ Example 3 - 1 x M1 3phase inverter with a 15kWh LUNA ESS battery - 2 PV strings
:linenos:
type: custom:mlk-power-flow-card
panel_mode: false
large_font: false
title: Huawei - Power Monitor
title_size: 18px
Expand Down Expand Up @@ -606,7 +603,6 @@ Example 4 - 1 x M1 3phase inverters with 2 x 15kWh LUNA ESS batteries - 2 PV str
:linenos:
type: custom:mlk-power-flow-card
panel_mode: false
large_font: false
title: Huawei - Power Monitor
title_size: 18px
Expand Down Expand Up @@ -779,7 +775,6 @@ Example 5 - 2 x M1 3phase inverters with a 15kWh LUNA ESS battery - 4 PV strings
:linenos:
type: custom:mlk-power-flow-card
panel_mode: false
large_font: false
title: Huawei - Power Monitor
title_size: 18px
Expand Down
1 change: 0 additions & 1 deletion docs/examples/powmr.rst
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@ Example - PowMr OW-HVM2.0H-12V inverter with 2.4kW Battery, 1.8kW Solar and Grid
:linenos:
type: custom:mlk-power-flow-card
panel_mode: true
large_font: false
title: PowMr Inverter - Power Monitor
title_size: 12px
Expand Down
1 change: 0 additions & 1 deletion docs/examples/solax.rst
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@ Example 1
show_grid: true
show_battery: true
large_font: false
panel_mode: false
inverter:
auto_scale: false
modern: false
Expand Down
1 change: 0 additions & 1 deletion docs/examples/solis.rst
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,6 @@ Example 2 (Solis S6 or S2-WL-ST) - Integration via https://github.com/Pho3niX90/
cardstyle: lite
large_font: true
show_solar: true
panel_mode: true
card_height: 415px
inverter:
model: solis
Expand Down
1 change: 0 additions & 1 deletion docs/examples/sunsynk.rst
View file
Original file line number Diff line number Diff line change
Expand Up @@ -180,7 +180,6 @@ Full Configuration (All Options)
:linenos:
type: custom:mlk-power-flow-card
panel_mode: false
large_font: false
title: Sunsynk Inverter
title_colour: grey
Expand Down
82 changes: 59 additions & 23 deletions src/cards/compact-card.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,50 +13,86 @@ import { BatteryBank } from './compact/batteryBank';
import { DevMode } from './compact/devMode';
import { ConfigurationCardEditor } from '../editor';

function calculateWidth(config: PowerFlowCardConfig) {
const getWidth = (): number => {
switch (true) {
case (config.load.show_aux && config.load.aux_loads >= 6 || EssentialLoad.isColumnDisplayable(config, 6)) :
return 696;
case (config.load.show_aux && config.load.aux_loads >= 5 || EssentialLoad.isColumnDisplayable(config, 5)) :
return 648;
case (config.load.show_aux && config.load.aux_loads >= 4 || EssentialLoad.isColumnDisplayable(config, 4)) :
return 600;
case (config.load.show_aux && config.load.aux_loads >= 3 || EssentialLoad.isColumnDisplayable(config, 3)) :
return 552;
default:
return 495;
}
};
return getWidth();
}

function calculateHeight(config: PowerFlowCardConfig) {
const getHeight = (): number => {
switch (true) {
case config.show_battery && config.battery.show_battery_banks && config.battery.battery_banks_view_mode == BatteryBanksViewMode.outer:
return 488;
case config.show_battery :
return 408;
case config.load.additional_loads_view_mode != AdditionalLoadsViewMode.none:
return 400;
default:
return 300;
}
};
return getHeight();
}

function calculateMinY(config: PowerFlowCardConfig) {
const getMinY = (): number => {
switch (true) {
case config.show_solar:
case config.load.show_aux:
case config.load.additional_loads_view_mode != AdditionalLoadsViewMode.none:
return 0;
case !config.show_battery :
return 80;
default:
return 140;
}
};
return getMinY();
}

export const compactCard = (config: PowerFlowCardConfig, inverterImg: string, data: DataDto) => {
Solar.solarColour = data.solarColour;
Solar.decimalPlacesEnergy = data.decimalPlacesEnergy;
Solar.decimalPlaces = data.decimalPlaces;
Grid.gridColour = data.gridColour;
Grid.decimalPlaces = data.decimalPlaces;

let additionalLoadVisible = config.load.additional_loads_view_mode != AdditionalLoadsViewMode.none;
let batteryBanksHeight = config.battery.show_battery_banks && config.battery.battery_banks_view_mode == BatteryBanksViewMode.outer ? 80 : 0;

let calculated_minX = 0;
let calculated_minY = config.show_solar || additionalLoadVisible ? 0 : additionalLoadVisible || !config.show_battery ? 80 : 146;
let calculated_width =
(config.load.aux_loads > 5 || EssentialLoad.isColumnDisplayable(config, 6)) ? 696
: (config.load.aux_loads > 4 || EssentialLoad.isColumnDisplayable(config, 5)) ? 648
: (config.load.aux_loads > 3 || EssentialLoad.isColumnDisplayable(config, 4)) ? 600
: (config.load.aux_loads > 2 || EssentialLoad.isColumnDisplayable(config, 3)) ? 552 : 505;
let calculated_height = config.show_battery ? 408 + batteryBanksHeight : (additionalLoadVisible ? 400 : 300);
let calculated_minY = calculateMinY(config);
let calculated_width = calculateWidth(config);
let calculated_height = calculateHeight(config);

let minX = config.viewbox?.viewbox_min_x ? config.viewbox.viewbox_min_x : config.wide_view_mode ? 0 : calculated_minX;
let minY = config.viewbox?.viewbox_min_y ? config.viewbox.viewbox_min_y : calculated_minY;
let width = config.viewbox?.viewbox_width ? config.viewbox.viewbox_width : config.wide_view_mode ? 720 : calculated_width;
let height = config.viewbox?.viewbox_height ? config.viewbox.viewbox_height : calculated_height;
let width = config.viewbox?.viewbox_width ? config.viewbox.viewbox_width : config.wide_view_mode ? 720 : calculated_width - minX;
let height = config.viewbox?.viewbox_height ? config.viewbox.viewbox_height : calculated_height - calculated_minY;

let cardHeight = data.panelMode === true ?
config.show_solar ? '100%' : '75%'
: !config.show_solar && !config.show_battery ? '270px'
: !config.show_solar
? additionalLoadVisible ? '330px' : '246px'
: config.show_solar && !config.show_battery
? additionalLoadVisible ? '400px' : '300px'
: data.cardHeight;
let cardWidth = data.panelMode === true ? data.cardWidth : '100%';
let cardHeight = data.panelMode === true ? '100%' : data.cardHeight;
let cardWidth = data.panelMode === true ? '720px' : data.cardWidth;

function gridXTransform() {
return config.align_grid || config.wide_view_mode ? calculated_minX - minX : 0;
}

function loadXTransform() {
return config.align_load || config.wide_view_mode ? width - calculated_width : 0;
return config.align_load || config.wide_view_mode ? width - calculated_width - gridXTransform() : 0;
}

function mainXTransform() {
return config.wide_view_mode ? (width - calculated_width) / 2 : 0;
return config.center_sol_inv_bat || config.wide_view_mode ? (loadXTransform() - gridXTransform()) / 2 : 0;
}

return html`
Expand Down
2 changes: 1 addition & 1 deletion src/cards/compact/auxLoad.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ export class AuxLoad {

private static getPath(condition: boolean, svgId: string, pathId: string, line: string, data: DataDto, lineWidth: number, circle: TemplateResult<2>) {
return condition ? svg`
<svg id="${svgId}">
<svg id="${svgId}" style="overflow: visible">
<path id="${pathId}" d="${line}"
fill="none" stroke="${data.auxLoadMainDynamicColour}" stroke-width="${lineWidth}"
stroke-miterlimit="10"
Expand Down
4 changes: 2 additions & 2 deletions src/cards/compact/battery.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -175,7 +175,7 @@ export class Battery {
</animateMotion>
</circle>` : svg``;
return svg`
<svg id="battery-flow">
<svg id="battery-flow" style="overflow: visible">
<path id="bat-line"
d="M 239 250 L 239 ${y}" fill="none"
stroke="${Battery.batteryColour(data, config)}" stroke-width="${data.batLineWidth}" stroke-miterlimit="10"
Expand Down Expand Up @@ -268,7 +268,7 @@ export class Battery {
<svg xmlns="http://www.w3.org/2000/svg" id="bat" x="212.5"
y="${y}" width="78.75"
height="78.75" preserveAspectRatio="none"
viewBox="0 0 24 24">
viewBox="0 0 24 24" >
<defs>
<linearGradient id="bLg" x1="0%" x2="0%" y1="100%" y2="0%">
<stop offset="0%"
Expand Down
2 changes: 1 addition & 1 deletion src/cards/compact/batteryBank.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -194,7 +194,7 @@ export class BatteryBank {
? storageEntity.toStr(2)
: Utils.toNum((batteryEnergy * (socEntity.toNum(2) / 100) / 1000), 2).toFixed(2);
return svg`
<svg id="battery-pack-flow-${id}">
<svg id="battery-pack-flow-${id}" style="overflow: visible">
<path id="bat-line"
d="M 239 385 L 239 392 L ${x} 392 L ${x} 399" fill="none"
stroke="${Battery.batteryColour(data, config)}" stroke-width="${data.batLineWidth}" stroke-miterlimit="10"
Expand Down
Loading

0 comments on commit 52f3659

Please sign in to comment.