Arduino Candygrabber (7 / 9 steg)

Steg 7: Flash-klienten och tillämpning

Nu när vi har våra klar socket vi kan komma ner och smutsiga med ActionScript 3.0-kod. Du kan hämta koden i slutet av detta steg. Efter att ha gett det många trodde beslutat jag att inte gå till detalj och förklara hur jag skrev klassen och vad den gör. Omfattningen av detta instructable är inte att lära dig om klasser, designmönster och OOP (objektorienterad programmering). Snarare ska jag fokusera på hur man använder den. När jag började kodning jag beslutat att använda en designmönstret MVC (Model/View/Controller) för klassen och som det växte en realiserade att kanske det inte var den bästa idén och att jag borde ha använt en annan mer enkel och skalbar design mönster. Men att vara angelägna om att fortsätta med projektet bestämde jag mig att hålla sig till den. Oroa dig inte klassen fungerar ändå. Jag kommer att utstationering de nya klasserna så snart jag avsluta dem.

Så öppna Flash och skapa två nya flash-filer. En som ActionScript 3.0 och ger den namnet Client.fla, och den andra för Adobe AIR med namnet ArduinoAIR.fla. Skapa två ActionScript-filer sedan och kallar dem ClienDocument.as och ArduinoAIRDocument.as. Klienten innehåller en TextArea-komponent som heter "msgArea", InputText komponent som heter "input", två knappar komponent kallas "sendButton" och "reconnectButton", tre reglaget komponenter kallas "motorX", "motorY", "motorZ" och fyra dynamiska TextFields kallas "red5StatusTxt", "sharedStatusTxt", "socketStatusTxt" och "queueStatus".
AIR app har samma komponenter, förutom att det också har en extra knappkomponent som kallas "sendArduinoButton". När du har dessa uppsättning upp du måste peka varje blixt arkivera på det är dokumentklass. Dokumentklasser i klartext används för att flytta din kod från tidslinjen till en extern acrionscript fil. Så för Client.fla dokumentklassen bör ClientDocument.as, och för bör ArduinoAIR.fla ArduinoAIRDocument.as. Okej. Nu öppnar ClientDocument.as och för att inte se vad vi har här.

paketet {importera flash.display.*;import flash.events.*;import flash.net.URLRequest;import flash.text.*;import com. SocketsConnection.XMLSocketModel;import com. SocketsConnection.XMLSocketView;import com. SocketsConnection.XMLSocketController;import com. Red5Link.Red5Broadcast;publicclass ClientDocument sträcker sig MovieClip
{publicvar xmlSocketModel:XMLSocketModel; publicvar xmlSocketView:XMLSocketView; publicvar xmlSocketController:XMLSocketController; publicvar sändning: Red5Broadcast; offentlig funktion ClientDocument() {
msgArea.visible=false;
inputMessage.visible=false;
winnerStamp.visible=false;
broadcast = nya Red5Broadcast ("rtmp://yourdomain.com", "red5BroadcastDemo", red5StatusTxt);
addChild(broadcast);
xmlSocketModel = ny XMLSocketModel("arduinoproject.no-ip.org",8890,"client");
xmlSocketView = ny XMLSocketView(msgArea,socketStatusTxt);
xmlSocketView.socketsModel = xmlSocketModel;
xmlSocketController = ny XMLSocketController();
xmlSocketController.socketsModel=xmlSocketModel;
xmlSocketController.videoBroadcast=broadcast;
xmlSocketController.addSendButton(sendButton,inputMessage);
xmlSocketController.addReconnectButton(reconnectButton);
xmlSocketController.addMotorButtons(motorX,motorY,motorZ);
xmlSocketController.addQueueStatus(queueStatus);
xmlSocketController.addWinnerStamp(winnerStamp);
xmlSocketController.sharedObject=new Array ("rtmp://yourdomain.com", "motorer", sharedStatusTxt) ;}}}

I de första raderna definierar vi de klasser vi ska använda.
De saker vi är intresserade av är inuti den offentliga funcion ClientDocument() så låter går igenom var och en av dem och förklara vad de gör.

