Custom Styles - Advanced

General Options

It is possible to customize the graphical style of many aspects of your present4D VR-Suite projects including the style of icons used for HotSpots, Slideshows, and in Conference Mode. You can even change the entire look of the program by customizing the colors and textures used in the graphical user interface of the program.

All these modifications are done by editing the media.xml file. This file is initally created by present4D for each project. This file contains parameters that define all the graphical aspects of that project. The sections of code shown throughout this chapter are examples of how these parameters appear in the media.xml file.

Logo, HotSpot and Slideshow Icons

To change the actual icon used for HotSpots and Sideshows please refer to these instructions: Add Custom Icons to a Project and Logo & Splash Registration

HotSpot and Slideshow Parameters

Use the following parameters to change the style of HotSpot and Slideshow icons:

<hotspot ...=... scaleH="1.2" distanceH="10" iconType="auto" ...=... >
<slideshow ...=... distance="20.0" scale="3.75" ...=... >
  • scaleH
    Size of the hotspot icon
  • distanceH
    Distance of the hotspot icon from your eyes
  • iconType
    Rotation functionality of the hotspot icon
    • If iconType=”auto”
      The standard hotspot is rotating, individually swapped icon is not rotating
    • If iconType=”rotation”
      All HotSpots are rotating
  • scale
    Size of Slideshow icon
  • distance
    Distance of Slideshow icon from your eyes

Hide Text for HotSpots and Slideshows

This settings can be configured in the iMenu / Settings since V 2.3.

<tourSettings>
    ...
    <hideAllhotspotTexts>false</hideAllhotspotTexts>
    <hideAllSlideshowTexts>false</hideAllSlideshowTexts>
    ...

  • hideALLhotspotTexts

  • hideALLSlideshowTexts

    • If set to true all text will be invisible

Transparency of HotSpot and Slideshow Icons

The transparency parameter can make it easier to match your corporate design.

<tourSettings>
    ...
    <disableTransparencyOfHotspotButtons>false</disableTransparencyOfHotspotButtons>
    <disableTransparencyOfSlideshowButtons>false</disableTransparencyOfSlideshowButtons>
    ...
  • disableTransparencyOfHotspotButtons
  • disableTransparencyOfSlideshowButtons
    • If set to true the icons will be displayed without transparency

Default Values for HotSpot and Slideshow Parameters

The default values for many graphical parameters can be defined in the media.xml file. If you manually edit these settings, it will affect all new elements which will be added to this project in future.

<TourGeneratorDefaultValues>
   <Location>
     <DefaultScale>0.25</DefaultScale>
     <DefaultDistance>6</DefaultDistance>
   </Location>
   <Location-tour>
     <DefaultScale>0.3</DefaultScale>
     <DefaultDistance>6</DefaultDistance>
   </Location-tour>
   <slideshow>
     <DefaultScale>1.2</DefaultScale>
     <DefaultDistance>10</DefaultDistance>
   </slideshow>
   <POI>
     <DefaultScale>0.175</DefaultScale>
     <DefaultDistance>6</DefaultDistance>
   </POI>
   <sound>
     <DefaultScale>1.753</DefaultScale>
     <DefaultDistance>17.3</DefaultDistance>
   </sound>
   <POITwoRows>
     <DefaultScale>0.3</DefaultScale>
     <DefaultDistance>6</DefaultDistance>
   </POITwoRows>
 </TourGeneratorDefaultValues>

Guided Tour HotSpot Color

Set an individual color for the Guided Tour HotSpots. Due to differences in how computer graphics and VR hardware displays a project, RGB values may not be displayed exactly.

<tourSettings>
    ...
    <tourColor red="0" green="90" blue="140" />
    ...

Laser Pointer Size

The size of the laser pointer can be scaled with this parameter in media.xml:

<tourSettings>
    ...
    <laserpointerSize>3</laserpointerSize>
    ...

Laser Pointer Color

The color of the laser pointer can be customized with this parameter in media.xml:

<tourSettings>
    ...
    <customUI>
        <customColors active="true">
            <colorEntry name="laserpointer_leader" r="0" g="0" b="80" a="179" />
            <colorEntry name="laserpointer_follower" r="0" g="255" b="255" a="179" />
            ...

Conference Arrow

<tourSettings>
    ...
    <customUI>
        <colorEntry name="laserpointer_leader" r="45.0827141" g="204.375" b="79.13829" a="179" />
        <colorEntry name="laserpointer_follower" r="193.125" g="32.6608429" b="32.6608429" a="179" />

