{% load static %} <!-- Load static files -->
{% load i18n %}
{% block content %}

<div class="modal fade" id="cameraPillModal" tabindex="-1" role="dialog" aria-labelledby="cameraPillLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h3 class="modal-title" id="cameraPillLabel">{% trans "Sensor cámara en Python" %}</h3>
            </div>
            <div class="modal-body"  style="padding: 0px">
                <div id="loading_page" class="col-xs-12 loading-page">
                    <div id="presentation_column" width="100%" height="100%" frameBorder="0">
                        <div class="row" id="theory-title" style="text-align: justify; font-size:20px;">
                            <div class="col-md-12">
                                <p>{% trans "Cada una de esas casillas que componen nuestra imagen es lo que llamamos un pixel. Cada pixel tiene la información del color del 'trocito' de imagen que le corresponde." %}</p>
                                <p>{% trans "La imagen de nuestra cámara es de 150x100 lo que quiere decir que está formada por 15.000 pixeles." %}</p>
                                <h2>{% trans "Uso de la función:" %} <code>{% trans "HAL.dame_objeto_de_color(\"color\")" %}</code></h2>
                                <p>
                                <ul>
                                    <li><code>
                                    {% trans "dame_objeto_de_color(\"color\")" %}</code>: {% trans "con este sensor podrás saber en que parte de la imagen está el objeto del color que quieras. Esta función hará todo el trabajo sucio por ti, ya que es la que se encarga de hacer el filtro de color para aislar el objeto y devuelve un diccionario de python con dos claves:" %} <br>
                                    <p><br> - <strong> 'areas'</strong> {% trans "que devuelve el número de objetos encontrados de ese color." %} <br> </p>
                                    <p>-<strong>' detalles'</strong> {% trans "que es una lista de diccionarios (un diccionario para cada objeto encontrado) con las siguientes claves:" %}</p>
                                    <ul>
                                        <li type="circle">{% trans "'area' que muestra el área del objeto" %}.</li>
                                        <li type="circle">{% trans "'centro' que es una tupla con las coordenadas x e y del centro" %}.</li>
                                        <li type="circle">{% trans "'esquina1' que es una tupla con las coordenadas x e y de la esquina superior derecha de un rectángulo imaginario que rodeara el objeto." %}</li>
                                        <li type="circle">{% trans "'esquina2' que es una tupla con las coordenadas x e y de la esquina inferior izquierda de un rectángulo imaginario que rodeara el objeto." %}</li>
                                    </ul>
                                    </li>
                                </ul>
                                <strong>{% trans "Los colores disponibles son: blue, green, red, white, black, orange, yellow, pink, purple, brown." %}</strong>
                                <div class="col-md-12 " id="theory-container">
                                    <h2>{% trans "En este video puedes ver un ejemplo de su funcionamiento" %}</h2>
                                    <div class="unit-video-container">
                                        <iframe class="unit-video" allowfullscreen src="https://www.youtube.com/embed/HcUmbp7Y8uw"></iframe>
                                    </div>
                                    <p style="text-align:center">{% trans "¿Tienes alguna duda? Pregunta en nuestro" %} <a href="https://foro.kibotics.org/"><strong>{% trans "Foro" %}</strong></a>
                                        <br>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
            </div>
        </div>
    </div>
</div>

{% endblock %}