Improve UI for small capacity vehicles (#5174)

This commit is contained in:
Michael Geers 2022-11-25 17:10:24 +01:00 • committed by GitHub
parent 31965b0059
commit 037f46a10d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
12 changed files with 65 additions and 52 deletions

View file

@ -50,7 +50,7 @@
<LabelAndValue
:label="$t('main.loadpoint.power')"
:value="chargePower"
:valueFmt="fmtkWUnit"
:valueFmt="fmtPower"
class="mb-2"
align="start"
/>
@ -69,7 +69,7 @@
<LabelAndValue
v-show="socBasedCharging"
:label="$t('main.loadpoint.charged')"
:value="fmtKWh(chargedEnergy)"
:value="fmtEnergy(chargedEnergy)"
align="center"
/>
<LabelAndValue
@ -284,10 +284,14 @@ export default {
removeVehicle() {
api.delete(this.apiPath("vehicle"));
},
fmtkWUnit(value) {
fmtPower(value) {
const inKw = value == 0 || value >= 1000;
return this.fmtKw(value, inKw);
},
fmtEnergy(value) {
const inKw = value == 0 || value >= 1000;
return this.fmtKWh(value, inKw);
},
},
};
</script>

View file

@ -18,14 +18,14 @@
>
<AnimatedNumber
:to="targetEnergy"
:format="formatKWh"
:format="fmtEnergy"
:no-animation="!targetEnergy"
/>
</span>
</label>
<div v-if="estimatedTargetSoC" class="extraValue ms-0 ms-sm-1 text-nowrap">
<AnimatedNumber :to="estimatedTargetSoC" :format="formatSoC" />
<AnimatedNumber :to="estimatedTargetSoC" :format="fmtSoC" />
</div>
</h3>
</LabelAndValue>
@ -52,22 +52,22 @@ export default {
return this.vehicleCapacity || 100;
},
steps: function () {
if (this.maxEnergy < 25) {
return 1;
}
if (this.maxEnergy < 50) {
return 2;
}
if (this.maxEnergy < 1) return 0.05;
if (this.maxEnergy < 2) return 0.1;
if (this.maxEnergy < 5) return 0.25;
if (this.maxEnergy < 10) return 0.5;
if (this.maxEnergy < 25) return 1;
if (this.maxEnergy < 50) return 2;
return 5;
},
options: function () {
const result = [];
for (let energy = 0; energy <= this.maxEnergy; energy += this.steps) {
let text = this.formatKWh(energy);
let text = this.fmtEnergy(energy);
const disabled = energy < this.chargedEnergy / 1e3 && energy !== 0;
const soc = this.estimatedSoC(energy);
if (soc) {
text += ` (${this.formatSoC(soc)})`;
text += ` (${this.fmtSoC(soc)})`;
}
result.push({ energy, text, disabled });
}
@ -79,7 +79,7 @@ export default {
},
methods: {
change: function (e) {
return this.$emit("target-energy-updated", parseInt(e.target.value, 10));
return this.$emit("target-energy-updated", parseFloat(e.target.value));
},
estimatedSoC: function (kWh) {
if (this.socPerKwh) {
@ -87,13 +87,16 @@ export default {
}
return null;
},
formatKWh: function (value) {
fmtEnergy: function (value) {
if (value === 0) {
return this.$t("main.targetEnergy.noLimit");
}
return `${Math.round(value)} kWh`;
const inKWh = this.steps >= 0.1;
const digits = inKWh && this.steps < 1 ? 1 : 0;
return this.fmtKWh(value * 1e3, inKWh, true, digits);
},
formatSoC: function (value) {
fmtSoC: function (value) {
return `+${Math.round(value)}%`;
},
},

View file

@ -26,7 +26,7 @@
v-else
class="flex-grow-1"
:label="$t('main.loadpoint.charged')"
:value="fmtKWh(chargedEnergy)"
:value="fmtEnergy(chargedEnergy)"
:extraValue="chargedSoC"
align="start"
/>
@ -186,6 +186,10 @@ export default {
removeVehicle() {
this.$emit("remove-vehicle");
},
fmtEnergy(value) {
const inKw = value == 0 || value >= 1000;
return this.fmtKWh(value, inKw);
},
},
};
</script>

View file

@ -17,8 +17,10 @@ export default {
val = Math.abs(val);
return val >= this.fmtLimit ? this.round(val / 1e3, this.fmtDigits) : this.round(val, 0);
},
fmtKw: function (watt = 0, kw = true, withUnit = true) {
const digits = kw ? 1 : 0;
fmtKw: function (watt = 0, kw = true, withUnit = true, digits) {
if (digits === undefined) {
digits = kw ? 1 : 0;
}
const value = kw ? watt / 1000 : watt;
let unit = "";
if (withUnit) {
@ -30,8 +32,8 @@ export default {
maximumFractionDigits: digits,
}).format(value)}${unit}`;
},
fmtKWh: function (val) {
return this.fmtKw(val) + "h";
fmtKWh: function (watt, kw, withUnit, digits) {
return this.fmtKw(watt, kw, withUnit, digits) + "h";
},
fmtNumber: function (number, decimals) {
return new Intl.NumberFormat(this.$i18n.locale, {

View file

@ -196,7 +196,7 @@ vehicles:
type: template
template: offline
title: grüner Honda e
capacity: 26
capacity: 9
site:
title: Zuhause

View file

@ -113,7 +113,7 @@ type LoadPoint struct {
Enable, Disable ThresholdConfig
ResetOnDisconnect bool `mapstructure:"resetOnDisconnect"`
onDisconnect api.ActionConfig
targetEnergy int // Target charge energy for dumb vehicles
targetEnergy float64 // Target charge energy for dumb vehicles
MinCurrent float64 // PV mode: start current Min+PV mode: min current
MaxCurrent float64 // Max allowed current. Physically ensured by the charger
@ -1724,7 +1724,7 @@ func (lp *LoadPoint) Update(sitePower float64, cheap, batteryBuffered bool) {
}
case lp.targetEnergyReached():
lp.log.DEBUG.Printf("targetEnergy reached: %.0fkWh > %dkWh", lp.getChargedEnergy()/1e3, lp.targetEnergy)
lp.log.DEBUG.Printf("targetEnergy reached: %.0fkWh > %0.1fkWh", lp.getChargedEnergy()/1e3, lp.targetEnergy)
err = lp.disableUnlessClimater()
case lp.targetSocReached():

View file

@ -32,9 +32,9 @@ type API interface {
// SetMode sets the charge mode
SetMode(api.ChargeMode)
// GetTargetEnergy returns the charge target energy
GetTargetEnergy() int
GetTargetEnergy() float64
// SetTargetEnergy sets the charge target energy
SetTargetEnergy(int)
SetTargetEnergy(float64)
// GetTargetSoC returns the charge target soc
GetTargetSoC() int
// SetTargetSoC sets the charge target soc

View file

@ -64,14 +64,14 @@ func (lp *LoadPoint) setChargedEnergy(energy float64) {
}
// GetTargetEnergy returns loadpoint charge target energy
func (lp *LoadPoint) GetTargetEnergy() int {
func (lp *LoadPoint) GetTargetEnergy() float64 {
lp.Lock()
defer lp.Unlock()
return lp.SoC.target
return lp.targetEnergy
}
// setTargetEnergy sets loadpoint charge target energy (no mutex)
func (lp *LoadPoint) setTargetEnergy(energy int) {
func (lp *LoadPoint) setTargetEnergy(energy float64) {
lp.targetEnergy = energy
// TODO soctimer
// if lp.socTimer != nil {
@ -81,7 +81,7 @@ func (lp *LoadPoint) setTargetEnergy(energy int) {
}
// SetTargetEnergy sets loadpoint charge target energy
func (lp *LoadPoint) SetTargetEnergy(energy int) {
func (lp *LoadPoint) SetTargetEnergy(energy float64) {
lp.Lock()
defer lp.Unlock()

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

4
dist/index.html vendored
View file

@ -20,8 +20,8 @@
<meta name="theme-color" content="#020318" />
<title>evcc</title>
<script type="module" crossorigin src="./assets/index.36048902.js"></script>
<link rel="stylesheet" href="./assets/index.0150814f.css">
<script type="module" crossorigin src="./assets/index.bea554dc.js"></script>
<link rel="stylesheet" href="./assets/index.339d9da9.css">
</head>
<body>

View file

@ -113,11 +113,11 @@ func (s *HTTPd) RegisterSiteHandlers(site site.API, cache *util.Cache) {
routes := map[string]route{
"mode": {[]string{"POST", "OPTIONS"}, "/mode/{value:[a-z]+}", chargeModeHandler(lp)},
"targetenergy": {[]string{"POST", "OPTIONS"}, "/targetenergy/{value:[0-9]+}", intHandler(pass(lp.SetTargetEnergy), lp.GetTargetEnergy)},
"targetenergy": {[]string{"POST", "OPTIONS"}, "/targetenergy/{value:[0-9.]+}", floatHandler(pass(lp.SetTargetEnergy), lp.GetTargetEnergy)},
"targetsoc": {[]string{"POST", "OPTIONS"}, "/targetsoc/{value:[0-9]+}", intHandler(pass(lp.SetTargetSoC), lp.GetTargetSoC)},
"minsoc": {[]string{"POST", "OPTIONS"}, "/minsoc/{value:[0-9]+}", intHandler(pass(lp.SetMinSoC), lp.GetMinSoC)},
"mincurrent": {[]string{"POST", "OPTIONS"}, "/mincurrent/{value:[0-9]+}", floatHandler(pass(lp.SetMinCurrent), lp.GetMinCurrent)},
"maxcurrent": {[]string{"POST", "OPTIONS"}, "/maxcurrent/{value:[0-9]+}", floatHandler(pass(lp.SetMaxCurrent), lp.GetMaxCurrent)},
"mincurrent": {[]string{"POST", "OPTIONS"}, "/mincurrent/{value:[0-9.]+}", floatHandler(pass(lp.SetMinCurrent), lp.GetMinCurrent)},
"maxcurrent": {[]string{"POST", "OPTIONS"}, "/maxcurrent/{value:[0-9.]+}", floatHandler(pass(lp.SetMaxCurrent), lp.GetMaxCurrent)},
"phases": {[]string{"POST", "OPTIONS"}, "/phases/{value:[0-9]+}", phasesHandler(lp)},
"targetcharge": {[]string{"POST", "OPTIONS"}, "/targetcharge/{soc:[0-9]+}/{time:[0-9TZ:.-]+}", targetChargeHandler(lp)},
"targetcharge2": {[]string{"DELETE", "OPTIONS"}, "/targetcharge", targetChargeRemoveHandler(lp)},