Openbare venster met HTML5 (6 / 8 stap)

Stap 6: Maken van de HTML5 Webpage werk bij uw project

Dit is het moeilijkste deel. U wilt wijzigen op de website te laten werken goed voor uw project. In deze stap zullen we proberen om u meer begrijpen van de code, zodat u zal zitten kundig voor bewerken aan uw behoeften te maken. Als we het index.html bestand openen zullen we zien een heleboel code. Er zijn 2 belangrijke stukken in deze code voor nu.

Flashvars CamIN & CamOut
De eerste belangrijke stukje code is de flashvars en de Flash-objecten. De flashvars is een variabele waarde waar kunt u het declareren van de id van welke webcam stream u zou willen uitzenden of zou willen zien. Hier ziet u een aantal Flasvars op zoek als dit:

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

pw2_2 staat voor openbare vensternummer 2 en cam nummer 2. (Normaal gesproken elke openbare venster zal hebben 1 of 2 webcams afhankelijk van behoefte van de maker/eigenaar van de openbare venster.)

De flashvar is altijd verklaard aan het einde van elke camin.swf of camout.swf-instructie. Deze twee cam.swf objecten functioneren zoals ze zijn genoemd, zullen ze laten zien van een webcam stream op de webpagina afhankelijk van de opgehaalde id en zij zal afgeven een webcam stream met de gegeven id. Dus kunt dat andere openbare Vensters insluiten uw stream op hun website. Het enige ding dat u zult moeten bewerken hier is id.

Nadat u hebt geregistreerd bij http://www.publicwindow.net, ontvangt u een openbare venster naam en een openbare vensternummer. Uw webcam stream zal worden "pw11_1" wanneer u openbare vensternummer 11 hebt en u wilt het verzenden van een gegevensstroom van webcam 1. (Deze functie is nog niet uitgevoerd, u annuleerteken uitsluitend toepassing pw6_1 bijvoorbeeld)

Het volgende stukje code is de knoppen.

Knoppen en seriële data
Als u scroll naar beneden de code ziet u het deel waar de 3 knopen worden aangegeven. In dit codefragment maken we 3 knoppen met een. PNG afbeelding om hen hun eigen look en feel. Hier is de code die u ziet.

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

Zoals u kunt zien de beelden ook functioneren als koppelingen en daarom als een knop. Als u op een van de knoppen klikt, stuurt zij een bericht met "ws"-functie die een functie die kan worden gevonden in de java-script bestanden. De < div onClick="ws.send('0');" > verklaring stuurt een 0 met javascript aan python die dan een byte naar de Arduino stuurt. De "0" wordt geïnterpreteerd door de Arduino en zal resulteren in een verandering van de acties die worden uitgevoerd door de Arduino.

In dit voorbeeld hebben we 3 knoppen: een slang, een wolk en een LOL-knop. De sjabloon werd gebruikt in combinatie met een LED-kubus. Als we de LED-kubus met een Arduino op de Website van haak. U zal zitten kundig voor de animatie in de LED-kubus wijzigen door te klikken op de knoppen.

Samenvatting
Als u wilt de webcam streams bewerken wijzigt u de id op de flash-objecten.
Als u wilt wijzigen van de knoppen, de byte die u wilt verzenden naar de Arduino. (En voor de buitenkant gewoon wijzigen de afbeelding of CSS-bestanden)

Opmerking: Onze tests aangegeven dat er mogelijk om te verzenden alleen 1 byte.

Nu dat je weet hoe het systeem werkt zal u zitten kundig voor voorsprong op opwaarts. Ga naar de volgende stap.