ESP8266 + Websocket server RGB LED controller (2 / 4 stap)

Stap 2: De Client van de Webserver


De web server-client is het deel dat met de webserver communiceert. Het is ook de interface waarmee we gaan werken. U kunt uitvoeren op de browser van uw computer, of uploaden als een web app.

Het index.html bestand downloaden vanaf hier[bewerken hier]

Ik schreef dit eenvoudige HTML-bestand in de Intel XDK IDE. Het is vergelijkbaar met telefoon kloof, waar u gebruik van HTML5/Javascript om hybrid apps te draaien op de meeste platformen van smartphone app kunt ontwerpen. Maar hier niet ik het opbouwen van een standalone app. Meer info over XDK hier. Ook is er een IOT-smaak, voor degenen onder u willen gebruik maken van Node.JS enz.

U kunt uw favoriete tekst-editor voor het bewerken van de HTML-script. Ik verkies xdi omdat ik een beginner ben en tips geeft bij het schrijven van codes.

OPMERKING

Of u esp verbonden met uw netwerk of als een toegangspunt, moet de web server-client worden uitgevoerd op computer/smartphone verbonden met hetzelfde netwerk als ESP.

De code uitgelegd

We moeten eerst het IP-adres van de webserver naar de invoertekst tijdelijke aanduiding invoegen. Het onderzoektijdvak kan worden verkregen van seriële monitor wanneer esp wordt code uitgevoerd van schets of kunt u het vinden van uw router. Als u esp8266 als toegangspunt uitvoert, is de ip 192.168.4.1. Wanneer ik verbinding maak met mijn thuisnetwerk, is ip van esp 192.168.1.100. Dus moet ik invoeren:

WS://192.168.1.100:81/

of als ik access Start aanwijst, ws://192.168.4.1:81/

de 81 is de poort waarnaar de server naar luistert.

Er zijn twee knoppen: LED knipperen en Reset LED. Blink leidde stuurt "LED" wanneer gedrukt en led stuurt RESET reset". Deze tekenreeksen worden geïnterpreteerd door code we in schets schreven en knippert leidde 13 of reset alle LED pin dienovereenkomstig waarden.

Er zijn 3 schuifregelaars, elk met de minimumwaarde 0 en max 255. Elke schuifregelaar R, G, B respectievelijk stuurt waarden x, y, z die is ontvangen door de webserver esp en draait dan rode, groene of blauwe LED waarde dienovereenkomstig.

Als u de client vanaf een smartphone gebruikt, kunt u ook proberen te waarde van pin wijzigen met behulp van telefoon versnellingsmeter. Dit kan echter niet werken op alle smartphone browsers.

Deze functie ter illustratie van het gebruik van sensoren in smartphones al inbegrepen

In mijn vorige project beschreef ik al het gebruik van GPS om waarde te sturen van smartphone tot hier in het bijzonder

Sensoren

U kunt uw eigen code schrijven om te gebruiken van de sensoren van de smartphone.

Hier heb ik de DeviceOrientationEvent gebruikt. U kunt navigator.geolocation gebruiken voor GPS waarden.

Voor meer info Lees hier https://developer.mozilla.org/en-US/docs/Web/API/D...

De knoppen naast de naam van elke as, wanneer geklikt begint luisteren als u wilt wijzigen in apparaat oriëntatie.

Het keuzerondje ernaast stuurt waarde naar de esp8266.

Webapp

U kunt ook uploaden van de html van de index als een web app en de sjabloon openen vanaf een smartphone verbonden met hetzelfde netwerk als de esp8266.

Hier is een voorbeeld. http://rahul2704.github.io

Voor instructies op hoe te te troep zulks opwaarts, hoofd omhoog hier, zijn zeer eenvoudig

Gerelateerde Artikelen

48 kanaal Mono / 16 kanaals RGB LED Controller

48 kanaal Mono / 16 kanaals RGB LED Controller

de 48 kanaal Mono/16 kanaals RGB LED Controller door Chromation systemen kan worden gebruikt om onafhankelijk controle 48 groepen/kanalen (tot 120ma per groep voor mono-color LEDs) of 16 groepen/kanalen van gemeenschappelijke anode RGB LED's. Het maa
40 x RGB LED Controller met 8-bits PWM en selecteerbaar patronen

40 x RGB LED Controller met 8-bits PWM en selecteerbaar patronen

UPDATE: Deze controller is vervangen door de veel beter 48 kanaal Mono / 16 kanaals RGB LED Controller, met USB-aansluiting en compatibiliteit van de ColorMotion . Bezoek http://www.chromationsystems.com/48channled.html voor meer informatie koppeling
Multifunctionele RGB LED controller met PIC12F675

