octoprint-customControl/octoprint_customControl/templates/customControl_hookedsettings.jinja2

<h4>{{ _('Control') }}</h4>

<div style="min-height:15px; margin: 16px 16px; border:1px solid #00e500" id="base" data-bind="contextMenu: { menuSelector: '#controlContextMenu', menuSelected: $root.controlContextMenu }">
</div>

<!-- "width: 588px" to be the same as teh real Control tab-->
<div class="innerSortable" style="width: 588px; clear: both; display: none;" id="customControls" data-bind="visible: loginState.isUser, template: { name: $root.displayMode, foreach: controls }"></div>

<ul id="controlContextMenu" class="dropdown-menu" role="menu" style="display:block;position:fixed !important;margin-bottom:5px;">
	<li>
		<a href="#" cmd="createContainer">{{ _('Create Container') }}</a>
	</li>
</ul>
<ul id="commandContextMenu" class="dropdown-menu" role="menu" style="display:block;position:fixed !important;margin-bottom:5px;">
	<li><a href="#" cmd="editElement">{{ _('Edit') }}</a></li>
	<li><a href="#" cmd="deleteElement">{{ _('Delete') }}</a></li>
	<li class="divider"></li>
	<li class="dropdown-submenu">
		<a href="#">Style</a>
		<ul class="dropdown-menu">
			<li>
				<a href="#" cmd="editStyleNormal">Normal</a>
			</li>
			<li class="btn-primary">
				<a href="#" cmd="editStylePrimary">Primary</a>
			</li>
			<li class="btn-danger">
				<a href="#" cmd="editStyleDanger">Danger</a>
			</li>
			<li class="btn-warning">
				<a href="#" cmd="editStyleWarning">Warning</a>
			</li>
			<li class="btn-success">
				<a href="#" cmd="editStyleSuccess">Success</a>
			</li>
			<li class="btn-info">
				<a href="#" cmd="editStyleInfo">Info</a>
			<li>
			</li>
		</ul>
	</li>
</ul>
<ul id="containerContextMenu" class="dropdown-menu" role="menu" style="display:block;position:fixed !important;margin-bottom:5px;">
	<li class="dropdown-submenu">
		<a href="#">Create Command</a>
		<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>
	<li class="divider"></li>
	<li><a href="#" cmd="editElement">{{ _('Edit') }}</a></li>
	<li><a href="#" cmd="deleteElement">{{ _('Delete') }}</a></li>
</ul>

<!-- Templates for custom controls -->
<script type="text/html" id="settingsCustomControls_containerTemplate_nameless">
    <div class="custom_section sortable" data-bind="contextMenu: { menuSelector: '#containerContextMenu', menuSelected: $root.controlContextMenu }, css: { 'custom_section_vertical_section': name() == '' }, attr: { 'id': id }">
        <!-- ko template: { name: 'settingsCustomControls_containerTemplate', data: $data } --><!-- /ko -->
    </div>
</script>
<script type="text/html" id="settingsCustomControls_containerTemplate_collapsable">
    <div class="custom_section sortable" data-bind="contextMenu: { menuSelector: '#containerContextMenu', menuSelected: $root.controlContextMenu }, attr: { 'id': id }">
        <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>
        <!-- ko template: { name: 'settingsCustomControls_containerTemplate', data: $data } --><!-- /ko -->
    </div>
</script>
<script type="text/html" id="settingsCustomControls_containerTemplate">
    <!-- ko if: layout() == 'vertical' -->
    <div class="custom_section_vertical innerSortable" data-bind="template: { name: $root.displayMode, foreach: children }, css: {hide: collapsed() && name() != '' }"></div>
    <!-- /ko -->

    <!-- ko if: layout() == 'horizontal' -->
    <div class="custom_section_horizontal innerSortable" 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_horizontal_grid innerSortable" data-bind="css: {hide: collapsed() && name() != ''}">
        <!-- ko foreach: children -->
        <div data-bind="template: { name: $root.displayMode }, css: $root.rowCss($data)"></div>
        <!-- /ko -->
    </div>
    <!-- /ko -->
</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 }, css: { 'sortable': $parent.layout() != 'horizontal_grid' }, attr: { 'id': id }">
				<div data-bind="text: console.log($data)"></div>
        <!-- ko template: { name: 'settingsCustomControls_controlTemplate_input', data: $data, if: $data.hasOwnProperty('input') } --><!-- /ko -->
				<!-- ko template: { name: 'settingsCustomControls_controlTemplate_command', data: $data, if: !$data.hasOwnProperty('style') && ($data.hasOwnProperty('command') || $data.hasOwnProperty('commands') || $data.hasOwnProperty('script') || $data.hasOwnProperty('javascript')) } --><!-- /ko -->
        <!-- ko template: { name: 'settingsCustomControls_controlTemplate_command_styled', data: $data, if: $data.hasOwnProperty('style') && ($data.hasOwnProperty('command') || $data.hasOwnProperty('commands') || $data.hasOwnProperty('script') || $data.hasOwnProperty('javascript')) } --><!-- /ko -->
        <!-- ko template: { name: 'settingsCustomControls_controlTemplate_output', data: $data, if: $data.hasOwnProperty('value') } --><!-- /ko -->
    </form>
</script>
<script type="text/html" id="settingsCustomControls_controlTemplate_input">
    <!-- ko foreach: input -->
        <label style="cursor: default" data-bind="text: name"></label>
        <!-- ko if: slider -->
            <input type="number" style="width: 100px" data-bind="slider: {value: value, 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: value, disable: true">
        <!-- /ko -->
    <!-- /ko -->
</script>
<script type="text/html" id="settingsCustomControls_controlTemplate_output">
    <label style="cursor: default" data-bind="text: value"></label>
</script>
<script type="text/html" id="settingsCustomControls_controlTemplate_command">
    <button class="btn" data-bind="text: name" onclick="event.preventDefault()"></button>
</script>
<script type="text/html" id="settingsCustomControls_controlTemplate_command_styled">
    <button data-bind="text: name, attr: { 'class': style }" onclick="event.preventDefault()"></button>
</script>
<!-- End of templates for custom controls -->