ES Theming: System View - Jetup13/Emulationstation-OGA-Theme-Gallery GitHub Wiki

Work in progress - Unfinished

System View

  • Everything within the system view name will appear on the system list
       <view name="system">
       </view>

Help Buttons

  • Can use the following for helpsystem
  • <pos></pos> (Position of helpsystem)
  • <origin></origin>
  • <textColor></textColor>
  • <iconColor></iconColor> (Color of help icons)
  • <fontPath></fontPath> (Path to font)
  • <fontSize></fontSize> (Font Size)
       <helpsystem name="help">
       <fontPath>./_inc/fonts/acre.ttf</fontPath>
       <fontSize>0.025</fontSize>
       </view>

System Carousel

  • Carousel used while in system view
  • Can use the following for systemcarousel
  • <type></type> (Type of system scroll:horizontal, vertical, horizontal_wheel, or vertical_wheel
  • <color></color> (Hex code color of carousel background)
  • <colorEnd></colorEnd> (Hex code color of gradient end)
  • <gradientType></gradientType> (Gradient type: horizontal or vertical)
  • <maxLogoCount></maxLogoCount> (Number of logos rendered on screen. Can use half number too)
  • <pos></pos> (Position of carousel)
  • <origin></origin>
  • <logoSize></logoSize> (Size of logos)
  • <logoScale></logoScale> (Scale of logo highlighted)
  • <logoAlignment></logoAlignment> (top, bottom, or center can be used for horizontal and horizontal_wheel while left, right, or center can be used for vertical and vertical_wheel)
  • <logoRotation></logoRotation> (Advanced: Angle in degrees of rotation. Used for horizontal_wheel or vertical_wheel.)
  • <logoRotationOrigin></logoRotationOrigin> (Advanced: X and Y point where logos start rotating)
  • <zIndex></zIndex> (Layer)
  • <systemInfoDelay></systemInfoDelay> System Info Delay timer
    <carousel name="systemcarousel">
         <origin>0 0</origin>
         <pos>0 0</pos>
         <type>horizontal</type>
         <color>FFFFFF00</color>
         <size>1 1</size>
         <logoSize>0.9 0.425</logoSize>
         <logoScale>1</logoScale>
         <maxLogoCount>1</maxLogoCount>    
    </carousel>

Logos

  • Logo image used for carousel
  • Tip: use ${system.theme} as shown below to have your theme look for file names according to the tag.
  • Emulationstation can use these file formats for images .jpg, .png, .svg, .gif (Unanimated)
  • Can use the following for logo
  • <path></path> (Path to logo)
  • <color></color> (Coloring logos)
       <image name="logo">
	   <path>./example/path/${system.theme}.png</path>
       </view>

LogoText

  • Logo Text is used if a logo image isn't found or specified
  • Can use the following for logoText
  • <pos></pos> (x y)
  • <size></size> (Amount of space text can be rendered)
  • <origin></origin> (x y)
  • <color></color> (Hex code color of text)
  • <backgroundColor></backgroundColor> (Hex code color used for the background of text)
  • <lineSpacing></lineSpacing> (Space between lines)
  • <fontPath></fontPath> (Font file used)
  • <fontSize></fontSize> (Size of font)
  • <rotation></rotation> (Advanced: Text rotation in angle of degrees)
  • <rotationOrigin></rotationOrigin> (Advanced: Point to where text starts to rotate)
  • <alignment></alignment> (Alignment of text. Can use left, right, center`)
  • <forceUppercase></forceUppercase> (true or false)
  • <visible></visible> (true or false)
  • <zIndex></zIndex> (Layer)
  • <glowColor></glowColor> (Hex code color glow around text)
  • <glowSize></glowSize>
  • <glowOffset></glowOffset> (Can be used to shadow text)
  • <reflexion></reflexion> (Two numbers. First is the top alpha while second is bottom alpha)
       <text name="logoText">
       <fontPath>./example/path/Lato-Bold.ttf</fontPath>
       <fontSize>0.1</fontSize>
       <forceUppercase>true</forceUppercase>
       <lineSpacing>1</lineSpacing>
       <alignment>center</alignment>
       <color>ffffff</color>
       </text>

System Info

  • Displays the amount of games or apps of the highlighted system selected
  • Can use any of the text tags (Check LogoText)
       <text name="systemInfo">     
       <pos>0.0 0.0</pos>
       <backgroundColor>00000000</backgroundColor>
       <fontPath>./Lato-Bold.ttf</fontPath>
	   <fontSize>0.05</fontSize>
       <zIndex>5</zIndex>	     
       </text>

Background Images

  • You can add background images
  • Tip: Use ${system.theme} if you want backgrounds per system when highlight
  • Tip: You can change the naming of background in <image name="background" extra="true"> to something else to add more images to your theme
  • Advanced Tip: You can have your theme pull a random cover art image from the highlighted systems gamelist.xml by using <path>{random:image}</path>
  • Emulationstation can use these file formats for images .jpg, .png, .svg, .gif (Unanimated)
  • Can use the following for image
  • <pos></pos> (x y)
  • <path></path> (Path to image/s)
  • <color></color> (Hex color code)
  • <colorEnd></colorEnd> (Hex color code of end of gradient)
  • <gradientType></gradientType> (horizontal or vertical)
  • <size></size>
  • <maxSize></maxSize> (Image will resize to fit the screen and fit its apsect ration. Convient when using different image sizes)
  • <minSize></minSize> (Advanced: Like maxSize but image can partly hidden)
  • <tile></tile>
  • <origin></origin>
  • <rotation></rotation>
  • <rotationOrigin></rotationOrigin>
  • <visible></visible>
  • <horizontalAlignment></horizontalAlignment> (If maxSize is used you can tell the image the alignment: left, right, and center)
  • <verticalAlignment></verticalAlignment> (If maxSize is used you can tell the image the alignment: top, bottom, and center)
  • <flipX></flipX> (Flip image horizontally: true or false)
  • <flipY></flipY> (Flip image vertically: true or false)
  • <zIndex></zIndex> (Layer)
       <image name="background" extra="true">
       <path>./example/path/${system.theme}.jpg</path>
       <tile>false</tile>
       <size>1 1</size>
       <pos>0 0.2</pos>
       <origin>0 0</origin>
       <zIndex>0</zIndex>
       </image>

Background Videos

  • Tip: You can use most tags that are available in Background Images
  • Emulationstation can use these file formats for videos .mp4 and .m4v
  • Advanced Tip: You can have your theme pull a random video from the highlighted system gamelist.xml by using <path>{random}</path> 
      <video name="video background" extra="true">
      <path>./videos/${system.theme}.m4v</path>
      <color>FFFFFF</color>
      <pos>0 0</pos>
      <size>1 1</size>
      <zIndex>11</zIndex>
      </video>

Example System XML

    <feature supported="carousel">
    <view name="system">	
    <carousel name="systemcarousel">
         <origin>0 0</origin>
         <pos>0 0</pos>
         <type>horizontal</type>
         <color>FFFFFF00</color>
         <size>1 1</size>
         <logoSize>0.9 0.425</logoSize>
         <logoScale>1</logoScale>
         <maxLogoCount>1</maxLogoCount>    
    </carousel>

    <text name="logoText">
         <fontPath>./Lato-Bold.ttf</fontPath>
         <fontSize>0.1</fontSize>
	 <forceUppercase>true</forceUppercase>
         <lineSpacing>1</lineSpacing>
         <alignment>center</alignment>
         <color>ffffff</color>
    </text>
	  
    <text name="systemInfo">     
         <pos>0.0 0.0</pos>
         <backgroundColor>00000000</backgroundColor>
         <fontPath>./Lato-Bold.ttf</fontPath>
	 <fontSize>0.05</fontSize>
         <zIndex>5</zIndex>	     
    </text> 
	
    <helpsystem name="help">
         <fontPath>./Lato-Bold.ttf</fontPath>  
         <fontSize>0.00</fontSize>
         <pos>0.0 -1</pos>
         <textColor>ffffff</textColor>
         <iconColor>ffffff</iconColor>
         </helpsystem>
    </view>
    </feature>
⚠️ **GitHub.com Fallback** ⚠️