Show SNR values based on current mode selection

App.Tests/AppTests.ts

@@ -4,6 +4,8 @@ import { shallowMount as mount } from "@vue/test-utils";
 import Mockito from "ts-mockito";
 import Renderer from "../App/Renderer";
 import MockFactory from "./MockFactory";
+import { Mode } from "../App/Mode";
+import AccessPoint from "../App/AccessPoint";
 
 export default class AppTests extends TestSuite {
 	@Test()
@@ -78,4 +80,48 @@ export default class AppTests extends TestSuite {
 		//assert
 		this.assert.stringContains("loading", component.vm.connection_status);
 	}
+
+	@Test()
+	async changingSelectedAPRerenders() {
+		//arrange
+		const renderer = Mockito.mock<Renderer>();
+		const component = mount(App, {
+			global: {
+				provide: {
+					signal_service: () => null,
+					renderer: () => Mockito.instance(renderer),
+					file_loader: () => null
+				}
+			}
+		});
+
+		//act
+		component.vm.$data.selected = new AccessPoint("test");
+		await component.vm.$nextTick();
+
+		//assert
+		Mockito.verify(renderer.render(Mockito.anything(), Mockito.anything(), Mockito.anything())).atLeast(1);
+	}
+
+	@Test()
+	async changingModeRerenders() {
+		//arrange
+		const renderer = Mockito.mock<Renderer>();
+		const component = mount(App, {
+			global: {
+				provide: {
+					signal_service: () => null,
+					renderer: () => Mockito.instance(renderer),
+					file_loader: () => null
+				}
+			}
+		});
+
+		//act
+		component.vm.$data.mode = Mode.SNR;
+		await component.vm.$nextTick();
+
+		//assert
+		Mockito.verify(renderer.render(Mode.SNR, Mockito.anything(), Mockito.anything())).atLeast(1);
+	}
 }

App.Tests/RendererTests.ts

@@ -5,6 +5,7 @@ import Reading from "../App/Reading";
 import Point from "../App/Point";
 import AccessPoint from "../App/AccessPoint";
 import MockFactory from "./MockFactory";
