===== 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:

==== 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 im Template-Code.

Beispiel ([[https://docs.vrdoro.com/doku.php?id=vproduct:room-measure:modes|Beispielseite in neuem Tab öffnen]]):
<code html>
<WRAP vrdoro-help #irgendeineID>
==== Überschrift ====
Textinhalt.
</WRAP>
</code>

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.

==== 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 = {
  de: {
    step1: {
      description: '',
      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.