JavaScript is de standaard programmeertaal voor webapplicaties. Maar voor liefhebbers van Python is er goed nieuws: dankzij PyScript kun je ook in je favoriete programmeertaal webapplicaties bouwen. Hierdoor krijg je toegang tot een breed scala aan populaire Python-bibliotheken. Bovendien kun je de Python-code moeiteloos communiceren met JavaScript-code.

Webapplicaties maken doorgaans gebruik van een drie-eenheid van (programmeer)talen: HyperText Markup Language (html), Cascading Style Sheets (css) en JavaScript. Html is een opmaaktaal waarmee je de structuur en inhoud van een webpagina definieert. Met css definieer je stijlen die de vormgeving van de pagina beschrijven. En JavaScript is een programmeertaal waarmee je het gedrag van de pagina bepaalt.

Hoewel JavaScript de dominante programmeertaal is in de wereld van webapplicaties, heeft het erbuiten niet dezelfde populariteit kunnen winnen. Python daarentegen is een populaire programmeertaal in diverse domeinen, onder andere voor data-analyse, machine learning, wetenschappelijke projecten, scripting en de serverkant van webapplicaties. Hoe handig zou het zijn als je jouw kennis van Python ook in de webbrowser kunt toepassen?

1 PyScript

Dat is precies wat PyScript mogelijk maakt: Python-toepassingen ontwikkelen die in de webbrowser werken. Net zoals je JavaScript-code in een html-pagina kunt opnemen, kun je dat dankzij PyScript ook met Python-code doen. Bovendien kunnen Python- en JavaScript-objecten probleemloos met elkaar communiceren, zodat je niet gebonden bent aan PyScript, maar je Python-code kunt combineren met bestaande JavaScript-bibliotheken.

Je kunt met PyScript ook gebruikmaken van heel wat populaire Python-pakketten, zoals Beautiful Soup, Matplotlib, NumPy, Pandas of Scikit-learn. Op die manier kun je dus niet alleen je kennis van de programmeertaal Python meenemen naar je webapplicaties, maar ook die van het uitgebreide Python-ecosysteem. Als je dus vertrouwder bent met Python dan met JavaScript en je webapplicaties wilt bouwen, dan is PyScript een logische keuze.

PyScript laat je toe om webapplicaties te ontwikkelen met Python.

2 Hallo wereld

Een PyScript-webapplicatie heeft drie bestanden nodig. Eerst en vooral een html-bestand, bijvoorbeeld index.html, met de structuur van je webpagina, verwijzingen naar PyScript zelf en je eigen Python-script. Een tweede bestand beschrijft de Python-omgeving waarin je applicatie draait. Hierin geef je bijvoorbeeld aan welke extra Python-pakketten je script gebruikt. Dit bestand heet pyscript.toml of pyscript.json. Tot slot is er je Python-script zelf, dat je in een Python-bestand als main.py opslaat.

Een eenvoudig html-bestand voor een PyScript-applicatie ziet er als volgt uit:

De code kun je downloaden van deze pagina en daarna vanuit een programma als Kladblok overnemen.

Je verwijst hier in het element head naar de css-stylesheet en JavaScript-code van PyScript. In het element script van de body verwijs je dan naar je Python-script.

3 Python-script

In de body van de html-pagina vind je het element button met een attribuut py-click dat de waarde "generate_text" heeft. Hiermee geef je aan dat bij een klik op die knop de Python-functie generate_text wordt aangeroepen. In het element script verwijs je vervolgens naar je Python-script main.py. Met type="py" geef je aan dat het om een Python-script gaat in plaats van een JavaScript-bestand. En met het attribuut config verwijs je naar het configuratiebestand waarin je definieert welke Python-pakketten PyScript voor je applicatie moet installeren. Als je bijvoorbeeld het pakket lorem-text wilt gebruiken, dan ziet het bestand pyscript.toml er als volgt uit:

Het Python-script main.py heeft de volgende inhoud:

De code kun je downloaden van deze pagina en daarna vanuit een programma als Kladblok overnemen.

