ID.nl logo
Van bureau naar bank: zet je tv in als spelcomputer voor pc-games
Huis

Van bureau naar bank: zet je tv in als spelcomputer voor pc-games

Op een pc kun je allerlei soorten spellen spelen en de kracht van een game-pc is natuurlijk het toetsenbord en muis waardoor je shooters en strategische spellen optimaal kunt spelen. Andere games laten zich echter beter met een controller bedienen en dan is het misschien niet zo prettig dat je ook dan achter je bureau moet zitten. Gelukkig is het mogelijk om pc-spellen naar je televisie te streamen, waardoor je de pc als spelcomputer kunt gebruiken.

In dit artikel laten we zien hoe je pc-games naar je tv kunt streamen:

  • Eerst installeren we Sunshine
  • Dan koppelen we Sunshine aan een apparaat met Moonlight
  • Tot slot finetunen we de stream en passen de kwaliteit aan
  • Maar wat doe je met het beeldscherm van je pc?
  • En hoe krijg je de vibratie op je controller terug?

Ook interessant: Retro-gaming op een moderne Windows-pc: zo werkt 86Box

Om pc-spellen op je televisie te spelen, hoef je de pc niet naar de woonkamer te verplaatsen en is ook een meterslange HDMI-kabel niet nodig. Je kunt games binnenshuis lokaal streamen en mogelijk heb je de benodigde hardware al in huis. Het lokaal streamen van games is allesbehalve nieuwe technologie. Zo introduceerde Nvidia de uitstekende clouddienst Gamestream in 2013 en bracht Steam in 2015 de inmiddels niet meer verkrijgbare Steam Link op de markt.

Gamestream was bedoeld om te gebruiken in combinatie met Nvidia’s eigen mediaspeler Shield. Het grote voordeel van Gamestream ten opzichte van bijvoorbeeld de oplossing van Steam was dat het beeld net wat eerder vastgelegd werd. De noodzaak van een Nvidia Shield als client hield slimme ontwikkelaars niet tegen, want al snel verscheen Moonlight. Deze opensource-client ondersteunt het Gamestream-protocol en kun je installeren op vrijwel alle apparaten die je op je televisie kunt aansluiten. Zo is er een Moonlight-client voor Windows, macOS, Linux, Steam Link, Raspberry Pi, Android TV en Apple TV. Ook op mobiele apparaten als smartphones, tablets en Steam Deck kun je een client installeren. Wie tot voor kort de beste streamervaring zocht, kwam al snel uit bij een Nvidia-videokaart in combinatie met Moonlight.

De Steam Link uit 2015 was een apparaatje dat speciaal voor gamestreaming ontworpen was.

1 Gamestream stopt

Helaas heeft Nvidia aangekondigd dat het gaat stoppen met Gamestream. De eerste stap was dat de client op de Shield verwijderd werd. Het servergedeelte is op het moment van schrijven nog aanwezig in desktopsoftware GeForce Experience, maar dat kan door een update uiteraard veranderen.

Voor wat het waard is: je vindt Gamestream door te klikken op Instellingen en te kiezen voor Shield. Vervolgens kun je Gamestream in- of uitschakelen. Je kunt ervoor kiezen om de stuurprogramma’s of eventueel GeForce Experience niet bij te werken, maar dat kan mogelijk problemen geven bij toekomstige games.

Nvidia verwijst als alternatief naar de eigen clouddienst GeForce Now (die om een beetje serieus te gebruiken naast je eigen spellenbibliotheek ook een betaald abonnement van minimaal 10 euro per maand vereist) of lokaal streamen via Steam Link.

Op het moment van schrijven vind je Gamestream nog in GeForce Experience, maar hoelang dat nog duurt?

2 Sunshine

Het stoppen van Gamestream betekent niet dat er afscheid genomen hoeft te worden van de prima werkende technologie. In de vorm van Sunshine was er al een opensource-implementatie van het protocol dat je kon gebruiken in combinatie met de Moonlight-client. Sunshine presteerde aanvankelijk minder goed dan de echte Gamestream-dienst, maar inmiddels zijn de prestaties vrijwel gelijk. Moonlight zal zich steeds meer richten op Sunshine, waardoor er in de toekomst mogelijkheden worden toegevoegd die met Nvidia’s Gamestream niet konden.

Sunshine heeft nog een voordeel, want waar Gamestream alleen werkt op Nvidia-kaarten kun je Sunshine ook gebruiken op videokaarten van AMD en Intel. Je kunt Sunshine downloaden van GitHub. Download de laatste release (klik in de lijst onderaan op sunshine-windows-installer.exe)

De minimale systeemeisen zijn bescheiden en ondersteunt ook oude hardware. Je kunt rustig stellen dat als je pc nieuwer is dan circa 2015 de software moet werken. Belangrijker is dat je pc krachtig genoeg is om de games die je wilt streamen in de gewenste resolutie (doorgaans Full HD) te draaien. Het streamen zelf zorgt niet voor heel veel overhead, dus daar hoef je geen rekening mee te houden.

Heb je een 4K-televisie en wil je streamen in 4K, dan heb je uiteraard wel een krachtige grafische kaart nodig, zoals een GeForce RTX 3080 of beter.

Sunshine is een opensource-streamingserver voor de Moonlight-client.

3 Sunshine installeren

Start het installatieprogramma en volg de wizard door op Volgende te klikken. Standaard staan in de stap Onderdelen kiezen alle onderdelen aangevinkt. De tools gaan we gebruiken in dit artikel, de scripts niet en die kun je eventueel uitvinken. Je zou ook de optie om Sunshine te starten bij het opstarten kunnen uitschakelen, maar eigenlijk is het beter om hem ingeschakeld te laten. Klik op Installeren om de wizard af te ronden.

Daarnaast moet ook ViGEmBus geïnstalleerd zijn, dat is software die ervoor zorgt dat Sunshine met je controller kan communiceren. Het installatieprogramma van Sunshine zal ook dit programma installeren. Mocht dat niet gebeuren, dan kun je ViGEmBus hier downloaden door op Latest te klikken.

