NanoVNA-H 4 screen capture

index.html

@@ -468,7 +468,7 @@ <h3 class="md-title" style="flex: 1">NanoVNA</h3>
 			<md-dialog :md-active.async="showCaptureDialog">
 				<md-dialog-title>Capture</md-dialog-title>
 				<md-dialog-content>
-					<canvas ref="capture" width="320" height="240" style="image-rendering: pixelated;"></canvas>
+					<canvas ref="capture" style="image-rendering: pixelated;"></canvas>
 					<md-progress-bar md-mode="indeterminate" v-show="capturing"></md-progress-bar>
 				</md-dialog-content>
 				<md-dialog-actions>

nanovna.js

@@ -235,10 +235,7 @@ class NanoVNA_Base {
 		return await this.sendCommand(`version\r`, async () => await this.readline());
 	}
 
-	async getCapture() {
-		const width = 320;
-		const height = 240;
-
+	async getCapture(width = 320, height = 240) {
 		const string = await this.sendCommand(`capture\r`, async () => await this.read(width * height * 2));
 		const uint16view = new Uint16Array(width * height);
 		for (var i = 0, len = width * height; i < len; i++) {

script.js

@@ -192,6 +192,23 @@ function formatFrequency(freq, f) {
 	}
 }
 
+function deserializeInfo(infoStr) {
+	return Object.fromEntries(
+		infoStr.split('\n').map(row => {
+			let [key, val] = row.split(/:\s+/);
+			key = key.toLowerCase().replace(/\s+/, '');
+			return [key, val.trim()];
+		})
+	)
+}
+
+function resolution(board) {
+	if(board === 'NanoVNA-H 4') {
+		return [480, 320];
+	}
+	return [320, 240];
+}
+
 async function downloadFile(url, name) {
 	if (typeof Capacitor === 'undefined') {
 		const a = document.createElement('a');
@@ -328,6 +345,8 @@ new Vue({
 			buildTimeStr: '',
 			buildTime: null,
 			info: '',
+			board: '',
+			resolution: null,
 		},
 		webVersion: "",
 		serialMode: NanoVNA.name.replace(/^NanoVNA_/, ''),
@@ -408,9 +427,11 @@ new Vue({
 
 					this.deviceInfo.version = await this.backend.getVersion();
 					this.deviceInfo.info = await this.backend.getInfo();
+					this.deviceInfo.board = deserializeInfo(this.deviceInfo.info).board;
 					this.deviceInfo.buildTimeStr = this.deviceInfo.info.match(/Build time:\s*(([a-z]{3})\s*(\d?\d) (\d{4}) - (\d?\d):(\d?\d):(\d?\d))/i)[1] || '';
 					this.deviceInfo.buildTimeStr = this.deviceInfo.buildTimeStr.replace(/\s+/g, ' ');
 					this.deviceInfo.buildTime = strptime(this.deviceInfo.buildTimeStr, '%B %d %Y - %H:%M:%S');
+					this.deviceInfo.resolution = resolution(this.deviceInfo.board);
 					this.deviceInfo.versionNumber = versionNumber(this.deviceInfo.version);
 
 					const v = this.deviceInfo.versionNumber || 0;
@@ -705,11 +726,14 @@ new Vue({
 		capture: async function () {
 			this.showCaptureDialog = true;
 			this.capturing = true;
-			const data = await this.backend.getCapture();
+			const [width, height] = this.deviceInfo.resolution;
+			const data = await this.backend.getCapture(width, height);
 
 			const canvas = this.$refs.capture;
+			canvas.width = width;
+			canvas.height = height;
 			const ctx = canvas.getContext('2d');
-			const imd = ctx.createImageData(320, 240);
+			const imd = ctx.createImageData(width, height);
 			const rgba = imd.data;
 			for (var i = 0, len = data.length; i < len; i++) {
 				const c565 = data[i];

worker.js

@@ -91,8 +91,8 @@ class Worker {
 		return await this.nanovna.scan(start, stop, length);
 	}
 
-	async getCapture() {
-		return await this.nanovna.getCapture();
+	async getCapture(width, height) {
+		return await this.nanovna.getCapture(width, height);
 	}
 
 	async recall(n) {