Part-DB.Part-DB-server/templates/Tools/ReelCalculator/main.html.twig

{% extends "main_card.html.twig" %}

{# Reel and tape values according to this PDF: https://www.vishay.com/docs/20014/smdpack.pdf #}

{% block title %}{% trans %}tools.reel_calc.title{% endtrans %}{% endblock %}

{% block card_title %}
    <i class="fas fa-ruler"></i> {% trans %}tools.reel_calc.title{% endtrans %}
{% endblock %}

{% block card_content %}
    <p class="text-muted">{% trans %}tools.reel_calc.explanation{% endtrans %}</p>
    <div class="row">
        <div class="col-sm-4">
            <img src="{{ asset('img/smd_reel/smd_reel.svg') }}" alt="Sizes explanation" class="img-fluid img-thumbnail">
        </div>
        <div class="col-sm-8">
            <div class="form-group row">
                <label for="reel_dia_inner" class="col-sm-4 col-form-label">{% trans %}tools.reel_calc.inner_dia{% endtrans %} <var>d<sub>0</sub></var>:</label>
                <div class="col-sm-8 input-group">

                    <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
                    <div class="dropdown-menu">
                        <h6 class="dropdown-header">{% trans %}tools.reel_calc.load_preset{% endtrans %}</h6>
                        <button class="dropdown-item" data-target="reel_dia_inner" data-value="60" onclick="loadPreset(this);">60 mm Reel</button>
                        <button class="dropdown-item" data-target="reel_dia_inner" data-value="62" onclick="loadPreset(this);">62 mm Reel</button>
                    </div>
                    <input class="form-control" id="reel_dia_inner" type="number" min="0">
                    <span class="input-group-text">mm</span>
                </div>
            </div>
            <div class="form-group row">
                <label for="reel_dia_outer" class="col-sm-4 col-form-label">{% trans %}tools.reel_calc.outer_dia{% endtrans %} <var>d<sub>1</sub></var>:</label>
                <div class="col-sm-8 input-group">
                    <input class="form-control" id="reel_dia_outer" type="number" min="0">
                    <span class="input-group-text">mm</span>
                </div>
            </div>
            <div class="form-group row">
                <label for="reel_tape_thick" class="col-sm-4 col-form-label">{% trans %}tools.reel_calc.tape_thick{% endtrans %} <var>a</var>:</label>
                <div class="col-sm-8 input-group">
                    <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
                    <div class="dropdown-menu">
                        <h6 class="dropdown-header">{% trans %}tools.reel_calc.load_preset{% endtrans %}</h6>
                        <button class="dropdown-item" data-target="reel_tape_thick" data-value="0.8" onclick="loadPreset(this);">8 mm Paper Tape 0603 (0.8 mm)</button>
                        <button class="dropdown-item" data-target="reel_tape_thick" data-value="0.85" onclick="loadPreset(this);">8 mm Paper Tape 0805 (0.85 mm)</button>
                        <button class="dropdown-item" data-target="reel_tape_thick" data-value="1" onclick="loadPreset(this);">8 mm Paper Tape 1206 (1 mm)</button>
                        <div class="dropdown-divider"></div>
                        <button class="dropdown-item" data-target="reel_tape_thick" data-value="0.9" onclick="loadPreset(this);">8 mm Blister 0603 (0.9 mm)</button>
                        <button class="dropdown-item" data-target="reel_tape_thick" data-value="0.95" onclick="loadPreset(this);">8 mm Blister 0805 (0.95 mm)</button>
                        <button class="dropdown-item" data-target="reel_tape_thick" data-value="1.1" onclick="loadPreset(this);">8 mm Blister 1206 (1.1 mm)</button>
                    </div>
                    <input class="form-control" id="reel_tape_thick" type="number" min="0">
                    <span class="input-group-text">mm</span>
                </div>
            </div>
            <div class="form-group row">
                <label for="reel_part_distance" class="col-sm-4 col-form-label">{% trans %}tools.reel_calc.part_distance{% endtrans %} <var>b</var>:</label>
                <div class="col-sm-8 input-group">
                    <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
                    <div class="dropdown-menu">
                        <h6 class="dropdown-header">{% trans %}tools.reel_calc.load_preset{% endtrans %}</h6>
                        <button class="dropdown-item" data-target="reel_part_distance" data-value="4" onclick="loadPreset(this);">8 mm Paper Tape 0603/0805/1206 (4 mm)</button>
                    </div>

                    <input  class="form-control" id="reel_part_distance" type="number" min="0">
                    <span class="input-group-text">mm</span>
                </div>
            </div>
            <div class="form-group row">
                <div class="col-sm-8 offset-sm-4 input-group">
                    <button type="button" onclick="updateReelCalc()" class="btn btn-primary">{% trans %}tools.reel_calc.update{% endtrans %}</button>
                </div>
            </div>

            <div class="form-group row">
                <label for="reel_part_distance" class="col-sm-4 col-form-label">{% trans %}tools.reel_calc.parts_per_meter{% endtrans %}:</label>
                <div class="col-sm-8 input-group">
                    <span class="form-control-plaintext" id="result_parts_per_meter"></span>
                </div>
            </div>

            <div class="form-group row">
                <label for="reel_part_distance" class="col-sm-4 col-form-label">{% trans %}tools.reel_calc.result_length{% endtrans %}:</label>
                <div class="col-sm-8 input-group">
                    <span class="form-control-plaintext" id="result_length"></span>
                </div>
            </div>

            <div class="form-group row">
                <label for="reel_part_distance" class="col-sm-4 col-form-label">{% trans %}tools.reel_calc.result_amount{% endtrans %}:</label>
                <div class="col-sm-8 input-group">
                    <span class="form-control-plaintext" id="result_amount"></span>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block scripts %}
    <script>
        function loadPreset(element) {
            var target = document.getElementById(element.dataset.target);

            target.value = element.dataset.value;
        }

        function updateReelCalc() {
            var dia_inner = document.getElementById('reel_dia_inner').value;
            var dia_outer = document.getElementById('reel_dia_outer').value;
            var tape_thickness = document.getElementById('reel_tape_thick').value;
            var part_distance = document.getElementById('reel_part_distance').value;

            if (dia_inner == "" || dia_outer == "" || tape_thickness == "") {
                bootbox.alert("{% trans %}tools.reel_calc.missing_values.error{% endtrans %}");
                return;
            }

            if (dia_outer**dia_outer < dia_inner**dia_inner) {
                bootbox.alert("{% trans %}tools.reel_calc.outer_greater_inner_error{% endtrans %}");
                return;
            }

            var length = Math.PI * (dia_outer * dia_outer - dia_inner * dia_inner ) / (4 * tape_thickness);

            var legth_formatted = length.toFixed(2) + ' mm';

            if (length > 1000) {
                length_formatted = (length / 1000).toFixed(2) + ' m';
            } else if (length > 10) {
                length_formatted = (length / 10).toFixed(2) + ' cm';
            }

            document.getElementById('result_length').textContent = length_formatted;

            //Skip if no part_distance was given
            if (part_distance == "" || part_distance == 0) {
                return;
            }

            var parts_per_meter = 1 / (part_distance / 1000);

            document.getElementById('result_parts_per_meter').textContent = parts_per_meter.toFixed(2) + ' 1/m';

            var parts_amount = (length/1000) * parts_per_meter;

            document.getElementById('result_amount').textContent = Math.floor(parts_amount);

        }
    </script>
{% endblock %}