Sunshine wordt geconfigureerd via een webinterface die bereikbaar is via https://localhost:47990. Je kunt de interface van Sunshine eenvoudiger openen met de snelkoppeling in het startmenu, die opent de juiste pagina in de browser. Wanneer je ervoor hebt gekozen om Sunshine niet automatisch te starten, moet je die snelkoppeling sowieso gebruiken. Je browser geeft een waarschuwing omdat Moonlight een zelfondertekend certificaat gebruikt, dat kun je negeren.

De eerste keer dat je de webinterface start, zal Sunshine je vragen om een gebruikersnaam en wachtwoord te kiezen. Onthoud deze gegevens goed en klik op Login. De pagina herlaadt, waarna je de zojuist gekozen gegevens moet invoeren.

Heb je een Nvidia-kaart? Schakel Gamestream dan uit in GeForce Experience, zodat je er geen last van hebt.

Tijdens de eerste keer starten stel je een gebruikersnaam en wachtwoord in, onthoud deze goed.

4 Moonlight koppelen

Om gebruik te maken van Sunshine heb je bij je televisie een apparaat met de Moonlight-client nodig. Wij gebruiken in dit artikel Moonlight op Android TV, die bij ons draait op een Nokia Streaming Box 8000. Je vindt de app Moonlight Game Streaming in de Play Store.

Na installatie is de eerste stap het koppelen van je client aan je Sunshine-server. Sunshine is uiteindelijk een remote-desktop-toepassing en je wilt natuurlijk niet dat iedereen zomaar verbinding met je pc kan maken. Daarom gebruikt Sunshine voor de koppeling een pincode. Na het starten van de app zie je de naam van je pc (of de zelfgekozen naam in Sunshine via Configuration / General / Sunshine Name). Als je op de pc-naam klikt, dan verschijnt er een pincode in beeld. Klik in de bovenste balk in Sunshine op PIN en tik de pincode in waarna je op Send klikt. Je kunt in Moonlight nu op de pc klikken en je geïnstalleerde apps starten.

Voer de in de Moonlight getoonde pincode in om de client te koppelen.

5 Kwaliteit stream

Voordat we een sessie starten, willen we je eerst laten zien hoe je de kwaliteit van de stream aanpast. In de praktijk wordt de limiet qua bitrate bepaald door je client. Zo heeft onze mediaspeler wel een netwerkaansluiting die theoretisch 100 Mbit/s aankan, maar meer dan 30 Mbit/s lukt in de praktijk eigenlijk niet. Sunshine zelf is erg flexibel op het gebied van resoluties, verversingssnelheden en codecs.

Uiteindelijk wordt de stream opgezet door de client en in de standardconfiguratie kan een client vrijwel alle mogelijke combinaties opvragen. Je vindt de toegestane eigenschappen in Sunshine via Configuration / General. Als je naar beneden scrolt, zie je daar toegestane resoluties en fps-waarden. Wat betreft videocodering gebruik je H.264 of HVEC (x265).

Sunshine is heel flexibel op het gebied van ondersteunde resoluties.

6 Stream finetunen

Als je in de Moonlight-client op het tandwiel klikt, opent de configuratie. Via Selecteer resolutie en FPS doel stel je de gewenste streamingresolutie in, wij hebben een Full-HD-televisie en gebruiken 1080p. Via Video frame rate stel je de framerate van de stream in, wij kiezen voor 60 FPS. De bitrate stel je in met Selecteer doel video bitsnelheid, wij hebben hier 25 Mbit/s ingesteld. Je bent op zoek naar de hoogst mogelijke bitrate met de minste vertraging.

Een belangrijke instelling vind je een stuk lager in de lijst, namelijk Verander HEVC instellingen. Wij hebben gekozen voor Gebruik HEVC altijd. Onze mediaspeler heeft opvallend genoeg een lagere vertraging via HVEC. Dit kun je testen door in de instellingen de optie Vertragingsbericht tonen na streamen aan te vinken. Hierdoor geeft Moonlight de totale vertraging in milliseconden na het eindigen van de stream. Eventueel vink je Prestatiestatiestieken tonen tijdens streamen aan voor extra hulp tijdens het finetunen.

Je start je eerste stream door te kiezen voor Desktop. Je sluit de sessie met de terugknop op je afstandsbediening, zo zie je de statistieken en kun je de instellingen tweaken. Je sluit de sessie af door nogmaals op de pc-naam te klikken en te kiezen voor Stop sessie.

Moonlight kan je na het beëindigen van een sessie statistieken over de vertraging in milliseconden geven.

7 Overzichtelijke interface

Gebruik je alleen Steam, dan biedt de Steam Big Picture mode een prima interface voor op televisie en deze is standaard beschikbaar. Veel gebruikers zullen echter ook spellen gebruiken die niet via Steam zijn aangeschaft. Je kunt spellen uit andere bronnen eventueel toevoegen aan Steam door ze te importeren, maar dat werkt niet altijd goed. We raden je voor het streamen van spellen naar je tv daarom een alternatieve launcher aan in de vorm van Playnite, die je kunt downloaden op www.playnite.link.

Deze launcher biedt ondersteuning voor onder andere Steam, Epic, Origin, GOG, Ubisoft Connect en lokaal geïnstalleerde spellen die geen deel uitmaken van een specifiek platform. Playnite kan automatisch al je spellen importeren vanuit de diverse platformen die je op je pc gebruikt. Je kunt (niet gevonden) spellen ook zelf toevoegen door in het hoofdmenu te klikken op Voeg Spel Toe, waarna je diverse opties krijgt.

Playnite voeg je toe aan Sunshine door in het menu op Applications te klikken en te klikken op Add new. Bij Application Name tik je Playnite en in het veld Command geef je het pad naar de fullscreen-variant op, dat is waarschijnlijk C:\Users\Gebruikersnaam\AppData\Local\Playnite\Playnite.FullscreenApp.exe. Klik vervolgens op Save.

Playnite toont je spellen in een overzichtelijke voor de tv geschikte interface.

8 Interface opruimen

Heeft een spel geen metadata, zoals afbeeldingen? Start Playnite via de normale snelkoppeling in de desktopmodus en klik met rechts op de naam van het spel en kies Bewerk. Klik vervolgens op de knop Download metadata en kies IGDB. Soms werkt dit niet. Je kunt dan een afbeelding toevoegen door in de bovenste balk te kiezen voor Media en dan bij zowel Cover Afbeelding als Achtergrond Afbeelding op het pictogram van een wereldbolletje te klikken. Je kunt nu een keuze maken uit de voorgestelde afbeeldingen die gevonden zijn op Google.

