diff options
Diffstat (limited to 'site/app/base/controls.js')
| -rw-r--r-- | site/app/base/controls.js | 214 |
1 files changed, 214 insertions, 0 deletions
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 |