Update index.page

.eslintrc.cjs

@@ -15,5 +15,10 @@ module.exports = {
 		browser: true,
 		es2017: true,
 		node: true
+	},
+	settings: {
+		'svelte3/ignore-warnings': (warning) => {
+		  return warning.code === 'a11y-click-events-have-key-events'
+		},
 	}
-};
+};

src/content/tech/[...02]hardware/[...01]bauteile/index.page

@@ -47,8 +47,8 @@ published: true
     </div>
 
     - Führt Programme aus und ist an alle Komponenten des Calliope mini angeschlossen
-    - Memory Size: 512kB Flash, 128kB RAM
-    - Serial Interfaces: ADC, I²C, PWM, SPI, UART, USB
+    - Memory Größe: 512kB Flash, 128kB RAM
+    - Serielle Schnittstellen: ADC, I²C, PWM, SPI, UART, USB
     - Bluetooth-Antenne, Temperaturmessung
 
 
@@ -66,15 +66,15 @@ published: true
     <div slot="mini2">
         NXP KL26z
 
-        wegen Bauteilverknappung wurde in der Calliope mini Version <V>2.1</V> der Prozessor gegen den
-        Raspberry Pi RP2040 Dual-core Arm Cortex-M0+ Prozessor ausgetauscht 
+        in der Calliope mini Version <V>2.1</V> wurde der Prozessor mit dem
+        Raspberry Pi RP2040 ersetzt. 
 
     </div>
     <div slot="mini3">
         <i>Herstellerbezeichnung: NRF52820-QDAA-D</i>
     </div>
 
-    - empfängt das Programm über USB und läd es auf den Anwendungsprozessor
+    - empfängt das Programm über USB und lädt es auf den Anwendungsprozessor
     - stellt eine serielle Verbindung zum Anwendungsprozessor her (Virtual COM Port) 
     - kein Bluetooth
 