Dan nog een handigheidje als je Playnite alleen wilt gebruiken als tv-interface. Niet ieder spel is geschikt om te spelen met een controller. Je hoeft onhandige spellen niet per se te verwijderen uit Playnite, je kunt ze ook verbergen. Dit doe je door met rechts op een titel te klikken en te kiezen voor Verberg deze game. Je vindt verborgen spellen terug door bovenin op het pictogram Filters te klikken en Verborgen te selecteren.

Zorg ervoor dat al je spellen in ieder geval van coverart voorzien zijn, zodat je ze in de tv-interface makkelijk kunt vinden.

9 Beeldscherm aanlaten?

Als je je pc door te streamen op afstand gebruikt, is het onzinnig om je beeldscherm aan te laten staan. Helaas zul je er in veel gevallen dan achter komen dat het streamen niet meer werkt. Dat komt doordat de grafische kaart een actief beeldscherm moet detecteren om daadwerkelijk beelden te kunnen produceren. Beeldschermen die via DisplayPort zijn aangesloten, worden in uitgeschakelde toestand niet gedetecteerd.

HDMI-beeldschermen worden wel gedetecteerd als ze uitgeschakeld zijn, in dat geval zal streamen met het beeldscherm uit gewoon werken. Heb je een scherm in dezelfde beeldverhouding als een televisie (16:9), en dezelfde of lagere resolutie als je televisie? Dan kan streamen met uitgeschakeld beeldscherm in de praktijk prima werken.

Wijkt de resolutie of de beeldverhouding van je scherm af van je televisie, bijvoorbeeld omdat je een 21:9-scherm hebt, dan werkt het in de praktijk allemaal niet zo soepel. Er zijn wel tools die de resolutie en beeldverhouding van je pc wijzigen bij het starten van een stream, maar helemaal vlekkeloos werkt dit niet en soms zal de pc na het afsluiten van een spel weer omschakelen naar de eigenlijke resolutie van het scherm, waardoor het gestreamde beeld op je televisie niet meer klopt. Gelukkig is er een handige oplossing in de vorm van een nepstekker voor HDMI.

Een HDMI-nepstekker wordt door Windows als een beeldscherm herkend.

10 Nepstekker voor HDMI

Heb je een DisplayPort-scherm of wijkt je scherm te veel van je tv af, dan kun je dus een nepstekker voor HDMI gebruiken. Dit is een dongel die je op de HDMI-uitgang van je videokaart aansluit en die vervolgens een scherm simuleert. Op die manier denkt je grafische kaart dat er een scherm is aangesloten en kunnen beelden altijd gegenereerd worden.

Dergelijke dongels zijn er in 2K- en 4K-uitvoeringen, let er dus op dat wanneer je een 4K-televisie hebt je ook daadwerkelijk een 4K-nepstekker aanschaft. Veel 2K-modellen kun je overigens ook op 4K instellen, maar niet met een verversingsfrequentie van 60 Hz. Heb je geen vrije HDMI-uitgang op je videokaart, dan zijn er eventueel ook voor DisplayPort van dit soort nepstekkertjes te koop.

Je kunt nepstekkers voor HDMI op diverse plaatsen kopen. De gangbare Engelstalige term op internet is overigens ‘dummy plug’ en webwinkels zoals Amazon verkopen tientallen verschillende onder die naam. Let wel op de levertijd, het is zonde om twee weken te moeten wachten op een plugje van een paar euro.

Een ‘dummy plug’ voor HDMI lijkt op een usb-stick met een HDMI-stekker.

11 Nepstekker configureren

Windows op deze manier voor de gek houden heeft één nadeel: je hebt nu altijd een tweede nepscherm actief en onbedoeld kun je een programmavenster naar dit niet-bestaande scherm verplaatsen. Je kunt dit deels voorkomen door het virtuele scherm in Windows op een vreemde positie te zetten, zoals linksboven.

Wil je zowel je echte beeldscherm als het nepscherm (soms) aan laten staan terwijl je Sunshine gebruikt, dan kun je in Sunshine aangeven dat de dummy plug voor het streamen gebruikt moet worden. Open de webinterface van Sunshine, klik op Configuration en open het tabblad Audio/Video. In het veld Output name geef je de naam van het juiste beeldscherm op. Deze naam achterhaal je met een meegeleverd tooltje. Open de Opdrachtprompt en navigeer naar de juiste map met het volgende commando:

cd C:\Program Files\Sunshine\tools

Met het volgende commando achterhaal je vervolgens de namen van de aangesloten schermen:

dxgi-info

Op basis van de resolutie kun je vermoedelijk achterhalen wat het nepscherm is. Vul die naam in het veld Output name in, bijvoorbeeld \\.\DISPLAY2. Overigens hebben wij gemerkt dat als je iets in de monitorconfiguratie verandert, deze namen soms veranderen.

Je kunt ook het nepscherm na het instellen in de Windows-instellingen weer uitschakelen. Dan heb je tijdens je normale werkzaamheden er nooit last van. Wil je echter streamen, dan moet je ervoor zorgen dat je echte scherm uitstaat. Windows zal de uitgeschakelde dummy plug dan toch inschakelen, waarna Sunshine deze kan gebruiken voor de stream. Dit werkt overigens alleen als je een DisplayPort-monitor hebt, een HDMI-monitor zal ook uitgeschakeld nog gedetecteerd worden. Je kunt dan het eerdergenoemde veld Output name instellen. Probeer uit wat voor jou het fijnste werkt.

Playnite zelf kun je ook nog optimaliseren afhankelijk voor welke monitorconfiguratie je kiest. Ga in Playnite via het pictogram rechtsboven naar het menu Instellingen / Algemeen. Vink daar de optie Gebruik altijd primaire beeldscherm aan als je je normale monitor uitschakelt als je streamt met Sunshine. Doe je dat niet (altijd), stel dan bij Doel scherm het juiste scherm in, waarschijnlijk je dummy plug.

