Skip to content

Commit

Permalink
Merge pull request #73 from molikk/Increase-number-of-NonEssential-Lo…
Browse files Browse the repository at this point in the history 
…ad-to-6

Increase number of NonEssential Load to 6
  • Loading branch information
@molikk
molikk authored Oct 10, 2024
2 parents 2d819b5 + 943d322 commit d0b2ee7
Show file tree
Hide file tree
Showing 12 changed files with 554 additions and 411 deletions.
8 changes: 4 additions & 4 deletions dist/mlk-power-flow-card.js
View file

Large diffs are not rendered by default.

167 changes: 98 additions & 69 deletions docs/configuration.md
View file

Large diffs are not rendered by default.

10 changes: 7 additions & 3 deletions src/cards/compact-card.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,12 +65,16 @@ export const compactCard = (config: PowerFlowCardConfig, inverterImg: string, da
${Grid.generateFrequency(data)}
` : ``
}
${config.show_grid && config.grid.show_nonessential ?
svg`
${GridLoad.generateShapeAndName(data, config)}
${GridLoad.generateLoad1(data, config)}
${GridLoad.generateLoad2(data, config)}
${GridLoad.generateLoad3(data, config)}
${GridLoad.generateLoad(data, config, 1)}
${GridLoad.generateLoad(data, config, 2)}
${GridLoad.generateLoad(data, config, 3)}
${GridLoad.generateLoad(data, config, 4)}
${GridLoad.generateLoad(data, config, 5)}
${GridLoad.generateLoad(data, config, 6)}
${GridLoad.generateLines(data, config)}
${GridLoad.generateFlowLine(data, config)}
${GridLoad.generateTotalPower(data, config)}
Expand Down
20 changes: 10 additions & 10 deletions src/cards/compact/auxLoad.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,8 @@ export class AuxLoad {

return svg`
<rect x="${x}" y="139" width="70" height="30" rx="4.5" ry="4.5" fill="none"
stroke="${data.auxDynamicColour}" pointer-events="all"/>
<text id="ess_load_name" class="st16 left-align" x="${x + 3}" y="144" fill="${data.auxDynamicColour}">
stroke="${data.auxLoadMainDynamicColour}" pointer-events="all"/>
<text id="ess_load_name" class="st16 left-align" x="${x + 3}" y="144" fill="${data.auxLoadMainDynamicColour}">
${config.load.aux_name}
</text>
`;
Expand All @@ -28,12 +28,12 @@ export class AuxLoad {
return svg`
<svg id="aux-flow">
<path id="aux-line1" d="M 260 190 L 260 180 Q 260 153 287 153 L ${x} 153"
fill="none" stroke="${data.auxDynamicColour}" stroke-width="${lineWidth}"
fill="none" stroke="${data.auxLoadMainDynamicColour}" stroke-width="${lineWidth}"
stroke-miterlimit="10"
pointer-events="stroke"/>
<circle id="aux-dot1" cx="0" cy="0"
r="${Math.min(2 + lineWidth + Math.max(data.minLineWidth - 2, 0), 8)}"
fill="${Math.round(data.auxPower) == 0 ? 'transparent' : `${data.auxDynamicColour}`}">
fill="${Math.round(data.auxPower) == 0 ? 'transparent' : `${data.auxLoadMainDynamicColour}`}">
<animateMotion dur="${data.durationCur['aux']}s" repeatCount="indefinite"
keyPoints=${data.auxPower > 0 ? '0;1' : '1;0'}
keyTimes="0;1"
Expand All @@ -42,12 +42,12 @@ export class AuxLoad {
</animateMotion>
</circle>
<path id="aux-line2" d="M ${x + 70} 153 L ${x + 70 } 153 Q ${x + 70 + 27} 153 ${x + 70 + 27} 126 L ${x + 70 + 27} 46 Q ${x + 70 + 27} 39 ${x + 70 + 27 + 5} 39 L ${Load.column1 + Load.xGaps[1]} 39 "
fill="none" stroke="${data.auxDynamicColour}" stroke-width="${lineWidth}"
fill="none" stroke="${data.auxLoadMainDynamicColour}" stroke-width="${lineWidth}"
stroke-miterlimit="10"
pointer-events="stroke"/>
<circle id="aux-dot2" cx="0" cy="0"
r="${Math.min(2 + lineWidth + Math.max(data.minLineWidth - 2, 0), 8)}"
fill="${Math.round(data.auxPower) == 0 ? 'transparent' : `${data.auxDynamicColour}`}">
fill="${Math.round(data.auxPower) == 0 ? 'transparent' : `${data.auxLoadMainDynamicColour}`}">
<animateMotion dur="${data.durationCur['aux'] * 2}s" repeatCount="indefinite"
keyPoints=${data.auxPower > 0 ? '0;1' : '1;0'}
keyTimes="0;1"
Expand Down Expand Up @@ -95,13 +95,13 @@ export class AuxLoad {
svg`
<a href="#" @click=${(e) => Utils.handlePopup(e, config.stateAuxPower.entity_id)}>
<text id="aux_power" x="${x}" y="155.5" class="${data.largeFont !== true ? 'st14' : 'st4'} st8"
fill="${data.auxDynamicColour}">
fill="${data.auxLoadMainDynamicColour}">
${value}
</text>
</a>`
: svg`
<text id="aux_power" x="${x}" y="155.5" class="${data.largeFont !== true ? 'st14' : 'st4'} st8"
fill="${data.auxDynamicColour}">
fill="${data.auxLoadMainDynamicColour}">
${value}
</text>`
}
Expand All @@ -113,15 +113,15 @@ export class AuxLoad {
<a href="#" @click=${(e) => Utils.handlePopup(e, config.entities.day_aux_energy)}>
<text id="daily_load_value" x="${this.mainX + 10}" y="87"
class="st10 left-align" display="${!data.showDailyAux || !data.stateDayAuxEnergy.isValid() ? 'none' : ''}"
fill="${data.auxDynamicColour}">
fill="${data.auxLoadMainDynamicColour}">
${data.stateDayAuxEnergy?.toPowerString(true, data.decimalPlacesEnergy)}
</text>
</a>
<text id="daily_load"
x="${this.mainX + 10}"
y="100"
class="st3 left-align"
fill="${!data.showDailyAux ? 'transparent' : `${data.auxDynamicColour}`}">
fill="${!data.showDailyAux ? 'transparent' : `${data.auxLoadMainDynamicColour}`}">
${config.load?.aux_daily_name ? config.load?.aux_daily_name : localize('common.daily_aux')}
</text>
`;
Expand Down
149 changes: 80 additions & 69 deletions src/cards/compact/gridLoad.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,87 +8,87 @@ import { Load } from './load';
export class GridLoad {

private static getPositions(no: number, max: number): number {
switch (no) {
switch(max) {
case 1:
switch (max) {
return 86;
case 2:
switch(no){
case 1:
return 43;
case 2:
return 86;
}
break;
case 3:
switch(no){
case 1:
return 0;
case 2:
return 43;
case 3:
return 0;
return 86;
}
break;
case 2:
switch (max) {
case 4:
switch(no){
case 1:
return 0;
case 2:
return 86;
case 4:
return 43;
case 3:
return 86;
}
break;
case 5:
case 6:
switch(no){
case 1:
case 4:
return 0;
case 2:
case 5:
return 43;
case 3:
case 6:
return 86;
}
break;
case 3:
return 86;

}
return 0;
}


static generateLoad1(data: DataDto, config: PowerFlowCardConfig) {
const X = this.getPositions(1, config.grid.additional_loads);

return svg`${data.nonessentialLoads >= 1 ?
static generateLoad(data: DataDto, config: PowerFlowCardConfig, ID: number) {
const id = ID-1;
const X = this.getPositions(ID, config.grid.additional_loads);
const row = id < 3 ? Load.row5 : Load.row6;
return svg`${data.nonessentialLoads > id ?
svg`
${LoadUtils.generateGridLoad(1, data.iconNonessentialLoad1,
data.dynamicColourNonEssentialLoad1,
config.grid?.load1_name,
data.stateNonessentialLoad1,
data.stateNonEssentialLoad1Extra,
data.stateNonEssentialLoad1Toggle,
${LoadUtils.generateGridLoad(
id+1, data.nonessentialLoadIcon[id],
data.nonEssentialLoadDynamicColour[id],
GridLoad.nonessentialLoadName(config)[id],
data.nonessentialLoadState[id],
data.nonEssentialLoadExtraState[id],
data.nonEssentialLoadToggleState[id],
config.grid.auto_scale, data.decimalPlaces,
X, Load.row5, [11, 0, 20.5],
X, row, [11, 0, 20.5],
)}`
: svg``
}`;

}

static generateLoad2(data: DataDto, config: PowerFlowCardConfig) {
const X = this.getPositions(2, config.grid.additional_loads);

return svg`${data.nonessentialLoads >= 2 ?
svg`
${LoadUtils.generateGridLoad(2, data.iconNonessentialLoad2,
data.dynamicColourNonEssentialLoad2,
config.grid?.load2_name,
data.stateNonessentialLoad2,
data.stateNonEssentialLoad2Extra,
data.stateNonEssentialLoad2Toggle,
config.grid.auto_scale, data.decimalPlaces,
X, Load.row5, [11, 0, 20.5],
)}`
: svg``
}`;
}


static generateLoad3(data: DataDto, config: PowerFlowCardConfig) {
const X = this.getPositions(3, config.grid.additional_loads);

return svg`${data.nonessentialLoads >= 3 ?
svg`
${LoadUtils.generateGridLoad(3, data.iconNonessentialLoad3,
data.dynamicColourNonEssentialLoad3,
config.grid?.load3_name,
data.stateNonessentialLoad3,
data.stateNonEssentialLoad3Extra,
data.stateNonEssentialLoad3Toggle,
config.grid.auto_scale, data.decimalPlaces,
X, Load.row5, [11, 0, 20.5],
)}`
: svg``
}`;
static nonessentialLoadName(config: PowerFlowCardConfig){
return [
config.grid?.load1_name,
config.grid?.load2_name,
config.grid?.load3_name,
config.grid?.load4_name,
config.grid?.load5_name,
config.grid?.load6_name
];
}

private static getLines(no: number, max: number) {
Expand All @@ -100,6 +100,9 @@ export class GridLoad {
case 2:
return `M 66 328 L 66 333`;
case 3:
case 4:
case 5:
case 6:
return `M 23 328 L 23 333`;
}
break;
Expand All @@ -108,6 +111,9 @@ export class GridLoad {
case 2:
return `M 109 328L 109 333`;
case 3:
case 4:
case 5:
case 6:
return `M 66 328 L 66 333`;
}
break;
Expand All @@ -119,7 +125,7 @@ export class GridLoad {
}

static generateIcon(data: DataDto, config: PowerFlowCardConfig) {
const icon = LoadUtils.getIconWithCondition(data.nonessentialLoads >= 1, config.battery.show_battery_banks?53:68, 290, data.nonessentialIcon, 'nes-load-icon', 32);
const icon = LoadUtils.getIconWithCondition(data.nonessentialLoads >= 1, config.battery.show_battery_banks ? 53 : 68, 290, data.nonessentialIcon, 'nes-load-icon', 32);

return svg`${icon}`;

Expand All @@ -129,15 +135,15 @@ export class GridLoad {
return svg`
<path id="nes-load1" d="${this.getLines(1, config.grid.additional_loads)}"
class="${config.grid.additional_loads >= 1 ? '' : 'st12'}" fill="none"
stroke="${data.dynamicColourNonEssentialLoad1}" stroke-width="1" stroke-miterlimit="10"
stroke="${data.nonEssentialLoadDynamicColour[0]}" stroke-width="1" stroke-miterlimit="10"
pointer-events="stroke" />
<path id="nes-load2" d="${this.getLines(2, config.grid.additional_loads)}"
class="${config.grid.additional_loads >= 2 ? '' : 'st12'}" fill="none"
stroke="${data.dynamicColourNonEssentialLoad2}" stroke-width="1" stroke-miterlimit="10"
stroke="${data.nonEssentialLoadDynamicColour[1]}" stroke-width="1" stroke-miterlimit="10"
pointer-events="stroke" />
<path id="nes-load3" d="${this.getLines(3, config.grid.additional_loads)}"
class="${config.grid.additional_loads >= 3 ? '' : 'st12'}" fill="none"
stroke="${data.dynamicColourNonEssentialLoad3}" stroke-width="1" stroke-miterlimit="10"
stroke="${data.nonEssentialLoadDynamicColour[2]}" stroke-width="1" stroke-miterlimit="10"
pointer-events="stroke" />
`;
}
Expand All @@ -150,20 +156,23 @@ export class GridLoad {
case 2:
return 66;
case 3:
case 4:
case 5:
case 6:
return 23;
default:
return 135
return 135;
}
})();

const line1 = `M ${startX} 328 L 135 328 Q 140 328 140 323 L 140 320`;
return svg`
<svg id="nes-flow1">
<path id="nes-line1" d="${line1}" fill="none" stroke="${data.dynamicColourNonEssentialLoad}"
<path id="nes-line1" d="${line1}" fill="none" stroke="${data.nonEssentialLoadMainDynamicColour}"
stroke-width="${data.nonessLineWidth}" stroke-miterlimit="10" pointer-events="stroke"/>
<circle id="nes-dot1" cx="0" cy="0"
r="${Math.min(2 + data.nonessLineWidth + Math.max(data.minLineWidth - 2, 0), 8)}"
fill="${data.nonessentialLoads === 0 ? 'transparent' : `${data.dynamicColourNonEssentialLoad}`}">
fill="${data.nonessentialLoads === 0 ? 'transparent' : `${data.nonEssentialLoadMainDynamicColour}`}">
<animateMotion dur="${data.durationCur['ne']}s" repeatCount="indefinite"
keyPoints="0;1"
keyTimes="0;1" calcMode="linear">
Expand All @@ -172,11 +181,11 @@ export class GridLoad {
</circle>
</svg>
<svg id="nes-flow2">
<path id="nes-line2" d="M 140 290 L 140 234" fill="none" stroke="${data.dynamicColourNonEssentialLoad}"
<path id="nes-line2" d="M 140 290 L 140 234" fill="none" stroke="${data.nonEssentialLoadMainDynamicColour}"
stroke-width="${data.nonessLineWidth}" stroke-miterlimit="10" pointer-events="stroke"/>
<circle id="nes-dot2" cx="0" cy="0"
r="${Math.min(2 + data.nonessLineWidth + Math.max(data.minLineWidth - 2, 0), 8)}"
fill="${data.nonessentialLoads === 0 ? 'transparent' : `${data.dynamicColourNonEssentialLoad}`}">
fill="${data.nonessentialLoads === 0 ? 'transparent' : `${data.nonEssentialLoadMainDynamicColour}`}">
<animateMotion dur="${data.durationCur['ne']}s" repeatCount="indefinite"
keyPoints="0;1"
keyTimes="0;1" calcMode="linear">
Expand All @@ -189,21 +198,23 @@ export class GridLoad {

static generateShapeAndName(data: DataDto, config: PowerFlowCardConfig) {
return svg`
<rect x="${config.battery.show_battery_banks?'90':'105'}" y="290" width="70" height="30" rx="4.5" ry="4.5" fill="none"
stroke="${data.dynamicColourNonEssentialLoad}" pointer-events="all"
<rect x="${config.battery.show_battery_banks ? '90' : '105'}" y="290" width="70" height="30" rx="4.5" ry="4.5"
fill="none"
stroke="${data.nonEssentialLoadMainDynamicColour}" pointer-events="all"
display="${data.nonessentialLoads === 0 ? 'none' : ''}"/>
<text id="ess_load_name" class="st16 left-align" x="${config.battery.show_battery_banks?'93':'108'}" y="295" fill="${data.dynamicColourNonEssentialLoad}">
<text id="ess_load_name" class="st16 left-align" x="${config.battery.show_battery_banks ? '93' : '108'}" y="295"
fill="${data.nonEssentialLoadMainDynamicColour}">
${config.grid.nonessential_name}
</text>
`;
}

static generateTotalPower(data: DataDto, config: PowerFlowCardConfig) {
return svg`
<text id="nonessential_load_power" x="${config.battery.show_battery_banks?'125':'140'}" y="307"
<text id="nonessential_load_power" x="${config.battery.show_battery_banks ? '125' : '140'}" y="307"
display="${data.nonessentialLoads === 0 ? 'none' : ''}"
class="${data.largeFont !== true ? 'st14' : 'st4'} st8"
fill="${data.dynamicColourNonEssentialLoad}">
fill="${data.nonEssentialLoadMainDynamicColour}">
${config.grid.auto_scale
? Utils.convertValue(data.nonessentialPower, data.decimalPlaces) || 0
: `${data.nonessentialPower || 0} ${UnitOfPower.WATT}`
Expand Down
1 change: 1 addition & 0 deletions src/cards/compact/load.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ export class Load {
public static readonly row3: number = 185;
public static readonly row4: number = 260;
public static readonly row5: number = 335;
public static readonly row6: number = 410;
public static readonly column1: number = Load.LOAD_X - 43 - Load.GAP / 2;
public static readonly column2: number = Load.LOAD_X;
public static readonly column3: number = Load.column2 + 43 + Load.GAP / 2;
Expand Down
Loading

0 comments on commit d0b2ee7

Please sign in to comment.