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

chart drawing

Browse Source
This commit is contained in:
Seth Trowbridge 2022-12-06 23:37:39 -05:00
parent 4167a0a4f5
commit bf4762ce65
7 changed files with 33 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@ -1,2 +1,4 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<div id="app"></div>
<script type="module" src="src/app.js"></script>

27
src/app.js
View File

@ -12,20 +12,29 @@ ShadowDOM.append(ShadowDiv);
TW.Init(ShadowCSS, ShadowDiv);
const Audiogram =()=>
{
const [State, Dispatch] = Store.Consumer();
const [State] = Store.Consumer();
const testL = State.Draw.TestL.Points.map(p=>html`<${UI.Mark} x=${p.X} y=${p.Y} response=${p.Mark.Resp} right=${false}/>`);
const testR = State.Draw.TestR.Points.map(p=>html`<${UI.Mark} x=${p.X} y=${p.Y} response=${p.Mark.Resp} right=${true} />`);
const userL = State.Draw.UserL.Points.map(p=>html`<${UI.Mark} x=${p.X} y=${p.Y} response=${p.Mark.Resp} right=${false}/>`);
const userR = State.Draw.UserR.Points.map(p=>html`<${UI.Mark} x=${p.X} y=${p.Y} response=${p.Mark.Resp} right=${true} />`);
/** @type {(inAmount:number)=>string} */ const Perc =(inAmount)=> (inAmount*100)+"%";
const testMarksL = State.Draw.TestL.Points.map(p=>html`<${UI.Mark} x=${Perc(p.X)} y=${Perc(p.Y)} response=${p.Mark.Resp} right=${false}/>`);
const testMarksR = State.Draw.TestR.Points.map(p=>html`<${UI.Mark} x=${Perc(p.X)} y=${Perc(p.Y)} response=${p.Mark.Resp} right=${true} />`);
const testLinesL = State.Draw.TestL.Paths.map( p=>html`<line class="opacity-60" x1=${Perc(p.Head.X)} y1=${Perc(p.Head.Y)} x2=${Perc(p.Tail.X)} y2=${Perc(p.Tail.Y)} />`);
const testLinesR = State.Draw.TestR.Paths.map( p=>html`<line class="opacity-60" x1=${Perc(p.Head.X)} y1=${Perc(p.Head.Y)} x2=${Perc(p.Tail.X)} y2=${Perc(p.Tail.Y)} />`);
const userMarksL = State.Draw.UserL.Points.map(p=>html`<${UI.Mark} x=${Perc(p.X)} y=${Perc(p.Y)} response=${p.Mark.Resp} right=${false}/>`);
const userMarksR = State.Draw.UserR.Points.map(p=>html`<${UI.Mark} x=${Perc(p.X)} y=${Perc(p.Y)} response=${p.Mark.Resp} right=${true} />`);
const userLinesL = State.Draw.UserL.Paths.map( p=>html`<line class="opacity-60" x1=${Perc(p.Head.X)} y1=${Perc(p.Head.Y)} x2=${Perc(p.Tail.X)} y2=${Perc(p.Tail.Y)} />`);
const userLinesR = State.Draw.UserR.Paths.map( p=>html`<line class="opacity-60" x1=${Perc(p.Head.X)} y1=${Perc(p.Head.Y)} x2=${Perc(p.Tail.X)} y2=${Perc(p.Tail.Y)} />`);
return html`
<svg class="absolute top-0 w-full h-full overflow-visible stroke(blue-700 bold draw)">
${testL}
${testR}
</svg>`;
<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(red-700 2 draw)">${userMarksR}${userLinesR}</svg>`;
};
React.render(html`

4
src/store.js
View File

@ -55,8 +55,8 @@ export const Initial =
Name: "Patient A Asymmetric Notch",
Plot:
[
{ Hz: 500, TestL: { Stim: 30, Resp: true }, TestR: { Stim: 50, Resp: true } },
{ Hz: 1000, TestL: { Stim: 50, Resp: true }, TestR: { Stim: 55, Resp: true } }
{ Hz: 500, TestL: { Stim: 30, Resp: true }, TestR: { Stim: 50, Resp: true }, UserL: { Stim: 55, Resp: true }, UserR: { Stim: 50, Resp: true } },
{ Hz: 1000, TestL: { Stim: 50, Resp: true }, TestR: { Stim: 55, Resp: true }, UserL: { Stim: 50, Resp: true }, UserR: { Stim: 30, Resp: true } }
]
}
]

2
src/twind.js
View File

@ -32,7 +32,7 @@ export const Configure = {
},
strokeWidth:
{
"bold": "3px"
"bold": "4px"
}
}
},

6
src/ui.js
View File

@ -98,11 +98,11 @@ const Glyph = {
<g style="transform: translate(-35.35%, 35.35%) rotate(96deg) scale(0.5);">${children}</g>`
};
/** @type {({right, response, x, y}:{right:boolean, response?:boolean, x:number, y:number})=>preact.VNode} */
export const Mark =({right, response, x, y})=>
/** @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*100) + "%"} y=${(y*100) + "%"} width="20" height="20" class="overflow-visible">
<svg x=${x} y=${y} width="20" height="20" class=${`overflow-visible ${classes}`}>
<${ right ? Glyph.O : Glyph.X }>
${ !response && html`<${Glyph.Arrow}/>` }
<//>

2
store.d.ts vendored
View File

@ -47,7 +47,7 @@ declare namespace Store {
type PlotKeyTest = "TestL" | "TestR";
type PlotKey = PlotKeyUser | PlotKeyTest;
type DrawPoint = { X: number|string; Y: number|string; Mark: TestFrequencySample };
type DrawPoint = { X: number; Y: number; Mark: TestFrequencySample };
type DrawLine = { Head:DrawPoint, Tail:DrawPoint};
type DrawGroup = { Points: Array<DrawPoint>; Paths: Array<DrawLine> };
type DrawChart = { Left: DrawGroup; Right: DrawGroup };

6
store.test.ts
View File

@ -98,5 +98,11 @@ Deno.test("Make Marks", async(t)=>
assertEquals(state.Live.Mark?.Stim, state.Stim.Value);
});
await t.step("Check Draw output", ()=>
{
assertEquals(state.Draw.TestL.Points.length, 2);
assertEquals(state.Draw.TestL.Paths.length, 1);
});
console.log(state.Draw);
});