Author Topic: Draw a square around text  (Read 4538 times)

cassette

  • Full Member
  • ***
  • Posts: 170
  • Karma: +1/-0
    • View Profile
Draw a square around text
« on: June 15, 2017, 07:38:59 AM »
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

  • Administrator
  • Hero Member
  • *****
  • Posts: 1534
  • Karma: +46/-14
    • View Profile
    • Towel 42
Re: Draw a square around text
« Reply #1 on: June 15, 2017, 09:17:48 AM »
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

  • Full Member
  • ***
  • Posts: 170
  • Karma: +1/-0
    • View Profile
Re: Draw a square around text
« Reply #2 on: June 15, 2017, 10:28:10 AM »
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

  • Full Member
  • ***
  • Posts: 166
  • Karma: +1/-0
    • View Profile
Re: Draw a square around text
« Reply #3 on: June 15, 2017, 11:53:40 PM »

Code: [Select]
backgroundColor -    Fill the component with a background color.

dustind900

  • Full Member
  • ***
  • Posts: 104
  • Karma: +9/-3
    • View Profile
Re: Draw a square around text
« Reply #4 on: June 16, 2017, 05:44:27 PM »
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

  • Full Member
  • ***
  • Posts: 170
  • Karma: +1/-0
    • View Profile
Re: Draw a square around text
« Reply #5 on: June 18, 2017, 11:24:15 PM »
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

  • Administrator
  • Hero Member
  • *****
  • Posts: 1534
  • Karma: +46/-14
    • View Profile
    • Towel 42
Re: Draw a square around text
« Reply #6 on: June 19, 2017, 06:55:06 AM »
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

  • Full Member
  • ***
  • Posts: 170
  • Karma: +1/-0
    • View Profile
Re: Draw a square around text
« Reply #7 on: June 19, 2017, 03:33:05 PM »
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.
« Last Edit: June 23, 2017, 06:14:36 PM by firewater »