{% load static %}
{% load i18n %}
<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>
<div class="row" id="theory-title">
    <div class="col-md-9">
        <h1 id="exercise-title">{% trans "Sigue Lineas IR Poli-Robot en Python" %}</h1>
    </div>

    <div class="col-md-2" style="margin-left:4%;">
        <table>
            <tr>
                <td style="padding-right:10px;">{% trans "Tiempo de estudio" %}</td>
                <td style="padding-left:15px;">{% trans "Dificultad" %}</td>
            </tr>
            <td>2 {% trans "horas" %}</td>
            <td><img src="{% static 'python/PSPol118/img/dificultad_baja.png' %}" width=100px></td>
        </table>
    </div>
</div>
<div class="row" >
    <div class="idc-box col-md-3" >
        <p class="idc-titulo">{% trans "Contenido" %}</p>
        <ul class="idc-lista">
            <li><a href="#ind1">1 - {% trans "Qué vas a aprender en esta unidad" %}</a></li>
            <li><a href="#ind2">2 - {% trans "Los sensores de infrarrojos" %}</a>
            <ul>
                <li><a href="#ind21">2.1 - {% trans "¿Qué es un sensor de infrarrojos?" %}</a></li>
                <li><a href="#ind22">2.2 - {% trans "Uso de los sensores infrarrojos" %}</a></li>
                <li><a href="#ind23">2.3 - {% trans "Detectando el color negro" %}</a></li>
                <li><a href="#ind24">2.4 - {% trans "Detectando la línea negra con los sensores IR" %}</a></li>
            </ul>
            </li>
            <li><a href="#ind3">3 - {% trans "Actuadores del GoPiGo a utilizar" %}</a></li>
            <li><a href="#ind4">4 - {% trans "Programar una decisión" %}</a></li>
            <li><a href="#ind5">5 - {% trans "Pistas para resolver el ejercicio" %}</a></li>
            <li><a href="#ind6">6 - {% trans "Recopilando" %}</a></li>
            <li><a href="#ind7">7 - {% trans "¿Sabías que...?" %}</a></li>
            <li><a href="#ind8">8 - {% trans "Vídeo de ejemplo" %}</a></li>
        </ul>
        <model-viewer style="height:250px; margin-top:50px" src='{% static "websim/assets/models/gopigo.gltf" %}' alt="A 3D model of a gopigo" ar ar-modes="webxr scene-viewer quick-look" environment-image="neutral" auto-rotate camera-controls></model-viewer><br>
    </div>

    <div class="col-md-8 " id="theory-container">
        <h2 id="ind1">{% trans "1 -Qué vas a aprender en esta unidad" %}</h2>
        <p>{% trans "En este ejercicio deberás programar nuestro robot <strong>GoPiGo</strong> para que sea capaz de seguir una línea negra pintada sobre un suelo blanco. El GoPiGo debe ser programado de forma que utilice sus <em>sensores</em> para obtener información del entorno continuamente, y sus <em>actuadores</em> para ejecutar las acciones necesarias para poder ir siguiendo el trazado de la línea de acuerdo a la información obtenida por los sensores." %}</p>
        <p>{% trans "Para lograr este objetivo vas a necesitar aprender:" %}</p>
        <ol>
            <li>{% trans "Qué son y cómo funcionan los sensores de infrarrojos" %}</li>
            <li>{% trans "Cuáles son las funciones que necesitamos para leer los sensores infrarrojos en Kibotics" %}</li>
            <li>{% trans "Cómo programar una toma de decisiones en python" %}</li>
        </ol>
        <p>{% trans "En una primera fase programarás el GoPiGo simulado en un mundo 3D, para poder ensayar haciendo cambios a tu programa hasta que consigas que siga el trazado de la línea con facilidad. Tras completar con éxito la primera fase, estarás listo para probar tu programa en el robot GoPiGo real !!!" %}</p>
        <h2 id="ind2">{% trans "2. Los sensores de infrarrojos" %}</h2>
        <p> {% trans "Los sensores de infrarrojos son unos de los sensores imprescindibles en robótica. Además también vamos a poder encontrarlos en  nuestro día a día." %}</p>
        <h3 id="ind21">2.1- {% trans "¿Qué es un sensor de infrarrojos?" %}</h3>
        <p>{% trans "Un sensor de infrarrojos es un detector de un tipo de luz que nuestro ojo no es capaz de ver que es la luz infrarroja. Como ya sabréis la luz del sol, en su espectro visible (es decir, lo que el ojo humano es capaz de ver), está compuesta de diferentes colores, los que vemos en el arcoiris. Cada color se caracteriza por una frecuencia diferente de la radiación solar." %}</p>
        <img style="display:block; margin:auto;" src="{% static 'python/PSGop022/img/Espectro_visible.png' %}" width=400px>
        <p>{% trans "Sin embargo, el sol no sólo emite radiación en esas frecuencias que nosotros vemos. Un intervalo de esas frecuencias es el infrarrojo, que se llama así porque si la viésemos estaría antes del rojo en el arcoiris." %}</p>
        <p>{% trans "Un sensor de infrarrojos del tipo de los que usamos en robótica suele estar formado por dos partes:" %}</p>
        <ol>
            <li>{% trans "Un LED que emite una luz infrarroja. Vamos a llamarlo emisor." %}</li>
            <li>{% trans "El sensor propiamente dicho, que al detectar luz infrarroja genera una corriente eléctrica. Lo llamaremos receptor." %}</li>
        </ol>
        <p>{% trans 'El sensor funciona de la siguiente manera. El emisor está constamente emitiendo luz infrarroja. Si esa luz "rebota" contra alguna superfície el detector la recibe y envía una señal eléctrica. Así es cómo podemos detectar obstáculos.' %}</p>
        <div class="unit-video-container">
            <video class="unit-video" src="{% static 'python/PSGop022/img/IR.mp4'%}" controls> {% trans "Tu navegador no es capaz de reproducir este vídeo." %}</video>
        </div>
        <h3 id="ind22">2.2- {% trans "Uso de los sensores infrarrojos" %}</h3>
        <p>{% trans "Los sensores de infrarrojos son muy económicos y sencillos de usar. ¡Están por todas partes!:" %}</p>
        <ul>
            <li>{% trans "En las puertas de los ascensores, para que no se cierren si alguien está pasando." %}</li>
            <li>{% trans "En las puertas automáticas, que se abren si alguien se acerca." %}</li>
            <li>{% trans "En el mando de la televisión, que nos permite cambiar de canal." %}</li>
            <li>{% trans "En los robots para detectar obstáculos muy próximos." %}</li>
            <li>{% trans "En la base de los robots para poder seguir una línea negra." %}</li>
        </ul>
        <h3 id="ind23">2.3- {% trans "Detectando el color negro" %}</h3>
        <p>{% trans "Uno de los usos más típicos de los sensores infrarrojos en robótica es la detección del color negro. Vamos a entender por qué." %}</p>
        <p>{% trans "Como decíamos anteriormente el detector de luz infrarroja detecta la luz infrarroja que emitió el emisor y que ha rebotado en un objeto. Cuando ese objeto es de color negro, esa luz infrarroja emitida es absorbida completamente por el objeto negro y por lo tanto no rebota nada y nuestro receptor no recibe luz. Para el sensor infrarrojo un objeto negro es equivalente a que no haya objeto." %}</p>
        <p>{% trans "Puede parecernos un fenómeno extraño, sin embargo estamos acostumbrados a ello. Pensad en qué ocurre cuando en verano bajo el sol abrasador nos vestimos de negro, nuestra ropa absorbe todo el calor. No es una idea refrescante vestirse de negro en el calor del verano." %}</p>
        <p>{% trans "Pues de la misma manera que nuestra ropa negra absorbe el calor del sol, la línea negra absorbe la radiación infrarroja y hace que el receptor de nuestro sensor no detecte nada." %}</p>
        <h3 id="ind24">2.4- {% trans "Detectando una línea negra con los sensores infrarrojos" %}</h3>
        <p>{% trans "Vamos a usar los 2 sensores de Infrarrojos (abreviado IR) que tiene el GoPiGo en su parte frontal apuntando al suelo, uno en la parte izquierda y otro en la parte derecha. Estos sensores son capaces de detectar si el suelo es oscuro (negro) o claro (blanco) por medio de la emisión/detección de rayos infrarrojos. Para ello, en el programa debes llamar a siguiente función:" %}</p>
        <table class="componentes">
            <thead>
            <tr>
                <td>{% trans "Función" %}</td>
                <td>{% trans "Descripción" %}</td>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td><strong>{% trans "leer_ir()" %}</strong></td>
                <td>{% trans "Lee los dos sensores de IR y nos devuelve un valor entre 0 y 3" %}</td>
            </tr>
            </tbody>
        </table>
        <p>{% trans "El valor entre 0 y 3 que devuelve la función depende de las lecturas de los dos sensores de IR, de acuerdo a la siguiente tabla:" %}</p>
        <table class="componentes">
            <thead>
            <tr>
                <th>{% trans "lectura IR izquierdo" %}</th>
                <th>{% trans "lectura IR derecho" %}</th>
                <th>{% trans "valor de leer_ir()" %}</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>{% trans "negro" %}</td>
                <td>{% trans "negro" %}</td>
                <td>0</td>
            </tr>
            <tr>
                <td>{% trans "negro" %}</td>
                <td>{% trans "blanco" %}</td>
                <td>1</td>
            </tr>
            <tr>
                <td>{% trans "blanco" %}</td>
                <td>{% trans "negro" %}</td>
                <td>2</td>
            </tr>
            <tr>
                <td>{% trans "blanco" %}</td>
                <td>{% trans "blanco" %}</td>
                <td>3</td>
            </tr>
            </tbody>
        </table>
        <p>{% trans "Estos cuatro valores que nos devuelve la función <code>get_ir()</code> se corresponden con las siguientes situaciones del PiBot con respecto a la línea negra:" %}</p>
        <table class="componentes" style="text-align:center; margin:auto;">
            <thead>
            <tr>
                <th>{% trans "valor = 0" %}</th>
                <th>{% trans "valor = 1" %}</th>
                <th>{% trans "valor = 2" %}</th>
                <th>{% trans "valor = 3" %}</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td><img src="{% static 'python/PSGop022/img/zero.png' %}" width=150px></td>
                <td><img src="{% static 'python/PSGop022/img/one.png' %}"width=150px></td>
                <td><img src="{% static 'python/PSGop022/img/two.png' %}" width=150px></td>
                <td><img src="{% static 'python/PSGop022/img/three.png' %}" width=150px></td>
            </tr>
            </tbody>
        </table>
        <br>
            <a class="popUp" data-toggle="modal" data-target="#sensorIRPillModal">
                <img src="{% static 'img/icons/info.png' %}" width=40px>
                {% trans "Más información: Píldora sensor IR" %}
            </a>
        <br>
        <h2 id="ind3">{% trans "3 - Actuadores del GoPiGo a utilizar" %}</h2>
        <p>{% trans "Vamos a usar los motores que incorpora el GoPiGo (uno en cada rueda motriz) para hacer que se mueva según nuestras necesidades. Para ello, en el programa debes llamar a las siguientes funciones:" %}</p>
        <figure>
            <table class="componentes">
                <thead>
                <tr>
                    <th>{% trans "Función" %}</th>
                    <th>{% trans "Descripción" %}</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td><strong>{% trans "avanzar" %}(<code>v</code>)</strong></td>
                    <td>{% trans "Hace que el GoPiGo avance en línea recta con una velocidad lineal igual a <code>v</code> expresada en metros/segundo" %}
                    </td>
                </tr>
                <tr>
                    <td><strong>{% trans "retroceder" %}(<code>v</code>)</strong></td>
                    <td>{% trans "Hace que el GoPiGo retroceda en línea recta con una velocidad lineal igual a <code>v</code> expresada en metros/segundo" %}
                    </td>
                </tr>
                <tr>
                    <td><strong>{% trans "girar_izquierda" %}(<code>w</code>)</strong></td>
                    <td>{% trans "Hace que el GoPiGo gire a la izquierda sobre su eje (sin avanzar) con una velocidad angular igual a<code>w</code> expresada en radianes/segundo" %}
                    </td>
                </tr>
                <tr>
                    <td><strong>{% trans "girar_derecha" %}(<code>w</code>)</strong></td>
                    <td>{% trans "Hace que el GoPiGo gire a la derecha sobre su eje (sin avanzar) con una velocidad angular igual a<code>w</code> expresada en radianes/segundo" %}
                    </td>
                </tr>
                </tbody>
            </table>
        </figure>
        <p><strong>{% trans "NOTA:" %}</strong> {% trans "Recordamos que $2\pi$ radianes equivalen a 360 grados." %}</p>
        <p>{% trans "Estas funciones se corresponden con los siguientes comportamientos del GoPiGo:" %}</p>
        <table class="componentes" style="text-align:center; margin:auto;">
            <thead>
            <tr>
                <th>{% trans "avanzar" %}</th>
                <th>{% trans "retroceder" %}</th>
                <th>{% trans "girar_izquierda" %}</th>
                <th>{% trans "girar_derecha" %}</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td><img src="{% static 'python/PSGop022/img/forward.png' %}" width=150px></td>
                <td><img src="{% static 'python/PSGop022/img/move_back.png' %}" width=150px></td>
                <td><img src="{% static 'python/PSGop022/img/turn_left.png' %}" width=150px></td>
                <td><img src="{% static 'python/PSGop022/img/turn_right.png' %}" width=150px></td>
            </tr>
            </tbody>
        </table>
        <p>{% trans "Disponemos también de una última función, no por ello menos importante:" %}</p>
        <table class="componentes">
            <thead>
            <tr>
                <th>{% trans "Función" %}</th>
                <th>{% trans "Descripción" %}</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td><strong>{% trans "parar()" %}</strong></td>
                <td>{% trans "Hace que el GoPiGo se detenga (si estaba avanzando, retrocediendo o girando)" %}</td>
            </tr>
            </tbody>
        </table>
        <h2 id="ind4">{% trans "4 - Programar una decisión" %} </h2>
        <p>{% trans "Uno de los elementos básicos de cualquier lenguaje de programación es la posibilidad de tomar una decisión en función de un valor que se calcula. En python podemos hacerlo con la instrucción <em>if</em>" %}</p>
        <pre><code>
        {% trans "instrucción" %}
        if {% trans "condición:" %}
            {% trans "instrucción si se cumple la condición (True)" %}
        else:
            {% trans "instrucción si no se cumple la condición (False)" %}
        {% trans "instrucción" %}
        </code></pre>
        <h2 id="ind5">{% trans "5 - Pistas para resolver el ejercicio" %}</h2>
        <ul>
            <li>{% trans "Debes hacer que tu programa capture la información de los sensores y, en función de esa información, realizar acciones utilizando los actuadores para que el GoPiGo se comporte de la forma deseada" %}</li>
            <li>{% trans "El punto anterior no debe hacerse una sola vez, sino de forma continua (varias veces por segundo) para que el GoPiGo pueda ir siguiendo el trazado de la línea negra" %}</li>
            <li>{% trans "Cuando el GoPiGo reciba una orden de avanzar, retroceder o girar, continuará ejecutando dicha orden hasta que reciba otra orden (si la orden es la misma, continuará haciendo lo mismo que estaba haciendo)" %}</li>

        </ul>
        <h3> {% trans "¿Puedes conseguir que el GoPiGo siga la línea negra? ¡Inténtalo, es divertido!" %}</h3>
        <h2 id="ind6">{% trans "6 - Recopilando" %}</h2>
        <p>{% trans "Al terminar esta unidad ¡¡habrás programado uno de los comportamientos básicos de un robot: un siguelíneas!! Y habrás aprendido a trabajar con los sensores de infrarrojos y a programar tomas de decisiones en python." %}</p>
        <h2 id="ind7">{% trans "7 - ¿Sabías que...?" %}</h2>
        <p>{% trans "Nuestro ojo no puede percibir la luz infrarroja. Sin embargo las cámaras de los móviles sí suelen ser sensibles al espectro infrarrojo. Si enfocamos con la cámara del móvil un sensor de infrarrojo (que tenga emisor, claro) podemos ver en la imagen que se ve el emisor y la luz infrarroja, que la cámara del móvil <em>pinta</em> en color morado habitualmente." %}</p>
        <p>{% trans "Haz la prueba y verás." %}</p>
        <h2 id="ind8">{% trans "8- Vídeo de ejemplo" %}</h2>
        <div class="unit-video-container">
            <iframe class="unit-video" allowfullscreen src="https://www.youtube.com/embed/Q7MKCgN7om0"></iframe>
        </div>
    </div>
</div>
{% include "pills/python/ir_sensor_pill.html" %}