Skip to content

Commit

Permalink
Refactor Dom text handling and add success text
Browse files Browse the repository at this point in the history
  • Loading branch information
@adrianscheit
adrianscheit committed Feb 7, 2025
1 parent 0f2efc1 commit af2f18b
Show file tree
Hide file tree
Showing 3 changed files with 83 additions and 59 deletions.
118 changes: 63 additions & 55 deletions pages/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,12 +11,16 @@
<style>
.error {
color: #b00;
background-color: #fee;
background-color: #fdd;
}

.success {
color: #0b0;
}

.send {
color: #00b;
background-color: #eef;
background-color: #ddf;
}

table {
Expand Down Expand Up @@ -60,59 +64,63 @@
Source code is avaliable here: https://github.com/adrianscheit/web-modbus
</p>
<h2 class="error"></h2>
<form name="serial">
<fieldset>
<legend>Serial connection</legend>
<label>
Modbus mode
<select name="mode" required>
<option>RTU</option>
<option>ASCII</option>
<option disabled>TCP</option>
</select>
</label>
<label>
baudRate
<input type="number" name="baudRate" list="baudRate" min="300" max="10000000" step="1" required />
<datalist id="baudRate">
<option>300</option>
<option>600</option>
<option>1200</option>
<option>2400</option>
<option>4800</option>
<option>9600</option>
<option>14400</option>
<option>19200</option>
<option>38400</option>
<option>57600</option>
<option>76800</option>
<option>115200</option>
<option>128000</option>
<option>125000</option>
<option>230400</option>
<option>250000</option>
<option>256000</option>
<option>460800</option>
<option>500000</option>
<option>921600</option>
<option>1000000</option>
<option>1500000</option>
<option>2000000</option>
<option>5000000</option>
<option>10000000</option>
</datalist>
</label>
<label>
parity
<select name="parity" required>
<option>none</option>
<option>even</option>
<option>odd</option>
</select>
</label>
<input type="submit" />
</fieldset>
</form>
<h2 class="success"></h2>
<section>
<h3>Serial connection</h3>
<form name="serial">
<fieldset>
<legend>Serial connection</legend>
<label>
Modbus mode
<select name="mode" required>
<option>RTU</option>
<option>ASCII</option>
<option disabled>TCP</option>
</select>
</label>
<label>
baudRate
<input type="number" name="baudRate" list="baudRate" min="300" max="10000000" step="1" required />
<datalist id="baudRate">
<option>300</option>
<option>600</option>
<option>1200</option>
<option>2400</option>
<option>4800</option>
<option>9600</option>
<option>14400</option>
<option>19200</option>
<option>38400</option>
<option>57600</option>
<option>76800</option>
<option>115200</option>
<option>128000</option>
<option>125000</option>
<option>230400</option>
<option>250000</option>
<option>256000</option>
<option>460800</option>
<option>500000</option>
<option>921600</option>
<option>1000000</option>
<option>1500000</option>
<option>2000000</option>
<option>5000000</option>
<option>10000000</option>
</datalist>
</label>
<label>
parity
<select name="parity" required>
<option>none</option>
<option>even</option>
<option>odd</option>
</select>
</label>
<input type="submit" />
</fieldset>
</form>
</section>
<section>
<h3>Send frame</h3>
<p>If there is already a master on the bus, this operation can cause a frame colision on the bus.</p>
Expand Down
19 changes: 16 additions & 3 deletions src/dom.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -90,6 +90,17 @@ class DomForm<T> {
}
}

class DomText {
private readonly text: Text;
constructor(element: Element) {
this.text = element.appendChild(document.createTextNode(''))
}

setText(text: string): void {
this.text.nodeValue = text;
}
}

interface ConnectionFormData {
mode: 'ASCII' | 'RTU';
baudRate: number;
Expand All @@ -105,14 +116,16 @@ interface SendFormData {
}

export class Dom {
private static readonly errorText: Text = document.querySelector('h2.error')!.appendChild(document.createTextNode(''));
private static readonly errorText = new DomText(document.querySelector('h2.error')!);
static readonly successText = new DomText(document.querySelector('h2.success')!);

static reportError(error?: any): void {
console.error(error);
const errorMessage = `Error: ${error}`;
this.errorText.nodeValue = errorMessage;
this.errorText.setText(errorMessage);
}
static clearError(): void {
this.errorText.nodeValue = ``;
this.errorText.setText(``);
}

static readonly serialForm = new DomForm<ConnectionFormData>(document.querySelector('form[name=serial]')!);
Expand Down
5 changes: 4 additions & 1 deletion src/main.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,12 +30,14 @@ const start = async (serialOptions: SerialOptions, mode: ModeStrategy) => {
try {
const serialPort: SerialPort = await serial.requestPort();
await serialPort.open(serialOptions);
Dom.successText.setText(`Connected successfully`);

send = async (bytes: number[]) => {
const rawFrame = mode.send(bytes);
const writer = serialPort.writable!.getWriter();
await writer.write(rawFrame);
writer.releaseLock();
Dom.successText.setText(`Sent successfully at ${Frame.getDateTime()}`);
}

while (serialPort.readable) {
Expand All @@ -54,12 +56,13 @@ const start = async (serialOptions: SerialOptions, mode: ModeStrategy) => {
reader.releaseLock();
}
}
send = undefined;
await serialPort.close();
} catch (e: any) {
Dom.reportError(e.message || e.toString());
} finally {
send = undefined;
Dom.serialForm.setFieldsetDisabled(false);
Dom.successText.setText(``);
}
};

Expand Down

0 comments on commit af2f18b

Please sign in to comment.