Skip to content

Commit 01dad8e

Browse files
codingjoecodingjoe
committed
Add power display and reset button
1 parent b6ee0b8 commit 01dad8e

4 files changed

Lines changed: 135 additions & 79 deletions

File tree

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
A browser interface for the DP100 digital power supply by Alientek.
44

5-
![Screenshot 2024-10-03 at 19.47.21.png](Screenshot%202024-10-03%20at%2019.47.21.png)
5+
![Screenshot 2024-10-13 at 15.02.31.png](Screenshot%202024-10-13%20at%2015.02.31.png)
66

77
## Features
88

‎Screenshot 2024-10-03 at 19.47.21.png‎

-898 KB
Binary file not shown.

‎Screenshot 2024-10-13 at 15.02.31.png‎

1.41 MB
Loading

‎assets/js/ui.js‎

Lines changed: 134 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -99,23 +99,26 @@ export class DP100Element extends DP100(LitElement) {
9999
:host {
100100
display: grid;
101101
grid-template:
102-
"graph graph graph vOut" 2fr
103-
"graph graph graph iOut" 2fr
104-
"graph graph graph pOut" 1fr
105-
"mode opp vInMax info" 120px / 1fr 1fr 1fr 380px;
102+
"graph graph graph vOut vOut" 2fr
103+
"graph graph graph iOut iOut" 2fr
104+
"graph graph graph pOut pOut" 1fr
105+
"mode opp vInMax info reset" 120px / 1fr 1fr 1fr 200px 180px;
106106
height: 100vh;
107107
}
108108
109109
* {
110110
font-family: monospace;
111111
}
112+
113+
.value {
114+
font-size: 4vh;
115+
}
112116
113117
.group {
114118
display: grid;
115119
grid-template:
116120
"label value-1"
117121
"label value-2" / min-content auto;
118-
padding: 1rem;
119122
120123
.label {
121124
grid-area: label;
@@ -134,7 +137,7 @@ export class DP100Element extends DP100(LitElement) {
134137
}
135138
136139
.value-1 {
137-
margin: 0.25em 0 0;
140+
margin: auto 0 0.8em;
138141
139142
input {
140143
max-width: 4em;
@@ -150,6 +153,10 @@ export class DP100Element extends DP100(LitElement) {
150153
grid-template:
151154
"label value-1"
152155
"value-2 value-2" / min-content auto;
156+
157+
.value-1 {
158+
margin-left: -0.5em;
159+
}
153160
154161
.value-2 {
155162
grid-column: 1 / 3;
@@ -171,30 +178,52 @@ export class DP100Element extends DP100(LitElement) {
171178
display: flex;
172179
flex-direction: column;
173180
justify-content: space-evenly;
181+
padding: 0 0.5em;
174182
}
175183
176184
#vOut {
177185
grid-area: vOut;
178-
background-color: rgb(250 200 0 / 30%);
186+
background: repeating-linear-gradient(
187+
135deg,
188+
rgb(250 200 0 / 33%),
189+
rgb(250 200 0 / 67%)
190+
);
179191
border: thick solid rgb(250 200 0 / 100%);
180192
}
181193
182194
#iOut {
183195
grid-area: iOut;
184-
background-color: rgb(0 200 0 / 30%);
196+
background: repeating-linear-gradient(
197+
135deg,
198+
rgb(0 200 0 / 33%),
199+
rgb(0 200 0 / 67%)
200+
);
185201
border: thick solid rgb(0 200 0 / 100%);
186202
}
187203
188204
#pOut {
189205
grid-area: pOut;
190-
background-color: rgb(200 0 200 / 30%);
206+
background: repeating-linear-gradient(
207+
135deg,
208+
rgb(200 0 200 / 33%),
209+
rgb(200 0 200 / 67%)
210+
);
191211
border: thick solid rgb(200 0 200 / 100%);
192212
font-size: 2em;
193213
}
194-
214+
195215
#mode {
196216
grid-area: mode;
197217
}
218+
219+
#reset {
220+
grid-area: reset;
221+
}
222+
223+
#opp, #vInMax, #info {
224+
padding: 0.5em;
225+
gap: 0.5em;
226+
}
198227
199228
#opp {
200229
grid-area: opp;
@@ -219,10 +248,12 @@ export class DP100Element extends DP100(LitElement) {
219248
font-size: 1em;
220249
max-width: 4em;
221250
font-family: monospace;
251+
border-bottom: medium dotted FieldText;
252+
background-color: color-mix(in srgb, ButtonFace, transparent 50%);
222253
}
223254
224255
button {
225-
font-size: 5em;
256+
font-size: 5vw;
226257
font-weight: bold;
227258
width: 100%;
228259
height: 100%;
@@ -237,106 +268,112 @@ export class DP100Element extends DP100(LitElement) {
237268
this.vMax = 0
238269
this.iMax = 0
239270
this.pMax = 0
271+
this.energy = 0
272+
this.timer = Date.now()
240273
}
241274

242275
render () {
243276
return html`
244277
<link href="https://cdn.jsdelivr.net/npm/uplot@1.6.31/dist/uPlot.min.css" rel="stylesheet">
245278
<div id="graph"></div>
246279
<div id="vOut">
247-
<div class="group">
248-
<div class="label">
249-
V<sub>out</sub>
250-
</div>
251-
<div class="value-1">
252-
${this.info?.vOut.toLocaleString(undefined, { minimumFractionDigits: 3 })}
253-
</div>
254-
<div class="value-2">
255-
</div>
256-
</div>
257280
<div class="group group--big">
258281
<div class="label">
259-
V<sub>set</sub>
282+
<em>V</em><sub>set</sub>
260283
</div>
261284
<div class="value-1">
262285
<input type="number" name="vo_set" @change=${this.changeVoltage.bind(this)}
263286
.value=${this.settings?.vo_set} min="0"
264-
max="${this.info?.voMax}" step="0.001">
287+
max="${this.info?.voMax}" step="0.001">V
265288
</div>
266289
<div class="value-2">
267290
<input type="range" name="vo_set" @input=${this.changeVoltage.bind(this)}
268291
.value=${this.settings?.vo_set} min="0"
269292
max="${this.info?.voMax}" step="0.1">
270293
</div>
271294
</div>
272-
<div class="group">
273-
<div class="label">
274-
V<sub>max</sub>
275-
</div>
276-
<div class="value-1">
277-
${(this.vMax).toLocaleString(undefined, { minimumFractionDigits: 3 })}
278-
</div>
279-
<div class="value-2">
280-
</div>
295+
<div class="value">
296+
<strong><em>V</em></strong><sub>out</sub>
297+
${this.info?.vOut.toLocaleString(undefined, {
298+
minimumFractionDigits: 3,
299+
minimumIntegerDigits: 2,
300+
useGrouping: false
301+
})}
302+
V
303+
</div>
304+
<div class="value">
305+
<strong><em>V</em></strong><sub>max</sub>
306+
${(this.vMax).toLocaleString(undefined, {
307+
minimumFractionDigits: 3,
308+
minimumIntegerDigits: 2,
309+
useGrouping: false
310+
})}
311+
V
281312
</div>
282313
</div>
283314
<div id="iOut">
284-
<div class="group">
285-
<div class="label">
286-
A<sub>out</sub>
287-
</div>
288-
<div class="value-1">
289-
${this.info?.iOut.toLocaleString(undefined, { minimumFractionDigits: 3 })}
290-
</div>
291-
<div class="value-2">
292-
</div>
293-
</div>
294315
<div class="group group--big">
295316
<div class="label">
296-
A<sub>set</sub>
317+
<em>I</em><sub>set</sub>
297318
</div>
298319
<div class="value-1">
299320
<input type="number" @change=${this.changeCurrent.bind(this)}
300321
.value=${this.settings?.io_set} min="0"
301-
max="5" step="0.001">
322+
max="5" step="0.001">A
302323
</div>
303324
<div class="value-2">
304325
<input type="range" @input="${this.changeCurrent.bind(this)}"
305326
.value=${this.settings?.io_set} min="0"
306327
max="5" step="0.1">
307328
</div>
308329
</div>
309-
<div class="group">
310-
<div class="label">
311-
A<sub>max</sub>
312-
</div>
313-
<div class="value-1">
314-
${(this.iMax).toLocaleString(undefined, { minimumFractionDigits: 3 })}
315-
</div>
316-
<div class="value-2">
317-
</div>
330+
<div class="value">
331+
<strong><em>I</em></strong><sub>out</sub>
332+
${this.info?.iOut.toLocaleString(undefined, {
333+
minimumFractionDigits: 3,
334+
minimumIntegerDigits: 2,
335+
useGrouping: false
336+
})}
337+
A
338+
</div>
339+
<div class="value">
340+
<strong><em>I</em></strong><sub>max</sub>
341+
${(this.iMax).toLocaleString(undefined, {
342+
minimumFractionDigits: 3,
343+
minimumIntegerDigits: 2,
344+
useGrouping: false
345+
})}
346+
A
318347
</div>
319348
</div>
320349
<div id="pOut">
321-
<div class="group">
322-
<div class="label">
323-
W<sub>out</sub>
324-
</div>
325-
<div class="value-1">
326-
${(this.info?.iOut * this.info?.vOut).toLocaleString(undefined, { minimumFractionDigits: 3 })}
327-
</div>
328-
<div class="value-2">
329-
</div>
350+
<div class="value">
351+
<strong><em>P</em></strong><sub>out</sub>
352+
${(this.info?.iOut * this.info?.vOut).toLocaleString(undefined, {
353+
minimumFractionDigits: 3,
354+
minimumIntegerDigits: 2,
355+
useGrouping: false
356+
})}
357+
W
330358
</div>
331-
<div class="group">
332-
<div class="label">
333-
W<sub>max</sub>
334-
</div>
335-
<div class="value-1">
336-
${(this.pMax).toLocaleString(undefined, { minimumFractionDigits: 3 })}
337-
</div>
338-
<div class="value-2">
339-
</div>
359+
<div class="value">
360+
<strong><em>P</em></strong><sub>max</sub>
361+
${(this.pMax).toLocaleString(undefined, {
362+
minimumFractionDigits: 3,
363+
minimumIntegerDigits: 2,
364+
useGrouping: false
365+
})}
366+
W
367+
</div>
368+
<div class="value">
369+
<strong><em>E</em></strong><sub>out</sub>
370+
${(this.energy).toLocaleString(undefined, {
371+
minimumFractionDigits: 4,
372+
maximumFractionDigits: 4,
373+
minimumIntegerDigits: 1,
374+
useGrouping: false
375+
})}
376+
Wh
340377
</div>
341378
</div>
342379
<div id="mode">
@@ -345,34 +382,43 @@ export class DP100Element extends DP100(LitElement) {
345382
<div id="opp" class="group">
346383
<div class="label">OPP</div>
347384
<div class="value-1">
348-
V
385+
OVP
349386
<input type="number" @change=${this.changeOverVoltageProtection.bind(this)}
350387
.value=${this.settings?.ovp_set} min="0"
351388
max="30.5" step="0.01">
389+
V
352390
</div>
353391
<div class="value-2">
354-
A
392+
OCP
355393
<input type="number" @change=${this.changeOverCurrentProtection.bind(this)}
356394
.value=${this.settings?.ocp_set} min="0"
357395
max="5.05" step="0.001">
396+
A
358397
</div>
359398
</div>
360399
<div id="vInMax" class="group">
361-
<div class="label">V</div>
362-
<div class="value-1">In
400+
<div class="label"><em>V</em></div>
401+
<div class="value-1">in
363402
${this.info?.vIn.toLocaleString(undefined, { minimumFractionDigits: 3, minimumIntegerDigits: 2 })}&numsp;V
364403
</div>
365-
<div class="value-2">Out<sub>max</sub>
404+
<div class="value-2">maxOut
366405
${this.info?.voMax.toLocaleString(undefined, { minimumFractionDigits: 3 })}&numsp;V
367406
</div>
368407
</div>
369408
<div id="info" class="group">
370409
<div class="label">T</div>
371-
<div class="value-1">T<sub>1</sub> ${this.info?.temp1.toLocaleString(undefined, { minimumFractionDigits: 1 })}&numsp;°C
410+
<div class="value-1">
411+
${this.info?.temp1.toLocaleString(undefined, { minimumFractionDigits: 1 })}
412+
°C
372413
</div>
373-
<div class="value-2">T<sub>2</sub> ${this.info?.temp2.toLocaleString(undefined, { minimumFractionDigits: 1 })}&numsp;°C
414+
<div class="value-2">
415+
${this.info?.temp2.toLocaleString(undefined, { minimumFractionDigits: 1 })}
416+
°C
374417
</div>
375418
</div>
419+
<div id="reset">
420+
<button @click=${this.reset.bind(this)}>RST</button>
421+
</div>
376422
`
377423
}
378424

@@ -430,6 +476,14 @@ export class DP100Element extends DP100(LitElement) {
430476
this.setBasicSettings({ ocp_set: event.target.value })
431477
}
432478

479+
reset () {
480+
this.energy = 0
481+
this.timer = Date.now()
482+
this.vMax = 0
483+
this.iMax = 0
484+
this.pMax = 0
485+
}
486+
433487
firstUpdated () {
434488
const graphElement = this.shadowRoot.querySelector('#graph')
435489
this.graph = new uplot({
@@ -445,6 +499,8 @@ export class DP100Element extends DP100(LitElement) {
445499
this.vMax = vOut > this.vMax ? vOut : this.vMax
446500
this.iMax = iOut > this.iMax ? iOut : this.iMax
447501
this.pMax = vOut * iOut > this.pMax ? vOut * iOut : this.pMax
502+
this.energy += vOut * iOut * (Date.now() - this.timer) / 1000 / 3600
503+
this.timer = Date.now()
448504

449505
this.tHistory.push(Date.now() / 1000) // uplot uses seconds
450506
this.vHistory.push(vOut)

0 commit comments

Comments
 (0)