Draw a square around text

[cassette]

Any way to do this without creating each image as a logo?



Sorry if I'm opening multiple threads, but I think it's better this way for archival purposes.

[Pieter Hulshoff]

In all honesty: I have no idea. There's some background parameters listed in the documentation, but I never really looked into them, nor did I check if they actually work. I know some of the things were listed as todo still by Emb. I'll have to take a closer look, and if needs be add a feature for it.

[cassette]

Cool, thanks for checking. Hopefully the existing code it's functional to some degree, as it'd be cleaner to have it like this instead of as images (easier to change color, size, and so on). I requested something like this one time (to attach an element to the border of another element), but that time I oriented it towards images in general, for example to have a border around the boxart so that it would adapt to boxart with different aspect ratios. So it'd improve that too :p

[ryuuji]

Code: [Select]

backgroundColor -    Fill the component with a background color.

[dustind900]

I think the old default layout (not aeon nox) has something similar to what you are looking for

Sent from my LG-H950 using Tapatalk

[cassette]

Well, I tried backgroundColor="dadada" but I didn't get anything, and I looked at Flatio (which I think is what you were referring to), but it uses images for this stuff.

But most importantly - what's up with the font rendering?



My layout.xml is

Code: [Select]

<!----------------------------------------------------------------------------------------------------------------------------------->
  <!-- Settings -->
<!----------------------------------------------------------------------------------------------------------------------------------->

<layout width="1920" height="1080" font="fonts/Helvetica-Bold.ttf" loadFontSize="42" loadFontSize="60" loadFontSize="72" fontColor="282828">

<!----------------------------------------------------------------------------------------------------------------------------------->
  <!-- Sounds -->
<!----------------------------------------------------------------------------------------------------------------------------------->

  <sound type="highlight" src="sounds/highlight.wav" />
  <sound type="select" src="sounds/select.wav" />

<!----------------------------------------------------------------------------------------------------------------------------------->
  <!-- Main Menu -->
