Update Docs , add 3D viewer

.github/workflows/build-docs.yml

@@ -49,8 +49,9 @@ jobs:
         if: github.ref != 'refs/heads/master'
         working-directory: docs
         run: |
-          sed -i 's/@master/@dev/g' */guide/getting-started.md
-          sed -i 's/@master/@dev/g' */guide/firmware/minimal.example.yaml
+          sed -i 's/@master/@dev/g' *.md
+          sed -i 's/\/master\//\/dev\//g' *.md
+          sed -i 's/@master/@dev/g' *.yaml
 
       - name: Install dependencies
         working-directory: docs

docs/.vitepress/config/de.mts

@@ -77,10 +77,16 @@ function nav(): DefaultTheme.NavItem[] {
         {
           text: pkg.version,
           items: [
+            { text: 'Issues', link: 'https://github.com/AzonInc/Doorman/issues' },
             {
-              text: !pkg.version.includes('dev') ? 'Wechsle zur Entwicklungs Version' : 'Wechsle zu aktuellen Version',
-              link: !pkg.version.includes('dev') ? 'https://doorman-dev.surge.sh/' : 'https://doorman.azon.ai/',
-              target: '_self'
+              text: 'Docs',
+              items: [
+                {
+                  text: !pkg.version.includes('dev') ? 'Wechsle zur Entwicklungs Version' : 'Wechsle zu aktuellen Version',
+                  link: !pkg.version.includes('dev') ? 'https://doorman-dev.surge.sh/' : 'https://doorman.azon.ai/',
+                  target: '_self'
+                }
+              ]
             }
           ]
         }
@@ -143,7 +149,8 @@ function sidebarReference(): DefaultTheme.SidebarItem[] {
       items: [
         { text: 'Entitäten', link: 'entities' },
         { text: 'GPIO Pinbelegung', link: 'gpio' },
-        { text: 'Schaltpläne', link: 'schematics' }
+        { text: 'Schaltpläne', link: 'schematics' },
+        { text: 'Spezifikationen', link: 'specifications' }
       ]
     }
   ];

docs/.vitepress/config/en.mts

@@ -50,10 +50,16 @@ function nav(): DefaultTheme.NavItem[] {
         {
           text: pkg.version,
           items: [
+            { text: 'Issues', link: 'https://github.com/AzonInc/Doorman/issues' },
             {
-              text: !pkg.version.includes('dev') ? 'Switch to Development Docs' : 'Switch to Stable Docs',
-              link: !pkg.version.includes('dev') ? 'https://doorman-dev.surge.sh/' : 'https://doorman.azon.ai/',
-              target: '_self'
+              text: 'Docs',
+              items: [
+                {
+                  text: !pkg.version.includes('dev') ? 'Switch to development' : 'Switch to current',
+                  link: !pkg.version.includes('dev') ? 'https://doorman-dev.surge.sh/' : 'https://doorman.azon.ai/',
+                  target: '_self'
+                }
+              ]
             }
           ]
         }
@@ -116,7 +122,8 @@ function sidebarReference(): DefaultTheme.SidebarItem[] {
       items: [
         { text: 'Entities', link: 'entities' },
         { text: 'GPIO Pinout', link: 'gpio' },
-        { text: 'Schematics', link: 'schematics' }
+        { text: 'Schematics', link: 'schematics' },
+        { text: 'Specifications', link: 'specifications' }
       ]
     }
   ];

docs/.vitepress/config/shared.mts

@@ -91,5 +91,12 @@ export const shared = defineConfig({
         }
       }
     }
-  }
+  },
+  vue: {
+    template: {
+      compilerOptions: {
+        isCustomElement: tag => tag.startsWith('Tres') && tag !== 'TresCanvas',
+      },
+    },
+  },
 })

