forikolo-template/Beispiel in HTML/index.html

491 lines
14 KiB
HTML
Raw Permalink Normal View History

2025-11-21 22:35:08 +01:00
<!DOCTYPE html>
<html lang="en"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Understanding "2S3P" — Batteries &amp; Solar (Posters)</title>
<link rel="stylesheet" href="assets/forikolo.css" />
<link rel="stylesheet" href="assets/forikolo-svg.css" />
</head>
<body>
<div class="container">
<div class='logo'>
</div>
<article class="poster" id="batteries">
<h1>Understanding "2S3P" notations for batteries</h1>
<div class="section" style="border-top:none;">
<div class="big">1. Basic Meaning</div>
<p><strong>S = Series</strong> → batteriy cells connected <em>end to end</em> → higher voltage<br>⚡ Voltage adds up • Capacity stays the same</p>
<p><strong>P = Parallel</strong> → batteriy cells connected <em>side by side</em> → higher capacity<br>⚡ Voltage stays the same • Capacity adds up</p>
</div>
<div class="section">
<div class="big">2. Example: 2S (Series)</div>
<div class="diagram">
<svg class="svg"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 399 214"
>
<g
transform="translate(20,20)"
>
<line class="connection"
x1="120"
y1="80"
x2="160"
y2="80">
</line>
<rect
class="battery"
x="0"
y="20"
width="120"
height="120"
rx="10">
</rect>
<rect
class="battery"
x="160"
y="20"
width="120"
height="120"
rx="10">
</rect>
<text
x="50"
y="160"
font-size="24"
>+
</text>
<text
x="250"
y="160"
font-size="24"
>-
</text>
</g>
</svg>
</div>
<p class="example">Voltage doubles, capacity stays the same (e.g. 3.7V → 7.4V)</p>
</div>
<div class="section">
<div class="big">3. Example: 3P (Parallel)</div>
<div class="diagram">
<svg class="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 566 200">
<g
fill="none"
transform="translate(20,40)"
>
<line
class="connection"
x1="0"
y1="-20"
x2="520"
y2="-20"
></line>
<line
class="connection"
x1="0"
y1="140"
x2="520"
y2="140"
></line>
<rect
class="battery"
x="0"
y="0"
width="120"
height="120"
rx="10"
></rect>
<rect
class="battery"
x="200"
y="0"
width="120"
height="120"
rx="10"
></rect>
<rect
class="battery"
x="400"
y="0"
width="120"
height="120"
rx="10"
></rect>
</g>
</svg>
</div>
<p class="example">Voltage stays the same, capacity = 3×cell capacity (e.g. 200.0Ah → 600.0Ah)</p>
</div>
<div class="section">
<div class="big">4. Combined: 2S3P</div>
<div class="diagram">
<svg
class="svg"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 500 340"
>
<g
transform="translate(40,40)">
<g>
<line
class="connection"
x1="100"
y1="50"
x2="160"
y2="50"
>
</line>
<line
class="connection"
x1="260"
y1="50"
x2="320"
y2="50"
>
</line>
<rect
class="battery"
x="0"
y="0"
width="100"
height="100"
rx="8"
>
</rect>
<rect
class="battery"
x="160"
y="0"
width="100"
height="100"
rx="8"
>
</rect>
<rect
class="battery"
x="320"
y="0"
width="100"
height="100"
rx="8"
>
</rect>
</g>
<g>
<line
class="connection"
x1="100"
y1="210"
x2="160"
y2="210"
>
</line>
<line
class="connection"
x1="260"
y1="210"
x2="320"
y2="210"
>
</line>
<rect
class="battery"
x="0"
y="160"
width="100"
height="100"
rx="8"
>
</rect>
<rect
class="battery"
x="160"
y="160"
width="100"
height="100"
rx="8"
>
</rect>
<rect
x="320"
y="160"
width="100"
height="100"
rx="8"
>
</rect>
</g>
<line
class="connection"
x1="0"
y1="-20"
x2="420"
y2="-20"
>
</line>
<line
class="connection"
x1="0"
y1="280"
x2="420"
y2="280"
>
</line>
</g>
</svg>
</div>
<p class="example">Each 3P group adds capacity. Two such groups in series double voltage.</p>
<p class="task">Calculate the Voltage and the Capacity. One cell has 3.7V and 200Ah.</p>
</div>
</article>
<article class="poster" id="solar">
<h1>Understanding "2S3P" for Solar Panels</h1>
<div class="subtitle">Same principle — voltage adds in series, current adds in parallel</div>
<div class="section" style="border-top:none;">
<div class="big">1. What it means</div>
<p><strong>Series (S)</strong> → increases voltage<br><strong>Parallel (P)</strong> → increases current</p>
</div>
<div class="section">
<div class="big">2. Example: 2S</div>
<div class="diagram">
<svg class="svg"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 399 214"
>
<g
transform="translate(20,20)"
>
<line class="connection"
x1="120"
y1="80"
x2="160"
y2="80">
</line>
<rect
class="battery"
x="0"
y="20"
width="120"
height="120"
rx="10">
</rect>
<rect
class="battery"
x="160"
y="20"
width="120"
height="120"
rx="10">
</rect>
<text
x="50"
y="160"
font-size="24"
>+
</text>
<text
x="250"
y="160"
font-size="24"
>-
</text>
</g>
</svg>
</div>
<p class="example">Each panel 18V → total 36V (current stays same)</p>
</div>
<div class="section">
<div class="big">3. Example: 3P</div>
<div class="diagram">
<svg class="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 566 200">
<g
fill="none"
transform="translate(20,40)"
>
<line
class="connection"
x1="0"
y1="-20"
x2="520"
y2="-20"
></line>
<line
class="connection"
x1="0"
y1="140"
x2="520"
y2="140"
></line>
<rect
class="battery"
x="0"
y="0"
width="120"
height="120"
rx="10"
></rect>
<rect
class="battery"
x="200"
y="0"
width="120"
height="120"
rx="10"
></rect>
<rect
class="battery"
x="400"
y="0"
width="120"
height="120"
rx="10"
></rect>
</g>
</svg>
</div>
<p class="example">Voltage same (18V), current adds (3×5A=15A)</p>
</div>
<div class="section">
<div class="big">4. Combined: 2S3P</div>
<div class="diagram">
<svg
class="svg"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 500 340"
>
<g
transform="translate(40,40)">
<g>
<line
class="connection"
x1="100"
y1="50"
x2="160"
y2="50"
>
</line>
<line
class="connection"
x1="260"
y1="50"
x2="320"
y2="50"
>
</line>
<rect
class="battery"
x="0"
y="0"
width="100"
height="100"
rx="8"
>
</rect>
<rect
class="battery"
x="160"
y="0"
width="100"
height="100"
rx="8"
>
</rect>
<rect
class="battery"
x="320"
y="0"
width="100"
height="100"
rx="8"
>
</rect>
</g>
<g>
<line
class="connection"
x1="100"
y1="210"
x2="160"
y2="210"
>
</line>
<line
class="connection"
x1="260"
y1="210"
x2="320"
y2="210"
>
</line>
<rect
class="battery"
x="0"
y="160"
width="100"
height="100"
rx="8"
>
</rect>
<rect
class="battery"
x="160"
y="160"
width="100"
height="100"
rx="8"
>
</rect>
<rect
x="320"
y="160"
width="100"
height="100"
rx="8"
>
</rect>
</g>
<line
class="connection"
x1="0"
y1="-20"
x2="420"
y2="-20"
>
</line>
<line
class="connection"
x1="0"
y1="280"
x2="420"
y2="280"
>
</line>
</g>
</svg>
</div>
<p class="example">2 panels in series per string → 36V. 3 strings parallel → 15A total.</p>
</div>
</article>
</div>
<deepl-input-controller translate="no"></deepl-input-controller></body></html>