Ventana pública con HTML5 (6 / 8 paso)

Paso 6: Hacer la Página Web de HTML5 en su proyecto de trabajo

Esta es la parte más difícil. Necesita cambiar la web para que funcione correctamente para su proyecto. En este paso vamos a intentar hacer entender más del código de modo que podrás editarlo a tus necesidades. Si abrimos el archivo index.html vamos a ver un montón de código. Por ahora hay 2 piezas importantes en este código.

Flashvars y CamIN y CamOut
El primer bit importante del código es el flashvars y objetos Flash. El flashvars es un valor variable que puede declarar el identificador de que corriente webcam desea transmitir o le gustaría ver. Usted verá un par de Flasvars como esto:

< nombre de param = "FlashVars" value = "localID = pw2_2" / >

pw2_2 significa ventana pública número 2 y número 2 de la cam. (Normalmente cada ventana pública tendrá levas 1 o 2 dependiendo de las necesidades del fabricante o propietario de la ventana pública.)

El flashvar siempre es declarado al final de cada declaración de camin.swf o camout.swf. Estos dos cam.swf los objetos funcionan como se llaman, mostrará un stream de la webcam en la página web dependiendo del id obtenido y enviará una corriente de webcam con el dicho id. Así que otros Windows público puede incrustar tu stream en su página web. Lo único que vas a necesitar para editar aquí es id.

Después de que te has registrado en http://www.publicwindow.net, usted recibirá un nombre de ventana pública y un número de ventana pública. Su corriente de la webcam será "pw11_1" cuando tienes ventana pública número 11 y desea enviar una secuencia de webcam 1. (Esta función no está todavía implementada, se puede usar pw6_1 por ejemplo)

El siguiente pedazo de código es el botones.

Botones y datos en serie
Si se desplaza hacia abajo el código a ver la parte donde se declaran los 3 botones. En este pedacito de código hacemos 3 botones con una. Imagen PNG para darles su propia apariencia. Aquí está el código que verás.

< div id = "knoppen" class = "fltrt" >
< div onClick="ws.send('0');" >< img src="img/snake_button.png" >< / img >< / div >
< div onClick="ws.send('R');" >< img src="img/wolk_button.png" >< / img >< / div >
< div onClick="ws.send('L');" >< img src="img/lol_button.png" >< / img >< / div >
< / div >

Como se puede ver las imágenes también funcionan como enlaces y por lo tanto como un botón. Si haces clic en uno de los botones enviará un mensaje con la función de "ws" que es una función que puede encontrarse en los archivos de script de java. La < div onClick="ws.send('0');" > Declaración enviará un 0 con javascript a python que enviará un byte para el Arduino. El "0" es interpretado por el Arduino y resultará en un cambio de las acciones realizada por el Arduino.

En este ejemplo tenemos 3 botones: una serpiente, una nube y un botón de LOL. La plantilla fue utilizada en combinación con un cubo del LED. Si enganchamos hasta el cubo del LED con un Arduino a la Página Web. Podrás cambiar la animación del cubo LED haciendo clic en los botones.

Resumen
Si desea editar las secuencias de webcam cambian el id en los objetos flashes.
Si desea cambiar los botones, cambiar el byte que se desea enviar para el Arduino. (Y para el exterior solo cambia la imagen o archivos CSS)

Nota: Nuestras pruebas indican que es posible enviar sólo 1 byte.

Ahora que sabes cómo funciona el sistema podrás poner en marcha. Proceder al siguiente paso.

Artículos Relacionados

Cómo configurar una ventana pública

Cómo configurar una ventana pública

