octoprint-customControl/octoprint_customControl/templates/customControl.jinja2

<div id="customControlDialog" class="modal hide">
    <div class="modal-header">
        <h3 data-bind="text: title"></h3>
    </div>
    <div class="modal-body">
        <form class="form-horizontal" data-bind="with: element">
            <!-- ko if: $root.type() == "command" || $root.type() == "script" || $root.type() == "container" -->
            <div class="control-group">
                <label class="control-label">{{ _('Name') }}</label>
                <div class="controls">
                    <input style="width: 97%" data-bind="value: name, valueAllowUnset: true"></input>
                </div>
            </div>
            <!-- /ko -->
            <!-- ko if: $root.type() == "container" -->
            <div class="control-group">
                <label class="control-label">{{ _('Layout') }}</label>
                <div class="controls">
                    <select data-bind="options: $parent.layouts, optionsText: 'name', optionsValue: 'key', value: layout, valueAllowUnset: false"></select>
                </div>
            </div>
            <!-- ko if: name && name() != "" -->
            <div class="control-group">
                <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>
                <div class="controls">
                    <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: $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">
                <label class="control-label">{{ _('Inputs') }}</label>
                <div class="row-fluid">
                    <div class="span12">
                        <div data-bind="css: $root.span('name')">{{ _('Name') }}</div>
                        <div data-bind="css: $root.span('parameter')">{{ _('Parameter') }}</div>
                        <div data-bind="css: $root.span('default')">{{ _('Default') }}</div>
                        <!-- ko if: $root.hasSlider -->
                        <div class="span2">{{ _('Min') }}</div>
                        <div class="span2">{{ _('Max') }}</div>
                        <div class="span2">{{ _('Step') }}</div>
                        <!-- /ko -->
                    </div>
                </div>
                <div data-bind="foreach: input">
                    <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 type="number" class="span12" data-bind="value: defaultValue"></input></div>
                        <div class="span2"><input type="number" class="span12" data-bind="value: slider.min"></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>
                    </div>
                </div>
                <div class="row-fluid">
                    <div class="offset10 span1"><a href="#" title="Add Input" class="btn btn-primary" data-bind="click: $root.addInput"><i class="icon-plus"></i></a></div>
                    <div class="span1"><a href="#" title="Add Slider" class="btn btn-primary" data-bind="click: $root.addSliderInput"><i class="icon-plus"></i></a></div>
                </div>
            </div>
            <!-- /ko -->
            <!-- /ko -->

            <!-- 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">
                    <input style="width: 97%" data-bind="value: regex"></input>
                </div>
            </div>
            <div class="control-group">
                <label class="control-label">{{ _('Template') }}</label>
                <div class="controls">
                    <input style="width: 97%" data-bind="value: template"></input>
                </div>
            </div>
            <div class="control-group">
                <label class="control-label">{{ _('Default Message') }}</label>
                <div class="controls">
                    <input style="width: 97%" data-bind="value: defaultValue"></input>
                </div>
            </div>
            <!-- /ko -->
            <!-- /ko -->

            <!-- ko if: $data.parent && $data.parent.layout && $data.parent.layout() == 'horizontal_grid' -->
            <div class="control-group">
                <label class="control-label">{{ _('Width') }}</label>
                <div class="controls">
                    <input data-bind="value: width, valueAllowUnset: false"></input>
                </div>
            </div>
            <div class="control-group">
                <label class="control-label">{{ _('Offset') }}</label>
                <div class="controls">
                    <input data-bind="value: offset, valueAllowUnset: true"></input>
                </div>
            </div>
            <!-- /ko -->
        </form>
    </div>
    <div class="modal-footer">
        <a href="#" class="btn" data-dismiss="modal">{{ _('Cancel') }}</a>
        <a href="#" class="btn btn-primary" data-dismiss="modal" aria-hidden="true">{{ _('Confirm') }}</a>
    </div>
</div>