<form class="form-horizontal"> <ul class="nav nav-pills" id="klipper-settings"> <li><a href="#basic" data-toggle="tab" data-profile-type="klipper-basic">{{ _('Basic') }}</a></li> <li><a href="#macros" data-toggle="tab" data-profile-type="klipper-macros">{{ _('Macros') }}</a></li> <li><a href="#level" data-toggle="tab" data-profile-type="klipper-bed">{{ _('Bed Leveling') }}</a></li> <li><a href="#conf" data-toggle="tab" data-profile-type="klipper-config">{{ _('Klipper Configuration') }}</a></li> </ul> <div class="tab-content"> <!-- Basics --> <div class="tab-pane active" id="basic"> <div class="control-group"> <label class="control-label">{{ _('Serial Port') }}</label> <div class="controls"> <input type="text" class="input-block-level" data-bind="value: settings.settings.plugins.klipper.connection.port" /> </div> </div> <div class="control-group"> <label class="control-label">{{ _('Replace Connection Panel') }}</label> <div class="controls"> <input class="controls-checkbox" title="{{ _('Replace Connection Panel') }}" type="checkbox" data-bind="checked: settings.settings.plugins.klipper.connection.replace_connection_panel"> </div> </div> <div class="control-group border"> <label class="control-label">{{ _('Show Short Messages') }}</label> <div class="controls"> <label class="checkbox" title="{{ _('on NavBar') }}"><input type="checkbox" data-bind="checked: settings.settings.plugins.klipper.configuration.shortStatus_navbar" /> {{ _('on NavBar') }}</label> <label class="checkbox" title="{{ _('on SideBar') }}"><input type="checkbox" data-bind="checked: settings.settings.plugins.klipper.configuration.shortStatus_sidebar" /> {{ _('on SideBar') }}</label> </div> </div> <div class="control-group"> <label class="control-label">{{ _('Enable debug logging') }}</label> <div class="controls"> <input class="controls-checkbox" title="{{ _('Enable debug logging') }}" type="checkbox" data-bind="checked: settings.settings.plugins.klipper.configuration.debug_logging" /> </div> </div> <div class="control-group border"> <label class="control-label">{{ _('Config Editor') }}</label> <div class="controls"> <label class="checkbox" title="{{ _('Check parsing on save') }}"><input type="checkbox" data-bind="checked: settings.settings.plugins.klipper.configuration.parse_check" /> {{ _('Check parsing on save') }} </label> <label title="{{ _('Fontsize') }}"><input type="text" class="input-block-level span1" data-bind="value: settings.settings.plugins.klipper.configuration.fontsize, event: { change: checkFontsize}" /> {{ _('Fontsize') }} </label> </div> </div> <div class="control-group"> <label class="control-label">{{ _('Klipper Config Directory') }}</label> <div class="controls"> <input type="text" class="input-block-level" data-bind="value: settings.settings.plugins.klipper.configuration.configpath" /> </div> </div> <div class="control-group"> <label class="control-label" title="{{ _('The filename of the base config that Klipper is loading. (default is printer.cfg)') }}">{{ _('Klipper Base Config Filename') }}</label> <div class="controls"> <input type="text" class="input-block-level" data-bind="value: settings.settings.plugins.klipper.configuration.baseconfig" /> </div> </div> <div class="control-group"> <label class="control-label">{{ _('Klipper Log File') }}</label> <div class="controls"> <input type="text" class="input-block-level" data-bind="value: settings.settings.plugins.klipper.configuration.logpath" /> </div> </div> <div class="control-group border"> <label class="control-label">{{ _('Configuration Reload Command') }}</label> <div class="controls"> <select data-bind="value: settings.settings.plugins.klipper.configuration.reload_command"> <option value="RESTART">RESTART</option> <option value="FIRMWARE_RESTART">FIRMWARE_RESTART</option> </select> <span class="help-block" style="margin-top:5px;"> {{ _('The command that is executed if you want to restart klipper.') }} </span> <label class="checkbox" title="{{ _('Reload klipper on editor save?') }}"><input type="checkbox" data-bind="checked: settings.settings.plugins.klipper.configuration.restart_onsave" /> {{ _('Reload klipper on editor save?') }} </label> </div> </div> <div class="control-group"> <label class="control-label">{{ _('Config Backup') }}</label> <div class="controls"> <button class="btn btn-small" data-bind='click: showBackupsDialog' title="{{ _('Show Backups') }}"> <i class="fas fa-upload"></i> {{ _('Show Backups') }} </button> </div> </div> </div> <!-- Macros --> <div class="tab-pane" id="macros"> <div class="control-group" style="margin-bottom: 0px;"> <div class="controls" style="margin-left: 82px;"> <div class="row-fluid"> <div class="span8" style="text-align: right"><small>{{ _('Add macro button to:') }}</small></div> <div class="span1" style="margin: auto;text-align: center"><small>{{ _('Klipper Tab') }}</small></div> <div class="span2" style="margin: auto;"><small>{{ _('Sidebar') }}</small></div> </div> </div> </div> <div data-bind="foreach: settings.settings.plugins.klipper.macros"> <div class="control-group" id="item"> <label class="control-label">{{ _('Name') }}</label> <div class="controls" style="margin-left: 82px;"> <div class="row-fluid"> <div class="span8"> <input type="text" class="input-block-level" data-bind="value: name" /> </div> <div class="span1" style="margin: auto; text-align: center;"> <input title="{{ _('Klipper Tab') }}" style="margin: auto;" type="checkbox" class="input-block-level" data-bind="checked: tab" /> </div> <div class="span1" style="margin: auto; text-align: center;"> <input title="{{ _('Sidebar') }}" style="margin: auto;" type="checkbox" class="input-block-level" data-bind="checked: sidebar" /> </div> <div class="span2" style="margin: auto; text-align: center;"> <a href='#' style="vertical-align: bottom;" data-bind='click: $parent.moveMacroUp' class="fa fa-chevron-up"></a> <a href='#' style="vertical-align: bottom;" data-bind='click: $parent.moveMacroDown' class="fa fa-chevron-down"></a> <a href='#' style="vertical-align: bottom;" data-bind='click: $parent.removeMacro' class="fa fa-trash-o"></a> </div> </div> </div> <label class="control-label">{{ _('Command') }}</label> <div class="controls" style="margin-left: 82px;"> <div class="row-fluid"> <div class="span12" style="margin-top:2px;"> <textarea rows="2" class="block" data-bind="value: macro"> </textarea> </div> </div> </div> </div> </div> <div class="control-group"> <div class="controls"> <a href='#' data-bind='click: addMacro' title="{{ _('Add Macro') }}" class="fa fa-plus-circle"></a> {{ _('Add Macro') }} </div> </div> <div class="control-group"> <span class="help-block"> {{ _('To show a dialog that asks for parameters you can write your macro like in the following example:') }}<br /> </span> </div> <div class="control-group"> <pre> PID_CALIBRATE HEATER={label:Heater, default:extruder, options:extruder|extruder1} TARGET={label:Target Temperature, unit:°C, default:190} WRITE_FILE={label:Write to File, default:0, options:0|1} </pre> </div> </div> <!-- Leveling --> <div class="tab-pane" id="level"> <div class="control-group"> <span class="help-block"> {{ _('This feature assists in manually leveling you print bed by moving the head to the defined points in sequence.<br /> If you use a piece of paper for leveling, set "Probe Height" to the paper thickness eg. "0.1".') }} </span> </div> <div class="control-group"> <label class="control-label">{{ _('Probe Height') }}</label> <div class="controls"> <div class="input-append"> <input type="text" class="input-block-level span3" data-bind="value: settings.settings.plugins.klipper.probe.height" /> <span class="add-on">mm</span> </div> <span class="help-inline">{{ _('Z-height to probe at') }}</span> </div> </div> <div class="control-group"> <label class="control-label">{{ _('Probe Lift') }}</label> <div class="controls"> <div class="input-append"> <input type="text" class="input-block-level span3" data-bind="value: settings.settings.plugins.klipper.probe.lift" /> <span class="add-on">mm</span> </div> <span class="help-inline">{{ _('Lift Head by this amount before moving.') }}</span> </div> </div> <div class="control-group"> <label class="control-label">{{ _('Probe Feedrate Z') }}</label> <div class="controls"> <div class="input-append"> <input type="text" class="input-block-level span3" data-bind="value: settings.settings.plugins.klipper.probe.speed_z" /> <span class="add-on">mm/min</span> </div> </div> </div> <div class="control-group"> <label class="control-label">{{ _('Feedrate X/Y') }}</label> <div class="controls"> <div class="input-append"> <input type="text" class="input-block-level span3" data-bind="value: settings.settings.plugins.klipper.probe.speed_xy" /> <span class="add-on">mm/min</span> </div> </div> </div> <div class="control-group"> <h5>{{ _('Probe Points') }}</h5> <div class="controls"> <div class="row-fluid"> <div class="span3">name</div> <div class="span3">x(mm)</div> <div class="span3">y(mm)</div> <div class="span3"> </div> </div> </div> </div> <div data-bind="foreach: settings.settings.plugins.klipper.probe.points" class="control-group"> <label class="control-label" data-bind="text: $index"></label> <div class="controls"> <div class="row-fluid"> <div class="span3"><input type="text" class="input-block-level" data-bind="value: name" /></div> <div class="span3"><input type="text" class="input-block-level" data-bind="value: x" /></div> <div class="span3"><input type="text" class="input-block-level" data-bind="value: y" /></div> <div class="span3"> <a href='#' data-bind='click: $parent.moveProbePointUp' class="fa fa-chevron-up"></a> <a href='#' data-bind='click: $parent.moveProbePointDown' class="fa fa-chevron-down"></a> <a href='#' data-bind='click: $parent.removeProbePoint' class="fa fa-trash-o"></a> </div> </div> </div> </div> <div class="control-group"> <div class="controls"> <a href='#' data-bind="click: addProbePoint" title="{{ _('Add Point') }}" class="fa fa-plus-circle"></a> {{_ ('Add Point') }} </div> </div> </div> <!-- Klipper Conf --> <div class="tab-pane" id="conf"> <div class="klipper-column-fluid klipper-settings-tab"> <h3 class="text-center m-0">{{ _('Config Files') }}</h3> <div class="klipper-row-fluid"> <div class="klipper-fluid-item-2" data-bind="visible: $root.klipperViewModel.hasRightKo('CONFIG')"> <div class="btn-group"> <button class="btn btn-small dropdown-toggle" data-toggle="dropdown"><i class="far fa-square"></i> <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="javascript:void(0)" data-bind="click: markFilesOnPage">{{ _('Select all on this page') }}</a></li> <li><a href="javascript:void(0)" data-bind="click: markAllFiles">{{ _('Select all') }}</a></li> <li class="divider"></li> <li><a href="javascript:void(0)" data-bind="click: clearMarkedFiles">{{ _('Clear selection') }}</a></li> </ul> </div> <button class="btn btn-small" data-bind="click: newFile" title="{{ _('Add new File') }}"> <i class="far fa-file"></i> {{ _('New File') }} </button> <button class="btn btn-small" data-bind="click: showEditor" title="{{ _('Open last config') }}"> <i class="fas fa-file-code"></i> {{ _('Open last Editor') }} </button> <button class="btn btn-small" data-bind="click: listCfgFiles" title="{{ _('Refresh file list') }}"> <i class="icon-refresh"></i> {{ _('Refresh Files') }} </button> <button class="btn btn-small" data-bind="click: removeMarkedFiles, enable: markedForFileRemove().length > 0">{{ _('Delete selected') }}</button> </div> <div class="pull-right"> <div class="btn-group"> <button class="btn btn-small dropdown-toggle" data-toggle="dropdown"><i class="fas fa-wrench"></i> <span class="caret"></span></button> <ul class="dropdown-menu dropdown-menu-right"> <li><a href="javascript:void(0)" data-bind="click: function() { configs.changeSorting('name'); }"><i class="fas fa-check" data-bind="style: {visibility: configs.currentSorting() == 'name' ? 'visible' : 'hidden'}"></i> {{ _('Sort by name') }} ({{ _('ascending') }})</a></li> <li><a href="javascript:void(0)" data-bind="click: function() { configs.changeSorting('date'); }"><i class="fas fa-check" data-bind="style: {visibility: configs.currentSorting() == 'date' ? 'visible' : 'hidden'}"></i> {{ _('Sort by date') }} ({{ _('descending') }})</a></li> <li><a href="javascript:void(0)" data-bind="click: function() { configs.changeSorting('size'); }"><i class="fas fa-check" data-bind="style: {visibility: configs.currentSorting() == 'size' ? 'visible' : 'hidden'}"></i> {{ _('Sort by file size') }} ({{ _('descending') }})</a></li> </ul> </div> </div> </div> <div class="scroll-y"> <table class="table table-striped table-hover table-condensed table-hover table-fixed" id="klipper_cfg_files"> <thead> <tr> <th class="klipper_cfgs_checkbox span1"></th> <th class="klipper_cfgs_name">{{ _('Name') }}</th> <th class="klipper_cfgs_size">{{ _('Size') }}</th> <th class="klipper_cfgs_action">{{ _('Action') }}</th> </tr> </thead> <tbody data-bind="foreach: configs.paginatedItems"> <tr data-bind="attr: {title: name}"> <td class="klipper_cfgs_checkbox"> <input type="checkbox" data-bind="value: name, checked: $root.markedForFileRemove, invisible: !$root.klipperViewModel.hasRightKo('CONFIG')"> </td> <td class="klipper_cfgs_name" data-bind="text: name"></td> <td class="klipper_cfgs_size" data-bind="text: size"></td> <td class="klipper_cfgs_action"> <a href="javascript:void(0)" class="far fa-trash-alt" title="{{ _('Delete') }}" data-bind="css: {disabled: !$root.klipperViewModel.hasRightKo('CONFIG')()}, click: function() { $parent.removeCfg($data.name);}"></a> | <a href="javascript:void(0)" class="fas fa-download" title="{{ _('Download') }}" data-bind="css: {disabled: !$root.klipperViewModel.hasRightKo('CONFIG')()}, attr: { href: ($root.klipperViewModel.hasRightKo('CONFIG')()) ? $data.url : 'javascript:void(0)'}"></a> | <a href="javascript:void(0)" class="fas fa-pencil-alt" title="{{ _('Edit') }}" data-bind="css: {disabled: !$root.klipperViewModel.hasRightKo('CONFIG')()}, click: function() { $parent.openConfig($data.name);}"></a> </td> </tr> </tbody> </table> </div> <div class="pagination pagination-mini pagination-centered"> <ul> <li data-bind="css: {disabled: configs.currentPage() === 0}"><a href="javascript:void(0)" data-bind="click: configs.prevPage">«</a></li> </ul> <ul data-bind="foreach: configs.pages"> <li data-bind="css: {active: $data.number === $root.configs.currentPage(), disabled: $data.number === -1 }"> <a href="javascript:void(0)" data-bind="text: $data.text, click: function() { $root.configs.changePage($data.number); }"></a> </li> </ul> <ul> <li data-bind="css: {disabled: configs.currentPage() === configs.lastPage()}"> <a href="javascript:void(0)" data-bind="click: configs.nextPage">» </a> </li> </ul> </div> </div> </div> </div> <div class="tab-footer"> <a href="https://www.paypal.com/donate/?business=7P63W664NF8LA&item_name=OctoKlipper" class="btn btn-mini" target="_blank"> <i class="fab fa-paypal"> {{ _('Donate') }}</i> </a> </div> </form>