Multifunctionele RGB LED controller met PIC12F675

multifunctionele RGB LED controller met low-cost PIC12F675 microcontroller.kenmerken:1, 4 + 1 modus bewerking een enkelvoudige potmeter en één knop schakelen gebruikt om meerdere2, EEPROM geheugen optie voor modusselectie:-de laatste modus zal worden
Sparky Jr - RGB LED Controller

Sparky Jr - RGB LED Controller

Wat is het?Sparky Jr is een programmeerbare RGB LED mod metgezel activering controller voor drukknoppen op gaming fightsticks oplichten.Hoe werkt het?Nou, aan het eind van de dag. De basiscode in wezen kun je je licht omhoog patroon, vaststelling van
Het bouwen van een betere RGB LED controller.

Het bouwen van een betere RGB LED controller.

Deze RGB LED-controllerkit is enigszins anders dan andere aanbiedingen op de ' netto. Overwegende dat de meeste anderen gebruiken een enkele knop om korte voorgeprogrammeerde loops te doorlopen is deze controller intelligent genoeg om te begrijpen va
Arduino RGB led controller

Arduino RGB led controller

ik heb onlangs een arduino en het eerste project dat ik probeerde was instructable oomlouts. Er was veel werk te doen op de code, dus ik een eenvoudiger maakte.Stap 1: onderdelen voor de onderdelen die u nodigeen gemeenschappelijke kathode rgb led3 2
Visitekaartje formaat RGB LED controller!

Visitekaartje formaat RGB LED controller!

toont hoe een visitekaartje LED werkt en kijkt. Controleren van de printplaat en de strip verlichting/kracht die daarbij hoort.
RGB LED auto streepje, en deur verlichting

RGB LED auto streepje, en deur verlichting

RGB LED strips zijn een geweldige manier om kleur onopvallend in plaatsen, komen ze meestal met zelfklevende steun gemakkelijker te houden ze overal. Deze LED strips zijn geworden vrij gemakkelijk en goedkoop om te kopen, en mensen zijn nog steeds he
RGB LED Love hart

RGB LED Love hart

dit project creëert een RGB LED verlichte Liefde hart die wordt beheerd door een PIC12F683 microcontroller.  Ik ontwierp het project als een cadeau voor mijn vrouw op onze 15e trouwdag (want ze zet omhoog met mijn verslaving aan elektronica ik dacht
UFO project - kleur veranderende Glowing Radio gecontroleerd vliegtuig - RGB LED's zijn geweldig!

UFO project - kleur veranderende Glowing Radio gecontroleerd vliegtuig - RGB LED's zijn geweldig!

I love R/C Airplanes.Ik hou van dingen die oplichten.Ik hou van fotografie.zet ze samen en kun je 's nachts!WAARSCHUWING *** mensen zal freak out, als u dit project en het vliegen met succes. Politie en lucht luchtverkeersleiders zal daarover horen a
RGB Led Wall Washer

RGB Led Wall Washer

Hallo daar! Dit Instructable werd geïnspireerd door het gebrek aan goedkope RGB led verlichting Instructables, dus ik ga Toon u haw zodat uw zeer eigen RGB led muur wasmachine voor tot £10! Gecontroleerd door een Ir-afstandsbediening! en niet alleen
24-kanaals USB-Connected LED Controller, upto 1A per kanaal

24-kanaals USB-Connected LED Controller, upto 1A per kanaal

Dit apparaat is ontworpen als een veelzijdig high-current LED controller, met de mogelijkheid om te zinken of / en source stromingen tot 1A per kanaal met dissipatie van maximaal 2.5W per kanaal. De verschillende truien en transistor plaatsing mogeli
De manier om te verbinden RGB Led Strip verlichting

De manier om te verbinden RGB Led Strip verlichting

De manier om te verbinden RGB Led Strip verlichtingStap 1: Sluit 4pin Male naar 4pin vrouwelijke connectorkabel direct Geschikt voor: RGB Led Strip licht met mannelijke en vrouwelijke connectorkabelStap 2: Verbind met 4pin gemakkelijk Clips Geschikt
RGB LED Lamp met IR-afstandsbediening wijzigen

RGB LED Lamp met IR-afstandsbediening wijzigen

ik heb een oud maar mooi IKEA lamp, nochtans de 12V 20W halogeen lamp het gebruikt nu gebroken is. Het idee van het te vervangen door LED's kwam dagen geleden, gelukkig kreeg ik een LED controller samen met een SMD RGB LED-strip, zodoende mij beslist