Skip to content

Commit 5eb17bc

Browse files
codingjoecodingjoe
committed
Add output values
1 parent 2a82cca commit 5eb17bc

6 files changed

Lines changed: 113 additions & 59 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.png](screenshot-2024-10-03.png)
5+
![Screenshot 2024-10-03 at 19.47.21.png](Screenshot%202024-10-03%20at%2019.47.21.png)
66

77
## Features
88

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

898 KB
Loading

‎assets/js/dp100.js‎

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -72,8 +72,8 @@ const FUNCTIONS = Object.freeze({
7272
export function DP100 (Base) {
7373
return class extends Base {
7474

75-
/** The connected DP100 device. */
7675
settingsQueue = []
76+
refreshRate = 10 // 10ms (100Hz)
7777

7878
/** Connect to the DP100 device. */
7979
async connect () {
@@ -82,7 +82,16 @@ export function DP100 (Base) {
8282
})
8383
await this.device.open()
8484
this.device.addEventListener('inputreport', this.inputReportHandler.bind(this))
85-
this.getBasicSettings().then(() => setInterval(() => this.sendReport(FUNCTIONS.BASIC_INFO), 100))
85+
this.device.addEventListener('disconnect', () => {
86+
console.warn('Device disconnected')
87+
this.device = null
88+
clearInterval(this.updateLoop)
89+
})
90+
this.getBasicSettings().then(() => {
91+
this.updateLoop = setInterval(() => {
92+
this.sendReport(FUNCTIONS.BASIC_INFO)
93+
}, this.refreshRate)
94+
})
8695
}
8796

8897
/**
@@ -111,7 +120,6 @@ export function DP100 (Base) {
111120
}
112121

113122
async getBasicSettings () {
114-
console.info('getBasicSettings')
115123
await this.sendReport(FUNCTIONS.BASIC_SET, new Uint8Array([0 | 0x80]), 0)
116124
}
117125

@@ -218,7 +226,7 @@ export function DP100 (Base) {
218226
* @param {Number} basicSettings.ocp_set - Over-current protection setting in A.
219227
*/
220228
receiveBasicSettings ({ index, state, vo_set, io_set, ovp_set, ocp_set }) {
221-
console.debug('receiveBasicSettings', { index, state, vo_set, io_set, ovp_set, ocp_set })
229+
console.info('receiveBasicSettings', { index, state, vo_set, io_set, ovp_set, ocp_set })
222230
this.settings = { state, vo_set, io_set, ovp_set, ocp_set }
223231
}
224232
}

‎assets/js/ui.js‎

Lines changed: 100 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -99,7 +99,7 @@ export class DP100Element extends DP100(LitElement) {
9999
"graph graph graph vOut" 2fr
100100
"graph graph graph iOut" 2fr
101101
"graph graph graph pOut" 1fr
102-
"mode opp vInMax info" 120px / 1fr 1fr 1fr 360px;
102+
"mode opp vInMax info" 120px / 1fr 1fr 1fr 380px;
103103
height: 100vh;
104104
}
105105
@@ -112,14 +112,17 @@ export class DP100Element extends DP100(LitElement) {
112112
grid-template:
113113
"label value-1"
114114
"label value-2" / min-content auto;
115-
gap: 1rem;
116115
padding: 1rem;
117116
118117
.label {
119118
grid-area: label;
120119
font-weight: bold;
121-
font-size: 5em;
120+
font-size: 4em;
122121
margin: auto 0;
122+
123+
sub {
124+
font-size: 2rem;
125+
}
123126
}
124127
125128
.value-1, .value-2 {
@@ -128,31 +131,55 @@ export class DP100Element extends DP100(LitElement) {
128131
}
129132
130133
.value-1 {
131-
margin: auto 0 0;
134+
margin: 0.25em 0 0;
135+
136+
input {
137+
max-width: 4em;
138+
}
132139
}
133140
134141
.value-2 {
135142
margin: 0 0 auto;
136143
}
137144
}
138145
146+
.group--big {
147+
grid-template:
148+
"label value-1"
149+
"value-2 value-2" / min-content auto;
150+
151+
.value-2 {
152+
grid-column: 1 / 3;
153+
line-height: 0;
154+
155+
input {
156+
width: 100%;
157+
}
158+
}
159+
}
160+
139161
#graph {
140162
grid-area: graph;
141163
border: thick solid CanvasText;
142164
}
165+
166+
#vOut, #iOut, #pOut {
167+
font-size: 2em;
168+
display: flex;
169+
flex-direction: column;
170+
justify-content: space-evenly;
171+
}
143172
144173
#vOut {
145174
grid-area: vOut;
146175
background-color: rgb(250 200 0 / 30%);
147176
border: thick solid rgb(250 200 0 / 100%);
148-
font-size: 2em;
149177
}
150178
151179
#iOut {
152180
grid-area: iOut;
153181
background-color: rgb(0 200 0 / 30%);
154182
border: thick solid rgb(0 200 0 / 100%);
155-
font-size: 2em;
156183
}
157184
158185
#pOut {
@@ -206,66 +233,93 @@ export class DP100Element extends DP100(LitElement) {
206233
return html`
207234
<link href="https://cdn.jsdelivr.net/npm/uplot@1.6.31/dist/uPlot.min.css" rel="stylesheet">
208235
<div id="graph"></div>
209-
<div id="vOut" class="group">
210-
<div class="label">
211-
V
236+
<div id="vOut">
237+
<div class="group">
238+
<div class="label">
239+
V<sub>out</sub>
240+
</div>
241+
<div class="value-1">
242+
${this.info?.vOut.toLocaleString(undefined, { minimumFractionDigits: 3 })}
243+
</div>
244+
<div class="value-2">
245+
</div>
212246
</div>
213-
<div class="value-1">
214-
<input type="number" name="vo_set" @change=${this.changeVoltage.bind(this)}
215-
.value=${this.settings?.vo_set} min="0"
216-
max="${this.info?.voMax}" step="0.001">
217-
</div>
218-
<div class="value-2">
219-
<input type="range" name="vo_set" @input=${this.changeVoltage.bind(this)}
220-
.value=${this.settings?.vo_set} min="0"
221-
max="${this.info?.voMax}" step="0.1">
247+
<div class="group group--big">
248+
<div class="label">
249+
V<sub>set</sub>
250+
</div>
251+
<div class="value-1">
252+
<input type="number" name="vo_set" @change=${this.changeVoltage.bind(this)}
253+
.value=${this.settings?.vo_set} min="0"
254+
max="${this.info?.voMax}" step="0.001">
255+
</div>
256+
<div class="value-2">
257+
<input type="range" name="vo_set" @input=${this.changeVoltage.bind(this)}
258+
.value=${this.settings?.vo_set} min="0"
259+
max="${this.info?.voMax}" step="0.1">
260+
</div>
222261
</div>
223262
</div>
224-
<div id="iOut" class="group">
225-
<div class="label">
226-
A
227-
</div>
228-
<div class="value-1">
229-
<input type="number" @change=${this.changeCurrent.bind(this)}
230-
.value=${this.settings?.io_set} min="0"
231-
max="5" step="0.001">
263+
<div id="iOut">
264+
<div class="group">
265+
<div class="label">
266+
A<sub>out</sub>
267+
</div>
268+
<div class="value-1">
269+
${this.info?.iOut.toLocaleString(undefined, { minimumFractionDigits: 3 })}
270+
</div>
271+
<div class="value-2">
272+
</div>
232273
</div>
233-
<div class="value-2">
234-
<input type="range" @input="${this.changeCurrent.bind(this)}"
235-
.value=${this.settings?.io_set} min="0"
236-
max="5" step="0.1">
274+
<div class="group group--big">
275+
<div class="label">
276+
A<sub>set</sub>
277+
</div>
278+
<div class="value-1">
279+
<input type="number" @change=${this.changeCurrent.bind(this)}
280+
.value=${this.settings?.io_set} min="0"
281+
max="5" step="0.001">
282+
</div>
283+
<div class="value-2">
284+
<input type="range" @input="${this.changeCurrent.bind(this)}"
285+
.value=${this.settings?.io_set} min="0"
286+
max="5" step="0.1">
287+
</div>
237288
</div>
238289
</div>
239-
<div id="pOut" class="group">
240-
<div class="label">
241-
W
242-
</div>
243-
<div class="value-1">
244-
</div>
245-
<div class="value-2">
246-
${(this.info?.iOut * this.info?.vOut).toLocaleString(undefined, { minimumFractionDigits: 3 })}
290+
<div id="pOut">
291+
<div class="group">
292+
<div class="label">
293+
W<sub>out</sub>
294+
</div>
295+
<div class="value-1">
296+
</div>
297+
<div class="value-2">
298+
${(this.info?.iOut * this.info?.vOut).toLocaleString(undefined, { minimumFractionDigits: 3 })}
299+
</div>
247300
</div>
248301
</div>
249302
<div id="mode">
250303
${this.renderMode()}
251304
</div>
252305
<div id="opp" class="group">
253-
<div class="label">OPP</div>
306+
<div class="label"></div>
254307
<div class="value-1">
255308
OVP
256-
<input type="number" @change="${this.changeOverVoltageProtection.bind(this)}"
257-
.value=${this.settings?.ovp_set} min="0" max="30" step="0.01">V
309+
${this.settings?.ovp_set.toLocaleString(undefined, { minimumFractionDigits: 3 })}&numsp;V
258310
</div>
259311
<div class="value-2">
260312
OCP
261-
<input type="number" @change="${this.changeOverCurrentProtection.bind(this)}"
262-
.value=${this.settings?.ocp_set} min="0" max="5" step="0.001">A
313+
${this.settings?.ocp_set.toLocaleString(undefined, { minimumFractionDigits: 3 })}&numsp;A
263314
</div>
264315
</div>
265316
<div id="vInMax" class="group">
266317
<div class="label">V</div>
267-
<div class="value-1">In ${this.info?.vIn.toLocaleString(undefined, { minimumFractionDigits: 3 })}&numsp;V</div>
268-
<div class="value-2">Out ${this.info?.voMax.toLocaleString(undefined, { minimumFractionDigits: 3 })}&numsp;V
318+
<div class="value-1">In
319+
${this.info?.vIn.toLocaleString(undefined, { minimumFractionDigits: 3, minimumIntegerDigits: 2 })}&numsp;V
320+
</div>
321+
<div class="value-2">Out<sub>max</sub>
322+
${this.info?.voMax.toLocaleString(undefined, { minimumFractionDigits: 3 })}&numsp;V
269323
</div>
270324
</div>
271325
<div id="info" class="group">
@@ -324,14 +378,6 @@ export class DP100Element extends DP100(LitElement) {
324378
this.setBasicSettings({ io_set: event.target.value })
325379
}
326380

327-
changeOverVoltageProtection (event) {
328-
this.setBasicSettings({ ovp_set: event.target.value })
329-
}
330-
331-
changeOverCurrentProtection (event) {
332-
this.setBasicSettings({ ocp_set: event.target.value })
333-
}
334-
335381
firstUpdated () {
336382
const graphElement = this.shadowRoot.querySelector('#graph')
337383
this.graph = new uplot({
@@ -348,7 +394,7 @@ export class DP100Element extends DP100(LitElement) {
348394
this.vHistory.push(vOut)
349395
this.iHistory.push(iOut)
350396
this.wHistory.push(vOut * iOut)
351-
if (this.vHistory.length > 360) {
397+
if (this.vHistory.length > 30 * 1000 / this.refreshRate) {
352398
this.tHistory.shift()
353399
this.vHistory.shift()
354400
this.iHistory.shift()

‎screenshot-2024-10-03.png‎

-837 KB
Binary file not shown.

‎screenshot-UI-graph.png‎

-577 KB
Binary file not shown.

0 commit comments

Comments
 (0)