Iti Desarrollo

¿Qué es Tinkercad?

Tinkercad es una plataforma web totalmente gratuita creada por Autodesk. Funciona directamente desde el navegador de internet (no tienen que instalar nada en la compu ni en el celular) y sirve principalmente para dos cosas geniales:

• Aprender Electrónica y Programación (Circuitos): Les permite conectar componentes electrónicos reales en una pantalla (como placas Arduino, luces LED, motores y sensores) y probar si funcionan escribiendo código, tal cual lo harían en una mesa de trabajo pero sin miedo a quemar nada.

• Diseño 3D: Sirve para crear objetos en tres dimensiones juntando bloques y formas geométricas, ideal si después quieren imprimir sus diseños en una impresora 3D.

En pocas palabras: es un simulador que funciona como un laboratorio virtual para experimentar, equivocarse y aprender jugando.

🌐 Link de Acceso y Primeros Pasos

Para empezar a crear su semáforo o cualquier otro proyecto, sigan estos pasos:

1. Entren a la plataforma: Ingresen al sitio web oficial a través de este enlace: tinkercad.com.

2. Crear una cuenta (o unirse a una clase):

   • Si su profesor les dio un código de clase, hagan clic en "Unirse a una clase" e ingresen el código junto con su alias.

   • Si van a practicar por su cuenta, hagan clic en "Registrarse" y creen una cuenta personal gratuita (pueden iniciar sesión directamente con su cuenta de Google/Gmail).

3. Ir a la sección de Circuitos: Una vez dentro del panel principal, busquen en el menú de la izquierda la opción que dice "Designs" (Diseños), luego hagan clic en "Create" (Crear) y elijan "Circuit" (Circuito).

¡Listo! Ya van a tener la pantalla en blanco con todos los componentes a la derecha para empezar a arrastrar y conectar su Arduino. ¡Mucho éxito en sus primeros proyectos!

Arduino offline

1 TP iniciamos con el primer desarrollo en tinkercad : explicación 

CLASE 1

2 TP utilizando conocimientos del trabajo anterior, aqui buscamos recrear el funcionamiento de un semaforo

3 TP ahora vamos por más, recicla el codigo de manera tal que desarrolles una solucion para las siguientes consignas:

Semáforo con Cuenta Regresiva Peatonal (Sincronización)

Vamos a llevar el proyecto del semáforo al siguiente nivel simulando los semáforos modernos de las avenidas, que te avisan con luces parpadeantes cuánto tiempo le queda al peatón para cruzar.

• Modificación del circuito: Mantenés tus 3 LEDs del semáforo vehicular (Rojo 13, Amarillo 12, Verde 11) y sumás 2 LEDs más en un costado de la protoboard que van a simular el semáforo de los peatones: un LED Rojo Peatonal (Pin 10) y un LED Verde Peatonal (Pin 9).

• Qué cambia en el código: Vas a coordinar dos cosas a la vez. Cuando el semáforo de autos esté en Rojo (Pin 13 en HIGH), el verde de peatones (Pin 9) tiene que estar en HIGH. El desafío está en el final: antes de que el de autos cambie a verde, tenés que hacer que el verde peatonal parpadee 4 veces rápido usando HIGH, LOW y delay(300) para avisarle al peatón que se le termina el tiempo de cruce.

El Auto Fantástico (Efecto Secuencial)

En lugar de prender las luces por secciones de tránsito, vas a crear un efecto óptico de movimiento. Inspirado en la famosa serie del auto "KITT", la idea es que una luz viaje de izquierda a derecha y vuelva.

• Modificación del circuito: Dejá los 3 LEDs que ya tenés y sumá 2 LEDs más (por ejemplo, todos de color rojo para que quede mejor). Conectalos a los pines digitales 10 y 9. No te olvides de ponerle su resistencia de $220\ \Omega$ a cada uno.

• Qué cambia en el código: Vas a programar una secuencia rápida donde se prende el pin 13, se apaga, se prende el 12, se apaga, luego el 11, el 10, el 9... y después pegás la vuelta (10, 11, 12). Al usar un delay muy cortito (de 100 o 150 milisegundos), va a parecer que hay una única luz "rebotando" de lado a lado.

