Added files website
Signed-off-by: dehaandirk
This commit is contained in:
dehaandirk
commit
38efb5b94a
41
content/handelsplatform/dashboard.html
Normal file
41
content/handelsplatform/dashboard.html
Normal file
@ -0,0 +1,41 @@
|
||||
<div class="section">
|
||||
<h2>Options</h2>
|
||||
<p>
|
||||
<b>Meter:</b>
|
||||
<select onchange="destroySmiley(); loadSmiley()" id="meter1">
|
||||
<option value="1" selected>Middenspanningsstation meter 1</option>
|
||||
<option value="2">Middenspanningsstation meter 2</option>
|
||||
</select>
|
||||
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<div class="box_tree">
|
||||
<div class="desc">
|
||||
<h2>Production</h2>
|
||||
Phase 1: <smiley phase=1 type="production"></smiley><br/>
|
||||
Phase 2: <smiley phase=2 type="production"></smiley><br/>
|
||||
Phase 3: <smiley phase=3 type="production"></smiley><br/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box_tree">
|
||||
<div class="desc">
|
||||
<h2>Usage</h2>
|
||||
Phase 1: <smiley phase=1 type="usage"></smiley><br/>
|
||||
Phase 2: <smiley phase=2 type="usage"></smiley><br/>
|
||||
Phase 3: <smiley phase=3 type="usage"></smiley><br/>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="box_tree">
|
||||
<div class="desc">
|
||||
<h2>Storage</h2>
|
||||
Phase 1: <smiley phase=1 type="storage"></smiley><br/>
|
||||
Phase 2: <smiley phase=2 type="storage"></smiley><br/>
|
||||
Phase 3: <smiley phase=3 type="storage"></smiley><br/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
30
content/handelsplatform/prijzen.html
Normal file
30
content/handelsplatform/prijzen.html
Normal file
@ -0,0 +1,30 @@
|
||||
<div class="section">
|
||||
|
||||
<div class="box">
|
||||
<div class="desc">
|
||||
<h2>Handelsplatform - Prijzen</h2>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
|
||||
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||
Excepteur sint occaecat cupidatat non proident,
|
||||
sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit,
|
||||
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
||||
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
|
||||
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||
Excepteur sint occaecat cupidatat non proident,
|
||||
sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit,
|
||||
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
||||
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="box">
|
||||
<a target="_blank"><img src="/images/wisselspanning.jpg" alt="#"></a>
|
||||
<div class="desc">Add a description of the image here</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
30
content/handelsplatform/voorspelling.html
Normal file
30
content/handelsplatform/voorspelling.html
Normal file
@ -0,0 +1,30 @@
|
||||
<div class="section">
|
||||
|
||||
<div class="box">
|
||||
<div class="desc">
|
||||
<h2>Handelsplatform - Voorspellingen</h2>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
|
||||
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||
Excepteur sint occaecat cupidatat non proident,
|
||||
sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit,
|
||||
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
||||
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
|
||||
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||
Excepteur sint occaecat cupidatat non proident,
|
||||
sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit,
|
||||
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
||||
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="box">
|
||||
<a target="_blank"><img src="/images/wisselspanning.jpg" alt="#"></a>
|
||||
<div class="desc">Add a description of the image here</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
69
content/home/api.html
Normal file
69
content/home/api.html
Normal file
@ -0,0 +1,69 @@
|
||||
<div class="section">
|
||||
|
||||
<div class="box_full" id="api" style="text-align:left;">
|
||||
<div class="desc">API layout
|
||||
<p>Klik op de opties voor een preview van de data</p>
|
||||
</div>
|
||||
|
||||
<table>
|
||||
<tr class="color">
|
||||
<td><b>Website naam</b></td>
|
||||
<td><b>API</b></td>
|
||||
<td><b>Onderdeel</b></td>
|
||||
<td><b>Optie</b></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>https://5groningen02.housing.rug.nl</td>
|
||||
<td>/api</td>
|
||||
<td>/pq</td>
|
||||
<td><a href="https://5groningen02.housing.rug.nl/api/pq/count"><div class="tooltip">/count<span class="tooltiptext">De optie "Count" telt alle records in de database</span></div></a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td><a href="https://5groningen02.housing.rug.nl/api/pq/meters"><div class="tooltip">/meters<span class="tooltiptext">De optie "Meters" geeft alle aangesloten meters terug</span></div></a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td><a href="https://5groningen02.housing.rug.nl/api/pq/list"><div class="tooltip">/list<span class="tooltiptext">De optie "List" geeft een lijst terug met alle PowerQuality opties</span></div></a></td>
|
||||
</tr>
|
||||
<tr class="color">
|
||||
<td><b>Website naam</b></td>
|
||||
<td><b>API</b></td>
|
||||
<td><b>Onderdeel</b></td>
|
||||
<td><b>Meter nummer</b></td>
|
||||
<td><b>PowerQuality optie</b></td>
|
||||
<td><b>Tijdstamp</b></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>https://5groningen02.housing.rug.nl</td>
|
||||
<td>/api</td>
|
||||
<td>/pq</td>
|
||||
<td>/1</td>
|
||||
<td><a href="https://5groningen02.housing.rug.nl/api/pq/1/pmax/2018-05-17T00:00:00+02:00">/pmax</a></td>
|
||||
<td><div class="tooltip">/2018-05-17T00:00:00+02:00<span class="tooltiptext">Gebruik de layout van het voorbeeld om de data op te vragen</span></div></td>
|
||||
</tr>
|
||||
<tr class="color">
|
||||
<td><b>Website naam</b></td>
|
||||
<td><b>API</b></td>
|
||||
<td><b>Onderdeel</b></td>
|
||||
<td><b>Meter nummer</b></td>
|
||||
<td><b>Optie</b></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>https://5groningen02.housing.rug.nl</td>
|
||||
<td>/api</td>
|
||||
<td>/trading</td>
|
||||
<td>/1</td>
|
||||
<td><a href="https://5groningen02.housing.rug.nl/api/trading/1/scores"><div class="tooltip">/scores<span class="tooltiptext">De optie "Scores" geeft de berekende score voor het handelsplatform terug</span></div></a></td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<div class="box_full" id="content_api"></div>
|
||||
</div>
|
||||
46
content/home/bedrijven.html
Normal file
46
content/home/bedrijven.html
Normal file
@ -0,0 +1,46 @@
|
||||
<!-- Page content -->
|
||||
<div class="section">
|
||||
<div class="box">
|
||||
<a target="_blank"><img src="/images/enexis.jpg" alt="#"></a>
|
||||
<div class="desc">Afbeelding Enexis</div>
|
||||
</div>
|
||||
|
||||
<div class="box">
|
||||
<div class="desc">
|
||||
<h2>Enexis</h2>
|
||||
<p>
|
||||
Enexis de netbeheerder in nederland en houd zich bezig met het transport van elektrische energie over het stroomnetwerk.
|
||||
Kijkende naar de power quality is Enexis als netbeheerder verantwoordelijk zich te houden aan regels opgesteld in de
|
||||
Elektriciteitswet (Artikel 21 Elektriciteitswet 1998). Voldoen ze hier niet aan, dan worden ze onder toezicht geplaatst.
|
||||
Het is dus voor de netbeheerder belangrijk om te weten hoe de power quality ervoor staat om er actief iets aan te kunnen doen.
|
||||
Verder heeft een netbeheerders een leveringsplicht tot aan de hoofdmeter van een aansluiting.
|
||||
Wat er na de hoofdmeter met de stroom wordt uitgevoerd, mag en kan Enexis zich niet mee bemoeien.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<div class="box">
|
||||
<div class="desc">
|
||||
<h2>Enie.nl</h2>
|
||||
<p>
|
||||
Enie.nl is gespecialiseerd in het verkopen en het verhuren van zonnepanelen.
|
||||
Tevens is de partij energieleverancier van stroom en gas.
|
||||
Geïnspireerd door de documentaire “An inconvenient truth” van Al Gore,
|
||||
staat het bedrijf voor duurzaamheid en kijkt het bedrijf met groene ogen naar de wereld.
|
||||
Enie.nl ziet het liefst uit naar een wereld volledig onafhankelijk van fossiele brandstoffen
|
||||
en waarbij ieder huis zijn eigen energie opwekt en doorverkoopt.
|
||||
In dit plaatje is er geen netwerkbeheerder meer nodig omdat iedereen zijn eigen stroom of zelf
|
||||
opslaat en gebruikt en anders doorverkoopt naar zijn eigen wijk. Met dit project hoopt Enie.nl
|
||||
inzicht te krijgen in hoe het stroomnetwerk eruit ziet tussen de huizen met als doel stroom van
|
||||
zonnepanelen of opgeslagen stroom te verkopen door middel van een handelsplatform.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="box">
|
||||
<a target="_blank"><img src="/images/enie.jpeg" alt="#"></a>
|
||||
<div class="desc">Afbeelding Enie.nl</div>
|
||||
</div>
|
||||
</div>
|
||||
72
content/home/infrastructuur.html
Normal file
72
content/home/infrastructuur.html
Normal file
@ -0,0 +1,72 @@
|
||||
<div class="section">
|
||||
|
||||
<div class="box">
|
||||
<div class="desc">
|
||||
<h2>Infrastructuur</h2>
|
||||
<p>
|
||||
De infrastructuur is tijdens het project als in figuur 1 opgebouwd.
|
||||
Zowel op de ingaande als uitgaande stroomlijnen zijn Phoenix contact sensoren geplaatst om de doorgaande stroom en spanning te kunnen meten.
|
||||
De sensoren worden middels twee sensorsystemen van Janitza (UMG 512 & UMG 509) uitgelezen.
|
||||
De mini-pc zorgt er vervolgens voor dat de data leesbaar wordt gemaakt en via een vpn verbinding over 5G verstuurd wordt naar Fortop.
|
||||
De verbinding wordt opgezet via de Huawei B715 modem dat verbonden zit aan het Vodafone netwerk. Fortop verwerkt en bewaard de data, en stelt deze beschikbaar voor andere bedrijven middels een web-API.
|
||||
De RUG server kan een request naar deze web-API sturen en krijgt daarmee een CSV of XML file terug.
|
||||
Deze data kan vervolgens gebruikt worden om inzicht te geven in de power quality door middel van web applicaties.
|
||||
Deze laatste twee stappen zijn het begin van het “power quality & 5G” project waarbij de studenten toegang hebben tot de RUG server waar de data ontvangen, opgeslagen en geanalyseerd wordt.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="box">
|
||||
<a target="_blank"><img src="/images/technischoverzicht.png" alt="#" style="max-width:700px;"></a>
|
||||
<div class="desc">Figuur 1. Infrastructuur huidige situatie</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
|
||||
<div class="box_tree">
|
||||
<a target="_blank"><img src="/images/infrastructuur.png" alt="#"></a>
|
||||
<div class="desc">Figuur 2. Fortop meetapparatuur</div>
|
||||
</div>
|
||||
|
||||
<div class="box_tree">
|
||||
<div class="desc">
|
||||
<h2><-- Apparatuur</h2>
|
||||
<p>
|
||||
In de architectuurplaat in figuur 1 staat een kader met “Enexis middenstation” de apparatuur in dit kader is door Fortop in een metalen kast gebouwd.
|
||||
In figuur 2 is deze kast inzichtelijk gemaakt.
|
||||
</p>
|
||||
<h2>Architectuur --></h2>
|
||||
<p>
|
||||
De web-applicatie is als volgt opgebouwd
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="box_tree">
|
||||
<a target="_blank"><img src="/images/architectuur.png" alt="#"></a>
|
||||
<div class="desc">Figuur 3. Architectuur web-applicatie</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="section">
|
||||
|
||||
<div class="box_tree">
|
||||
<a target="_blank"><img src="/images/middenspanningsstation.jpg" alt="#"></a>
|
||||
<div class="desc">Figuur 4. Middenspanningsstation</div>
|
||||
</div>
|
||||
|
||||
<div class="box_tree">
|
||||
<a target="_blank"><img src="/images/IMG_1946.jpg" alt="#"></a>
|
||||
<div class="desc">Figuur 5. Fortop kast ingebouwd</div>
|
||||
</div>
|
||||
|
||||
<div class="box_tree">
|
||||
<a target="_blank"><img src="/images/IMG_1918.jpg" alt="#"></a>
|
||||
<div class="desc">Figuur 6. Meet-sensoren</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
45
content/home/project.html
Normal file
45
content/home/project.html
Normal file
@ -0,0 +1,45 @@
|
||||
<div class="section">
|
||||
<div class="box">
|
||||
<div class="desc">
|
||||
<p>Nederland is een land dat aan het verduurzamen is.
|
||||
De traditionele fossiele brandstoffen raken steeds sneller op en vullen zich te langzaam aan om aan de
|
||||
energiebehoefte te blijven voldoen. Daarnaast speelt het klimaatverandering ook een grote rol om over
|
||||
te stappen naar duurzame energie. Mensen in nederland kopen steeds meer zonnepanelen, windmolens,
|
||||
elektrische auto’s, warmtepompen, nieuwe cv ketels in combinatie met grondwater, zonnewarmte of andere
|
||||
bronnen en ga zo maar door. Al deze apparaten werken op het stroomnetwerk, maar kan dit eigenlijk wel
|
||||
allemaal samen op hetzelfde stroomnetwerk aangesloten worden?</p>
|
||||
|
||||
<p>Bij dit vraagstuk wordt stil gestaan in het Energy4all project.
|
||||
Met dit project wordt er gekeken naar hoe het stroomnetwerk ervoor staat door te kijken naar de power quality.
|
||||
Letterlijk vertaalt betekent power quality: stroom- en spanningskwaliteit.
|
||||
Een lage power quality veroorzaakt schade aan apparatuur, hogere vervangings- en onderhoudskosten en veroorzaakt
|
||||
bovendien een hoger energieverbruik. Nadat de power quality bekeken kan worden wordt er geanalyseerd hoe de
|
||||
power quality positief beïnvloed kan worden. Middels het nieuwste 5G netwerk is er een praktijkopdracht
|
||||
bedacht waarmee de power quality van het middenspanningsstation op de Entrance verstuurd kan worden over een
|
||||
5G verbinding naar het datacenter van de RUG. Centraal staat hier de vraag: </br><b>Kan met 5G de power quality data
|
||||
realtime uitgelezen worden zodat daarop realtime gereageerd kan worden?</b></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="box">
|
||||
<div class="desc">
|
||||
<p>Op basis van het Energy4all project is dit “5G en PowerQuality” project tot stand gekomen.
|
||||
</br>Met dit project wordt gekeken naar:
|
||||
</br><b>- Wat is power quality?
|
||||
</br> - Hoe werkt 5G?
|
||||
</br> - Wat is de toegevoegde waarde van 5G?
|
||||
</br> - Wie zijn de belanghebbenden?
|
||||
</br> - Wat zijn de Eisen voor zinvolle applicaties die op basis van de ontvangen power quality data kunnen worden ontwikkeld?
|
||||
</b></br></p>
|
||||
|
||||
<p>Daarnaast staat decentrale energie handel centraal.
|
||||
Het basis idee hierbij is dat buren die energie over hebben, van bijvoorbeeld zonnepanelen,
|
||||
de energie kunnen verkopen aan de buren die energie nodig heeft. </br>In deze situatie zijn drie onderdelen van belang:
|
||||
</br><b>- Handel op basis van prijzen
|
||||
</br>- Voorspelling van energie
|
||||
</br>- Het elektriciteitsnetwerk moet voldoende capaciteit over hebben om de energie te transporteren naar de buren.
|
||||
</b></p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
32
content/netwerk/5gnetwerk.html
Normal file
32
content/netwerk/5gnetwerk.html
Normal file
@ -0,0 +1,32 @@
|
||||
<div class="section">
|
||||
|
||||
<div class="box">
|
||||
<div class="desc">
|
||||
<h2>5G netwerk</h2>
|
||||
<p>
|
||||
Een van de grote features van 5G is dat het <b>veel apparaten tegelijk aan kan.</b>
|
||||
Dit is voornamelijk belangrijk vanwege Internet of Things apparaten,
|
||||
apparaten die verbonden zijn aan het internet en met elkaar kunnen communiceren.
|
||||
Dit wordt bereikt door twee verbeteringen: 5G heeft meer maar kleinere zendmasten;
|
||||
en 5G maakt gebruik van beamforming, dit betekent dat signalen gericht zijn naar het apparaat waardoor het netwerk meer <b>capaciteit</b>
|
||||
overhoud in alle andere richtingen.
|
||||
Daarnaast is ook de <b>latency</b> aanzienlijk lager, waardoor het voor het aansturen van apparaten over 5G een interessante optie wordt.
|
||||
5G heeft een grotere frequentie tot zijn beschikking,
|
||||
hierdoor kunnen meer frequentiebanden gecombineerd worden wat leidt tot hogere bandwidth.
|
||||
Dit maakt 5G een betere keuze voor telefoons, vooral nu steeds meer mensen video streamen via het mobiele netwerk.
|
||||
</p>
|
||||
<h2>Verschillende implementaties</h2>
|
||||
<p>
|
||||
Hoewel 5G veel voordelen biedt, zijn niet alle details vastgelegd in een standard.
|
||||
Het is dus mogelijk dat een implementatie van 5G weinig voordeel biedt over 4G,
|
||||
omdat het heel weinig verbeteringen implementeerd.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="box">
|
||||
<a target="_blank"><img src="/images/5g.jpg" alt="#"></a>
|
||||
<div class="desc">5G-speed improvements</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
69
content/netwerk/betrouwbaarheid.html
Normal file
69
content/netwerk/betrouwbaarheid.html
Normal file
@ -0,0 +1,69 @@
|
||||
<div class="section">
|
||||
|
||||
<div class="box_tree">
|
||||
<div class="desc">
|
||||
<h2>5G netwerk - Betrouwbaarheid</h2>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
|
||||
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||
Excepteur sint occaecat cupidatat non proident,
|
||||
sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit,
|
||||
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
||||
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
|
||||
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||
Excepteur sint occaecat cupidatat non proident,
|
||||
sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit,
|
||||
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
||||
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="box_tree">
|
||||
<div class="desc">
|
||||
<h2>5G netwerk - latency</h2>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
|
||||
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||
Excepteur sint occaecat cupidatat non proident,
|
||||
sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit,
|
||||
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
||||
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
|
||||
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||
Excepteur sint occaecat cupidatat non proident,
|
||||
sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit,
|
||||
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
||||
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="box_tree">
|
||||
<div class="desc">
|
||||
<h2>5G netwerk - Bandbreedte</h2>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
|
||||
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||
Excepteur sint occaecat cupidatat non proident,
|
||||
sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit,
|
||||
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
||||
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
|
||||
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||
Excepteur sint occaecat cupidatat non proident,
|
||||
sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit,
|
||||
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
||||
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
135
content/powerquality/info.html
Normal file
135
content/powerquality/info.html
Normal file
@ -0,0 +1,135 @@
|
||||
<!-- Page content -->
|
||||
<div class="section">
|
||||
<div class="box">
|
||||
<div class="desc">
|
||||
<h2>Wat is power quality?</h2>
|
||||
<p>Een verzamelnaam voor de kwaliteit van elektrische energie. Het kijkt bijvoorbeeld naar de spanning, de stroom en de frequentie.</p>
|
||||
<h2>Waarom is power quality belangrijk?</h2>
|
||||
<p>Slechte power quality kan zorgen dat apparaten beschadigd raken of een kortere levensloop hebben. Daarnaast zorgt slechte power quality ook voor een hoger verlies van elektriciteit.</p>
|
||||
<h2>Soorten power quality verstoringen</h2>
|
||||
<p>Er bestaan verschillende soorten power quality verstoringen, deze kunnen elk zowel tijdelijk als continu optreden.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="box">
|
||||
<div class="desc">Soorten power quality verstoringen</div>
|
||||
<table>
|
||||
<tr>
|
||||
<td><b>Continu</b></td>
|
||||
<td><b>Tijdelijk</b></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>- Spanningsniveau</td>
|
||||
<td>- Spanningsdips</td>
|
||||
</td>
|
||||
<tr>
|
||||
<td>- Harmonisch</td>
|
||||
<td>- Spanningspieken</td>
|
||||
</td>
|
||||
<tr>
|
||||
<td>- Flikkering</td>
|
||||
<td>- Spanningsonderbrekingen</td>
|
||||
</td>
|
||||
<tr>
|
||||
<td>- Asymetrie</td>
|
||||
<td>- Transienten</td>
|
||||
</td>
|
||||
<tr>
|
||||
<td>- Frequentie</td>
|
||||
<td>- Toonfrequentsignalen</td>
|
||||
</td>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<div class="box">
|
||||
<img src="/images/spanningsdips.png" alt="#">
|
||||
<div class="desc"><a href="https://phasetophase.nl/boek/boek_2_11.html" target="_blank">Spanningsdips</a></div>
|
||||
</div>
|
||||
<div class="box">
|
||||
<div class="desc">
|
||||
<h2>Voltage</h2>
|
||||
<p>
|
||||
In de afbeelding hiernaast is een voorbeeld te zien van een spanningsdips.
|
||||
De voltage daalt tijdelijk waardoor apparaten kunnen uitvallen.
|
||||
Wanneer dit continu optreed is er sprake van een verlaagd spanningsniveau.
|
||||
Wettelijk gezien mag de voltage op het stroomnetwerk tussen de huizen niet verder dan 10% afwijken,
|
||||
dit is de reden dat zonnepanelen in de zomer te veel stroom opwekken waardoor de voltage de bovengrens
|
||||
van 253v aantikken en de zonnepanelen uitschakelt.
|
||||
</p>
|
||||
<p>
|
||||
Naast spanningsdips kunnen er ook spanningsonderbreking optreden,
|
||||
er is dan tijdelijk geen stroom waardoor apparaten kunnen uitvallen.
|
||||
Zo kan je bijvoorbeeld zien dat het licht even dimmer wordt of uit gaat.
|
||||
Wanneer dit constant optreed is er sprake van flickering.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<div class="box">
|
||||
<div class="desc">
|
||||
<h2>Cos-Phi</h2>
|
||||
<p>
|
||||
De Cos Phi geeft aan hoeveel stroom er verloren gaat bij het transporteren van stroom door leidingen en/of apparaten.
|
||||
De Cos Phi is simpel uit te leggen met een kar die over het spoor getrokken wordt.
|
||||
Wanneer iemand voor de kar staat en de kar vooruit trekt is de hoek 0 graden(phi=0) en is het gemakkelijk om de kar vooruit te trekken.
|
||||
Wanneer de persoon naast de kar gaat staan en het touw trekt in een hoek (Phi) zal de persoon merken dat het meer moeite kost om de wagen vooruit te trekken.
|
||||
</br></br>
|
||||
Wanneer de hoek te groot wordt om de kar vooruit te trekken, spreken mensen over een slechte Cosinus Phi, wat kan leiden tot:</br>
|
||||
- Overbelasting en oververhitting van de elektrische installatie.</br>
|
||||
- Hogere aansluitwaarde bij netbeheerder dan noodzakelijk.</br>
|
||||
- Het onbedoeld uitschakelen van installatie automaten en dus processen.</br>
|
||||
- Een boete van het energiebedrijf en een hogere energierekening dan nodig.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="box">
|
||||
<img src="/images/cos-phi.png" alt="#">
|
||||
<div class="desc"><a href="https://www.worldpowerfaqs.com/nl/categories/theoretical-explanation/64-what-is-cos" target="_blank">Cos-Phi</a></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<div class="box">
|
||||
<img src="/images/blindvermogen.jpg" alt="#">
|
||||
<div class="desc"><a href="https://fortop.nl/knowledge/white-papers/whitepaper-cos-phi-compensatie/" target="_blank">Blindvermogen</a></div>
|
||||
</div>
|
||||
<div class="box">
|
||||
<div class="desc">
|
||||
<h2>Blindvermogen</h2>
|
||||
<p>
|
||||
Het elektriciteitsnetwerk levert energie bestaat uit actieve energie (Pw) en reactieve energie (Pb) aan de eindgebruiker.
|
||||
De eindgebruiker sluit bijvoorbeeld een motor aan het elektriciteitsnetwerk.
|
||||
De motor gebruikt magnetisme om de motor rond te laten draaien.
|
||||
Hierdoor zijn de stroom en spanning niet meer in fase waardoor de spanning begint na te ijlen(figuur 14).
|
||||
De mate waarin de stroom na-ijlt op de spanning geven we aan met phi.
|
||||
</br></br>
|
||||
De arbeidsfactor kan worden berekend met de volgende formulule: </br>
|
||||
<b>Pw / Ps = cosΦ</b>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<div class="box">
|
||||
<div class="desc">
|
||||
<h2>Blindvermogen & bier</h2>
|
||||
<p>
|
||||
In de afbeelding hiernast is de cos phi vergeleken met een glas bier met een grote schuimkraag.
|
||||
In het voorbeeld is het bier het echte vermogen dat gebruikt wordt in het apparaat en het schuim is het vermogen dat extra nodig is door het naijlen van het stroom.
|
||||
Het totale bierglas aan energie is benodigd om het apparaat goed te laten werken.
|
||||
Tijdens het aanleggen en het aansluiten van de elektrische infrastructuur zal er goed moeten worden gekeken naar de blindstroom.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="box">
|
||||
<img src="/images/blindvermogen_bier.jpg" alt="#">
|
||||
<div class="desc"><a href="https://www.worldpowerfaqs.com/nl/categories/theoretical-explanation/64-what-is-cos" target="_blank">Blindvermogen & Bier</a></div>
|
||||
</div>
|
||||
</div>
|
||||
48
content/powerquality/realtime.html
Normal file
48
content/powerquality/realtime.html
Normal file
@ -0,0 +1,48 @@
|
||||
<div class="section">
|
||||
<h2>Options</h2>
|
||||
<p id="buttons"></p>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
|
||||
<div class="box_tree" style="text-align:left;">
|
||||
<p>
|
||||
<b>Meter links:</b>
|
||||
<select onchange="double()" id="meter1">
|
||||
</select>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="box_tree" style="text-align:center;">
|
||||
<p>
|
||||
<b>Tijd:</b>
|
||||
<select onchange="destroyChart(); loadChart()" id="hours">
|
||||
<option value="0.016">1 minuut</option>
|
||||
<option value="0.053">5 minuten</option>
|
||||
<option value="0.25">15 minuten</option>
|
||||
<option value="1">1 uur</option>
|
||||
<option value="2" selected>2 uur</option>
|
||||
<option value="24">1 Dag</option>
|
||||
<option value="48">2 Dagen</option>
|
||||
<option value="72">3 Dagen</option>
|
||||
<option value="168">7 Dagen</option>
|
||||
<option value="10000">Alles</option>
|
||||
</select>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="box_tree" style="text-align:right;">
|
||||
<p>
|
||||
<b>Meter rechts:</b>
|
||||
<select onchange="double()" id="meter2">
|
||||
</select>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="section">
|
||||
<div id="left" class="box_full"></div>
|
||||
<div id="right" style="display: none" class="box"></div>
|
||||
</div>
|
||||
65
content/powerquality/verstoringen.html
Normal file
65
content/powerquality/verstoringen.html
Normal file
@ -0,0 +1,65 @@
|
||||
<div class="section" style="text-align:center;">
|
||||
<h2>Options</h2>
|
||||
</div>
|
||||
|
||||
<div class="section" style="text-align:center;">
|
||||
|
||||
<div class="box_tree" style="text-align:left;">
|
||||
<p>
|
||||
<b>Meter links:</b>
|
||||
<select onchange="double()" id="meter1">
|
||||
</select>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="box_tree" style="text-align:center;">
|
||||
<p>
|
||||
<b>Tijd:</b>
|
||||
<select onchange="destroyChart(); loadChart()" id="hours">
|
||||
<option value="0.016">1 minuut</option>
|
||||
<option value="0.053">5 minuten</option>
|
||||
<option value="0.25">15 minuten</option>
|
||||
<option value="1">1 uur</option>
|
||||
<option value="2" selected>2 uur</option>
|
||||
<option value="24">1 Dag</option>
|
||||
<option value="48">2 Dagen</option>
|
||||
<option value="72">3 Dagen</option>
|
||||
<option value="10000">Alles</option>
|
||||
</select>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="box_tree" style="text-align:right;">
|
||||
<p>
|
||||
<b>Meter rechts:</b>
|
||||
<select onchange="double()" id="meter2">
|
||||
</select>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="section">
|
||||
|
||||
<div id="left" class="box_full">
|
||||
<div class="box_full_pq"><chart meter-source="meter1" attr="ugem" label="Voltage - Ugem" min=227 max=232 hours=24 unit="Volt"></chart></div>
|
||||
<div class="box_full_pq"><chart meter-source="meter1" attr="igem" label="Ampère - Igem" hours=24 unit="Ampère"></chart></div>
|
||||
<div class="box_full_pq"><chart meter-source="meter1" attr="imax" label="Ampère - Imax" hours=24 unit="Ampère"></chart></div>
|
||||
<div class="box_full_pq"><chart meter-source="meter1" attr="pmax" label="Werkelijkvermogen - Pmax" hours=24 unit="Watt"></chart></div>
|
||||
<div class="box_full_pq"><chart meter-source="meter1" attr="smax" label="Schijnbaarvermogen - Smax" hours=24 unit="VoltAmpère"></chart></div>
|
||||
<div class="box_full_pq"><chart meter-source="meter1" attr="cgem" label="Cos-Phi" min="-1" max=1 hours=24 unit="Cos-Phi"></chart></div>
|
||||
<div class="box_full_pq"><chart meter-source="meter1" attr="ep" label="EP" hours=24 unit="EP"></chart></div>
|
||||
</div>
|
||||
|
||||
<div id="right" style="display: none" class="box">
|
||||
<div class="box_full_pq"><chart meter-source="meter2" attr="ugem" label="Voltage - Ugem" min=227 max=232 hours=24 unit="Volt"></chart></div>
|
||||
<div class="box_full_pq"><chart meter-source="meter2" attr="igem" label="Ampère - Igem" hours=24 unit="Ampère"></chart></div>
|
||||
<div class="box_full_pq"><chart meter-source="meter2" attr="imax" label="Ampère - Imax" hours=24 unit="Ampère"></chart></div>
|
||||
<div class="box_full_pq"><chart meter-source="meter2" attr="pmax" label="Werkelijkvermogen - Pmax" hours=24 unit="Watt"></chart></div>
|
||||
<div class="box_full_pq"><chart meter-source="meter2" attr="smax" label="Schijnbaarvermogen - Smax" hours=24 unit="VoltAmpère"></chart></div>
|
||||
<div class="box_full_pq"><chart meter-source="meter2" attr="cgem" label="Cos-Phi" min="-1" max=1 hours=24 unit="Cos-Phi"></chart></div>
|
||||
<div class="box_full_pq"><chart meter-source="meter2" attr="ep" label="EP" hours=24 unit="EP"></chart></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
244
css/style.css
Normal file
244
css/style.css
Normal file
@ -0,0 +1,244 @@
|
||||
body {
|
||||
font-size: 10.5pt;
|
||||
line-height: 1.75em;
|
||||
font-family: Verdana, sans-serif, Arial;
|
||||
color: #000000;
|
||||
margin:0 auto;
|
||||
padding:0;
|
||||
}
|
||||
html {
|
||||
overflow-y: scroll;
|
||||
}
|
||||
.container {
|
||||
width: 100%;
|
||||
margin-top: 69px;
|
||||
margin-bottom: 55px;
|
||||
display: inline-block;
|
||||
}
|
||||
header {
|
||||
color: black;
|
||||
border-bottom: 1px solid #ccc!important;
|
||||
margin-bottom: 40px;
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
margin:auto;
|
||||
}
|
||||
|
||||
header img {
|
||||
max-width: 100%;
|
||||
width:100%;
|
||||
height: auto;
|
||||
animation: animations linear 50s infinite;
|
||||
}
|
||||
#content {
|
||||
display: inline-block;
|
||||
width:100%;
|
||||
}
|
||||
.section {
|
||||
padding: 0 6px;
|
||||
margin: 6px 0;
|
||||
float: left;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
overflow: auto;
|
||||
}
|
||||
.box_full {
|
||||
padding: 0 6px;
|
||||
margin: 6px 0;
|
||||
float: left;
|
||||
width: 100%;
|
||||
#height:400px;
|
||||
}
|
||||
|
||||
.box {
|
||||
padding: 0 6px;
|
||||
margin: 6px 0;
|
||||
float: left;
|
||||
width: 49.99999%;
|
||||
}
|
||||
.box img {
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
}
|
||||
.box_tree {
|
||||
padding: 0 6px;
|
||||
margin: 6px 0;
|
||||
float: left;
|
||||
width: 33.33333%;
|
||||
}
|
||||
.box_tree img {
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
}
|
||||
chart {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.desc {
|
||||
padding: 15px;
|
||||
text-align: center;
|
||||
}
|
||||
text.highcharts-credits {
|
||||
display: none;
|
||||
}
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
empty-cells: hide;
|
||||
}
|
||||
table, td, th {
|
||||
border: 1px solid black;
|
||||
}
|
||||
th {
|
||||
height: 50px;
|
||||
}
|
||||
tr.color td{
|
||||
background-color: lightgray;
|
||||
}
|
||||
|
||||
footer {
|
||||
padding: 1em;
|
||||
color: white;
|
||||
background-color: #333;
|
||||
clear: left;
|
||||
text-align: center;
|
||||
position: fixed;
|
||||
z-index:1;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
}
|
||||
@keyframes animations {
|
||||
0% {filter: hue-rotate(0deg);}
|
||||
50% {filter: hue-rotate(180deg);}
|
||||
100% {filter: hue-rotate(360deg);}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1000px) {
|
||||
.box_tree {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 800px) {
|
||||
.box {
|
||||
width: 100%;
|
||||
}
|
||||
.box_tree {
|
||||
width: 100%;
|
||||
}
|
||||
header img {
|
||||
max-width: initial;
|
||||
width:auto;
|
||||
height:120px;
|
||||
margin: 0 -250px;
|
||||
}
|
||||
footer {
|
||||
left: auto;
|
||||
bottom: auto;
|
||||
position: static;
|
||||
z-index:0;
|
||||
}
|
||||
.container {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
smiley {
|
||||
font-size: 30px;
|
||||
line-height: 36px;
|
||||
width: 150px;
|
||||
display: inline-block;
|
||||
text-align: right;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
smiley::before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
vertical-align: top;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.positive {
|
||||
color: #5C5;
|
||||
}
|
||||
.positive::before {
|
||||
background: url(/images/positive.png);
|
||||
}
|
||||
|
||||
.neutral {
|
||||
color: #555;
|
||||
}
|
||||
.neutral::before {
|
||||
background: url(/images/neutral.png);
|
||||
}
|
||||
|
||||
.negative {
|
||||
color: #C55;
|
||||
}
|
||||
.negative::before {
|
||||
background: url(/images/negative.png);
|
||||
}
|
||||
|
||||
|
||||
input[type="checkbox"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
input:checked + b {
|
||||
background: #DDF;
|
||||
}
|
||||
|
||||
input + b {
|
||||
width: 70px;
|
||||
display: inline-block;
|
||||
color: #333;
|
||||
background: #eee;
|
||||
margin: 0 10px 10px 0;
|
||||
line-height: 30px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
header img, input + b {
|
||||
animation: animations linear 50s infinite;
|
||||
}
|
||||
|
||||
iframe {
|
||||
display:block;
|
||||
width:100%;
|
||||
min-height:200px;
|
||||
max-width:1000px;
|
||||
float:none;
|
||||
margin:auto;"
|
||||
}
|
||||
|
||||
|
||||
.tooltip {
|
||||
display: inline-block;
|
||||
border-bottom: 1px dotted black;
|
||||
}
|
||||
|
||||
.tooltip .tooltiptext {
|
||||
visibility: hidden;
|
||||
width: 200px;
|
||||
background-color: black;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
border-radius: 6px;
|
||||
padding: 5px 0;
|
||||
|
||||
/* Position the tooltip */
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.tooltip:hover .tooltiptext {
|
||||
visibility: visible;
|
||||
}
|
||||
29
css/style_headernav.css
Normal file
29
css/style_headernav.css
Normal file
@ -0,0 +1,29 @@
|
||||
.headernav {
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
background-color: white;
|
||||
padding: 8px 16px!important;
|
||||
}
|
||||
.headernav a {
|
||||
float: right;
|
||||
display: block;
|
||||
color: black;
|
||||
text-align: center;
|
||||
padding: 14px 16px;
|
||||
text-decoration: none;
|
||||
}
|
||||
.headernav a:hover {
|
||||
background-color: lightgray;
|
||||
}
|
||||
.headernav .active {
|
||||
background-color: gray;
|
||||
}
|
||||
.headernav a.left {
|
||||
float: left;
|
||||
display: block;
|
||||
text-align: center;
|
||||
padding: 14px;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
font-size: 18pt;
|
||||
}
|
||||
65
css/style_topnav.css
Normal file
65
css/style_topnav.css
Normal file
@ -0,0 +1,65 @@
|
||||
.topnav {
|
||||
overflow: hidden;
|
||||
top: 0;
|
||||
left: 0;
|
||||
position: fixed;
|
||||
z-index:1;
|
||||
width: 100%;
|
||||
border-bottom: 1px solid gray;
|
||||
box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
|
||||
background-color: white;
|
||||
padding: 8px 16px!important;
|
||||
}
|
||||
.topnav a {
|
||||
float: right;
|
||||
display: block;
|
||||
color: black;
|
||||
text-align: center;
|
||||
padding: 14px 16px;
|
||||
text-decoration: none;
|
||||
}
|
||||
.topnav a:hover {
|
||||
background-color: lightgray;
|
||||
}
|
||||
.topnav .active {
|
||||
background-color: gray;
|
||||
}
|
||||
.topnav .icon {
|
||||
display: none;
|
||||
}
|
||||
.topnav a.left {
|
||||
float: left;
|
||||
display: block;
|
||||
text-align: center;
|
||||
padding: 14px;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
font-size: 18pt;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 700px) {
|
||||
.topnav a:not(:first-child) {
|
||||
display: none;
|
||||
}
|
||||
.topnav a.icon {
|
||||
float: right;
|
||||
display: block;
|
||||
}
|
||||
.topnav.responsive .icon {
|
||||
position: absolute;
|
||||
right: 16px;
|
||||
top: 8px;
|
||||
}
|
||||
.topnav.responsive a {
|
||||
float: none;
|
||||
display: block;
|
||||
text-align: left;
|
||||
}
|
||||
.topnav.responsive {float: none;}
|
||||
|
||||
.topnav.responsive {
|
||||
display: block;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
BIN
images/5g.jpg
Normal file
BIN
images/5g.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 61 KiB |
BIN
images/Banner1.jpg
Normal file
BIN
images/Banner1.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 120 KiB |
BIN
images/Banner2.jpg
Normal file
BIN
images/Banner2.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 267 KiB |
BIN
images/IMG_1918.jpg
Normal file
BIN
images/IMG_1918.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.7 MiB |
BIN
images/IMG_1946.jpg
Normal file
BIN
images/IMG_1946.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.9 MiB |
BIN
images/architectuur.png
Normal file
BIN
images/architectuur.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 121 KiB |
BIN
images/blindvermogen.jpg
Normal file
BIN
images/blindvermogen.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
BIN
images/blindvermogen_bier.jpg
Normal file
BIN
images/blindvermogen_bier.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
BIN
images/cos-phi.png
Normal file
BIN
images/cos-phi.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 257 KiB |
BIN
images/enexis.jpg
Normal file
BIN
images/enexis.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 76 KiB |
BIN
images/enie.jpeg
Normal file
BIN
images/enie.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 155 KiB |
BIN
images/infrastructuur.png
Normal file
BIN
images/infrastructuur.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.7 MiB |
BIN
images/middenspanningsstation.jpg
Normal file
BIN
images/middenspanningsstation.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 639 KiB |
BIN
images/negative.png
Normal file
BIN
images/negative.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 924 B |
BIN
images/neutral.png
Normal file
BIN
images/neutral.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 528 B |
BIN
images/positive.png
Normal file
BIN
images/positive.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 859 B |
BIN
images/spanningsdips.png
Normal file
BIN
images/spanningsdips.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 46 KiB |
BIN
images/technischoverzicht.png
Normal file
BIN
images/technischoverzicht.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 129 KiB |
BIN
images/wisselspanning.jpg
Normal file
BIN
images/wisselspanning.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
52
index.html
Normal file
52
index.html
Normal file
@ -0,0 +1,52 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="css/style.css" type="text/css" />
|
||||
<link rel="stylesheet" href="css/style_topnav.css" type="text/css" />
|
||||
<link rel="stylesheet" href="css/style_headernav.css" type="text/css" />
|
||||
|
||||
<script src="scripts/loadgraphs.js" type="text/javascript"></script>
|
||||
<script src="scripts/highcharts-custom.src.js" type="text/javascript"></script>
|
||||
<script src="scripts/chart.js" type="text/javascript"></script>
|
||||
<script src="scripts/smiley.js" type="text/javascript"></script>
|
||||
<script src="scripts/topnav.js" type="text/javascript"></script>
|
||||
<!--
|
||||
<script src="https://code.highcharts.com/modules/boost-canvas.js"></script>
|
||||
<script src="https://code.highcharts.com/modules/boost.js"></script>
|
||||
-->
|
||||
</head>
|
||||
|
||||
<body onload="changeLinks(); document.getElementById('home').click();">
|
||||
<div class="container">
|
||||
|
||||
<!-- Logo & Topnav -->
|
||||
<div class="topnav" id="Topnav">
|
||||
<a class="left" href="nav/home-nav.html">Energy4all</a>
|
||||
<a id="home" href="nav/home-nav.html">Home</a>
|
||||
<a href="nav/netwerk-nav.html">Netwerk</a>
|
||||
<a href="nav/handelsplatform-nav.html">Handelsplatform</a>
|
||||
<a href="nav/powerquality-nav.html">PowerQuality</a>
|
||||
<a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">☰</a>
|
||||
</div>
|
||||
|
||||
<!-- Header image -->
|
||||
<header>
|
||||
<img src="images/Banner1.jpg" alt="">
|
||||
</header>
|
||||
|
||||
<!-- Page content -->
|
||||
|
||||
<div id ="content"></div>
|
||||
<div id ="page"></div>
|
||||
|
||||
<!-- End page content -->
|
||||
|
||||
<!-- Footer -->
|
||||
<footer>Copyright © Kishan de Mul & Dirk de Haan</footer>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
12
nav/handelsplatform-nav.html
Normal file
12
nav/handelsplatform-nav.html
Normal file
@ -0,0 +1,12 @@
|
||||
<head>
|
||||
<title>Energy4all - Handelsplatform</title>
|
||||
</head>
|
||||
|
||||
<header>
|
||||
<div class="headernav" id="headernav">
|
||||
<a class="left" href="content/handelsplatform/(no)go.html">Handelsplatform</a>
|
||||
<a id="home_header" href="content/handelsplatform/dashboard.html">Dashboard</a>
|
||||
<a href="content/handelsplatform/voorspelling.html">Voorspelling</a>
|
||||
<a href="content/handelsplatform/prijzen.html">Prijzen</a>
|
||||
</div>
|
||||
</header>
|
||||
13
nav/home-nav.html
Normal file
13
nav/home-nav.html
Normal file
@ -0,0 +1,13 @@
|
||||
<head>
|
||||
<title>Energy4all - Home</title>
|
||||
</head>
|
||||
|
||||
<header>
|
||||
<div class="headernav" id="headernav">
|
||||
<a class="left" href="content/home/project.html">Home</a>
|
||||
<a href="content/home/api.html">API</a>
|
||||
<a href="content/home/infrastructuur.html">Infrastructuur</a>
|
||||
<a href="content/home/bedrijven.html">Bedrijven</a>
|
||||
<a id="home_header" href="content/home/project.html">Project</a>
|
||||
</div>
|
||||
</header>
|
||||
11
nav/netwerk-nav.html
Normal file
11
nav/netwerk-nav.html
Normal file
@ -0,0 +1,11 @@
|
||||
<head>
|
||||
<title>Energy4all - 5Gnetwerk</title>
|
||||
</head>
|
||||
|
||||
<header>
|
||||
<div class="headernav" id="headernav">
|
||||
<a class="left" href="content/netwerk/5gnetwerk.html">Netwerk</a>
|
||||
<a id="home_header" href="content/netwerk/5gnetwerk.html">5g Netwerk</a>
|
||||
<a href="content/netwerk/betrouwbaarheid.html">Betrouwbaarheid netwerk</a>
|
||||
</div>
|
||||
</header>
|
||||
12
nav/powerquality-nav.html
Normal file
12
nav/powerquality-nav.html
Normal file
@ -0,0 +1,12 @@
|
||||
<head>
|
||||
<title>Energy4all - PowerQuality</title>
|
||||
</head>
|
||||
|
||||
<header>
|
||||
<div class="headernav" id="headernav">
|
||||
<a class="left" href="content/powerquality/info.html">PowerQuality</a>
|
||||
<a id="home_header" href="content/powerquality/info.html">Informatie</a>
|
||||
<a href="content/powerquality/verstoringen.html">Verstoringen</a>
|
||||
<a href="content/powerquality/realtime.html">Realtime grafieken</a>
|
||||
</div>
|
||||
</header>
|
||||
137
scripts/chart.js
Normal file
137
scripts/chart.js
Normal file
@ -0,0 +1,137 @@
|
||||
var destroy = [];
|
||||
|
||||
function loadChart() {
|
||||
var charts = document.getElementsByTagName('chart');
|
||||
for (var i = 0; i < charts.length; i++) {
|
||||
var chart = charts[i];
|
||||
destroy.push(getGraph(chart, chart.getAttribute('label'), chart.getAttribute('unit'), chart.getAttribute('attr'), Number(chart.getAttribute('min')), Number(chart.getAttribute('max')), chart.getAttribute('meter-source')));
|
||||
}
|
||||
}
|
||||
|
||||
function destroyChart() {
|
||||
for (var i = 0; i < destroy.length; i++) {
|
||||
if (destroy[i] == null) continue;
|
||||
destroy[i]();
|
||||
}
|
||||
destroy = [];
|
||||
}
|
||||
|
||||
function getGraph(ctx, title, unit, attribute, min, max, meterSource) {
|
||||
if (attribute == undefined) return null;
|
||||
var hours= Number(document.getElementById("hours").value);
|
||||
var meter= document.getElementById(meterSource).value;
|
||||
if (meter == 0) return;
|
||||
|
||||
var labels = [];
|
||||
var p = [null, [], [], []];
|
||||
var n = [];
|
||||
|
||||
var chart = Highcharts.chart(ctx, {
|
||||
colors: ['#C55', '#5C5', '#55C', '#555'],
|
||||
chart: {
|
||||
zoomType: 'x',
|
||||
animation: false,
|
||||
},
|
||||
title: {
|
||||
text: title
|
||||
},
|
||||
xAxis: {
|
||||
type: 'datetime'
|
||||
},
|
||||
yAxis: {
|
||||
softMin: min,
|
||||
softMax: max,
|
||||
title: {
|
||||
text: unit
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
enabled: true
|
||||
},
|
||||
tooltip: {
|
||||
shared: true
|
||||
},
|
||||
plotOptions: {
|
||||
series: {
|
||||
marker: {
|
||||
radius: 0
|
||||
},
|
||||
lineWidth: 2,
|
||||
states: {
|
||||
hover: {
|
||||
lineWidth:2
|
||||
}
|
||||
},
|
||||
animation: false
|
||||
}
|
||||
}
|
||||
});
|
||||
var init = false;
|
||||
var start = new Date(Date.now()-1000*60*60*hours)
|
||||
var timeout;
|
||||
var updateGraphData = function() {
|
||||
fetch('https://5groningen02.housing.rug.nl/api/pq/'+meter+'/'+attribute+'/'+start.toISOString())
|
||||
.then(function (response) {
|
||||
if (response.status != 200) return new Promise((resolve) => { resolve([]); });
|
||||
return response.json()
|
||||
})
|
||||
.then(function (data) {
|
||||
if (data == null) {
|
||||
if (hours <= 24) timeout = setTimeout(updateGraphData, 1000);
|
||||
return
|
||||
}
|
||||
|
||||
if (!init) {
|
||||
init = true
|
||||
|
||||
chart.addSeries({type: 'line', name: 'Phase 1', data: []});
|
||||
chart.addSeries({type: 'line', name: 'Phase 2', data: []});
|
||||
chart.addSeries({type: 'line', name: 'Phase 3', data: []});
|
||||
|
||||
if (data[0].null != null) chart.addSeries({type: 'line', name: 'Null', data: [], visible: false});
|
||||
}
|
||||
|
||||
data.reverse();
|
||||
data.forEach(function(item) {
|
||||
var t = formatTime(item.time);
|
||||
if ((p[1].length > 0) && (p[1][0][0] < t-(hours*60*60*1000))) {
|
||||
p[1].shift(); p[2].shift(); p[3].shift(); n.shift();
|
||||
}
|
||||
|
||||
p[1].push([t, item.phase_1]);
|
||||
p[2].push([t, item.phase_2]);
|
||||
p[3].push([t, item.phase_3]);
|
||||
|
||||
if (item.null != null) n.push([t, item.null]);
|
||||
|
||||
start = new Date(new Date(item.time).getTime()+1000);
|
||||
});
|
||||
chart.series[0].setData(p[1]);
|
||||
chart.series[1].setData(p[2]);
|
||||
chart.series[2].setData(p[3]);
|
||||
if (chart.series.length == 4) chart.series[3].setData(n);
|
||||
|
||||
chart.update({}, true);
|
||||
|
||||
if (hours <= 24) timeout = setTimeout(updateGraphData, 1000);
|
||||
})
|
||||
}
|
||||
|
||||
updateGraphData();
|
||||
|
||||
return function() {
|
||||
clearTimeout(timeout);
|
||||
chart.destroy();
|
||||
}
|
||||
}
|
||||
|
||||
function formatTime(t) {
|
||||
var d = new Date(t)
|
||||
return d-0+2*60*60*1000
|
||||
}
|
||||
|
||||
Number.prototype.pad = function(size) {
|
||||
var s = String(this);
|
||||
while (s.length < (size || 2)) {s = "0" + s;}
|
||||
return s;
|
||||
}
|
||||
38086
scripts/highcharts-custom.src.js
Normal file
38086
scripts/highcharts-custom.src.js
Normal file
File diff suppressed because it is too large
Load Diff
97
scripts/loadgraphs.js
Normal file
97
scripts/loadgraphs.js
Normal file
@ -0,0 +1,97 @@
|
||||
function double() {
|
||||
if (document.getElementById("meter1") == undefined) return null;
|
||||
var element2 = document.getElementById("left");
|
||||
var element = document.getElementById("right");
|
||||
|
||||
if (document.getElementById("meter2").value == "0") {
|
||||
element.style.display = "none";
|
||||
element2.className = "box_full";
|
||||
destroyChart(); loadChart();
|
||||
}
|
||||
else {
|
||||
element.style.display = "block";
|
||||
element2.className = "box";
|
||||
destroyChart(); loadChart();
|
||||
}
|
||||
}
|
||||
|
||||
function loadMeters() {
|
||||
if (document.getElementById("meter1") == undefined) return null;
|
||||
var text = "";
|
||||
|
||||
fetch('https://5groningen02.housing.rug.nl/api/pq/meters')
|
||||
.then(function (response) {
|
||||
if (response.status != 200) return new Promise((resolve) => { resolve([]); });
|
||||
return response.json()
|
||||
})
|
||||
.then(function (data) {
|
||||
if (data == null) return;
|
||||
var name = "";
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
if (data[i]["name"] == ""){name= 'new';} else {name = data[i]["name"];}
|
||||
text = text + '<option value="' + data[i]["id"] + '">' + name + '</option>';
|
||||
}
|
||||
if (document.getElementById("meter1") != undefined){
|
||||
document.getElementById("meter1").innerHTML = text;
|
||||
}
|
||||
if (document.getElementById("meter2")!= undefined){
|
||||
document.getElementById("meter2").innerHTML = '<option value="0" selected>Geen</option>' + text;
|
||||
}
|
||||
if (document.getElementById("meter1") && document.getElementById("meter2") != undefined){
|
||||
double();
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function loadPowerQualityOptions() {
|
||||
if (document.getElementById("buttons") == undefined) return null;
|
||||
var text = "";
|
||||
|
||||
fetch('https://5groningen02.housing.rug.nl/api/pq/list')
|
||||
.then(function (response) {
|
||||
if (response.status != 200) return new Promise((resolve) => { resolve([]); });
|
||||
return response.json()
|
||||
})
|
||||
.then(function (data) {
|
||||
if (data == null) return;
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
text = text + '<label><input onclick="Hidediv()" type="checkbox" name="'+ data[i] + '" value="'+ data[i] + '"><b>'+ data[i] + '</B></label>'
|
||||
}
|
||||
if (document.getElementById("buttons") != undefined){
|
||||
document.getElementById("buttons").innerHTML = text;
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
var mapping = {
|
||||
'ugem': {label:'Voltage (Gemiddelde)', unit: 'Volt', min:'220', max:'240'},
|
||||
'igem': {label:'Ampère (Gemiddelde)', unit: 'Ampère', min:'', max:''},
|
||||
'imax': {label:'Ampère (max-piek)', unit: 'Ampère', min:'', max:''},
|
||||
'pmax': {label:'Werkelijkvermogen (max-piek)', unit: 'Watt', min:'', max:''},
|
||||
'smax': {label:'Schijnbaarvermogen (max-piek)', unit: 'VoltAmpère', min:'', max:''},
|
||||
'cgem': {label:'Cos-Phi (Gemiddelde)', unit: 'Cos-Phi', min:'', max:''},
|
||||
'ep': {label:'EP', unit: 'EP', min:'', max:''},
|
||||
};
|
||||
|
||||
function Hidediv() {
|
||||
if (document.getElementById("buttons") == undefined) return null;
|
||||
var div_left = "";
|
||||
var div_right = "";
|
||||
|
||||
document.querySelectorAll("#buttons label input").forEach(function (i) {
|
||||
if (i.checked == true){
|
||||
var opts = mapping[i.name] || {};
|
||||
div_left = div_left + '<div class="box_full"><chart meter-source="meter1" attr="'+ i.name +'" label="'+ (opts.label || i.name) +'" unit="'+ (opts.unit || i.name) +'" min="'+ (opts.min) +'" max="'+ (opts.max) +'"></chart></div>'
|
||||
div_right = div_right + '<div class="box_full"><chart meter-source="meter2" attr="'+ i.name +'" label="'+ (opts.label || i.name) +'" unit="'+ (opts.unit || i.name) +'" min="'+ (opts.min) +'" max="'+ (opts.max) +'"></chart></div>'
|
||||
}
|
||||
})
|
||||
|
||||
if (document.getElementById("left") != undefined){
|
||||
document.getElementById("left").innerHTML = div_left;
|
||||
destroyChart(); loadChart();
|
||||
}
|
||||
if (document.getElementById("right") != undefined){
|
||||
document.getElementById("right").innerHTML = div_right;
|
||||
destroyChart(); loadChart();
|
||||
}
|
||||
}
|
||||
38
scripts/meters.js
Normal file
38
scripts/meters.js
Normal file
@ -0,0 +1,38 @@
|
||||
var destroyMeters = [];
|
||||
|
||||
function loadMeters() {
|
||||
var meters = document.getElementsByTagName('meter');
|
||||
for (var i = 0; i < meters.length; i++) {
|
||||
var meter = meters[i];
|
||||
destroy.push(getMeters(meter, Number.parseInt(meter.getAttribute('phase'))-1, meter.getAttribute('type')));
|
||||
}
|
||||
}
|
||||
|
||||
function destroyMeters() {
|
||||
for (var i = 0; i < destroyMeters.length; i++) {
|
||||
if (destroyMeters[i] == null) continue;
|
||||
destroyMeters[i]();
|
||||
}
|
||||
destroyMeters = [];
|
||||
}
|
||||
|
||||
function getMeters(ctx, phase, type) {
|
||||
var updateMeters = function() {
|
||||
fetch('https://5groningen02.housing.rug.nl/api/pq/meters')
|
||||
.then(function (response) {
|
||||
if (response.status != 200) return new Promise((resolve) => { resolve([]); });
|
||||
return response.json()
|
||||
})
|
||||
.then(function (data) {
|
||||
if (data == null) return;
|
||||
|
||||
var value = data
|
||||
|
||||
ctx.className = value;
|
||||
var text = value.toFixed(1);
|
||||
ctx.innerText = text;
|
||||
})
|
||||
}
|
||||
|
||||
return function()
|
||||
}
|
||||
56
scripts/smiley.js
Normal file
56
scripts/smiley.js
Normal file
@ -0,0 +1,56 @@
|
||||
var destroy = [];
|
||||
|
||||
function loadSmiley() {
|
||||
var smileys = document.getElementsByTagName('smiley');
|
||||
for (var i = 0; i < smileys.length; i++) {
|
||||
var smiley = smileys[i];
|
||||
destroy.push(getSmiley(smiley, Number.parseInt(smiley.getAttribute('phase'))-1, smiley.getAttribute('type')));
|
||||
}
|
||||
}
|
||||
|
||||
function destroySmiley() {
|
||||
for (var i = 0; i < destroy.length; i++) {
|
||||
if (destroy[i] == null) continue;
|
||||
destroy[i]();
|
||||
}
|
||||
destroy = [];
|
||||
}
|
||||
|
||||
function getSmiley(ctx, phase, type) {
|
||||
if (type == undefined) return null;
|
||||
var meter=document.getElementById("meter1").value;
|
||||
|
||||
var updateSmiley = function() {
|
||||
fetch('https://5groningen02.housing.rug.nl/api/trading/'+meter+'/scores')
|
||||
.then(function (response) {
|
||||
if (response.status != 200) return new Promise((resolve) => { resolve([]); });
|
||||
return response.json()
|
||||
})
|
||||
.then(function (data) {
|
||||
if (data == null) return;
|
||||
|
||||
var value = data[phase][type]
|
||||
var c = 'neutral'
|
||||
if (value >= 1) {
|
||||
c = 'positive'
|
||||
}
|
||||
else if (value <= -1) {
|
||||
c = 'negative'
|
||||
}
|
||||
|
||||
ctx.className = c;
|
||||
var text = value.toFixed(1);
|
||||
if (text == "-0.0") text = "0.0";
|
||||
ctx.innerText = text;
|
||||
})
|
||||
}
|
||||
|
||||
updateSmiley();
|
||||
var interval = setInterval(function() {
|
||||
updateSmiley();
|
||||
}, 5000)
|
||||
|
||||
return function() {
|
||||
clearInterval(interval);
|
||||
}
|
||||
}
|
||||
131
scripts/topnav.js
Normal file
131
scripts/topnav.js
Normal file
@ -0,0 +1,131 @@
|
||||
/* menu dropdown (mobile) */
|
||||
function myFunction() {
|
||||
var x = document.getElementById("Topnav");
|
||||
if (x.className === "topnav") {
|
||||
x.className += " responsive";
|
||||
} else {
|
||||
x.className = "topnav";
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Topnav */
|
||||
function changeLinks() {
|
||||
var links = document.getElementById('Topnav').getElementsByTagName('a');
|
||||
|
||||
for (var i = 0; i < links.length; i++) {
|
||||
if (links[i].className == 'icon') continue;
|
||||
links[i].addEventListener('click', load, false);
|
||||
}
|
||||
};
|
||||
|
||||
function load(e) {
|
||||
if (e.which != 1) return;
|
||||
var target = e.target;
|
||||
while (target.nodeName != 'A') {
|
||||
target = target.parentNode;
|
||||
}
|
||||
|
||||
e.preventDefault();
|
||||
url = target.href
|
||||
|
||||
var siblings = target.parentNode.childNodes
|
||||
for (i = 0; i < siblings.length; i++) {
|
||||
if (siblings[i].className != '' && siblings[i].className != 'active') continue;
|
||||
|
||||
siblings[i].className="";
|
||||
if (siblings[i].href == url) {
|
||||
siblings[i].className="active";
|
||||
}
|
||||
}
|
||||
|
||||
fetch(url, {credentials: 'same-origin'}).then(function(response) {
|
||||
return response.text()})
|
||||
.then(function(text){
|
||||
document.getElementById("content").innerHTML=text;
|
||||
changeLinks_headernav();
|
||||
document.getElementById('home_header').click();
|
||||
});
|
||||
}
|
||||
|
||||
/* Headernav */
|
||||
function changeLinks_headernav() {
|
||||
var links = document.getElementById('headernav').getElementsByTagName('a');
|
||||
|
||||
for (var i = 0; i < links.length; i++) {
|
||||
links[i].addEventListener('click', load_headernav, false);
|
||||
}
|
||||
};
|
||||
|
||||
function load_headernav(e) {
|
||||
if (e.which != 1) return;
|
||||
var target = e.target;
|
||||
while (target.nodeName != 'A') {
|
||||
target = target.parentNode;
|
||||
}
|
||||
|
||||
e.preventDefault();
|
||||
url = target.href
|
||||
|
||||
var siblings = target.parentNode.childNodes
|
||||
for (i = 0; i < siblings.length; i++) {
|
||||
if (siblings[i].className != '' && siblings[i].className != 'active') continue;
|
||||
|
||||
siblings[i].className="";
|
||||
if (siblings[i].href == url) {
|
||||
siblings[i].className="active";
|
||||
}
|
||||
}
|
||||
|
||||
destroyChart()
|
||||
fetch(url, {credentials: 'same-origin'}).then(function(response) {
|
||||
return response.text()})
|
||||
.then(function(text){
|
||||
document.getElementById("page").innerHTML=text;
|
||||
if (target.innerText == "API"){change_api();}
|
||||
loadMeters()
|
||||
loadPowerQualityOptions()
|
||||
loadSmiley()
|
||||
history.pushState(null, null,"#" + document.querySelector('.topnav .active').innerText + "/" + target.innerText);
|
||||
});
|
||||
}
|
||||
|
||||
function change_api() {
|
||||
var links = document.getElementById('api').getElementsByTagName('a');
|
||||
|
||||
for (var i = 0; i < links.length; i++) {
|
||||
links[i].addEventListener('click', load_api, false);
|
||||
}
|
||||
};
|
||||
|
||||
function load_api(e) {
|
||||
if (e.which != 1) return;
|
||||
var target = e.target;
|
||||
while (target.nodeName != 'A') {
|
||||
target = target.parentNode;
|
||||
}
|
||||
|
||||
e.preventDefault();
|
||||
url = target.href
|
||||
|
||||
fetch(url).then(function(response) {
|
||||
return response.text()})
|
||||
.then(function(text){
|
||||
document.getElementById("content_api").innerHTML='<h2>'+ url +'</h2><iframe src="'+ url +'"></iframe>';
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
/* History */
|
||||
window.onpopstate = function () {
|
||||
var list = window.location.hash.substr(1).split('/');
|
||||
|
||||
document.querySelectorAll('.topnav a').forEach(function(e) {
|
||||
if (e.innerText == list[0]) e.click();
|
||||
});
|
||||
|
||||
document.querySelectorAll('.headernav a').forEach(function(e) {
|
||||
if (e.innerText == list[1]) e.click();
|
||||
});
|
||||
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user