Je kunt het virtuele scherm op een plek zetten waar je er weinig last van hebt.

12 Controller

Dan zijn we bij het lastigste deel uitgekomen: de controller en dan met name de vibratiemogelijkheid. Je kunt op zowel Android TV, Google TV, Apple TV en Raspberry Pi 4 een bluetooth-controller koppelen en gebruiken in Moonlight, bijvoorbeeld een PS4-controller (DualShock 4) of een Xbox One-controller.

Op een Apple TV zal een DualShock 4 of Xbox One-controller als je tvOS 14 of nieuwer gebruikt ook vibraties doorgeven. Android werkt ook met deze controllers, maar kan geen vibraties doorgeven. Explosies, beschietingen of harde klappen zorgen dus niet voor trillingen en dat doet toch wat af aan de immersie.

Iets wat volgens sommige gebruikers werkt, is een 8BitDo USB Wireless Adapter Gen 1 (niet de Gen 2), die de bedrade Xbox 360-controller emuleert. Met die adapter kun je een bluetooth-controller pairen, waarna deze als Xbox 360-controller herkend wordt. We hebben dit echter zelf niet uitgeprobeerd. In het kader ‘Trillen met VirtualHere’ vind je een alternatieve oplossing.

Via bluetooth kun je ook een toetsenbord en muis aansluiten waarmee je de pc kunt bedienen, vooral een muis is af en toe wel handig.

Trillen met VirtualHere Een alternatief voor Android of Google TV is een extra applicatie in de vorm van VirtualHere, een combinatie van een app op Android met een applicatie in Windows waarmee usb-apparaten via het netwerk gebruikt kunnen worden. Dit werkt uitstekend met controllers voorzien van een eigen usb-ontvanger, maar waar deze app een paar jaar geleden gratis te gebruiken was in combinatie met één apparaat, kost een licentie van VirtualHere nu minimaal 25 dollar. Je kunt het wel gratis twee keer uitproberen om te zien of het werkt.

Wat je ook kunt proberen als je pc niet al te ver weg staat, is de controller direct met je pc verbinden. Dan kun je op vrijwel iedere controller ook de vibratiemogelijkheid gebruiken.

Een controller met een eigen usb-ontvanger in combinatie met VirtualHere maakt vibraties mogelijk.

▼ Volgende artikel
Bedien je slimme apparaten met een zelfgebouwd touchscreen
© InfiniteFlow - stock.adobe.com
Huis

Bedien je slimme apparaten met een zelfgebouwd touchscreen

Houd je van knutselen én automatiseer je alles in en om je huis met Home Assistant? Kijk dan zeker eens naar ESPHome. Je kunt eindeloos variëren met componenten. Dankzij de koppeling met Home Assistant bouw je gemakkelijk en voor weinig geld een lichtschakelaar of sensor, om maar wat te noemen. De LVGL-bibliotheek zorgt ervoor dat je nu ook eenvoudig met een touchscreen en zelfbedachte gebruikersinterface kunt werken. We laten zien hoe dat werkt met tips voor passende projecten.

In dit artikel laten we zien hoe je een touchscreen-interface bouwt voor Home Assistant met ESPHome en LVGL:

  • Installeer ESPHome en configureer een ESP32-microcontroller voor je project
  • Sluit een touchscreen aan en stel de juiste GPIO-pinnen en drivers in
  • Gebruik LVGL-widgets voor een interactieve interface
  • Integreer je touchscreen met Home Assistant voor directe bediening van je slimme apparaten

Lees ook: 5 fouten die je niet moet maken in je smarthome

Code downloaden

In dit artikel staat een voorbeeld van wat YAML-code. Omdat YAML erg gevoelig is voor foute spaties, kun je die code beter downloaden en daarna bekijken of kopiëren. In het bestand espcode.txt staan alle regels voorbeeldcode zoals ze in dit artikel aan bod komen. Maar je vindt ook een uitgewerkt voorbeeld in het bestand cyd-demo.yaml. Beide bestanden zijn hier te downloaden.

Uitgewerkt voorbeeld

Het meest uitgewerkte voorbeeld voor de demo met LVGL vind je op deze GitHub-pagina van auteur Gertjan Groen. In de code die je kunt downloaden (ook in het losse bestand cyd-demo.yaml) hebben we ook de RGB-led op de achterzijde toegevoegd, die je bijvoorbeeld als statusmelding kunt gebruiken. Verder is een timer toegevoegd om de backlight te regelen, zodat deze bij inactiviteit wordt uitgeschakeld. Tot slot laten we zien hoe je de GPIO-pinnen kunt gebruiken via de I2C-bus. Op de GitHub-pagina vind je nog meer handige informatie.

ESPHome maakt het heel makkelijk om apparaten te maken voor een slim huis, zoals je eigen sensors. Zo bouwden we eerder al eens een luchtkwaliteitsmonitor, een infraroodzender/ontvanger en een controller met drukknoppen en leds, waarmee je apparaten kunt bedienen en de status aflezen. Hoe je dat doet, lees je in dit artikel: Zo maak je met ESPHome apparaten geschikt voor je smarthome.

De basis voor ESPHome is een kleine, voordelige en zuinige microcontroller, meestal de ESP32. ESPHome ondersteunt enorm veel componenten en biedt daardoor haast onbegrensde mogelijkheden. We helpen je kort op weg met ESPHome, maar gaan ook meteen een stapje verder met de toevoeging van een touchscreen en de LVGL-bibliotheek. Daar kun je sinds augustus 2024 officieel gebruik van maken binnen ESPHome.

Met LVGL kun je aan de hand van widgets een grafische gebruikersinterface opbouwen en weergeven (zie kader ‘Grafische interfaces met widgets’). Soms kom je de term HMI (Human Machine Interface) tegen, waarmee een grafische gebruikersinterface voor het bedienen van apparatuur wordt bedoeld.

De kracht van ESPHome is dat je niet alleen lokaal aangesloten apparaten bedienbaar kunt maken, bijvoorbeeld via een relais, maar ook alle apparaten die je binnen Home Assistant gebruikt.

Grafische interfaces met widgets

LVGL staat voor Light and Versatile Graphics Library. Het is een opensource-bibliotheek die sinds 2016 bestaat. Je kunt ermee werken binnen ESPHome, Arduino, Tasmota en openHASP. Het laatste project is zelfs specifiek bedoeld voor microcontrollerfirmware met LVG.

