Skip to content

Commit

Permalink
feat: update visual editor and documentation
Browse files Browse the repository at this point in the history
  • Loading branch information
@slipx06
slipx06 committed Nov 15, 2024
1 parent 4ac794e commit ead27b4
Show file tree
Hide file tree
Showing 18 changed files with 110 additions and 9 deletions.
17 changes: 14 additions & 3 deletions docs/configuration.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ The card can be configured through the following attributes:
| cardstyle: | **Required** | `lite` | Selects the card layout that is used `compact`, `lite` or `full`. |
| panel_mode: | Optional | `false` | Toggles panel mode setting card height to `100%`. For use with Panel(1 card) view types or grid layouts. |
| large_font: | Optional | `false` | Increases font size of sensor data. |
| wide: | Optional | `false` | Display the card content for wide screen format (16:9). |
| title: | Optional | | Set the card title i.e. Inverter One. |
| title_colour: | Optional | | Sets the colour of the card title. (`red`, `green`, `blue` etc). |
| title_size: | Optional | `32px` | Set the font size for the card title i.e. `16px`, `24px`. |
Expand Down Expand Up @@ -128,15 +129,19 @@ These attributes are only needed if `show_solar` is set to `true`.
| aux_load1_icon: | Optional | | Set the AUX load 1 image using any mdi icon e.g. `mdi:ev-station`. You can also provide a sensor that returns the mdi icon.
| aux_load2_icon: | Optional | | Set the AUX load 2 image using any mdi icon e.g. `mdi:ev-station`. You can also provide a sensor that returns the mdi icon.
| essential_name: | Optional | `Essential` | Set the display name for the essential load.
| additional_loads: | Optional | `0` | Display additional loads on the essential side (`0/1/2/3/4`). Three loads will only be visable when using the lite and compact card. Four loads are only visable on the full card if `show_aux: false`.
| additional_loads: | Optional | `0` | Display additional loads on the essential side (`0/1/2/3/4/5/6`). Three loads will only be visable when using the lite and compact card. Four loads are only visable on the full card if `show_aux: false`. Up to six loads can be displayed if using the wide screen display mode.
| load1_name: | Optional | | Set the display name for the essential load 1.
| load2_name: | Optional | | Set the display name for the essential load 2.
| load3_name: | Optional | | Set the display name for the essential load 3 (Lite/compact card only).
| load4_name: | Optional | | Set the display name for the essential load 4.
| load5_name: | Optional | | Set the display name for the essential load 5.
| load6_name: | Optional | | Set the display name for the essential load 6.
| load1_icon: | Optional | none | Set the essential load 1 image using preset or any mdi icon e.g. `mdi:ev-station` Presets are: `boiler`, `pump`, `aircon`, `oven`. You can also provide a sensor that returns the mdi icon. |
| load2_icon: | Optional | none | Set the essential load 2 image using preset or any mdi icon e.g. `mdi:ev-station` Presets are: `boiler`, `pump`, `aircon`, `oven`. You can also provide a sensor that returns the mdi icon. |
| load3_icon: | Optional | none | Set the essential load 3 image using any mdi icon e.g. `mdi:ev-station` Presets are not available when showing 4 essential loads. You can also provide a sensor that returns the mdi icon. |
| load4_icon: | Optional | none | Set the essential load 4 image using any mdi icon e.g. `mdi:ev-station` Presets are not available when showing 4 essential loads. You can also provide a sensor that returns the mdi icon. |
| load3_icon: | Optional | none | Set the essential load 3 image using any mdi icon e.g. `mdi:ev-station` Presets are not available when showing 4 or more essential loads. You can also provide a sensor that returns the mdi icon. |
| load4_icon: | Optional | none | Set the essential load 4 image using any mdi icon e.g. `mdi:ev-station` Presets are not available when showing 4 or more essential loads. You can also provide a sensor that returns the mdi icon. |
| load5_icon: | Optional | none | Set the essential load 5 image using any mdi icon e.g. `mdi:ev-station` Presets are not available when showing 4 or more essential loads. You can also provide a sensor that returns the mdi icon. |
| load6_icon: | Optional | none | Set the essential load 6 image using any mdi icon e.g. `mdi:ev-station` Presets are not available when showing 4 or more essential loads. You can also provide a sensor that returns the mdi icon. |
| auto_scale: | Optional | `true` | If set to `true` the card will use the entities `unit_of_measurement` attribute to perform the correct scaling (i,e, power values greater than 999W will be displayed as kW e.g. 1.23kW) and display the correct unit. The number of decimal places can be changed using the `decimal_places` card attribute apart from the daily energy values which are set using the `decimal_places_energy` attribute. |
| off_threshold: | Optional | `0` | When power falls below this value the load will be considered off and colour will change to grey. Requires `dynamic_colour` to be enabled. Can also be set to `-1` to disable. |
| path_threshold: | Optional | `100` | Specify threshold to apply dynamic colour to the load path element. The colour of the path will change to the source colour if the percentage supply by a single source equals or exceeds this value.
Expand Down Expand Up @@ -229,8 +234,14 @@ mappings if using other integration methods.
| essential_load2: | Optional | | Sensor that contains the power of your essential load 2 (W). Can also be used to display any sensor data i.e. temp, energy etc if `auto_scale: false`. |
| essential_load3: | Optional | | Sensor that contains the power of your essential load 3 (W). Can also be used to display any sensor data i.e. temp, energy etc if `auto_scale: false` For lite and compact cards. |
| essential_load4: | Optional | | Sensor that contains the power of your essential load 4 (W). Can also be used to display any sensor data i.e. temp, energy etc if `auto_scale: false`. |
| essential_load5: | Optional | | Sensor that contains the power of your essential load 5 (W). Can also be used to display any sensor data i.e. temp, energy etc if `auto_scale: false`. |
| essential_load6: | Optional | | Sensor that contains the power of your essential load 6 (W). Can also be used to display any sensor data i.e. temp, energy etc if `auto_scale: false`. |
| essential_load1_extra: | Optional | | Sensor that contains additional information you want displayed for your essential load 1 e.g. Daily kWh, Temperature etc.
| essential_load2_extra: | Optional | | Sensor that contains additional information you want displayed for your essential load 2 e.g. Daily kWh, Temperature etc.
| essential_load3_extra: | Optional | | Sensor that contains additional information you want displayed for your essential load 3 e.g. Daily kWh, Temperature etc.
| essential_load4_extra: | Optional | | Sensor that contains additional information you want displayed for your essential load 4 e.g. Daily kWh, Temperature etc.
| essential_load5_extra: | Optional | | Sensor that contains additional information you want displayed for your essential load 5 e.g. Daily kWh, Temperature etc.
| essential_load6_extra: | Optional | | Sensor that contains additional information you want displayed for your essential load 6 e.g. Daily kWh, Temperature etc.
| load_power_L1: | Optional | | Load L1 Power (W).
| load_power_L2: | Optional | | Load L2 Power (W).
| load_power_L3: | Optional | | Load L3 Power (W).
Expand Down
10 changes: 5 additions & 5 deletions src/cards/compact-card.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,7 @@ export const compactCard = (config: sunsynkPowerFlowCardConfig, inverterImg: str
xmlns:xlink="http://www.w3.org/1999/xlink"> -->
<!-- Solar Elements -->
<svg id="Solar" style="overflow: visible" x="${config.wide ? '5%' : '0%'}" >
<svg id="Solar" style="overflow: visible" x="${config.wide ? '10%' : '0%'}" >
<svg id="pvtotal" x="205" y="116.5" width="70" height="30"
viewBox="0 0 70 30" overflow="visible">
<rect width="70" height="30" rx="4.5" ry="4.5" fill="none"
Expand Down Expand Up @@ -484,7 +484,7 @@ export const compactCard = (config: sunsynkPowerFlowCardConfig, inverterImg: str
</svg>
<!-- Battery Elements -->
<svg id="Battery" style="overflow: visible" x="${config.wide ? '5%' : '0%'}">
<svg id="Battery" style="overflow: visible" x="${config.wide ? '10%' : '0%'}">
<rect x="205" y="290" width="70" height="30" rx="4.5" ry="4.5" fill="none"
stroke="${data.batteryColour}" pointer-events="all"
display="${!config.show_battery ? 'none' : ''}"
Expand Down Expand Up @@ -820,7 +820,7 @@ export const compactCard = (config: sunsynkPowerFlowCardConfig, inverterImg: str
${config.grid.grid_name || localize('common.grid_name')}
</text>
<svg id="grid-flow">
<path id="grid-line" d="${config.wide ? 'M 173 218 L 250 218': 'M 173 218 L 214 218'} fill="none" stroke="${data.gridColour}"
<path id="grid-line" d="${config.wide ? 'M 173 218 L 287 218': 'M 173 218 L 214 218'} fill="none" stroke="${data.gridColour}"
stroke-width="${data.gridLineWidth}" stroke-miterlimit="10" pointer-events="stroke"
display="${!config.show_grid ? 'none' : ''}"/>
<circle id="grid-dot" cx="0" cy="0"
Expand Down Expand Up @@ -1462,7 +1462,7 @@ export const compactCard = (config: sunsynkPowerFlowCardConfig, inverterImg: str
${config.load.auto_scale ? `${Utils.convertValue(data.loadPowerL3, data.decimalPlaces) || 0}` : `${data.loadPowerL3 || 0} ${UnitOfPower.WATT}`}
</text>
<svg id="load-flow">
<path id="es-line" d="${config.wide ? 'M 304 218.5 L 80 218.5': 'M 304 218.5 L 264.7 218.5'}" fill="none" stroke="${config.load.dynamic_colour ? data.flowColour : data.loadColour}"
<path id="es-line" d="${config.wide ? 'M 304 218.5 L 117 218.5': 'M 304 218.5 L 264.7 218.5'}" fill="none" stroke="${config.load.dynamic_colour ? data.flowColour : data.loadColour}"
stroke-width="${data.loadLineWidth}" stroke-miterlimit="10" pointer-events="stroke"/>
<circle id="es-dot" cx="0" cy="0"
r="${Math.min(2 + data.loadLineWidth + Math.max(data.minLineWidth - 2, 0), 8)}"
Expand Down Expand Up @@ -1594,7 +1594,7 @@ export const compactCard = (config: sunsynkPowerFlowCardConfig, inverterImg: str
</svg>
<!-- Inverter Elements -->
<svg id="Inverter" style="overflow: visible" x="${config.wide ? '5%' : '0%'}">
<svg id="Inverter" style="overflow: visible" x="${config.wide ? '10%' : '0%'}">
<text id="autarkye_value" x="127" y="260"
display="${data.enableAutarky === AutarkyType.No ? 'none' : ''}"
class="${data.enableAutarky === AutarkyType.Energy ? 'st4 st8 left-align' : 'st12'}"
Expand Down
Loading

0 comments on commit ead27b4

Please sign in to comment.