Skip to content

Commit

Permalink
getPort optimization, badging and cleanup 🏴‍☠️
Browse files Browse the repository at this point in the history
  • Loading branch information
@johntalton
johntalton committed May 24, 2024
1 parent 954d91b commit abaf39a
Show file tree
Hide file tree
Showing 8 changed files with 299 additions and 98 deletions.
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
"@johntalton/bitsmush": "^1.0.1",
"@johntalton/boschieu": "^6.0.1",
"@johntalton/ds1841": "^1.0.1",
"@johntalton/ds3231": "^1.0.1",
"@johntalton/ds3231": "^1.1.0",
"@johntalton/ds3502": "^4.0.0",
"@johntalton/excamera-i2cdriver": "^1.0.0",
"@johntalton/ht16k33": "^1.0.3",
Expand Down
4 changes: 4 additions & 0 deletions public/css/ds3231.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,10 @@ ds3231-config {

& > form input[type="checkbox"] {
justify-self: start;
accent-color: var(--color-accent--darker, red);
width: 1.25em;
height: 1.25em;
margin: 0.5em;
}

& > form[data-output] {
Expand Down
54 changes: 54 additions & 0 deletions public/css/mcp23.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,37 @@ mcp23-config {



& :has([data-badge]) {
position: relative;
display: grid;

& > * {
grid-column: 1 / -1;
grid-row: 1 / -1;
}
}

& [data-badge] {
align-self: center;
justify-self: end;
margin-inline-end: 1em;

width: 1em;
height: 1em;
border-radius: 0.5em;

--percent-accent: 0;
--max-accent: 0.5em;
--lerp-value: clamp(
0px,
calc(var(--percent-accent) / 100.0 * var(--max-accent)),
var(--max-accent));
border: var(--lerp-value) solid var(--color-accent--light, red);

transition: border-width 500ms;
}



& div[data-port] {
display: flex;
Expand Down Expand Up @@ -58,6 +89,10 @@ mcp23-config {
background-color: var(--color-accent--darker, red);
color: var(--color-accent--darker-text, red);
text-decoration: underline;

& ~ [data-badge] {
border-color: var(--color-accent--lighter, red);
}
}

&[data-active]:not(:hover) {
Expand Down Expand Up @@ -116,6 +151,17 @@ mcp23-config {
}


& form[data-refresh] {
display: flex;
flex-direction: row;
margin-block-end: 2em;
gap: 2em;

& progress {
accent-color: var(--color-accent--darker, red);
}
}

& form[data-status] {
display: flex;
flex-direction: row;
Expand All @@ -132,6 +178,14 @@ mcp23-config {
& output[data-flag="false"] {
visibility: hidden;
}

& output:where([name ^= "portApin"], [name ^= "portBpin"]) {
justify-self: end;
}

& output:where([name ^= "portApin"], [name ^= "portBpin"])[data-high] {
justify-self: start;
}
}
}
}
4 changes: 2 additions & 2 deletions public/custom-elements/ds3231.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@

<form data-active data-for-tab="actions" data-actions class="tabsContent">
<button data-set-time>Set Now</button>
<button data-trigger-temperature>Trigger Temperature Conversion</button>
<button disabled data-trigger-temperature>Trigger Temperature Conversion</button>
<button data-refresh>Refresh</button>
<button data-clear-all-flags>Clear Flags</button>
</form>
Expand All @@ -34,7 +34,7 @@
<input name="enableSquareWave" type="checkbox" />

<label>Square Wave Frequency</label>
<select name="squareWaveFrequency" disabled>
<select name="squareWaveFrequency">
<option value="1">1</option>
<option value="1.024">1.024</option>
<option value="4.096">4.096</option>
Expand Down
143 changes: 78 additions & 65 deletions public/custom-elements/mcp23.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,14 +65,14 @@

<div data-port data-for-tab="portAB" class="tabsContent">
<ul>
<li><button data-gpio="0" data-active>Gpio 0</button></li>
<li><button data-gpio="1">Gpio 1</button></li>
<li><button data-gpio="2">Gpio 2</button></li>
<li><button data-gpio="3">Gpio 3</button></li>
<li><button data-gpio="4">Gpio 4</button></li>
<li><button data-gpio="5">Gpio 5</button></li>
<li><button data-gpio="6">Gpio 6</button></li>
<li><button data-gpio="7">Gpio 7</button></li>
<li><button data-gpio="0">Gpio 0</button><div data-badge></div></li>
<li><button data-gpio="1">Gpio 1</button><div data-badge></div></li>
<li><button data-gpio="2">Gpio 2</button><div data-badge></div></li>
<li><button data-gpio="3">Gpio 3</button><div data-badge></div></li>
<li><button data-gpio="4">Gpio 4</button><div data-badge></div></li>
<li><button data-gpio="5">Gpio 5</button><div data-badge></div></li>
<li><button data-gpio="6">Gpio 6</button><div data-badge></div></li>
<li><button data-gpio="7">Gpio 7</button><div data-badge></div></li>
</ul>

<div data-loader>
Expand Down Expand Up @@ -124,80 +124,93 @@
</form>
</div>

<form data-status data-for-tab="status" class="tabsContent">
<button data-refresh="30">Refresh</button>
<div data-for-tab="status" class="tabsContent">
<form data-refresh>
<button data-refresh>Refresh</button>
<select name="refreshRate">
<option value="once">Once</option>
<option value="10">10 sec</option>
<option value="30">30 sec</option>
<option value="60">1 min</option>
<option value="900">15 min</option>
</select>
<output name="counter"></output>
<progress name="progress" max="100" value="0" disabled></progress>
</form>

<fieldset data-port="A">
<legend>Port A</legend>
<form data-status>
<fieldset data-port="A">
<legend>Port A</legend>

<label>Gpio 0</label>
<output name="portApin0"></output>
<output name="portApin0Capture"></output>
<label>Gpio 0</label>
<output port="A" pin="0" name="portApin0"></output>
<output port="A" pin="0" name="portApin0Capture"></output>

<label>Gpio 1</label>
<output name="portApin1"></output>
<output name="portApin1Capture"></output>
<label>Gpio 1</label>
<output port="A" pin="1" name="portApin1"></output>
<output port="A" pin="1" name="portApin1Capture"></output>

<label>Gpio 2</label>
<output name="portApin2"></output>
<output name="portApin2Capture"></output>
<label>Gpio 2</label>
<output port="A" pin="2" name="portApin2"></output>
<output port="A" pin="2" name="portApin2Capture"></output>

<label>Gpio 3</label>
<output name="portApin3"></output>
<output name="portApin3Capture"></output>
<label>Gpio 3</label>
<output port="A" pin="3" name="portApin3"></output>
<output port="A" pin="3" name="portApin3Capture"></output>

<label>Gpio 4</label>
<output name="portApin4"></output>
<output name="portApin4Capture"></output>
<label>Gpio 4</label>
<output port="A" pin="4" name="portApin4"></output>
<output port="A" pin="4" name="portApin4Capture"></output>

<label>Gpio 5</label>
<output name="portApin5"></output>
<output name="portApin5Capture"></output>
<label>Gpio 5</label>
<output port="A" pin="5" name="portApin5"></output>
<output port="A" pin="5" name="portApin5Capture"></output>

<label>Gpio 6</label>
<output name="portApin6"></output>
<output name="portApin6Capture"></output>
<label>Gpio 6</label>
<output port="A" pin="6" name="portApin6"></output>
<output port="A" pin="6" name="portApin6Capture"></output>

<label>Gpio 7</label>
<output name="portApin7"></output>
<output name="portApin7Capture"></output>
</fieldset>
<fieldset data-port="B">
<legend>Port B</legend>
<label>Gpio 7</label>
<output port="A" pin="7" name="portApin7"></output>
<output port="A" pin="7" name="portApin7Capture"></output>
</fieldset>
<fieldset data-port="B">
<legend>Port B</legend>

<label>Gpio 0</label>
<output name="portBpin0"></output>
<output name="portBpin0Capture"></output>
<label>Gpio 0</label>
<output port="B" pin="0" name="portBpin0"></output>
<output port="B" pin="0" name="portBpin0Capture"></output>

<label>Gpio 1</label>
<output name="portBpin1"></output>
<output name="portBpin1Capture"></output>
<label>Gpio 1</label>
<output port="B" pin="1" name="portBpin1"></output>
<output port="B" pin="1" name="portBpin1Capture"></output>

<label>Gpio 2</label>
<output name="portBpin2"></output>
<output name="portBpin2Capture"></output>
<label>Gpio 2</label>
<output port="B" pin="2" name="portBpin2"></output>
<output port="B" pin="2" name="portBpin2Capture"></output>

<label>Gpio 3</label>
<output name="portBpin3"></output>
<output name="portBpin3Capture"></output>
<label>Gpio 3</label>
<output port="B" pin="3" name="portBpin3"></output>
<output port="B" pin="3" name="portBpin3Capture"></output>

<label>Gpio 4</label>
<output name="portBpin4"></output>
<output name="portBpin4Capture"></output>
<label>Gpio 4</label>
<output port="B" pin="4" name="portBpin4"></output>
<output port="B" pin="4" name="portBpin4Capture"></output>

<label>Gpio 5</label>
<output name="portBpin5"></output>
<output name="portBpin5Capture"></output>
<label>Gpio 5</label>
<output port="B" pin="5" name="portBpin5"></output>
<output port="B" pin="5" name="portBpin5Capture"></output>

<label>Gpio 6</label>
<output name="portBpin6"></output>
<output name="portBpin6Capture"></output>
<label>Gpio 6</label>
<output port="B" pin="6" name="portBpin6"></output>
<output port="B" pin="6" name="portBpin6Capture"></output>

<label>Gpio 7</label>
<output name="portBpin7"></output>
<output name="portBpin7Capture"></output>
</fieldset>
</form>
<label>Gpio 7</label>
<output port="B" pin="7" name="portBpin7"></output>
<output port="B" pin="7" name="portBpin7Capture"></output>
</fieldset>
</form>
</div>

</mcp23-config>
</body>
Expand Down
23 changes: 20 additions & 3 deletions public/devices-i2c/ds3231.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -84,15 +84,16 @@ export class DS3231Builder {
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"]')
const squareWaveFrequencySelect = root.querySelector('select[name="squareWaveFrequency"]')

alarm1Input.checked = alarm1Enabled
alarm2Input.checked = alarm2Enabled
enableSquareWaveInput.checked = squareWaveEnabled
enableBatteryOscillatorInput.checked = batteryBackupOscillatorEnabled
enableBatterySquareWaveInput.checked = batteryBackupSquareWaveEnabled
squareWaveFrequencySelect.value = squareWaveFrequencyKHz

// status
const {
Expand Down Expand Up @@ -202,28 +203,44 @@ export class DS3231Builder {

const alarm1Checkbox = root.querySelector('input[name="enableAlarm1"]')
const alarm2Checkbox = root.querySelector('input[name="enableAlarm2"]')

const enableSquareWaveCheckbox = root.querySelector('input[name="enableSquareWave"]')
const batteryOscillatorCheckbox = root.querySelector('input[name="enableBatteryOscillator"]')
const batterySquareWaveCheckbox = root.querySelector('input[name="enableBatterySquareWave"]')
const squareWaveFrequencySelect = root.querySelector('select[name="squareWaveFrequency"]')

alarm1Checkbox.disabled = true
alarm2Checkbox.disabled = true
batteryOscillatorCheckbox.disabled = true
enableSquareWaveCheckbox.disabled = true
batterySquareWaveCheckbox.disabled = true
squareWaveFrequencySelect.disabled = true

const enableAlarm1 = alarm1Checkbox.checked
const enableAlarm2 = alarm2Checkbox.checked
const enableOscillatorOnBatteryBackup = batteryOscillatorCheckbox.checked
const enableSquareWave = enableSquareWaveCheckbox.checked
const enableSquareWaveOnBatteryBackup = batterySquareWaveCheckbox.checked
const squareWaveFrequencyKHz = parseFloat(squareWaveFrequencySelect.value)

await this.#device.setControl({
enableAlarm1,
enableAlarm2,
enableOscillatorOnBatteryBackup

enableSquareWave,
squareWaveFrequencyKHz,

enableOscillatorOnBatteryBackup,
enableSquareWaveOnBatteryBackup
})

await refreshView(root, this.#device)

alarm1Checkbox.disabled = false
alarm2Checkbox.disabled = false
batteryOscillatorCheckbox.disabled = false
enableSquareWaveCheckbox.disabled = false
batterySquareWaveCheckbox.disabled = false
squareWaveFrequencySelect.disabled = false
})

const alarm1Submit = root.querySelector('form[data-alarm1] button[submit]')
Expand Down
Loading

0 comments on commit abaf39a

Please sign in to comment.