De bibliotheek is heel licht, waardoor het soepel en snel kan werken op apparaten met beperkte capaciteit, bijvoorbeeld met een microcontroller. Bovendien kan LVGL flexibel met verschillende lay-outs, schermformaten en invoermethodes werken. Naast touchscreens kun je ook bijvoorbeeld muis, toetsenbord, losse knoppen en draaiknoppen toevoegen.

Via meer dan dertig widgets kun je een grafische gebruikersinterface opbouwen. Het uiterlijk is via thema’s en stijlen eenvoudig aan te passen. Bovendien kun je met animaties werken.

LVGL wordt gebruikt in slimme apparaten zoals thermostaten, smartwatches en keukenapparatuur, en zelfs in touchscreens voor industriële omgevingen. Op de website vind je enkele interactieve demo’s voor bekende toepassingen, waarbij de gebruikersinterface in de browser wordt getoond.

Met LVGL kun je via widgets een gebruikersinterface bouwen.

1 Wat gaan we doen?

Met ESPHome kun je relatief eenvoudig apparaatjes voor je slimme huis maken. Een voordeel ten opzichte van bijvoorbeeld Arduino en MicroPython is dat je niet hoeft te programmeren. Je hoeft alleen een configuratiebestand te maken waarin je de gebruikte microcontroller, verbindingsgegevens voor je wifi-netwerk en alle aangesloten componenten aanduidt. Hierna wordt firmware gemaakt en weggeschreven op je microcontroller. Alleen die eerste keer is dit soms wat lastig. Heb je het eenmaal werkend? Alle keren erna kun je heel eenvoudig de configuratie aanpassen en over-the-air (OTA) naar de microcontroller sturen.

In dit artikel gaan we met LVGL werken. Hiermee kun je binnen ESPHome grafische interfaces maken via widgets. Voor veel projecten zul je daarom niet eens componenten hoeven aan te sluiten, maar heb je genoeg aan een touchscreen. Denk bijvoorbeeld aan een lichtknop en helderheidsregeling voor een slimme lamp in Home Assistant, zoals we in dit artikel demonstreren. Je kunt natuurlijk ook geavanceerdere gebruikersinterfaces maken voor vrijwel elk apparaat in Home Assistant.

©pozitivo - stock.adobe.com

Je kunt bijvoorbeeld zelf een gebruikersinterface voor je slimme lampen bouwen, zodat je ze eenvoudig kunt bedienen.

2 Wat heb je nodig?

Wat hardware betreft, is het vrij eenvoudig. De ESP32-chip heeft snel de voorkeur boven de verouderde ESP8266-versie, zeker als je met een touchscreen gaat werken. De Raspberry Pi Pico W (zie gelijknamig kader) is ook een optie, maar die wordt nog niet volledig ondersteund binnen ESPHome.

Makkelijk om mee te starten is een eenvoudig ontwikkelbordje rondom de ESP32 dat je voor ongeveer 5 euro kunt aanschaffen. Het is wel fijn als je hier goede documentatie bij hebt, zodat je op zijn minst weet waar alle aansluitingen zitten.

Er zijn diverse varianten van de ESP32-module. Bekende opties zijn de ESP-WROOM-32E, ESP32-C3 en ESP32-S3. De ESP32-C3 wordt vaak in extra compacte bordjes gebruikt, die je onder de naam ‘super mini’ tegenkomt – handig als je niet veel aansluitingen nodig hebt of niet veel ruimte hebt.

De ESP32-S3 is een fijne optie vanwege de beschikbaarheid van PSRAM (Pseudo Static RAM), een voordelig type werkgeheugen dat onder meer nuttig is bij grafische toepassingen. Staat een touchscreen centraal in jouw project en wil je snel van start, overweeg dan een model met ingebouwde ESP32-chip (zie volgende paragraaf).

De ESP32-module is in verschillende uitvoeringen verkrijgbaar.

Raspberry Pi Pico W

De Raspberry Pi Pico is een voordelige en flexibele serie ontwikkelbordjes rondom de RP2040-microcontroller. De eerste versie verscheen in januari 2021. De Pico W is vanwege de wifi-connectiviteit een interessante optie voor ESPHome. Recent werd de Pico 2 W aangekondigd die op meerdere fronten is verbeterd. Dat model is op het moment van schrijven echter nog niet geschikt voor ESPHome.

De Raspberry Pi Pico W is ook bruikbaar in Home Assistant.

3 Touchscreen

Als je een touchscreen gaat gebruiken in je ESPHome-project, dan kun je eventueel een los exemplaar op de microcontroller aansluiten en configureren. Maar je kunt ook een touchscreen met ingebouwde ESP32 kiezen. Dat is vaak veel handiger en goedkoper. Je hoeft niet te solderen en kunt direct een gebruikersinterface bouwen in YAML-code. Het scheelt ook wat tijd. Bovendien zijn er zelfs modellen compleet met behuizing.

Kies een scherm dat door ESPHome wordt ondersteund. De website van ESPHome geeft goede suggesties. Je kunt ook afgaan op ervaringen van anderen. Het kan dan een iets grotere uitdaging zijn om de juiste configuratie voor je display in ESPHome te vinden. Je zult daarbij waarschijnlijk wel even moeten experimenteren, niet alleen bij het instellen van je display, maar ook bijvoorbeeld voor het touchgedeelte. Zelfs bij het vrij gangbare touchscreen dat we in dit artikel gebruiken, was dat een beetje prutsen.

Kies een touchscreen dat door ESPHome wordt ondersteund.

4 Scherm met ESP32

Voor dit artikel hebben we een eenvoudige ESP32-2432S028 gebruikt, met een resistief touchscreen van 2,8 inch met 240 × 320 pixels. Dit model wordt ook wel de ‘Cheap Yellow Display’ genoemd, wat vooral met de gele printplaat te maken heeft.

Er zijn meerdere varianten. Zo wordt in de schermpjes vaak de ILI9341-chip als aansturing gebruikt, maar soms ook de ILI9342, zoals in ons exemplaar. Dat vergt dan een heel kleine, maar noodzakelijke aanpassing in je configuratie.

