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

{{ snipped.subSection("Note", true) }}
{{ 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") }}
<div class="row-fluid">
    <div class="span5">
        <label for="hotEndPid" class="pull-right" style="margin-top: 5px;" title="Current hot-end PID">
            Current hot-end PID
        </label>
    </div>
    <div class="span7">
        <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 class="span5">
        <label for="bedPid" class="pull-right" style="margin-top: 5px;" title="Current bed PID">
            Current bed PID
        </label>
    </div>
    <div class="span7">
        <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 class="span5">
    </div>
    <div class="span7">
        <div class="input-prepend input-append" id="bedPid">
            <button class="btn" data-bind="click: $root.getCurrentValues, enable: $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 class="span5">
        <label for="fanSpeed" class="pull-right" style="margin-top: 5px;" title="Fan speed">
            Turn fan to max
        </label>
    </div>
    <div class="span7">
        <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 class="span5">
        <label for="tunningPIDNoCycles" class="pull-right" style="margin-top: 5px;" title="x">
            Tuning PID
        </label>
    </div>
    <div class="span7">
        <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 class="span5"></div>
    <div class="span7">
        <button class="btn btn-success" data-bind="click: $root.startPidHotEnd, enable: $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 class="span5">
        <label for="fanSpeed" class="pull-right" style="margin-top: 5px;" title="Fan speed">
            Turn fan to max
        </label>
    </div>
    <div class="span7">
        <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 class="span5">
        <label for="tunningPIDNoCycles" class="pull-right" style="margin-top: 5px;" title="x">
            Tuning PID
        </label>
    </div>
    <div class="span7">
        <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 class="span5"></div>
    <div class="span7">
        <button class="btn btn-success" data-bind="click: $root.startPidBed, enable: $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>