Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- visualizer_help_wiki_rules [2025/11/18 12:35] – adminwiki
+++ visualizer_help_wiki_rules [2025/11/18 16:01] (aktuell) – [Verwendung der Inhalte im visualizer] adminwiki
@@ Zeile 1: / Zeile 1: @@
 ===== Dokumentation für die Hilfe im Visualizer =====
+{{INLINETOC 3}}
 Die Hilfetexte im Hilfs-Panel des vrdoro-Visualizer werden im Wiki verwaltet. Über Auszeichnungen beim Schreiben der Wiki-Inhalte kann festgelegt werden, welche Inhalte angezeigt werden. Es gibt folgende Möglichkeiten:
@@ Zeile 5: / Zeile 6: @@
 ==== Inhalte aktivieren ====
-Soll ein Abschnitt aus einer Hilfeseite in der Software im Hilfe-Panel angezeigt werden, dann muss der Abschnitt von einem WRAP-Element mit der Klasse ''vrdoro-help'' umschlossen sein. Eine für die Seite eindeutige ID, beginnend mit ''#'' ermöglicht die Referenzierung des Abschnitts in Template-Code.
+Soll ein Abschnitt aus einer Hilfeseite in der Software im Hilfe-Panel angezeigt werden, dann muss der Abschnitt von einem WRAP-Element mit der Klasse ''vrdoro-help'' umschlossen sein. Eine für die Seite eindeutige ID, beginnend mit ''#'' ermöglicht die Referenzierung des Abschnitts im Template-Code.
-Beispiel (s. https://docs.vrdoro.com/doku.php?id=vproduct:room-measure:modes):
+Beispiel ([[https://docs.vrdoro.com/doku.php?id=vproduct:room-measure:modes|Beispielseite in neuem Tab öffnen]]):
-<code>
+<code html>
 <WRAP vrdoro-help #irgendeineID>
 ==== Überschrift ====
@@ Zeile 15: / Zeile 16: @@
 </code>
-Um nun diesen Inhalt in der Software anzuzeigen wird die Funktion this.helpPanelNeoCode.getWikiContent verwendet, um eine Übersetzungsmap zu füllen.
+Diese Inhalte werden im Wiki mit einem Strich an der linken Seite markiert. So ist direkt erkennbar, dass dieser Text auch im vrdoro-visualizer angezeigt wird.
-Beispiel (s. https://vrdoro.com/editor/~/admin/template-snippets/edit/180):
+==== Verwendung der Inhalte im visualizer ====
+Um nun diesen Inhalt in der Software anzuzeigen wird im Template-Code die Funktion this.helpPanelNeoCode.getWikiContent verwendet, um eine Übersetzungsmap zu füllen.
+Beispiel ([[https://vrdoro.com/editor/~/admin/template-snippets/edit/180|Template Snippet in neuem Tab öffnen]]):
 <code javascript>
 this.translations = {
@@ Zeile 23: / Zeile 28: @@
     step1: {
       description: '',
-      docFunction: () =>  this.helpPanelNeoCode.getWikiContent('https://docs.vrdoro.com/doku.php?id=pageID', 'scene-align')
+      docFunction: () =>  this.helpPanelNeoCode.getWikiContent('https://docs.vrdoro.com/doku.php?id=pageID', 'irgendeineID')
     },
   },
 }
 </code>
+''irgendeineID'' referenziert dabei die ID aus dem ''WRAP''-Tag oben.
+==== Inhalte steuern ====
+Über ''DIV'' oder '''SPAN'' Elemente mit Klassen lässt sich nun steuern, welche Inhalte wo sichtbar sind.
+Diese Klassen bedeuten:
+  - only-headset: Der Text ist nicht auf der Wiki-Seite sichtbar. Ausnahme: Admins sehen den Text mit einem gelben Hintergrund.
+  - not-in-headset: Dieser Text ist nur auf der Wiki-Seite sichtbar und nicht im Headset. Admins sehen den Text mit einem hellroten Hintergrund.
+Beispiel ''only-headset'' ([[https://docs.vrdoro.com/doku.php?id=vproduct:helper-tool:help-panel|Beispielseite in neuem Tab öffnen]]):
+<code html>
+<div only-headset>
+Dieser Text ist nur im Headset sichtbar!
+</div>
+</code>
+Beispiel ''not-in-headset'' ([[https://docs.vrdoro.com/doku.php?id=vproduct:helper-tool:scene-align|Beispielseite in neuem Tab öffnen]]):
+<code html>
+<div not-in-headset>
+Dieser Text ist **nicht** im Headset sichtbar!
+</div>
+</code>
+==== 2 spaltiges Layout ====
+Für die Anzeige von Bilder bietet sich ein zweispaltiges Layout an. Dies wird im Markdown über diesen Code (Einrückungen werden entfernt) erreicht:
+<code html>
+<WRAP>
+  <div two-col-grid>
+    <div>1. Spalte z. B. ein Bild</div>
+    <div>2. Spalte</div>
+  </div>
+</WRAP>
+</code>
+==== Bilder einfügen ====
+Ein Bild wird so eingefügt:
+<code>
+{{.:pasted:20250909-172034.png?nolink&400}}
+</code>
+Anmerkung: Die Bildgröße muss angegeben werden (Empfehlung: 400), wenn der Abschnitt auch im Headset angezeigt werden soll. Der Grund ist, dass im Headset die Größe mit dem Faktor 3 multipliziert wird, da für die Schärfe der Darstellung der Inhalt für das Headset wesentlich größer gerendert wird.
+==== Icons einfügen ====
+Icons im Text können in der Überschrift oder im normalen Text verwendet werden.
+=== Icons in der Überschrift ===
+Die App-Icons sind in diesem Verzeichnis aufgelistet: https://cdn.vrdoro.com/shared/assets/images/app/
+Im Wiki sind sie über dieses URL-Präfix erreichbar: https://cdn.vrdoro.com/data/vrdoro/images/shared/app/ - nur mit diesem Präfix ist es möglich den Image-Server zu nutzen. Folgende Parameter werden in der Regel verwendet: ''filt=negate&w=40&.png?nolink''. Die Reihenfolge ist dabei wichtig. Die Parameter stehen für:
+  - ''filt=negate'': Zeige das transparente Icon schwarz an. Das Icon ist transparent, damit es in der App eingefärbt werden kann.
+  - ''w=40'': Die Größe, in der Überschrift ist ''w=40'' und die Größe im im Fließtext ist ''w=20''.
+  - ''nolink'': Das Icon hat keinen Link um es in einem anderem Tab zu öffnen und zu vergrößern.
+Bei einer Überschrift muss ein DIV mit der Klasse ''title'' verwendet werden, damit das Icon in der gleichen Zeile angezeigt wird.
+Beispiel ([[https://docs.vrdoro.com/doku.php?id=vproduct:room-measure:modes|Beispielseite in neuem Tab öffnen]]):
+<code html>
+<WRAP vrdoro-help #help-panel>
+<div title>
+{{https://cdn.vrdoro.com/data/vrdoro/images/shared/app/circle-question.png?filt=negate&w=40&.png?nolink}}
+===== Überschrift =====
+</div>
+</code>
+=== Icons im Fließtext ===
+Sollen Icons im Fließtext angezeigt werden, dann muss nur das Icon angegeben werden.
+Beispiel:
+<code>
+{{https://cdn.vrdoro.com/data/vrdoro/images/shared/app/info-circle.png?filt=negate&w=20&trim=1&.png?nolink}}
+</code>
+Hier wird der zusätzliche Parameter ''trim=1'' verwendet. Dieser bewirkt, dass das Icon ohne Rand eingefügt wird und erlaubt damit das Icon auf die Textgrundlinie zu stellen.