Je kunt het scherm flexibel inzetten voor je IoT-projecten. Zoek je een wat groter touchscreen, dan kun je bijvoorbeeld de CrowPanel van Elecrow overwegen. Die is er in een versie van 5 inch (ca. 32 euro) en 7 inch (ca. 42 euro), inclusief acrylbehuizing en verzending via de fabrikant. Beide versies hebben een touchscreen met hoge resolutie van 800 × 480 pixels en zijn voorzien van de modernere ESP32-S3-chip. Het touchscreen is capacitief, wat zeker voor kleinere bedieningselementen fijner werkt dan het resistieve touchscreen in ons goedkope alternatief.

Tegenwoordig bestaan er ook ronde touchscreens. Een leuke optie (zij het met beperkte schermruimte) is de ESP32-2424S012 met een ESP32-C3-microcontroller, een rond kleuren-touchscreen van 1,28 inch en in een witte of zwarte behuizing. Makerfabs heeft een vergelijk schermpje zonder behuizing. De LilyGo T-RGB heeft een wat groter 2,1inch-scherm (zonder behuizing), maar is ruim twee keer zo duur.

De ESP32-2432S028 is een voordelig scherm (onder), een wat duurder alternatief is het capacitieve 5inch-aanraakscherm met ESP32 van Elecrow (boven).

5 Add-ons voor ESPHome

Hoewel je bijvoorbeeld een pc met Python kunt gebruiken voor het bewerken van je configuratiebestanden en het flashen van de microcontroller met de software voor ESPHome, is het meestal veel makkelijker om de add-on voor ESPHome binnen Home Assistant te gebruiken. Dat geeft ook een ander groot voordeel: je kunt de configuratie voor alle apparaten met ESPHome binnen Home Assistant beheren. Je zult zeker in de testfase veel wijzigingen aan de configuratie moeten maken.

Via de add-on voor ESPHome voeg je eenvoudig microcontrollers toe.

6 Microcontroller toevoegen

We gaan nu een verse microcontroller toevoegen. Je kunt eventueel ESPHome Web gebruiken om de microcontroller voor te bereiden voor gebruik met ESPHome, maar wij geven zoals gezegd de voorkeur aan de ESPHome-add-on, die je binnen Home Assistant kunt openen.

Je kunt voor deze methode de microcontroller gewoon via usb aansluiten op je eigen pc, maar dit vereist wel dat je Home Assistant opent via een beveiligde https-verbinding. Lukt dat niet? Als alternatief kun je de microcontroller ook via usb aansluiten op het systeem met Home Assistant zelf, voordat je verder gaat in ESPHome.

Het dashboard van ESPHome toont alle toegevoegde apparaten.

Ook leuk: Werk met wat je hebt: creëer je eigen alarmsysteem met Home Assistant

7 Configuratie

Klik binnen ESPHome op New device om een nieuwe microcontroller te initialiseren. Vul bij Name een naam in voor het apparaat. Bij Network name vul je de naam (SSID) in van het wifi-netwerk waarmee de microcontroller moet verbinden en bij Password het bijbehorende wachtwoord. Klik dan op Next.

In de volgende stap zal ESPHome een configuratiebestand maken, firmware bouwen en de microcontroller flashen. Klik daarvoor dus eerst op Connect. Als het goed is, kun je nu de com-poort selecteren waarmee de microcontroller is verbonden. Zie je geen com-poort, dan zul je eerst drivers moeten installeren. De instructies krijg je als je het venster sluit zonder een com-poort te selecteren. Als de verbinding is gelukt, zal de installatie verdergaan. Lukt het niet? Dan kun je kiezen voor Skip this step gevolgd door een handmatige configuratie.

Vul een naam in en de details voor het wifi-netwerk.

Toepassingen voor een touchscreen

Er zijn veel leuke toepassingen voor een touchscreen. Zo kun je bijvoorbeeld een soort weerstation maken, dat je voorziet van actuele informatie van Home Assistant. Ook kun je live de opbrengst van je zonnepanelen laten zien of het verbruik in huis. Je zou een schermpje voor Music Assistant kunnen maken met bijvoorbeeld de weergave van het nummer en volumeregeling (zie ook: Met Music Assistant ben jij de baas over jouw muziekcollectie). Tot slot kun je een scherm gebruiken voor statusmeldingen of loggegevens.

8 Touchscreen met ESP32

We gebruiken in dit artikel zoals gezegd de ESP32-2432S028 als voorbeeld. Dit is een touchscreen met ingebouwde ESP32-chip. Dit apparaatje kun je direct toevoegen aan ESPHome: precies zoals in paragraaf 7 staat omschreven, al moesten we in dit geval na het aanwijzen van de com-poort wel de boot-knop even indrukken.

Overigens bevat het apparaat meestal een voorgeprogrammeerde demo met een gebruikersinterface op basis van LVGL. Die zie je als je hem zo uit de doos op een voeding aansluit. Je kunt daarmee meteen de werking controleren. Je zult bij een model met resistief aanraakscherm overigens iets harder moeten drukken dan je misschien gewend bent.

We gebruiken dit voordelige 2,8inch-aanraakscherm, dat ook wel ‘Cheap Yellow Display’ wordt genoemd.

9 Schermconfiguratie

Na het toevoegen van je touchscreen heb je direct een basisconfiguratie voor ESPHome. Via Edit kun je deze configuratie aanpassen. Zowel voor het aansturen van het display als de registratie van het aanraken wordt SPI (Serial Peripheral Interface) gebruikt. Voor onze ESP32-2432S028 is dit de configuratie, rekening houdend met de gebruikte interne GPIO-pinnen:

We voegen nu eerst de configuratie van het display toe en in paragraaf 11 het touchgedeelte. Voor het display is de configuratie als volgt:

Merk op dat er ook een (oudere) variant van dit touchscreen is met de ILI9341. In dat geval gebruik je model: ILI9341 en invert_colors: false. Na het maken van de aanpassingen kies je Install. Je kunt nu kiezen hoe je de firmware wilt overbrengen. Meestal kies je Wirelessly voor over-the-air-updates. Het apparaat hoeft daarbij niet meer met jouw pc te zijn verbonden.