D1 Arrancamos con el primer desarrollo de Java.

Usaremos el programa "Apache Netbeans".

Así será la IDE (Es el entorno de desarrollo integrado).
Hola mundo. Creamos nuestro primer proyecto: Hola Mundo. La imagen.
Los pasos para programar: acá.

D2 "D2Operaciones" Vamos a Programar botones por primera vez.

Suma de dos JTextField. Debe quedar así la Ventana. A los jtextFields darle la propiedad de "Columns" = 10 y "horizontalAlignment" = RIGHT. Cambiarles los nombres: En la ventana de propiedades, la solapa CODE: "Variable Name: jtf1" para el primer jTextField y así sucesivamente. Después, completar las instrucciones como se ve acá: esto. Por último completar las cuatro operaciones básicas (pero a las variable darle la declaración de float en lugar de int.) Debe quedar así. Y el parse: a = Float.parseFloat(jtf2.getText());

D3 "D3Teclado" Teclado en pantalla: representamos un teclado con botones y le asignamos una tecla a cada botón.

Teclado Virtual. Diseñamos una ventana así. Luego le pasamos una instrucción a cada botón. Por ejemplo: jta.append("a"); Este es el código para el botón "A". O sea: agrega al jTextArea el caracter "a". Y así con todas las letras (mínimo 10). Las excepciones son: Para la espaciadora: jta.append(" "); y para el Enter, como muestra esta imagen.

if (jtb.isSelected()){ // jtb es el nombre del jToggle button del Shift.
jta.append("A");
} else {
jta.append("a");
}

D4 "D4Piano" Colocamos sonidos a los botones. Importamos la librería "jfugue" y con dos instrucciones, ya podemos escuchar sonidos.

Creamos un piano y le asignamos una nota musical a cada tecla. Colocamos un panel de color negro, siete botones en forma de teclas y el botón de Salir. Acá tenemos el Código completo. Observen, que sólo tienen que copiar el código que está en rojo.

import org.jfugue.player.Player;  // importamos la librería (jfugue-5.0.9.jar).

La estructura de nuestro proyecto debe quedar así.

public Player player = new Player(); // Declaramos player.

El comando para una nota es: player.play("C"); Para la nota DO. D=Re, E=Mi, F=Fa, G=Sol, A=La, B=Si

D5 "D5OcultarMostrar" Mostrar fotos o imágenes en jLabels con un tamaño fijo.

Ver y ocultar imágenes o carteles. jLabel1.setVisible(false); Creamos una ventana  con tres botones y tres jLabels. Luego, incorporamos tres fotos pequeñas a nuestro proyecto (junto a la clase y la ventana), las asociamos a los jlabels con la propiedad icon de cada uno. Por último copiamos las órdenes para cada uno de los tres botones. Debería quedar así, el código de la ventana.

Atención: Cuando tenemos varios objetos en el mismo panel, se pueden desplazar o reubicar de formalibre. Para evitr esto: hacemos click derecho en la ventana del "Navigator" en jFrame1--- Set Layout--- Absolute Layout y también en el panel. Los dos deben quedar con "Absolute Layout".

 D6 Proyecto "D6Imagen". Ejemplo de ImageIcon. Esta función con Icon y setIcon nos permiten ver imágenes en los labels. Vemos una Captura  de la estructura y una Imagen de la Ventana.

Código para ver imágenes en nuestros proyectos con Netbeans. Nuestro contenedor sigue siendo un LABEL, pero la imagen se ajustará al tamaño que le demos al mismo.

Probemos este proyecto con cuatro imágenes diferentes. Podemos verlas en un label más chico o más grande. Ustedes eligen donde mostrarlas. Y con un botón de ocultar cada label. 

D7 "D7Fondo" Colocar una imagen de fondo en el jPanel y agregar controles en nuestra ventana. Propiedades del Slider.

Vamos a descargar una imagen jpg o png para ponerla de fondo de ventana en nuestro programa (en el Panel).