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.

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:

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:

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.

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.

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:

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.

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 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.

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:

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.

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 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.

Bosch heeft veel succes geboekt op het gebied van e-biketechnologie. Hun motoren, accu's en displays hebben een goede reputatie opgebouwd en worden door e-bikebezitters gewaardeerd. Bosch, dat niet vaak artikelen aankondigt, verrast nu met de Performance Line CX-middenmotor en -remmen, -displays en -accu's.

Binnen de Duitstalige landen is de Performance Line CX middenmotor vooral enthousiast ontvangen voor mountainbikers. Begrijpelijk, want met veel newtonmeters aan koppel heb je genoeg power paraat en zijn steile passages een peulenschil. In Nederland is de e-mountainbike minder populair en wordt de CX-motor vooral gemonteerd op e-bikes voor toerrijders die grote afstanden willen overbruggen en daarbij uitdagende hellingen beklimmen.

Kenmerken Bosch Performance Line CX

Goede balans tussen power, gebruiksgemak en ritafstand

Niet alleen het vermogen van de motor is belangrijk voor e-mountainbikers en e-toerfietsers, een nauwkeurige afstelling en soepele werking van de aandrijving minimaal zo belangrijk. Met een koppel van 85 Nm, een piekvermogen van 600 watt en tot 340 procent ondersteuning levert de Performance Line CX goede prestaties en rijdynamiek. Voor de motor zijn diverse rij-instellingen beschikbaar, in te stellen via de Bosch eBike Flow-app.

©Bosch eBike Systems

Sensortechnologie

De Performance Line stemt via sensortechnologie iedere rijmanoeuvre nauwkeurig af door de pedaalinput te volgen. De sensoren meten de pedaalinput meer dan duizend keer per seconde. Het gaat om sensoren voor de trapfrequentie, acceleratie en rotatiesnelheid. Ook reageert de motor snel en accuraat op veranderingen in acceleratie, het zelf-opgewekt vermogen en de snelheid.

Reducering van geluid en gewicht

De Bosch Performance Line CX biedt een geoptimaliseerde transmissie die zorgt voor stille werking en een natuurlijk rijgevoel tijdens e-biketochten. De motor koppelt interne en externe aandrijvingen los bij bergaf rijden, wat mechanische geluiden vermindert. Vergeleken met eerdere modellen is het gewicht 100 gram lager, dankzij een magnesium behuizing die extreme omstandigheden aankan. Dit alles resulteert in een balans tussen kracht, efficiëntie en geluid.

©Bosch eBike Systems

Handige functies voor steile hellingen

Als e-biker kan het een uitdaging zijn om bergopwaarts te stoppen en vervolgens veilig op gang te komen. Dankzij de Hill Start Assist kun je gecontroleerd en safe wegrijden en houden de banden volledige tractie op de ondergrond. Dankzij speciale sensoren detecteert het systeem de hellingshoek en krijg je er optimale ondersteuning voor terug. Ook nieuw is de functie loopondersteuning, waarbij de motor de duwsnelheid aan de loopsnelheid aanpast.  

🚲Leestip: Vier fietsbestemmingen voor het najaar

Remgebied, display en accutechniek

Het Bosch eBike ABS Pro remsysteem zorgt voor rijstabiliteit en maakt het mogelijk om laat en krachtig te remmen mogelijk zonder dat het voorwiel wegglijdt. Het Purion 400-display heeft een minimalistische uitstraling, maar op het scherm van 1,6 inch doorsnede staan rijgegevens, zoals snelheid, vermogen en totale afstand.

©Bosch eBike Systems

Voor lange of intensieve tochten heeft Bosch de PowerTube 800-accu ontwikkeld, de grootste accu in het smart systeem tot nu toe. Neem je genoegen met iets minder inhoud dan is de PowerTube 600 een aanrader. Bosch gebruikt voor beide accu's batterijcellen met een nieuw ontwikkelde aluminium behuizing. Beide accu's passen naadloos in een framebuis en zijn ook geschikt voor een dubbele accuoplossing. Ook is het mogelijk om de Ranger Extender PowerMore als extra accu te gebruiken.

©Bosch

 Focus op duurzaamheid bij de productie

Voor de fabricage van de Performance Line CX en beide accu's gebruikt Bosch gerecycled materiaal. Dit geldt ook voor het grootste kunststof deel van de motor, de accuhouder en de accubehuizing. Ook is de hoeveelheid materiaal voor de accu's verminderd en is afgezien van een zwarte kleurcoating van de PowerTube 600 en PowerTube 800.

Bij ID.nl zijn we dol op kwaliteitsproducten waar je niet de hoofdprijs voor betaalt. Een paar keer per week speuren we binnen een bepaald thema naar zulke deals. Wil je funcooken voor een aantrekkelijke prijs? Vandaag hebben we vijf interessante apparaten voor je gespot.

Solis 5 in 1 tafelgrill (7910)

