Merge pull request #5 from calliope-edu/dev_Jasper_2

Merge updates in Pin and motor pages
calliope-edu · Sep 9, 2024 · 648a629 · 648a629
2 parents c61a58f + e88ec31
commit 648a629
Show file tree

Hide file tree

Showing 7 changed files with 166 additions and 239 deletions.
diff --git a/.eslintrc.cjs b/.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'
+		},
 	}
-};
+};
diff --git a/src/content/tech/[...02]hardware/[...01]bauteile/index.page b/src/content/tech/[...02]hardware/[...01]bauteile/index.page
@@ -194,10 +194,10 @@ 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 
-        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:**
+        <p>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 
+        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. </p>
+        
+        <b>Ein Motor Logik:</b>
 
         | IN1 | IN2 | OUT1 | OUT2  | Modus     |
         |-----|-----|------|-------|-----------|
@@ -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.
 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
-- maximale Eingangsspannung 9V; maximaler Strom 1,5A pro Motor
+- Die Motoren können an der Pinleiste beide 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 
 
 
-
-Weitere Informationen sowie Schaltplan, Blockschaltbild & Pinbelegung fndest du **[Hier](https://calliope-mini.github.io/v20/)** 
     </div>
 </Versions>
 

diff --git a/src/content/tech/[...02]hardware/[...02]pins/PinoutV3.svelte b/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>