<!----------------------------------------------------------------------------------------------------------------------------------->

  <reloadableImage type="background" mode="layout" x="0" y="0" width="stretch" layer="0">
        <onMenuEnter menuIndex="0">
            <set duration=".01">
                <animate type="alpha" to="1" algorithm="easeinquadratic"/>
            </set>
        </onMenuEnter>

        <onMenuExit menuIndex="0">
            <set duration=".01">
                <animate type="alpha" to="1" algorithm="easeinquadratic"/>
            </set>
        </onMenuExit>
    </reloadableImage>

   <menu type="custom" imageType="" orientation="vertical" width="1500" height="100" scrollTime=".24" scrollAcceleration=".04">
      <itemDefaults spacing="2" y="center" x="center" yOrigin="center" xOrigin="center" fontSize="60" width="1500" maxHeight="120" alpha="0.7" layer="16"/>
      <item  yOffset="-664" alpha="0" >
        <onMenuEnter menuIndex="0">
          <set duration=".25">
            <animate type="xOffset" from="1430" to="830" algorithm="easeincircular"/>
          </set>
        </onMenuEnter>
        <onMenuExit menuIndex="0">
           <set duration=".25">
             <animate type="xOffset" from="830" to="1430" algorithm="easeincircular"/>
           </set>
        </onMenuExit>
      </item>
      <item  yOffset="-568">
        <onMenuEnter menuIndex="0">
          <set duration=".25">
            <animate type="xOffset" from="1370" to="770" algorithm="easeincircular"/>
          </set>
        </onMenuEnter>
        <onMenuExit menuIndex="0">
           <set duration=".25">
             <animate type="xOffset" from="770" to="1370" algorithm="easeincircular"/>
           </set>
        </onMenuExit>
      </item>
      <item  yOffset="-464">
        <onMenuEnter menuIndex="0">
          <set duration=".25">
            <animate type="xOffset" from="1310" to="710" algorithm="easeincircular"/>
          </set>
        </onMenuEnter>
        <onMenuExit menuIndex="0">
           <set duration=".25">
             <animate type="xOffset" from="710" to="1310" algorithm="easeincircular"/>
           </set>
        </onMenuExit>
      </item>
      <item  yOffset="-354">
        <onMenuEnter menuIndex="0">
          <set duration=".25">
            <animate type="xOffset" from="1265" to="665" algorithm="easeincircular"/>
          </set>
        </onMenuEnter>
        <onMenuExit menuIndex="0">
           <set duration=".25">
             <animate type="xOffset" from="665" to="1265" algorithm="easeincircular"/>
           </set>
        </onMenuExit>
      </item>
      <item  yOffset="-238">
        <onMenuEnter menuIndex="0">
          <set duration=".25">
            <animate type="xOffset" from="1230" to="630" algorithm="easeincircular"/>
          </set>
        </onMenuEnter>
        <onMenuExit menuIndex="0">
           <set duration=".25">
             <animate type="xOffset" from="630" to="1230" algorithm="easeincircular"/>
           </set>
        </onMenuExit>
      </item>
      <item  yOffset="-120">
        <onMenuEnter menuIndex="0">
          <set duration=".25">
            <animate type="xOffset" from="1210" to="610" algorithm="easeincircular"/>
          </set>
        </onMenuEnter>
        <onMenuExit menuIndex="0">
           <set duration=".25">
             <animate type="xOffset" from="610" to="1210" algorithm="easeincircular"/>
           </set>
        </onMenuExit>
      </item>
      <item backgroundColor="dedede" fontSize="72" fontColor="eaeaea" layer="17" width="1500" maxHeight="200" alpha="1" selected="true">
        <onMenuEnter menuIndex="0">
          <set duration=".25">
            <animate type="xOffset" from="1300" to="600" algorithm="easeincircular"/>
          </set>
        </onMenuEnter>
        <onMenuExit menuIndex="0">
           <set duration=".25">
             <animate type="xOffset" from="600" to="1300" algorithm="easeincircular"/>
           </set>
        </onMenuExit>
      </item>
      <item  yOffset="120" >
        <onMenuEnter menuIndex="0">
          <set duration=".25">
            <animate type="xOffset" from="1210" to="610" algorithm="easeincircular"/>
          </set>
        </onMenuEnter>
        <onMenuExit menuIndex="0">
           <set duration=".25">
             <animate type="xOffset" from="610" to="1210" algorithm="easeincircular"/>
           </set>
        </onMenuExit>
      </item>
      <item  yOffset="238" >
        <onMenuEnter menuIndex="0">
          <set duration=".25">
            <animate type="xOffset" from="1230" to="630" algorithm="easeincircular"/>
          </set>
        </onMenuEnter>
        <onMenuExit menuIndex="0">
           <set duration=".25">
             <animate type="xOffset" from="630" to="1230" algorithm="easeincircular"/>
           </set>
        </onMenuExit>
      </item>
      <item  yOffset="354" >
        <onMenuEnter menuIndex="0">
          <set duration=".25">
            <animate type="xOffset" from="1265" to="665" algorithm="easeincircular"/>
          </set>
        </onMenuEnter>
        <onMenuExit menuIndex="0">
           <set duration=".25">
             <animate type="xOffset" from="665" to="1265" algorithm="easeincircular"/>
           </set>
        </onMenuExit>
      </item>
      <item  yOffset="464" >
        <onMenuEnter menuIndex="0">
          <set duration=".25">
            <animate type="xOffset" from="1310" to="710" algorithm="easeincircular"/>
          </set>
        </onMenuEnter>
        <onMenuExit menuIndex="0">
           <set duration=".25">
             <animate type="xOffset" from="710" to="1310" algorithm="easeincircular"/>
           </set>
        </onMenuExit>
      </item>
      <item  yOffset="568" >
        <onMenuEnter menuIndex="0">
          <set duration=".25">
            <animate type="xOffset" from="1370" to="770" algorithm="easeincircular"/>
          </set>
        </onMenuEnter>
        <onMenuExit menuIndex="0">
           <set duration=".25">
             <animate type="xOffset" from="770" to="1370" algorithm="easeincircular"/>
           </set>
        </onMenuExit>
      </item>
      <item  yOffset="664" alpha="0" >
        <onMenuEnter menuIndex="0">
          <set duration=".25">
            <animate type="xOffset" from="1430" to="830" algorithm="easeincircular"/>
          </set>
        </onMenuEnter>
        <onMenuExit menuIndex="0">
           <set duration=".25">
             <animate type="xOffset" from="830" to="1430" algorithm="easeincircular"/>
           </set>
        </onMenuExit>
      </item>
   </menu>

