Purge jQuery dependency (#55)

Now the configuration UI only uses native JavaScript. This means we
expect no ancient browsers to be used for configuring this application,
and also removed the jQuery dependency.

Also update to use ACAP SDK 12.6.

Signed-off-by: Joakim Roubert <[email protected]>

Author: joakimr-axis

Dockerfile

@@ -1,5 +1,5 @@
 ARG ARCH=aarch64
-ARG SDK_VERSION=12.2.0
+ARG SDK_VERSION=12.6.0
 ARG SDK_IMAGE=docker.io/axisecp/acap-native-sdk
 ARG DEBUG_WRITE
 ARG BUILD_DIR=/opt/build

html/js/jquery-3.6.1.min.js

@@ -1,3 +1,19 @@
+/**
+ * Copyright (C) 2025, Axis Communications AB, Lund, Sweden
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
 const w = 640;
 const h = 360;
 const msize = 5;
@@ -7,9 +23,10 @@ const State = {
 	Min: Symbol(2),
 	Max: Symbol(3)
 }
+const paramappname = 'Opcuagaugereader';
 const parambaseurl = '/axis-cgi/param.cgi?action=';
-const paramgeturl = parambaseurl + 'list&group=opcuagaugereader.';
-const paramseturl = parambaseurl + 'update&opcuagaugereader.';
+const paramgeturl = `${parambaseurl}list&group=${paramappname}.`;
+const paramseturl = `${parambaseurl}update&${paramappname}.`;
 var points = {};
 points['centerX'] = 0;
 points['centerY'] = 0;
@@ -19,7 +36,7 @@ points['maxX'] = 0;
 points['maxY'] = 0;
 
 function getPointText(param) {
-	return param + ': (' + points[param + 'X'] + ', ' + points[param + 'Y'] + ')';
+	return `${param}: (${points[`${param}X`]}, ${points[`${param}Y`]})`;
 }
 
 function drawMarker(X, Y, color) {
@@ -31,7 +48,7 @@ function drawMarker(X, Y, color) {
 	ctx.arc(X, Y, msize, 1, 2 * Math.PI, false);
 	ctx.stroke();
 	document.getElementById("values").textContent =
-		getPointText('center') + ' ' + getPointText('min') + ' ' + getPointText('max');
+		`${getPointText('center')} ${getPointText('min')} ${getPointText('max')}`;
 }
 
 function drawCenter() {
@@ -54,25 +71,35 @@ function drawDefaultPoints() {
 }
 
 function getCurrentValue(param) {
-	$.get(paramgeturl + param)
-		.done(function(data) {
-			points[param] = data.split('=')[1];
-			console.log('Got ' + param + ' value ' + points[param]);
-			drawDefaultPoints();
+	return fetch(`${paramgeturl}${param}`)
+		.then(response => {
+			if (!response.ok) {
+				throw new Error(`Getting parameter value, the network response was not ok: ${response.status} ${response.statusText}`);
+			}
+			return response.text();
+		})
+		.then(data => {
+			var value = data.split('=')[1];
+			console.log(`Got ${param} value ${value}`);
+			return Number(value);
 		})
-		.fail(function(data) {
-			alert('FAILED to get ' + param);
+		.catch(error => {
+			alert(`FAILED to get ${param}`);
+			throw error;
 		});
 }
 
 function setParam(param, value) {
 	points[param] = value;
-	$.get(paramseturl + param + '=' + value)
-		.done(function(data) {
-			console.log('Set ' + param + ' to ' + value);
+	fetch(`${paramseturl}${param}=${value}`)
+		.then(response => {
+			if (!response.ok) {
+				throw new Error(`Setting parameter value, the network response was not ok: ${response.status} ${response.statusText}`);
+			}
+			console.log(`Set ${param} to ${value}`);
 		})
-		.fail(function(jqXHR, textStatus, errorThrown) {
-			alert('FAILED to set ' + param);
+		.catch(error => {
+			alert(`FAILED to set ${param}: ${error.message}`);
 		});
 }
 
@@ -129,7 +156,7 @@ var draw = document.getElementById('draw');
 var infoTxt = document.getElementById('info');
 preview.width = preview.style.width = draw.width = w;
 preview.height = preview.style.height = draw.height = h;
-preview.src = '/axis-cgi/mjpg/video.cgi?resolution=' + w + 'x' + h;
+preview.src = `/axis-cgi/mjpg/video.cgi?resolution=${w}x${h}`;
 var ctx = draw.getContext('2d');
 initWithCurrentValues();
 handleCoord(0, 0);

html/js/opcuagaugereader.js

@@ -32,7 +32,6 @@ <h1>Gauge Reader Settings</h1>
 		<p id="values" style="font-style: italic;">x: , y:</p>
 	</div>
 
-	<script src="js/jquery-3.6.1.min.js"></script>
 	<script src="js/opcuagaugereader.js"></script>
 </body>
 </html>

html/settings.html

@@ -1,5 +1,5 @@
 {
-    "schemaVersion": "1.7.3",
+    "schemaVersion": "1.7.4",
     "acapPackageConf": {
         "setup": {
             "friendlyName": "OPC UA Gauge Reader",
@@ -8,7 +8,7 @@
             "embeddedSdkVersion": "3.0",
             "vendorUrl": "https://www.axis.com/",
             "runMode": "respawn",
-            "version": "2.0.8"
+            "version": "2.1.0"
         },
 		"configuration": {
 			"settingPage": "settings.html",