{% 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 Scratch" %}</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" style="padding: 20px; max-height: 100%;">
						<div class="row" id="theory-title" >
							<div class="col-md-12" style="text-align: justify; font-size:20px;">
								<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><br>
								<h2>{% trans "Uso del bloque:" %}<img src="{% static 'scratch/SSGop044/img/objeto_color.png' %}" width=300px></h2>
								<p>{% trans "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 devolverá 3 datos: área, centro del eje X, centro del eje Y. Por ejemplo, los valores que devuelve en la siguiente imagen son <code>1334,46,52</code>. <code>1334</code> es el área en píxeles que ha calculado para el objeto blanco (cuanto más grande sea más cerca estaremos del objeto), <code>46</code> es la situación del centro en el eje horizontal (cuanto más pequeño sea más a la izquierda está el objeto), y <code>52</code> es la situación del centro del objeto en el eje vertical (cuanto más grande sea más abajo en la imagen estará el objeto)." %}</p>
								<img style="display:block; margin:auto;" src="{% static 'scratch/SSFo1015/img/objeto_blanco.png' %}">
								<strong>{% trans "El centro del eje x correspondería al valor 75 y el centro del eje y corresponde al valor 50, esto es porque nuestra imagen es de 150 pixeles en el eje horizontal (x) y 100 en el eje vertical (y)." %}</strong><br>
								<p><br>{% trans "En este otro caso los valores que devuelve en la siguiente imagen son" %} <code>397,109,116</code>. <code>309</code> {% trans "es el área en píxeles que ha calculado para el objeto blanco," %} <code>109</code> {% trans "es la situación del centro en el eje horizontal (cuanto más grande sea más a la derecha estará la línea) y <code>116</code> es la situación del centro del objeto en eleje vertical (cuanto más grande sea más abajo en la imagen estará el centro del objeto, en este caso la línea)." %}</p>
								<p><img style="display:block; margin:auto;" src="{% static 'scratch/SSFo1005/img/imagen_linea.png' %}"></p>
								<p>{% trans "Este bloque que localiza un objeto de cierto color en la imagen nos devuelve tres valores <code>(area,X,Y)</code>. Para poder usarlos necesitamos aprender a manejar las listas con los bloques." %}</p>
								<p>{% trans "Una lista es una variable que agrupa a otras del mismo tipo bajo el mismo nombre. Por ejemplo en nuestro caso el bloque nos devuelve una lista con 3 valores: <code>(area,X,Y)" %}</code>.</p>
								<p>{% trans "Al usar una lista tendrás que hacer varias cosas:" %}</p>
								<ul>
									<li type="circle">{% trans "Indicar que la variable es una lista. Para ello tendrás que establecer tu variable a una lista vacía." %}</li>
									<img src="{% static 'scratch/SSGop044/img/crear_lista.png' %}" width=400px>
									<li type="circle">{% trans "'Leer' en tu variable los datos de la función que busca el objeto de color." %}</li>
									<p><strong> {% trans "Los colores disponibles son: blue, green, red, white, black, orange, yellow, pink, purple, brown." %}</strong></p>
									<img src="{% static 'scratch/SSGop044/img/leer_objeto.png' %}" width=400px>
									<li type="circe">{% trans 'Para poder acceder a los distintos datos que hay almacenados en la lista tendrás que usar el bloque  "en la lista...obtener" que te permitirá extraer de la lista que indiques el primer elemento, el último, uno aleatorio o el de la posición que tú decidas <code>#</code> empezando por el principio o por el final.' %}</li>
									<img style="display:block; margin:auto;" src="{% static 'scratch/SSGop044/img/bloque_en_la_lista.png' %}" width=400px>
								</ul>

								<div class="col-md-12 " id="theory-container">
									<br><h2>{% trans "En este video puedes ver un ejemplo de su funcionamiento" %}</h2><br>
									<div class="unit-video-container">
										<iframe class="unit-video" allowfullscreen src="https://www.youtube.com/embed/_iFcadxlo-I"></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 %}