Zoek je een kwalitatief gourmetstel waarmee je jarenlang vooruit kunt? Dit luxe exemplaar van Solis voldoet aan alle eisen. Met de traploze regelaar aan de voorzijde kun je heel precies de gewenste temperatuur instellen. Bak vervolgens op de grillplaat de lekkerste hapjes gaar. Daarnaast kun je ook een van de vier bijgesloten miniwoks of (raclette)pannetjes gebruiken. Hiermee maak je bijvoorbeeld een kleine pannenkoek of pizza.

De werking is kinderlijk eenvoudig. Zodra je het kooktoestel inschakelt, gaat er eerst een rood lampje branden. Het gourmetstel is nu aan het opwarmen. Als het lampje groen kleurt, kan het eetfestijn beginnen. Is een gerecht zo heet dat je je mond kunt branden? Plaats het pannetje of de miniwok dan even in de koudzone onderin het toestel. Naast de eerder genoemde accessoires levert de fabrikant ook nog vier spatels mee.

Princess 162655 Black Steel Raclette

De betaalbare Princess 162655 Black Steel Raclette valt bij heel wat Kieskeurig.nl-testers goed in de smaak, want zij beoordelen dit gourmetstel met een 8,3 (gemiddeld cijfer). Verschillende reviewers vinden het prettig dat dit apparaat zich makkelijk laat schoonmaken. De losse onderdelen kunnen bovendien in de vaatwasser. Een ander pluspunt is dat het gourmetstel volgens diverse gebruikers snel opwarmt. Niet vreemd, gezien het respectabele vermogen van 1300 watt.

Het gourmetstel heeft een riant bakoppervlak van 44 × 25 centimeter. Dankzij de stevige anti-aanbaklaag heb je geen bakboter of olie nodig om te grillen. Het apparaat leent zich prima voor een ruim gezelschap, want de productdoos telt acht (raclette)pannetjes met een houten handvat en evenzoveel spatels. Via een draaiknop reguleer je nauwkeurig de temperatuur. Overigens vindt een enkele tester het netsnoer wat aan de korte kant.

Tefal WokParty Duo PY5828

Wie met een groepje gezellig wil wokken, kan dit leuke kooktoestel van Tefal eens uitproberen. Er zijn zes diepe pannen bijgesloten. Dankzij de gekleurde markering op het handvat weet iedereen precies welk pannetje van hem of haar is. De bakplaat bevat ronde uitsparingen, waardoor de boel niet gaat schuiven. Hierin kun je trouwens ook prima mini-pannenkoeken bakken. Speciaal daarvoor is er een handige gietlepel inbegrepen. Verder telt de verpakking zes spatels.

De WokParty Duo PY5828 heeft een zogeheten Thermo-spot. Hieraan zie je in hoeverre het kooktoestel op temperatuur is. Met een vermogen van duizend watt hoef je niet zo lang te wachten. Tefal levert een receptenboek mee, zodat je inspiratie kunt opdoen. Klaar met tafelen? Stop dan alle losse accessoires in de vaatwasser. Handig is dat je het netsnoer, de spatels en de gietlepel in de onderkant kunt opbergen.

Lees ook: Zo voorkom en verwijder je vieze luchtjes na het gourmetten

Emerio PO-113255.4

Pizzaliefhebbers opgelet! De binnenzijde van de Emerio fungeert als een kleine oven. Op die manier kunnen maximaal zes personen hun eigen mini-pizza bakken. Met behulp van de bakspatel schuif je de lekkernij moeiteloos in de oven. Geen zin in pizza? In de zes bijgesloten pannetjes kun je allerlei andere gerechten klaarmaken. Bovendien bevindt zich bovenop een ronde grillplaat met een diameter van veertig centimeter. Daar kun je dus behoorlijk wat hapjes op kwijt!

De bediening heeft weinig om het lijf, want de behuizing bevat alleen een aan-uitknop. Met een riant vermogen van 1500 watt worden de gerechten goed warm. De maximale oventemperatuur bedraagt dan ook 250 graden. Volgens de fabrikant houdt de koepelvormige behuizing de warmte in de (pizza)over beter vast. Diverse accessoires zijn vaatwasserbestendig, zodat je na afloop niet zoveel tijd kwijt bent aan schoonmaken.

Princess 01.103080.01.001 Dinner4All

Als je met een groepje gaat gourmetten, staat het kooktoestel voor sommige personen wellicht te ver weg. Daar heeft Princess iets op bedacht. Met de Dinner4All bedient iedereen zijn eigen bakplaat van 250 watt. Even een satéstokje of biefstukje omdraaien is dus zo gepiept. Is het hapje eenmaal gaar, dan schuif je het zo op je eigen bordje. Princess levert hiervoor vier aardewerken-borden mee.

Je sluit de centrale unit aan op netstroom, waarna je hierop maximaal vier individuele gourmetstellen kunt aansluiten. Vermenging van smaken is dus verleden tijd! Plaats op deze unit eventueel de inbegrepen serveerschaal. Zo kan iedereen zijn of haar favoriete hapjes pakken. Wil je weten hoe andere gebruikers dit slimme gourmetstel beoordelen? Lees dan eens deze reviews op Kieskeurig.nl. Dit kooktoestel is als alternatief ook met twee individuele bakplaten te koop.