new ocr event format

2 files changed, 25 insertions, 22 deletions

diff --git a/web/share/js/kvm/ocr.js b/web/share/js/kvm/ocr.js
index 13e1b887..849b19b1 100644
--- a/web/share/js/kvm/ocr.js
+++ b/web/share/js/kvm/ocr.js
@@ -34,7 +34,7 @@ export function Ocr(__getGeometry) {
 
 	var __start_pos = null;
 	var __end_pos = null;
-	var __selection = null;
+	var __sel = null;
 
 	var __init__ = function() {
 		tools.el.setOnClick($("stream-ocr-button"), function() {
@@ -54,7 +54,7 @@ export function Ocr(__getGeometry) {
 		$("stream-ocr-window").onkeyup = function(event) {
 			event.preventDefault();
 			if (event.code === "Enter") {
-				if (__selection) {
+				if (__sel) {
 					__recognizeSelection();
 					wm.closeWindow($("stream-ocr-window"));
 				}
@@ -71,11 +71,14 @@ export function Ocr(__getGeometry) {
 	/************************************************************************/
 
 	self.setState = function(state) {
-		let enabled = (state && state.ocr.enabled && !tools.browser.is_mobile);
+		let enabled = (state && state.enabled && !tools.browser.is_mobile);
 		if (enabled) {
 			let el = $("stream-ocr-lang-selector");
-			tools.selector.setValues(el, state.ocr.langs.available);
-			tools.selector.setSelectedValue(el, tools.storage.get("stream.ocr.lang", state.ocr.langs["default"]));
+			el.options.length = 0;
+			for (let lang of state.langs.available) {
+				tools.selector.addOption(el, lang, lang);
+			}
+			el.value = tools.storage.get("stream.ocr.lang", state.langs["default"]);
 		}
 		tools.feature.setEnabled($("stream-ocr"), enabled);
 		$("stream-ocr-led").className = (enabled ? "led-gray" : "hidden");
@@ -94,23 +97,23 @@ export function Ocr(__getGeometry) {
 			__end_pos = __getGlobalPosition(event);
 			let width = Math.abs(__start_pos.x - __end_pos.x);
 			let height = Math.abs(__start_pos.y - __end_pos.y);
-			let el_selection = $("stream-ocr-selection");
-			el_selection.style.left = Math.min(__start_pos.x, __end_pos.x) + "px";
-			el_selection.style.top = Math.min(__start_pos.y, __end_pos.y) + "px";
-			el_selection.style.width = width + "px";
-			el_selection.style.height = height + "px";
-			tools.hidden.setVisible(el_selection, (width > 1 || height > 1));
+			let el = $("stream-ocr-selection");
+			el.style.left = Math.min(__start_pos.x, __end_pos.x) + "px";
+			el.style.top = Math.min(__start_pos.y, __end_pos.y) + "px";
+			el.style.width = width + "px";
+			el.style.height = height + "px";
+			tools.hidden.setVisible(el, (width > 1 || height > 1));
 		}
 	};
 
 	var __endSelection = function(event) {
 		__changeSelection(event);
-		let el_selection = $("stream-ocr-selection");
+		let el = $("stream-ocr-selection");
 		let ok = (
-			el_selection.offsetWidth > 1 && el_selection.offsetHeight > 1
+			el.offsetWidth > 1 && el.offsetHeight > 1
 			&& __start_pos !== null && __end_pos !== null
 		);
-		tools.hidden.setVisible(el_selection, ok);
+		tools.hidden.setVisible(el, ok);
 		if (ok) {
 			let rect = $("stream-box").getBoundingClientRect();
 			let rel_left = Math.min(__start_pos.x, __end_pos.x) - rect.left;
@@ -119,14 +122,14 @@ export function Ocr(__getGeometry) {
 			let rel_top = Math.min(__start_pos.y, __end_pos.y) - rect.top + offset;
 			let rel_bottom = Math.max(__start_pos.y, __end_pos.y) - rect.top + offset;
 			let geo = __getGeometry();
-			__selection = {
+			__sel = {
 				"left": tools.remap(rel_left, geo.x, geo.width, 0, geo.real_width),
 				"right": tools.remap(rel_right, geo.x, geo.width, 0, geo.real_width),
 				"top": tools.remap(rel_top, geo.y, geo.height, 0, geo.real_height),
 				"bottom": tools.remap(rel_bottom, geo.y, geo.height, 0, geo.real_height),
 			};
 		} else {
-			__selection = null;
+			__sel = null;
 		}
 		__start_pos = null;
 		__end_pos = null;
@@ -154,7 +157,7 @@ export function Ocr(__getGeometry) {
 		tools.hidden.setVisible($("stream-ocr-selection"), false);
 		__start_pos = null;
 		__end_pos = null;
-		__selection = null;
+		__sel = null;
 	};
 
 	var __recognizeSelection = function() {
@@ -164,10 +167,10 @@ export function Ocr(__getGeometry) {
 		let params = {
 			"ocr": 1,
 			"ocr_langs": $("stream-ocr-lang-selector").value,
-			"ocr_left": __selection.left,
-			"ocr_top": __selection.top,
-			"ocr_right": __selection.right,
-			"orc_bottom": __selection.bottom,
+			"ocr_left": __sel.left,
+			"ocr_top": __sel.top,
+			"ocr_right": __sel.right,
+			"orc_bottom": __sel.bottom,
 		};
 		tools.httpGet("/api/streamer/snapshot", params, function(http) {
 			if (http.status === 200) {
diff --git a/web/share/js/kvm/session.js b/web/share/js/kvm/session.js
index 1e7fefcd..523b4097 100644
--- a/web/share/js/kvm/session.js
+++ b/web/share/js/kvm/session.js
@@ -368,7 +368,7 @@ export function Session() {
 			case "atx_state": __atx.setState(data.event); break;
 			case "msd_state": __msd.setState(data.event); break;
 			case "streamer_state": __streamer.setState(data.event); break;
-			case "streamer_ocr_state": __ocr.setState(data.event); break;
+			case "ocr_state": __ocr.setState(data.event); break;
 		}
 	};