Binnen ESPHome kun je eenvoudig de configuratie bewerken.

10 LVGL-bibliotheek

Binnen ESPHome kon je voorheen met displays werken door binnen de component display met lambda bijvoorbeeld teksten met een bepaald lettertype naar je scherm te sturen. Als je LVGL gaat gebruiken, gebruik je geen lambda meer, maar alleen LVGL en widgets. Als eerste voegen we de LVGL-bibliotheek toe aan de YAML-code:

lvgl:
  buffer_size: 25%

De optie buffer_size is ons geval noodzakelijk, vanwege de afwezigheid van PSRAM. In paragraaf 13 voegen we ook nog widgets toe. Omdat we dat hier nog niet hebben gedaan, zie je na het flashen als het goed is een demo met een knop, checkbox, cirkel met tekst en schuifbalk.

11 Configuratie touchscreen

Bediening via het scherm is nog niet mogelijk. Daarvoor moeten we het touchscreen toevoegen aan de configuratie van ESPHome:

Bewaar de aanpassingen en installeer de nieuwe firmware. Controleer of je de demo goed kunt bedienen. De regels onder on_touch zorgen dat in de logs de geregistreerde coördinaten worden getoond. Er kunnen aanpassingen nodig zijn in de regels onder calibration en transform.

12 Backlight

Het display is voorzien van een achtergrondverlichting (backlight) via pin 21. We definiëren deze output als volgt:

Daarna configureren we de achtergrondverlichting, waarbij we verwijzen naar de hierboven gedefinieerde output.

Na het flashen zal de backlight standaard aanstaan. Eventueel kun je deze vanuit Home Assistant aan- en uitzetten en de helderheid ervan regelen, bijvoorbeeld op basis van afwezigheid. Je kunt ook een script maken om de helderheid bij inactiviteit terug te brengen. Daarvoor verwijzen we je naar het uitgewerkte voorbeeld op GitHub (zie kader ‘Code downloaden’).

Binnen Home Assistant kun je eventueel ook de backlight aan- en uitzetten.

13 Widgets toevoegen

Onder de regel lvgl kun je nu de gewenste LVGL-componenten toevoegen aan je YAML-configuratie. Denk aan bijvoorbeeld knoppen, schuifregelaars, grafieken of labels. In dit voorbeeld voegen we aan de bovenkant alleen twee widgets toe voor een dimbare led, te weten een schakelaar (button) en schuifregelaar (slider).

De meeste opties dienen voor het positioneren van de widget. We geven bijvoorbeeld de breedte (width) en hoogte (height) aan, halen de widgets iets van de rand of met x en y, en regelen de uitlijning met align. Het gedeelte bij on_click zorgt dat de bewuste lamp in Home Assistant wordt omgeschakeld bij het klikken op de button. Voor de slider doen we hetzelfde onder on_release. Die acties zijn overigens om veiligheidsredenen niet direct mogelijk. In paragraaf 16 leggen we uit hoe je dit kunt toestaan.

We voegen in dit voorbeeld alleen twee eenvoudige widgets toe.

Cookbook voor ESPHome en LVGL

We houden het hier redelijk eenvoudig, maar je kunt natuurlijk veel geavanceerdere gebruikersinterfaces maken. Zo is bijvoorbeeld een geneste structuur mogelijk, kun je op verschillende manieren een grid maken, en met pagina’s individuele schermen of secties in je gebruikersinterface maken. Daarbij kan elke pagina zijn eigen widgets hebben. ESPHome geeft op zijn website in een ‘cookbook’ nog wat praktische voorbeelden voor het werken met LVGL, ook in combinatie met Home Assistant.

De website van ESPHome heeft veel voorbeelden voor het werken met LVGL.

14 Interactie met Home Assistant

De entiteit voor de dimbare lamp heeft in Home Assistant de naam light.wledkantoor. De waardes zijn nodig om de widgets de juiste status te kunnen geven. Daarom voegen we hieronder een binary_sensor toe voor de status (aan of uit) en een sensor voor het helderheidsniveau. We werken vervolgens bij on_state en on_value de widgets bij als de status verandert in Home Assistant. Bij id vul je uiteraard de id van de betreffende widget in.

Gebruik de logfunctie om te zien of bijvoorbeeld een status verandert.

15 Toevoegen aan Home Assistant

De add-on voor ESPHome hebben we gebruikt om de microcontroller van firmware te voorzien. Maar je zult het apparaat hierna nog wel moeten toevoegen aan Home Assistant. Dat is heel eenvoudig: het wordt automatisch gevonden. In Home Assistant zie je via Instellingen / Apparaten en diensten het bewuste apparaat direct terug op het tabblad Integraties. Klik op de knop Toevoegen om het aan Home Assistant toe te voegen.

Het apparaat met ESPHome moet je nog toevoegen aan Home Assistant.

16 Acties toestaan

Als je het touchscreen bedient, zal Home Assistant een melding geven dat het ESPHome-apparaat heeft geprobeerd een actie in Home Assistant uit te voeren. Standaard is dit om veiligheidsredenen niet toegestaan, maar dit is eenvoudig op te lossen.

Ga naar Instellingen / Apparaten en klik dan onder het kopje Geconfigureerd op ESPhome. Achter het bewuste apparaat klik je vervolgens op Configureren. Zet een vinkje bij Toestaan dat het apparaat Home Assistant-acties uitvoert. Klik op Verzenden. Hierna zijn alle acties zoals het omschakelen van de lamp en regelen van de helderheid wel toegestaan.

Zorg dat het apparaat acties in Home Assistant mag uitvoeren.

▼ Volgende artikel
Slimme stekkers: welke modellen zijn echt zuinig?
© Proxima Studio - stock.adobe.com
Huis

Slimme stekkers: welke modellen zijn echt zuinig?

Met slimme stekkers verander je je huis eenvoudig in een smart home: steek ze in een gewoon stopcontact, sluit er lampen of je televisietoestel op aan en regel via een app of met je stem bijvoorbeeld dat ze automatisch worden uitgeschakeld. Zo voorkom je onnodig stroomverbruik doordat apparaten niet meer op stand-by blijven staan. Maar slimme stekkers gebruiken zélf ook stroom. Welke zijn zuinig genoeg om écht geld te besparen?

