fbpx
Back to Curso

Curso de Python - Edición 2

0% Complete
0/51 Steps
En Progreso
Clase 12, Tema 23
En Progreso

Velocidad y CSS Copy

Controlar la velocidad de los motores

Hasta el momento solo utilizamos los motores a máxima velocidad escribiendo digitalWrite(MOTOR_A_En, HIGH); an pin D1 que es el enable del motor A.

Si queremos hacer que el motor vaya más lento, tenemos que utilizar analogWrite(MOTOR_A_En, valor); y pasarle un número entre 0 y 1023, siendo 0 motor apagado y 1023 máxima velocidad.

Cómo funciona analogWrite();

Utiliza PWM para modular

En la práctica nos vamos a dar cuenta de que si ponemos un valor muy chico, el robot no se va a mover. Esto es porque los motores necesitan un mínimo de voltaje para funcionar y mover las ruedas, así que los valores que nos van a funcionar están entre 1023 y 700 aproximadamente. Esto va a depender de las baterías que utilicemos.

Recordemos que para utilizar analogWrite() no tenemos que definir pinMode() en el setup.

CSS ¿qué es?

CSS es otro lenguaje de marcado que permite dar formato a un archivo html, por ejemplo, cambiar de color un elemento o cambiar la tipografía de un encabezado.

El código CSS lo vamos a escribir dentro del elemento <style> … </style> que a va a estar en el head de nuestra página.

Para modificar un elemento, primero tenemos que seleccionarlo, luego, escribir que propiedad queremos modificar y luego el valor al cual lo queremos modificar. El nombre de la propiedad y el valor van separados por : (dos puntos) y al final del valor tenemos que poner un ; (punto y coma).

Cómo seleccionar elementos:

Hay varias maneras de seleccionar elementos, nosotros vamos a ver dos.

La primera: poniendo el nombre del elemento que queremos modificar, por ejemplo, si queremos modificar todos los <h1> de nuestra página, nuestro selector sería h1 { … } . Podemos seleccionar cualquier elemento html.

La segunda: podemos asignar clases de CSS a distintos elementos que queramos modificar. Los elementos no necesitan ser del mismo tipo. Por ejemplo, podríamos asignar el color rojo a un título y a un botón, sin modificar los demás elementos del mismo tipo.

Para seleccionar una clase, anteponemos un . (punto) al nombre que le hayamos puesto.

Para asignar una clase a un elemento, vamos a agregar el atributo class=”nombreDeLaClase”.

Propiedades de CSS

  • color: #ff1100; cambia de color el texto que seleccionemos. El valor del color lo podemos asignar en hexadecimal de la siguiente manera:

color: #ff1100;

Esto va a cambiar el texto a color rojo. Podemos encontrar el valor hexadecimal de cualquier color con google.

  • background-color: #ff11ff; va a cambiar el color de fondo de un elemento. Podemos elegir cualquier color y escribir el código en hexadecimal igual que con color.
  • text-align: center; se utiliza para cambiar la alineación del texto. Las opciones son center (para centrar), left (para izquierda), right (para derecha) y justify (para estirar el texto o elementos proporcionalmente)
  • font-size: 40px; es para cambiar de tamaño el texto. El valor lo vamos a escribir en pixeles de la siguiente manera:
    font-size: 40px;
  • width: 20px; podemos definir el tamaño exacto de un elemento en pixels como por ejemplo un botón. Por defecto, siempre va a ser tan ancho como el texto que escribamos.
  • height: 20px; define la altura en pixeles de un elemento.
  • border-radius: 20px; se utiliza para redondear bordes de un botón por ejemplo. Se indica en pixels también.

Evitar selección de texto en los botones:

Cuando apretamos los botones con nuestro celular, va a seleccionar el contenido como texto. Esto interfiere con la usabilidad de nuestros botones a la hora de controlar nuestro robot. Podemos agregar el siguiente código CSS a nuestros botones para que esto no pase.

            -webkit-touch-callout:none;
            -webkit-user-select:none;
            -khtml-user-select:none;
            -moz-user-select:none;
            -ms-user-select:none;
            user-select:none;
            -webkit-tap-highlight-color:rgba(0,0,0,0);

Dos elementos de html más:

<meta charset="UTF-8" />

Esta etiqueta nos permite utilizar la letra ñ, acentos y otros caracteres especiales que no existen en inglés.

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

Ya que ahora sabemos cómo programar los botones para que funcionen en el celular, es muy importante conocer esta etiqueta ya que va a ajustar nuestra página automáticamente al tamaño de la pantalla.

Responses

[uo_login_ui]