docs/.vitepress/theme/components/ModelViewer.vue

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+const props = defineProps<{
+  file: string
+}>()
+
+import { reactive, shallowRef, watch } from 'vue'
+import { TresCanvas, useLoop, useRenderLoop  } from '@tresjs/core';
+import { Box, OrbitControls, CameraControls } from '@tresjs/cientos'
+import { BasicShadowMap, SRGBColorSpace, NoToneMapping } from 'three'
+
+import STLFile from './STLLoader.vue';
+
+const controlsState = reactive({
+  minDistance: 0,
+  maxDistance: 100,
+  distance: 80
+})
+
+const gl = {
+  clearColor: '#5c73e7',
+  shadows: true,
+  alpha: false,
+  shadowMapType: BasicShadowMap,
+  outputColorSpace: SRGBColorSpace,
+  toneMapping: NoToneMapping,
+}
+
+const boxRef = shallowRef()
+
+const { onLoop } = useRenderLoop()
+
+onLoop(({ delta, elapsed }) => {
+  if (boxRef.value) {
+    boxRef.value.rotation.x = elapsed * 0.2
+  }
+})
+
+</script>
+<template>
+  <TresCanvas v-bind="gl">
+    <TresPerspectiveCamera />
+    <CameraControls
+      v-bind="controlsState"
+      make-default
+    />
+    <Suspense>
+      <TresMesh ref="boxRef">
+        <STLFile receive-shadow ref="boxRef" v-bind:file="file" />
+      </TresMesh>
+    </Suspense>
+    <TresAmbientLight :intensity="0.75" />
+    <TresDirectionalLight
+      :position="[4, 4, 4]"
+      :intensity="1"
+      cast-shadow
+    />
+    <TresDirectionalLight
+      :position="[1, 1, 0]"
+      :intensity="2"
+      cast-shadow
+    />
+  </TresCanvas>
+</template>

docs/.vitepress/theme/components/STLLoader.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+const props = defineProps<{
+  file: string
+}>()
+
+const { file } = toRefs(props);
+
+import { toRefs } from 'vue'
+import { useTresContext } from '@tresjs/core'
+
+import { STLLoader } from 'three/examples/jsm/loaders/STLLoader';
+import { Mesh, MeshBasicMaterial, MeshPhongMaterial } from 'three';
+
+const loadSTLModel = (url: string): Promise<Mesh> => {
+  const loader = new STLLoader();
+
+  return new Promise((resolve, reject) => {
+    loader.load(
+      url,
+      (geometry) => {
+        const material = new MeshPhongMaterial({ color: 0xf7f7f7 });
+        const meshWithMaterial = new Mesh(geometry, material);
+
+        geometry.center();
+
+        resolve(meshWithMaterial);
+      },
+      undefined, // onProgress callback (not used)
+      (error) => reject(error) // onError callback
+    );
+  });
+};
+
+// Verwende async setup, um auf das Promise zu warten
+const meshWithMaterial = await loadSTLModel(file.value);
+
+const state = useTresContext()
+state.invalidate()
+
+</script>
+
+<template>
+  <primitive :object="meshWithMaterial" />
+</template>

docs/.vitepress/theme/index.ts

@@ -1,5 +1,7 @@
 import DefaultTheme from "vitepress/theme";
 import Layout from './Layout.vue'
