Prototyping trolldom med SPACEBREW (2 / 7 steg)
Steg 2: Testa 2: Web behandling (med SPACEBREW)
Ladda ner följande:
KÖR "Instructables_Processing_Test2.pde" i behandling.
Öppna "Instructables_Web_Test2/index.html" i en webbläsare.
Besök http://spacebrew.github.io/spacebrew/admin/admin.html?server=sandbox.spacebrew.cc
Anslut de två 'range' noderna.
TEST
WOW, kan vi nu kontrollera bearbetning från webben.
Nu låt oss gå igenom koden.
Bearbetning av kod
Du kommer att märka koden är mycket liknande till steg 1.
Vi skapar en abonnent:
spacebrewConnection.addSubscribe ("slider1", "range");När bearbetningen får en rad-meddelandet följande funktion kallas: void onRangeMessage (String namn, int value) {println ("fick int meddelande"namn":" värde);
om (name.equals("slider1") == true) {om (värde > = 0 & & värdet < = 255) {bg_grey_val = värde;}}}
Web (javascript/jquery)-kod
Först måste vi ställa in spacebrew.
$(fönster) .på ("ladda", setupSpacebrew);
funktion setupSpacebrew () {console.log ("inrättande av spacebrew anslutning");
SB = nya Spacebrew.Client();
SB.Name(APP_NAME);
SB.Description ("Web -> bearbetning").
sb.addPublish ("slider1", "range", "100");
sb.onOpen = onOpen;
SB.connect(); };
Sedan måste vi ställa reglaget.
$(dokument) .bind ("pageinit", setupUI); funktion setupUI() {console.log ("ställa in UI lyssnare");När reglaget tillståndet ändras skickas ett meddelande till spacebrew
$(".slider").bind ("ändra", funktion (händelse, ui) {om (values[event.target.id]! = event.target.value) {sb.send (event.target.id, "sortiment", event.target.value);
Values[Event.Target.ID] = event.target.value; } }); }
Och det är det. Piece of cake.