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

{{ snipped.subSection("Process description", true) }}
{{ snipped.quote("
This calibration is best done with the extruder detached from the hot end, so no restriction is present on the movement. If it is convenient, you can partially disassemble the printer so the output of the extruder is
open and the filament exits in free air. If this is inconvenient, the process below aims to minimize restrictions by extruding very slowly and with a slightly higher temperature. The results from this should still be
reliable.
", "
<a href='https://teachingtechyt.github.io/calibration.html#esteps' target='_blank'>For more information about how to use this visit teachingtechyt.github.io</a>
", "text-warning") }}

{{ snipped.subSection("Test parameters") }}

<!-- M104 S210 command  -->
<div class="row-fluid">
    <div class="span6">
        <label for="temperature" class="pull-right" style="margin-top: 5px;" title="x">
            Heating
        </label>
    </div>
    <div class="span6">
        <div class="input-prepend input-append">
            {{ snipped.linkToMarlin("M104", "Marlin website") }}
            <span class="add-on" title="Command to preheat the tool before testing">M104&nbsp;&nbsp;&nbsp;S</span>
            <input type="number" id="temperature" class="input-mini" step="1" min="180" max="280"
                title="The temperature used to extrude in testing (&#186;C)&#013;Is better to be a bit higher then usual for reducing the nuzzle pressure" data-bind="value: $root.testParam.extrudeTemp">
        </div>
    </div>
</div>
<!-- G1 E100 F50 command  -->
<div class="row-fluid">
    <div class="span6">
        <label for="extrusionLenSpeed" class="pull-right" style="margin-top: 5px;" title="x">
            Extrusion length & speed
        </label>
    </div>
    <div class="span6">
        <div class="input-prepend input-append">
            {{ snipped.linkToMarlin("G000-G001", "Marlin website") }}
            <span class="add-on" title="Command to extrude filament for testing">G1&nbsp;&nbsp;&nbsp;E</span>
            <input type="number" id="extrusionLenSpeed" class="input-mini" step="1" min="50" title="The length of filament to be extruded in testing (in millimeters)" data-bind="value: $root.testParam.extrudeLength">
            <span class="add-on" title="Command to extrude filament for testing">&nbsp;&nbsp;&nbsp;F</span>
            <input type="number" id="extrusionLenSpeed" class="input-mini" step="1" min="10" max="400" title="The speed to extrude filament in testing&#013;Lowest possible (mm/s)"
                data-bind="value: $root.testParam.extrudeSpeed">
        </div>
    </div>
</div>

{{ snipped.field("Extrusion marking length", "The length marked on filament before extrusion. ", "number", "$root.testParam.markLength", "true", "mm", 0.01, 50) }}

<div class="row-fluid" style="margin-bottom: 5px;">
    <div class="span6"></div>
    <div class="span6">
        <button class="btn btn-success"
            data-bind="click: $root.startExtrusion, enable: !$root.startExtrusionActive() && $root.is_admin() && $root.controlViewModel.isOperational() && (!$root.controlViewModel.isPrinting())"
            title="This will trigger M90, M83, G1 E100 F50, M82, G90 in order for extruding filament">
            <i class="fas fa-play" style="color:false" data-color="false"></i>&nbsp&nbsp
            Start extrusion
        </button>
    </div>
</div>

{{ snipped.subSection("Test results") }}

<div class="row-fluid">
    <div class="span6">
        <label for="eSteps" class="pull-right" style="margin-top: 5px;" title="Current value for number of steps/mm for E axe in EEPROM">
            E steps
        </label>
    </div>
    <div class="span6">
        <div class="input-append">
            <input type="number" id="eSteps" title="Current value for number of steps/mm for E axe in EEPROM" class="input-small" step="0.01" data-bind="value: $root.steps.E(), enable:false">
            <span class="add-on" title="Current value for number of steps/mm for E axe in EEPROM">steps/mm</span>
            <button class="btn" data-bind="click: $root.loadESteps, enable: $root.loadEStepsActive() && $root.controlViewModel.isOperational() && (!$root.controlViewModel.isPrinting())"
                title="Loads current value of steps/mm from EEPROM by calling M92">
                <i class="fas fa-sync-alt" style="color:false" data-color="false"></i>
            </button>
        </div>
    </div>
</div>

{{ snipped.field("Length after extrusion", "The remained length between filament mark and extruder entry", "number", "$root.results.remainedLength", "true", "mm") }}
{{ snipped.field("Actual extrusion", "How much filament has been extruded", "number", "$root.results.actualExtrusion", "false", "mm") }}

<!-- M92 E900 -->
<div class="row-fluid">
    <div class="span6">
        <label for="newESteps" class="pull-right" style="margin-top: 5px;" title="The new calculated number of steps/mm for E axe">
            New E axe steps/mm
        </label>
    </div>
    <div class="span6">
        <div class="input-prepend input-append">
            {{ snipped.linkToMarlin("M092", "Marlin website") }}
            <span class="add-on" title="Command to change number of steps/mm for E axe" data-bind="text: $root.results.newStepsDisplay"></span>
            {{ snipped.m500Icon() }}
        </div>
    </div>
</div>

<div class="row-fluid" style="margin-bottom: 5px;">
    <div class="span6"></div>
    <div class="span6">
        <button class="btn btn-primary" data-bind="click: $root.saveESteps, enable: $root.is_admin() && $root.controlViewModel.isOperational() && (!$root.controlViewModel.isPrinting())"
            title="Saves the new calculated value of steps/mm on printer EEPROM">
            <i class="fas fa-save" data-color="#000000"></i>&nbsp&nbsp
            Save the new value
        </button>
    </div>
</div>