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

menus

Browse Source
This commit is contained in:
Seth Trowbridge 2022-12-12 15:57:49 -05:00
parent 6175ab1a25
commit d220e3f509
6 changed files with 89 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

15
src/app.js
View File

@ -15,11 +15,18 @@ TW.Init(ShadowCSS, ShadowDiv);
React.render(html` React.render(html`
<${Store.Provider}> <${Store.Provider}>
<${UI.Select}/>
<div class="flex items-center"> <div class="grid grid-cols-[300px_auto] items-center">
<${UI.Controls}/> <div class="col-start-1 p-10">
<div class="flex-1"> <img src="./logo.png"/>
</div>
<div class="flex justify-center">
<${UI.Select}/>
</div>
<div class="col-start-1">
<${UI.Controls}/>
</div>
<div class="">
<${UI.Chart}> <${UI.Chart}>
<${UI.Audiogram}/> <${UI.Audiogram}/>
<//> <//>

13
src/store.js
View File

@ -146,6 +146,14 @@ export function Reducer(inState, inAction)
clone.Live = Reselect(clone); clone.Live = Reselect(clone);
} }
} }
else if (Name == "ShowCursor")
{
clone.Show.Cursor = Data;
}
else if (Name == "ShowAnswer")
{
clone.Show.Answer = Data;
}
return clone; return clone;
} }
@ -169,6 +177,11 @@ export const Initial = Reducer(
TestL:{Points:[], Paths:[]}, TestL:{Points:[], Paths:[]},
TestR:{Points:[], Paths:[]} TestR:{Points:[], Paths:[]}
}, },
Show:
{
Cursor:true,
Answer:false
},
TestIndex: 0, TestIndex: 0,
Test: [ Test: [
{ {

7
src/twind.js
View File

@ -52,7 +52,10 @@ export const Configure = {
"bg-metal", "bg-metal",
{ {
"background": "linear-gradient(159deg, rgb(228, 228, 228) 0%, rgb(243, 243, 243) 25%, rgb(236, 236, 236) 100%)" "background": "linear-gradient(159deg, rgb(228, 228, 228) 0%, rgb(243, 243, 243) 25%, rgb(236, 236, 236) 100%)"
} },
],
[
"bg-earmark", "bg-gradient-to-b from-[#107c79] to-[#115e67]"
], ],
[ [
'shadow-glow-(.*)', 'shadow-glow-(.*)',
@ -70,7 +73,7 @@ export const Configure = {
[ [
'text-shadow-lcd', {"text-shadow": "0px 2px 2px #00000055"} 'text-shadow-lcd', {"text-shadow": "0px 2px 2px #00000055"}
], ],
[ 'box-notch', "border-t(1 [#ffffff]) border-b(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])"]
], ],
presets: [TWPreTail(), TWPreAuto()] presets: [TWPreTail(), TWPreAuto()]

90
src/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 font-sans group transition-all ${classes} ${disabled ? "bg-zinc-400" : "bg-gradient-to-b from-emerald-700 to-emerald-500"} ${(inactive||disabled) && "cursor-default"}" class="relative flex items-stretch rounded-lg text(lg white) border-t(1 solid [#00000011]) border-b(2 solid [#ffffff]) ring-inset ring-black font-sans group transition-all duration-500 ${classes} ${disabled ? "bg-zinc-400" : "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>` }
@ -45,15 +45,31 @@ export const Select =()=>
const handleChange =(e)=> Dispatch({Name:"Test", Data:parseInt(/** @type {HTMLSelectElement}*/(e.target).value)}); const handleChange =(e)=> Dispatch({Name:"Test", Data:parseInt(/** @type {HTMLSelectElement}*/(e.target).value)});
return html` return html`
<div class="font-sans"> <div class="inline-flex flex-row align-center bg-metal rounded-lg overflow-hidden shadow-md font-sans">
<label for="test-select" class="inline-block">Select Test:</label> <div class="box-notch">
<select id="test-select" class="px-2 py-2 rounded border(1 slate-200) inline-block" value=${State.TestIndex} onChange=${handleChange}> <div >Select Test</div>
${State.Test.map((t, i)=>html`<option value=${i}>${t.Name}</option>`)} <div class="box-buttons">
</select> <select id="test-select" class="px-2 py-2 rounded-lg border(1 slate-200) font-bold text(xl white) cursor-pointer bg-earmark" value=${State.TestIndex} onChange=${handleChange}>
<div>Complete: ${grade.Done} of ${grade.Total}</div> ${State.Test.map((t, i)=>html`<option class="text-black" value=${i}>${t.Name}</option>`)}
<div>Accuracy: ${grade.Score}%</div> </select>
<div class="h-4 bg-gray-200 rounded-full overflow-hidden"> </div>
<div class="h-full w-[${grade.Done/grade.Total*100}%] bg-emerald-500 shadow-sss"></div> </div>
<div class="box-notch">
<div>Progress</div>
<div class="box-buttons flex-col">
<div>Complete: ${grade.Done} of ${grade.Total}</div>
<div class="w-full h-4 bg-zinc-400 rounded-full overflow-hidden">
<div class="h-full w-[${grade.Done/grade.Total*100}%] bg-earmark"></div>
</div>
<div class="text-sm">Accuracy: ${grade.Score}%</div>
</div>
</div>
<div class="box-notch">
<div>Display</div>
<div class="box-buttons flex-col">
<${Button} light=${State.Show.Cursor} classes="flex-1 text-xs" onClick=${()=>Dispatch({Name:"ShowCursor", Data:!State.Show.Cursor})}>Cursor<//>
<${Button} light=${State.Show.Answer} classes="flex-1 text-xs" onClick=${()=>Dispatch({Name:"ShowAnswer", Data:!State.Show.Answer})}>Answer<//>
</div>
</div> </div>
</div>`; </div>`;
} }
@ -78,7 +94,7 @@ export const Controls =()=>
{ {
const testMark = State.Live.Freq[/** @type {"TestL"|"TestR"}*/(`Test${State.Chan.Value ? "R":"L"}`)]; const testMark = State.Live.Freq[/** @type {"TestL"|"TestR"}*/(`Test${State.Chan.Value ? "R":"L"}`)];
const handler = testMark.Stim <= State.Stim.Value ? ()=>{playSet(2)} : ()=>{playSet(0)} const handler = testMark.Stim <= State.Stim.Value ? ()=>{playSet(2)} : ()=>{playSet(0)}
timer = setTimeout(handler, 500 + Math.random()*1000); timer = setTimeout(handler, 800 + Math.random()*1300);
} }
} }
return () => clearTimeout(timer); return () => clearTimeout(timer);
@ -91,14 +107,14 @@ export const Controls =()=>
<div class="font-sans bg-metal rounded-lg overflow-hidden shadow-md"> <div class="font-sans bg-metal rounded-lg overflow-hidden shadow-md">
<div class="box-notch"> <div class="box-notch">
<div class=${classTitle}>Channel</div> <div class=${classTitle}>Channel</div>
<div class="box-buttons"> <div class="box-buttons min-w-[50%]">
<${Button} inactive=${State.Chan.Value == 0} light=${State.Chan.Value == 0} classes="" onClick=${()=>Dispatch({Name:"Chan", Data:-1})}>Left<//> <${Button} inactive=${State.Chan.Value == 0} light=${State.Chan.Value == 0} classes="flex-1" onClick=${()=>Dispatch({Name:"Chan", Data:-1})}>Left<//>
<${Button} inactive=${State.Chan.Value == 1} light=${State.Chan.Value == 1} classes="" onClick=${()=>Dispatch({Name:"Chan", Data:1})}>Right<//> <${Button} inactive=${State.Chan.Value == 1} light=${State.Chan.Value == 1} classes="flex-1" onClick=${()=>Dispatch({Name:"Chan", Data:1})}>Right<//>
</div> </div>
</div> </div>
<div class="box-notch"> <div class="box-notch">
<div class=${classTitle}>Frequency</div> <div class=${classTitle}>Frequency</div>
<div class="box-buttons"> <div class="box-buttons min-w-[50%]">
<div class="w-24 text-center text-shadow-lcd"><strong>${Store.ColumnMapping[State.Freq.Value][0]}</strong> Hz</div> <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})}> <${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-3 w-3 overflow-visible stroke(white 2)">
@ -114,7 +130,7 @@ export const Controls =()=>
</div> </div>
<div class="box-notch"> <div class="box-notch">
<div class=${classTitle}>Stimulus</div> <div class=${classTitle}>Stimulus</div>
<div class="box-buttons"> <div class="box-buttons min-w-[50%]">
<div class="w-24 text-center text-shadow-lcd"><strong>${State.Stim.Value}</strong> dbHL</div> <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})}> <${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-3 w-3 overflow-visible stroke(white 2)">
@ -177,7 +193,7 @@ export const Controls =()=>
</div> </div>
<div class="box-notch"> <div class="box-notch">
<div class=${classTitle}>Threshold</div> <div class=${classTitle}>Threshold</div>
<div class="box-buttons flex-col gap-2"> <div class="box-buttons flex-col gap-2 min-w-[50%]">
<${Button} <${Button}
onClick=${()=>Dispatch({Name:"Mark", Data:true })} onClick=${()=>Dispatch({Name:"Mark", Data:true })}
classes="text-md w-full" classes="text-md w-full"
@ -190,7 +206,7 @@ export const Controls =()=>
<//> <//>
<${Button} <${Button}
onClick=${()=>Dispatch({Name:"Mark", Data:false})} onClick=${()=>Dispatch({Name:"Mark", Data:false})}
classes="text-sm" classes="text-sm w-full"
icon=${html` icon=${html`
<svg class="h-2 w-2 mx-1 overflow-visible stroke(white 2)"> <svg class="h-2 w-2 mx-1 overflow-visible stroke(white 2)">
<${State.Chan.Value ? Glyph.O : Glyph.X}> <${State.Chan.Value ? Glyph.O : Glyph.X}>
@ -234,22 +250,28 @@ export const Audiogram =()=>
const userLinesR = State.Draw.UserR.Paths.map( p=>html`<line class="opacity-60" x1=${p.Head.X} y1=${p.Head.Y} x2=${p.Tail.X} y2=${p.Tail.Y} />`); const userLinesR = State.Draw.UserR.Paths.map( p=>html`<line class="opacity-60" x1=${p.Head.X} y1=${p.Head.Y} x2=${p.Tail.X} y2=${p.Tail.Y} />`);
return html` return html`
<svg class="absolute top-0 w-full h-full overflow-visible stroke(blue-700 bold draw) opacity-50">${testMarksL}${testLinesL}</svg> ${
<svg class="absolute top-0 w-full h-full overflow-visible stroke(red-700 bold draw) opacity-50">${testMarksR}${testLinesR}</svg> State.Show.Answer && html`
<svg class="absolute top-0 w-full h-full overflow-visible stroke(blue-700 bold draw) opacity-50">${testMarksL}${testLinesL}</svg>
<svg class="absolute top-0 w-full h-full overflow-visible stroke(red-700 bold draw) opacity-50">${testMarksR}${testLinesR}</svg>
`
}
<svg class="absolute top-0 w-full h-full overflow-visible stroke(blue-700 2 draw)">${userMarksL}${userLinesL}</svg> <svg class="absolute top-0 w-full h-full overflow-visible stroke(blue-700 2 draw)">${userMarksL}${userLinesL}</svg>
<svg class="absolute top-0 w-full h-full overflow-visible stroke(red-700 2 draw)">${userMarksR}${userLinesR}</svg> <svg class="absolute top-0 w-full h-full overflow-visible stroke(red-700 2 draw)">${userMarksR}${userLinesR}</svg>
<svg class="absolute top-0 w-1 h-1 overflow-visible transition-all duration-500" style=${{top:State.Draw.Cross?.Y, left:State.Draw.Cross?.X}}> ${
<ellipse cx="0" cy="0" rx="8" ry="30" fill="url(#glow)"></ellipse> State.Show.Cursor && html`
<ellipse cx="0" cy="0" rx="30" ry="8" fill="url(#glow)"></ellipse> <svg class="absolute top-0 w-1 h-1 overflow-visible transition-all duration-500" style=${{top:State.Draw.Cross?.Y, left:State.Draw.Cross?.X}}>
<defs> <ellipse cx="0" cy="0" rx="8" ry="30" fill="url(#glow)"></ellipse>
<radialGradient id="glow"> <ellipse cx="0" cy="0" rx="30" ry="8" fill="url(#glow)"></ellipse>
<stop stop-color=${State.Chan.Value ? "red" : "blue"} stop-opacity="0.6" offset="0.0"></stop> <defs>
<stop stop-color=${State.Chan.Value ? "red" : "blue"} stop-opacity="0.3" offset="0.2"></stop> <radialGradient id="glow">
<stop stop-color=${State.Chan.Value ? "red" : "blue"} stop-opacity="0.0" offset="1.0"></stop> <stop stop-color=${State.Chan.Value ? "red" : "blue"} stop-opacity="0.6" offset="0.0"></stop>
</radialGradient> <stop stop-color=${State.Chan.Value ? "red" : "blue"} stop-opacity="0.3" offset="0.2"></stop>
</defs> <stop stop-color=${State.Chan.Value ? "red" : "blue"} stop-opacity="0.0" offset="1.0"></stop>
</svg> </radialGradient>
`; </defs>
</svg>`
}`;
}; };
/** @type {BasicElement} */ /** @type {BasicElement} */
@ -262,7 +284,7 @@ export function Chart({children})
Store.ColumnMapping.forEach(([label, position, normal])=> Store.ColumnMapping.forEach(([label, position, normal])=>
{ {
rules.push(html` rules.push(html`
<span class="block absolute top-[-${inset}px] left-[${position*100}%] w-0 h-[calc(100%+${inset*2}px)] border-r(1 slate-400) ${!normal && "border-dashed"}"> <span class="block absolute top-[-${inset}px] left-[${position*100}%] w-0 h-[calc(100%+${inset*2}px)] border-r(1 zinc-300) ${!normal && "border-dashed"}">
<span class="block absolute top-0 left-0 -translate-x-1/2 -translate-y-full pb-${normal ? 4 : 1}">${label}</span> <span class="block absolute top-0 left-0 -translate-x-1/2 -translate-y-full pb-${normal ? 4 : 1}">${label}</span>
</span>` </span>`
); );
@ -271,7 +293,7 @@ export function Chart({children})
for(let db = State.Stim.Min; db <= State.Stim.Max; db+=10) for(let db = State.Stim.Min; db <= State.Stim.Max; db+=10)
{ {
rules.push(html` rules.push(html`
<span class="block absolute left-[-${inset}px] top-[${((db-State.Stim.Min) / (State.Stim.Max-State.Stim.Min))*100}%] h-0 w-[calc(100%+${inset*2}px)] border-b(${db == 0 ? "2 black" : "1 slate-400"})"> <span class="block absolute left-[-${inset}px] top-[${((db-State.Stim.Min) / (State.Stim.Max-State.Stim.Min))*100}%] h-0 w-[calc(100%+${inset*2}px)] border-b(${db == 0 ? "2 black" : "1 zinc-300"})">
<span class="block absolute top-0 left-0 -translate-x-full -translate-y-1/2 pr-2">${db}</span> <span class="block absolute top-0 left-0 -translate-x-full -translate-y-1/2 pr-2">${db}</span>
</span>` </span>`
); );

5
store.d.ts vendored
View File

@ -26,6 +26,7 @@ declare namespace Store {
Stim: Range; Stim: Range;
Live: Context; Live: Context;
Draw: DrawChart; Draw: DrawChart;
Show: {Cursor:boolean, Answer:boolean}
TestIndex: number; TestIndex: number;
Test: Array<Test>; Test: Array<Test>;
}; };
@ -35,7 +36,9 @@ declare namespace Store {
type ActionChan = { Name: "Chan"; Data: number }; type ActionChan = { Name: "Chan"; Data: number };
type ActionFreq = { Name: "Freq"; Data: number }; type ActionFreq = { Name: "Freq"; Data: number };
type ActionStim = { Name: "Stim"; Data: number }; type ActionStim = { Name: "Stim"; Data: number };
type Action = ActionMark | ActionTest | ActionChan | ActionFreq | ActionStim; type ActionShowCursor = {Name: "ShowCursor", Data:boolean};
type ActionShowAnswer = {Name: "ShowAnswer", Data:boolean};
type Action = ActionMark | ActionTest | ActionChan | ActionFreq | ActionStim | ActionShowCursor | ActionShowAnswer;
type Reducer = (inState: State, inAction: Action) => State; type Reducer = (inState: State, inAction: Action) => State;
type ContextUpdater = (inState: State) => boolean; type ContextUpdater = (inState: State) => boolean;