Une fenêtre publique avec HTML5 (6 / 8 étapes)

Étape 6: Rendre la page Web HTML5 le travail à votre projet

C’est la partie la plus difficile. Vous devez modifier le site Web pour faire fonctionner correctement pour votre projet. Dans cette étape, nous allons essayer de vous faire comprendre en plus du code afin que vous serez en mesure de le modifier à vos besoins. Si nous ouvrons le fichier index.html, nous allons voir beaucoup de code. Il y a 2 pièces importantes dans le présent code pour l’instant.

Flashvars & CamIN & CamOut
Le premier bit important du code est les flashvars et les objets Flash. Les flashvars est une valeur de la variable où vous pouvez déclarer l’id de quel flux webcam vous souhaitez diffuser ou aimeriez voir. Vous verrez un couple de Flasvars qui ressemble à ça :

< param name = « FlashVars » value = "localID = pw2_2" / >

pw2_2 est synonyme de fenêtre Public numéro 2 et numéro 2 de la cam. (Normalement chaque fenêtre Public aura des cames 1 ou 2 selon les besoins du Créateur/propriétaire de la fenêtre Public.)

La flashvar est toujours déclaré à la fin de chaque instruction camin.swf ou camout.swf. Ces deux cam.swf objets fonctionnent comme ils sont nommés, ils montreront un flux webcam sur la page Web selon l’id récupérée et ils enverront un flux webcam avec l’id indiqué. Si autres que Windows Public pouvez incorporer votre flux sur leur page Web. La seule chose que vous devrez éditer ici est id.

Après que vous avez enregistré à http://www.publicwindow.net, vous recevrez un nom de fenêtre Public et un certain nombre de fenêtre Public. Votre flux webcam sera « pw11_1 » quand vous avez une fenêtre Public numéro 11 et vous souhaitez envoyer un flux de webcam 1. (Cette fonction n’est pas encore implémentée, vous pouvez utiliser pw6_1 par exemple)

Le bit de code suivant est les boutons.

Boutons et données série
Si vous faites défiler le code, vous verrez la partie où les 3 boutons sont déclarés. Dans ce morceau de code, nous faisons 3 boutons avec un. Image PNG pour leur donner leur propre apparence. Voici le code que vous verrez.

< 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 >

Comme vous pouvez voir les images servent également de liens et donc comme un bouton. Si vous cliquez sur un des boutons, ils enverront un message avec la fonction « ws » qui est une fonction que l'on retrouve dans les fichiers de script java. Le < div onClick="ws.send('0'); » > Déclaration enverra un 0 avec javascript pour python qui enverra ensuite un octet à l’Arduino. Le « 0 » est interprétée par l’Arduino et se traduira par une modification de l’acte accompli par l’Arduino.

Dans cet exemple, nous avons 3 boutons : un serpent, un nuage et un bouton LOL. Le modèle a été utilisé en combinaison avec un cube de LED. Si nous brancher la LED-cube avec un Arduino vers le site Web. Vous serez en mesure de changer l’animation du LED-cube en cliquant sur les boutons.

Résumé
Si vous souhaitez modifier les flux de webcam, vous modifiez l’id les objets flash.
Si vous voulez changer les boutons, l’octet qui vous souhaitez envoyer à l’Arduino. (Et pour l’extérieur juste modifier l’image ou les fichiers CSS)

NOTE : Nos tests ont indiqué qu’il est possible d’envoyer 1 octet seulement.

Maintenant que vous savez comment fonctionne le système, vous serez en mesure de démarrer. Passez à l’étape suivante.

Articles Liés

Une fenêtre d’Iris mécanique avec hublot

Une fenêtre d’Iris mécanique avec hublot

Dans ce Instructable je vais décrire le processus de construction d'une fenêtre de diaphragme iris mécanique avec un hublot dans un mur existant. J'ai toujours apprécié vieille ingéniosité façonnée, où la mécanique ont été comme beaucoup l'art comme
Comment construire une belle porte d’entrée conçu avec une fenêtre sur le côté.

Comment construire une belle porte d’entrée conçu avec une fenêtre sur le côté.

Cette instructable vous montrera comment construire une porte de givre génial et très bien conçu avec une fenêtre latérale.Étape 1: La Base de la porte. Vous pouvez créer la base de la porte en obtenant le gris Lego (4 X 10) et placez ensuite les 2 b
Photos de produit Simple avec papier de l’imprimante, un Smartphone et une fenêtre de tir

