สารบัญ:

DoReMi: 8 ขั้นตอน
DoReMi: 8 ขั้นตอน

วีดีโอ: DoReMi: 8 ขั้นตอน

วีดีโอ: DoReMi: 8 ขั้นตอน
วีดีโอ: Ojamajo Doremi op3 - Ojamajo de BANBAN [ThaiSub](TV Size) 2024, พฤศจิกายน
Anonim
Image
Image
Creando Código กับ Arduino IDE
Creando Código กับ Arduino IDE

Si quieres crear este instrumento ดนตรีมัลติมีเดีย "DoReMi" puedes seguir este paso a paso:

เสบียง

Estos son los materiales que vas a necesitar:

1. เซลลูลาร์

2. Wemos Lolin32 (กันติแดด:1)

3. โปรโตบอร์ด (กันติแดด:1)

4. สายเคเบิลสำหรับ conexión (Dupont tipo Macho-Macho ó de cobre) (Cantidad: 7)

5. กระดาษ

6. Carton

7. อลูมิเนียม

8. Tijeras

9. เรกลา

ขั้นตอนที่ 1: Creando Código En Arduino IDE

Creando Código กับ Arduino IDE
Creando Código กับ Arduino IDE

El primer สั่งซื้อล่วงหน้า conectar cables dupont en los pines táctiles del Lolin32 como se muestra en las dos รูปภาพของ arriba

  • ปักหมุดแท็ก en GPIO 4
  • ปักหมุดแท็ก en GPIO 2
  • ปักหมุดแท็ก en GPIO 15
  • ปักหมุดแท็ก en GPIO 14
  • ปักหมุดแท็ก en GPIO 27
  • ปักหมุดแท็ก en GPIO 32
  • ปักหมุดแท็ก en GPIO 33

Luego deberás realizar el código "Bluetooth" และซอฟต์แวร์ Arduino IDE, que aparecerá en la parte inferior.

ขั้นตอนที่ 2: Creando Proyecto En App Inventor

Primero deberás dirigirte al siguiente ลิงก์สำหรับนักประดิษฐ์แอป abrir: นักประดิษฐ์แอป

Luego en la parte de arriba a la izquierda dar click en Create Apps และ ingresar tu correo electrónico para iniciar sesión.

สำหรับการสร้างใหม่ทั้งหมด คลิก en: Start new project y después añadir 1 screen dando click en: add Screen.

ขั้นตอนที่ 3: Creando La Interfaz De Usuario De La Aplicación

Creando La Interfaz De Usuario De La Aplicación
Creando La Interfaz De Usuario De La Aplicación

Para diseñar la interfaz de usuario:

Primero deberás poner de manera horizontal la pantalla, esto se hace dando click en la parte derecha donde dice: Screen1 และ en donde dice ScreenOrientation camiar la opción โดย Landscape.

Luego buscar en Pallete(ubicada en la parte izquierda):

เค้าโครง: la opción que diga HorizontalArrangement y arrastrarla a la interfaz

ส่วนติดต่อผู้ใช้: ListPicker(que es para que en la aplicación se muestre una lista de elementos y el usuario pueda elegir) และ Properties, situada en la parte derecha, poner en Text: Escanear. ป้ายกำกับ También(que es para mostrar texto) y al igual que con ListPicker poner en Text: Estado:Conectado. Estos dos componentes deberás arrastrarlos al HorizontalArrangement

  • เซ็นเซอร์ตรวจจับ: นาฬิกาและตัวเลือกอื่นๆ
  • การเชื่อมต่อ: BluetoothClient และ arrastrar a la interfaz

Si deseas observar como debería quedar, en la parte superior se encuentra una imagen de la interfaz de usuario ปลายทาง

ขั้นตอนที่ 4: Importando Imagenes En App Inventor

Importando Imagenes En App Inventor
Importando Imagenes En App Inventor
Importando Imagenes En App Inventor
Importando Imagenes En App Inventor
Importando Imagenes En App Inventor
Importando Imagenes En App Inventor

นำเข้าจากรูปภาพ encuentran en la parte de arriba deberás dirigirte a Media, ubicada a la derecha debajo de Components, และ seleccionar: อัพโหลดไฟล์ y เลือกไฟล์.

Después deberás ir a Pallete (ubicado en la parte izquierda) และ en User interface arrastrar a la interfaz la opción que diga Image, después en Properties(en la parte derecha) buscar รูปภาพ y en esta aparecerán las imagenes ก่อนหน้า.

หมายเหตุ: Para acomodar las imágenes en el centro, en Properties cambiar en Width y Height โดย: Fill parent. Todas las imágenes (menos la del inicio) deben desactivarse, para esto en Properties se debe desactivar la opción มองเห็นได้ (que no esté azul).

  1. รูปภาพของ inicio (En AppInventor: Image1)
  2. Imagen Do (En AppInventor: Image2)
  3. Imagen Fa (ผู้สร้าง AppInventor: Image5)
  4. Imagen La (จาก AppInventor: Image7)
  5. Imagen Mi (En AppInventor: Image4)
  6. Imagen Re (En AppInventor: Image3)
  7. Imagen Si (จาก AppInventor: Image8)
  8. Imagen Sol (En AppInventor: Image6)

