Stap 2: Test 2: Web te verwerken (met SPACEBREW)
Download de volgende:
'Instructables_Processing_Test2.pde' in verwerking uitgevoerd.
'Instructables_Web_Test2/index.html' openen in een webbrowser.
Bezoek http://spacebrew.github.io/spacebrew/admin/admin.html?server=sandbox.spacebrew.cc
Verbind de twee knooppunten van 'variëren'.
TEST
WOW, kunnen we nu verwerking van het web controleren.
Nu laten we gaan over de code.
Verwerking van Code
U zult merken dat de code is zeer vergelijkbaar met stap 1.
We maken een abonnee:
spacebrewConnection.addSubscribe ("slider1", "range");Wanneer de verwerking een bereik-bericht ontvangt, de volgende functie heet: void onRangeMessage (String naam, int value) {println ("kreeg int berichtnaam" ":" waarde);
Als (name.equals("slider1") == true) {als (waarde > = 0 & & waarde < = 255) {bg_grey_val = waarde;}}}
Web (javascript/jquery)-Code
Ten eerste moeten we het instellen van spacebrew.
$(venster) .op ("load", setupSpacebrew);
functie setupSpacebrew () {console.log ("spacebrew verbinding instellen");
SB = nieuwe Spacebrew.Client();
SB.name(app_name);
SB.Description ("Web -> Processing");
sb.addPublish ("slider1", "bereik", "100");
sb.onOpen = BijOpenen;
SB.Connect(); };
Vervolgens moeten we de schuifregelaar instellen.
$(document) .bind ("pageinit", setupUI);functie setupUI() {console.log ("het opzetten van de UI-luisteraars");
Wanneer de status van de schuifbalk verandert dat het stuurt een bericht naar spacebrew
$(".slider").bind ("change", function (gebeurtenis, ui) {als (values[event.target.id]! = event.target.value) {sb.send (event.target.id, "range", event.target.value);
values[Event.target.id] = event.target.value; } }); }
En thats it. Fluitje van een cent.