We importeren hier dus de module lorem uit lorem-text, het pakket dat we hebben geïnstalleerd. Vervolgens importeren we ook document uit PyScript. In de functie generate_text, die wordt aangeroepen wanneer je in de webpagina op de knop klikt, krijg je via document toegang tot het volledige Document Object Model (DOM) van de webpagina. Hiermee selecteer je het element met de id output. De functie roept dan lorem.paragraph() aan om een alinea met willekeurige tekst te genereren en kent die toe aan de tekst van het geselecteerde element.

PyScript geeft je toegang tot het ecosysteem van de Python Package Index (PyPI).

4 Webserver

Je PyScript-applicatie is nu klaar, maar je kunt het html-bestand niet gewoonweg in je webbrowser openen als een lokaal bestand. Je moet het bestand via een webserver aanbieden. Als je Python lokaal (op je computer) hebt geïnstalleerd, kun je eenvoudig de ingebouwde webserver van Python opstarten. Navigeer in een terminalvenster of opdrachtprompt naar de directory waarin je PyScript-bestanden staan en voer de volgende opdracht uit:

Dit start een webserver op poort 8000 die de inhoud van de huidige directory aanbiedt. Bezoek vervolgens in je webbrowser de url http://127.0.0.1:8000/, die verwijst naar poort 8000 op je computer zelf. Je krijgt nu een webpagina te zien met als titel Hallo wereld en een knop met als label Lorem ipsum.

Wacht even tot de hele PyScript-omgeving is ingeladen. Klik dan op de knop wanneer die niet meer grijs is. Eronder verschijnt vervolgens een alinea met willekeurige tekst. Elke keer dat je op de knop drukt, verschijnt er een nieuwe tekst omdat de functie generate_text weer wordt aangeroepen.

Eén druk op de knop roept een Python-functie op die willekeurige tekst genereert.

5 Grafieken plotten

Nu kun je ook in je webapplicaties gebruikmaken van het krachtige ecosysteem van Python-pakketten voor bijvoorbeeld datavisualisatie, zoals Matplotlib. Het principe is hetzelfde als het eerste voorbeeld met de lorem ipsum-tekst: je creëert een html-bestand met de structuur van je webpagina, een bestand met de Python-pakketten die je nodig hebt, en uiteindelijk een bestand met je Python-code. Het bestand met de afhankelijkheden, pyscript.toml, vermeldt eenvoudigweg het pakket Matplotlib:

Het html-bestand index.html ziet er als volgt uit:

De code kun je downloaden van deze pagina en daarna vanuit een programma als Kladblok overnemen.

In dit voorbeeld laten we de gebruiker een amplitude en periode kiezen, om vervolgens een grafiek van de sinusfunctie met die ingestelde amplitude en periode te plotten.

Matplotlib is dé Python-bibliotheek voor visualisaties.

6 Schuifbalken

In de html-code definiëren we twee elementen input van het type range. Je webbrowser toont die als schuifbalken. We stellen voor elk element een minimum en maximum in, een stap (de waarde waarmee de schuifbalk per eenheid wordt verschoven) en een standaardwaarde. We geven beide elementen ook een label, met diezelfde standaardwaarde, zodat de gebruiker niet alleen een bolletje op een schuifbalk ziet, maar ernaast ook de waarde die daardoor wordt ingesteld.

Eronder plaatsen we dan een element div waarin de grafiek komt. We definiëren hier ook een script dat naar het Python-bestand en de configuratie met de te installeren pakketten verwijst. In de elementen input verwijzen we ook naar de in dit Python-bestand gedefinieerde functie plot_sine die wordt uitgevoerd bij elke wijziging van de invoer in het element. De webapplicatie roept de functie daardoor aan telkens als je aan de schuifbalk sleept.

7 Sinus plotten

Dan volgt uiteindelijk de code in main.py om de sinusfunctie te plotten:

De code kun je downloaden van deze pagina en daarna vanuit een programma als Kladblok overnemen.

De functie plot_sine haalt allereerst de waarde op van het element met de id amplitude en wijzigt de tekst van het label voor dat element naar die waarde. Daarna doet de functie hetzelfde voor het element met de id period. Deze eerste regels code synchroniseren dus elke keer de getoonde waarde met de ingestelde waarde, zodat de gebruiker onmiddellijk feedback krijgt bij het schuiven.

