Adjusted Layout, Bug Fixing, Added Script Command

octoprint_customControl/static/css/customControls.css

@@ -1 +1 @@
-#customControls .custom_section_horizontal{display:inline-block}#customControls .custom_section_vertical_section{min-width:15px;min-height:15px;margin:8px;padding:8px;border:1px dashed #000}#customControls .custom_section_horizontal_section{float:left}#customControls .accordion-toggle h1{display:block;width:100%;padding:0;margin-bottom:20px;font-size:21px;line-height:40px;color:#333;border:0;border-bottom:1px solid #E5E5E5;font-weight:400}
+#customControls .custom_section_horizontal .custom_control{display:inline-block}#customControls .custom_section_vertical .custom_control{display:block}#customControls .custom_section_vertical_section{min-width:15px;min-height:15px;border:1px dashed #000}#customControls .slider.slider-disabled .slider-track{cursor:default!important}#customControls input[disabled]{background:#fff!important;cursor:text!important}#customControls .custom_section h1{cursor:pointer;display:block;width:100%;padding:0;margin-bottom:20px;font-size:21px;line-height:40px;color:#333;border:0;border-bottom:1px solid #E5E5E5;font-weight:400}

octoprint_customControl/static/js/customControl.js

@@ -31,7 +31,7 @@
             }
         };
 
-        self.onStartup = function () {
+        self.onSettingsShown = function () {
             self.requestData();
         };
 
@@ -73,13 +73,19 @@
                 var input = {
                     name: ko.observable(list[i].name),
                     parameter: ko.observable(list[i].parameter),
-                    defaultValue: ko.observable(list[i].defaultValue)
+                    defaultValue: ko.observable(list[i].defaultValue || "0")
                 };
 
-                if (list[i].hasOwnProperty("slider") && typeof list[i].slider == "object")
+                if (list[i].hasOwnProperty("slider") && typeof list[i].slider == "object") {
-                    input.slider = ko.mapping.fromJS(list[i].slider);
+                    input.slider = {
-                else
+                        min: ko.observable(list[i].slider.min),
+                        max: ko.observable(list[i].slider.max),
+                        step: ko.observable(list[i].slider.step),
+                    }
+                }
+                else {
                     input.slider = false;
+                }
 
                 inputs.push(input);
             }