+
+import 'uno.css'
 import "./custom.css";
 
 export default {

docs/components.d.ts

@@ -0,0 +1,14 @@
+/* eslint-disable */
+// @ts-nocheck
+// Generated by unplugin-vue-components
+// Read more: https://github.com/vuejs/core/pull/3399
+export {}
+
+/* prettier-ignore */
+declare module 'vue' {
+  export interface GlobalComponents {
+    3DViewer: typeof import('./.vitepress/theme/components/3DViewer.vue')['default']
+    ModelViewer: typeof import('./.vitepress/theme/components/ModelViewer.vue')['default']
+    STLLoader: typeof import('./.vitepress/theme/components/STLLoader.vue')['default']
+  }
+}

docs/de/guide/enclosure/3d-printing.md

@@ -1,12 +1,23 @@
 # Gehäuse
 
 Falls du ein Gehäuse benötigst, kannst du dein eigenes drucken.\
-Klicke einfach auf die Bilder unten, um die STL-Datei auf GitHub zu öffnen.
-
-Oberseite                                    |  Unterseite
-:-------------------------:|:-------------------------:
-[![](./enclosure_top.png){width=300px}](https://github.com/AzonInc/Doorman/blob/master/enclosure/Top.stl)  |  [![](./enclosure_bottom.png){width=300px}](https://github.com/AzonInc/Doorman/blob/master/enclosure/Bottom.stl)
+Klicke [hier](https://github.com/AzonInc/Doorman/blob/master/enclosure) um die STL-Dateien von GitHub herunterzuladen.
 
 ::: tip
-Die STL-Dateien sind für Resin-Drucker optimiert, daher erzielst du mit einem solchen die besten Ergebnisse.
-:::
+Da die STL-Dateien für Resin-Drucker optimiert sind, erzielst du mit einem solchen die besten Ergebnisse.
+:::
+
+## Interaktiver Viewer
+### Deckel
+<ClientOnly>
+    <div style="aspect-ratio: 16/9; height: auto; margin: 2rem 0; border-radius: 8px; overflow:hidden;">
+      <ModelViewer file="https://raw.githubusercontent.com/AzonInc/Doorman/master/enclosure/Top.stl" />
+    </div>
+</ClientOnly>
+
+### Gehäuseboden
+<ClientOnly>
+    <div style="aspect-ratio: 16/9; height: auto; margin: 2rem 0; border-radius: 8px; overflow:hidden;">
+      <ModelViewer file="https://raw.githubusercontent.com/AzonInc/Doorman/master/enclosure/Bottom.stl" />
+    </div>
+</ClientOnly>

docs/de/reference/specifications.md

@@ -0,0 +1,14 @@
+# Doorman Hardware-Spezifikationen
+Hier findest du ein paar Infos zur Nutzung:
+
+## Stromversorgung
+Dank des breiten Spektrums des Spannungswandlers kann der Doorman S3 mit einer Spannung von 5 bis 30V DC betrieben werden.
+
+## Gleichrichterbrücke
+Die Gleichrichterbrücke sorgt dafür, dass die Polarität der Busleitung passt. Du musst dir darüber keine Gedanken machen.
+
+## Relais
+Beim Doorman-S3 wird ein Solid-State-Relais verwendet. Dieses kann Lasten bis zu 40V bei maximal 2,5A schalten.
+
+## Externer Button
+An der BTN Schraubklemme hängt ein 10 kΩ Pull-up Widerstand. Du kannst den Button an die Schraubklemmen BTN und G anschließen.

docs/en/guide/enclosure/3d-printing.md

@@ -1,12 +1,24 @@
 # Enclosure
 
 If you need an enclosure, you can print your own.\
-Simply click on the images below to open the STL file on GitHub.
+Click [here](https://github.com/AzonInc/Doorman/blob/master/enclosure) to download the files on GitHub.
 
-Top                                    |  Bottom
-:-------------------------:|:-------------------------:
-[![](./enclosure_top.png){width=300px}](https://github.com/AzonInc/Doorman/blob/master/enclosure/Top.stl)  |  [![](./enclosure_bottom.png){width=300px}](https://github.com/AzonInc/Doorman/blob/master/enclosure/Bottom.stl)
 
 ::: tip
 The STL files are optimized for resin printers, so you'll achieve the best results using one.
-:::
+:::
+
+## Interactive Viewer
+### Top Component
+<ClientOnly>
+    <div style="aspect-ratio: 16/9; height: auto; margin: 2rem 0; border-radius: 8px; overflow:hidden;">
+      <ModelViewer file="https://raw.githubusercontent.com/AzonInc/Doorman/master/enclosure/Top.stl" />
+    </div>
+</ClientOnly>
+
+### Bottom Component
+<ClientOnly>
+    <div style="aspect-ratio: 16/9; height: auto; margin: 2rem 0; border-radius: 8px; overflow:hidden;">
+      <ModelViewer file="https://raw.githubusercontent.com/AzonInc/Doorman/master/enclosure/Bottom.stl" />
+    </div>
+</ClientOnly>