Daarna creëren we met NumPy’s functie arange een reeks x-waarden en vervolgens berekenen we voor elk van die x-waarden de sinusfunctie met NumPy’s functie sin. Door het argument van de sinusfunctie te vermenigvuldigen met 2π en te delen door de periode, berekenen we de sinus met de gewenste periode: de kromme wordt zo breder of smaller geplot. Door het resultaat van de sinusfunctie met de amplitude te vermenigvuldigen, wordt de kromme hoger of lager geplot.

Uiteindelijk maken we de huidige figuur leeg, plotten we de x- en y-waardes in het blauw, voegen we een raster toe en stellen we het bereik voor de x- en y-as in. Daarna tonen we de plot in het target sine, dat verwijst naar de id van het desbetreffende element div in het html-bestand. Helemaal op het einde van het Python-bestand roepen we de functie ook expliciet op. Zo wordt de grafiek ook getoond nadat de pagina is geladen, zonder dat de gebruiker eerst met een van de schuifbalken moet schuiven.

Deze grafiek plotten we in Python dankzij Matplotlib.

8 JavaScript in Python aanroepen

Er bestaat uiteraard al een heel ecosysteem van JavaScript-bibliotheken voor webapplicaties. Je hoeft het wiel niet opnieuw uit te vinden in Python of een Python-alternatief te zoeken als je er al een in JavaScript bij de hand hebt. Zoals we eerder al schreven, biedt PyScript volledige interoperabiliteit tussen Python- en JavaScript-code in je webapplicaties. Om JavaScript-functies in je Python-code aan te roepen, importeer je de globale JavaScript-namespace met:

Daarna gedraagt js zich in je Python-code als een Python-module en kun je alle globale JavaScript-functies aanroepen met js.naamvanfunctie.

Als je asynchrone JavaScript-functies wilt aanroepen, moet je ook de module asyncio in je Python-code importeren en de functies aanroepen met await ervoor.

9 Alles in één

Laten we dit eens illustreren met een eenvoudig voorbeeld dat de JavaScript Fetch API gebruikt om je publieke ip-adres via de website ipify op te vragen. We tonen meteen een alternatieve manier om PyScript te gebruiken door de Python-code rechtstreeks in het html-bestand te plaatsen in plaats van een afzonderlijk Python-bestand. Zo heeft onze webapplicatie maar één bestand nodig, het html-bestand:

De code kun je downloaden van deze pagina en daarna vanuit een programma als Kladblok overnemen.

We creëren hier in de body een element py-script met daarin de Python-code. Merk op dat dit element een attribuut async heeft, omdat we in de Python-code een asynchrone functie met await aanroepen. Zonder het attribuut async zou de code niet werken.

De JavaScript Fetch API biedt een eenvoudige manier aan om http-aanroepen in je webapplicatie te doen.

10 Webpagina ophalen

De code roept de globale JavaScript-functie fetch aan met als argument de url van de API van ipify. Dit is een asynchrone JavaScript-functie, vandaar dat we die aanroepen met await js.fetch(url). Van het resultaat vragen we de tekst op. Omdat dit ook een asynchrone JavaScript-functie is, moeten we dit in onze Python-code ook met await aanroepen.

Als dit succesvol is, bevat de variabele public_ip het antwoord van de webserver van ipify, namelijk je publieke ip-adres. We creëren dan een f-string met de boodschap “Mijn publieke IP-adres:” gevolgd door het betreffende ip-adres. Met de functie display (die je niet mag vergeten te importeren uit de module pyscript) toon je deze string in het html-element waarin deze Python-code wordt uitgevoerd, namelijk het paragraaf-element p. En zo krijg je wanneer je deze webpagina laadt na een korte pauze je ip-adres te zien.

11 Python REPL

Met PyScript kun je zelfs een Python REPL (read-eval-print loop) in je webpagina toevoegen: een terminalvenster waarin je Python-opdrachten uitvoert, volledig client-side in je webbrowser. De html-code hiervoor ziet er als volgt uit:

De code kun je downloaden van deze pagina en daarna vanuit een programma als Kladblok overnemen.

De attributen terminal en worker voor het element script zijn hier belangrijk. Het eerste attribuut toont een terminal waarin de uitvoer van de Python-functie print komt, en het tweede attribuut maakt de terminal interactief (bijvoorbeeld om de gebruiker invoer te vragen met de Python-functie input).

