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

{{ snipped.subSection("Process description", true) }}

You will have to:
<lu>
    <li>Mark a specific length of filament at the extruder motor entrance;</li>
    <li>Set the hot-end on a printing temperature in E-Steps tab;</li>
    <li>Set the extrusion length and speed;</li>
    <li>Press "Start extrusion";</li>
    <li>When extrusion finished, check the remaining length between the extruder and the filament mark location;</li>
    <li>Refresh the current values from EEPROM;</li>
    <li>Feed data collected in E-Steps tab and save the results in EEPROM;</li>
</lu>
<br>

{{ 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'>teachingtechyt.github.io</a>", "text-warning") }}

{{ snipped.subSection("Parameters", true) }}


<!-- M104 S210 command  -->
<div class="row-fluid">
    <div data-bind="class: $root.columnLabelCls()">
        <label for="temperature" class="pull-right" style="margin-top: 5px;" title="x">
            Heating
        </label>
    </div>
    <div data-bind="class: $root.columnFieldCls()">
        <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 data-bind="class: $root.columnLabelCls()">
        <label for="extrusionLenSpeed" class="pull-right" style="margin-top: 5px;" title="x">
            Extrusion length & speed
        </label>
    </div>
    <div data-bind="class: $root.columnFieldCls()">
        <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 data-bind="class: $root.columnLabelCls()"></div>
    <div data-bind="class: $root.columnFieldCls()">
        <button class="btn btn-success"
            data-bind="click: $root.startExtrusion, enable: !$root.startExtrusionActive() && $root.loginStateViewModel.isAdmin() && $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("Results") }}

<div class="row-fluid">
    <div data-bind="class: $root.columnLabelCls()">
        <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 data-bind="class: $root.columnFieldCls()">
        <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.loginStateViewModel.isAdmin() && $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 data-bind="class: $root.columnLabelCls()">
        <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 data-bind="class: $root.columnFieldCls()">
        <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 data-bind="class: $root.columnLabelCls()"></div>
    <div data-bind="class: $root.columnFieldCls()">
        <button class="btn btn-primary" data-bind="click: $root.saveESteps, enable: $root.loginStateViewModel.isAdmin() && $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>