A web based serial monitor for communicating with serial devices (like Arduino). The library is based on native web components and uses the WebSerial API to communicate with the external device.
npm install @tomneutens/serial_monitorhtml
Online Arduino compatible serial monitor using WebSerial
`
The serial-port-filters attribute accepts a JSON encoded array of SerialPortFilter objects.
#### Typescript
You can import the serial-monitor element for use in your lit template by importing "@tomneutens/serial_monitor".
`javascript
import "@tomneutens/serial_monitor";
/**
* @author Tom Neutens
*/
import { LitElement, html } from "lit";
import {customElement} from 'lit/decorators.js';
@customElement("test-serial")
class TestSerial extends LitElement {
constructor(){
super()
}
protected render() {
return html
}
}
declare global {
interface HTMLElementTagNameMap {
"test-serial": TestSerial;
}
}
export default TestSerial
`
I recomend bundeling your application using a tool like webpack to be able to use your component (here test-serial) in your html. These tools will perform the module resolution for your component and allow you to use it in the browser. The component will not work without bundling since browsers do not support full module resolution. This might change in the future with "import maps".
If we assume you have bundled your application into the the dist/index.js file, the following example shows how to use the component.
`html
Online Arduino compatible serial monitor using WebSerial
`
$3
The component automatically fills its container. Colors and fonts are set using the CSS variables defined by our theme:
`css
--component-foreground-color: var(--theme-foreground-color, #819F3D);
--component-foreground-color-hover: var(--theme-foreground-color-hover, #8BAB42);
--component-foreground-color-text: var(--theme-foreground-color-text, #819F3D);
--component-foreground-color-textarea-disabled: var(--theme-foreground-color-textarea-disabled, gray);
--component-foreground-color-disabled: var(--theme-disabled-foreground-color, black);
--component-foreground-color-button: var(--theme-foreground-color-button, black);
--component-background-color: var(--theme-background-color, #242424);
--component-background-color-text: var(--theme-background-color-text, #242424);
--component-background-color-button: var(--theme-background-color-button, #819F3D);
--component-background-color-disabled: var(--theme-background-color-disabled, gray);
--component-accent-color: var(--theme-accent-color, #9FBA63);
--component-accent-color-neutral: var(--theme-accent-color, #20270F);
--component-base-font-size: var(--theme-base-font-size, 1rem);
--component-base-font-family: var(--theme-base-font-family, sans-serif);
`
Override these theme settings by defining the variable prefixed with '--theme'.
`html
Online Arduino compatible serial monitor using WebSerial
``