Als je deze webapplicatie zo zou uitvoeren, zou je in de JavaScript-console een foutmelding krijgen: “Error: Unable to use SharedArrayBuffer due insecure environment.” Om je webpagina in een veilige context te plaatsen, moet je de HTTP-headers Cross-Origin-Opener-Policy, Cross-Origin-Embedder-Policy en Cross-Origin-Resource-Policy instellen.

De eenvoudige ingebouwde webserver van Python die we in dit artikel gebruiken, doet dat niet. Maar als je het bestand mini-coi.js via deze GitHub-pagina downloadt en in dezelfde directory als je html-bestand opslaat, en in het element head van je html-pagina vóór alle scripts, links en styles hiernaar verwijst met <script src="./mini-coi.js" scope="./"></script>, werkt dit wel. Laad de pagina, wacht even tot de Python-omgeving is opgestart, en je kunt aan de slag in je interactieve Python-terminal.

Een volledige Python-terminal in je webapplicatie? Dat is maar enkele regels PyScript-code.

Hoewel koken op gas voorlopig nog mag, is duidelijk dat de toekomst elektrisch is. Veel mensen stappen nu al over op elektrisch koken – vaak in combinatie met inductie. Ben jij toe aan een nieuwe kookplaat of wil je van het gas af? Dan is het goed om te weten hoe je zo’n elektrische kookplaat aansluit, waar je op moet letten en wanneer je beter een professional kunt inschakelen.

Eén, twee of drie fasen: wat betekent dat?

In tegenstelling tot een gaskookplaat, die je simpelweg aan een gasaansluiting koppelt, is een elektrische kookplaat net iets technischer. Zo'n kookplaat kan worden aangesloten op één, twee of drie elektrische fasen. Welke van de drie je nodig hebt, hangt af van het vermogen van je kookplaat én van de aansluiting in je keuken.

Een 1-fase kookplaat is het eenvoudigst. Die werkt op een gewone stekker met twee pinnen, precies zoals je gewend bent van andere apparaten in huis. Deze modellen hebben een beperkt vermogen – maximaal 3680 watt – maar zijn vaak krachtig genoeg voor wie niet al te fanatiek kookt. Aansluiten is simpel: stekker erin en je kunt aan de slag.

Voor een 2-fase kookplaat heb je een zogenoemde perilex-stekker nodig, met vijf pinnen. Die zie je vooral bij iets krachtigere inductiekookplaten. Meestal worden dit soort kookplaten zonder stekker geleverd, en is het slim om een elektricien in te schakelen voor de installatie. Het benodigde vermogen ligt tussen de 3681 en 7360 watt.

Een 3-fase kookplaat vraagt nog meer stroom en werkt op krachtstroom. Ook hier gebruik je een perilex-stekker met vijf pinnen, maar je moet wel eerst controleren of je meterkast daar op is voorbereid. De aansluitwaarde ligt boven de 7360 watt en het is belangrijk dat de aansluiting klopt – anders werkt de kookplaat niet of loop je zelfs risico op overbelasting. Laat dit daarom bij voorkeur aan een vakman over.

©vectorizer88 - stock.adobe.com

Hoe weet je welke kookplaat bij je keuken past?

Wat je kunt aansluiten, hangt af van het type stopcontact in je keuken. Heb je een standaard wandcontactdoos met twee gaten? Dan past daar alleen een 1-fase kookplaat op. Die worden meestal geleverd met stekker en snoer, zodat je hem meteen kunt gebruiken.

Zie je een perilex-stopcontact (met vijf gaten)? Dan is je keuken in principe geschikt voor een 2- of 3-fase kookplaat. Alleen weet je dan nog niet of je meterkast daadwerkelijk drie fasen aankan. Dat kun je op twee manieren controleren: met een multimeter of door in je meterkast te kijken.

Zo check je de aansluiting met een multimeter

Heb je een multimeter in huis? Dan kun je precies meten hoeveel fasen je aansluiting ondersteunt. Teken op een papier het patroon van het perilex-stopcontact en noteer per gat wat je meet. Prik met één pin in het middelste gat (de aarde) en meet met de andere pin de overige vier. Krijg je twee keer 230 volt en twee keer 0? Dan heb je een 2-fase aansluiting. Meet je drie keer 230 volt en één keer 0? Dan is het een 3-fase aansluiting. Label de gaten met ‘L’ voor stroom en ‘N’ voor nul, zodat je straks precies weet wat waar hoort.

