{% import "macros.jinja2" as snipped %}

{{ snipped.subSection("Process description", true) }}
You will have to:
<lu>
    <li>Refresh the current values from EEPROM;</li>
    <li>Set the hot-end index which you want to tune;</li>
    <li>Set the usual temperature used in your prints for that specific hot-end;</li>
    <li>Set the usual fan speed used in your prints;</li>
    <li>Monitor temperature tab, when it starts to cool down save the results in EEPROM;</li>
    <li>For tuning heated bed the index is already set on -1;</li>
</lu>
<br>
{{ snipped.quote("It is recommended to run the tuning with conditions as close to printing as possible. This means filament loaded and the part cooling fan set to your normal speed. It is not essential, but you may
prefer to start this process with the hot end at room temperature.",
"<a href='https://teachingtechyt.github.io/calibration.html#pid' target='_blank'>For more information about how to use this visit teachingtechyt.github.io</a>", "text-warning") }}

{{ snipped.subSection("Current PID values", true) }}

<div class="row-fluid">
    <div data-bind="class: $root.columnLabelCls()">
        <label for="hotEndPid" class="pull-right" style="margin-top: 5px;" title="Current hot-end PID">
            Current hot-end PID
        </label>
    </div>
    <div data-bind="class: $root.columnFieldCls()">
        <div class="input-prepend input-append" id="hotEndPid">
            <span class="add-on" title="Proportional gain">P</span>
            <span class="add-on numberDisplay" title="Proportional gain" data-bind="text: $root.pidCurrentValues.hotEnd.P()"></span>
            <span class="add-on" title="Integral gain">I</span>
            <span class="add-on numberDisplay" title="Integral gain" data-bind="text: $root.pidCurrentValues.hotEnd.I()"></span>
            <span class="add-on" title="Derivative">D</span>
            <span class="add-on numberDisplay" title="Derivative" data-bind="text: $root.pidCurrentValues.hotEnd.D()"></span>
        </div>
    </div>
</div>
<div class="row-fluid">
    <div data-bind="class: $root.columnLabelCls()">
        <label for="bedPid" class="pull-right" style="margin-top: 5px;" title="Current bed PID">
            Current bed PID
        </label>
    </div>
    <div data-bind="class: $root.columnFieldCls()">
        <div class="input-prepend input-append" id="bedPid">
            <span class="add-on" title="Proportional gain">P</span>
            <span class="add-on numberDisplay" title="Proportional gain" data-bind="text: $root.pidCurrentValues.bed.P()"></span>
            <span class="add-on" title="Integral gain">I</span>
            <span class="add-on numberDisplay" title="Integral gain" data-bind="text: $root.pidCurrentValues.bed.I()"></span>
            <span class="add-on" title="Derivative">D</span>
            <span class="add-on numberDisplay" title="Derivative" data-bind="text: $root.pidCurrentValues.bed.D()"></span>
        </div>
    </div>
</div>
<div class="row-fluid">
    <div data-bind="class: $root.columnLabelCls()">
    </div>
    <div data-bind="class: $root.columnFieldCls()">
        <div class="input-prepend input-append" id="bedPid">
            <button class="btn" data-bind="click: $root.getCurrentValues, enable: $root.loginStateViewModel.isAdmin() && $root.controlViewModel.isOperational() && (!$root.controlViewModel.isPrinting())"
                title="Load current PIDs">
                <i class="fas fa-sync-alt" style="color:false" data-color="false"></i>&nbsp&nbsp
                Get current values
            </button>
        </div>
    </div>
</div>

{{ snipped.subSection("Hot-end tuning") }}
<div class="row-fluid">
    <div data-bind="class: $root.columnLabelCls()">
        <label for="fanSpeed" class="pull-right" style="margin-top: 5px;" title="Fan speed">
            Turn fan to max
        </label>
    </div>
    <div data-bind="class: $root.columnFieldCls()">
        <div class="input-prepend input-append">
            {{ snipped.linkToMarlin("M106", "Marlin website") }}
            <span class="add-on" title="Command for turning the fan to 100%">M106&nbsp;&nbsp;&nbsp;S</span>
            <input type="number" id="fanSpeed" title="Command for turning the fan to 100%" class="input-mini" step="1" min="0" max="255" data-bind="value: $root.pid.hotEnd.fanSpeed">
        </div>
    </div>