Energie besparen en slimme apparaten gaan uitstekend samen. In dit artikel lees je hoe je geld bespaart door gebruik te maken van de zuinigste slimme stekkers. • Slimme stekkers en stroomverbruik • De zuinigste slimme stekkers op een rij • Waar je op moet letten bij het kopen van slimme stekkers

Ook lezen: Stroomvreters: deze apparaten in huis verbruiken meer energie dan je denkt


Slimme stekker of slim stopcontact?

De termen slimme stekker en slim stopcontact worden door elkaar gebruikt. Dat is een beetje verwarrend, maar wel begrijpelijk: het is een apparaat met aan de ene kant een stekker (voor je 'domme' stopcontact) en aan de andere kant een slim stopcontact. In dit artikel hanteren we de benaming slimme stekker.


Zo bespaart een slimme stekker stroom

Een slimme stekker helpt je stroom besparen door apparaten automatisch uit te schakelen, bijvoorbeeld 's nachts. Zo verbruikt je televisie geen stroom meer in de stand-bymodus. Je kunt instellen dat alle apparatuur op vaste tijden uitschakelt, bijvoorbeeld zodra je gaat slapen. Je kunt ook met één druk op de knop alle lampen en andere apparaten uitschakelen, zodat je niets vergeet. Slimme stekkers uit een hogere prijsklasse bieden bovendien inzicht in je stroomverbruik. Daardoor kun je gerichter energie besparen.

©Proxima Studio - stock.adobe.com

Verbruik van een slimme stekker

Tegenover de besparing staat het eigen stroomverbruik van slimme stekkers. Dat begint bij zo'n 0,3 watt en loopt op tot 2 watt. Niet veel, maar ze staan wel 24 uur per dag en 365 dagen per jaar aan. De zuinigste modellen verbruiken daardoor op jaarbasis 2,6 kWh (0,3 watt × 24 uur × 365 dagen ÷ 1000). Bij een stroomprijs van 0,30 euro per kWh komt dat neer op 0,79 euro per jaar. Een slimme stekker die 2 watt verbruikt kost op jaarbasis 5,26 euro. In een slim huis gebruik je al snel 10 slimme stekkers, waardoor je op jaarbasis aardig wat geld kunt besparen door de zuinigste modellen uit te kiezen.

Kies niet alleen op prijs, maar ook op verbruik Vergelijk je het jaarlijkse stroomverbruik met de aanschafprijs van een slimme stekker (meestal tussen de 5 en 35 euro), dan blijkt al snel dat vooral het stroomverbruik bepalend is voor de totale kosten op de lange termijn. Toch vermelden veel verkopers niets over het energieverbruik.

Denk aan de compatibiliteit

Alleen letten op het stroomverbruik van een slimme stekker is niet genoeg. Het is minstens zo belangrijk dat de stekker goed samenwerkt met jouw slimme netwerk. De meeste modellen werken met Google Home en Amazon Alexa, terwijl Apple HomeKit selectiever is. Check daarom altijd de productbeschrijving om zeker te weten dat de slimme stekker bij jou thuis werkt.

Slimme stekkers die samenwerken met

Google Assistant en met Alexa

Stroomverbruik en verbindingstype

Waar komt het grote verschil in stroomverbruik tussen slimme stekkers vandaan? Dat heeft alles te maken met de verbinding met je thuisnetwerk. De meeste stekkers gebruiken wifi om bereikbaar te blijven, zodat jij ze op afstand kunt bedienen. Maar wifi verbruikt relatief veel energie – het signaal is eigenlijk krachtiger dan nodig is voor dit soort toepassingen.

Een zuiniger alternatief is een hub die het wifisignaal omzet naar een lichter protocol, zoals Zigbee of Z-Wave. Die vormen een soort schakel tussen je netwerk en de slimme stekkers. Het grote voordeel: dit soort verbindingen verbruiken vaak minder dan 0,5 watt.

©Proxima Studio - stock.adobe.com

Zigbee en Z-Wave

De zuinige protocollen die gebruikt worden zijn Zigbee en Z-Wave en die werken allebei prima. Maar ze zijn niet verenigbaar met elkaar. Je zult dus één systeem moeten kiezen. Daarnaast heb je een centrale hub nodig om alles aan elkaar te koppelen. Dat is een kleine investering die zich, door de lagere stroomkosten, snel terugverdient.

Slimme stekkerVerbruik (watt)Protocol
TP-Link Tapo P1151 – 1,5Wifi
TP-Link Tapo P1000,5 – 1Wifi
Shelly Plug S0,9 – 1,5Wifi
Iqore Smart Plug1 – 2Wifi
Aqara Smart Plug0,3 – 0,5Zigbee
Philips Hue Smart Plug0,3 – 0,5Zigbee
IKEA TRETAKTSmart Plug0,3 – 0,5Zigbee
Samsung SmartThings Outlet0,5 – 1,5 WZigbee
Fibaro Wall Plug V20,5 – 1Z-Wave
Qubino Smart Plug0,5 – 1Z-Wave

Verbruik van hubs voor Zigbee en Z-Wave

Voor een compleet beeld moeten we ook kijken naar het stroomverbruik van een Zigbee- of Z-Wave-hub. Zigbee-hubs verbruiken doorgaans tussen de 0,5 en 3 watt. Sluit je meerdere slimme stekkers of andere apparaten aan, dan verdien je dat al snel terug ten opzichte van wifi. Z-Wave-hubs verbruiken wat meer, meestal tussen de 2 en 10 watt.

Ook qua veelzijdigheid zijn er verschillen. De Philips Hue Bridge (Zigbee) is bijvoorbeeld erg zuinig, met een verbruik tussen de 0,5 en 1 watt. Maar deze werkt uitsluitend met Philips Hue-apparaten.

Een slimme start is het halve werk

Zoals je ziet, zijn er heel wat factoren om rekening mee te houden. Breng daarom vooraf in kaart wat je nu nodig hebt én wat je in de toekomst verwacht te gebruiken. Zo voorkom je onnodige kosten en bespaar je op de lange termijn, vooral als je ook let op het energieverbruik per apparaat.


Nog meer energie besparen? ⤵️

Vraag een offerte aan voor verduurzaming: