<!-- Font Awesome icons (free version)-->
<script src="https://use.fontawesome.com/releases/v5.15.4/js/all.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/js/all.min.js"></script>
<!--https://github.com/lonekorean/gist-syntax-themes-->
<!-- <script src="https://gist.github.com/lonekorean/8a6a3c508b7c71deb4070d3314900b1f.js"></script> -->
<script src="js/dot.scripts.js"></script>
<script src="mouseover.js"></script>
<script src="/js/tab-gallery.js"></script>
<!-- AOS -->
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<!-- Not convenient with phones and tablet -->
<!-- <script defer src="js/dot.auto-open.js"></script> -->
<!-- Google fonts-->
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700" rel="stylesheet" type="text/css" />
<!-- Core theme CSS (includes Bootstrap)-->
<link href="css/styles.css" rel="stylesheet" type="text/css" />
<link href="css/dot.styles.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="css/h-ticker.css" type="text/css">
<link rel="stylesheet" href="/test-tooltip-hover/follow-mouse.css" type="text/css" />
<link href="css/tab-gallery.css" rel="stylesheet" type="text/css" />
Menu
Welkom bij Het Anne Willem Koster Domein.
Leuk u te ontmoeten
Nieuwe Mindset Nieuwe Resultaten
</div>
</header>
<!-- About -->
<section class="page-section" id="about">
<div class="container">
<div class="text-center">
<h2 class="section-heading text-uppercase">Over mij</h2>
<h3 class="section-subheading text-muted">Een stukje achtergrond geschiedenis.</h3>
</div>
<ul class="timeline">
<li>
<div class="timeline-image"><img class="rounded-circle img-fluid-timeline"
src="assets/img/about/lego-color-bricks2.jpg" alt="..." /></div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4>1973</h4>
<h4 class="subheading">Ons bescheiden begin</h4>
</div>
<!-- Use <details open> </details> etc to open the text by default -->
<details open class="details-dot">
<summary class="details-dot">
<div id="beginnings" class="fa fa-solid fa-arrow-down"></div>
klik om dit artikel te sluiten
<br>
<br>
<div class="content">
</summary>
<div class="timeline-body">
<p class="text-muted">Ik ben Anne Koster. Geboren in het jaar dat het <a
href="https://isgeschiedenis.nl/nieuws/eerste-mobiele-telefoon" target="_blank"
rel="noopener">
eerste mobiele telefoongesprek</a> wordt gevoerd.
Martin Cooper, hoofd van het onderzoeksteam van Motorola, voert het eerste mobiele
telefoongesprek. Hij voert dit gesprek met Joel S. Engel, het hoofd van het
onderzoeksteam van Bell Labs.
Met de eerste mobiele telefoon kon een gesprek van maximaal dertig minuten worden
gevoerd, en het duurde een jaar om de batterij weer op te laden.
Het duurde dan ook nog tien jaar voor Motorola in 1983 met het eerste toestel voor
consumentengebruik op de markt kwam.
</p>
</div>
</div>
</details>
</li>
<li class="timeline-inverted">
<div class="timeline-image"><img class="rounded-1 img-fluid-timeline"
src="assets/img/about/Lampje.png" alt="Lampje" /></div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4>1980</h4>
<h4 class="subheading">Zelfeffectiviteit, het vertrouwen van je eigen kunnen.</h4>
</div>
<details open>
<summary>
<i class="fa fa-solid fa-arrow-down filled"></i>
klik om dit artikel te sluiten
<br>
<br>
<div class="content">
</summary>
<div class="timeline-body">
<p class="text-muted">Mijn hele leven ben ik geobsedeerd door elektronica. In die tijd
bestond dan ook nog de radiocheck <a
href="https://www.homecomputermuseum.nl/collectie/tandy/" target="_blank"
rel="noopener">Tandy</a>, waar wij vaak waren te vinden als kind. Je
kon hier van allerlei elektrische spulletjes kopen van speelgoed tot computers. In
1976 werd dan ook begonnen aan een microcomputer, oorspronkelijk als zelfbouw
computer maar omdat mensen binnen het bedrijf dachten dat mensen niet voldoende
konden solderen, werd er toch een complete computer gebouwd.
Kun je je voorstellen dat je na aankoop je eigen computer nog moet in elkaar zetten?
Nee, kijk dan maar eens naar de <a
href="https://www.hln.be/apple/door-steve-jobs-gebouwde-apple-computer-brengt-400-000-dollar-op-bij-veiling~a841376d/?referrer=https%3A%2F%2Fwww.google.com%2F"
target="_blank" rel="noopener">Apple I uit 1976 </a> maar liefst 4 KB standaard
geheugen, uitbreidbaar tot 8 KB of 48 KB
Oudere elektronica amateurs kennen ze nog wel, de Philips Elektronica Experimenteer
dozen. Met name de nieuwe E2000 serie die door Philips vanaf 1974 op de markt werd
gebracht heeft bij velen een onuitwisbare indruk achtergelaten. Die zwart plastic
montage platen en het schakelpaneel. En natuurlijk ook de klemmetjes, die kleine
verdraaide klemmetjes waar je nooit genoeg van kunt hebben!
Na het ontdekken van de mogelijkheden met de Philips elektronica dozen heb ik jaren
geknutseld op mijn zolderkamertje. Hier deed ik veel ervaring op met elektronica,
computers en alles waar je maar een stekker in kon steken. Van onderzoeken, stuk
maken, testen, aanpassen tot herstellen. Op dat moment bestond internet nog niet en
in een bibliotheek vond je ook al weinig info. Dus we waren erg op onszelf
aangewezen.
Hierdoor heeft het bij mij iets langer geduurd voordat ik op mijn 25e gekozen heb
voor ICT als werkomgeving. Mijn moeder vond dat ik beter een ambacht kon leren. Zo
heb ik 7 jaar als kok in de horeca gewerkt, daar leer je aanpakken van. De twintig
jaar daarna heb ik als Server Service Manager gewerkt bij een aantal bedrijven.
Onder andere die van ons/mij zelf.
</p>
<!-- </div> -->
</div>
</details>
</div>
</li>
<li>
<div class="timeline-image"><img class="rounded-circle img-fluid-timeline"
src="assets/img/about/kubo-full-service-grow-concepts-cutted.jpg"
alt="Full service expansion" /></div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4>December 2018</h4>
<h4 class="subheading">Overgang naar volledige Service</h4>
</div>
<details open>
<summary>
<i class="fa fa-solid fa-arrow-down"></i>
klik om dit artikel te sluiten
<br>
<br>
<div class="content">
</summary>
<div class="timeline-body">
<p class="text-muted">Na de crisis uit 2012 ben ik niet meer teruggekomen in dit
werksegment.
Ik wilde nu een stapje verder gaan. Terug naar de tekentafel en weer doen wat ik
altijd zo leuk vond.
Ik wil gebruik maken van Python, Angular en Typescript. Valt Angular nog te
bootstrappen. Ja ook dat kan.<br><br>
<a href="https://angular.io/" target="_blank" rel="noopener">Angular</a> is een op
TypeScript gebaseerd front-end framework dat wordt onderhouden door het Angular Team
van Google en een gemeenschap van individuen en bedrijven.<br><br>
<a href="https://www.typescriptlang.org/" target="_blank"
rel="noopener">TypeScript</a> is
een open source programmeertaal ontwikkeld door
Microsoft.
Het is een strikte superset van JavaScript, en voegt typing en objectgeoriënteerd
programmeren toe aan de taal.
Anders Hejlsberg, hoofdarchitect van C# en bedenker van Delphi en Turbo Pascal,
heeft aan de ontwikkeling van TypeScript gewerkt<br><br>
<a href="https://www.python.org/" target="_blank" rel="noopener">Python</a> is een
programmeertaal die begin jaren 90 ontworpen en ontwikkeld werd door Guido van
Rossum, destijds verbonden aan het Centrum voor Wiskunde en Informatica in
Amsterdam.
</p>
</div>
</details>
</div>
</li>
<li class="timeline-inverted">
<div class="timeline-image"><img class="rounded-circle img-fluid-timeline"
src="assets/img/about/business-expansion-success.png" alt="..." /></div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4>November 2021</h4>
<h4 class="subheading">Fase twee, de verdere uitbreiding</h4>
</div>
<details open>
<summary>
<i class="fa fa-solid fa-arrow-down"></i>
klik om dit artikel te sluiten
<br>
<br>
<div class="content">
</summary>
<div class="timeline-body">
<p class="text-muted">Na een twee dagen durende hackathon in december 2018 bij <a
href="https://codegorilla.nl/" target="_blank" rel="noopener">Code Gorilla</a>
werd ik aangenomen in een opleiding programmeren, die uiteindelijk door
faillissement niet door ging. Daarom heb ik me aangemeld bij Scauting. Daar heb ik
een cursus Python van AT Computing gedaan. Mijn werkcoach kwam toen met een stage.
Na een hele leuke stage bij <a href="https://www.humainr.com/" target="_blank"
rel="noopener">Humainr</a> ben ik terecht gekomen bij het <a
href="https://www.reacollegenederland.nl/" target="_blank" rel="noopener"> REA
College</a> waar het de bedoeling is dat ik bovenstaande framewerken ga leren
toepassen en hier hopelijk weer een hele leuke baan in ga vinden.
Vaak heb ik plannen waar ik bevlogen van raak en zet dit om in projecten. Soms wat
eigenzinnig, ik ben nu eenmaal een perfectionist.
</p>
<!-- </div> -->
</div>
</details>
</div>
</li>
<li class="timeline-inverted">
<div class="timeline-image">
<h4>
De
<br />
cirkel
<br />
is rond!
</h4>
</div>
</li>
</ul>
</div>
</section>
<!-- ######################## Angular Slider App ######################## -->
<section class="capabilities" id="capabilities">
<div class="contanter">
<div class="text-center">
<div class="justify-content-evenly">
<h2 class="section-heading text-uppercase">Curriculum</h2>
<h3 class="section-subheading text-muted certificaties">
<i class="certificaties">Een greep uit mijn certificaties.</i>
</h3>
<br>
</div>
<!--testcontainer-->
<div class="testcontainer">
<div class="cv">
<div class="cv-text">
<div class="portfolio-caption-subheading ">
<p>
<i>
<pre>Als je meer wilt weten,
Hier is mijn Curriculem Vitae:
<div class="button-dot30-position">
<a href="/assets/img/cv/Anne_Willem_Koster_Curriculem_Vitae.pdf">
<button class="button-53" role="button">klik hem aan en download dit CV</button></a>
</div>
</div>
<div class="slider">
<div class="portfolio-caption-subheading"><i>
<pre class="slider-text">Tot nog toe behaalde certificaties.
Swipe naar links om te lezen
<iframe src="https://akoster.reacollege.net/slider/" title="certificaties" width="100%"
height="473px" class="" allow-downloads="false" frameBorder="0" scrolling="no">
</iframe>
Persoonlijke ervaring maakt vaak meer duidelijk:
<!-- ######################## Horizontal Ticker #####################-->
<!-- CREDITS : https://codepen.io/lewismcarey/pen/GJZVoG -->
<!-- DIV class move is brought in twice because of the gap -->
<!-- between the ticker and the horizontal move -->
<div class="hwrap">
<div class="hmove">
<div class="tickerbar" id="t-bar1">
<div class="hitem">
<a href="#!">
<img class="" src="assets/img/logos/Python_icon_(black_and_white).svg.png" alt="..." />
</a>
</div>
<div class="hitem">
<a href="#!">
<img class="" src="assets/img/logos/edu/ace.gif" alt="..." />
</a>
</div>
<div class="hitem">
<a href="#!">
<img class="" src="assets/img/logos/edu/Linux.png" alt="..." />
</a>
</div>
<div class="hitem">
<a href="#!">
<img class="" src="assets/img/logos/edu/Microsoft_Certified_Professional.png" alt="..." />
</a>
</div>
<div class="hitem">
<a href="#!">
<img class="" src="assets/img/logos/edu/cisco2.png" alt="..." />
</a>
</div>
<div class="hitem">
<a href="#!">
<img class="" src="assets/img/logos/edu/Microsoft-Exchange.png" alt="..." />
</a>
</div>
<div class="hitem">
<a href="#!">
<img class=""
src="assets/img/logos/edu/kyocera-paginas-web-en-cusco-skynet-peruvian-german-huayllani-quispe.jpg"
alt="..." />
</a>
</div>
<div class="hitem">
<a href="#!">
<img class="" src="assets/img/logos/edu/mitel-1-logo-png-transparent.png" width="100"
height="300" alt="..." />
</a>
</div>
<div class="hitem">
<a href="#!">
<img class="" src="assets/img/logos/edu/avaya-logo.png" alt="..." />
</a>
</div>
<div class="hitem">
<a href="#!">
<img class="" src="assets/img/logos/exp/ExactGlobeLogoParentix.png" width="100" height="300"
alt="..." />
</a>
</div>
<div class="hitem">
<a href="#!">
<img class="" src="assets/img/logos/exp/ExactSynergyLogoParentix.png" width="100" height="300"
alt="..." />
</a>
</div>
<div class="hitem">
<a href="#!">
<img class="" src="assets/img/logos/exp/3874829.png" alt="..." />
</a>
</div>
<div class="hitem">
<a href="#!">
<img class="" src="assets/img/logos/edu/novell-logo.png" alt="..." />
</a>
</div>
<div class="hitem">
<a href="#!">
<img class="" src="assets/img/logos/angular-2336967-1982848.png" alt="..." />
</a>
</div>
<div class="hitem">
<a href="#!">
<img class="" src="assets/img/logos/github.png" alt="..." />
</a>
</div>
<div class="hitem">
<a href="#!"><img class="" src="assets/img/logos/raspberrypi-collor.png" alt="..." />
</a>
</div>
<div class="hitem">
<a href="#!"><img class="" src="assets/img/logos/png-transparent-html-5.png" alt="..." />
</a>
</div>
<div class="hitem">
<a href="#!"><img class="" src="assets/img/logos/css-logo-freepik.png" alt="..." />
</a>
</div>
<div class="hitem">
<a href="#!"><img class="" src="assets/img/logos/javascript-logo-transparent.png" alt="..." />
</a>
</div>
<div class="hitem">
<a href="#!"><img class="" src="assets/img/logos/logo-horizontal.svg" alt="..." />
</a>
</div>
<div class="hitem">
<a href="#!"><img class="" src="assets/img/logos/npm.png" alt="..." />
</a>
</div>
<div class="hitem">
<a href="#!"><img class=""
src="assets/img/logos/ux/kisspng-debian-gnu-linux-naming-controversy-linux-distribu-gnu-arch.jpg"
alt="..." />
</a>
</div>
<div class="hitem">
<a href="#!"><img class=""
src="assets/img/logos/ux/kisspng-docker-application-software-asp-net-core-microserv-docker.jpg"
alt="..." />
</a>
</div>
<div class="hitem">
<a href="#!"><img class=""
src="assets/img/logos/ux/198-1983987_this-post-will-walk-you-through-getting-kali.png"
alt="..." />
</a>
</div>
<div class="hitem">
<a href="#!"><img class=""
src="assets/img/logos/ux/stack-overflow-software-developer-comparison.jpg" alt="..." />
</a>
</div>
<div class="hitem">
<a href="#!"><img class=""
src="assets/img/logos/ux/360-3600533_kali-linux-logo-png-transparent-png.png" alt="..." />
</a>
</div>
<div class="hitem">
<a href="#!"><img class=""
src="assets/img/logos/ux/png-transparent-microsoft-visual-studio-code-alt-macos-bigsur-icon-thumbnail.png"
alt="..." />
</a>
</div>
<div class="hitem">
<a href="#!"><img class="" src="assets/img/logos/ux/4725551-middle.png" alt="..." />
</a>
</div>
<div class="hitem">
<a href="#!"><img class="" src="assets/img/logos/logo.svg" alt="..." />
</a>
</div>
</div>
<div class="tickerbar" id="t-bar2">
<div class="hitem">
<a href="#!">
<img class="" src="assets/img/logos/Python_icon_(black_and_white).svg.png" alt="..." />
</a>
</div>
<div class="hitem">
<a href="#!">
<img class="" src="assets/img/logos/edu/ace.gif" alt="..." />
</a>
</div>
<div class="hitem">
<a href="#!">
<img class="" src="assets/img/logos/edu/Linux.png" alt="..." />
</a>
</div>
<div class="hitem">
<a href="#!">
<img class="" src="assets/img/logos/edu/Microsoft_Certified_Professional.png" alt="..." />
</a>
</div>
<div class="hitem">
<a href="#!">
<img class="" src="assets/img/logos/edu/cisco2.png" alt="..." />
</a>
</div>
<div class="hitem">
<a href="#!">
<img class="" src="assets/img/logos/edu/Microsoft-Exchange.png" alt="..." />
</a>
</div>
<div class="hitem">
<a href="#!">
<img class=""
src="assets/img/logos/edu/kyocera-paginas-web-en-cusco-skynet-peruvian-german-huayllani-quispe.jpg"
alt="..." />
</a>
</div>
<div class="hitem">
<a href="#!">
<img class="" src="assets/img/logos/edu/mitel-1-logo-png-transparent.png" width="100"
height="300" alt="..." />
</a>
</div>
<div class="hitem">
<a href="#!">
<img class="" src="assets/img/logos/edu/avaya-logo.png" alt="..." />
</a>
</div>
<div class="hitem">
<a href="#!">
<img class="" src="assets/img/logos/exp/ExactGlobeLogoParentix.png" width="100" height="300"
alt="..." />
</a>
</div>
<div class="hitem">
<a href="#!">
<img class="" src="assets/img/logos/exp/ExactSynergyLogoParentix.png" width="100" height="300"
alt="..." />
</a>
</div>
<div class="hitem">
<a href="#!">
<img class="" src="assets/img/logos/exp/3874829.png" alt="..." />
</a>
</div>
<div class="hitem">
<a href="#!">
<img class="" src="assets/img/logos/edu/novell-logo.png" alt="..." />
</a>
</div>
<div class="hitem">
<a href="#!">
<img class="" src="assets/img/logos/angular-2336967-1982848.png" alt="..." />
</a>
</div>
<div class="hitem">
<a href="#!">
<img class="" src="assets/img/logos/github.png" alt="..." />
</a>
</div>
<div class="hitem">
<a href="#!"><img class="" src="assets/img/logos/raspberrypi-collor.png" alt="..." />
</a>
</div>
<div class="hitem">
<a href="#!"><img class="" src="assets/img/logos/png-transparent-html-5.png" alt="..." />
</a>
</div>
<div class="hitem">
<a href="#!"><img class="" src="assets/img/logos/css-logo-freepik.png" alt="..." />
</a>
</div>
<div class="hitem">
<a href="#!"><img class="" src="assets/img/logos/javascript-logo-transparent.png" alt="..." />
</a>
</div>
<div class="hitem">
<a href="#!"><img class="" src="assets/img/logos/logo-horizontal.svg" alt="..." />
</a>
</div>
<div class="hitem">
<a href="#!"><img class="" src="assets/img/logos/npm.png" alt="..." />
</a>
</div>
<div class="hitem">
<a href="#!"><img class=""
src="assets/img/logos/ux/kisspng-debian-gnu-linux-naming-controversy-linux-distribu-gnu-arch.jpg"
alt="..." />
</a>
</div>
<div class="hitem">
<a href="#!"><img class=""
src="assets/img/logos/ux/kisspng-docker-application-software-asp-net-core-microserv-docker.jpg"
alt="..." />
</a>
</div>
<div class="hitem">
<a href="#!"><img class=""
src="assets/img/logos/ux/198-1983987_this-post-will-walk-you-through-getting-kali.png"
alt="..." />
</a>
</div>
<div class="hitem">
<a href="#!"><img class=""
src="assets/img/logos/ux/stack-overflow-software-developer-comparison.jpg" alt="..." />
</a>
</div>
<div class="hitem">
<a href="#!"><img class=""
src="assets/img/logos/ux/360-3600533_kali-linux-logo-png-transparent-png.png" alt="..." />
</a>
</div>
<div class="hitem">
<a href="#!"><img class=""
src="assets/img/logos/ux/png-transparent-microsoft-visual-studio-code-alt-macos-bigsur-icon-thumbnail.png"
alt="..." />
</a>
</div>
<div class="hitem">
<a href="#!"><img class="" src="assets/img/logos/ux/4725551-middle.png" alt="..." />
</a>
</div>
<div class="hitem">
<a href="#!"><img class="" src="assets/img/logos/logo.svg" alt="..." />
</a>
</div>
</div>
</div>
</div>
<!-- ######################## End Ticker App ######################## -->
<!-- Services-->
<section class="page-section bg-dark bg-opacity-10" id="services">
<div class="container service">
<div class="text-center">
<h2 class="section-heading text-uppercase">Projecten</h2>
<h3 class="section-subheading text-muted">De laatste anderhalf jaar heb ik me beziggehouden met een
aantal projecten die ik interessant vind. In mijn porfolio kunt u er ook achter komen waarom ik dit
interessant vind. Ik ben erg gecharmeerd van de combinatie en koppeling tussen elektronica-hardware
en software aansturings oplossingen. </h3>
</div>
<div class="row text-center">
<div class="col-md-4">
<div class="spacer-vertical-25"></div>
<span class="fa-stack fa-4x">
<i class="fas fa-circle fa-stack-2x text-primary"></i>
<i class="fas fa-laptop fa-stack-1x fa-inverse"></i>
<i class="fa-solid fa-house-laptop"></i>
</span>
<h4 class="my-3">Responsive Design</h4>
<p class="text-muted">Bij het maken van dit portfolio heb ik de focus proberen te houden op
'responsiveness' van de pagina.
Een responsive website focust zich meer op het goed weergeven van het design
dan op de content van de website.
Waar responsive het eigenlijk al zegt (reagerend), reageert een responsive website op de
afmetingen van het scherm (of de browser).
Het maakt hierdoor niet uit of je de website met een smart watch of 55 inch tv bekijkt, de
content is altijd leesbaar en de website bruikbaar. Hierbij heb ik ook gebruik gemaakt van
Bootsrap en andere platformen.</p>
<div class="" data-aos-duration="600" data-aos="fade-down" data-aos-delay="600">
<i class="fab fa-bootstrap fa-5x" style="color: #7952b3;"></i><span
style="padding: 2rem;"></span>
<i class="fab fa-font-awesome-flag fa-5x" style="color:#538dd7;"></i>
<div class="spacer-vertical-25"></div>
<span style="margin-top: 3rem;"></span>
<div class="mt-30 mb-25 semibold f-20 title">
<a class="portfolio-link" href="https://getbootstrap.com/" target="_blank"
rel="noopener"><button class="button-52" role="button">Based on
Bootstrap v5.1.3 and fontawesome v5.15.4</button></a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="spacer-vertical-25"></div>
<span class="fa-stack fa-4x">
<i class="fas fa-circle fa-stack-2x text-primary"></i>
<i class="fas fa-tools fa-stack-1x fa-inverse"></i>
</span>
<h4 class="my-3">Development</h4>
<p class="text-muted">Een van de hoofdzaken in mijn project is wel de API.
API staat voor Application Programming Interface, en het vormt in feite een
brug tussen twee programma’s.
Met behulp van een API kan je twee softwareprogramma’s met elkaar laten praten. Met een stukje
computercode kan je bij een API een verzoek indienen,
vervolgens stuurt de API dit verzoek naar het programma in kwestie en het antwoord hierop wordt
vervolgens teruggekoppeld naar jouw programma zodat het
verder gebruikt kan worden. Een API is dus eigenlijk de boodschapper tussen twee programma’s,
het dient het verzoek in, en koppelt vervolgens het antwoord terug.</p>
<div class="" data-aos-duration="600" data-aos="fade-left" data-aos-delay="600">
<img class="img-fluid flask_icon" src="/assets/file_type_json_official_icon_130502.png"
style="color:#538dd7;" alt="..." title="Flask Icon" />
<div class="spacer-vertical-25"></div>
<a class="portfolio-link" data-bs-toggle="modal" href="#portfolioModal5"><button
class="button-52" role="button">Ga direct naar dit project</button></a>
</div>
</div>
<div class="col-md-4">
<div class="spacer-vertical-25"></div>
<!-- FONT AWESOME ******* -->
<span class="fa-stack fa-4x">
<i class="fas fa-circle fa-stack-2x text-primary"></i>
<i class="fab fa-quinscape fa-stack-1x fa-inverse"></i>
</span>
<h4 class="my-3">Representational state transfer</h4>
<p class="text-muted">REST is een uniforme API-architectuur die niet is gebonden aan methodes en
resources.
De REST API is hiermee een abstracte, client-server toegang die allerlei bronnen en platforms
aan elkaar kan verbinden,
los van de technologie die op die platforms wordt gebruikt. In de praktijk wordt het
voornamelijk ingezet voor het HTTP-protocol,
maar deze webgebaseerde architectuur kan ook prima overweg met bijvoorbeeld FTP.</p>
<div class="" data-aos-duration="600" data-aos="fade-right" data-aos-delay="600">
<img class="img-fluid flask_icon" src="/assets/flask_icon_132389.png" alt="..."
title="Flask Icon" />
<div class="spacer-vertical-25"></div>
<a class="portfolio-link" data-bs-toggle="modal" href="#portfolioModal3">
<button class="button-52" role="button">Ga direct naar dit project</button></a>
</div>
</div>
</div>
</div>
</section>
<!-- Portfolio Grid-->
<section class="page-section bg-light" id="portfolio">
<div class="container-fluid">
<div class="text-center">
<!-- ################################### -->
<!-- ################################### -->
<h2 class="section-heading text-uppercase">Portfolio</h2>
<h3 class="section-subheading text-muted jen-hsun">Ik ben zeker fan van <a
href="https://nl.wikipedia.org/wiki/Bill_Gates"
target="_blank" rel="noopener">Bill Gates</a> en <a
href="https://nl.wikipedia.org/wiki/Steve_Jobs"
target="_blank" rel="noopener">Steve Jobs</a> die een
haat-liefdeverhouding tussen elkaar hadden waardoor Apple en Microsoft uitgroeiden tot razend
succesvolle techreuzen. Zonder Microsoft zou Apple niet het invloedrijke bedrijf van vandaag de dag
zijn, en andersom.<br> <br>Zo ook zoekt<a
href="https://nl.marketscreener.com/business-leaders/Jen-Hsun-Huang-3100/biografie/"
target="_blank" rel="noopener">
Jen-Hsun</a>, President van <a href="https://www.nvidia.com/nl-nl/" target="_blank"
rel="noopener">
NVIDIA</a> naar drie attributen
wanneer hij iemand aanneemt:<br>
<i class="fa-solid fa-chevron-down"></i> Ten eerste is het vermogen om 'verliefd te worden op iets'.
Hij gelooft dat een passie voor iets een van de sleutels is tot succesvolle mensen.<br>
<i class="fa-solid fa-chevron-down"></i> Ten tweede is bereid zijn om een risico te nemen en fouten te maken, en dan "terug in het spel te
komen".<br>
Hoe iemand omgaat met falen is net zo belangrijk als hoe iemand met succes omgaat.<br><br>
<i class="fa-solid fa-chevron-down"></i> Ten derde is het vermogen om de wereld door de ogen van een kind te zien.
Dit wordt meestal gedemonstreerd door iemand die "echt ontvankelijk is voor brainstormen en
creativiteit."</h3>
</div>
<div class="row">
<div class="col-lg-6 col-sm-6 mb-6">
<!-- Portfolio item 1-->
<div class="portfolio-item">
<a class="portfolio-link" data-bs-toggle="modal" href="#portfolioModal1">
<div class="portfolio-hover">
<div class="portfolio-hover-content"><i class="fas fa-plus fa-3x"></i></div>
</div>
<img class="img-fluid ph_doos_c" src="assets/img/portfolio/philips-elektronica-doos.jpg"
alt="..." title="Philips Electronica Lab (C doos)" />
</a>
<div class="portfolio-caption">
<div class="portfolio-caption-heading">Nog een stukje levensverhaal</div>
<div class="portfolio-caption-subheading text-muted">Ik kijk terug op mooie jaren, waarin ik
veel heb gedaan met Elektronica. Technologische ontwikkelingen gaan snel. ‘Als er nieuwe
ontwikkelingen zijn, ben ik nieuwsgierig naar wat het nieuwe zo nieuw maakt. Wie weet
waar we over 10 jaar staan. Mogelijk hebben we dan eindelijk die chip in onze arm of in
ons hoofd.
Een korte inleiding waar ik vandaan kom.
</div>
</div>
</div>
</div>
<div class="col-lg-6 col-sm-6 mb-6">
<!-- Portfolio item 2-->
<div class="portfolio-item">
<a class="portfolio-link" data-bs-toggle="modal" href="#portfolioModal2">
<div class="portfolio-hover">
<div class="portfolio-hover-content"><i class="fas fa-plus fa-3x"></i></div>
</div>
<img class="img-fluid ph_doos_d" src="assets/img/portfolio/philips-elektronica-doos-d-2.jpg"
alt="..." title="Philips Electronica Lab (D doos)" />
</a>
<div class="portfolio-caption">
<div class="portfolio-caption-heading">Elektronica echt niet moeilijk.</div>
<div class="portfolio-caption-subheading text-muted">Kan je je dat voorstellen, geen
datasheets, geen forum, alleen op een eiland, eventueel met een boek van de Bib. Het is
best spannend om zelf een <a href="https://junioriot.nl/printplaat/" target="_blank"
rel="noopener">printplaat te maken</a>. Er moet geëtst worden met
Amoniumpersulfaat.</div>
</div>
</div>
</div>
</div>
<div class="spacer-vertical-50">
</div>
<div class="row">
<div class="col-lg-6 col-sm-6 mb-6">
<!-- Portfolio item 4 (3 en 4 zijn omgedraaid voor layout en volgorde)-->
<div class="portfolio-item">
<a class="portfolio-link" data-bs-toggle="modal" href="#portfolioModal4">
<div class="portfolio-hover">
<div class="portfolio-hover-content"><i class="fas fa-plus fa-3x"></i></div>
</div>
<img class="img-fluid raspberrypi_unlocked"
src="assets/img/portfolio/raspberry_pi_unlocked.png" alt="..." />
</a>
<div class="portfolio-caption">
<div class="portfolio-caption-heading">Raspberry Pi, Joy-Pi Project.</div>
<div class="portfolio-caption-subheading text-muted">Twee jaar geleden ben ik met de
raspberrypi begonnen. Evenals met de Python programmeertaal. In dit gedeelte wil ik u
vertellen wat deze singleboardcomputer is en kan. </div>
</div>
</div>
</div>
<div class="col-lg-6 col-sm-6 mb-6">
<!-- Portfolio item 3 (3 en 4 zijn omgedraaid voor layout en volgorde)-->
<div class="portfolio-item">
<a class="portfolio-link" data-bs-toggle="modal" href="#portfolioModal3">
<div class="portfolio-hover">
<div class="portfolio-hover-content"><i class="fas fa-plus fa-3x"></i></div>
</div>
<img class="img-fluid joypiproject" src="assets/img/portfolio/shopping.png" alt="..." />
</a>
<div class="portfolio-caption">
<div class="portfolio-caption-heading">REST API in Python met Flask.</div>
<div class="portfolio-caption-subheading text-muted">Het koffertje wat u hierboven ziet heb
aangeschaft om python te leren. In dit gedeelte leg ik u uit wat mijn project omhels. De
onderdelen waar ik gebruik van maak en het framewerk waar ik dit in heb geschreven.
</div>
</div>
</div>
</div>
</div>
<div class="spacer-vertical-50">
</div>
<div class="row">
<div class="col-lg-6 col-sm-6 mb-6">
<!-- Portfolio item 5-->
<div class="portfolio-item">
<a class="portfolio-link" data-bs-toggle="modal" href="#portfolioModal5">
<div class="portfolio-hover">
<div class="portfolio-hover-content"><i class="fas fa-plus fa-3x"></i></div>
</div>
<img class="img-fluid termostaat" src="assets/img/portfolio/thermostaat_NL.jpg" alt="..." />
</a>
<div class="portfolio-caption">
<div class="portfolio-caption-heading">Ontvangen en versturen van gegevens.</div>
<div class="portfolio-caption-subheading text-muted">Joy-Pi Project - Het Internet der
dingen. Mijn project heeft niet alleen een backend, maar ook een front-end om de data
uit mijn project weer te geven.</div>
<div class="portfolio-caption-subheading text-muted">(JavaScript Object Notation)</div>
</div>
</div>
</div>
<div class="col-lg-6 col-sm-6 mb-6">
<!-- Portfolio item 6-->
<div class="portfolio-item">
<a class="portfolio-link" data-bs-toggle="modal" href="#portfolioModal6">
<div class="portfolio-hover">
<div class="portfolio-hover-content"><i class="fas fa-plus fa-3x"></i></div>
</div>
<img class="img-fluid future_is_now" src="assets/img/future/FutureisnowIstockphoto.jpg"
alt="..." />
</a>
<div class="portfolio-caption">
<div class="portfolio-caption-heading">The Future is Now - The Things Network.</div>
<div class="portfolio-caption-subheading text-muted">Hoe ben ik hier gekomen en wat is de
rode draad in mijn reis tot nu toe. Ik kijk waar ik blij van wordt, wat ik leuk vindt en
waar mijn passie ligt.
</div>
</div>
</div>
</div>
<!-- Portfolio item modal Conclusion-->
<br>
<br>
</div>
</div>
<div class="spacer-vertical-100"></div>
<div class="container-fluid">
<div class="row">
<div class="col-lg-4 col-sm-6 mb-4">
</div>
<div class="col-lg-4 col-sm-6 mb-4">
<div class="text-center">
<!-- <div class="modal-content"> -->
<div class="portfolio-item">
<!-- test -->
<div class="" data-aos-duration="600" data-aos="fade-right" data-aos-delay="600">
<a class="portfolio-link" data-bs-toggle="modal" href="#portfolioModalConclusion">
<button class="button-52" role="button"><img class="img-fluid img-conclusion"
src="assets/img/final/conclusie.png" alt="..."
title="Flask Icon" /></button></a>
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6 mb-4">
</div>
<h2 class="section-heading text-uppercase"></h2>
<h3 class="section-subheading text-muted"></h3>
</div>
</div>
</div>
</section>
<!-- Team -->
<section class="page-section bg-secondary bg-opacity-10 " id="team">
<div class="container">
<div class="text-center">
<h2 class="section-heading text-uppercase">MIJN GEWELDIGE TEAM</h2>
<h3 class="section-subheading text-muted">Even voorstellen.</h3>
</div>
<div class="row">
<div class="col-lg-4">
<div class="" data-aos-duration="600" data-aos="fade-right" data-aos-delay="400">
<div class="team-member">
<img class="mx-auto rounded-circle" src="assets/img/team/r2d2.jpg" alt="..." />
<h4>R2D2 The SW Droid</h4>
<p class="text-muted">Lead Marketer</p>
<a class="btn btn-dark btn-social mx-2" href="#!"><i class="fab fa-twitter"></i></a>
<a class="btn btn-dark btn-social mx-2" href="https://www.facebook.com/R2D2.info"
target="_blank" rel="noopener"><i class="fab fa-facebook-f"></i></a>
<a class="btn btn-dark btn-social mx-2" href="https://www.r2d2.net/" target="_blank"
rel="noopener"><i class="fab fa-linkedin-in"></i></a>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="" data-aos-duration="600" data-aos="fade-down" data-aos-delay="400">
<div class="team-member">
<img class="mx-auto rounded-circle" data-aos-duration="600" data-aos="flip-down"
data-aos-delay="800" src="assets/img/team/anne.jpeg" alt="..." />
<h4>Anne W. Koster</h4>
<p class="text-muted">Lead Designer</p>
<a class="btn btn-dark btn-social mx-2" href="#!"><i class="fab fa-twitter"></i></a>
<a class="btn btn-dark btn-social mx-2" href="https://www.facebook.com/anne.w.koster"
target="_blank" rel="noopener"><i class="fab fa-facebook-f"></i></a>
<a class="btn btn-dark btn-social mx-2"
href="https://www.linkedin.com/in/anne-koster-b188578a/" target="_blank"
rel="noopener"><i class="fab fa-linkedin-in"></i></a>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="" data-aos-duration="600" data-aos="fade-left" data-aos-delay="400">
<div class="team-member">
<img class="mx-auto rounded-circle" src="assets/img/team/Marvin.png" alt="..." />
<h4>Marvin the paranoid Android</h4>
<p class="text-muted">Lead Developer</p>
<a class="btn btn-dark btn-social mx-2" href="#!"><i class="fab fa-twitter"></i></a>
<a class="btn btn-dark btn-social mx-2"
href="https://www.facebook.com/Marvin-The-Paranoid-Android-218320928196395/"
target="_blank" rel="noopener"><i class="fab fa-facebook-f"></i></a>
<a class="btn btn-dark btn-social mx-2" href="#!"><i class="fab fa-linkedin-in"></i></a>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-8 mx-auto text-center">
<p class="large text-muted">
Iedereen kent ze wel! De kleine R2-D2 heeft de oplossing voor alles en C-3PO is de komische
betweter.
<a class="" href="https://www.standaard.be/cnt/dmf20151214_02021478" target="_blank"
rel="noopener">Star Wars</a>. De moderne mythe over strijd tussen goede en kwade machten.
Over een simpele
sterveling die erachter komt dat hij voorbestemd is om Grote Daden te verrichten. Onderweg wordt
hij onderwezen door een wijze mentor, doorstaat beproevingen en transformeert tot held en
verlosser.<br><br>
Marvin, het personage uit de serie ‘Het Transgalactisch Liftershandboek’ (<a class=""
href="https://en.wikipedia.org/wiki/The_Hitchhiker%27s_Guide_to_the_Galaxy" target="_blank"
rel="noopener">The Hitchhiker's Guide
to the Galaxy</a>), bedacht door Douglas Adams. Marvin is een humanoïde robot die dient aan
boord
van het schip Heart of Gold. Hij was gebouwd als een prototype van Sirius Cybernetics
Corporations GPP (Genuine People Personalities) technologie.
</p>
<p class="text-muted">Nu begrijp u wellicht mijn fascinatie. </p>
</div>
</div>
</div>
</section>
<!-- Clients-->
<!-- <div class="py-5">
<div class="container">
<div class="row align-items-center">
<div class="col-md-3 col-sm-6 my-3">
<a target="_blank" rel="noopener" href="https://www.microsoft.com/en-us/about"><img
class="img-fluid img-brand mx-auto" src="assets/img/logos/microsoft.svg" alt="..." /></a>
</div>
<div class="col-md-3 col-sm-6 my-3">
<a target="_blank" rel="noopener"
href="https://about.google/?fg=1&utm_source=google-NL&utm_medium=referral&utm_campaign=hp-header"><img
class="img-fluid img-brand mx-auto" src="assets/img/logos/google.svg" alt="..." /></a>
</div>
<div class="col-md-3 col-sm-6 my-3">
<a target="_blank" rel="noopener"
href="https://about.meta.com/?utm_source=about.facebook.com&utm_medium=redirect"><img
class="img-fluid img-brand mx-auto" src="assets/img/logos/facebook.svg" alt="..." /></a>
</div>
<div class="col-md-3 col-sm-6 my-3">
<a target="_blank" rel="noopener" href="https://www.ibm.com/se-en/about"><img
class="img-fluid img-brand mx-auto" src="assets/img/logos/ibm.svg" alt="..." /></a>
</div>
</div>
</div>
</div> -->
<!-- Contact-->
<section class="page-section" id="contact">
<div class="container">
<div class="text-center">
<h2 class="section-heading text-uppercase">Neem contact met ons op</h2>
<h3 class="section-subheading text-light">Vul digitaal het contactformulier in. Wilt u fraude melden
via het contactformulier? Gebruik dan uw eigen naam en adresgegevens. Ik reageer binnen 24 uur.
En ik ga <a class="portfolio-link" data-bs-toggle="modal" href="#portfolioModal8">zorgvuldig met uw
gegevens</a> om.</h3>
</div>
<!-- * * * * * * * * * * * * * * *-->
<!-- * * Contact Form * *-->
<!-- * * * * * * * * * * * * * * *-->
<!-- This form is pre-integrated with SB Forms.-->
<!-- To make this form functional, sign up at-->
<!-- https://startbootstrap.com/solution/contact-forms-->
<!-- to get an API token!-->
<form id="contactForm" data-sb-form-api-token="API_TOKEN">
<div class="row align-items-stretch mb-5">
<div class="col-md-6">
<div class="form-group">
<!-- Name input-->
<input class="form-control" id="name" type="text" placeholder="Uw naam *"
data-sb-validations="required" />
<div class="invalid-feedback" data-sb-feedback="name:required">Een naam is vereist.</div>
</div>
<div class="form-group">
<!-- Email address input-->
<input class="form-control" id="email" type="email" placeholder="Uw email *"
data-sb-validations="required,email" />
<div class="invalid-feedback" data-sb-feedback="email:required">Een email is verplicht.
</div>
<div class="invalid-feedback" data-sb-feedback="email:email">E-mail is niet geldig.</div>
</div>
<div class="form-group mb-md-0">
<!-- Phone number input-->
<input class="form-control" id="phone" type="tel" placeholder="Uw telefoonnummer *"
data-sb-validations="required" />
<div class="invalid-feedback" data-sb-feedback="phone:required">Een telefoonnummer is
vereist.
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group form-group-textarea mb-md-0">
<!-- Message input-->
<textarea class="form-control" id="message" placeholder="Uw bericht *"
data-sb-validations="required"></textarea>
<div class="invalid-feedback" data-sb-feedback="message:required">Een bericht is vereist.
</div>
</div>
</div>
</div>
<!-- Submit success message-->
<!---->
<!-- This is what your users will see when the form-->
<!-- has successfully submitted-->
<div class="d-none" id="submitSuccessMessage">
<div class="text-center text-white mb-3">
<div class="fw-bolder">Form submission successful!</div>
<!-- To activate this form, sign up at -->
<br />
<!-- <a href="https://startbootstrap.com/solution/contact-forms">https://startbootstrap.com/solution/contact-forms</a> -->
</div>
</div>
<!-- Submit error message-->
<!---->
<!-- This is what your users will see when there is-->
<!-- an error submitting the form-->
<div class="d-none" id="submitErrorMessage">
<div class="text-center text-danger mb-3">Door een storing of onderhoudswerkzaamheden aan ons
netwerk kan het dat sommige diensten of producten tijdelijk niet werken! </div>
</div>
<!-- Submit Button-->
<div class="text-center"><button class="btn btn-primary btn-xl text-uppercase disabled"
id="submitButton" type="submit">Send Message</button></div>
</form>
</div>
</section>
<!-- Footer-->
<footer class="footer py-4">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-4 text-lg-start">Copyright © H.A.W.K. Domain 2022</div>
<div class="col-lg-4 my-3 my-lg-0">
<a class="btn btn-dark btn-social mx-2" href="#!"><i class="fab fa-twitter"></i></a>
<a class="btn btn-dark btn-social mx-2" href="#!"><i class="fab fa-facebook-f"></i></a>
<a class="btn btn-dark btn-social mx-2" href="#!"><i class="fab fa-linkedin-in"></i></a>
</div>
<div class="col-lg-4 text-lg-end">
<a class="link-dark text-decoration-none me-3" data-bs-toggle="modal"
href="#portfolioModal8">Privacy Policy</a>
<a class="link-dark text-decoration-none portfolio-link" data-bs-toggle="modal"
href="#portfolioModal7">Terms of Use</a><br>
<a class="link-dark text-decoration-none" href="#!">Built with 💖 by the H.A.W.K.Team</a>
</div>
</div>
</div>
</footer>
<!-- Portfolio Modals-->
<!-- Portfolio item 1 modal popup EXPLORE -->
<div class="portfolio-modal modal fade" id="portfolioModal1" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div href="#" class="position-fixed fixed-top floatong-close">
<div class="close-modal" data-bs-dismiss="modal">
<img src="assets/img/close-icon.svg" alt="Close modal" />
</div>
</div>
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-12">
<div class="modal-body">
<!-- Project details-->
<h2 class="text-uppercase">Explored</h2>
<p class="item-intro text-muted">"De wereld van morgen gaat er heel anders uitzien. U
gaat
meer elektronica in huis halen, uw thuisbioscoop groeit.
Er komen tv-kanalen die specifiek met één thema bezig zijn. Je kunt proberen een
kanaal
te maken met 24 uur sport”,
aldus Chriet.<br></p>
<a href="http://ee.old.no/abc/" target="_blank" rel="noopener">
<img class="ph_doos_c img-fluid d-block mx-auto"
title="De B6102 doos Als basis dient voor deze doos een schakelpaneel met daarin een regelbare weerstand, druk- en omschakelaar en een luidspreker. Als eindversterker wordt hier een complete schakeling op print gebruikt met als eindversterker IC de TBA820. Ook in deze doos vinden we eerst de bekende knipperlichten, in- en uitschakelvertragingen zonder dat daarbij elektronische schema's worden getekend. Deze schema's komen achter in het boek aan de orde na eerst een uitgebreide uitleg van de werking van de componenten. Deze doos bevat een handleiding samen met de C6103 doos."
src="assets/img/portfolio/philips-elektronica-doos.jpg"
alt="Philips Elektronica Expert Lab Expirimenteerdoos doos"
loading="lazy" /></a>
<p class="modal_2_text">Toen ik een jaar of zeven was keek ik vaak met mijn vader naar
<a href="https://nl.wikipedia.org/wiki/Wondere_Wereld" target="_blank"
rel="noopener">Wondere Wereld</a>, een programma van de TROS met
<a href="https://nl.wikipedia.org/wiki/Chriet_Titulaer" target="_blank"
rel="noopener">Chriet Titulaer</a>,
die nieuws bracht op het gebied van wetenschap en technologie. In dit programma liet
Titulaer de kijkers ook
kennismaken met allerlei nieuwe technologieën, zoals ISDN, DAT en RDS en bijzondere
uitvindingen, zoals papieren
batterijen, blindengeleiderobots en traangashorloges.<br>
</p>
<img class="chriet img-fluid d-block mx-auto"
src="assets/img/portfolio/Chriet_Titulaer.webp"
alt="'Welkom in de Wondere Wereld': Chriet Titulaer" loading="lazy"
title="Chriet Titulaer" />
<p class="modal_2_text">Eind jaren tachtig lanceerde Chriet Titulaer in het <a
target="_blank" rel="noopener" href="https://www.autotron.nl/">Autotron in
Rosmalen</a> het Huis van de
Toekomst.
Hier werd geëtaleerd hoe de techniek de woonhuizen in de toekomst kon veranderen.
Het
huis was voorzien
van allerlei wetenschappelijke nieuwigheden. Zo had het bijvoorbeeld een centraal
stofzuigersysteem,
zonnecellen en stemherkenning. Later lanceerde Titulaer ook nog het Kantoor van de
Toekomst en Ziekenhuis van de Toekomst.
In 1986 ging ik zo met mijn ouders naar <a
href="https://nl.wikipedia.org/wiki/Space_%2786" target="_blank"
rel="noopener">ruimtevaartmanifestatie Space ’86</a> in de
Jaarbeurs te Utrecht, welke Chriet organiseerde. <br><br></p>
<a href="https://nl.wikipedia.org/wiki/Firato" target="_blank" rel="noopener">
<img class="firato img-fluid d-block mx-auto"
src="assets/img/portfolio/firato_84.jpg" alt="Firato 1984 RAI Amsterdam"
title="Firato 1984 RAI Amsterdam" loading="lazy" />
</a>
<p class="modal_2_text">Zo ook ging ik met mijn ouders naar de <a
href="https://nl.wikipedia.org/wiki/Firato" target="_blank"
rel="noopener">Firato</a>. De Firato was een
Nederlandse,
tweejaarlijkse tentoonstelling
voornamelijk gericht op audio- en videoapparatuur. Een bekende primeur was de
introductie van de kleurentelevisie
in 1967. Andere primeurs op de Firato waren de compact cassette, compact disc en
Teletekst en de nimmer succesvolle quadrafonie. <br><br></p>
<img class="flexdisk img-fluid d-block mx-auto"
src="assets/img/portfolio/Vinyl_Flexidisc.jfif"
alt="Vinyl Flexidisc 33 1/3 RPM, Single sided"
title="Vinyl Flexidisc 33 1/3 RPM, Single sided" loading="lazy" />
<p class="modal_2_text">Zoals je in het sectie gedeelte ‘About’ kunt lezen heb ik in die
tijd veel met elektronica gespeeld. Een van de dingen die ik met mijn dozen kon
bouwen
was een <a href="/assets/img/portfolio/UKG_radio_schema.jpg" target="_blank"
rel="noopener">UKG ontvanger</a>. Ook bouwde ik vaak een platenspeler met de
singeltjes van Reader’s digest flexibele 7 inch luisterproef Vinyl Flexidisc 33 1/3
RPM, Single sided. Dit zoort reclame zie je tegenwoordig niet meer.</p>
<h3 class="my-3">Philips Experimenteerdozen</h3>
<p class="modal_2_text">
Philips heeft een groot aantal <a href="http://ee.old.no" target="_blank"
rel="noopener">experimenten dozen</a> geproduceerd vanaf 1963 t/m 1985.
De EE dozen 20XX werden vanaf 1974 t/m 1985 geproduceerd en na 1985 door <a
href="https://rigert.com/ee-wiki/index.php?title=Schuco_6203_C-D"
target="_blank" rel="noopener">Schuco</a>.
Philips bracht in 1974 een nieuwe serie op de markt de EE2000 serie die volgde op de
populaire EE1000 serie. Het was veel moderner, niet in de zin van de techniek, want
die was voor het grote gedeelte overgenomen van de oude serie, maar wel het design.
Voornamelijk de <a href="http://www.sjelab.nl/dozen.htm" target="_blank"
rel="noopener">blauw plastic montage platen en schakelpaneel</a>. De serie werd
2 jaar
later uitgebreid met de EE2010 serie, die wel een modernere ic-techniek had. Dit is
wel de meest populaire serie geweest die ooit verkocht was tot 1983 en werd
opgevolgd door de ABCD serie.
De serie kon heel eenvoudig gestart worden met de EE2040 (groen), iets uitgebreider
EE2050 (rood), en voor de echte grote starters de EE2003 (licht blauw) die weer
gelijk was aan de 2050,51 en 52 dozen.
Na deze uitbreiding kon ver gegaan worden in de richting van de<a
href="https://www.brennecke.org/?page_id=1079" target="_blank" rel="noopener">
oscilloscoop / TV </a>
dozen EE2007/08 of 2004/05/06 die voornamelijk <a
href="https://www.brennecke.org/?page_id=1431" target="_blank"
rel="noopener">audio en radiotechniek</a> behandelden.
</p>
<!-- <div class="container-fluid"> -->
<p>
<div class="row">
<div class="col-lg-6 col-sm-auto ">
<p class="item-intro text-muted container-fluid">
Firato 1988: Chriet Titulaer - Van Edison tot CD Video 26-08-1988
Met oa de fonograaf, CD-Video (Beeldplaat) Compact Disc, huis van de
toekomst, het Nederlands omroepmuseum, glasvezel, achter de schermen bij
NOB, D2MAC TV, Eurocrypt, HD tv, LCD tv's, TROS Radio.
</p>
<iframe width="448" height="252" src="https://www.youtube.com/embed/lE_hokr_TdE"
title="YouTube video player" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen>
</iframe>
</div>
<div class="col-lg-6 col-sm-auto ">
<p class="item-intro text-muted container-fluid">
Teleac Moderne Elektronica 1976 -Les2b Experimenteerdoos
Uitleg over de Philips Experimenteerkit
<br>
Teleac (Televisie Academie) was een Nederlandse
educatieve omroep die bestond van 1963 tot ze in 2010 opging in de NTR.
</p>
<iframe width="448" height="252" src="https://www.youtube.com/embed/kYva_88iT9c"
title="YouTube video player" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen>
</iframe>
</div>
</div>
</p>
<br>
<!-- </div> -->
<ul class="list-inline">
<li>
<strong>Project:</strong>
Explore
</li>
<li>
<strong>Category:</strong>
Electrical Design
</li>
</ul>
<button class="btn btn-primary btn-xl text-uppercase" data-bs-dismiss="modal"
type="button">
<i class="fas fa-times me-1"></i>
Close Project
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Portfolio item 2 modal popup ELECTRONICS DESIGN -->
<div class="portfolio-modal modal fade" id="portfolioModal2" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div href="#" class="position-fixed fixed-top floatong-close">
<div class="close-modal" data-bs-dismiss="modal"><img src="assets/img/close-icon.svg"
alt="Close modal" /></div>
</div>
<div class="container">
<div class="row justify-content-around align-items-stretch">
<div class="col-lg-12">
<div class="modal-body">
<!-- Project details-->
<h2 class="text-uppercase">Electronics Design</h2>
<p class="item-intro text-muted">
</p>
<p class="item-intro text-muted ">In de fabricage van elektronica behoort
solderen tot de
elektrische verbindingstechnieken
en wordt het daar het meest gebruikt. Om zo goed mogelijk uitgerust te zijn voor het
solderen, is het belangrijk deze soldeertechniek goed te beheersen.
Moderne soldeertechnologie zorgt voor een duurzame verbinding van metalen
onderdelen, die tot stand wordt gebracht
door een metaallegering (gesmolten soldeer). Bij soldeertechnologie wordt een
onderscheid gemaakt tussen zacht
solderen (450°C), hard solderen (450°C - 900°C) en solderen bij hoge temperatuur
(900°C).
Zacht solderen is bijzonder belangrijk voor de fabricage van elektronica, omdat de
componenten zeer gevoelig zijn en niet te veel mogen worden verhit. Een geleidende
verbinding van geleidende delen wordt
vervaardigd met behulp van het gesmolten soldeer;
de metalen worden daarbij niet gesmolten. Om een vlekkeloos soldeerproces te kunnen
garanderen, zelfs van de kleinste <a
href="https://nl.wikipedia.org/wiki/Surface-mounted_device" target="_blank"
rel="noopener">SMD-componenten</a>,
zijn de nodige oefening en hoogwaardige apparatuur vereist.</p>
<div class="row">
<div class="col-lg-6 col-sm-6 mb-4">
<img class="img-fluid d-block mx-auto modal_2"
src="assets/img/portfolio/img_velleman_le_front.png"
alt="Een Morse Code Vertaler (Vooraangezicht)"
title="Een Morse Code Vertaler (Vooraangezicht)" loading="lazy" />
</div>
<div class="col-lg-6 col-sm-6 mb-4">
<img class="img-fluid d-block mx-auto modal_2"
src="assets/img/portfolio/img_velleman_le_soldersite.png"
alt="Een Morse Code Vertaler (Achteraangezicht)"
title="Een Morse Code Vertaler (Achteraangezicht)" loading="lazy" />
</div>
</div>
<p class="modal_2_text"> Je verdiepen in de wereld van Elektronica? Ontdek dan Velleman.
Met Velleman producten bouw je toffe elektronicaprojecten voor hobbyisten of zoals
we ze nu beter kennen:
Makers. Het ontwikkelen van deze elektronicaprojecten is al meer dan 20 jaar de
hoofdactiviteit
van <a href="https://www.velleman.eu/products/list/?id=456088" target="_blank"
rel="noopener"> Velleman</a>. Een succesverhaal voor jong en oud.</p>
<p class="modal_2_text">
Hierboven zie een van de welbekende Velleman pakketjes. Een <a
href="https://nl.wikipedia.org/wiki/Morse" target="_blank" rel="noopener">Morse
Code Vertaler</a>.
De code die ik via radio ontving, verscheen als leesbare tekst op het scherm.
Je kon deze bij de lokale elektronicawinkel kopen.
Dan was het zaak de handleiding goed te lezen en zorgen dat je een beetje netjes
soldeert.
Dat laatste kon soms een hele uitdaging zijn. De soldeer gaatjes zaten soms dicht
bij elkaar.
Ook heden ten dage maakt Velleman nog steeds soldeerkits voor kinderen.
</p>
<p class="modal_2_text">
Morse is een communicatiecode, bestaande uit met tussenpozen uitgezonden signalen,
die letters, leestekens
en cijfers vertegenwoordigen. De code werd in 1835 uitgevonden en ontwikkeld door
Samuel Morse met het
doel deze te gebruiken voor de
<a href="https://historiek.net/guglielmo-marconi-uitvinder-van-de-draadloze-telegrafie/42180/"
target="_blank" rel="noopener">telegrafie</a>.<br>
</p>
<div class="row">
<div class="col-lg-6 col-sm-6 mb-4">
<img class="img-fluid d-block mx-auto modal_2"
src="assets/img/portfolio/IMG_20230308_143951.jpg"
alt="Marcony Morse Sleutel" title="Marcony Morse Sleutel" loading="lazy" />
</div>
<div class="col-lg-6 col-sm-6 mb-4">
<img class="img-fluid d-block mx-auto modal_2"
src="assets/img/portfolio/L-Telegraph1.png" alt="Morse sleutel"
title="Morse Sleutel" loading="lazy" />
</div>
</div>
<p class="item-intro text-muted modal_2_text">
<i class="fas fa-star"></i> Een seinsleutel is een elektromechanisch toestel om
elektrische pulsen te maken, normaliter voor morsecode. Het is een onderdeel van de
communicatie per telegrafie.
</p>
<div class="row text-center">
<div class="col-md-6">
<img class="img-fluid d-block mx-auto modal_2"
src="assets/img/portfolio/MorseGetal-fill-344x52.jpg" alt="telegram"
title="Teleghram" loading="lazy" />
<p class="item-intro text-muted modal_2_text">
<i class="fas fa-star"></i> Het getal 1 4 3 7 in de eerste versie Morse.
</p>
<p class="text-start modal_2_text">
Een <a
href="https://www.telecomerfgoed.nl/telecomcanon/index.php/vensters/5-hier-alles-goed-stop"
target="_blank" rel="noopener">telegram</a> is een geschreven bericht
dat over een openbaar telecommunicatienetwerk
wordt verstuurd.
Aanvankelijk was dat per telegraaf (verreschrijver), maar naarmate de
techniek
vorderde ook per <a
href="https://nl.wikipedia.org/wiki/Telex_(communicatie)"
target="_blank" rel="noopener">telex</a>,
of ander geschikt telecommunicatiemiddel.
</p>
</div>
<div class="col-md-6">
<img class="img-fluid d-block mx-auto modal_2"
src="assets/img/portfolio/800px-Welling,_R_telegram.jpg" alt="telegram"
title="Teleghram" loading="lazy" />
</div>
</div>
<h6 class="text-uppercase">DECODERS</h6>
<p class="modal_2_text">
Feitelijk werkt het in de elektronica niet anders. Hier nog een paar projectjes waar
ik mij in mijn
pubertijd mee bezig hield.<br>
Pay-tv-programma`s worden veelal op mechanische manier uitgezonden. Opgeroepen
klanken, geluiden of lichtimpulsen
die een gecodeerde boodschap kunnen overdragen.
Gecodeerde pay-tv-programma`s worden veelal op deze manier uitgezonden, zodat alleen
abonnees naar dit signaal
kunnen kijken. In de decoders zal een decodeersleutel aangebracht moeten worden, om
beeld en-of geluid te verkrijgen
</p>
<div class="row">
<div class="col-lg-6 col-sm-6 mb-4">
<img class="img-fluid d-block mx-auto modal_2"
src="assets/img/portfolio/film_canaal_front.png"
alt="Kanaal+ decoder composite 480 beeldlijnen (Pay-tv-programma) Vooraangezicht"
title="Kanaal+ decoder composite 480 beeldlijnen (Pay-tv-programma) Vooraangezicht"
loading="lazy" />
</div>
<div class="col-lg-6 col-sm-6 mb-4">
<img class="img-fluid d-block mx-auto modal_2"
src="assets/img/portfolio/film_canaal_soldersite.png"
alt="Kanaal+ decoder composite 480 beeldlijnen (Pay-tv-programma) Achteraangezicht"
title="Kanaal+ decoder composite 480 beeldlijnen (Pay-tv-programma) Achteraangezicht"
loading="lazy" />
</div>
</div>
<h6 class="text-uppercase">DESCRAMBLER</h6>
<p class="modal_2_text">
Schakeling om gecodeerde tv-programma`s aan de ontvangerkant weer te kunnen
decoderen.
Dit zijn veelal schakelingen om de programma-aanbieders het mogelijk te maken, om
kijkgelden voor de geleverde
programma`s te kunnen innen.
</p>
<div class="row">
<div class="col-lg-6 col-sm-6 mb-4">
<div class="img-tooltip"
data-title="Kanaal+ decoder SCART 520 beeldlijnen (Pay-tv-programma) Vooraangezicht">
<img class="img-fluid d-block mx-auto modal_2 "
src="assets/img/portfolio/film_kanaal_scart_front.png"
alt="Kanaal+ decoder SCART 520 beeldlijnen (Pay-tv-programma) Vooraangezicht"
title="Kanaal+ decoder SCART 520 beeldlijnen (Pay-tv-programma) Vooraangezicht"
loading="lazy" />
</div>
</div>
<div class="col-lg-6 col-sm-6 mb-4">
<div class="img-tooltip"
data-title="Kanaal+ decoder SCART 520 beeldlijnen (Pay-tv-programma) Achteraangezicht">
<img class="img-fluid d-block mx-auto modal_2 "
src="assets/img/portfolio/film_canaal_scart_solderside.png"
alt="Kanaal+ decoder SCART 520 beeldlijnen (Pay-tv-programma) Achteraangezicht"
title="Kanaal+ decoder SCART 520 beeldlijnen (Pay-tv-programma) Achteraangezicht"
loading="lazy" />
</div>
</div>
</div>
<h6 class="text-uppercase">Radio Amateurisme</h6>
<p class="modal_2_text">
Al erg vroeg was ik geïnteresseerd in radio. Door mijn Philip’s dozen kon ik er zelf
eentje maken. Maar ook een FM zender was in mijn pubertijd een dingetje. Plaatjes
draaien op ons eigen radiokanaal; Radio Black Horse. Later werd dit meer individueel
en ging ik de citizen Band (CB band) op.<br><br>
Als radiozendamateur bent je bij bepaalde frequentiebanden secundair gebruiker. Dit
betekent dat anderen voorgaan (primaire gebruikers) en u deze gebruikers niet mag
storen. Vaak zijn deze gebruikers omroepen die tijdens een evenement aan het filmen
zijn. Luister daarom goed uit voordat u gaat zenden. Hieronder vindt u een overzicht
van geplande evenementen. Dit helpt bij het controleren of u geen primaire gebruiker
stoort.<br>
Bij ministeriële regeling kunnen categorieën radioapparaten worden aangewezen ten
aanzien waarvan voor het gebruik van frequentieruimte, behoudens een meldingsplicht,
geen vergunning is vereist.<br>
</p>
<!-- <p>https://wiki.radioreference.com/index.php/DV1</p>
<p>https://www.sigidwiki.com/wiki/Category:Amateur_Radio</p> -->
<div class="spacer-vertical-50"></div>
<!-- ############################## -->
<!-- The grid: four columns -->
<!-- <div class="row"> -->
<!-- <div class="col-lg-3 col-sm-3 mb-3"> -->
<div class="row-radio">
<div class="column-radio">
<img src="/assets/img/radio/president_jackson.jpg" class="img-fluid"
id="/assets/img/radio/jackson.html"
alt="President Jackson Transceiver CB Mobile, AM/FM/SSB"
onclick="myFunction(this);" />
</div>
<!-- </div> -->
<!-- </div> -->
<!-- <div class="col-lg-3 col-sm-3 mb-3"> -->
<div class="column-radio">
<img src="/assets/img/radio/president_lincoln.gif" class="img-fluid"
id="/assets/img/radio/lincoln.html"
alt="President Lincoln MK1 12W AM, 28W FM, 35W LSB/USB, 12W CW"
onclick="myFunction(this);" />
</div>
<!-- </div> -->
<!-- <div class="col-lg-3 col-sm-3 mb-3"> -->
<div class="column-radio">
<img src="/assets/img/radio/tm_d700ae.gif" class="img-fluid"
id="/assets/img/radio/kenwood.html"
alt="Kenwood TM-D700E VHF/UHF Mobile FM Transceiver with TNC"
onclick="myFunction(this);" />
</div>
<!-- </div> -->
<!-- <div class="col-lg-3 col-sm-3 mb-3"> -->
<div class="column-radio">
<img src="/assets/img/radio/diamond-sx400.jpg" class="img-fluid"
id="/assets/img/radio/diamond-swr.html"
alt="Diamond SX-400 PL Swr / Power meter 140 - 525 Mhz"
onclick="myFunction(this);" />
</div>
<!-- </div> -->
</div>
<!-- ######################## -->
<p class="item-intro text-muted modal_2_text">
<i class="fas fa-star"></i> Hoover en klik de voorbeelden voor een uitleg.
</p>
<!-- The expanding image container -->
<div class="container-radio">
<div class="spacer-vertical-25"></div>
<!-- Image text -->
<h5 class="text-uppercase ">
<div id="imgtext"></div>
</h5>
<div class="spacer-vertical-25"></div>
<!-- Close the image -->
<span onclick="this.parentElement.style.display='none'"
class="closebtn">×</span>
<!-- Expanded image -->
<img src="/assets/img/radio/president_jackson.jpg" alt="picture" id="expandedImg"
style="width:50%" class="img-fluid" loading="lazy">
<iframe src="/assets/img/radio/jackson.html" title="beschijving" id="frText"
width="200%" height="800" scrolling="no" border-style="none"></iframe>
</div>
</div>
<div class="spacer-vertical-100"></div>
<!-- ######################## -->
<p class="item-intro text-muted modal_2_text">
<i class="fas fa-star"></i> Deze oude trainingsfilms zijn zo goed uitgelegd dat iedereen
ze zou kunnen begrijpen..
</p>
<div class="row">
<div class="col-lg-6 col-sm-auto ">
<!-- HAM - Official Documentary (2022) -->
<iframe width="560" height="315" src="https://www.youtube.com/embed/wt5wZhC5crI"
title="YouTube video player" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen></iframe>
</div>
<div class="col-lg-6 col-sm-auto ">
<!-- BASIC PRINCIPLES OF FREQUENCY MODULATION -->
<iframe width="560" height="315" src="https://www.youtube.com/embed/AzvxefRDT84"
title="YouTube video player" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen></iframe>
</div>
</div>
<div class="spacer-vertical-100"></div>
<!-- ######################## -->
<ul class="list-inline">
<li>
<strong>Project:</strong>
Explore
</li>
<li>
<strong>Category:</strong>
Electrical Design
</li>
</ul>
<button class="btn btn-primary btn-xl text-uppercase" data-bs-dismiss="modal" type="button">
<i class="fas fa-times me-1"></i>
Close Project
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Portfolio item 3 modal popup REST API IN PHTYTON MET FLASK (In the view 3 and 4 are switched around) -->
<div class="portfolio-modal modal fade" id="portfolioModal3" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div href="#" class="position-fixed fixed-top floatong-close">
<div class="close-modal" data-bs-dismiss="modal"><img src="assets/img/close-icon.svg"
alt="Close modal" />
</div>
</div>
<div class="container">
<!-- <div class="row justify-content-center"> -->
<!-- <div class="col-lg-8"> -->
<div class="modal-body">
<!-- Project details-->
<h2 class="text-uppercase justify-content-center">Rest API in Python met FLASK</h2>
<p class="item-intro text-muted">
</p>
<div class="">
<h5 class="item-intro text-muted"><i>De JoyPi experimentele koffer gebaseerd op de Raspberry
Pi 3B/3B+/4B</i></h5>
<p></p>
<!-- <div class="col-md-10" data-aos-duration="600" data-aos="fade-down" data-aos-delay="300"> -->
<div class="row text-center">
<div class="col-md-2">
</div>
<div class="col-md-8">
<a class="" href="https://joy-it.net/en/products/RB-JoyPi" target="_blank"
rel="noopener">
<img class="img-fluid joypiproject" src="assets/img/portfolio/shopping.png"
alt="The Joy-Pi is an experimental case based on the Raspberry Pi 3B/3B+/4B"
title="The Joy-Pi is an experimental case based on the Raspberry Pi 3B/3B+/4B" />
</a>
</div>
<div class="col-md-2">
</div>
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="col-lg-12">
<div class="modal-body">
<!-- <div class="img-fluid modal-body modal-xl"> -->
<div class="modal_2_text">
<p> Het Internet of Things (vaak afgekort tot IoT) is een belangrijke
ontwikkeling in de informatietechnologie.
IoT is bedacht omdat het gaat om het aansluiten van apparaten die
zelfstandig data verzamelen via
sensoren of acties uitvoeren met <a class=""
href="https://nl.wikipedia.org/wiki/Actuator">actuatoren</a>.
</p>
<p> De verwarming een paar graden warmer of kouder zetten? De lichten in
huis aansturen of de
luchtvochtigheid meten? Al deze taken én meer kunnen worden uitgevoerd
door een Raspberry Pi.
De meest populaire en gangbare programmeertaal voor de Raspberry Pi is
<a target="_blank" rel="noopener" href="https://www.python.org/">Python.</a>
Dit is een programmeertaal die gemakkelijk te gebruiken, gemakkelijk te
lezen en te schrijven is,
en met Raspberry Pi kun je je project verbinden met de echte wereld.
</p>
<div class="row text-center">
<div class="col-md-4">
<img class="img-fluid joypiproject"
src="/assets/img/portfolio/joypi_keyboard_1.jpg"
alt="This wireless mini keyboard with german key layout has a wireless range of up to 10 meters at a transmitting power of maximum +5 dB."
title="This wireless mini keyboard with german key layout has a wireless range of up to 10 meters at a transmitting power of maximum +5 dB." />
</div>
<div class="col-md-4">
<img class="img-fluid joypiproject"
src="/assets/img/portfolio/RB-JoyPi-5g.png" alt="closed joy-pi case"
title="closed joy-pi case" />
</a>
</div>
<div class="col-md-4">
<img class="img-fluid joypiproject"
src="/assets/img/portfolio/joypi_contents_1.jpg"
alt="Sensoren: GPIO LED-indicator, breadboard, LCD-module, stroomkring, matrix-LED, segment-LED, trillingseenheid, lichtsensor, buzzer, geluidssensor, bewegingssensor, ultrasoonsensor, servo-interface, stappenmotor, hellingssensor, infraroodsensor, aanraaksensor, DH11-sensor, relais, matrixknoppen, onafhankelijke knoppen, RFID-module, schakelaar"
title="Sensoren: GPIO LED-indicator, breadboard, LCD-module, stroomkring, matrix-LED, segment-LED, trillingseenheid, lichtsensor, buzzer, geluidssensor, bewegingssensor, ultrasoonsensor, servo-interface, stappenmotor, hellingssensor, infraroodsensor, aanraaksensor, DH11-sensor, relais, matrixknoppen, onafhankelijke knoppen, RFID-module, schakelaar" />
</div>
</div>
<p>
Het koffertje wat u hierboven ziet heb aangeschaft om python te leren. Er zitten
verschillende componenten in. De Joy-Pi is een experimentele koffer gebaseerd op
de Raspberry Pi 3B/3B+/4B en is ideaal voor de instap in elektrotechniek en
programmeren. Het uitgekiende koffersysteem biedt een perfecte
alles-in-één-omgeving en maakt een einde aan vele onhandige oplossingen voor
kleine onderdelen en kabelchaos op de werktafel. Met het in het deksel een
geïntegreerde 7-inch touchscreen met een resolutie van: 1024x600 pixels. Verder
een lichtsensor, geluidssensor, bewegingssensor, ultrasone sensor, kantelsensor,
infraroodsensor, aanraaksensor, DH11 temperatuur- en vochtigheidssensor en een
RFID-module. Daarnaast een 16x2 LCD-display, 8x8 LED-matrix, 4-cijferig segment
display, programmeerbare matrix met 4x4 knoppen (16), 4 onafhankelijke knoppen,
16 schakelaars, Servobesturing, servomotor, stappenmotor, GPIO LED-indicator,
breadboard, trileenheid, zoemer, relais en een 2MP-camera.
</p>
<div class="row text-center">
<!-- <div class="col-md-3">
</div> -->
<div class="col-md-6">
<img class="img-fluid joypiproject"
src="/assets/img/portfolio/RB-JoyPi-7g.png"
alt="The Joy-Pi is an experimental case based on the Raspberry Pi 3B/3B+/4B"
title="The Joy-Pi is an experimental case based on the Raspberry Pi 3B/3B+/4B" /><br>
</a>
</div>
<div class="col-md-6">
<img class="img-fluid joypiproject"
src="/assets/img/portfolio/JoyPi-Expansion-1.png"
alt="Joy-Pi Addon expansion set"
title="The Joy-Pi Addon expansion set offers you the possibility to use your own projects with additional sensors and actuators with the Joy-Pi experimental suitcase. " /><br>
</div>
</div>
<p>
REST staat clients toe om code te downloaden en uitvoeren in de vorm van
applets of scripts.
Dit vereenvoudigt clients door het aantal features dat geïmplementeerd
moet worden
terug te brengen.
Op deze pagina neem ik u mee door mijn code. <br> We beginnen daarom bij
<a class="" target="_blank" rel="noopener"
href="https://flask.palletsprojects.com/en/2.2.x/">de
FLASK</a>
app in dit verhaal.<br>
</p>
<p>Flask is een micro-webframework geschreven in Python. Het is
geclassificeerd
als een microframework omdat het geen specifieke tools of bibliotheken
vereist.
Flask is een lichtgewicht <a target="_blank" rel="noopener"
href="http://https://wsgi.readthedocs.io/en/latest/">WSGI-</a>webapplicatieframework.
Het is ontworpen om
snel en eenvoudig aan de slag te gaan, met de mogelijkheid om op te schalen
naar complexe applicaties. Het begon als een eenvoudige verpakking rond
Werkzeug en Jinja en is uitgegroeid tot een van de meest populaire
Python-webapplicatieframeworks.
Flask biedt suggesties, maar dwingt geen afhankelijkheden of projectlay-out
af. Het is aan de ontwikkelaar om de tools en bibliotheken te kiezen die ze
willen gebruiken. Er zijn veel extensies geleverd door de community die het
toevoegen van nieuwe functionaliteit eenvoudig maken.
</p>
<a class="" target="_blank" rel="noopener"
href="https://flask.palletsprojects.com/en/2.2.x/">
<img class="img-fluid joypiproject" src="/assets/img/portfolio/flask-logo.webp"
alt="Flask-logo"
title="Flask provides configuration and conventions, with sensible defaults, to get started. " /></a><br>
<p>
Op de Joy-Pi heb ik een FLASK app onder Python gebouwd. Met verschillende
beschikbare adafruit code stuur ik van daaruit verschillende componenten aan of
lees ze uit. Natuurlijk gaat dit allemaal over het netwerk. Het geheel (lees ook
het volgende hoofdstuk) draait dus geheel via het netwerk.
</p>
<div class="item-intro text-muted alert-secondary alert-link">
<details>
<summary>Klik hier voor mijn FLASK code
</summary>
<!-- https://github.com/lonekorean/gist-syntax-themes -->
<div class="git">
<script
src="https://gist.github.com/annekoster/100c4e64ad7fae6f404667e393f31b2d.js"></script>
</div>
</details>
</div>
<br>
<p><a target="_blank" rel="noopener" href="https://www.adafruit.com/">Adafruit
Industries</a> is een Amerikaans <a target="_blank" rel="noopener"
href="https://nl.wikipedia.org/wiki/Open_source">opensource</a>
hardwarebedrijf opgericht
door <a target="_blank" rel="noopener"
href="https://www.linkedin.com/in/ladyada/">Limor Fried</a> in 2005.
Adafruit is, naar eigen zeggen, 100% in het bezit van vrouwen. Het
bedrijf heeft meer dan 50 medewerkers
en ontwerpt en produceert een aantal elektronische producten, en
verkoopt elektronische componenten,
gereedschappen en toebehoren. Tevens produceert Adafruit een aantal
leermiddelen, waaronder geschreven
tutorials, inleidende video's en de langstlopende live video-elektronica
show die te
zien is op het internet
</p>
<p>Als je een sensor, display of led module aansluit op een Raspberry Pi dan
zal je voor het aansturen ervan
in de meeste gevallen gebruik maken van een Python script. Wanneer het
om een simpele schakeling gaat zoals
bijvoorbeeld het in- en uitschakelen van een LED dan kun je ook gebruik
maken van het <a target="_blank" rel="noopener"
href="https://nl.wikipedia.org/wiki/Bash">Bash</a> shell commando
‘gpio'.
(General Purpose Input / Output)
</p>
<div class="item-intro text-muted alert-secondary alert-link">
<details>
<summary>Klik hier voor mijn module code lopend in BOARD modus ( De
daadwerkelijke pinout )
</summary>
<div class="git">
<script
src="https://gist.github.com/annekoster/ee083a277e855ec2c09052da0dc3475d.js"></script>
</div>
</details>
</div>
<br>
<p>Broadcom heeft de eerste system-on-a-chip op basis van <a target="_blank"
rel="noopener"
href="https://nl.wikipedia.org/wiki/Data_Over_Cable_Service_Interface_Specification">Docsis
3.1</a>
aangekondigd.
De Broadcom SoC (System On Chip) heeft ook wifi en Bluetooth 4.2 aan
boord.
Ook presenteert de fabrikant een referentieontwerp voor een model op
basis van de standaard, die
verder van ondersteuning voor wifi is voorzien.
</p>
<div class="item-intro text-muted alert-secondary alert-link">
<details>
<summary>Klik hier voor mijn module code lopend in BCM modus (
“Broadcom SOC-kanaal” )</summary>
<div class="git">
<script
src="https://gist.github.com/annekoster/274b49b57b75bcca252723c8eb3e976b.js"></script>
</div>
</details>
</div>
<br>
<p>De seriële RS-232-interface kan wel als de
‘moeder van alle interfaces’ beschouwd worden. Dit communicatieprotocol
bestaat al sinds
de begintijd van computers en het Internet en, gelukkig, is het ook
beschikbaar op de Raspberry Pi.
De seriële UART (Universal Asynchronous Receiver/Transmitter) is één van
de drie seriële interfaces op
de uitbreidingsconnector van de Raspberry Pi. De andere twee zijn een
I2Cinterface en een SPI-interface.
</p>
<div class="item-intro text-muted alert-secondary alert-link">
<details>
<summary>Klik hier voor mijn module code lopend in serieele modus
(RS232 / UART / SPI / I2C) </summary>
<div class="git">
<script
src="https://gist.github.com/annekoster/10a832d8ae30171da0efd77e10902d78.js"></script>
</div>
</details>
</div>
<div class="spacer-vertical-100"></div>
<div class="row text-center">
<div class="col-md-3">
<img class="img-fluid joypiproject" src="/assets/img/portfolio/rs232_1.jpg"
alt="serieele kabel (RS-232)" title="serieele kabel (RS-232)" /><br>
</div>
<div class="col-md-3">
<img class="img-fluid joypiproject" src="/assets/img/portfolio/rs232_2.jpg"
alt="DB9 RS232 Naar Stereo 3.5Mm Aux Seriële Kabel Voor Samsung Ex Link Tv Service Poort "
title="DB9 RS232 Naar Stereo 3.5Mm Aux Seriële Kabel Voor Samsung Ex Link Tv Service Poort " /><br>
</a>
</div>
<div class="col-md-6">
<img class="img-fluid joypiproject"
src="/assets/img/portfolio/rs232_3_hub.png"
alt="ST ICUSB23216FD Adapter hub 16-poorts USB naar serieel"
title="ST ICUSB23216FD Adapter hub 16-poorts USB naar serieel" /><br>
</div>
<p class="item-intro text-muted modal_2_text">
<i class="fas fa-star"></i> Voorbeelden van de RS-232-interface.
</p>
</div>
</div>
</div>
<ul class="list-inline">
<li>
<strong>Project:</strong>
Modification and finishing
</li>
<li>
<strong>Category:</strong>
Hardware modding
</li>
</ul>
<button class="btn btn-primary btn-xl text-uppercase" data-bs-dismiss="modal" type="button">
<i class="fas fa-times me-1"></i>
Close Project
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Portfolio item 4 modal popup RASPBERRY PI (In the view 3 and 4 are switched around) -->
<div class="portfolio-modal modal fade" id="portfolioModal4" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div href="#" class="position-fixed fixed-top floatong-close">
<div class="close-modal" data-bs-dismiss="modal"><img src="assets/img/close-icon.svg"
alt="Close modal" /></div>
</div>
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-12">
<div class="modal-body">
<!-- Project details-->
<h2 class="text-uppercase">Raspberry Pi</h2>
<h5 class="text-uppercase">Joy-Pi Project</h5>
<p class="item-intro text-muted">De Raspberry Pi dankt zijn succes in de
hobbywereld aan zijn GPIO-aansluitingen. Met de juiste Python-bibliotheek en
instructies lukken
zelfs complexe taken.</p>
<!--
<img class="img-fluid d-block mx-auto joypiproject "
src="assets/img/portfolio/shopping.png" alt="..." loading="lazy" /> -->
<p class="modal_2_text justify-content-around">De Raspberry Pi is een
singleboardcomputer
gebaseerd op een
ARM-processor die tegen
een minimale prijs wordt vervaardigd
en verkocht. De Raspberry Pi bestaat in verschillende versies en
werd ontwikkeld aan
de Universiteit van Cambridge door
de Raspberry Pi Foundation.</p>
<!-- <img class="img-fluid d-block mx-auto joypiproject"
src="assets/img/portfolio/raspberry_pi_unlocked.png" alt="..." loading="lazy" /> -->
<div class="">
<img class="img-fluid d-block mx-auto raspberrypi_unleashed"
src="assets/img/logos/raspberrypi_unleashed.jpg" alt="..." loading="lazy" />
</div>
<p class="modal_2_text justify-content-around">Een Raspberry Pi beschikt over een
ethernetpoort
en een
wifi-chip. Dus je kunt hem op
afstand benaderen met een andere pc
bijvoorbeeld, of via (een app op je) smartphone en tablet. Zo kun je
de minicomputer
zijn werk laten doen en besturen,
zonder dat je daar een muis, toetsenbord en monitor voor aan hoeft
te sluiten.</p>
<img class="img-fluid d-block mx-auto gpio-header"
src="assets/img/portfolio/gpio-header-potentiaal-pin.jpg" alt="" loading="lazy" />
<p class="modal_2_text justify-content-around">GPIO staat voor General Purpose
Input/Output.
Dit houdt in dat de Pin geen specifieke
functie heeft. Normaal gesproken
hebben Pinnen een specifiek doel zoals het versturen van een signaal
of juist het
ontvangen van een signaal. Een GPIO
Pin is aanpasbaar en kan worden bestuurd door software. De GPIO pins
zijn niet
hetzelfde als de pins op een Arduino,
maar ze kunnen wel gebruikt worden voor het aansturen van
verschillende componenten
en het uitlezen van sensoren.
Waar je bij een Arduino een computer nodig hebt om de Arduino te
programmeren kun je
de Raspberry Pi rechtstreeks
programmeren. Dit kan omdat de Raspberry Pi dus zelf al een computer
is. De
Raspberry Pi wordt meestal geprogrammeerd
door middel van Python.
</p>
<div class="row text-center">
<div class="col-md-4">
<img class="img-fluid joypiproject" src="assets/img/portfolio/SBC-LCD16x2.png"
alt="..." /><br>
</div>
<div class="col-md-4">
<img class="img-fluid joypiproject" src="assets/img/portfolio/LK-Digi-2.png"
alt="..." /><br>
</div>
<div class="col-md-4">
<img class="img-fluid joypiproject"
src="assets/img/portfolio/SBC-ButtonMatrix.png" alt="..." /><br>
</div>
</div>
<p class="modal_2_text item-intro text-muted">
<i class="fas fa-star"></i> Voorbeeld van beschikbare modullen welke kunnen worden
gebruikt op de GPIO-aansluitingen.
</p>
<p class="modal_2_text">
Ook voor de Raspberry Pi zijn er veel mogelijkheden om op vrije frequenties te
kunnen communiceren. Juist door de vrijgekomen LPD en PMR frequenties.
</p>
<p class="modal_2_text">
In Nederland kunt je een aantal frequenties vergunningvrij gebruiken. Daarvoor geldt
geen meldings- of registratieplicht. Bijvoorbeeld afstandsbedieningen voor
autosloten, contactloos betalen, draadloze weerstations, de meeste drones, LoRa,
bluetooth, wifi of draadloze telefonie werken op deze frequenties. In het algemeen
gaat het om apparatuur met beperkte zendvermogens, waarmee u korte afstanden
overbrugt.
</p>
<div class="row text-center">
<div class="col-md-4">
<img class="img-fluid joypiproject" src="assets/img/future/Lora_GPS_Hat_30.png"
alt="..." /><br>
<p class="modal_2_text">
De zendontvangers van de HAT zijn voorzien van het LoRa™-modem met een groot
bereik dat zorgt voor ultra-lange afstand gespreide spectrumcommunicatie en
hoge interferentie-immuniteit terwijl het stroomverbruik wordt
geminimaliseerd . De Lora/GPD HAT kan een gevoeligheid van meer dan -148 dBm
bereiken met behulp van een goedkoop kristal en rekening van materialen. De
hoge gevoeligheid in combinatie met de geïntegreerde +20 dBm eindversterker
levert een toonaangevend linkbudget op, waardoor het optimaal is voor elke
toepassing die bereik of robuustheid vereist.
</p>
</div>
<div class="col-md-4">
<div class="spacer-vertical-100"></div>
<img class="img-fluid joypiproject"
src="assets/img/future/A000008_featured_2.jpg" alt="..." /><br>
<p class="modal_2_text">
Arduino YÚN is het perfecte bord om te gebruiken bij het ontwerpen van
aangesloten apparaten en, meer in het algemeen, Internet of
Things-projecten. Het combineert de kracht van Linux met het gebruiksgemak
van Arduino. De Arduino Yún is een microcontrollerboard gebaseerd op de
ATmega32u4 en de Atheros AR9331. De Atheros-processor ondersteunt een
Linux-distributie op basis van OpenWrt genaamd Linino OS
</p>
</div>
<div class="col-md-4">
<div class="spacer-vertical-100"></div>
<img class="img-fluid joypiproject"
src="assets/img/future/A000116_Tian_featured_2.jpg" alt="..." /><br>
<p class="modal_2_text">
Het nieuwe Arduino Tian- bord wordt aangedreven door Atmel's SAMD21 MCU, met
een 32-bits ARM Cortex® M0+-kern en een Qualcomm Atheros AR9342, een sterk
geïntegreerde MIPS-processor die werkt op maximaal 533 MHz en rijk is aan
IEEE802.11n 2x2 2.4/ 5 GHz dual-band WiFi-module. Qualcomm Atheros MIPS
ondersteunt een Linux-distributie, gebaseerd op OpenWRT genaamd Linino. De
Arduino Tian heeft ook een ingebouwd 4GB eMMC-geheugen dat handig kan zijn
bij het bouwen van uw projecten. Het is mogelijk om de Linux-poort van de
MCU AAN/UIT te schakelen om het stroomverbruik te verminderen.
</p>
</div>
</div>
<h5 class="text-uppercase">LoRaWAN Frequentiebanden</h5>
<p class="modal_2_text">
Binnen Europa wordt voor LoRa de licentievrije 868 Mhz band gebruikt. Deze band is
opgedeeld in vijf subbanden, variërend tussen 863 en 870 Mhz. Doordat deze
licentievrije band door iedereen mag worden gebruikt, zijn er vanuit de overheid
restricties opgelegd aan het gebruik van deze band. Dit resulteert in een limitatie
op zendtijd per subband.
De vijf subbanden binnen de 868 Mhz band zijn binnen Europa opgesteld middels de
ETSI EN300.220 standaard. Per subband is de duty cycle gespecificeerd, wat de
zendtijd per uur binnen de betreffende subband bepaalt.
</p>
<div class="modal_2_text">
<h6><span class="mw-headline" id="See_also">Zie ook</span></h6>
<span>Engels</span>
<ul>
<li><a href="https://en.wikipedia.org/wiki/DASH7" target="_blank" rel="noopener"
title="DASH7">DASH7</a> – a popular open alternative
to LoRa</li>
<li><a href="https://en.wikipedia.org/wiki/IEEE_802.11ah" target="_blank"
rel="noopener" title="IEEE 802.11ah">IEEE 802.11ah</a> –
non-proprietary low-power long-range standard</li>
<li><a href="https://en.wikipedia.org/wiki/CC430" target="_blank" rel="noopener"
class="mw-redirect" title="CC430">CC430</a> – an MCU
& sub-1 GHz RF transceiver SoC</li>
<li><a href="https://en.wikipedia.org/wiki/NB-IoT" target="_blank"
rel="noopener" class="mw-redirect" title="NB-IoT">NB-IoT</a> -
Narrowband Internet of Things</li>
<li><a href="https://en.wikipedia.org/wiki/LTE-M" target="_blank" rel="noopener"
title="LTE-M">LTE Cat M1</a></li>
<li><a href="https://en.wikipedia.org/wiki/MIoTy" target="_blank" rel="noopener"
title="MIoTy">MIoTy</a> – sub-GHz LPWAN technology for
sensor networks</li>
<li><a href="https://en.wikipedia.org/wiki/Static_Context_Header_Compression"
target="_blank" rel="noopener"
title="Static Context Header Compression">SCHC</a> – static context
header compression</li>
<li><a href="https://en.wikipedia.org/wiki/Short-range_device" target="_blank"
rel="noopener" title="Short-range device">Short-range
device</a></li>
<li><a href="https://en.wikipedia.org/wiki/Helium_(cryptocurrency)"
target="_blank" rel="noopener" class="mw-redirect"
title="Helium (cryptocurrency)">Helium (cryptocurrency)</a> - LoRaWAN
protocol paired with blockchain technology</li>
</ul>
</div>
<div class="spacer-vertical-50"></div>
<ul class="list-inline">
<li>
<strong>Project:</strong>
Raspberry Pi Joy-Pi Project
</li>
<li>
<strong>Project:</strong>
Programming
</li>
</ul>
<button class="btn btn-primary btn-xl text-uppercase" data-bs-dismiss="modal"
type="button">
<i class="fas fa-times me-1"></i>
Close Project
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Portfolio item 5 modal popup JOY PI PROJECT -->
<div class="portfolio-modal modal fade" id="portfolioModal5" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div href="#" class="position-fixed fixed-top floatong-close">
<div class="close-modal" data-bs-dismiss="modal"><img src="assets/img/close-icon.svg"
alt="Close modal" /></div>
</div>
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-12">
<div class="modal-body">
<!-- Project details-->
<h2 class="text-uppercase">Joy-Pi Project</h2>
<p class="item-intro text-muted">JSON (JavaScript Object Notation) is een
lichtgewicht formaat voor
data-uitwisseling.<br>
JSON is voor programmeurs gemakkelijk te gebruiken, en
gemakkelijk voor computers om te verwerken en te genereren.
<br>
<!-- </p>
<p class="item-intro text-muted modal_2_text"> -->
JSON is een tekstformaat dat volledig
taalonafhankelijk is, maar dat wel vertrouwd
zal zijn voor programmeurs uit de C-familie, zoals C, C++, C#, Java, JavaScript,
Perl,
Python en vele andere. Hierdoor is JSON een ideale taal voor
gegevensuitwisseling.
</p>
<p class="modal_2_text">
In mijn project ben ik vooral bezig met het ontvangen en versturen van gegevens
tussen mijn JoyPi experimenteer koffer, met daar in alle adafruit componenten.
Hieronder ziet u een voorbeeld van de site die ik heb gemaakt. Bovenin kunt u de
tijd, temperatuur, luchtvochtigheid, het aantal lumen ter plaatse, beweging en
geluidsdetectie vinden. Ik heb hier gespeeld met icoontjes in
<a href="https://fontawesome.com/" target="_blank" rel="noopener">Font Awesome</a>.
Daarnaast is deze site gebaseerd op <a href="https://getbootstrap.com/"
target="_blank" rel="noopener">Bootstrap v5.1.3</a>
</p>
<div class="justify-content-center">
<iframe src="/assets/img/portfolio/service.html" width="90%" height="500"
title="Joy-Pi Project singleboardcomputer site" scrolling="yes">
</iframe>
<p class="modal_2_text"><br>
Als u naar beneden scrolt komt u bij een stukje wat ik voor de gein Nest heb
genoemd. Hierin is een menubalk aanwezig waar ik met <a
href="https://fonts.google.com/icons" target="_blank"
rel="noopener">Material Icons</a>
en <a href="https://www.fontspace.com/category/truetype" target="_blank"
rel="noopener">Truetype Fonts</a> aan het spelen ben geweest.
Ook maak ik hier gebruik van <a
href="https://iconarchive.com/tag/supervista-mail" target="_blank"
rel="noopener">Super Vista Icons</a>.
</p>
<div class="item-intro text-muted alert-secondary alert-link modal_2_text">
<details>
<summary>Klik hier voor mijn HTML code (Het voorbeeld hierboven)
</summary>
<p>
<script
src="https://gist.github.com/annekoster/43522db5362e632dc44bbb6c75fe9aba.js"></script>
</p>
</details>
</div>
<br>
<div class="item-intro text-muted alert-secondary alert-link modal_2_text">
<details>
<summary>Klik hier voor de bijbehorende CSS code met Font Awesome ('s
werelds populairste pictogrammenset en toolkit.)
</summary>
<p>
<script
src="https://gist.github.com/annekoster/bbb77fad3ee74afc7cedea4f05cd9f99.js"></script>
</p>
<br>
</details>
</div>
<br>
<p class="modal_2_text">In een <a href="https://www.javascript.com/" target="_blank"
rel="noopener">JavaScript</a>, dat aan een webpagina is gekoppeld,
willen we
het JSON-document naar binnen halen en tot een object omzetten. We hebben
daarbij een asynchroon proces.
Het script loopt in hoog tempo alle opdrachten in het script af, maar het
binnenhalen van de data kost tijd. Pas na dat binnenhalen kan het worden
verwerkt.
Na binnenkomst is er als het ware een melding, die het script vertelt dat er nu
vanaf dat punt verder gewerkt kan worden.</p>
<div class="item-intro text-muted alert-secondary alert-link modal_2_text">
<details>
<summary>Klik hier voor de JavaScript scripttaal & JSON (JavaScript Object
Notation) code
</summary>
<p>
<script
src="https://gist.github.com/annekoster/0dfb82a774fb59f04cbf438cf8ff4728.js"></script>
</p>
<br>
</details>
</div>
<br>
<p class="modal_2_text">In de informatica is representatieve toestandsoverdracht
(REST)
een architecturale stijl die bestaat uit een gecoördineerde set componenten,
connectoren en data-elementen binnen een gedistribueerd hypermediasysteem,
waarbij
de nadruk ligt op componentrollen en een specifieke set
interacties tussen data-elementen in plaats van uitvoeringsdetails. Het doel is
om
prestaties, schaalbaarheid, eenvoud, aanpasbaarheid,
zichtbaarheid, draagbaarheid en betrouwbaarheid te bewerkstelligen. REST is de
software-architectuurstijl van het World Wide Web .
</p>
<img class="img-fluid " src="/assets/img/portfolio/json_capability.png" alt="..." />
<p class="modal_2_text">
</p>
<p class="item-intro text-muted modal_2_text">
<i class="fas fa-star"></i> Linked Data is een internettechnologie
waarmee je
gestructureerde gegevens op een uniforme manier kunt beschrijven, modelleren,
opslaan, publiceren en onderling kunt koppelen via het internet
</p>
<p class="item-intro text-muted modal_2_text">
<i class="fas fa-star"></i> Bovenstaande site is op aanvraag te bezichtigen.
</p>
<br>
<div class="modal_2_text">
</div>
<div class="spacer-vertical-100"></div>
<ul class="list-inline">
<li>
<strong>Project:</strong>
Raspberry Pi Joy-Pi Project
</li>
<li>
<strong>Category:</strong>
Programming
</li>
</ul>
<button class="btn btn-primary btn-xl text-uppercase" data-bs-dismiss="modal"
type="button">
<i class="fas fa-times me-1"></i>
Close Project
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Portfolio item 6 modal popup THE FUTURE IS NOW -->
<div class="portfolio-modal modal fade" id="portfolioModal6" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="close-modal" data-bs-dismiss="modal"><img src="assets/img/close-icon.svg"
alt="Close modal" /></div>
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-12">
<div class="modal-body">
<!-- Project details-->
<h2 class="text-uppercase">The Future is Now</h2>
<h4 class="item-intro text-muted"><i>Where do you want to go today ?</i></h4>
<p class="item-intro text-muted">
De Microsoft-slogan resoneert vandaag nog steeds.
De marketingmachine van Microsoft heeft sindsdien de zaken in beweging gebracht en
er zijn verschillende slogans verschenen, maar dat is degene die een onuitwisbare
indruk heeft achtergelaten.
</p>
<img class="img-fluid d-block mx-auto derevolutie"
src="assets/img/future/VIERDE INDUSTRIELE REVOLUTIE.jpeg" alt="..." loading="lazy"
title="Het internet der dingen." />
<p class="modal_2_text">
The Things Network, een initiatief uit Amsterdam, bouwt een wereldwijd open Internet
of Things netwerk. De uitrol van het bottom-up netwerk wordt gefinancierd doordat
gebruikers zelf gateways (antennes) installeren om het bereik te vergroten. Op het
moment werken er mensen uit meer dan 600 steden uit meer dan 90 landen wereldwijd
mee aan het verwezenlijken van het project.
De stad Amsterdam is al sinds juli 2015 gedekt met het open LoRa (Long Range)
netwerk dat open en vrij te gebruiken is. De techniek is specifiek ontworpen voor
goedkope, energiezuinige sensoren die over een grote afstand kunnen communiceren. De
techniek wordt veel gebruikt voor applicaties als slimme parkeersystemen,
automatisering in de agricultuur en slim water management. Ook worden er fietsen,
boten en huisdieren aan het internet gekoppeld.
</p>
<img class="img-fluid d-block mx-auto thethingsnetwork"
src="assets/img/future/TTN-logo.svg" alt="Internet of Things" loading="lazy"
title="Internet of Things ecosystem." />
<p class="modal_2_text">
Het <a href="https://www.thethingsnetwork.org/" target="_blank" rel="noopener">The
Things Network (TTN)</a> is een community-gebaseerd initiatief om een
energiezuinig
breedbandnetwerk voor internet of things op te zetten. Het initiatief werd in
2015 gelanceerd door de twee Nederlanders <a
href="https://www.linkedin.com/in/wienke/?originalSubdomain=nl" target="_blank"
rel="noopener">Wienke Giezeman</a> en
<a href="https://www.linkedin.com/in/johanstokking/?originalSubdomain=nl"
target="_blank" rel="noopener">Johan Stokking</a>. Het
bestrijkt in februari 2020 grote gebieden met ongeveer 19.000 geïnstalleerde
LoRaWAN-gateways in zo'n 150 landen. Behalve het zuiden van Wallonië is er overal in
de Benelux bereik. Het hoofdkantoor van TTN bevindt zich in de <a
href="https://goo.gl/maps/EDNQcBhijbpUcayW9" target="_blank"
rel="noopener">Rigakade in
Amsterdam</a>.
</p>
<!-- ########## -- LoRaWAN-sectie -- ########## -->
<img class="img-fluid d-block mx-auto thethingsnetwork"
src="assets/img/future/lorawan_icon.png" alt="LoRaWAN logo" loading="lazy"
title="LoRaWAN (Long Range Wide Area Network)" />
<p classs="modal_2_text">
<h3 class="text-uppercase">Wat is LoRaWAN?</h3><br>
<div class="row text-center">
<div class="col-md-6">
<p class="modal_2_text">
LoRaWAN is een low-power, wide area netwerkprotocol dat bovenop de
LoRa-radiomodulatietechniek is gebouwd. Het verbindt apparaten draadloos met
internet.
The Things Stack is een LoRaWAN-netwerkserver die is ontwikkeld en actief
wordt onderhouden door The Things Industries .
The Things Stack wordt geleverd in verschillende implementaties voor
persoonlijk of zakelijk gebruik.
De architectuur bestaat uit gateways, netwerkservers en applicatieservers.
Er worden RF-chips van
Semtech gebruikt die een spread spectrum uitzenden. De Nodes versturen een
versleuteld bericht via radio.
In Europa is deze frequentie 868 MHz. Dit bericht wordt ontvangen door de
gateway. De gateway is verbonden
met het internet en stuurt het bericht door naar de netwerkservers. De
berichten kunnen worden opgehaald door
een applicatieserver. Die kan bepalen of er data teruggezonden moet worden,
of de data opslaan in een database.
Een webserver fungeert als interface voor de Node.
Een Node is een klein apparaat of microcontroller dat verbonden is met
LoRaWAN, bijvoorbeeld een Arduino of Raspberry Pi.
Nodes worden gebruikt om meetgegevens te verzamelen, bijvoorbeeld over een
bijenkast. De microcontroller communiceert
met een LoRa-module.
<!-- Lees er alles over in de LoRaWAN-sectie . -->
</p>
</div>
<div class="col-md-6">
<img class="img-fluid d-block mx-auto " src="assets/img/future/TTN-Overview.jpg"
alt="Architectuur" loading="lazy" title="LoRaWAN Architectuur" />
<br>
<img class="img-fluid d-block mx-auto "
src="assets/img/future/Architecture_lorawan.png" alt="Architectuur"
loading="lazy"
title="LoRaWAN Architectuur door: Door Germain GAUDARD - Eigen werk, CC BY-SA 4.0, https://commons.wikimedia.org/w/index.php?curid=64159124" />
</div>
</div>
<!-- video by Johan Stokking -->
<div class="row text-center">
<div class="col-md-6">
<iframe width="560" height="315"
src="https://www.youtube.com/embed/ZsVhYiX4_6o?controls=0"
title="YouTube video player" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen></iframe>
</div>
<div class="col-md-6">
<p class="item-intro text-muted text-end ml-5 border-left-0 johan_stokking">
<i class="fas fa-star"></i> Hiernaast Johan Stokking, die de grondbeginselen
van LoRaWAN in 60 minuten
behandelt.
</p>
</div>
</div>
<!-- UNIX logo-horizontal -->
<!-- <img class="img-fluid d-block mx-auto " src="assets/img/future/unix-shell.webp"
alt="..." loading="lazy" /> -->
<!-- XENIX Story to XEDOS -->
<!-- <iframe width="560" height="315"
src="https://www.youtube.com/embed/Vo8NG8T4rWs?controls=0"
title="YouTube video player" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen></iframe> -->
<div class="spacer-vertical-50"></div>
<div class="row text-center">
<div class="col-md-6">
<p class="item-intro text-muted text-end ml-5 border-left-0 johan_stokking">
<i class="fas fa-star"></i> Hiernaast The Internet of Tomatoes. <br><br>
Analog Devices werkt samen met tomatentelers uit New England om technologie
en een complete sensor-naar-cloud-oplossing te ontwikkelen waarmee ze
smakelijkere, overvloediger en duurzamer geteelde tomaten kunnen oogsten dan
ooit tevoren.
</p>
</div>
<div class="col-md-6">
<iframe width="560" height="315"
src='//players.brightcove.net/706011717001/HJgoScClQ_default/index.html?videoId=4920630903001'
allowfullscreen frameborder=0></iframe>
</div>
</div>
<div class="spacer-vertical-150"></div>
<img class="img-fluid d-block mx-auto"
src="assets/img/future/unix-shell-scripting-training-in-college-to-corporate.jpg" alt="unix-shell-scripting-training-in-college-to-corporate"
loading="lazy"
title="unix-shell-scripting"
style="max-height: 150px;" />
<ul class="list-inline">
<li>
<strong>Project:</strong>
Raspberry Pi Joy-Pi Project
</li>
<li>
<strong>Category:</strong>
Programming
</li>
</ul>
<button class="btn btn-primary btn-xl text-uppercase" data-bs-dismiss="modal"
type="button">
<i class="fas fa-times me-1"></i>
Close Project
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Algemene voorwaarden item 7 modal popup -->
<div class="portfolio-modal modal fade" id="portfolioModal7" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div href="#" class="position-fixed fixed-top floatong-close">
<div class="close-modal" data-bs-dismiss="modal"><img src="assets/img/close-icon.svg"
alt="Close modal" /></div>
</div>
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-8">
<div class="modal-body">
<!-- Project details-->
<h2 class="text-uppercase">Terms of use and Copyright</h2>
<p class="item-intro text-muted">Algemene voorwaarden.
</p>
<!-- <img class="img-fluid d-block mx-auto" src="" alt="..." /> -->
<p>
<!-- ###############################################################################################################-->
<iframe src="Algemene_voorwaarden.htm" width="110%" height="500"
title="Algemene Voorwaarden"></iframe>
<iframe src="test-slide.html" scrolling="no" width="110%" height="400px"
title=" Gebruikte Bronnen"></iframe>
<!-- ###############################################################################################################-->
</p>
<ul class="list-inline">
<li>
<strong>Project:</strong>
<a class="link-dark text-decoration-none" href="https://www.reacollege.net"
target="_blank" rel="noopener">REA College Leeuwarden</a>
</li>
<li>
<strong>Category:</strong>
<a class="link-dark text-decoration-none" href="https://www.reacollege.net"
target="_blank" rel="noopener">Junior Developer</a>
</li>
</ul>
<button class="btn btn-primary btn-xl text-uppercase" data-bs-dismiss="modal"
type="button">
<i class="fas fa-times me-1"></i>
Close Project
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Privacyverklaring item 8 modal popup -->
<div class="portfolio-modal modal fade" id="portfolioModal8" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div href="#" class="position-fixed fixed-top floatong-close">
<div class="close-modal" data-bs-dismiss="modal"><img src="assets/img/close-icon.svg"
alt="Close modal" /></div>
</div>
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-8">
<div class="modal-body">
<!-- Project details-->
<h2 class="text-uppercase">Privacyverklaring</h2>
<p class="item-intro text-muted">Voor de verwerking van persoonsgegevens.
</p>
<!-- <img class="img-fluid d-block mx-auto" src="" alt="..." /> -->
<p>
<!-- ###############################################################################################################-->
<iframe src="/Privacy_statement/privecy_statement.html" width="110%" height="500"
title="Privacyverklaring"></iframe>
<iframe src="test-slide.html" scrolling="no" width="110%" height="400px"
title=" Gebruikte Bronnen"></iframe>
<!-- ###############################################################################################################-->
</p>
<ul class="list-inline">
<li>
<strong>Project:</strong>
<a class="link-dark text-decoration-none" href="https://www.reacollege.net"
target="_blank" rel="noopener">REA College Leeuwarden</a>
</li>
<li>
<strong>Category:</strong>
<a class="link-dark text-decoration-none" href="https://www.reacollege.net"
target="_blank" rel="noopener">Junior Developer</a>
</li>
</ul>
<button class="btn btn-primary btn-xl text-uppercase" data-bs-dismiss="modal"
type="button">
<i class="fas fa-times me-1"></i>
Close Project
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Portfolio item modal Conclusion popup -->
<div class="portfolio-modal modal fade" id="portfolioModalConclusion" tabindex="-1" role="dialog"
aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div href="#" class="position-fixed fixed-top floatong-close">
<div class="close-modal" data-bs-dismiss="modal"><img src="assets/img/close-icon.svg"
alt="Close modal" /></div>
</div>
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-8">
<div class="modal-body">
<!-- Project details-->
<h2 class="text-uppercase">Conclusie</h2>
<p class="item-intro text-muted">De wereld van morgen.</p>
<img class="img-fluid d-block mx-auto conclusie" src="assets/img/final/horizon.jpg"
alt="..." loading="lazy" title="Het internet der dingen." />
<div class="modal_2_text">
<h5 class="text-uppercase text-center">Conclusie</h5>
<h6 class="text-uppercase text-center">goals, doelstellingen en ontwikkeling</h6>
<div class="spacer-vertical-50"></div>
<p class="modal_2_text">Natuurlijk had ik jullie nog wel meer willen vertellen. De
wereld van tegenwoordig
kent geen grenzen. Ik denk dat ik hier echter een goede indruk heb proberen neer
te
zetten waar mijn interesses liggen en hoe ik daar in door wil groeien in de
toekomst.
Ook in deze toekomst is veel plaats voor het zenden en ontvangen van weleer.
Niet
meer via groffe Watt’s maar via 100 mW uitgangsvermogen.
</p>
<video width="320" height="240" autoplay muted class="img-fluid d-block lora-pakket">
<source src="/assets/video/abc_gif.mp4" type="video/mp4">
Your browser does not support the video tag.
</video><br>
<p class="modal_2_text">
Dit zijn <a href="https://learn.adafruit.com/lora-and-lorawan-radio-for-raspberry-pi" target="_blank" rel="noopener">LoRa-pakketradio's</a> die een speciale radiomodulatie hebben, en veel
verder kan gaan dan bijvoorbeeld WiFi. Ze kunnen gemakkelijk een gezichtslijn
van 2 km afleggen met behulp van eenvoudige draadantennes, of tot 20 km met
directionele antennes en aanpassingen aan de instellingen. De KENWOOD TM-D700E
heeft feitelijk al deze protocollen aan boord, wel met een beetje meer vermogen,
35 Watt.
</p>
<div class="spacer-vertical-25"></div>
<b>In de komende tijd wil ik mij doorontwikkelen met:</b>
<div class="spacer-vertical-50"></div>
<ul><strong>
<li>Python</li>
<li>C++</li>
<li>JavaScript / Typescript</li>
<li>JSON</li>
<li>Object georiënteerd werken</li>
<li>IoT / Domotica / Home Assist</li>
<li>Verbinding (Socket.io / Internet Socket / Socket API)</li>
<li>Database's</li>
<li>Angular (als het zou kunnen)</li>
</strong>
</ul>
</div>
<div class="spacer-vertical-100"></div>
<img src="/assets/img/future/ux_up_ear.png">
<ul class="list-inline">
<li>
<strong>Project:</strong>
<a class="link-dark text-decoration-none" href="https://www.reacollege.net"
target="_blank" rel="noopener">REA College Leeuwarden</a>
</li>
<li>
<strong>Category:</strong>
<a class="link-dark text-decoration-none" href="https://www.reacollege.net"
target="_blank" rel="noopener">Junior Developer</a>
</li>
</ul>
<button class="btn btn-primary btn-xl text-uppercase" data-bs-dismiss="modal"
type="button">
<i class="fas fa-times me-1"></i>
Close Project
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Bootstrap / CSS / Script -->
<section style="padding: 0 0 0 0 !important;">
<!-- Bootstrap core JS-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<!-- Core theme JS-->
<script src="js/scripts.js"></script>
<script src="js/dot.scripts.js"></script>
<script src="/test-tooltip-hover/follow-mouse.js"></script>
<script src="/test-tooltip-hover/stackover_tooltip.js"></script>
<!-- <script src="/detail-test/detail.js" crossorigin="anonymous"></script> -->
<!-- <link href="mouseover.css" rel="stylesheet" type="text/css" /> -->
<script src="js/sb-forms-0.4.1.js"></script>
</section>