Photos de produit Simple avec papier de l’imprimante, un Smartphone et une fenêtre de tir

Tutoriel du débutant court et doux sur comment vous pouvez tirer facilement une photo du produit la recherche professionnelle à l'aide de n'importe quelle caméra, lumière naturelle fenêtre et quelques feuilles de papier blanches d'imprimante.Étape 1:
Comment définir une fenêtre Public

Comment définir une fenêtre Public

Public Window (http://www.publicwindow.net) est un projet open source qui permet aux artistes de leurs créations s'affichent dans une fenêtre et des gens de partout dans le monde interagir avec lui. Il s'agit d'un guide étape par étape sur la façon d
Fixation manivelle cassée sur une fenêtre Store

Fixation manivelle cassée sur une fenêtre Store

Je suis propriétaire d'un bien locatif, il y a environ 30 fenêtres qui ont été installés avec des engrenages en aluminium dans l'Assemblée de manivelle. Pratiquement tout d'eux sont dépouillés. Ils n'ont pas été conçus pour une utilisation à long ter
Oeufs dans une fenêtre

Oeufs dans une fenêtre

C'est un plat très facile à faire qui a très peu d'ingrédients, et peut être pris avec vous et mangé sur votre trajet au travail tous les matins. J'avais l'habitude de faire cela pour mon fils quand il était un petit garçon il y a une décennie et dem
Ventilation forcée de fenêtre aveugle avec

Ventilation forcée de fenêtre aveugle avec

surtout pendant l'été il obtient bien au chaud dans ma chambre. La chambre dispose de quelques grandes fenêtres, alors j'ai pensé que certains flux d'air pendant la nuit peut vraiment améliorer les choses. Par conséquent, j'ai décidé de me construit
Remplacement d’une fenêtre de mica (Glimmerfenster) dans un four de Meller

Remplacement d’une fenêtre de mica (Glimmerfenster) dans un four de Meller

le voyant dans les fours meller était vieux, laid et chapeau ensemble. Elle affecte le tirant d'eau de tout cela. Donc il doivent être remplacées. Remplacements de vieux fours peut être une douleur. Vous devrez peut-être google peu plus longtemps, ou
Faire une fenêtre à double vitrage bricolage maintenable

Faire une fenêtre à double vitrage bricolage maintenable

vitrage est habituellement faits de panneaux de verre préfabriqués.  Bien qu'il s'agit d'une bonne conception pour réduire le coût et la complexité de la fabrication, il y a des inconvénients.  Par exemple, si une fenêtre à double vitrage est cassée,
Installation de climatiseur à l’intérieur d’une fenêtre coulissante horizontalement.

Installation de climatiseur à l’intérieur d’une fenêtre coulissante horizontalement.

Plus bon a/c sont conçus pour les fenêtres coulissantes verticales, ce qui crée un problème si vous avez des fenêtres coulissantes horizontales. Installation d'un climatiseur à l'intérieur d'une fenêtre coulissante horizontalement ne doit pas l'air m
Comment graver une fenêtre de l’ordinateur (partie 2)

Comment graver une fenêtre de l’ordinateur (partie 2)

cela va avec la façon de graver une fenêtre de l'ordinateur (partie 1) cette partie est facultative, mais je pense que c'est joli.Partie 2 prend cette gravure et ce qui en fait se démarquer. Cela rend la fenêtre regarder Tron comme d'une manière. Il
Créer une fenêtre d’invite de commandes la voie facile.

Créer une fenêtre d’invite de commandes la voie facile.

je sais que cela a été fait avant, mais ma version est un tout petit peu différenteBon, si vous voulez essayer quelques trucs cool invite de commande, mais vous n'arrivez pas à trouver comment ouvrir réellement invite de commande. (Ce serait le cas d
Comment faire pour remplacer une fenêtre

Comment faire pour remplacer une fenêtre

cette instructable se décline en une saveur métrique basée au Royaume-Uni.Au Royaume-Uni, vous devez également construire contrôle d'approbation pour l'installation de windows - vous avez seulement besoin de quelqu'un pour sortir et examiner les fenê
Comment faire pour remplacer le verre dans une fenêtre de l’armature en bois.

Comment faire pour remplacer le verre dans une fenêtre de l’armature en bois.

Ma maison a des fenêtres encadrées en bois qui, de temps en temps, ont été brisées.  J'ai employé un professionnel glasier remplacer un de mes fenêtres, qui a coûté un peu moins de 500 $.  J'ai décidé de regarder travailler alors que j'ai pu apprendr