Skip to content

<uc-log> reference

The ucLog client as one element: logs, terminal, commands, plots, device information and firmware update, connected over Web Serial, WebHID, Web Bluetooth or a hub. How to add it to a page: Embedding.

Generated from the element's source (uc-log.ts) through its Custom Elements Manifest, which the package also ships (custom-elements.json) for editors.

Attributes

Each is also a property, named in camelCase (logdata-domain: logdataDomain).

Attribute
logdata-domain Your account on the logdata service: logdata is fetched by the device's image hash from <logdata-url>/logdata/<domain>/<hash>. Not set: no service lookups.
logdata-url The logdata service (default https://fw.unitcircle.ca).
hub-url The hub the Connect dialog suggests, such as ws://localhost:9000.
panels The views, comma-separated, from log,terminal,commands,plots,device,fw-update (default: all).
layout tabs or grid (all views at once). Not set: the user's choice (settings), tabs at first.
theme auto (follows the system), light or dark. Default: auto.
storage-key The key the user's settings are stored under (local storage). Give each element on a site its own. Default: uclog.
worker-base A directory with uclog-transport-worker.js and uclog-decode-worker.js (the package's dist/workers/): load the workers from there instead of blob: URLs, for a CSP without worker-src blob:.
emit-logs Fire uc-log with each batch of decoded logs. Default: false.

Properties

Property Type
logdataToken string or undefined A token for the logdata service, if your account needs one to read logdata. A property only, never an attribute (so it is not in the page's HTML). Not set: the token the user saved in the settings, if any.

Methods

ready()

Resolves once the element has started (uc-ready). The other methods wait for it.

connect(spec)

Connect, replacing any open connection. spec: a hub (ws://host:9000, wss://…), the simulated device (loopback:, loopback:rate=20), serial, hid or ble to open the browser's chooser (call it from a click), or a SerialPort, HIDDevice or BluetoothDevice the page already has.

disconnect()

Close the connection.

send(port, data)

Send bytes or text to a device port: 61 is the terminal (end a line with \r).

loadLogdata(file)

Load logdata (an ELF or a .logdata file) for this session. A file named <image hash>.logdata is also kept in the browser's cache for later sessions.

fwUpdate(name, data)

Show the firmware update view with this image: the update starts if connected, or waits for Start. Needs the fw-update view.

showPicker()

Open the Connect dialog.

exportAll()

Save a zip of the logs (CSV), the terminal text and every plot (CSV).

Events

All bubble and are composed (they cross shadow roots).

Event
uc-ready The element has started; its methods work from now on. No detail.
uc-connect A connection opened. detail: {uri, description}.
uc-disconnect The connection closed. detail: {reason}.
uc-error A connection failed. detail: {kind, message}, kind one of busy, error, timeout.
uc-device-info The device reported its information. detail: {info, fields, appHash}: what the device sent, [name, value] pairs as the Device view shows them, and the image hash (hex) or null.
uc-log Decoded logs, in batches (only with emit-logs). detail: {records}, each {seq, ts, target, level, file, line, text, error?}: ts in seconds since the session started, level one of DEBUG, INFO, WARN, ERROR, FATAL, PANIC.
uc-token-refused The logdata service refused the token (logdataToken or the saved one), but reading without one worked. No detail.

CSS parts

Style them with uc-log::part(name).

Part
header The bar with the views and the Connect button.
tabs The views' tabs.
main The area holding the views.
panel Each view; also panel-<name>, such as panel-log.
status The status line at the bottom.
toolbar The bar at the top of the logs, the terminal and each plot.
table The log table.
terminal The terminal.
responses The command responses.
plot-tabs The plots' tabs.
plot Each plot.

CSS custom properties

Set them on the element, for example uc-log { --uc-accent: #0b6e4f; }.

Property
--uc-bg The background. Each colour has a light and a dark default; a value the page sets applies in both.
--uc-panel Bars and panels.
--uc-fg Text.
--uc-muted Secondary text.
--uc-border Borders.
--uc-accent Selection, focus and the primary buttons.
--uc-accent-fg Text on the accent colour.
--uc-button-bg Buttons.
--uc-button-hover Buttons under the pointer.
--uc-input-bg Text fields.
--uc-selection Selected rows.
--uc-term-bg The terminal's background.
--uc-error Errors.
--uc-warn Warnings.
--uc-ok Connected, success.
--uc-font The text font (default: the system's).
--uc-font-size The text size (default 13px).
--uc-mono The monospace font (logs, terminal).
--uc-radius The element's corner radius (default 8px).