+import { Mode } from "../App/Mode";
 
 export default class RendererTests extends TestSuite {
 	@Test()
@@ -24,7 +25,7 @@ export default class RendererTests extends TestSuite {
 			new Reading(1, new Point(4, 4), [])
 		];
 		const access_point = new AccessPoint("test");
-		renderer.render(readings, access_point);
+		renderer.render(Mode.Signal, readings, access_point);
 
 		//assert
 		Mockito.verify(gl.drawArrays(Mockito.anything(), Mockito.anything(), 6)).once();

App.Tests/TriangulationTests.ts

@@ -4,6 +4,7 @@ import Point from "../App/Point";
 import Triangulation from "../App/Triangulation";
 import Signal from "../App/Signal";
 import AccessPoint from "../App/AccessPoint";
+import { Mode } from "../App/Mode";
 
 export default class TriangulationTests extends TestSuite {
 	@Test()
@@ -16,26 +17,58 @@ export default class TriangulationTests extends TestSuite {
 		];
 
 		//act
-		const triangulation = new Triangulation(readings, new AccessPoint("test"));
+		const triangulation = new Triangulation(Mode.Signal, readings, new AccessPoint("test"));
 
 		//assert
-		this.assert.equal([ 4, 2, 2, 1, 3, 3 ], triangulation.vertex_coordinates);
+		const expected = [
+			4, 2,
+			2, 1,
+			3, 3
+		];
+		this.assert.equal(expected, triangulation.vertex_coordinates);
+	}
+
+	@Test()
+	async canConvertSignalsToColorParts() {
+		//arrange
+		const readings = [
+			new Reading(1, new Point(2, 1), [new Signal("12:34:56", "test", 2, 1, -40)]),
+			new Reading(2, new Point(4, 2), [new Signal("12:34:56", "test", 2, 1, -60)]),
+			new Reading(3, new Point(3, 3), [new Signal("12:34:56", "test", 2, 1, -80)])
+		];
+		const access_point = new AccessPoint("test");
+
+		//act
+		const triangulation = new Triangulation(Mode.Signal, readings, access_point);
+
+		//assert
+		const expected = [
+			255, 255, 0, 191,
+			0, 255, 0, 191,
+			255, 0, 0, 191
+		];
+		this.assert.equal(expected, triangulation.vertex_color_parts);
 	}
 
 	@Test()
-	async canConvertReadingsToColorParts() {
+	async canConvertSNRToColorParts() {
 		//arrange
 		const readings = [
-			new Reading(1, new Point(2, 1), [ new Signal("12:34:56", "test", 2, 1, -40) ]),
-			new Reading(2, new Point(4, 2), [ new Signal("12:34:56", "test", 2, 6, -60) ]),
-			new Reading(3, new Point(3, 3), [ new Signal("12:34:56", "test", 2, 11, -80) ])
+			new Reading(1, new Point(2, 1), [new Signal("12:34:56", "test", 2, 1, -30)]),
+			new Reading(2, new Point(4, 2), [new Signal("12:34:56", "test", 2, 1, -50)]),
+			new Reading(3, new Point(3, 3), [new Signal("12:34:56", "test", 2, 1, -80)])
 		];
 		const access_point = new AccessPoint("test");
 
 		//act
-		const triangulation = new Triangulation(readings, access_point);
+		const triangulation = new Triangulation(Mode.SNR, readings, access_point);
 
 		//assert
-		this.assert.equal([ 255, 255, 0, 191, 0, 255, 0, 191, 255, 0, 0, 191 ], triangulation.vertex_color_parts);
+		const expected = [
+			0, 255, 0, 191,
+			0, 127, 0, 191,
+			255, 255, 0, 191
+		];
+		this.assert.equal(expected, triangulation.vertex_color_parts);
 	}
 }

App/AppViewModel.ts

@@ -65,7 +65,7 @@ export default class AppViewModel {
 	deleteDataPoint(index: number): void {
 		this.readings.splice(index, 1);
 		if (this.readings.length >= 3)
-			this.renderer?.render(this.readings, this.selected);
+			this.renderer?.render(this.mode, this.readings, this.selected);
 		else
 			this.renderer?.clear();
 	}

App/Renderer.ts

@@ -2,6 +2,7 @@ import Reading from "./Reading";
 import Triangulation from "./Triangulation";
 import RenderFactory from "./RenderFactory";
 import AccessPoint from "./AccessPoint";
+import { Mode } from "./Mode";
 
 export default class Renderer {
 	private canvas: HTMLCanvasElement;
@@ -14,8 +15,8 @@ export default class Renderer {
 		this.shader_program = RenderFactory.getShaderProgram(this.gl);
 	}
 
-	render(readings: Reading[], access_point: AccessPoint | null): void {
-		const triangulation = new Triangulation(readings, access_point);
+	render(mode: Mode, readings: Reading[], access_point: AccessPoint | null): void {
+		const triangulation = new Triangulation(mode, readings, access_point);
 		if (triangulation.vertex_coordinates.length === 0 || triangulation.vertex_coordinates.length % 6 !== 0
 			|| triangulation.vertex_color_parts.length === 0 || triangulation.vertex_color_parts.length % 12 !== 0)
 			return;

App/Triangulation.ts

@@ -2,12 +2,13 @@ import Delaunator from "delaunator";
 import ColorConverter from "./ColorConverter";
 import Reading from "./Reading";
 import AccessPoint from "./AccessPoint";
+import { Mode } from "./Mode";
 
 export default class Triangulation {
 	readonly vertex_coordinates: number[] = [];
 	readonly vertex_color_parts: number[] = [];
 
-	constructor(readings: Reading[], access_point: AccessPoint | null) {
+	constructor(mode: Mode, readings: Reading[], access_point: AccessPoint | null) {
 		const points = readings.map(reading => reading.location);
 		const delauney = Delaunator.from(points, p => p.x, p => p.y);
 
@@ -16,8 +17,14 @@ export default class Triangulation {
 			this.vertex_coordinates.push(reading.location.x);
 			this.vertex_coordinates.push(reading.location.y);
 
-			const signal = reading.signalFor(access_point);
-			const color = ColorConverter.fromSignal(signal);
+			const signal = mode == Mode.Signal
+				? reading.signalFor(access_point)
+				: reading.snrFor(access_point);
+
+			const color = mode == Mode.Signal
+				? ColorConverter.fromSignal(signal)
+				: ColorConverter.fromSNR(signal);
+
 			this.vertex_color_parts.push(color.red);
 			this.vertex_color_parts.push(color.green);
 			this.vertex_color_parts.push(color.blue);

App/app.vue

@@ -41,11 +41,11 @@ export default defineComponent({
 		}
 	},
 	watch: {
+		mode(): void {
+			this.refresh();
+		},
 		selected(): void {
-			if (this.selected != null)
-				this.renderer?.render(this.readings, this.selected);
-			else
-				this.renderer?.clear();
+			this.refresh();
 		}
 	},
 	mounted(): void {
@@ -56,6 +56,11 @@ export default defineComponent({
 		this.renderer = this.renderer_factory(canvas);
 
 		this.file_loader = this.file_loader_factory();
+	},
+	methods: {
+		refresh(): void {
+			this.renderer?.render(this.mode, this.readings, this.selected);
+		}
 	}
 });
 </script>

App/data-point.vue

@@ -1,9 +1,9 @@
 <template>
-	<div class="point" :style="{ left: reading.location.x + 'px', top: reading.location.y + 'px', 'background-color': color(reading).toRGBA() }">
+	<div class="point" :style="{ left: reading.location.x + 'px', top: reading.location.y + 'px', 'background-color': color }">
 		<div class="delete" @click="remove()"></div>
 		<div class="shadow"></div>
 		<div v-if="signal" class="value">
-			{{ signal }} dBm
+			{{ signal }} {{ mode }}
 		</div>
 		<div v-if="!signal" class="value">
 			(no signal)
@@ -18,6 +18,7 @@ import ColorConverter from "./ColorConverter";
 import AccessPoint from "./AccessPoint";
 import Reading from "./Reading";
 import SharedState from "./SharedState";
+import { Mode } from "./Mode";
 
 export default defineComponent({
 	props: {
@@ -27,19 +28,27 @@ export default defineComponent({
 		},
 		reading: Reading,
 		selected: AccessPoint,
+		mode: {
+			type: String,
+			default: Mode.Signal
+		}
 	},
 	data: () => ({
 		state: SharedState,
 	}),
 	computed: {
 		signal(): number | null {
-			return this.reading.signalFor(this.selected);
+			return this.mode == Mode.Signal
+				? this.reading.signalFor(this.selected)
+				: this.reading.snrFor(this.selected);
+		},
+		color(): Color {
+			return this.mode == Mode.Signal
+				? ColorConverter.fromSignal(this.signal)
+				: ColorConverter.fromSNR(this.signal);
 		}
 	},
 	methods: {
-		color(reading: Reading): Color {
-			return ColorConverter.fromSignal(reading.signalFor(this.selected));
-		},
 		remove(): void {
 			if (confirm("Are you sure you want to remove this reading?"))
 				this.state.deleteDataPoint(this.index);

App/main-area.vue

@@ -12,6 +12,7 @@
 			:index="index"
 			:reading="reading"
 			:selected="state.selected"
+			:mode="state.mode"
 		/>
 	</main>
 </template>
@@ -55,7 +56,7 @@ export default defineComponent({
 			this.refresh();
 		},
 		refresh(): void {
-			this.state.renderer?.render(this.state.readings, this.state.selected);
+			this.state.renderer?.render(this.state.mode, this.state.readings, this.state.selected);
 		}
 	}
 });