ventana pública (http://www.publicwindow.net) es un proyecto open source que permite a los artistas a mostrar sus creaciones en una ventana y que la gente de todo el mundo interactuar con él. Esta es una guía paso a paso sobre cómo configurar una ven
Ventana Spooky siluetas con siga-Me ojos

Ventana Spooky siluetas con siga-Me ojos

Halloween es casi aquí. Pero todavía tienes tiempo para armar algunas decoraciones realmente espeluznantes. Un gran tipo de decoración es la silueta de la ventana. Para hacer esto, todo lo que tiene para establecer un recorte del monstruo en su venta
Hacia fuera la ventana Mini compostera con ventilación doble

Hacia fuera la ventana Mini compostera con ventilación doble

esto es una idea original para una compostera mini que es específicamente para personas que viven en pequeños apartamentos o casas que carecen de un patio trasero.  Posiblemente usted podría usar este dispositivo para el desarrollo de suelo para pone
Conexión de sensor de alarma para ventana o puerta con Arduino

Conexión de sensor de alarma para ventana o puerta con Arduino

En este instructable explico de forma sencilla como conectar un sensor magnético un arduino de manera cuando este se dispare, Arduino encienda un LED.Este es el primer paso que dado para construirme una alarma con diferentes sensores basada en Arduin
Dibujo de cuadrados con html5 en un canvas de html5

Dibujo de cuadrados con html5 en un canvas de html5

En el tutorial pasado hicimos un html5 lienzo. Qué es un lienzo sin cosas en ese lienzo. ¿Así al crear una forma que sería probablemente de color derecho? para hacer un color de relleno que es necesario tener algo de código que se ve así-ctx.fillStyl
Una ventana de Iris mecánico con ojo de buey

Una ventana de Iris mecánico con ojo de buey

En este Instructable voy a describir el proceso de construcción de una ventana de diafragma iris mecánico con un ojo de buey en una pared existente de apertura. Yo siempre he apreciado viejo ingenio moda donde los mecánicos eran como mucho arte como
Ventana corredera con materiales reciclados

Ventana corredera con materiales reciclados

hoy voy a compartir la experiencia de hacer una ventana corredera para la sede nacional de La Asociación Cultural Skadix en España. Como podemos ver, la ventana está hecha con materiales reciclados de un armario y una pizarra.Hoy voy a compartir la e
Tunea tu teléfono viejo y hacer un Steampunk MP3 Player con pantalla táctil

Tunea tu teléfono viejo y hacer un Steampunk MP3 Player con pantalla táctil

Hola¿Qué puede hacer con tu viejo Smartphone? Vender, tirar, poner en el microondas?? * gg *No, hacemos un Steampunk MP3 Player con pantalla táctil ;)Paso 1: ComencemosTenemos un montón de cosas de bronce, electrónica y de fantasía.1 Smartphone Xperi
Construir un marco frío usando viejas ventanas

Construir un marco frío usando viejas ventanas

substituido la mayor parte de mis ventanas de sótano con más unidades eficientes de energía el verano pasado. Teniendo en cuenta que las viejas ventanas fueron más de 50 años de edad, estaban todavía en gran condición - yo no podía soportar para dese
Sistema de Login Batchfile simple con barra de carga

Sistema de Login Batchfile simple con barra de carga

aquí que estamos compartiendo el archivo por lotes para el sistema de login con barra de carga.Mostraremos que el código y también muestra cómo utilizar.También puede visitar nuestro blog para más códigos de archivo por lotes.FFLocker 1.0: http://err
Hacer un iOS App con Swift

Hacer un iOS App con Swift

Pensar en ello. Después de completar este tutorial puede decir a tus amigos que se construyó una aplicación. Acaba de decir.En este tutorial te llevaré a través del proceso de creación de una aplicación de iOS. En el camino, voy a hacer seguro de que
DIY Aquaponic Vertical ventana agricultura

DIY Aquaponic Vertical ventana agricultura

Esto es para la entrada de Instructables concurso:Hizo una combinación de proyecto-Sistema hidropónico;-Sistema aqua-cultura;-Elevación de aire de tecnología;Ventajas-Reciclaje + reutilización + reducción de desechos (botellas de refresco) en camas d
IKEA HACK: Jardineras de ventana de taza de la succión

IKEA HACK: Jardineras de ventana de taza de la succión

Tenemos toneladas de impresionante piso ventanales en nuestro taller, y hemos tenido que ser creativo con cómo almacenamos cosas. Cosas que están ancladas a los muros y vigas, pero es difícil poner un tornillo en el vidrio de placa de 1 pulgada.Me de
Antiguo marco de ventana

Antiguo marco de ventana

me gusta hacer marcos de todo tipo de cosas - en este caso utilicé una vieja ventana de madera.  Reutilización o apropiarse de diversos objetos para convertirse en marcos es útil porque el coste de cuadros grandes de enmarcado personalizado es casi p