<!----------------------------------------------------------------------------------------------------------------------------------->
  <!-- Sub Menu -->
<!----------------------------------------------------------------------------------------------------------------------------------->

   <menu type="custom" imageType="" orientation="vertical" width="1500" height="100" scrollTime=".24" scrollAcceleration=".04">
    <itemDefaults font="fonts/Helvetica-Bold.ttf" spacing="2" y="center" x="center" yOrigin="center" xOrigin="center" fontSize="42" width="1500" maxHeight="120" layer="16" alpha="1"/>
      <item xOffset="0" angle="0" yOffset="-664" alpha="0" >
        <onMenuExit menuIndex="1">
          <set duration=".01">
            <animate type="alpha" to="0" algorithm="easeinquadratic"/>
          </set>
        </onMenuExit>
      </item>

      <item xOffset="0" angle="0" yOffset="-568">
        <onMenuExit menuIndex="1">
          <set duration=".01">
            <animate type="alpha" to="0" algorithm="easeinquadratic"/>
          </set>
        </onMenuExit>
      </item>

      <item xOffset="0" angle="0" yOffset="-464">
        <onMenuExit menuIndex="1">
          <set duration=".01">
            <animate type="alpha" to="0" algorithm="easeinquadratic"/>
          </set>
        </onMenuExit>
      </item>

      <item xOffset="0" angle="0" yOffset="-354">
        <onMenuExit menuIndex="1">
          <set duration=".01">
            <animate type="alpha" to="0" algorithm="easeinquadratic"/>
          </set>
        </onMenuExit>
      </item>

      <item xOffset="0" angle="0" yOffset="-238">
        <onMenuExit menuIndex="1">
          <set duration=".01">
            <animate type="alpha" to="0" algorithm="easeinquadratic"/>
          </set>
        </onMenuExit>
      </item>

      <item xOffset="0" angle="0" yOffset="-120">
        <onMenuExit menuIndex="1">
          <set duration=".01">
            <animate type="alpha" to="0" algorithm="easeinquadratic"/>
          </set>
        </onMenuExit>
      </item>

      <item xOffset="0" yOffset="0" layer="17" width="1500" maxHeight="200" alpha="1" selected="true" fontSize="72" fontColor="000000">
      <onMenuExit menuIndex="1">
        <set duration=".01">
          <animate type="alpha" to="0" algorithm="easeinquadratic"/>
         </set>
     </onMenuExit>
      </item>

      <item xOffset="0" angle="0" yOffset="120" >
        <onMenuExit menuIndex="1">
          <set duration=".01">
            <animate type="alpha" to="0" algorithm="easeinquadratic"/>
          </set>
        </onMenuExit>
      </item>

      <item xOffset="0" angle="0" yOffset="238" >
        <onMenuExit menuIndex="1">
          <set duration=".01">
            <animate type="alpha" to="0" algorithm="easeinquadratic"/>
          </set>
        </onMenuExit>
      </item>

      <item xOffset="0" angle="0" yOffset="354" >
        <onMenuExit menuIndex="1">
          <set duration=".01">
            <animate type="alpha" to="0" algorithm="easeinquadratic"/>
          </set>
        </onMenuExit>
      </item>

      <item xOffset="0" angle="0" yOffset="464" >
        <onMenuExit menuIndex="1">
          <set duration=".01">
            <animate type="alpha" to="0" algorithm="easeinquadratic"/>
          </set>
        </onMenuExit>
      </item>

      <item xOffset="0" angle="0" yOffset="568" >
        <onMenuExit menuIndex="1">
          <set duration=".01">
            <animate type="alpha" to="0" algorithm="easeinquadratic"/>
          </set>
        </onMenuExit>
      </item>

      <item xOffset="0" angle="0" yOffset="664" alpha="0" >
        <onMenuExit menuIndex="1">
          <set duration=".01">
            <animate type="alpha" to="0" algorithm="easeinquadratic"/>
          </set>
        </onMenuExit>
      </item>

   </menu>

    <image src="images/video_overlay.png" x="0" y="0" width="stretch" alpha="0" layer="13">
        <onMenuEnter menuIndex="1">
          <set duration=".01">
           <animate type="alpha" to="1" algorithm="easeinquadratic"/>
          </set>
        </onMenuEnter>

        <onMenuExit menuIndex="1">
          <set duration=".01">
            <animate type="alpha" to="0" algorithm="easeinquadratic"/>
          </set>
        </onMenuExit>
    </image>

    <image src="images/dark_overlay.png" x="0" y="0" width="stretch" alpha="0" layer="13">
        <onMenuEnter menuIndex="1">
          <set duration=".01">
           <animate type="alpha" to="0.3" algorithm="easeinquadratic"/>
          </set>
        </onMenuEnter>

        <onMenuExit menuIndex="1">
          <set duration=".01">
            <animate type="alpha" to="0" algorithm="easeinquadratic"/>
          </set>
        </onMenuExit>
    </image>

    <image src="images/items.png" x="center" y="center" yOrigin="center" xOrigin="center" height="150" width="stretch" alpha="0" layer="13">
      <onMenuEnter menuIndex="1">
        <set duration=".01">
          <animate type="alpha" to="1" algorithm="easeinquadratic"/>       
        </set>
      </onMenuEnter>

      <onMenuExit menuIndex="1">
        <set duration=".01">
          <animate type="alpha" to="0" algorithm="easeinquadratic"/>
        </set>
      </onMenuExit>
    </image>

    <image src="images/items.png" x="center" y="center" yOrigin="center" xOrigin="center" height="150" width="stretch" alpha="0" layer="17">
      <onMenuEnter menuIndex="1">
        <set duration="0.1">
          <animate type="alpha" to="1" algorithm="easeinquadratic"/>       
        </set>
      </onMenuEnter>

      <onMenuExit menuIndex="1">
        <set duration=".01">
          <animate type="alpha" to="0" algorithm="easeinquadratic"/>
        </set>
      </onMenuExit>
    </image>

  <reloadableVideo imageType="screenshot" alpha="1" x="0" y="center" yOrigin="center" Width="stretch" layer="7">
    <onEnter>
      <set duration=".01">
        <animate type="alpha" to="1" algorithm="easeinquadratic"/>
        <animate type="x" to="0"/>
        <animate type="y" to="center" />
        <animate type="Width" to="stretch"/>
      </set>
    </onEnter>
    <onMenuEnter menuIndex="0">
      <set duration=".01">
        <animate type="x" to="0"/>
        <animate type="y" to="0" />
        <animate type="y" to="center" />
        <animate type="Width" to="stretch"/>
      </set>
      <set duration=".01">
        <animate type="alpha" to="1" algorithm="easeinquadratic"/>
      </set>
      <set duration=".01">
        <animate type="alpha" to="1" algorithm="easeinquadratic"/>
      </set>
    </onMenuEnter>
    <onHighlightEnter menuIndex="0">
      <set duration=".01">
        <animate type="alpha" to="0" algorithm="easeinquadratic"/>
      </set>
      <set duration=".01">
        <animate type="alpha" to="1" algorithm="easeinquadratic"/>
      </set>
    </onHighlightEnter>
    <onMenuExit menuIndex="0">
      <set duration=".01">
        <animate type="alpha" to="0" algorithm="easeinquadratic"/>
      </set>
    </onMenuExit>
    <onExit>
      <set duration=".01">
        <animate type="alpha" to="0" algorithm="easeinquadratic"/>
      </set>
    </onExit>

    <onMenuEnter menuIndex="1">
      <set duration=".01">
        <animate type="x" to="0"/>
        <animate type="y" to="center" />
        <animate type="Width" to="stretch"/>
      </set>
      <set duration=".01">
        <animate type="alpha" to="1" algorithm="easeinquadratic"/>
      </set>
    </onMenuEnter>
    <onHighlightEnter menuIndex="1">
      <set duration=".01">
        <animate type="alpha" to="1" algorithm="easeinquadratic"/>
      </set>
    </onHighlightEnter>
    <onMenuExit menuIndex="1">
      <set duration=".01">
        <animate type="alpha" to="0" algorithm="easeinquadratic"/>
      </set>
      <set duration=".01">
        <animate type="x" to="0"/>
        <animate type="y" to="center" />
        <animate type="Width" to="stretch"/>
      </set>
    </onMenuExit>
  </reloadableVideo>