©Dmitriy

Geen multimeter? Kijk in de meterkast

Heb je geen meetapparatuur? Dan kun je in de meterkast zien hoeveel fasen er beschikbaar zijn. Bij een 2-fase aansluiting zie je twee gekoppelde groepen met een hendel ertussen. Zie je vier gekoppelde groepen? Dan is er krachtstroom aanwezig en kun je dus ook een 3-fase kookplaat aansluiten – mits het stopcontact daar geschikt voor is.

©auremar

Zelf een kookplaat aansluiten

Ga je zelf aan de slag? Dan is het belangrijk dat je weet wat je doet. Elektriciteit is geen speelgoed, dus bij twijfel: bel een vakman. Heb je een 1-fase kookplaat met powermanagement die je op een normaal stopcontact wilt aansluiten? Dan moet je deze eerst correct instellen.

Leg om te beginnen een stuk piepschuim onder de kookplaat, zodat je hem veilig kunt omdraaien zonder krassen of barsten. Plak daarna de afdichtband rondom het apparaat, bij voorkeur zo dicht mogelijk bij de glasrand. Begin aan de achterkant, zodat de naad niet in het zicht valt.

Open het aansluitcompartiment onder de kookplaat en controleer het aansluitschema dat daar staat. Gebruik de bijgeleverde bruggetjes om de juiste verbindingen te maken. Sluit het snoer aan: bruin op L, blauw op N en geelgroen op aarde. Zet het snoer vast met trekontlasting en sluit het klepje.

Draai nu de kookplaat weer om en steek de stekker in het stopcontact. Leg de kookplaat op z’n plek in het aanrechtblad. Houd de pauzeknop vijf seconden ingedrukt om het menu te openen. Zoek via de plusknop naar het onderdeel ‘PO’ (power) en stel het vermogen in op 3.7 in plaats van 7.4. Bevestig dit door de pauzeknop nog eens vijf seconden ingedrukt te houden. Je kookplaat is nu geschikt voor een standaard aansluiting.

Een 2-fase kookplaat aansluiten: zo werkt het

Heb je een 2-fase kookplaat? Dan moet je eerst bepalen welke kleur draad bij welk contact hoort. Meet het snoer door met een multimeter, op de piepstand of op de Ohm-stand. Noteer welke draad bij welke stekkerpin hoort en gebruik die info bij het aansluiten.

Open vervolgens het aansluitvak onder de kookplaat en kijk welk aansluitschema je moet gebruiken. L1 en L2 koppel je aan de juiste stroomdraden, 01 en 02 aan de juiste nuldraad. Maak de trekontlasting los, sluit de draden aan zoals je eerder hebt gemeten, en zet alles weer stevig vast.

Steek daarna de stekker in het stopcontact en plaats de kookplaat netjes in het blad. Dankzij de afdichtband blijft alles goed op z'n plek. Zet vervolgens de kookplaat aan en test of alle kookzones werken. Krijg je een foutmelding? Dan is er waarschijnlijk iets misgegaan bij het aansluiten. Geen foutmelding? Dan is je kookplaat klaar voor gebruik.

©S.Engels

Vooral in de zomer is het vaak raak: code geel of code oranje wegens onweer. Weet jij wat je wél en juist níet moet doen als er een onweersbui nadert? Thuis kun je veel risico's beperken, maar juist buitenshuis – en zeker op de camping – is het opletten geblazen. In dit artikel lees je hoe je jezelf en anderen beschermt, of je nu binnen, buiten of aan het kamperen bent.

Lees ook: Regen, regen en nog eens regen … zo voorkom je wateroverlast

Thuis tijdens onweer: veilig, maar niet zonder risico's

In huis ben je relatief goed beschermd tegen blikseminslag, zeker als het gebouw voorzien is van een goede bliksemafleider. Toch zijn er een paar voorzorgsmaatregelen die je serieus moet nemen. Gebruik bij onweer liever geen apparaten die verbonden zijn met het stroomnet of met leidingen. Denk aan de wasmachine, een vaste telefoon of een bedrade computer. Bliksem kiest daarbij meestal de makkelijkste route naar de grond, en dat zijn vaak metalen onderdelen in huis zoals koperdraden of waterleidingen.

