diff --git a/public/css/app.css b/public/css/app.css index 3af15a9..a4d77f1 100644 --- a/public/css/app.css +++ b/public/css/app.css @@ -1,12 +1,12 @@ -@import url('app-nav.css'); -@import url('app-logo.css'); -@import url('app-aside.css'); -@import url('app-main.css'); +@import url("app-nav.css"); +@import url("app-logo.css"); +@import url("app-aside.css"); +@import url("app-main.css"); body { - font-family: 'Tahoma'; + font-family: "Tahoma"; /* font-family: fantasy; */ - /* font-family: 'Brush Script MT',cursive; */ + /* font-family: "Brush Script MT",cursive; */ } body { diff --git a/public/css/checkbox.css b/public/css/checkbox.css index 33000c0..e69de29 100644 --- a/public/css/checkbox.css +++ b/public/css/checkbox.css @@ -1,33 +0,0 @@ -tca9548-config::part(fieldset) { - border: 1px solid var(--color-accent--light, red); - border-radius: 1em; - padding-inline-start: 2em; - padding-block: 1em; - - margin-inline-end: 3em; - - display: grid; - grid-template-columns: min-content 1fr; - gap: 1em; - justify-items: start; - align-items: center; - - color: var(--color-accent--lighter-text); -} - -tca9548-config::part(title) { - font-size: 1.5em; - font-weight: bold; - - color: var(--color-accent--lighter-text); -} - - -tca9548-config::part(inputs) { - accent-color: var(--color-accent--light, red); - color: var(--color-accent--light-text, red); - - display: inline-block; - aspect-ratio: 1; - width: 1.5em; -} diff --git a/public/css/defs.css b/public/css/defs.css index d039390..a74334b 100644 --- a/public/css/defs.css +++ b/public/css/defs.css @@ -1,66 +1,66 @@ /* @property --color-accent--h { - syntax: ''; + syntax: ""; initial-value: 0; inherits: true; } @property --color-accent--s { - syntax: ''; + syntax: ""; initial-value: 50%; inherits: true; } @property --color-accent--l { - syntax: ''; + syntax: ""; initial-value: 50%; inherits: true; } @property --light-percentage { - syntax: ''; + syntax: ""; initial-value: 10%; inherits: true; } @property --lighter-percentage { - syntax: ''; + syntax: ""; initial-value: 30%; inherits: true; } @property --lightest-percentage { - syntax: ''; + syntax: ""; initial-value: 40%; inherits: true; } @property --dark-percentage { - syntax: ''; + syntax: ""; initial-value: 15%; inherits: true; } @property --darker-percentage { - syntax: ''; + syntax: ""; initial-value: 20%; inherits: true; } */ @property --color-accent { - syntax: ''; + syntax: ""; initial-value: red; inherits: true; } @property --color-white { - syntax: ''; + syntax: ""; initial-value: white; inherits: true; } @property --color-black { - syntax: ''; + syntax: ""; initial-value: black; inherits: true; } diff --git a/public/css/excamera-i2cdriver.css b/public/css/excamera-i2cdriver.css index aae0aed..6144746 100644 --- a/public/css/excamera-i2cdriver.css +++ b/public/css/excamera-i2cdriver.css @@ -4,6 +4,51 @@ excamera-i2cdriver { flex-direction: column; height: 100%; + & table { + /* display: grid; */ + + border-radius: 1em; + background-color: var(--color-accent--dark, red); + color: var(--color-accent--dark-text, red); + + border-collapse: collapse; + + & thead { + + & th { + padding-inline: 4ch; + padding-block: 1em; + + background-color: var(--color-accent--lighter, red); + color: var(--color-accent--lighter-text, red); + + &:first-child { + border-start-start-radius: 1em; + } + + &:last-child { + border-start-end-radius: 1em; + } + } + } + + & tbody { + overflow-block: scroll; + max-height: fit-content; + + + & td { + padding: 1em; + } + } + } + + & [data-for-tab="direct"] { + display: flex; + flex-direction: column; + gap: 1em; + } + & form[data-config] { display: flex; flex-grow: 1; @@ -22,6 +67,12 @@ excamera-i2cdriver { color: var(--color-accent--lighter-text, red); } + & form[data-direct] { + display: flex; + flex-direction: row; + gap: 0.5em; + } + /* & div.tabsContent select { background-color: pink; color: black; @@ -214,7 +265,7 @@ excamera-i2cdriver { color: var(--color-accent--lighter-text, red); &::after { - content: 'Z'; + content: "Z"; display: flex; } } @@ -224,7 +275,7 @@ excamera-i2cdriver { color: var(--color-accent--lighter-text, red); &::after { - content: 'Z'; + content: "Z"; display: flex; } } @@ -238,7 +289,7 @@ excamera-i2cdriver { width: 2em; height: 2em; border-radius: 1em; - content: 'S'; + content: "S"; align-items: center; justify-content: center; } @@ -254,7 +305,7 @@ excamera-i2cdriver { width: 2em; height: 2em; border-radius: 1em; - content: 'P'; + content: "P"; align-items: center; justify-content: center; } @@ -278,11 +329,11 @@ excamera-i2cdriver { } &[data-mode="read"]::before { - content: '◀'; + content: "◀"; } &[data-mode="write"]::before { - content: '▶'; + content: "▶"; } &::after { @@ -291,7 +342,7 @@ excamera-i2cdriver { bottom: 0.25em; width: 1em; height: 1em; - content: '●'; + content: "●"; color: red; } @@ -315,7 +366,7 @@ excamera-i2cdriver { bottom: 0.25em; width: 1em; height: 1em; - content: '●'; + content: "●"; color: red; } @@ -325,7 +376,7 @@ excamera-i2cdriver { bottom: 0.25em; width: 1em; height: 1em; - content: '●'; + content: "●"; color: green; } diff --git a/public/css/pcf8574.css b/public/css/pcf8574.css index 6c248a2..27cb3f7 100644 --- a/public/css/pcf8574.css +++ b/public/css/pcf8574.css @@ -2,13 +2,14 @@ pcf8574-config { display: flex; gap: 1em; align-items: start; + margin-block-start: 2em; & > form { display: grid; - grid-template-columns: 1fr 1fr 1fr; + grid-template-columns: 1fr 1fr 2fr; gap: 1em; - align-items: baseline; + align-items: center; justify-items: stretch; margin-inline-start: 1em; @@ -17,6 +18,20 @@ pcf8574-config { background-color: var(--color-accent--lightest, red); border-radius: 1em; + & input[type="checkbox"] { + accent-color: var(--color-accent--darker, red); + width: 1.25em; + height: 1.25em; + margin: 0.5em; + } + + & output[name ^= "gpio"] { + transition: transform 1s; + } + & output[name ^= "gpio"][data-high] { + + transform: translate(2em, 0); + } } diff --git a/public/css/range.css b/public/css/range.css index ca5be3c..289409f 100644 --- a/public/css/range.css +++ b/public/css/range.css @@ -20,7 +20,7 @@ input[type="number"]:where(:focus-visible, :focus) { outline-width: 5px; - /* color override isn't -text based */ + /* color override is not -text based */ background-color: var(--color-white, red); color: var(--color-black, red); /* */ diff --git a/public/css/tca9548.css b/public/css/tca9548.css new file mode 100644 index 0000000..43ceb16 --- /dev/null +++ b/public/css/tca9548.css @@ -0,0 +1,44 @@ +tca9548-config { + margin-inline-end: 2em; + + & form { + + & fieldset { + display: flex; + flex-wrap: wrap; + gap: 2em; + + padding: 1em; + padding-inline-start: 2em; + + margin-block-end: 1em; + border-radius: 1em; + border-color: var(--color-accent--darker, red); + + & label[data-nested] { + display: flex; + gap: 1em; + align-items: center; + + background-color: var(--color-accent--lightest, red); + color: var(--color-accent--lightest-text, red); + + padding: 0.5em; + padding-inline: 1em; + border-radius: 0.5em; + } + + & legend:not(:empty) { + font-weight: bold; + padding-inline: 1ch; + } + } + + & input[type="checkbox"] { + accent-color: var(--color-accent--darker, red); + width: 1.25em; + height: 1.25em; + margin: 0.5em; + } + } +} \ No newline at end of file diff --git a/public/custom-elements/capture-event.html b/public/custom-elements/capture-event.html deleted file mode 100644 index a731f98..0000000 --- a/public/custom-elements/capture-event.html +++ /dev/null @@ -1,5 +0,0 @@ - \ No newline at end of file diff --git a/public/custom-elements/capture-event.js b/public/custom-elements/capture-event.js deleted file mode 100644 index e9f5abd..0000000 --- a/public/custom-elements/capture-event.js +++ /dev/null @@ -1,41 +0,0 @@ -const OBSERVED_ATTRIBUTES = [ 'type' ] - -export class CaptureEventElement extends HTMLElement { - static get observedAttributes() { return OBSERVED_ATTRIBUTES } - - constructor() { - super() - - const shadowRoot = this.attachShadow({ mode: 'open' }) - const { content } = CaptureEventElement.template - this.shadowRoot.appendChild(content.cloneNode(true)) - } - - attributeChangedCallback(name, oldValue, newValue) { - const ceElem = this.shadowRoot.getElementById('ce') - ceElem.setAttribute('type', newValue) - - switch(newValue) { - case unknown: - case null: - break - - case 'start': break - case 'stop': break - case 'idle': break - - case '000': break - case '001': break - case '010': break - case '011': break - case '100': break - case '101': break - case '110': break - case '111': break - - default: - console.warn('unknown type', newValue) - break - } - } -} diff --git a/public/custom-elements/excamera-i2cdriver.html b/public/custom-elements/excamera-i2cdriver.html index 8f336cf..f2737eb 100644 --- a/public/custom-elements/excamera-i2cdriver.html +++ b/public/custom-elements/excamera-i2cdriver.html @@ -9,9 +9,80 @@ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
optimesizedevregisterdata
⬅00:00:0010x770x00
+ + + + + + + + + + + + + +
+ + +
+
diff --git a/public/custom-elements/pcf8574.html b/public/custom-elements/pcf8574.html new file mode 100644 index 0000000..957e81a --- /dev/null +++ b/public/custom-elements/pcf8574.html @@ -0,0 +1,42 @@ + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + \ No newline at end of file diff --git a/public/custom-elements/tca9548-config.html b/public/custom-elements/tca9548-config.html deleted file mode 100644 index a2bf523..0000000 --- a/public/custom-elements/tca9548-config.html +++ /dev/null @@ -1,29 +0,0 @@ - diff --git a/public/custom-elements/tca9548-config.js b/public/custom-elements/tca9548-config.js deleted file mode 100644 index d0ef4b3..0000000 --- a/public/custom-elements/tca9548-config.js +++ /dev/null @@ -1,63 +0,0 @@ - -export class TCA9548ConfigElement extends HTMLElement { - static get observedAttributes() { return ['channels'] } - - constructor() { - super() - - const shadowRoot = this.attachShadow({ mode: 'open' }) - const { content } = TCA9548ConfigElement.template - this.shadowRoot.appendChild(content.cloneNode(true)) - } - - attributeChangedCallback(name, oldValue, newValue) { - - } - - connectedCallback() { - - const fieldSet = this.shadowRoot.getElementById('channels') - console.log('attached', fieldSet) - - fieldSet.addEventListener('change', e => { - - fieldSet.disable = true - - const chElems = { - ch0: this.shadowRoot.getElementById('ch0'), - ch1: this.shadowRoot.getElementById('ch1'), - ch2: this.shadowRoot.getElementById('ch2'), - ch3: this.shadowRoot.getElementById('ch3'), - ch4: this.shadowRoot.getElementById('ch4'), - ch5: this.shadowRoot.getElementById('ch5'), - ch6: this.shadowRoot.getElementById('ch6'), - ch7: this.shadowRoot.getElementById('ch7'), - } - - const channelsToSet = [ - chElems.ch0.checked === true ? 0 : undefined, - chElems.ch1.checked === true ? 1 : undefined, - chElems.ch2.checked === true ? 2 : undefined, - chElems.ch3.checked === true ? 3 : undefined, - chElems.ch4.checked === true ? 4 : undefined, - chElems.ch5.checked === true ? 5 : undefined, - chElems.ch6.checked === true ? 6 : undefined, - chElems.ch7.checked === true ? 7 : undefined - ] - .filter(ch => ch !== undefined) - - console.log('change on fieldset', channelsToSet) - - const event = new Event('change') - event.channels = channelsToSet - this.dispatchEvent(event) - - fieldSet.disable = false - }) - - } - - -} - - diff --git a/public/custom-elements/tca9548.html b/public/custom-elements/tca9548.html new file mode 100644 index 0000000..4d5a0d7 --- /dev/null +++ b/public/custom-elements/tca9548.html @@ -0,0 +1,52 @@ + + + + +
+
+ Channels + + + + + + + + + + + + + + + + +
+
+ + + \ No newline at end of file diff --git a/public/devices-i2c/pcf8574.js b/public/devices-i2c/pcf8574.js index f4b5526..92d0c1c 100644 --- a/public/devices-i2c/pcf8574.js +++ b/public/devices-i2c/pcf8574.js @@ -28,57 +28,57 @@ export class PCF8574Builder { signature() { } async buildCustomView(selectionElem) { - - const root = document.createElement('pcf8574-config') - root.innerHTML = ` -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - ` + const response = await fetch('./custom-elements/pcf8574.html') + if (!response.ok) { throw new Error('no html for view') } + const view = await response.text() + const doc = (new DOMParser()).parseFromString(view, 'text/html') + + const root = doc?.querySelector('pcf8574-config') + if (root === null) { throw new Error('no root for template') } + + const pins = { + input: [ + root.querySelector('input[name="gpio0"]'), + root.querySelector('input[name="gpio1"]'), + root.querySelector('input[name="gpio2"]'), + root.querySelector('input[name="gpio3"]'), + root.querySelector('input[name="gpio4"]'), + root.querySelector('input[name="gpio5"]'), + root.querySelector('input[name="gpio6"]'), + root.querySelector('input[name="gpio7"]') + ], + output: [ + root.querySelector('output[name="gpio0out"]'), + root.querySelector('output[name="gpio1out"]'), + root.querySelector('output[name="gpio2out"]'), + root.querySelector('output[name="gpio3out"]'), + root.querySelector('output[name="gpio4out"]'), + root.querySelector('output[name="gpio5out"]'), + root.querySelector('output[name="gpio6out"]'), + root.querySelector('output[name="gpio7out"]') + ] + } const refresh = async () => { const { p0, p1, p2, p3, p4, p5, p6, p7 } = await this.#device.readPort() - root.querySelector('output[name="gpio0out"]').value = p0 ? 'High' : 'Low' - root.querySelector('output[name="gpio1out"]').value = p1 ? 'High' : 'Low' - root.querySelector('output[name="gpio2out"]').value = p2 ? 'High' : 'Low' - root.querySelector('output[name="gpio3out"]').value = p3 ? 'High' : 'Low' - root.querySelector('output[name="gpio4out"]').value = p4 ? 'High' : 'Low' - root.querySelector('output[name="gpio5out"]').value = p5 ? 'High' : 'Low' - root.querySelector('output[name="gpio6out"]').value = p6 ? 'High' : 'Low' - root.querySelector('output[name="gpio7out"]').value = p7 ? 'High' : 'Low' + pins.output[0].value = p0 ? 'High' : 'Low' + pins.output[1].value = p1 ? 'High' : 'Low' + pins.output[2].value = p2 ? 'High' : 'Low' + pins.output[3].value = p3 ? 'High' : 'Low' + pins.output[4].value = p4 ? 'High' : 'Low' + pins.output[5].value = p5 ? 'High' : 'Low' + pins.output[6].value = p6 ? 'High' : 'Low' + pins.output[7].value = p7 ? 'High' : 'Low' + + pins.output[0]?.toggleAttribute('data-high', p0) + pins.output[1]?.toggleAttribute('data-high', p1) + pins.output[2]?.toggleAttribute('data-high', p2) + pins.output[3]?.toggleAttribute('data-high', p3) + pins.output[4]?.toggleAttribute('data-high', p4) + pins.output[5]?.toggleAttribute('data-high', p5) + pins.output[6]?.toggleAttribute('data-high', p6) + pins.output[7]?.toggleAttribute('data-high', p7) } @@ -98,14 +98,14 @@ export class PCF8574Builder { console.log('event change has occurred') await this.#device.writePort({ - p0: root.querySelector('input[name="gpio0"]').checked, - p1: root.querySelector('input[name="gpio1"]').checked, - p2: root.querySelector('input[name="gpio2"]').checked, - p3: root.querySelector('input[name="gpio3"]').checked, - p4: root.querySelector('input[name="gpio4"]').checked, - p5: root.querySelector('input[name="gpio5"]').checked, - p6: root.querySelector('input[name="gpio6"]').checked, - p7: root.querySelector('input[name="gpio7"]').checked + p0: pins.input[0].checked, + p1: pins.input[1].checked, + p2: pins.input[2].checked, + p3: pins.input[3].checked, + p4: pins.input[4].checked, + p5: pins.input[5].checked, + p6: pins.input[6].checked, + p7: pins.input[7].checked }) await refresh() diff --git a/public/devices-i2c/tca9548a.js b/public/devices-i2c/tca9548a.js index 50ede99..70616f1 100644 --- a/public/devices-i2c/tca9548a.js +++ b/public/devices-i2c/tca9548a.js @@ -1,6 +1,8 @@ import { Tca9548a } from '@johntalton/tca9548a' import { I2CAddressedBus } from '@johntalton/and-other-delights' +import { asyncEvent } from '../util/async-event.js' +import { range } from '../util/range.js' export class TCA9548Builder { #abus @@ -16,10 +18,8 @@ export class TCA9548Builder { this.#abus = new I2CAddressedBus(bus, address) } - get title() { return 'TCA9548A Multiplexer' } - async open() { this.#device = await Tca9548a.from(this.#abus, {}) } @@ -29,31 +29,43 @@ export class TCA9548Builder { signature() {} async buildCustomView(selectionElem) { - const root = document.createElement('tca9548-config') + const response = await fetch('./custom-elements/tca9548.html') + if (!response.ok) { throw new Error('no html for view') } + const view = await response.text() + const doc = (new DOMParser()).parseFromString(view, 'text/html') - const initialChannels = await this.#device.getChannels() - console.log({ initialChannels }) + const root = doc?.querySelector('tca9548-config') + if (root === null) { throw new Error('no root for template') } - initialChannels.forEach(ch => { - const chElem = root.shadowRoot.getElementById(`ch${ch}`) - chElem.checked = true - }) + const allChannelInputs = root.querySelectorAll('input[name ^= "ch"]') + const refresh = async () => { + // allChannelInputs.forEach(i => i.disabled = true) - root.addEventListener('change', e => { - const { channels } = e - console.log('channel change request', channels) + const channels = await this.#device.getChannels() - Promise.resolve() - .then(async () => { + allChannelInputs.forEach(i => i.checked = false) + channels.forEach(ch => { + const chElem = root.querySelector(`input[name="ch${ch}"]`) + chElem.checked = true + }) - await this.#device.setChannels(channels) - const resultChannels = await this.#device.getChannels() - console.log({ resultChannels }) + allChannelInputs.forEach(i => i.disabled = false) + } + + root.addEventListener('change', asyncEvent(async e => { + const channels = [ ...range(0, 7) ].map(ch => { + const chElem = root.querySelector(`input[name="ch${ch}"]`) + return chElem.checked ? ch : undefined + }).filter(ch => ch !== undefined) + + await this.#device.setChannels(channels) + + await refresh() + })) - }) - }) + await refresh() return root } diff --git a/public/devices-serial/exc-i2cdriver.js b/public/devices-serial/exc-i2cdriver.js index 3843072..485b2b8 100644 --- a/public/devices-serial/exc-i2cdriver.js +++ b/public/devices-serial/exc-i2cdriver.js @@ -157,7 +157,7 @@ class RestrictiveBus { async function initScript(port) { - console.log('running i2cdriver init script') + // console.log('running i2cdriver init script') // await ExcameraLabsI2CDriver.sendRecvTextCommand(port, '@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@', new ArrayBuffer(64), 64) @@ -175,12 +175,12 @@ async function initScript(port) { // await delayMs(500) // echo some bytes to validate the connection - console.log('basic echo test for validity') + // console.log('basic echo test for validity') const echoSig = [0x55, 0x00, 0xff, 0xaa] for (let echoByte of echoSig) { // console.log('echoByte', echoByte) const result = await ExcameraLabsI2CDriver.echoByte(port, echoByte) - console.log({ echoByte, result }) + // console.log({ echoByte, result }) if(echoByte !== result) { console.warn('EchoByte miss-match')} } diff --git a/public/hydrate/elements.js b/public/hydrate/elements.js index 4a5ace1..d361483 100644 --- a/public/hydrate/elements.js +++ b/public/hydrate/elements.js @@ -2,8 +2,6 @@ import { HTMLImportElement } from '../custom-elements/html-import.js' import { I2CAddressDisplayElement } from '../custom-elements/address-display.js' import { MCP2221ConfigElement } from '../custom-elements/mcp2221-config.js' -import { CaptureEventElement } from '../custom-elements/capture-event.js' -import { TCA9548ConfigElement } from '../custom-elements/tca9548-config.js' export function hydrateCustomeElementTemplateImport(importElemId, name, konstructor) { const element = document.getElementById(importElemId) @@ -31,11 +29,9 @@ export function hydrateCustomeElementTemplateImport(importElemId, name, konstruc } export async function hydrateCustomElements() { - console.log('hydrateCustomelements') + // console.log('hydrateCustomelements') customElements.define('html-import', HTMLImportElement) - hydrateCustomeElementTemplateImport('capture-event', 'capture-event', CaptureEventElement) hydrateCustomeElementTemplateImport('addr-display', 'addr-display', I2CAddressDisplayElement) hydrateCustomeElementTemplateImport('mcp2221-config', 'mcp2221-config', MCP2221ConfigElement) - hydrateCustomeElementTemplateImport('tca9548-config', 'tca9548-config', TCA9548ConfigElement) } diff --git a/public/hydrate/ui.js b/public/hydrate/ui.js index d6d1b65..ec29266 100644 --- a/public/hydrate/ui.js +++ b/public/hydrate/ui.js @@ -138,7 +138,7 @@ export async function addSerialPort(port, signal) { // if(isExcameraLabs(info.usbVendorId, info.usbProductId)) { - console.log('adding excamera i2cdriver', port) + // console.log('adding excamera i2cdriver', port) const builder = await ExcameraI2CDriverUIBuilder.builder(port, UI_HOOKS) const demolisher = buildDeviceListItem(deviceListElem, builder) @@ -194,7 +194,7 @@ export async function addHIDDevice(hid) { export async function addI2CDevice(definition) { const deviceListElem = document.getElementById('deviceList') - console.log('i2c device to list', definition) + // console.log('i2c device to list', definition) const builder = await I2CDeviceBuilderFactory.from(definition, UI_HOOKS) const demolisher = buildDeviceListItem(deviceListElem, builder) diff --git a/public/index.css b/public/index.css index 8b5f7de..f9c18b4 100644 --- a/public/index.css +++ b/public/index.css @@ -1,39 +1,40 @@ -@import url('./css/layers.css'); -@import url('./css/defs.css') layer(defs); - -@import url('./css/addr-display.css') layer(libs); - -@import url('./css/checkbox.css') layer(libs); -@import url('./css/select.css') layer(libs); -@import url('./css/range.css') layer(libs); - -@import url('./css/ht16k33.css') layer(libs); -@import url('./css/mcp2221.css') layer(libs); -@import url('./css/adt7410.css') layer(libs); -@import url('./css/tcs34725-config.css') layer(libs); - -@import url('./css/device-list.css') layer(libs); - -@import url('./css/app.css') layer(app); -@import url('./css/tabs.css') layer(app); - -@import url('./css/excamera-i2cdriver.css') layer(app); -@import url('./css/mash-mash.css') layer(app); -@import url('./css/pcf8523.css') layer(app); -@import url('./css/eeprom.css') layer(app); -@import url('./css/adxl375.css') layer(app); -@import url('./css/aht20.css') layer(app); -@import url('./css/ds3231.css') layer(app); -@import url('./css/pca9536.css') layer(app); -@import url('./css/pcf8574.css') layer(app); -@import url('./css/aw9523.css') layer(app); -@import url('./css/mcp23.css') layer(app); -@import url('./css/ds1841.css') layer(app); -@import url('./css/ds3502.css') layer(app); - -@import url('./css/gpio.css') layer(app); - -@import url('./css/themes.css'); +@import url("./css/layers.css"); +@import url("./css/defs.css") layer(defs); + +@import url("./css/addr-display.css") layer(libs); + +@import url("./css/checkbox.css") layer(libs); +@import url("./css/select.css") layer(libs); +@import url("./css/range.css") layer(libs); + +@import url("./css/ht16k33.css") layer(libs); +@import url("./css/mcp2221.css") layer(libs); +@import url("./css/adt7410.css") layer(libs); +@import url("./css/tcs34725-config.css") layer(libs); + +@import url("./css/device-list.css") layer(libs); + +@import url("./css/app.css") layer(app); +@import url("./css/tabs.css") layer(app); + +@import url("./css/excamera-i2cdriver.css") layer(app); +@import url("./css/mash-mash.css") layer(app); +@import url("./css/pcf8523.css") layer(app); +@import url("./css/eeprom.css") layer(app); +@import url("./css/adxl375.css") layer(app); +@import url("./css/aht20.css") layer(app); +@import url("./css/ds3231.css") layer(app); +@import url("./css/pca9536.css") layer(app); +@import url("./css/pcf8574.css") layer(app); +@import url("./css/aw9523.css") layer(app); +@import url("./css/mcp23.css") layer(app); +@import url("./css/ds1841.css") layer(app); +@import url("./css/ds3502.css") layer(app); +@import url("./css/tca9548.css") layer(app); + +@import url("./css/gpio.css") layer(app); + +@import url("./css/themes.css"); @layer defs { * { diff --git a/public/index.html b/public/index.html index 594da66..a657823 100644 --- a/public/index.html +++ b/public/index.html @@ -57,9 +57,8 @@ - - +

⚙️ Web I²C Playground