<!----------------------------------------------------------------------------------------------------------------------------------->
  <!-- Other -->
<!----------------------------------------------------------------------------------------------------------------------------------->

  <reloadableImage type="playlist" mode="commonlayout" alpha="1" x="1850" y="430" xOrigin="center" yOrigin="top" maxHeight="96" layer="19">
        <onEnter>
            <set duration=".8">
                <animate type="nop"/>
            </set>
        </onEnter>
 
       <onExit>
            <set duration=".01">
                <animate type="alpha" to="0" algorithm="easeinquadratic"/>
            </set>
        </onExit>
 
      <onMenuEnter menuIndex="0">
            <set duration=".8">
                <animate type="y" to="430" algorithm="easeinquadratic"/>
            </set>
        </onMenuEnter>

        <onMenuEnter menuIndex="1">
            <set duration=".01">
                <animate type="y" from="-50" to="0" algorithm="easeinquadratic"/>
            </set>
        </onMenuEnter>
 
      <onMenuExit>
            <set duration=".01">
                <animate type="alpha" to="0" algorithm="easeinquadratic"/>
            </set>
        </onMenuExit>
     
        <onIdle>
            <set duration="1">
                <animate type="alpha" to="1" algorithm="easeinquadratic"/>
            </set>
            <set duration="1">
                <animate type="alpha" to="1" algorithm="easeinquadratic"/>
            </set>
        </onIdle>
 </reloadableImage>

</layout>
You can see some artifacts, it renders the font with a border, and just how compressed it looks compared to the picture I posted above (which is how it renders on Photoshop). I switched the font around from .otf to .ttf but it doesn't fix the problems mentioned... am I doing something wrong or is this how it works currently?

[Pieter Hulshoff]

I think the background part needs a look at from a code perspective; as said: I never checked if Emb actually implemented it or if it was just a placeholder.

The rendering may have something to do with the loadFontSize being defined 3 times, with the first time being size 42 (obviously ), and the print size being 60.

[cassette]

I thought of that too, but it looks the same if I only have it defined as 42, and then set it to on all instances, too.

edit: actually, I think you were right! It renders correctly now. I just had a misguided understanding on how the loadFontSize parameter worked - I thought you had to load all sizes on that first line at the beginning, rather than setting it up every time you load a font.