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 type="checkbox" class="input-block-level" data-bind="checked: settings.settings.plugins.klipper.connection.replace_connection_panel">
        </div>
    </div><div class="control-group">
        <label class="control-label">{{ _('Show NavBar Message') }}</label>
        <div class="controls">
            <input type="checkbox" class="input-block-level" data-bind="checked: settings.settings.plugins.klipper.configuration.navbar">
        </div>
    </div>
    <div class="control-group">
        <label class="control-label">{{ _('Klipper Config Path') }}</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 Path') }}</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>
           </select>
           <span class="help-block">
              The command that is executed when the Klipper configuration changed and needs to be reloaded.
           </span>
        </div>
    </div>
  </div>
  <!-- Macros -->
  <div class="tab-pane" id="macros">
    <div class="control-group">
       <div class="controls">
          <div class="row-fluid">
            <div class="span8" style="text-align: right"><small>{{ _('Add macro button to:') }}</small></div>
            <div class="span1"><small>{{ _('Klipper Tab') }}</small></div>
            <div class="span2"><small>{{ _('Sidebar') }}</small></div>
          </div>
       </div>
    </div>
    <div data-bind="foreach: settings.settings.plugins.klipper.macros">   
       <div class="control-group">
           <label class="control-label">{{ _('Name') }}</label>
           <div class="controls">
                <div class="row-fluid">
                  <div class="span8">
                    <input type="text" class="input-block-level" data-bind="value: name"/>
                  </div>
                  <div class="span1">
                    <input type="checkbox" class="input-block-level" data-bind="checked: tab"/>
                  </div>
                  <div class="span1">
                    <input type="checkbox" class="input-block-level" data-bind="checked: sidebar"/>
                  </div>
                  <div class="span2">
                     <a href='#' data-bind='click: $parent.moveMacroUp' class="fa fa-chevron-up"></a>
                     <a href='#' data-bind='click: $parent.moveMacroDown' class="fa fa-chevron-down"></a>
                     <a href='#' data-bind='click: $parent.removeMacro' class="fa fa-trash-o"></a>
                  </div>
                </div>
           </div>
           <label class="control-label">{{ _('Command') }}</label>
           <div class="controls">
               <div class="row-fluid">
                 <div class="span8">
                    <textarea rows="2" class="block" data-bind="value: macro">
                    </textarea>
                 </div>
                 <div class="span2"></div>
               </div>
           </div>
       </div>
    </div>
    <div class="control-group">
      <div class="controls">
        <a href='#' data-bind='click: addMacro' 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' class="fa fa-plus-circle"></a> {{ _('Add Point') }}
     </div>
   </div>
  </div>
  <!-- Klipper Conf -->
  <div class="tab-pane" id="conf">
   <div class="control-group">
    <style type="text/css" media="screen">

        #plugin-klipper-config {
          height: 100%;
        }

        #settings_plugin_klipper {
          height: 100%;
        }

        #settings_plugin_klipper form {
          height: 100%;
        }

        #settings_plugin_klipper form .tab-content {
          height: 100%;
          overflow: auto;
        }

        #settings_plugin_klipper form .tab-content .tab-pane {
          height: 100%;
        }

        #settings_plugin_klipper form .tab-content .tab-pane .control-group {
          max-height: 1200px;
        }

    </style>
    <script src="plugin/klipper/static/js/lib/ace/ace.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="plugin/klipper/static/js/lib/ace/theme-monokai.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="plugin/klipper/static/js/lib/ace/mode-klipper_config.js" type="text/javascript"></script>
    <input id="hdnLoadKlipperConfig" type="hidden" data-bind="value: configBound(settings.settings.plugins.klipper.config)" />
    <div id="plugin-klipper-config"></div>
    <script>

        var obKlipperConfig = null;
        var editor = null;

        function configBound(config) {
            config.withSilence = function() {
              this.notifySubscribers = function() {
                if (!this.isSilent) {
                  ko.subscribable.fn.notifySubscribers.apply(this, arguments);
                }
              };

              this.silentUpdate = function(newValue) {
                this.isSilent = true;
                this(newValue);
                this.isSilent = false;
              };

              return this;
            };

            obKlipperConfig = config.withSilence();
            if (editor) {
              editor.setValue(obKlipperConfig());
              editor.clearSelection();
            }
            return obKlipperConfig;
        }

        ace.config.set("basePath", "plugin/klipper/static/js/lib/ace/");
        editor = ace.edit("plugin-klipper-config");
        editor.setTheme("ace/theme/monokai");
        editor.session.setMode("ace/mode/klipper_config");
        editor.setOptions({
          autoScrollEditorIntoView: true,
          maxLines: "Infinity"
        });

        editor.session.on('change', function(delta) {
          if (obKlipperConfig) {
              obKlipperConfig.silentUpdate(editor.getValue());
          }
        });

        // Uncomment this if not using maxLines: "Infinity"...
        // setInterval(function(){ editor.resize(); }, 500);

    </script>
   </div>
  </div>
</div>
</form>