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

adjust controls

Browse Source
This commit is contained in:
Seth Trowbridge 2023-07-18 22:17:54 -04:00
parent 1840c4e74f
commit 1ccb87e900
2 changed files with 82 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
js/twind.js
View File

@ -73,6 +73,9 @@ export const Configure = {
[ [
'text-shadow-lcd', {"text-shadow": "0px 1px 1px #00000055"} 'text-shadow-lcd', {"text-shadow": "0px 1px 1px #00000055"}
], ],
[
'text-shadow-emboss', {"text-shadow": "0px -1px 1px #00000033, 0px 1px 2px #ffffff"}
],
[ 'box-notch', "border-t(1 [#ffffff]) border-r(1 [#ffffff]) border-b(1 [#00000033]) border-l(1 [#00000033]) flex items-center justify-end gap-1 p-2" ], [ 'box-notch', "border-t(1 [#ffffff]) border-r(1 [#ffffff]) border-b(1 [#00000033]) border-l(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])"] [ "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])"]
], ],

80
js/ui.js
View File

@ -19,7 +19,7 @@ export function Button({children, icon, light, disabled, inactive, onClick, clas
return html` return html`
<button <button
onClick=${handleClick} onClick=${handleClick}
class="relative flex items-stretch rounded-lg text(lg white) border-t(1 solid [#00000011]) border-b(2 solid [#ffffff]) ring-inset ring-black group transition-all duration-500 ${classes} ${disabled ? "bg-zinc-400" : (classesActive||"bg-earmark")} ${(inactive||disabled) && "cursor-default"}" class="relative flex items-stretch rounded-md text(lg white) border-t(1 solid [#00000011]) border-b(2 solid [#ffffff]) ring-inset ring-black group transition-all duration-500 ${classes} ${disabled ? "bg-zinc-400" : (classesActive||"bg-earmark")} ${(inactive||disabled) && "cursor-default"}"
> >
<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> <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>` } ${ 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>` }
@ -137,28 +137,30 @@ export const Controls =()=>
const classTitle = "flex-1 text-sm" const classTitle = "flex-1 text-sm"
return html` return html`
<div class="grid grid-cols-6 gap-4 w-full lg:w-[300px]"> <div class="grid grid-cols-6 gap-x-4 gap-y-8 w-full lg:w-[450px]">
<div class="col-start-1 col-end-7 md:col-end-4 lg:col-end-7 flex-col bg-metal rounded-lg overflow-hidden shadow-md"> <div class="col-start-1 col-end-7 md:col-end-4 lg:col-end-7 flex-col bg-metal rounded-lg overflow-hidden shadow-md">
<p class="text(center shadow-emboss slate-900) uppercase font-bold py-2">Controls</p>
<div class="border-y-1 border-t-slate-300 border-b-white"></div>
<div class="p-4 pb-1"> <div class="p-4 pb-1">
<div class="box-buttons min-w-[50%]"> <div class="box-buttons min-w-[50%]">
<${Button} inactive=${State.Chan.Value == 0} light=${State.Chan.Value == 0} classes="flex-1" onClick=${()=>Dispatch({Name:"Chan", Data:-1})}>Left<//> <p class="text(sm shadow-lcd) mx-2">Channel</p>
<${Button} inactive=${State.Chan.Value == 1} light=${State.Chan.Value == 1} classes="flex-1" onClick=${()=>Dispatch({Name:"Chan", Data:1})}>Right<//> <${Button} inactive=${State.Chan.Value == 0} light=${State.Chan.Value == 0} classes="flex-1 text-sm" onClick=${()=>Dispatch({Name:"Chan", Data:-1})}>Left<//>
<${Button} inactive=${State.Chan.Value == 1} light=${State.Chan.Value == 1} classes="flex-1 text-sm" onClick=${()=>Dispatch({Name:"Chan", Data:1})}>Right<//>
</div> </div>
</div> </div>
<div class="p-4 py-1"> <div class="p-4 py-1">
<div class="box-buttons min-w-[50%]"> <div class="box-buttons min-w-[50%]">
<div class="flex-1 text-center text-shadow-lcd"> <div class="flex-1 text-center text-shadow-lcd">
<p class="text-xs">Frequency</p> <p class="text-sm">Frequency <strong>${Store.ColumnMapping[State.Freq.Value][0]}</strong> Hz </p>
<strong>${Store.ColumnMapping[State.Freq.Value][0]}</strong> Hz
</div> </div>
<${Button} disabled=${State.Freq.Value == State.Freq.Min} onClick=${()=>Dispatch({Name:"Freq", Data:-1})}> <${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)"> <svg class="my-1 h-2 w-2 overflow-visible stroke(white 2)">
<${Glyph.Minus}/> <${Glyph.Minus}/>
</svg> </svg>
<//> <//>
<${Button} disabled=${State.Freq.Value == State.Freq.Max} onClick=${()=>Dispatch({Name:"Freq", Data:1})}> <${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)"> <svg class="my-1 h-2 w-2 overflow-visible stroke(white 2)">
<${Glyph.Plus}/> <${Glyph.Plus}/>
</svg> </svg>
<//> <//>
@ -167,16 +169,15 @@ export const Controls =()=>
<div class="p-4 pt-2"> <div class="p-4 pt-2">
<div class="box-buttons min-w-[50%]"> <div class="box-buttons min-w-[50%]">
<div class="flex-1 text-center text-shadow-lcd"> <div class="flex-1 text-center text-shadow-lcd">
<p class="text-xs">Level</p> <p class="text-sm">Level <strong>${State.Stim.Value}</strong> dBHL</p>
<strong>${State.Stim.Value}</strong> dbHL
</div> </div>
<${Button} disabled=${State.Stim.Value == State.Stim.Min} onClick=${()=>Dispatch({Name:"Stim", Data:-1})}> <${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)"> <svg class="my-1 h-2 w-2 overflow-visible stroke(white 2)">
<${Glyph.Minus}/> <${Glyph.Minus}/>
</svg> </svg>
<//> <//>
<${Button} disabled=${State.Stim.Value == State.Stim.Max} onClick=${()=>Dispatch({Name:"Stim", Data:1})}> <${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)"> <svg class="my-1 h-2 w-2 overflow-visible stroke(white 2)">
<${Glyph.Plus}/> <${Glyph.Plus}/>
</svg> </svg>
<//> <//>
@ -185,15 +186,18 @@ export const Controls =()=>
</div> </div>
<div class="col-start-1 col-end-7 md:col-start-4 lg:col-start-1 flex-col bg-metal rounded-lg overflow-hidden shadow-md"> <div class="col-start-1 col-end-7 md:col-start-4 lg:col-start-1 flex-col bg-metal rounded-lg overflow-hidden shadow-md">
<div class="p-4 pb-0"> <p class="text(center shadow-emboss slate-900) uppercase font-bold py-2">Tone</p>
<div class="border-y-1 border-t-slate-300 border-b-white"></div>
<div class="p-4">
<div class="box-buttons flex-1"> <div class="box-buttons flex-1">
<div class="flex-1"> <div class="flex-1">
<div class="flex gap-1 mb-2"> <div class="flex gap-1 mb-2">
<${Button} onClick=${()=>{pulsedSet(true )}} light=${pulsedGet } inactive${pulsedGet } classes="flex-1 text(center xs)">Pulsed <//> <${Button} onClick=${()=>{pulsedSet(true )}} light=${pulsedGet } inactive${pulsedGet } classes="flex-1 text(center xs)">Pulsed <//>
<${Button} onClick=${()=>{pulsedSet(false)}} light=${!pulsedGet} inactive${!pulsedGet} classes="flex-1 text(center xs)">Continuous<//> <${Button} onClick=${()=>{pulsedSet(false)}} light=${!pulsedGet} inactive${!pulsedGet} classes="flex-1 text(center xs)">Continuous<//>
</div> </div>
<div class="flex items-start">
<${Button} <${Button}
classes="w-full flex-1 self-center" classes="w-full flex-2"
onClick=${()=>playSet(1)} onClick=${()=>playSet(1)}
disabled=${playGet==1} disabled=${playGet==1}
icon=${html`<svg class="w-3 h-3 mx-1" viewBox="0 0 20 20"> icon=${html`<svg class="w-3 h-3 mx-1" viewBox="0 0 20 20">
@ -204,9 +208,8 @@ export const Controls =()=>
<//> <//>
</div> </div>
</div> </div>
<p class="text-center mt-2"> <div class="md:pl-2">
<strong>Response</strong> <span class="text-xs">${State.Live.Mark.Errs > 0 && ` (${State.Live.Mark.Errs*100}% Error Chance)` }</span>: <p class="text(center sm) mt-2 -mb-2 font-bold">Response:</p>
</p>
<svg width="80" height="80" preserveAspectRatio="none" viewBox="0 0 79 79" fill="none" class="mx-auto mt-2"> <svg width="80" height="80" preserveAspectRatio="none" viewBox="0 0 79 79" fill="none" class="mx-auto mt-2">
<circle fill="url(#metal)" cx="39" cy="40" r="35"></circle> <circle fill="url(#metal)" cx="39" cy="40" r="35"></circle>
<circle fill="url(#metal)" cx="39.5" cy="39.5" r="29.5" transform="rotate(180 39.5 39.5)"></circle> <circle fill="url(#metal)" cx="39.5" cy="39.5" r="29.5" transform="rotate(180 39.5 39.5)"></circle>
@ -236,26 +239,41 @@ export const Controls =()=>
</svg> </svg>
</div> </div>
</div> </div>
</div>
</div>
<div class="col-start-1 col-end-7 flex-col bg-metal rounded-lg overflow-hidden shadow-md"> <div class="col-start-1 col-end-7 flex-col bg-metal rounded-lg overflow-hidden shadow-md">
<p class="text(center shadow-emboss slate-900) uppercase font-bold py-2">Thresholds</p>
<div class="border-y-1 border-t-slate-300 border-b-white"></div>
<div class="p-4"> <div class="p-4">
<div class="box-buttons flex-col md:flex-row lg:flex-col gap-2 items-stretch min-w-[50%]"> <div class="box-buttons flex-col md:flex-row flex-wrap gap-2 items-stretch min-w-[50%]">
<strong class="self-center">Threshold</strong>
<${Button} <${Button}
onClick=${()=>Dispatch({Name:"Mark", Data:true })} onClick=${()=>Dispatch({Name:"Mark", Data:true })}
classes="text-md w-full" classes="text-sm flex-1"
icon=${html` icon=${html`
<svg class="h-2 w-2 mx-1 overflow-visible stroke(white 2)"> <svg class="h-2 w-2 overflow-visible stroke(white 2)">
<${State.Chan.Value ? Glyph.O : Glyph.X}/> <${State.Chan.Value ? Glyph.O : Glyph.X}/>
</svg>`} </svg>`}
> >
Accept Accept
<//> <//>
<${Button} <${Button}
onClick=${()=>Dispatch({Name:"Mark", Data:false})} onClick=${()=>Dispatch({Name:"Mark", Data:null })}
classes="text-sm w-full" classes="text-sm flex-1"
icon=${html` icon=${html`
<svg class="h-2 w-2 mx-1 overflow-visible stroke(white 2)"> <svg class="h-2 w-2 overflow-visible stroke(white 2)">
<${Glyph.Null}/>
</svg>
`}
disabled=${State.Live.Mark.User == undefined}
>
Clear
<//>
<${Button}
onClick=${()=>Dispatch({Name:"Mark", Data:false})}
classes="text-sm flex-1 leading-none"
icon=${html`
<svg class="h-[6px] w-[6px] overflow-visible stroke(white 2)">
<${State.Chan.Value ? Glyph.O : Glyph.X}> <${State.Chan.Value ? Glyph.O : Glyph.X}>
<${Glyph.Arrow}/> <${Glyph.Arrow}/>
<//> <//>
@ -263,18 +281,6 @@ export const Controls =()=>
> >
No Response No Response
<//> <//>
<${Button}
icon=${html`
<svg class="h-2 w-2 mx-1 overflow-visible stroke(white 2)">
<${Glyph.Null}/>
</svg>
`}
onClick=${()=>Dispatch({Name:"Mark", Data:null })}
classes="text-sm w-full"
disabled=${State.Live.Mark.User == undefined}
>
Clear
<//>
</div> </div>
</div> </div>
</div> </div>
@ -348,7 +354,7 @@ export function Chart({children})
); );
} }
return html` return html`
<div class="relative w-full pb-[calc(90%+70px)] md:pb-[calc(65%+70px)] lg:pb-[calc(55%+70px)] font(sans medium) text(xs) self-start"> <div class="relative w-full pb-[calc(90%+70px)] md:pb-[calc(65%+70px)] lg:pb-[calc(45%+70px)] font(sans medium) text(xs) self-start">
<div class="absolute right-0 bottom-0 w-[calc(100%-60px)] h-[calc(100%-70px)] border(1 zinc-300)"> <div class="absolute right-0 bottom-0 w-[calc(100%-60px)] h-[calc(100%-70px)] border(1 zinc-300)">
<span class="block absolute top-[-65px] left-0 w-full text(sm center) font-black">Frequency (Hz)</span> <span class="block absolute top-[-65px] left-0 w-full text(sm center) font-black">Frequency (Hz)</span>
<span class="inline-block absolute top-[50%] left-[-50px] "> <span class="inline-block absolute top-[50%] left-[-50px] ">