Earmark/audiogram-beta
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feature/layout-updates #1

Merged
SethTrowbridge merged 34 commits from feature/layout-updates into master 2023-06-07 21:12:15 -04:00
Conversation 0 Commits 34 Files Changed 15 +54 -24
2 changed files with 54 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit cee7a02277 - Show all commits

3
src/twind.js
View File

@ -67,6 +67,9 @@ export const Configure = {
"box-shadow": "rgb(0 0 0 / 50%) 0px -2px 3px inset, rgb(255 255 255 / 50%) 0px 10px 10px inset"
}
],
[
'text-shadow-lcd', {"text-shadow": "0px 2px 3px #00000096"}
],
[ 'box-notch', "border-t(1 [#ffffff]) border-b(1 [#00000033]) flex items-center justify-end gap-1 p-2" ],
[ "box-buttons", "flex gap-1 items-center p-2 rounded-lg bg-gradient-to-b from-[#00000022] border-b(1 [#ffffff]) border-t(1 [#00000033])"]
],

69
src/ui.js
View File

@ -24,11 +24,11 @@ export function Button({children, icon, light, disabled, inactive, onClick, clas
<span class="absolute top-0 left-0 w-full h-full rounded-lg bg-black transition-opacity duration-300 opacity-0 ${(!inactive && !disabled) && "group-hover:opacity-50"}"></span>
${ FlashGet > 0 && html`<span key=${FlashGet} class="absolute top-0 left-0 w-full h-full rounded-lg bg-green-400 shadow-glow-green-300 animate-flash"></span>` }
${ icon && html`<span class="flex items-center block relative px-2 border-r(1 [#00000066])">
${ icon && html`<span class="flex items-center block relative px-2 border-r(1 [#00000088])">
<span class="absolute top-0 left-0 w-full h-full bg-black rounded(tl-lg bl-lg) ${disabled ? "opacity-20" : "opacity-50"}"></span>
<span class="relative">${icon}</span>
</span>` }
<div class="flex-1 flex items-center justify-center text-center px-3 py-2 relative border-l(1 [#ffffff44])">
<div class="flex-1 flex items-center justify-center text-center px-3 py-2 relative border-l(1 [#ffffff22])">
<span class="absolute shadow-glow-yellow-500 top-0 left-1/2 w-6 h-[6px] bg-white rounded-full translate(-x-1/2 -y-1/2) transition-all duration-500 ${light ? "opacity-100" : "opacity-0 scale-y-0"}"></span>
${children}
</div>
@ -99,17 +99,33 @@ export const Controls =()=>
<div class="box-notch">
<div class=${classTitle}>Frequency</div>
<div class="box-buttons">
<div class="w-24 text-center"><strong>${Store.ColumnMapping[State.Freq.Value][0]}</strong> Hz</div>
<${Button} disabled=${State.Freq.Value == State.Freq.Min} onClick=${()=>Dispatch({Name:"Freq", Data:-1})}>-<//>
<${Button} disabled=${State.Freq.Value == State.Freq.Max} onClick=${()=>Dispatch({Name:"Freq", Data:1})}>+<//>
<div class="w-24 text-center text-shadow-lcd"><strong>${Store.ColumnMapping[State.Freq.Value][0]}</strong> Hz</div>
<${Button} disabled=${State.Freq.Value == State.Freq.Min} onClick=${()=>Dispatch({Name:"Freq", Data:-1})}>
<svg class="my-1 h-3 w-3 overflow-visible stroke(white 2)">
<${Glyph.Minus}/>
</svg>
<//>
<${Button} disabled=${State.Freq.Value == State.Freq.Max} onClick=${()=>Dispatch({Name:"Freq", Data:1})}>
<svg class="my-1 h-3 w-3 overflow-visible stroke(white 2)">
<${Glyph.Plus}/>
</svg>
<//>
</div>
</div>
<div class="box-notch">
<div class=${classTitle}>Stimulus</div>
<div class="box-buttons">
<div class="w-24 text-center"><strong>${State.Stim.Value}</strong> dbHL</div>
<${Button} disabled=${State.Stim.Value == State.Stim.Min} onClick=${()=>Dispatch({Name:"Stim", Data:-1})}>-<//>
<${Button} disabled=${State.Stim.Value == State.Stim.Max} onClick=${()=>Dispatch({Name:"Stim", Data:1})}>+<//>
<div class="w-24 text-center text-shadow-lcd"><strong>${State.Stim.Value}</strong> dbHL</div>
<${Button} disabled=${State.Stim.Value == State.Stim.Min} onClick=${()=>Dispatch({Name:"Stim", Data:-1})}>
<svg class="my-1 h-3 w-3 overflow-visible stroke(white 2)">
<${Glyph.Minus}/>
</svg>
<//>
<${Button} disabled=${State.Stim.Value == State.Stim.Max} onClick=${()=>Dispatch({Name:"Stim", Data:1})}>
<svg class="my-1 h-3 w-3 overflow-visible stroke(white 2)">
<${Glyph.Plus}/>
</svg>
<//>
</div>
</div>
<div class="box-notch">
@ -176,9 +192,8 @@ export const Controls =()=>
<//>
<${Button}
icon=${html`
<svg x="0" y="0" class="translate-x-1/2 translate-y-1/2 stroke-draw h-2 overflow-visible stroke-white w-2 stroke-2">
<ellipse vector-effect="non-scaling-stroke" rx="70%" ry="70%"></ellipse>
<line vector-effect="non-scaling-stroke" x1="-50%" y1="-50%" x2="50%" y2="50%"></line>
<svg class="h-2 w-2 overflow-visible stroke(white 2)">
<${Glyph.Null}/>
</svg>
`}
onClick=${()=>Dispatch({Name:"Mark", Data:null })}
@ -272,29 +287,41 @@ export function Chart({children})
}
/** @type {Record<string, BasicElement>} */
const Glyph = {
export const Glyph = {
Arrow:()=> html`
<line vector-effect="non-scaling-stroke" x1="100%" y1="100%" x2="0%" y2="0%" ></line>
<line vector-effect="non-scaling-stroke" x1="100%" y1="100%" x2="25%" y2="100%"></line>
<line vector-effect="non-scaling-stroke" x1="100%" y1="100%" x2="100%" y2="25%" ></line>`,
<line class="stroke-draw" x1="100%" y1="100%" x2="0%" y2="0%" ></line>
<line class="stroke-draw" x1="100%" y1="100%" x2="25%" y2="100%"></line>
<line class="stroke-draw" x1="100%" y1="100%" x2="100%" y2="25%" ></line>`,
X: ({children})=> html`
<line x1="-50%" y1="-50%" x2="50%" y2="50%" ></line>
<line x1="-50%" y1="50%" x2="50%" y2="-50%"></line>
<g class="scale-50 translate(x-1/2 y-1/2) rotate-[-15deg]">${children}</g>`,
<line class="stroke-draw" x1="0%" y1="0%" x2="100%" y2="100%"></line>
<line class="stroke-draw" x1="0%" y1="100%" x2="100%" y2="0%" ></line>
<g class="scale-50 translate(x-full y-full) rotate-[-15deg]">${children}</g>`,
O: ({children})=> html`
<ellipse vector-effect="non-scaling-stroke" rx="60%" ry="60%"></ellipse>
<g style="transform: translate(-40%, 40%) rotate(96deg) scale(0.5);">${children}</g>`
<ellipse class="stroke-draw" cx="50%" cy="50%" rx="60%" ry="60%"></ellipse>
<g class="scale-50 rotate-[96deg] translate(-x-[0%] y-full)">${children}</g>`,
Minus:()=>html` <line class="stroke-draw" x1="0%" y1="50%" x2="100%" y2="50%"></line>`,
Plus:()=>html` <line class="stroke-draw" x1="0%" y1="50%" x2="100%" y2="50%"></line>
<line class="stroke-draw" y1="0%" x1="50%" y2="100%" x2="50%"></line>`,
Null:()=>html`
<ellipse class="stroke-draw" cx="50%" cy="50%" rx="70%" ry="70%"></ellipse>
<line class="stroke-draw" x1="0%" y1="0%" x2="100%" y2="100%"></line>
`
};
/** @type {({right, response, x, y, classes}:{right:boolean, response?:boolean, x:number|string, y:number|string, classes:string})=>preact.VNode} */
export const Mark =({right, response, x, y, classes})=>
{
return html`
<svg x=${x} y=${y} width="20" height="20" class=${`overflow-visible ${classes}`}>
<svg x=${x} y=${y} width="20" height="20" class="overflow-visible ${classes}">
<g class="translate(-x-1/2 -y-1/2)">
<${ right ? Glyph.O : Glyph.X }>
${ !response && html`<${Glyph.Arrow}/>` }
<//>
</g>
</svg>`;
};