diff --git a/public/css/app-main.css b/public/css/app-main.css index 6c5dd99..add23f2 100644 --- a/public/css/app-main.css +++ b/public/css/app-main.css @@ -60,6 +60,7 @@ main button { white-space: nowrap; + border: 1px dashed transparent; background-color: var(--color-accent--darker, red); color: var(--color-accent--darker-text); } diff --git a/public/css/ds3231.css b/public/css/ds3231.css new file mode 100644 index 0000000..c6ac563 --- /dev/null +++ b/public/css/ds3231.css @@ -0,0 +1,50 @@ +ds3231-config { + display: flex; + flex-direction: column; + gap: 1em; + margin-inline-end: 2em; + + & > form input[type="checkbox"] { + justify-self: start; + } + + & > form:first-child { + display: flex; + gap: 1em; + align-items: center; + } + + & > form:not(:first-child) { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 1em; + align-items: center; + + border-radius: 1em; + background-color: var(--color-accent--light, red); + /* background-color: var(--color-accent--lighter, red); */ + /* color: var(--color-accent--lighter-text, red); */ + + padding-block: 1.5em; + padding-inline: 1.5em; + } + + & > form > fieldset { + grid-column: 1 / span 2; + + display: grid; + grid-template-columns: 1fr 1fr; + gap: 1em; + align-items: center; + + padding-block: 1em; + padding-inline: 1em; + + border-radius: 1em; + + & > legend { + font-weight: bold; + padding-inline: 1ch; + } + } +} \ No newline at end of file diff --git a/public/devices-i2c/ds3231.js b/public/devices-i2c/ds3231.js index 3e8326f..b4a4d6a 100644 --- a/public/devices-i2c/ds3231.js +++ b/public/devices-i2c/ds3231.js @@ -26,50 +26,203 @@ export class DS3231Builder { signature() { } + async buildCustomView(selectionElem) { - const div = document.createElement('div') + const VIEW = ` + +
+ + + + +
+
+ + + + + + + + + + + + + + + + + +
+
+ + + + + + + + + + + + +
+ Battery Backup + + + + + + +
+
+ + ` + const node = (new DOMParser()).parseFromString(VIEW, 'text/html') + + const root = node.body.firstChild const century = 2000 - const now = new Date(Date.now()) - - { - const seconds = now.getUTCSeconds() - const minutes = now.getUTCMinutes() - const hours = now.getUTCHours() - - const date = now.getUTCDate() - const month = now.getUTCMonth() + 1 - const year = now.getUTCFullYear() - century - - // await this.#device.setStatus({ clearOscillatorStoppedFlag: true }) - // await this.#device.setTime({ - // seconds, minutes, hours, date, month, year - // }) - // await this.#device.setStatus({ oscillatorEnabled: true }) + + function refreshView(root, temp, time, control, status) { + // temperature + const temperatureOutput = root.querySelector('[data-temperature]') + temperatureOutput.value = `${temp.temperatureC} ℃` + + // time + const { year, month, date, hours, minutes, seconds } = time + const storedDate = new Date(Date.UTC( + century + year, + month - 1, + date, + hours, minutes, seconds)) + + const timeOutput = root.querySelector('[data-time]') + timeOutput.value = storedDate + + // control + const { + alarm1Enabled, + alarm2Enabled, + convertTemperatureEnabled, + squareWaveEnabled, + batteryBackupOscillatorEnabled, + batteryBackupSquareWaveEnabled, + squareWaveFrequencyKHz + } = control + + const alarm1Input = root.querySelector('input[name="enableAlarm1"]') + const alarm2Input = root.querySelector('input[name="enableAlarm2"]') + const enableSquareWaveInput = root.querySelector('input[name="enableSquareWave"]') + + const enableBatteryOscillatorInput = root.querySelector('input[name="enableBatteryOscillator"]') + const enableBatterySquareWaveInput = root.querySelector('input[name="enableBatterySquareWave"]') + + alarm1Input.checked = alarm1Enabled + alarm2Input.checked = alarm2Enabled + enableSquareWaveInput.checked = squareWaveEnabled + enableBatteryOscillatorInput.checked = batteryBackupOscillatorEnabled + enableBatterySquareWaveInput.checked = batteryBackupSquareWaveEnabled + + // status + const { + alarm1Flag, + alarm2Flag, + busyFlag, + oscillatorStoppedFlag, + output32kHzEnabled + } = status + + const alarm1Output = root.querySelector('[data-alarm1-flag]') + alarm1Output.value = alarm1Flag ? '🔔' : '🔕' + + const alarm2Output = root.querySelector('[data-alarm2-flag]') + alarm2Output.value = alarm2Flag ? '🔔' : '🔕' + + const busyOutput = root.querySelector('[data-busy-flag]') + busyOutput.value = busyFlag ? '⌛️ (true)' : '(false)' + + const oscillatorStoppedOutput = root.querySelector('[data-oscillator-stopped-flag]') + oscillatorStoppedOutput.value = oscillatorStoppedFlag ? '🛑 (true)' : '(false)' } - const temp = await this.#device.getTemperature() - div.innerText = `${temp.temperatureC} ℃` + const setTimeButton = root.querySelector('[data-set-time]') + setTimeButton.addEventListener('click', async event => { + setTimeButton.disabled = true - const time = await this.#device.getTime() + const now = new Date(Date.now()) - const { year, month, date, hours, minutes, seconds } = time + const seconds = now.getUTCSeconds() + const minutes = now.getUTCMinutes() + const hours = now.getUTCHours() - // - const storedDate = new Date(Date.UTC( - century + year, - month - 1, - date, - hours, minutes, seconds)) + const date = now.getUTCDate() + const month = now.getUTCMonth() + 1 + const year = now.getUTCFullYear() - century - console.log(storedDate) + // await this.#device.setStatus({ clearOscillatorStoppedFlag: true }) + await this.#device.setTime({ + seconds, minutes, hours, date, month, year + }) + // await this.#device.setStatus({ oscillatorEnabled: true }) - const ctrl = await this.#device.getControl() - console.log(ctrl) + const ctrl = await this.#device.getControl() + const time = await this.#device.getTime() + const status = await this.#device.getStatus() + const temp = await this.#device.getTemperature() + + refreshView(root, temp, time, ctrl, status) + + setTimeButton.disabled = false + }) + + const refreshButton = root.querySelector('[data-refresh]') + refreshButton.addEventListener('click', async event => { + event.preventDefault() + refreshButton.disabled = true + + const ctrl = await this.#device.getControl() + const time = await this.#device.getTime() + const status = await this.#device.getStatus() + const temp = await this.#device.getTemperature() + refreshView(root, temp, time, ctrl, status) + refreshButton.disabled = false + }) + + const clearButton = root.querySelector('[data-clear-all-flags]') + clearButton.addEventListener('click', async event => { + event.preventDefault() + clearButton.disabled = true + + await this.#device.setStatus({ + clearOscillatorStoppedFlag: true, + clearAlarm1: true, + clearAlarm2: true + }) + + const ctrl = await this.#device.getControl() + const time = await this.#device.getTime() + const status = await this.#device.getStatus() + const temp = await this.#device.getTemperature() + + refreshView(root, temp, time, ctrl, status) + clearButton.disabled = false + }) + + const ctrl = await this.#device.getControl() + const time = await this.#device.getTime() const status = await this.#device.getStatus() - console.log(status) + const temp = await this.#device.getTemperature() - return div + refreshView(root, temp, time, ctrl, status) + return root } } diff --git a/public/index.css b/public/index.css index 4fd3364..38c0f48 100644 --- a/public/index.css +++ b/public/index.css @@ -23,6 +23,7 @@ @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/gpio.css') layer(app);