@@ -87,59 +93,50 @@
             return inputs;
         }
         self._processControl = function (parent, control) {
+            if (control.processed) {
+                control.id("settingsCustomControl_id" + self.staticID++);
+            }
+            else {
                 control.id = ko.observable("settingsCustomControl_id" + self.staticID++);
+            }
             control.parent = parent;
 
-            if (control.hasOwnProperty("template") && control.hasOwnProperty("regex") && control.hasOwnProperty("defaultValue")) {
+            if (control.processed) {
+                if (control.hasOwnProperty("children")) {
+                    control.children(self._processControls(control, control.children()));
+                }
+
+                return control;
+            }
+
+            if (control.hasOwnProperty("template") && control.hasOwnProperty("regex")) {
                 control.template = ko.observable(control.template);
                 control.regex = ko.observable(control.regex);
-                control.defaultValue = ko.observable(control.defaultValue);
+                control.defaultValue = ko.observable(control.defaultValue || "");
             }
 
             if (control.hasOwnProperty("children")) {
-                if (control.processed) {
-                    control.children(self._processControls(control, control.children()));
-                    if (control.hasOwnProperty("layout") && !(control.layout() == "vertical" || control.layout() == "horizontal" || control.layout() == "horizontal_grid"))
-                        control.layout("vertical");
-
-                    if (control.hasOwnProperty("name") && control.name() != "") {
-                        if (!control.hasOwnProperty("collapsable"))
-                            control.collapsable = ko.observable(false);
-                    }
-                }
-                else {
                 control.children = ko.observableArray(self._processControls(control, control.children));
                 if (!control.hasOwnProperty("layout") || !(control.layout == "vertical" || control.layout == "horizontal" || control.layout == "horizontal_grid"))
                     control.layout = ko.observable("vertical");
                 else
                     control.layout = ko.observable(control.layout);
 
-                    if (control.hasOwnProperty("name") && control.name != "") {
+                if (control.hasOwnProperty("collapsed"))
-                        if (control.hasOwnProperty("collapsable"))
+                    control.collapsed = ko.observable(control.collapsed);
-                            control.collapsable = ko.observable(control.collapsable);
                 else
-                            control.collapsable = ko.observable(false);
+                    control.collapsed = ko.observable(false);
-                    }
-                }
-            }
-            
-            if (!control.processed) {
-                if (control.hasOwnProperty("name"))
-                    control.name = ko.observable(control.name);
-                else
-                    control.name = ko.observable("");
-
-                control.width = ko.observable(control.hasOwnProperty("width") ? control.width : "2");
-                control.offset = ko.observable(control.hasOwnProperty("offset") ? control.offset : "");
             }
             
             if (control.hasOwnProperty("input")) {
-                if (control.processed)
-                    control.input(self._processInput(control.input()));
-                else
                 control.input = ko.observableArray(self._processInput(control.input));
             }
 
+            control.name = ko.observable(control.name || "");
+
+            control.width = ko.observable(control.hasOwnProperty("width") ? control.width : "2");
+            control.offset = ko.observable(control.hasOwnProperty("offset") ? control.offset : "");
+
             var js;
             if (control.hasOwnProperty("javascript")) {
                 js = control.javascript;
@@ -169,7 +166,7 @@
 
         self.displayMode = function (customControl) {
             if (customControl.hasOwnProperty("children")) {
-                return (customControl.hasOwnProperty("name") && customControl.name() != "") ? "settingsCustomControls_containerTemplate_accordion" : "settingsCustomControls_containerTemplate";
+                return (customControl.hasOwnProperty("name") && customControl.name() != "") ? "settingsCustomControls_containerTemplate_collapsable" : "settingsCustomControls_containerTemplate_nameless";
             } else {
                 return "settingsCustomControls_controlTemplate";
             }
@@ -204,7 +201,7 @@
         }
 
         self.createElement = function (invokedOn, contextParent, selectedMenu) {
-            if (invokedOn.attr('id') == "base") {
+            if (contextParent.attr('id') == "base") {
                 self.customControlDialogViewModel.reset();
 
                 self.customControlDialogViewModel.show(function (ret) {
@@ -266,23 +263,49 @@
 
             if (element.hasOwnProperty("name")) {
                 data.name = element.name();
-                data.collapsable = element.hasOwnProperty("collapsable") ? element.collapsable() : false;
+            }
+            if (element.hasOwnProperty("template")) {
+                data.template = element.template();
+                data.regex = element.regex();
+                data.defaultValue = element.defaultValue() || "";
+
+                title = "Edit Output";
+                type = "output";
             }
             if (element.hasOwnProperty("layout")) {
                 data.layout = element.layout();
+                data.collapsed = element.collapsed();
+
                 title = "Edit Container";
                 type = "container";
             }
             if (element.hasOwnProperty("command")) {
                 data.commands = element.command;
+
                 title = "Edit Command";
                 type = "command";
             }
             if (element.hasOwnProperty("commands")) {
-                data.commands = element.commands;
+                var commands = "";
+                _.each(element.commands, function (e, index, list) {
+                    commands += e;
+                    if (index < list.length)
+                        commands += '\n';
+                });
+                data.commands = commands;
+
                 title = "Edit Command";
                 type = "command";
             }
+            if (element.hasOwnProperty("script")) {
+                data.script = element.script;
+
+                title = "Edit Script command";
+                type = "script";
+            }
+            if (element.hasOwnProperty("confirm")) {
+                data.confirm = element.confirm;
+            }
             if (element.hasOwnProperty("input"))
             {
                 data.input = [];
@@ -290,20 +313,13 @@
                     data.input[index] = ko.mapping.toJS(element);
                 });
             }
-            if (element.hasOwnProperty("template")) {
-                data.template = element.template();
-                title = "Edit Output";
-                type = "output";
-            }
-            if (element.hasOwnProperty("regex"))
-                data.regex = element.regex();
-            if (element.hasOwnProperty("defaultValue"))
-                data.defaultValue = element.defaultValue();
 
-            if (element.hasOwnProperty("width"))
+            if (element.hasOwnProperty("width")) {
                 data.width = element.width();
-            if (element.hasOwnProperty("offset"))
+            }
+            if (element.hasOwnProperty("offset")) {
                 data.offset = element.offset();
+            }
 
             self.customControlDialogViewModel.reset(data);
             self.customControlDialogViewModel.title(gettext(title));
@@ -314,67 +330,65 @@
 
                 switch (self.customControlDialogViewModel.type()) {
                     case "container": {
-                        if (ret.hasOwnProperty("name"))
                         element.name(ret.name);                           
-                           
                         element.layout(ret.layout);
-
+                        element.collapsed(ret.collapsed);
-                        if (ret.hasOwnProperty("collapsable") != "") {
-                            if (element.hasOwnProperty("collapsable")) {
-                                if (!ret.collapsable) {
-                                    var e = $('#toggle_' + element.id());
-                                    if (e)
-                                        e.height("auto");
-
-                                    e = $('#' + element.id() + ' div.accordion-heading a h1');
-                                    if (e)
-                                        e.removeClass('icon-caret-right');
-                                }
-
-                                element.collapsable(ret.collapsable);
-                            }
-                            else
-                                element.collapsable = ko.observable(ret.collapsable);
-                        }
-                        else {
-                            if (element.hasOwnProperty("collapsable")) {
-                                element.collapsable(false);
-                                delete element.collapsable;
-                            }
-
-                            var e = $('#toggle_' + element.id());
-                            if (e)
-                                e.height("auto");
-
-                            e = $('#' + element.id() + ' div.accordion-heading a h1');
-                            if (e)
-                                e.removeClass('icon-caret-right');
-                        }
                         break;
                     }
                     case "command": {
-                        if (ret.hasOwnProperty("name"))
                         element.name(ret.name);
 
-                        delete element.command;
+                        if (ret.command != undefined) {
-                        delete element.commands;
-
-                        if (ret.command != undefined)
                             element.command = ret.command;
-                        if (ret.commands != undefined)
+                            delete element.commands;
+                        }
+                        if (ret.commands != undefined) {
                             element.commands = ret.commands;
+                            delete element.command;
+                        }
+
+                        if (ret.confirm != "") {
+                            element.confirm = ret.confirm;
+                        }
 
                         if (ret.input != undefined) {
                             element.input(self._processInput(ret.input));
                         }
                         else
                             delete element.input;
+
+                        // Command can also be a output
+                        if (ret.hasOwnProperty("template")) {
+                            if (element.hasOwnProperty("template"))
+                                element.template(ret.template);
+                            else
+                                element.template = ko.observable(ret.template);
+
+                            if (element.hasOwnProperty("regex"))
+                                element.regex(ret.regex);
+                            else
+                                element.regex = ko.observable(ret.regex);
+
+                            if (element.hasOwnProperty("defaultValue"))
+                                element.defaultValue(ret.defaultValue);
+                            else
+                                element.defaultValue = ko.observable(ret.defaultValue);
+                        }
+                        else
+                        {
+                            if (element.hasOwnProperty("defaultValue"))
+                                element.defaultValue(undefined);
+
+                            delete element.template;
+                            delete element.regex;
+                            delete element.defaultValue;
+                        }
                         break;
                     }
                     case "output": {
                         element.template(ret.template);
                         element.regex(ret.regex);
-                        element.deflt(ret.deflt);
+                        element.defaultValue(ret.defaultValue);
                         break;
                     }
                 }
@@ -392,33 +406,41 @@
         self.controlContextMenu = function (invokedOn, contextParent, selectedMenu)
         {
             switch (selectedMenu.attr('cmd')) {
-                case "createContainer": {
+                case "editElement": {
-                    self.customControlDialogViewModel.title(gettext("Create container"));
+                    self.editElement(invokedOn, contextParent, selectedMenu);
-                    self.customControlDialogViewModel.type("container");
-
-                    self.createElement(invokedOn, contextParent, selectedMenu);
-                    break;
-                }
-                case "createCommand": {
-                    self.customControlDialogViewModel.title(gettext("Create Command"));
-                    self.customControlDialogViewModel.type("command");
-
-                    self.createElement(invokedOn, contextParent, selectedMenu);
-                    break;
-                }
-                case "createOutput": {
-                    self.customControlDialogViewModel.title(gettext("Create Output"));
-                    self.customControlDialogViewModel.type("output");
-
-                    self.createElement(invokedOn, contextParent, selectedMenu);
                     break;
                 }
                 case "deleteElement": {
                     self.deleteElement(invokedOn, contextParent, selectedMenu);
                     break;
                 }
-                case "editElement": {
+                default: {
-                    self.editElement(invokedOn, contextParent, selectedMenu);
+                    if (selectedMenu.attr('cmd').startsWith("create")) {
+                        switch (selectedMenu.attr('cmd')) {
+                            case "createContainer": {
+                                self.customControlDialogViewModel.title(gettext("Create container"));
+                                self.customControlDialogViewModel.type("container");
+                                break;
+                            }
+                            case "createCommand": {
+                                self.customControlDialogViewModel.title(gettext("Create Command"));
+                                self.customControlDialogViewModel.type("command");
+                                break;
+                            }
+                            case "createScript": {
+                                self.customControlDialogViewModel.title(gettext("Create Script"));
+                                self.customControlDialogViewModel.type("script");
+                                break;
+                            }
+                            case "createOutput": {
+                                self.customControlDialogViewModel.title(gettext("Create Output"));
+                                self.customControlDialogViewModel.type("output");
+                                break;
+                            }
+                        }
+
+                        self.createElement(invokedOn, contextParent, selectedMenu);
+                    }
                     break;
                 }
             }

octoprint_customControl/static/js/customControlDialog.js

@@ -8,6 +8,8 @@
         self.type = ko.observable("container");
 
         self.useInputs = ko.observable(false);
+        self.useConfirm = ko.observable(false);
+        self.useOutput = ko.observable(false);
         self.useJavaScript = ko.observable(false);
         self.useEnabled = ko.observable(false);
 
@@ -19,7 +21,8 @@
         self.types = ko.observableArray([
             { name: gettext("Container"), key: "container" },
             { name: gettext("Command"), key: "command" },
-            { name: gettext("Output"), key: "output" }
+            { name: gettext("Script"), key: "script" },
+            { name: gettext("Output"), key: "output" },
         ]);
 
         self.hasSlider = ko.computed(function () {
@@ -56,8 +59,9 @@
         self.reset = function (data) {
             var element = {
                 name: undefined,
-                collapsable: true,
+                collapsed: false,
                 commands: "",
+                confirm: "",
                 defaultValue: "",
                 script: "",
                 javascript: "",
@@ -72,20 +76,15 @@
                 parent: undefined
             };
 
-            if (typeof data == "object")
+            if (typeof data == "object") {
                 element = _.extend(element, data);
 
-            var mapped = ko.mapping.fromJS(element);
+                self.useConfirm(data.hasOwnProperty("confirm"));
-            if (data.hasOwnProperty("input")) {
+                self.useInputs(data.hasOwnProperty("input"));
-                self.useInputs(true);
+                self.useOutput(data.hasOwnProperty("template"));
-
-                //_.each(mapped.input(), function (e, index, list) {
-                //    if (e.hasOwnProperty("slider") && !$.isFunction(e.slider))
-                //        e.slider = ko.observable(e.slider);
-                //});
             }
 
-            self.element(mapped);
+            self.element(ko.mapping.fromJS(element));
         }
         self.show = function (f) {
             var dialog = $("#customControlDialog");
@@ -99,14 +98,9 @@
                     case "container": {
                         el.name = obj.name;
                         el.layout = obj.layout;
-                        if (obj.name != "")
+                        el.collapsed = obj.collapsed;
-                            el.collapsable = obj.collapsable;
 
                         el.children = [];
-
-                        el.width = obj.width;
-                        el.offset = obj.offset;
-
                         break;
                     }
                     case "command": {
@@ -114,10 +108,51 @@
                         if (obj.commands.indexOf('\n') == -1)
                             el.command = obj.commands;
                         else
-                            el.commands = obj.commands;
+                            el.commands = obj.commands.split('\n');
 
-                        el.width = obj.width;
+                        if (self.useConfirm()) {
-                        el.offset = obj.offset;
+                            el.confirm = obj.confirm;
+                        }
+
+                        if (self.useInputs()) {
+                            el.input = [];
+                            _.each(obj.input, function (element, index, list) {
+                                var input = {
+                                    name: element.name,
+                                    parameter: element.parameter,
+                                    defaultValue: element.defaultValue
+                                };
+                                if (element.hasOwnProperty("slider") && element.slider != false) {
+                                    input["slider"] = {
+                                    };
+
+                                    if (element.slider.hasOwnProperty("min") && element.slider.min != "")
+                                        input.slider.min = element.slider.min;
+                                    if (element.slider.hasOwnProperty("max") && element.slider.max != "")
+                                        input.slider.max = element.slider.max;
+                                    if (element.slider.hasOwnProperty("step") && element.slider.step != "")
+                                        input.slider.step = element.slider.step;
+                                }
+
+                                el.input.push(input);
+                            });
+                        }
+
+                        if (self.useOutput()) {
+                            el.template = obj.template;
+                            el.regex = obj.regex;
+                            el.defaultValue = obj.defaultValue;
+                        }
+                        break;
+                    }
+                    case "script":
+                        {
+                            el.name = obj.name;
+                            el.script = obj.script;
+
+                            if (self.useConfirm()) {
+                                el.confirm = obj.confirm;
+                            }
 
                             if (self.useInputs()) {
                                 el.input = [];
@@ -148,13 +183,13 @@
                         el.template = obj.template;
                         el.regex = obj.regex;
                         el.defaultValue = obj.defaultValue;
+                        break;
+                    }
+                }
 
                 el.width = obj.width;
                 el.offset = obj.offset;
 
-                        break;
-                    }
-                }
                 f(el);
             });
 

octoprint_customControl/static/less/customControls.less

@@ -1,20 +1,29 @@
 #customControls {
-    .custom_section_horizontal {
+    .custom_section_horizontal .custom_control {
         display:inline-block;
     }
+    .custom_section_vertical .custom_control {
+        display:block;
+    }
     .custom_section_vertical_section {
         min-width:15px; 
         min-height:15px;
         
-        margin: 8px 8px; 
-        padding: 8px 8px; 
-        
         border:1px dashed #000000;
     }
-    .custom_section_horizontal_section {
+
-        float:left;
+    .slider.slider-disabled .slider-track {
+        cursor: default !important;
     }
-    .accordion-toggle h1 {
+
+    input[disabled] {
+        background: #fff !important;
+        cursor: text !important;
+    }
+
+    .custom_section {
+        h1 {
+            cursor: pointer;
             display: block;
             width: 100%;
             padding: 0;
@@ -27,3 +36,4 @@
             font-weight: normal;
         }
     }
+}

octoprint_customControl/templates/octoprint_customControl.jinja2

@@ -4,7 +4,7 @@
     </div>
     <div class="modal-body">
         <form class="form-horizontal" data-bind="with: element">
-            <!-- ko if: $root.type() == "command" || $root.type() == "container" -->
+            <!-- ko if: $root.type() == "command" || $root.type() == "script" || $root.type() == "container" -->
             <div class="control-group">
                 <label class="control-label">{{ _('Name') }}</label>
                 <div class="controls">
@@ -21,11 +21,12 @@
             </div>
             <!-- ko if: name && name() != "" -->
             <div class="control-group">
-                <label class="control-label"><input type="checkbox" data-bind="checked: collapsable"></input>{{ _('Make Collapsable') }}</label>
+                <label class="control-label"><input type="checkbox" data-bind="checked: collapsed"></input>{{ _('Make Collapsed') }}</label>
             </div>
             <!-- /ko -->
             <!-- /ko -->
 
+            <!-- ko if: $root.type() == "command" || $root.type() == "script" -->
             <!-- ko if: $root.type() == "command" -->
             <div class="control-group">
                 <label class="control-label">{{ _('Commands') }}</label>
@@ -33,9 +34,32 @@
                     <textarea style="width: 97%; height: auto" data-bind="value: commands"></textarea>
                 </div>
             </div>
+            <!-- /ko -->
+            <!-- ko if: $root.type() == "script" -->
+            <div class="control-group">
+                <label class="control-label">{{ _('Script') }}</label>
+                <div class="controls">
+                    <input style="width: 97%" data-bind="value: script"></input>
+                </div>
+            </div>
+            <!-- /ko -->
 
             <div class="control-group">
-                <label class="control-label"><input type="checkbox" data-bind="checked: $parent.useInputs"></input>{{ _('Use Inputs') }}</label>
+                <label class="control-label"><input type="checkbox" data-bind="checked: $root.useConfirm"></input>{{ _('Use Confirmation') }}</label>
+            </div>
+            <!-- ko if: $root.useConfirm() -->
+            <div class="control-group">
+                <label class="control-label">{{ _('Message') }}</label>
+                <div class="controls">
+                    <input style="width: 97%" data-bind="value: confirm"></input>
+                </div>
+            </div>
+            <!-- /ko -->
+            <!-- /ko -->
+
+            <!-- ko if: $root.type() == "command" || $root.type() == "script"-->
+            <div class="control-group">
+                <label class="control-label"><input type="checkbox" data-bind="checked: $root.useInputs"></input>{{ _('Use Inputs') }}</label>
             </div>
             <!-- ko if: $root.useInputs -->
             <div class="control-group">
@@ -56,11 +80,14 @@
                     <div class="row-fluid" style="margin-bottom: 5px">
                         <div data-bind="css: $root.span('name')"><input class="span12" data-bind="value: name"></input></div>
                         <div data-bind="css: $root.span('parameter')"><input class="span12" data-bind="value: parameter"></input></div>
+                        <!-- ko ifnot: slider -->
                         <div data-bind="css: $root.span('default')"><input class="span12" data-bind="value: defaultValue"></input></div>
+                        <!-- /ko -->
                         <!-- ko if: slider -->
-                        <div class="span2"><input class="span12" data-bind="value: slider.min"></input></div>
+                        <div class="span2"><input type="number" class="span12" data-bind="value: defaultValue"></input></div>
-                        <div class="span2"><input class="span12" data-bind="value: slider.max"></input></div>
+                        <div class="span2"><input type="number" class="span12" data-bind="value: slider.min"></input></div>
-                        <div class="span1"><input class="span12" data-bind="value: slider.step"></input></div>
+                        <div class="span2"><input type="number" class="span12" data-bind="value: slider.max"></input></div>
+                        <div class="span1"><input type="number" class="span12" data-bind="value: slider.step"></input></div>
                         <div class="span1"><a href="#" title="Remove Input" class="btn btn-danger" data-bind="click: $root.removeInput"><i class="icon-trash"></i></a></div>
                         <!-- /ko -->
                         <div class="span1" data-bind="ifnot: slider, css: { 'offset5': $root.hasSlider() }"><a href="#" title="Remove Input" class="btn btn-danger" data-bind="click: $root.removeInput"><i class="icon-trash"></i></a></div>
@@ -74,7 +101,11 @@
             <!-- /ko -->
             <!-- /ko -->
 
-            <!-- ko if: $root.type() == "output" -->
+            <!-- ko if: $root.type() == "command" -->
+            <div class="control-group">
+                <label class="control-label"><input type="checkbox" data-bind="checked: $root.useOutput"></input>{{ _('Use Output') }}</label>
+            </div>
+            <!-- ko if: $root.type() == "output" || ($root.type() == "command" && $root.useOutput()) -->
             <div class="control-group">
                 <label class="control-label">{{ _('Regex') }}</label>
                 <div class="controls">
@@ -94,6 +125,7 @@
                 </div>
             </div>
             <!-- /ko -->
+            <!-- /ko -->
 
             <!-- ko if: $data.parent && $data.parent.layout && $data.parent.layout() == 'horizontal_grid' -->
             <div class="control-group">

octoprint_customControl/templates/octoprint_customControl_settings.jinja2

@@ -36,6 +36,7 @@
 		<ul class="dropdown-menu">
             <li><a href="#" cmd="createContainer">{{ _('Container') }}</a></li>
 			<li><a href="#" cmd="createCommand">{{ _('Command') }}</a></li>
+			<li><a href="#" cmd="createScript">{{ _('Script Command') }}</a></li>
 			<li><a href="#" cmd="createOutput">{{ _('Output') }}</a></li>
 		</ul>
 	</li>
@@ -45,78 +46,56 @@
 </ul>
 
 <!-- Templates for custom controls -->
-<script type="text/html" id="settingsCustomControls_containerTemplate">
+<script type="text/html" id="settingsCustomControls_containerTemplate_nameless">
-    <div class="custom_container custom_section_vertical_section" data-bind="contextMenu: { menuSelector: '#containerContextMenu', menuSelected: $root.controlContextMenu }, attr: { 'id': id }, css: { 'custom_section_horizontal_section': $parent && $parent.layout == 'horizontal' }">
+    <div class="custom_section" data-bind="contextMenu: { menuSelector: '#containerContextMenu', menuSelected: $root.controlContextMenu }, css: { 'custom_section_vertical_section': name() == '' }, attr: { 'id': id }">
-        <!-- ko if: layout() == 'vertical' -->
+        <!-- ko template: { name: 'settingsCustomControls_containerTemplate', data: $data } --><!-- /ko -->
-        <div class="custom_section custom_section_vertical" data-bind="template: { name: $root.displayMode, foreach: children }"></div>
-        <!-- /ko -->
-
-        <!-- ko if: layout() == 'horizontal' -->
-        <div class="custom_section custom_section_horizontal" data-bind="template: { name: $root.displayMode, foreach: children }"></div>
-        <!-- /ko -->
-
-        <!-- ko if: layout() == 'horizontal_grid' -->
-        <div class="row-fluid custom_section custom_section_horizontal_grid">
-            <!-- ko foreach: children -->
-            <div data-bind="template: { name: $root.displayMode }, css: $root.rowCss($data)"></div>
-            <!-- /ko -->
-        </div>
-        <!-- /ko -->
     </div>
 </script>
-<script type="text/html" id="settingsCustomControls_containerTemplate_accordion">
+<script type="text/html" id="settingsCustomControls_containerTemplate_collapsable">
-    <div class="custom_container accordion-group" data-bind="contextMenu: { menuSelector: '#containerContextMenu', menuSelected: $root.controlContextMenu }, attr: { 'id': id }, css: { 'custom_section_horizontal_section': ($parent && $parent.layout && $parent.layout() == 'horizontal') }">
+    <div class="custom_section" data-bind="contextMenu: { menuSelector: '#containerContextMenu', menuSelected: $root.controlContextMenu }, css: { 'custom_section_vertical_section': name() == '' }, attr: { 'id': id }">
-        <!-- ko if: name -->
+        <h1 onclick="$(this).children().first().toggleClass('icon-caret-down icon-caret-right').parent().next().slideToggle('fast')"><i data-bind="css: {'icon-caret-down': !collapsed(), 'icon-caret-right': collapsed()}"></i> <span data-bind="text: name"></span></h1>
-        <div class="accordion-heading">
+        <!-- ko template: { name: 'settingsCustomControls_containerTemplate', data: $data } --><!-- /ko -->
-            <a class="accordion-toggle" style="display: block; text-decoration: none" data-bind="style: { 'cursor': collapsable() ? '' : 'default' }, attr: { 'data-target': collapsable() ? '#toggle_' + id() : '', 'data-toggle': collapsable() ? 'collapse' : '', 'onclick':  collapsable() ? '$(this).children().toggleClass(\'icon-caret-down icon-caret-right\')' : '' }">
-                <h1 data-bind="text: name, css: { 'icon-caret-down': collapsable }"></h1>
-            </a>
     </div>
+</script>
+<script type="text/html" id="settingsCustomControls_containerTemplate">
+    <!-- ko if: layout() == 'vertical' -->
+    <div class="custom_section_vertical" data-bind="template: { name: $root.displayMode, foreach: children }, css: {hide: collapsed() && name() != '' }"></div>
     <!-- /ko -->
 
-        <!-- ko if: layout -->
-        <div class="accordion-body" data-bind="attr: { 'id': 'toggle_' + id() }, css: { 'collapse in': collapsable }">
-            <!-- ko if: layout() == 'vertical' -->
-            <div class="custom_section custom_section_vertical accordion-inner" data-bind="template: { name: $root.displayMode, foreach: children }"></div>
-            <!-- /ko -->
     <!-- ko if: layout() == 'horizontal' -->
-            <div class="custom_section custom_section_horizontal accordion-inner" data-bind="template: { name: $root.displayMode, foreach: children }"></div>
+    <div class="custom_section_horizontal" data-bind="template: { name: $root.displayMode, foreach: children }, css: {hide: collapsed() && name() != '' }"></div>
     <!-- /ko -->
+
     <!-- ko if: layout() == 'horizontal_grid' -->
-            <div class="row-fluid custom_section custom_section_horizontal_grid accordion-inner">
+    <div class="row-fluid custom_section_horizontal_grid" data-bind="css: {hide: collapsed() && name() != ''}">
         <!-- ko foreach: children -->
         <div data-bind="template: { name: $root.displayMode }, css: $root.rowCss($data)"></div>
         <!-- /ko -->
     </div>
     <!-- /ko -->
-        </div>
-        <!-- /ko -->
-    </div>
 </script>
 <script type="text/html" id="settingsCustomControls_controlTemplate">
     <form class="form-inline custom_control" style="min-height:15px; border:1px dotted #000000" data-bind="contextMenu: { menuSelector: '#commandContextMenu', menuSelected: $root.controlContextMenu }, attr: { 'id': id }">
         <!-- ko template: { name: 'settingsCustomControls_controlTemplate_input', data: $data, if: $data.hasOwnProperty('input') } --><!-- /ko -->
         <!-- ko template: { name: 'settingsCustomControls_controlTemplate_command', data: $data, if: $data.hasOwnProperty('command') || $data.hasOwnProperty('commands') || $data.hasOwnProperty('script') || $data.hasOwnProperty('javascript') } --><!-- /ko -->
-        <!-- ko template: { name: 'settingsCustomControls_controlTemplate_output', data: $data, if: $data.hasOwnProperty('defaultValue') } --><!-- /ko -->
+        <!-- ko template: { name: 'settingsCustomControls_controlTemplate_output', data: $data, if: $data.hasOwnProperty('defaultValue') && defaultValue() } --><!-- /ko -->
     </form>
 </script>
 <script type="text/html" id="settingsCustomControls_controlTemplate_input">
     <!-- ko foreach: input -->
-    <div class="form-inline">
         <label style="cursor: default" data-bind="text: name"></label>
         <!-- ko if: slider -->
-            <input type="number" style="width: 100px" data-bind="slider: {value: defaultValue, min: slider.min(), max: slider.max(), step: slider.step()}">
+            <input type="number" style="width: 100px" data-bind="slider: {value: defaultValue, min: slider.min(), max: slider.max(), step: slider.step(), enabled: false }">
         <!-- /ko -->
         <!-- ko ifnot: slider -->
-            <input type="text" class="input-small" data-bind="attr: {placeholder: name}, value: defaultValue">
+            <input type="text" class="input-small" data-bind="attr: {placeholder: name}, value: defaultValue, disable: true">
         <!-- /ko -->
-    </div>
     <!-- /ko -->
 </script>
 <script type="text/html" id="settingsCustomControls_controlTemplate_output">
     <label style="cursor: default" data-bind="text: defaultValue"></label>
 </script>
 <script type="text/html" id="settingsCustomControls_controlTemplate_command">
-    <button class="btn" data-bind="text: name"></button>
+    <button class="btn" data-bind="text: name" onclick="event.preventDefault()"></button>
 </script>
 <!-- End of templates for custom controls -->