OctoprintKlipperPlugin/octoprint_klipper/templates/klipper_settings.jinja2

<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">
        <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">
        <label class="control-label">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">{{ _('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">
        <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>
            <option value="manually">Manually</option>
          </select>
          <span class="help-block">
            {{ _('The command that is executed when the Klipper configuration changed and needs to be reloaded.<br />
            Set this to "Manually" if you don\'t want to immediately restart klipper.') }}
          </span>
        </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')">
            <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> {{ _('Show Editor') }}
            </button>
            <button class="btn btn-small" data-bind="click: listCfgFiles" title="{{ _('Refresh file list') }}">
              <i class="icon-refresh"></i> {{ _('Refresh Files') }}
            </button>
            <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: 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>
                  &nbsp;|&nbsp;
                  <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>
                  &nbsp;|&nbsp;
                  <a href="javascript:void(0)" class="fas fa-pencil-alt" title="{{ _('Edit') }}"
                    data-bind="css: {disabled: !$root.klipperViewModel.hasRightKo('CONFIG')()}, click: function() { $parent.showEditUserDialog($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>