Change the texture of the Laser Pointer and Guided Tour Arrow icons by replacing these files in the textures subfolder:

  • Laserpointer.png
  • GuidedTourArrow.png

3D Object Background

Change the texture of the background used to display 3D Objects by replacing these files in the textures subfolder:

  • model_background.png
  • model_close.png

Skin Customization

_images/skin-example.jpg

Design an Unique Skin for present4D Interface

It is possible to change the graphical style of present4D interface. Download an example skin file set from our website and place into the folder data_myProject/textures or create your own skin, with the following steps:

Preparation for changing the Skin:
  • In the media.xml file: Set customColors active and customTextures active to true
  • Adjust the default colors in the media.xml file
  • Copy customized graphic files into the data_myProject/textures subfolder. If the folder textures does not exist please create it manually.
If you wish to create your own png files:
  1. Download the texture template files in Photoshop format (*.psd) from our website (–> Download Additional Skin Examples).
  2. Use the droplet to convert them into transparent .png files (24-Bit RGBA)
  3. Copy the *.png images into the folder data_myProject/textures. If the folder textures does not exist please create it manually.
  4. media.xml: Adjust colors as needed (the a value is for alpha / transparency)

Skin Color Definitions

Example Code Block

<tourSettings>
    ...
    <customUI>
        <customColors active="true">
            <colorEntry name="menu_text" r="0" g="0" b="0" />
            <colorEntry name="conference_text" r="255" g="255" b="255" a="255" />
            <colorEntry name="video_grabber" r="255" g="255" b="255" a="255" />
            <colorEntry name="video_time" r="0" g="90" b="140" a="255" />
            <colorEntry name="video_slider" r="255" g="255" b="255" a="255" />
            <colorEntry name="menu_text-marked" r="255" g="255" b="255" />
            <colorEntry name="slide_label-text" r="255" g="255" b="255" />
            <colorEntry name="spot_label-text" r="255" g="255" b="255" />
            <colorEntry name="welcometext_headline" r="255" g="255" b="255" />
            <colorEntry name="welcometext_subheadline" r="255" g="255" b="255" />
            <colorEntry name="slide_load-Location-text" r="255" g="255" b="255" a="255" />
            <colorEntry name="poi_headline" r="255" g="255" b="255" a="255" />
            <colorEntry name="poi_subheadline" r="255" g="255" b="255" a="255" />
            <colorEntry name="quiz_description_subheadline" r="55" g="55" b="55" a="255" />
            <colorEntry name="quiz_description_headline" r="55" g="55" b="55" a="255" />
            <colorEntry name="quiz_question_headline" r="55" g="55" b="55" a="255" />
            <colorEntry name="quiz_question_answer" r="55" g="55" b="55" a="255" />
            <colorEntry name="quiz_answer_headline" r="55" g="55" b="55" a="255" />
            <colorEntry name="quiz_question_answer_default" r="55" g="55" b="55" a="255" />
            <colorEntry name="quiz_question_answer_greyedout" r="56" g="56" b="56" a="102" />
            <colorEntry name="quiz_question_answer_checkmark_correct" r="0" g="181" b="0" a="255" />
            <colorEntry name="quiz_question_answer_checkmark_wrong" r="56" g="56" b="56" a="102" />
            <colorEntry name="quiz_question_answer_wrong" r="252" g="0" b="0" a="255" />
            <colorEntry name="quiz_result_headline" r="55" g="55" b="55" a="255" />
            <colorEntry name="quiz_result_subheadline" r="55" g="55" b="55" a="255" />
        </customColors>
        <customTextures active="true" />
    </customUI>

Skin Color Definitions for Textures

_images/present4D-VR-Suite-Skin-imenu.jpg _images/present4D-VR-Suite-Skin-slide-video.jpg _images/present4D-VR-Suite-Skin-spots.jpg _images/present4D-VR-Suite-Skin-poi.jpg _images/present4D-VR-Suite-Skin-conferrence.jpg

Quiz Skin

To choose different pictures for every single slide, click the Picture Symbol and select the picture.

Copy the *.png images into the folder data_myProject/textures

quiz_background.png
Background behind the Quiz Slideshow
quiz_close.png
Close the Quiz
quiz_next.png
Load next Slide
quiz_question_correctcheckmark.png
Checkmark to show the correct answers
quiz_question_multimarker.png
Checkbox marker for multiple choice
quiz_question_multiplechoice.png
Checkbox for multiple choice
quiz_question_singlechoice.png
Checkbox for multiple choice
quiz_question_singlemarker.png
Checkbox marker for single choice

Video Tutorials

Visit our Youtube Tutorial Video Channel