Trek bij voorkeur de stekkers uit het stopcontact van kwetsbare apparatuur zoals computers, tv's of de router. Een stekkerdoos met overspanningsbeveiliging biedt wel wat bescherming, maar niet bij een directe inslag. Ga liever ook niet douchen of in bad, want waterleidingen kunnen de elektrische spanning van een blikseminslag geleiden.

Ramen kun je gewoon dicht houden, en als je wilt kijken naar het natuurgeweld, doe dat dan vanaf een veilige plek binnenshuis. Zorg dat huisdieren binnen zijn en zet het alarmsysteem even uit als dat storingsgevoelig is bij blikseminslag.

Buiten bij onweer: voorkom dat je zelf bliksemafleider bent

Ben je onderweg of buiten als het begint te donderen, dan is het zaak om snel te handelen.

Onthoud: als je de bliksem ziet en binnen 10 seconden de donder hoort, zit je binnen de gevarenzone. Zoek dan zo snel mogelijk een veilige schuilplek.

De veiligste plek is een gebouw met muren en een dak – bijvoorbeeld een winkel, huis of station. Een auto met metalen carrosserie is ook een prima optie. Die werkt als een kooi van Faraday en geleidt de stroom om je heen in plaats van door je heen.

Vermijd tijdens onweer open velden zoals weilanden of sportterreinen, want daar ben je letterlijk het hoogste punt. Ook hooggelegen plekken zoals duinen of heuveltoppen vormen een risico. Zoek geen beschutting onder een boom die in z'n eentje op een veld staat – dat is juist een bliksemmagneet. Blijf verder uit de buurt van metalen objecten zoals hekken, masten of fietsen, en houd afstand van water – of dat nu een meer, sloot of zwembad is.

Kun je nergens heen? Maak jezelf dan zo klein mogelijk: hurk neer op je voetzolen, houd je voeten tegen elkaar en wikkel je armen om je knieën. Ga niet liggen; zo vergroot je je contactoppervlak met de grond, wat het risico op aardstroom vergroot.

©ID.nl

Kamperen met onweer: extra opletten in tent of caravan

Kamperen geeft een gevoel van vrijheid, maar bij onweer ben je juist extra kwetsbaar. Een tent biedt geen enkele bescherming tegen bliksem, hoe stevig het doek ook is. Het metalen frame vergroot het risico juist, vooral als je op een open veld kampeert of vlak bij een losse boom staat.

Als er onweer op komst is, zoek dan zo snel mogelijk een veilig onderkomen. Een stenen sanitairgebouw, de receptie of je auto bieden veel meer bescherming dan een tent. Zit je in een camper of caravan met een metalen buitenkant? Dan ben je redelijk veilig, mits je ramen en deuren gesloten houdt en geen contact maakt met metalen delen. Stacaravans met een houten of kunststof omhulsel bieden die bescherming niet: het klopt dat ze geen stroom geleiden, maar ze voeren die ook niet af. Daardoor kan een blikseminslag via leidingen of metalen onderdelen binnen alsnog gevaarlijk uitpakken. Tijdens onweer blijf je dus beter uit de buurt van dat soort constructies.

Laat ook je elektronische spullen niet in de tent of aan opladers zitten. Berg ze los op, zonder kabels of contact met de grond.

Staan er bomen op de camping? Zorg dat je tent daar niet direct onder staat. Bij inslag kunnen takken afbreken of kan de bliksem via de wortels naar de grond doorslaan. Ook op campings in de bergen of aan open water is het risico op blikseminslag extra hoog – check bij aankomst wat de aanbevolen schuilplaatsen zijn.

Tot slot: een goede voorbereiding helpt

Kijk altijd naar de weersvoorspelling voordat je op pad gaat. Veel weerapps geven een melding bij onweerskansen, vaak met een tijdsindicatie en locatie. Op de camping is het handig om bij aankomst al te weten waar je naartoe kunt bij slecht weer.

Zorg ook dat je zaklamp, powerbank en radio of noodaccu paraat hebt als je kampeert, voor het geval de stroom uitvalt. En vooral: blijf rustig. Onweer is gevaarlijk, maar met de juiste kennis en voorzorgsmaatregelen voorkom je ongelukken.