offentlig funktion ClientDocument() {
msgArea.visible=false;
inputMessage.visible=false;
winnerStamp.visible=false;
broadcast = nya Red5Broadcast ("rtmp://yourdomain.com", "red5BroadcastDemo", red5StatusTxt);
addChild(broadcast);
xmlSocketModel = ny XMLSocketModel("arduinoproject.no-ip.org",8890,"client");
xmlSocketView = ny XMLSocketView(msgArea,socketStatusTxt);
xmlSocketView.socketsModel = xmlSocketModel;
xmlSocketController = ny XMLSocketController();
xmlSocketController.socketsModel=xmlSocketModel;
xmlSocketController.videoBroadcast=broadcast;
xmlSocketController.addSendButton(sendButton,inputMessage);
xmlSocketController.addReconnectButton(reconnectButton);
xmlSocketController.addMotorButtons(motorX,motorY,motorZ);
xmlSocketController.addQueueStatus(queueStatus);
xmlSocketController.addWinnerStamp(winnerStamp);
xmlSocketController.sharedObject=new Array ("rtmp://yourdomain.com", "motorer", sharedStatusTxt);}

De tre första raderna dölja TextAreas och vinnare trophy. 4. linje initierar Red5Broadcast klass som hanterar den ström och sändning av videon. Vi måste ge det placeringen av red5 server, red5 programnamnet och TextField där stream status visas. Då måste vi lägga till visningslistan annars det skulle inte Visa videoströmmen.
Nästa, Flash kommunicerar med php uttaget över en XMLSocket-klass som ingår i flash. Jag skapade en modell-klass som kommer att hantera alla nödvändiga lyssnare och skicka händelser när data tas emot. Det kallas XMLSocketModel och vi initiera det här sättet:

xmlSocketModel = ny XMLSocketModel("arduinoproject.no-ip.org",8890,"client");

Vi måste passera URL där är vår socket, våra uttaget nummer, och som den sista parametern vilken app. URL: en jag använder är arduinoproject.no-ip.org. Ja använder jag www.no-ip.org service. Detta sätt jag har möjligheten att ha ett värdnamn för min dynamiska IP. Bara registrera dig, plocka ett värdnamn och installera programmet på din dator. Det sista vi passerar är "klient" eftersom vi arbetar nu på vår klient flash-fil. Observera att alla parametrar måste fyllas.

Nästa rad initierar klassen Visa. Det används för att visa inkommande data och den ändras när den tar emot händelser sänds från klassen modell.

xmlSocketView = ny XMLSocketView(msgArea);

När vi initiera xmlSocketView passerar vi den TextArea kallas "msgArea" som en parameter. Som informerar om det var våra inkommande data ska visas. Nästa rad berättar vilken modell det bör lyssna efter händelser.

xmlSocketView.socketsModel = xmlSocketModel;

Så xmlSocketView bör lyssna xmlSocketModel för händelser.

Nästa måste vi initiera våra kontrollerklass. Detta är där alla magin händer. Kontrollerklassen är där alla beslut och är gjord och alla kommandot utfärdas. Också ska de knappar som vi lägger på scenen ha lyssnare i controller bränning kommandon när vi trycker på dem, registeransvarige också förändringar när den tar emot händelser sjukdomssymtom från klassen modell. Så, först vi initiera Controler. I nästa borde rad vi berätta den vilken modell det lyssna. Igen är som med vyn klass vi berätta den modellen xmlSocketModel. Då vi tala om det för att det är videoBroadcast = TV-sändning . Vi lägger till knappar, "queueStatus" TextField för visning av kön, "winnerStamp" MovieClip som visar om klienten vinner.
Äntligen vi initiera sharedObject som växlar in kommandon för motorn med luft app. Parametrarna är din domän väg, namnet för det delade objektet och "sharedStatusTxt" TextField där den delade anslutningen status visas.

xmlSocketController = ny XMLSocketController();
xmlSocketController.socketsModel=xmlSocketModel;
xmlSocketController.videoBroadcast=broadcast;
xmlSocketController.addSendButton(sendButton,inputMessage);
xmlSocketController.addReconnectButton(reconnectButton);
xmlSocketController.addMotorButtons(motorX,motorY,motorZ);
xmlSocketController.addQueueStatus(queueStatus);
xmlSocketController.addWinnerStamp(winnerStamp);
xmlSocketController.sharedObject=new Array ("rtmp://yourdomain.com", "motorer", sharedStatusTxt);

Nu ska vi ta en titt på koden för AIR app.

