From 9fbf91db06a6d4f4b5cd8bb45389a731bb86bf22 Mon Sep 17 00:00:00 2001
From: Richard <q@1bpm.net>
Date: Sun, 13 Apr 2025 18:48:02 +0100
Subject: initial

---
 site/app/base/controls.js | 214 ++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 214 insertions(+)
 create mode 100644 site/app/base/controls.js

(limited to 'site/app/base/controls.js')

diff --git a/site/app/base/controls.js b/site/app/base/controls.js
new file mode 100644
index 0000000..331f88b
--- /dev/null
+++ b/site/app/base/controls.js
@@ -0,0 +1,214 @@
+var Control = function(definition) {
+	var self = this;
+	var state = false;
+	var type;
+	var element;
+	var elTextInput;
+	
+	
+	
+	if (!definition.hasOwnProperty("channel")) {
+		definition.channel = definition.name.toLowerCase();
+	}
+	
+	if (!definition.hasOwnProperty("min")) {
+		definition.min = 0;
+	}
+	
+	if (!definition.hasOwnProperty("max")) {
+		definition.max = 1;
+	}
+	
+	if (!definition.hasOwnProperty("step")) {
+		definition.step = 0.000001;
+	}
+	
+	if (!definition.hasOwnProperty("dfault")) {
+		definition.dfault = 0;
+	}
+	
+	Object.defineProperty(this, "element", {
+		get: function() {return element;},
+		set: function(v) {}
+	});
+	
+	Object.defineProperty(this, "textInputElement", {
+		get: function() {return elTextInput;},
+		set: function(v) {}
+	});
+	
+	Object.defineProperty(this, "elementRow", {
+		get: function() {
+			var tr = $("<tr />");
+			$("<td />").text(definition.name).appendTo(tr);
+			$("<td />").append(element).appendTo(tr);
+			var tinput = $("<td />").appendTo(tr);
+			if (elTextInput) {
+				tinput.append(elTextInput);
+			}
+			return tr;
+		},
+		set: function(v) {}
+	});
+	
+	Object.defineProperty(this, "value", {
+		get: function() {
+			var val;
+			if (type == "select") {
+				val = element.val();
+				if (definition.asValue) {
+					val = definition.options[val];
+				}
+			} else if (type == "range") {
+				val = element.val();
+			} else if (type == "checkbox") {
+				val = (element.is(":checked")) ? definition.max : definition.min;
+			} else if (type == "button") {
+				val = 0;
+			} else if (type == "toggle") {
+				val = (state) ? definition.max : definition.min;
+			}
+			
+			return val;
+		},
+		set: function(v) {
+			if (type == "checkbox") {
+				element.prop("checked", v);
+			} else {
+				element.val(v);
+			}
+		}
+	});
+	
+	async function createControl() {
+		if (definition.options) {
+			type = "select";
+			element = $("<select />");
+			for (var o in definition.options) {
+				$("<option />").val(o).text(definition.options[o]).appendTo(element);
+			}
+		} else if (definition.image) {
+			type = "range";
+			var baseurl = "https://apps.csound.1bpm.net/controls/";
+			var response = await fetch(baseurl + definition.image + ".json");
+			var json = await response.json();
+			var width;
+			var height;
+			if (definition.width) {
+				width = definition.width;
+			} else {
+				if (!json.cellw) json.cellw = 32;
+				width = json.cellw;
+			}
+			if (definition.height) {
+				height = definition.height;
+			} else {
+				height = json.cellh;
+			}
+			
+			if (json.ctltype == 0) {
+				element = $("<input />").attr("type", "range").addClass("input-knob").attr("data-diameter", json.cellh).attr("data-src", baseurl + json.fn).attr("data-sprites", json.frames - 1).attr("data-height", height).attr("data-width", width);
+				type = "range";
+			} else if (json.ctltype == 1 || json.ctltype == 3) {
+				element = $("<input />").attr("type", "range").addClass("input-slider").attr("data-height", height).attr("data-src", baseurl + json.fn).attr("data-width", width).attr("data-sprites", json.frames - 1); //.css({width: width, height: height});
+				type = "range";
+			} else if (json.ctltype == 2) {
+				element = $("<input />").attr("type", "checkbox").addClass("input-switch").attr("data-height", height).attr("data-width", width).attr("data-src", baseurl + json.fn);
+				type = "checkbox";
+			}
+		} else {
+			if (!definition.type || definition.type == "range") {
+				type = "range";
+				element = $("<input />").attr("type", "range");
+			} else if (definition.type == "toggle") {
+				type = "toggle";
+				element = $("<button />").text(definition.labelOff);
+			} else if (definition.type == "button") {
+				type = "button";
+				element = $("<button />").text(definition.label);
+			}
+		}
+		
+		if (type == "range") {
+			element.attr("min", definition.min).attr("max", definition.max).attr("step", definition.step);
+			if (!definition.noTextInput) {
+				elTextInput = $("<input />").attr("type", "number").attr("min", definition.min).attr("max", definition.max).attr("step", definition.step).change(function() {
+					change($(this).val());
+				});
+			}
+		}
+		
+		if (definition.onContextMenu) {
+			element.on("contextmenu", definition.onContextMenu);
+		}
+		
+		element.change(function() {
+			if (definition.onChange) {
+				definition.onChange(self.value, self);
+			}
+			if (definition.channel) {
+				sendHost();
+			}
+		});
+		
+		element.on("input", function() {
+			if (type == "range") {
+				if (!definition.noSendOnInput) {
+					sendHost();
+				}
+				if (elTextInput) {
+					elTextInput.text(Math.round(self.value * 100) / 100);
+				}
+			}
+		});
+		
+		function sendHost() {
+			if (window.app) {
+				app.setControlChannel(definition.channel, self.value);
+			}
+		}
+		
+		function change(val) {
+			if (type == "select" || type == "range") {
+				element.val(val);
+			} else if (type == "checkbox") {
+				if (val == 1 || val == true) {
+					element.prop("checked", true);
+				} else {
+					element.prop("checked", false);
+				}
+			} else if (type == "toggle") {
+				if (val == 1 || val == true) {
+					state = true;
+					if (definition.labelOn) {
+						element.text(definition.labelOn);
+					}
+					if (definition.cssOn) {
+						element.css(definition.cssOn);
+					}
+				} else {
+					state = false;
+					if (definition.labelOff) {
+						element.text(definition.labelOff);
+					}
+					if (definition.cssOff) {
+						element.css(definition.cssOff);
+					}
+				}
+			}
+		}
+		change(definition.dfault);
+		if (!definition.noTriggerInit) {
+			element.trigger("change");
+		}
+		
+		if (definition.target) {
+			definition.target.append(element);
+		}
+		
+		if (definition.onReady) {
+			definition.onReady(self);
+		}
+	}
+	createControl();
+};
\ No newline at end of file
-- 
cgit v1.2.3