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 +89 -41
6 changed files with 89 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit d220e3f509 - Show all commits

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;