ขั้นตอนที่ 5: Importando Sonidos En App Inventor

Para importar los sonidos que están en la parte de abajo deberás dirigirte a Media, ubicada a la derecha debajo de Components, และ seleccionar: อัปโหลดไฟล์ y เลือกไฟล์

Después deberás ir a Pallete (ubicado en la parte izquierda) y en Media arrastrar a la interfaz la opción que diga Sound, después en Properties(en la parte derecha) รถบัส ที่มา en esta aparecerán los sonidos ก่อน que añaement.

  1. Sonido DO (En AppInventor: Sound1)
  2. Sonido FA (En AppInventor: Sound4)
  3. Sonido LA (En AppInventor: Sound6)
  4. Sonido MI (En AppInventor: Sound3)
  5. Sonido RE (En AppInventor: Sound2)
  6. Sonido SI (En AppInventor: Sound7)
  7. Sonido SOL (En AppInventor: Sound5)

ขั้นตอนที่ 6: Creando El Código En App Inventor

Creando El Código En App Inventor
Creando El Código En App Inventor
Creando El Código En App Inventor
Creando El Código En App Inventor
Creando El Código En App Inventor
Creando El Código En App Inventor
Creando El Código En App Inventor
Creando El Código En App Inventor

Primero dar คลิก en Blocks, ubicado en la parte superior a la derecha al lado de Designer, เหนือกว่า realizar la programación de los componentes

Después en Blocks(ubicado en la parte izquierda) โพสต์ arrastrar los bloques que necesites.

1. ในส่วนที่เกี่ยวข้องกับการคลิกรายการสิ่งที่ต้องทำและรายการอื่นๆ (Imagen1)

2. Acá se conecta al bluetooth seleccionado y se cambia el texto de la app de "Desconectado" และ "Conectado" (Imagen2)

3. En esta parte se inicializa la variable en la que se va a guardar lo que se recibe desde el arduino (Imagen3).

4. Con este se activa la imagen y el sonido de la nota "DO" y desaparecen las demás imagenes(Imagen4).

5. Con este se activa la imagen y el sonido de la nota "RE" y desaparecen las demás imagenes(Imagen5).

6. Con este se activa la imagen y el sonido de la nota "MI" y desaparecen las demás imagenes(Imagen6).

7. Con este se activa la imagen y el sonido de la nota "FA" y desaparecen las demás imagenes(Imagen7).

8. Con este se activa la imagen y el sonido de la nota "SOL" และ desaparecen las demás imagenes(Imagen8).

9. Con este se activa la imagen y el sonido de la nota "LA" y desaparecen las demás imagenes(Imagen9).

10. Con este se activa la imagen y el sonido de la nota "SI" y desaparecen las demás imagenes(Imagen10).

ขั้นตอนที่ 7: Desarrollando El Piano Con Cartón, Papel Y Aluminio

Desarrollando El Piano Con Cartón, Papel Y Aluminio
Desarrollando El Piano Con Cartón, Papel Y Aluminio
Desarrollando El Piano Con Cartón, Papel Y Aluminio
Desarrollando El Piano Con Cartón, Papel Y Aluminio
Desarrollando El Piano Con Cartón, Papel Y Aluminio
Desarrollando El Piano Con Cartón, Papel Y Aluminio

Para desarrollar este instrumento ดนตรีมัลติมีเดีย puedes utilizar las plantillas que están en la parte inferior, y la última imagen llamada "Guía"

1. Intentar que los cables queden como se muestra en la Imagen1.

2. Realizar agujero en la plantilla, en los cuadrados negros(Imagen2).

3. สายเคเบิล Ingresar los สำหรับ estos huecos (Imagen3)

4. Aseguar la plantilla en el cartón, al igual que la protoboard (Imagen4).

5. Reforzar la parte de atrás (Imagen5).

6. Recortar 7 trozos de aluminio: 6 ซม. x 6 ซม. (Imagen6)

7. Doblar el aluminio previamente recortado a la mitad (Imagen7).

8. Pegar cuidadosamente, colocando el cable adentro del doblez (Imagen8).

9. Añadir cintas que peguen todos los trozos de aluminio (Imagen9).

10. Ajustar บันทึกเกี่ยวกับ una regla (Imagen10)

11. Aseguar con más cintas horizontales los trozos (Imagen11).

12. El Total de las cintas pegadas horizontalmente fue de: 3 (Imagen12).

13. Pegar plantilla de las teclas en el cartón (ขนาด 18 ซม. x 26 ซม.) และ reforzar los lados (Imagen13)

14. Lo puedes decorar como desees (Imagen14).

หมายเหตุ: รูปภาพ ทั่วไป ทั่วไป en la parte de arriba en el orden de los pasos. Aquí encontrarás más información sobre los Capacitive Touch Sensor Pins, และ la manera de unirlo al aluminio

ขั้นตอนที่ 8: Instrumento Musical Multimedia Terminado

En la parte ที่ด้อยกว่า podrás encontrar el apk del proyecto para que lo puedas descargar en el celular และ de esta manera probar la aplicación.

แนะนำ: