StudioInfinity/dyna3
2
0
Fork 1
Code Issues 56 Pull requests 1 Projects 3 Releases 4 Wiki Activity Actions

Generalize constraints to observables (#48)

Browse source 
Unifies the interface elements for measuring and constraining real-valued observables, as proposed in issue #47. The resulting combination is called a "Regulator," at least in the code. They are presented as text inputs in the table view. When a Regulatore is in measurement mode (has no "set point"), the text field displays its value. Entering a desired value into the text field creates a set point, and then the Regulator acts to (attempt to) constrain the value. Setting the desired value to the empty string switches the observable back to measurement mode. If you enter a desired value that can't be parsed as a floating point number, the regulator input is flagged as invalid and it has no effect on the state of the regulator. The set point can in this case be restored to its previous value (or to no set point if that was its prior state) by pressing the "Esc" key.

Co-authored-by: Aaron Fenyes <aaron.fenyes@fareycircles.ooo>
Co-authored-by: glen <glen@studioinfinity.org>
Reviewed-on: glen/dyna3#48
Co-authored-by: Vectornaut <vectornaut@nobody@nowhere.net>
Co-committed-by: Vectornaut <vectornaut@nobody@nowhere.net>
This commit is contained in:
Vectornaut 2025-03-10 23:43:24 +00:00 • committed by Glen Whitney
parent 46324fecc6
commit da28bc99d2
7 changed files with 249 additions and 126 deletions
Download patch file Download diff file Expand all files Collapse all files

47
app-proto/main.css
View file

@ -3,7 +3,8 @@
--text-bright: white;
--text-invalid: #f58fc2; /* bright pink */
--border: #555; /* light gray */
--border-focus: #aaa; /* bright gray */
--border-focus-dark: #aaa; /* bright gray */
--border-focus-light: white;
--border-invalid: #70495c; /* dusky pink */
--selection-highlight: #444; /* medium gray */
--page-background: #222; /* dark gray */
@ -23,7 +24,7 @@ body {
display: flex;
flex-direction: column;
float: left;
width: 450px;
width: 500px;
height: 100vh;
margin: 0px;
padding: 0px;
@ -77,12 +78,12 @@ summary.selected {
background-color: var(--selection-highlight);
}
summary > div, .constraint {
summary > div, .regulator {
padding-top: 4px;
padding-bottom: 4px;
}
.element, .constraint {
.element, .regulator {
display: flex;
flex-grow: 1;
padding-left: 8px;
@ -107,7 +108,7 @@ details[open]:has(li) .element-switch::after {
flex-grow: 1;
}
.constraint-label {
.regulator-label {
flex-grow: 1;
}
@ -123,26 +124,34 @@ details[open]:has(li) .element-switch::after {
width: 56px;
}
.constraint {
.regulator {
font-style: italic;
}
.constraint.invalid {
color: var(--text-invalid);
.regulator-type {
padding: 2px 8px 0px 8px;
font-size: 10pt;
}
.constraint > input[type=checkbox] {
margin: 0px 8px 0px 0px;
}
.constraint > input[type=text] {
.regulator-input {
color: inherit;
background-color: inherit;
border: 1px solid var(--border);
border-radius: 2px;
}
.constraint.invalid > input[type=text] {
.regulator-input::placeholder {
color: inherit;
opacity: 54%;
font-style: italic;
}
.regulator-input.constraint {
background-color: var(--display-background);
}
.regulator-input.invalid {
color: var(--text-invalid);
border-color: var(--border-invalid);
}
@ -154,7 +163,7 @@ details[open]:has(li) .element-switch::after {
font-style: normal;
}
.invalid > .status::after, details:has(.invalid):not([open]) .status::after {
.regulator-input.invalid + .status::after, details:has(.invalid):not([open]) .status::after {
content: '⚠';
color: var(--text-invalid);
}
@ -171,5 +180,11 @@ canvas {
}
canvas:focus {
border-color: var(--border-focus);
border-color: var(--border-focus-dark);
outline: none;
}
input:focus {
border-color: var(--border-focus-light);
outline: none;
}