@@ -102,11 +102,11 @@ Weitere Informationen zu den 25 Programmen befinden sich auf der **[Calliope-Sei
 
 ## LED-Matrix
 
-Auf der LED-Matrix des Calliope mini befinden sich 5 x 5 = 25 rote LEDs, mit denen nicht nur Zahlen und Texte, sondern auch Bilder und sogar Animationen dargestellt werden. Die Helligkeit der einzelnen Pixel kann verändert werden. 
+Auf der LED-Matrix des Calliope mini befinden 25 rote LEDs in einem 5x5 Raster, mit denen nicht nur Zahlen und Texte, sondern auch Bilder und sogar Animationen dargestellt werden. Die Helligkeit der einzelnen Pixel kann verändert werden. 
 
 ### Lichtmessung
 
-Über die Leuchtdioden kann ebenfalls die Lichtstärke gemessen werden.
+Über einige der Leuchtdioden kann ebenfalls die Lichtstärke gemessen werden.
 Die Stärke des Lichts, wird in den meisten Editoren als Zahl von 0 bis 255 ausgegeben, wobei 0 der dunkelste und 255 der hellste Wert ist. 
 
 ----
@@ -194,7 +194,7 @@ Mit dem MEMS-Mikrofon kann die der Schalldruckpegel (SPL) und die Lautstärke ge
     <div slot="mini1-2">
         <i>Herstellerbezeichnung: DRV8837</i>
         <Gap h="1" />
-        Der Motortreiber für die Calliope mini Versionen 1 und 2 ist der DRV8837 Der Motortreiber besteht aus einer H-Brückenschaltung. Es kann damit ein Motor 
+        Dieser Motortreiber besteht aus einer H-Brückenschaltung.
         Es können bis zu zwei Motoren angeschlossen werden. Wird ein Motor angeschlossen, können alle Motormodi verwendet werden. Werden zwei Motoren angeschlossen, dann müssen sich diese die H-Brücke teilen und die Motoren können nur beide gleichzeitig vor- oder zurückfahren, aber nicht entgegengesetzt laufen. 
 
         **Ein Motor Logik:**
@@ -212,7 +212,7 @@ Mit dem MEMS-Mikrofon kann die der Schalldruckpegel (SPL) und die Lautstärke ge
 
          [Datenblatt DRV8837](https://www.ti.com/lit/ds/symlink/drv8837.pdf?ts=1654067963185&ref_url=https%253A%252F%252Fwww.google.com%252F)
 
-         **Zwei Motoren Logik:**
+         <b>Zwei Motoren Logik:</b>
 
          | IN1 | IN2 | OUT1 | OUT2  | Motor1        | Motor2        |
          |-----|-----|------|-------|---------------|---------------|
@@ -225,19 +225,24 @@ Mit dem MEMS-Mikrofon kann die der Schalldruckpegel (SPL) und die Lautstärke ge
 
     </div>
     <div slot="mini3">
+
         <i>Herstellerbezeichnung: DRV8835</i>
         <Gap h="1" />
-Dieser Motortreiber besitzt 2 seperate H-Brücken Treiber und kann damit 2 Gleichspannungsmotoren von einander unabhängig steuern. Die maximale Eingangspannung beträgt 9V, der maximale Strom pro Motor beträgt 1.5A.
+Dieser Motortreiber besitzt 2 seperate H-Brücken Treiber und kann damit 2 Gleichspannungsmotoren von einander unabhängig steuern. Die maximale Eingangspannung geben wir mit 9V an. Der maximale Strom pro Motor beträgt 1.5A.
 Hier findest du einen Link zum [Datenblatt](https://www.ti.com/lit/ds/symlink/drv8835.pdf?ts=1697459375123)
+
+
 **Kurz Infos:**
+
+
 - Steuert 2 Motoren, jeder Motor kann jeweils vorwärts und rückwärts betätigt werden
-- Die Motoren können an der Pinleiste bei
+- Die Motoren können an der Pinleiste am M0+- und M1+- angeschlossen werden
 - maximale Eingangsspannung 9V; maximaler Strom 1,5A pro Motor
-- Wird im Phase/Enable Modus (Mode=1) betrieben, d.h. in der Firmware steuert ein digitales Signal die Motorenrichtung und über ein [PWM](https://de.wikipedia.org/wiki/Pulsdauermodulation) Signal die Geschwindigkeit 
+- Wird im Phase/Enable Modus (Mode=1) betrieben, d.h. in der Firmware steuert ein digitales Signal die Motorenrichtung und ein [PWM](https://de.wikipedia.org/wiki/Pulsdauermodulation) Signal die Geschwindigkeit 
 
 
 
-Weitere Informationen sowie Schaltplan, Blockschaltbild & Pinbelegung fndest du **[Hier](https://calliope-mini.github.io/v20/)** 
+Weitere Informationen sowie Schaltplan, Blockschaltbild & Pinbelegung fndest du **[Hier](https://calliope-mini.github.io/v30/)** 
     </div>
 </Versions>
 

src/content/tech/[...02]hardware/[...02]pins/PinoutV3.svelte

@@ -1,113 +1,159 @@
 <script>
+	import Button from "$lib/components/elements/Button.svelte";
+	import Admonition from "$lib/components/elements/Admonition.svelte";
+
 	let pins = [
-        { name: 'VCC', function: null, analogin: null, interface: null, color: '#E6007D' },
-        { name: 'P1', function: 'PAD1', analogin: 'AnalogIn', interface: 'Touch', color: '#3FC863' },
-        { name: 'P3', function: 'PAD3', analogin: null, interface: 'Touch', color: '#3FC863' },
-        { name: 'C5', function: 'Button A', analogin: null, interface: null, color: '#42C9C9' },
-        { name: 'C7', function: 'Display Spalte 2', analogin: null, interface: null, color: '#42C9C9' },
-        { name: 'C9', function: null, analogin: null, interface: null, color: '#3FC863' },
-        { name: 'C11', function: 'Button B', analogin: null, interface: null, color: '#42C9C9' },
-        { name: 'C13', function: null, analogin: null, interface: 'SPI CLOCK', color: '#3FC863' },
-        { name: 'C15', function: null, analogin: null, interface: 'SPI MOSI', color: '#3FC863' },
+        { name: 'VCC', fullName: 'Stromversorgung VCC', description: '', function: null, analogin: null, interface: null, color: '#E6007D', assignedPin: false },
+        { name: 'P1', fullName: 'Touch Pin ', description: '', function: 'PAD1', analogin: true, interface: 'Touch', color: '#3FC863', assignedPin: true },
+        { name: 'P3', fullName: 'Touch Pin', description: '', function: 'PAD3', analogin: null, interface: 'Touch', color: '#3FC863', assignedPin: true },
+        { name: 'C5', fullName: 'Taste A', description: '', function: 'Button A', analogin: null, interface: null, color: '#42C9C9', assignedPin: false },
+        { name: 'C7', fullName: 'Display Spalte 2', description: '', function: 'Display Spalte 2', analogin: null, interface: null, color: '#42C9C9', assignedPin: false },
+        { name: 'C9', fullName: 'Allgemeiner I/O Pin', description: '', function: null, analogin: null, interface: null, color: '#3FC863', assignedPin: true },
+        { name: 'C11', fullName: 'Taste B', description: '', function: 'Button B', analogin: null, interface: null, color: '#42C9C9', assignedPin: false },
+        { name: 'C13', fullName: 'SPI Takt', description: '', function: null, analogin: null, interface: 'SPI CLOCK', color: '#3FC863', assignedPin: true },
+        { name: 'C15', fullName: 'SPI MOSI', description: '', function: null, analogin: null, interface: 'SPI MOSI', color: '#3FC863', assignedPin: true },
         {
-			name: 'C17',
+			name: 'C17', fullName: 'UART TX (Grove A1 TX)',
 			function: 'Grove A1 TX',
 			analogin: null,
 			interface: 'UART TX',
 			color: '#42C9C9'
 		},
         {
-			name: 'C19',
+			name: 'C19', fullName: 'I2C SCL (Grove A0 SCL)',
 			function: 'Grove A0 SCL',
 			analogin: null,
 			interface: 'I2C SCL',
 			color: '#42C9C9'
 		},
-        { name: 'GND', function: null, analogin: null, interface: null, color: '#044854' },
-        { name: 'M1+', function: null, analogin: null, interface: null, color: '#3FC863' },
-        { name: 'M1-', function: null, analogin: null, interface: null, color: '#3FC863' },
-        { name: 'GND', function: null, analogin: null, interface: null, color: '#044854' },
-
-        { name: 'GND', function: null, analogin: null, interface: null, color: '#044854' },
-		{ name: 'P0', function: 'PAD0', analogin: 'AnalogIn', interface: 'Touch', color: '#3FC863' },
-		{ name: 'P2', function: 'PAD2', analogin: 'AnalogIn', interface: 'Touch', color: '#3FC863' },
+        { name: 'GND', fullName: 'Masse', description: '', function: null, analogin: null, interface: null, color: '#044854', assignedPin: false },
+        { name: 'M1+', fullName: 'Motortreiber Ausgang +', description: '', function: "Pluspol Motor 1", analogin: null, interface: null, color: '#3FC863', assignedPin: true },
+        { name: 'M1-', fullName: 'Motortreiber Ausgang -', description: '', function: "Minuspol Motor 1", analogin: null, interface: null, color: '#3FC863', assignedPin: true },
+        { name: 'GND', fullName: 'Masse (GND)', description: '', function: null, analogin: null, interface: null, color: '#044854', assignedPin: false },
+
+        { name: 'GND', fullName: 'Masse (GND)', description: '', function: null, analogin: null, interface: null, color: '#044854', assignedPin: false },
+		{ name: 'P0', fullName: 'Touch Pin', description: '', function: 'PAD0', analogin: true, interface: 'Touch', color: '#3FC863', assignedPin: true },
+		{ name: 'P2', fullName: 'Touch Pin', description: '', function: 'PAD2', analogin: true, interface: 'Touch', color: '#3FC863', assignedPin: true },
 		{
-			name: 'C4',
+			name: 'C4', fullName: 'Display Spalte 1',
 			function: 'Display Spalte 1',
-			analogin: 'AnalogIn',
+			analogin: true,
 			interface: null,
 			color: '#42C9C9'
 		},
-		{ name: 'C6', function: 'Display Spalte 4', analogin: null, interface: null, color: '#42C9C9' },
-		{ name: 'C8', function: null, analogin: null, interface: null, color: '#3FC863' },
+		{ name: 'C6', fullName: 'Display Spalte 4', description: '', function: 'Display Spalte 4', analogin: null, interface: null, color: '#42C9C9', assignedPin: false },
+		{ name: 'C8', fullName: 'Allgemeiner I/O Pin', description: '', function: null, analogin: null, interface: null, color: '#3FC863', assignedPin: true },
 		{
-			name: 'C10',
+			name: 'C10', fullName: 'Display Spalte 5',
 			function: 'Display Spalte 5',
-			analogin: 'AnalogIn',
+			analogin: true,
 			interface: null,
 			color: '#42C9C9'
 		},
 		{
-			name: 'C12',
+			name: 'C12', fullName: 'JACDAC & Barrierefreiheit',
 			function: 'ACCESSIBILITY',
 			analogin: null,
-			interface: '(JACDAC)',
+			interface: 'JACDAC',
 			color: '#42C9C9'
 		},
-		{ name: 'C14', function: null, analogin: null, interface: 'SPI MISO', color: '#3FC863' },
+		{ name: 'C14', fullName: 'SPI MISO', description: '', function: null, analogin: null, interface: 'SPI MISO', color: '#3FC863', assignedPin: true },
 		{
-			name: 'C16',
+			name: 'C16', fullName: 'UART RX (Grove A1 RX)',
 			function: 'Grove A1 RX',
-			analogin: 'AnalogIn',
+			analogin: true,
 			interface: 'UART RX',
 			color: '#42C9C9'
 		},
 		{
-			name: 'C18',
+			name: 'C18', fullName: 'Display Spalte 3',
 			function: 'Display Spalte 3',
-			analogin: 'AnalogIn',
+			analogin: true,
 			interface: null,
 			color: '#42C9C9'
 		},
 		{
-			name: 'C20',
+			name: 'C20', fullName: ' I2C SDA (Grove A0 SDA)',
 			function: 'Grove A0 SDA',
 			analogin: null,
 			interface: 'I2C SDA',
 			color: '#42C9C9'
 		},
-		{ name: 'M0+', function: null, analogin: null, interface: null, color: '#3FC863' },
-		{ name: 'M0-', function: null, analogin: null, interface: null, color: '#3FC863' },
-        { name: 'VM', function: null, analogin: null, interface: null, color: '#E6007D' },
-
+		{ name: 'M0+', fullName: 'Motortreiber Ausgang +', description: '', function: "Pluspol Motor 0", analogin: null, interface: null, color: '#3FC863', assignedPin: true },
+		{ name: 'M0-', fullName: 'Motortreiber Ausgang -', description: '', function: "Minuspol Motor 0", analogin: null, interface: null, color: '#3FC863', assignedPin: true },
+        { name: 'VM', fullName: 'Motor Stromversorgung', description: '', function: null, analogin: null, interface: null, color: '#E6007D', assignedPin: false },
 	];
+	let viewMode = 'function'; // Default to "function" view
 
 	let activePin = null;
 	function toggleVisibility(pin) {
 		activePin = activePin === pin ? null : pin;
 	}
+
 </script>
 
+
+<Button color="calliope"
+        type={(viewMode) != 'function' ? 'border' : 'default'}
+        on:click={()=>{viewMode='function'}}
+        text="Funktion"
+/>
+<Button color="calliope" 
+        type={(viewMode) != 'interface' ? 'border' : 'default'} 
+        on:click={()=>{viewMode='interface'}}
+        text="Schnittstelle"
+/>
+
 <nav class="pinout">
 	<ul>
 		{#each pins as pin, index}
 			<li on:click={() => toggleVisibility(pin)}>
-				<div class="dot" style="background-color:{pin.state === 'hidden' ? 'white' : pin.color}">
+				<div class="dot" class:analogin_dot={pin.analogin} style="background-color:{pin.state === 'hidden' ? 'white' : pin.color}">
 					{pin.name}
 				</div>
-				{#if pin.function}
-					<div class="tag {index > 15 ? 'down' : 'up'}">{pin.function}</div>
+				{#if (pin.function && viewMode === 'function') || (pin.interface && viewMode === 'interface')}
+					<div class="tag" class:down={index > 15} class:up={index <= 15}>
+						{#if viewMode === 'function'}
+                        	{pin.function}    
+						{:else if viewMode === 'interface'}     
+							{pin.interface}
+						{/if}
+					</div>
 				{/if}
 			</li>
 		{/each}
 	</ul>
 </nav>
 
+<div class="legende">
+	<div style="color: var(--color-blau);">
+		<div class="color-bar"></div> 
+		<span >Analog lesen</span>
+	</div>
+
+	<div style="color: var(--color-calliope);">
+		<div class="color-bar"></div> 
+		<span >belegter Pin</span>
+	</div>
+
+	<div style="color: var(--color-rosa);">
+		<div class="color-bar"></div> 
+		<span >Stromversorgung</span>
+	</div>
+
+	<div style="color: #044854;">
+		<div class="color-bar"></div> 
+		<span >Masse</span>
+	</div>
+</div>
+
 {#if activePin}
-	<h3>{activePin.name}</h3>
-	{#if activePin.interface}
-		<p>Der Pin {activePin.name} benutzt die Schnittstelle {activePin.interface}.</p>
-	{/if}
+	<Admonition title="Ausgewählter Pin">
+		<h3>{activePin.fullName}</h3>
+		{#if activePin.description}
+			<p>{activePin.description}</p>
+		{/if}
+	</Admonition>
 {/if}
 
 <style>
@@ -185,4 +231,41 @@
 	.pinout li .dot:hover {
         opacity: .9;
 	}
+
+
+	.analogin_dot {
+		/* width: 30px; */
+		/* display: inline-block; */
+		/* margin-bottom: -10px; */
+		/* height: 30px; */
+		/* padding-top: 30px; */
+		/* font-weight: bold; */
+		/* padding-top: 6px; */
+		/* border-radius: 30px; */
+		border: 2px solid var(--color-blau);
+	}
+	.legende {
+		display: flex;
+		gap: 1rem;
+	}
+
+	.legende .color-bar {
+		border: 3px solid currentColor;
+	}
+
+
+	@media (max-width: 820px) {
+        .pinout li .dot {
+            color: transparent;
+
+        }
+        .pinout li:hover .dot {
+        display: block;
+		color: white;
+    }
+    .pinout li .dot {
+        width: 3.5vw;
+        height: 3.5vw;
+    }
+    }
 </style>