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:

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 (</ignore>Beispielseite open in new tab):

<WRAP vrdoro-help #irgendeineID>
==== Überschrift ====
Textinhalt.
</WRAP>

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.

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

Example (Beispielseite open in new tab):

this.translations = {
  de: {
    step1: {
      description: '',
      docFunction: () =>  this.helpPanelNeoCode.getWikiContent('https://docs.vrdoro.com/doku.php?id=pageID', 'irgendeineID')
    },
  },
}

anyID references the ID from the WRAP-tag above.

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

These classes mean

1. only-headset: The text is not visible on the wiki page. Exception: Admins see the text with a yellow background.
2. 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 (</ignore>Beispielseite open in new tab):

<div only-headset>
Dieser Text ist nur im Headset sichtbar!
</div>

Example not-in-headset (</ignore>Beispielseite open in new tab):

<div not-in-headset>
Dieser Text ist **nicht** im Headset sichtbar!
</div>

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

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

An image is inserted like this:

{{pasted:20250909-172034.png?nolink&400}}

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.

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

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:

1. filt=negate: Show the transparent icon in black. The icon is transparent so that it can be coloured in the app.
2. w=40: The size in the heading is w=40 and the size in the body text is w=20.
3. nolinkThe 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 (</ignore>Beispielseite open in new tab):

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

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

Example:

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

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.