</div>
<div class="row-fluid">
    <div data-bind="class: $root.columnLabelCls()">
        <label for="tunningPIDNoCycles" class="pull-right" style="margin-top: 5px;" title="x">
            Tuning PID
        </label>
    </div>
    <div data-bind="class: $root.columnFieldCls()">
        <div class="input-prepend input-append">
            {{ snipped.linkToMarlin("M303", "Marlin website") }}
            <span class="add-on" title="Command for triggering tool PID tunning">M303&nbsp;&nbsp;&nbsp;C</span>
            <input type="number" id="tunningPIDNoCycles" class="input-mini" step="1" min="0" title="Tool number 0 for first hot end" data-bind="value: $root.pid.hotEnd.noCycles">
            <span class="add-on" title="">&nbsp;&nbsp;&nbsp;E</span>
            <input type="number" id="tunningPIDHotEnd" class="input-mini" step="1" min="0" title="Hotend index 0 for first hot end" data-bind="value: $root.pid.hotEnd.hotEndIndex">
            <span class="add-on" title="">&nbsp;&nbsp;&nbsp;S</span>
            <input type="number" id="tunningPIDHotEndTemp" class="input-mini" step="1" min="100" max="280" title="Target temperature" data-bind="value: $root.pid.hotEnd.targetTemp">
            <span class="add-on" title="">&nbsp;&nbsp;&nbsp;U1</span>
            {{ snipped.m500Icon() }}
        </div>
    </div>
</div>

<div class="row-fluid" style="margin-bottom: 5px;">
    <div data-bind="class: $root.columnLabelCls()"></div>
    <div data-bind="class: $root.columnFieldCls()">
        <button class="btn btn-success" data-bind="click: $root.startPidHotEnd, enable: $root.loginStateViewModel.isAdmin() && $root.controlViewModel.isOperational() && (!$root.controlViewModel.isPrinting())"
            title="This will trigger PID auto tuning (M106 Sx; M303 Ex Sx U1; M500)">
            <i class="fas fa-play" style="color:false" data-color="false"></i>&nbsp&nbsp
            Start hot-end PID auto-tunning
        </button>
    </div>
</div>

{{ snipped.subSection("Heated bed tuning") }}
<div class="row-fluid">
    <div data-bind="class: $root.columnLabelCls()">
        <label for="fanSpeed" class="pull-right" style="margin-top: 5px;" title="Fan speed">
            Turn fan to max
        </label>
    </div>
    <div data-bind="class: $root.columnFieldCls()">
        <div class="input-prepend input-append">
            {{ snipped.linkToMarlin("M106", "Marlin website") }}
            <span class="add-on" title="Command for turning the fan to 100%">M106&nbsp;&nbsp;&nbsp;S</span>
            <input type="number" id="fanSpeed" title="Command for turning the fan to 100%" class="input-mini" step="1" min="0" max="255" data-bind="value: $root.pid.bed.fanSpeed">
        </div>
    </div>
</div>
<div class="row-fluid">
    <div data-bind="class: $root.columnLabelCls()">
        <label for="tunningPIDNoCycles" class="pull-right" style="margin-top: 5px;" title="x">
            Tuning PID
        </label>
    </div>
    <div data-bind="class: $root.columnFieldCls()">
        <div class="input-prepend input-append">
            {{ snipped.linkToMarlin("M303", "Marlin website") }}
            <span class="add-on" title="Command for triggering bed PID tunning">M303&nbsp;&nbsp;&nbsp;C</span>
            <input type="number" id="tunningPIDNoCycles" class="input-mini" step="1" min="0" title="Number of cycles to run in tuning" data-bind="value: $root.pid.bed.noCycles">
            <span class="add-on" title="">&nbsp;&nbsp;&nbsp;E</span>
            <input type="number" id="tunningPIDBed" class="input-mini" step="1" min="0" title="Bed index" data-bind="value: $root.pid.bed.index, enable: false">
            <span class="add-on" title="">&nbsp;&nbsp;&nbsp;S</span>
            <input type="number" id="tunningPIDBedTemp" class="input-mini" step="1" min="10" max="100" title="Target temperature" data-bind="value: $root.pid.bed.targetTemp">
            <span class="add-on" title="">&nbsp;&nbsp;&nbsp;U1</span>
            {{ snipped.m500Icon() }}
        </div>
    </div>
</div>

<div class="row-fluid" style="margin-bottom: 5px;">
    <div data-bind="class: $root.columnLabelCls()"></div>
    <div data-bind="class: $root.columnFieldCls()">
        <button class="btn btn-success" data-bind="click: $root.startPidBed, enable: $root.loginStateViewModel.isAdmin() && $root.controlViewModel.isOperational() && (!$root.controlViewModel.isPrinting())"
            title="This will trigger PID auto tuning (M303 E-1 Sx U1; M500)">
            <i class="fas fa-play" style="color:false" data-color="false"></i>&nbsp&nbsp
            Start bed PID auto-tunning
        </button>
    </div>
</div>