paketet {importera flash.display.*;import flash.events.*;import flash.net.URLRequest;import flash.text.*;import fl.controls.Slider;import com. SocketsConnection.XMLSocketModel;import com. SocketsConnection.XMLSocketView;import com. SocketsConnection.XMLSocketAppController;import com. SocketsConnection.SocketModel;import com. SocketsConnection.SocketView;import com. SocketsConnection.SocketAppController;import com. Red5Link.Red5Broadcast;publicclass ArduinoAIRDocument sträcker sig MovieClip
{publicvar xmlSocketModel:XMLSocketModel; publicvar xmlSocketView:XMLSocketView; publicvar xmlSocketAppController:XMLSocketAppController; publicvar socketModel:SocketModel; publicvar socketView:SocketView; publicvar socketAppController:SocketAppController; publicvar sändning: Red5Broadcast; offentlig funktion ArduinoAIRDocument() {
broadcast = nya Red5Broadcast ("rtmp://yourdomain.com", "red5BroadcastDemo", red5StatusTxt);
addChild(broadcast);

xmlSocketModel = ny XMLSocketModel("localhost",8890,"AIR");
xmlSocketView = ny XMLSocketView(msgArea,socketStatusTxt);
xmlSocketView.socketsModel = xmlSocketModel;

socketModel = ny SocketModel ("localhost",
5333, "arduino");
socketView = ny SocketView(msgArea);
socketView.socketsModel = socketModel;

xmlSocketAppController = ny XMLSocketAppController();
xmlSocketAppController.socketsModel=xmlSocketModel;
xmlSocketAppController.colaboratingModel=socketModel;
xmlSocketAppController.videoBroadcast=broadcast;
xmlSocketAppController.addSendButton(sendButton,inputMessage);
xmlSocketAppController.addReconnectButton(reconnectButton);
xmlSocketAppController.addSendArduinoButton(sendArduinoButton);
xmlSocketAppController.addMotorButtons(motorX,motorY,motorZ);
xmlSocketAppController.sharedObject=new Array ("rtmp://yourdomain.com", "motorer", sharedStatusTxt);

socketAppController = ny SocketAppController();
socketAppController.socketsModel=socketModel;
socketAppController.colaboratingModel=xmlSocketModel ;}}}

Ta en noggrann titt på offentlig funktion ArduinoAIRDocument().

offentlig funktion ArduinoAIRDocument() {
broadcast = nya Red5Broadcast ("rtmp://yourdomain.com", "red5BroadcastDemo", red5StatusTxt);
addChild(broadcast);

xmlSocketModel = ny XMLSocketModel("localhost",8890,"AIR");
xmlSocketView = ny XMLSocketView(msgArea,socketStatusTxt);
xmlSocketView.socketsModel = xmlSocketModel;

socketModel = ny SocketModel ("localhost",
5333, "arduino");
socketView = ny SocketView(msgArea);
socketView.socketsModel = socketModel;

xmlSocketAppController = ny XMLSocketAppController();
xmlSocketAppController.socketsModel=xmlSocketModel;
xmlSocketAppController.colaboratingModel=socketModel;
xmlSocketAppController.videoBroadcast=broadcast;
xmlSocketAppController.addSendButton(sendButton,inputMessage);
xmlSocketAppController.addReconnectButton(reconnectButton);
xmlSocketAppController.addSendArduinoButton(sendArduinoButton);
xmlSocketAppController.addMotorButtons(motorX,motorY,motorZ);
xmlSocketAppController.sharedObject=new Array ("rtmp://yourdomain.com", "motorer", sharedStatusTxt);
socketAppController = ny SocketAppController();
socketAppController.socketsModel=socketModel;
socketAppController.colaboratingModel=xmlSocketModel;}

Koden är nästan samma som klienten flash-filen utom när vi initiera klassen xmlSocketModel vi har att passera "AIR" som den sista parametern.

Den nya sak som vi har här sker i linjer 8 till 10.

socketModel = ny SocketModel("localhost",5333,"arduino");
socketView = ny SocketView(msgArea);
socketView.socketsModel = socketModel;

Här initiera vi socketModel. SocketModel är klassen modell för att kommunicera med arduino. Den använder flash's klassen Socket. Linje 9 initierar socketView som är den Visa klassen för socketModel. När vi initialze det vi har att passera TextArea "msgArea" för det är också där vi kommer visar de kommandon som vi skickar till arduino och vad arduino återgår till luften app. linje 10 berättar socketView att lyssna efter händelser från socketModel.

XmlSocketAppController sträcker sig från xmlSocketController så vi initiera det nästan på samma sätt.

De sista tre raderna kod initiera socketAppController som är registeransvarig för socketModel. Det kommer att hantera kommunikationen mellan AIR app och arduino via port 5333. Port 5333 öppnas av TinkerProxy.

Nu har vi att publicera våra filer. Publicera Client.fla för Flash Player 10 och AIR app.