===== Documentation for help in the Visualiser =====
{{INLINETOC 3}}

The help texts in the help panel of the vrdoro Visualiser are managed in the wiki. You can use labelling when writing the wiki content to determine which content is displayed. The following options are available:

==== Activate content ====

If a section from a help page in the software is to be displayed in the help panel, then the section must be marked by a WRAP element with the class ''vrdoro-help'' class. A unique ID for the page, starting with ''#'' enables the section to be referenced in the template code.

Example ([[https://docs.vrdoro.com/doku.php?id=en:vproduct:room-measure:modes|open example page in new tab]]):
<code html>
<WRAP vrdoro-help #irgendeineID>
==== Überschrift ====
Textinhalt.
</WRAP>
</code>

This content is marked in the wiki with a line on the left-hand side. This makes it immediately recognisable that this text is also displayed in the vrdoro-visualizer.

==== Using the content in the visualiser ====

To display this content in the software, the function this.helpPanelNeoCode.getWikiContent is used in the template code to fill a translation map.

Example ([[https://vrdoro.com/editor/~/admin/template-snippets/edit/180|open template snippet in new tab]]):
<code javascript>
this.translations = {
  de: {
    step1: {
      description: '',
      docFunction: () =>  this.helpPanelNeoCode.getWikiContent('https://docs.vrdoro.com/doku.php?id=pageID', 'irgendeineID')
    },
  },
}
</code>

''anyID'' references the ID from the ''WRAP''-tag above.

==== Control contents ====

About ''DIV'' or '''SPAN'' elements with classes can now be used to control which content is visible where.

These classes mean
  - only-headset: The text is not visible on the wiki page. Exception: Admins see the text with a yellow background.
  - not-in-headset: This text is only visible on the wiki page and not in the headset. Admins see the text with a light red background.

Example ''only-headset'' ([[https://docs.vrdoro.com/doku.php?id=en:vproduct:helper-tool:help-panel|open example page in new tab]]): 
<code html>
<div only-headset>
Dieser Text ist nur im Headset sichtbar!
</div>
</code>

Example ''not-in-headset'' ([[https://docs.vrdoro.com/doku.php?id=en:vproduct:helper-tool:scene-align|open example page in new tab]]): 
<code html>
<div not-in-headset>
Dieser Text ist **nicht** im Headset sichtbar!
</div>
</code>

==== 2-column layout ====
A two-column layout is ideal for displaying images. This is achieved in Markdown using this code (indentations are removed):

<code html>
<WRAP>
  <div two-col-grid>
    <div>1. Spalte z. B. ein Bild</div>
    <div>2. Spalte</div>
  </div>
</WRAP>
</code>

==== Insert images ====

An image is inserted like this:
<code>
{{pasted:20250909-172034.png?nolink&400}}
</code>

Note: The image size must be specified (recommendation: 400) if the section is also to be displayed in the headset. The reason for this is that the size is multiplied by a factor of 3 in the headset, as the content is rendered much larger for the headset to ensure sharpness of the display.

==== Insert icons ====

Icons in the text can be used in the heading or in the normal text.

=== Icons in the heading ===

The app icons are listed in this directory: https://cdn.vrdoro.com/shared/assets/images/app/

In the wiki, they can be accessed via this URL prefix: https://cdn.vrdoro.com/data/vrdoro/images/shared/app/ - only with this prefix is it possible to use the image server. The following parameters are usually used: ''filt=negate&w=40&.png?nolink''. The order is important. The parameters stand for:
  - ''filt=negate'': Show the transparent icon in black. The icon is transparent so that it can be coloured in the app.
  - ''w=40'': The size in the heading is ''w=40'' and the size in the body text is ''w=20''.
  - ''nolink''The icon has no link to open and enlarge it in another tab.

For a heading, a DIV with the class ''title'' class must be used so that the icon is displayed in the same line.

Example ([[https://docs.vrdoro.com/doku.php?id=en:vproduct:room-measure:modes|open example page in new tab]]):
<code html>
<WRAP vrdoro-help #help-panel>
<div title>
{{https://cdn.vrdoro.com/data/vrdoro/images/shared/app/circle-question.png?filt<ignore>=negate&w=40&.png?nolink</ignore>}}
===== Überschrift =====
</div>
</code>

=== Icons in continuous text ===

If icons are to be displayed in the body text, only the icon needs to be specified.

Example:
<code> 
{{https://cdn.vrdoro.com/data/vrdoro/images/shared/app/info-circle.png?filt<ignore>=negate&w=20&trim=1&.png?nolink</ignore>}}
</code>

Here the additional parameter ''trim=1'' is used here. This causes the icon to be inserted without a border and allows the icon to be placed on the text baseline.