FAQ  •  Register  •  Login

Rotating Custom xml templates

Moderator: MiRai

<<

photogeek123

Posts: 12

Joined: Mon Mar 28, 2016 9:16 am

Post Wed Mar 30, 2016 12:09 am

Rotating Custom xml templates

I would like to know if there is a way to rotate the custom template buttons, i see the map element has that functionality, but i don't see the rotation property for other elements.
<<

bob

User avatar

League of Extraordinary Multiboxers

Posts: 4587

Joined: Sat Feb 15, 2014 11:14 am

Location: In the dining room, with the lead pipe.

Post Wed Mar 30, 2016 4:05 am

Re: Rotating Custom xml templates

Not all elements are guaranteed to have the same properties, except where they inherit them from a common parent.

The Rotation property is specific to the map element.

You can "rotate" buttons by setting the height/width differently. Templates help with boring tasks like that. If you want an image to rotate (or something like it), then you need to do that via photoshop or something. If you wanted a countdown timer darkened appearance like some games do, then you'd need to create that via a bunch of images, although I'd want to be able to overlay multiple images in that case, and it gets a bit interesting with the needed code behind to manage it.
<<

photogeek123

Posts: 12

Joined: Mon Mar 28, 2016 9:16 am

Post Wed Mar 30, 2016 5:29 am

Re: Rotating Custom xml templates

Yeah, I was kinda expecting that, but i was hoping the docs just weren't updated, it's kinda limited what kind of layout that is possible with only rectangles to use, but I think found a solution that could fix my problems.

My particular problems was that I wanted triangular button, but knowing from a different thread they don't exist, I thought maybe rotate and placing it within a container to "clip" the button would do it.
<<

lax

User avatar

Site Admin

Posts: 7301

Joined: Tue Nov 17, 2009 9:32 pm

Post Wed Mar 30, 2016 5:45 am

Re: Rotating Custom xml templates

The interaction area will be a rectangle, but you can use a background image with partial transparency to make it appear any shape you want
<<

bob

User avatar

League of Extraordinary Multiboxers

Posts: 4587

Joined: Sat Feb 15, 2014 11:14 am

Location: In the dining room, with the lead pipe.

Post Wed Mar 30, 2016 6:06 am

Re: Rotating Custom xml templates

Yeah, been there. I use round buttons in a couple of places and the same issue crops up. Because everything is a square, even the round button (with a transparent edge), then the placement has resulted in a small amount of overlap between each button, but I made sure that was in the transparent areas and so it is not an issue.

This is it with the borders set to 1 so you can see the overlaps.
Image
I used to have them spaced slightly further apart, but decided to bring them closer as I don't normally click on the edges, and further apart meant more mouse travel.

If I was really being pedantic, to get a triangle, in a custom XML, I would try using multiple smaller square buttons, that happened to result in a triangular area. These would need to be named so that they were not mapped to ISBoxer (i.e. not named btn1, btn2, btn3, etc). I would place another button somewhere that would be named so that is would be controlled via an ISBoxer button set. The smaller buttons would all need to use script to trigger this other button (which could be anywhere, and 1px by 1px. If I wanted an image, then I would use yet another button positioned underneath the smaller buttons (they are effectively layered as defined in the XML file so gui items defined last are on top).

No idea if it would all work, and it is probably a load of work for little gain.


/e Thought I'd chuck in part of a menu where I layer buttons.
Image
The background buttons display the image. The little squares (normally these don't show) are layered on top, and as each is selected, it runs a mapped key which does some ATG manipulation and updates the image of the button behind (it changes the background image to one with a "highlight" ring around the selected item which you can see in the first 3 selected). In order for me to be able to configure this in ISBoxer, the button behind needed to be presented (i.e. named btnX), which does make the view of the button set configuration a little odd as there a bunch of buttons that don't do anything, but it works. I could have had some things happening in script and some things not, but in this case I wanted to see if I could make ISBoxer do most of the work, and only have the custom template dealing with the button definition.

There is also a bunch of other funky stuff which normally sets the correct ring highlights for when the menu is loaded, but this test character set does not have the characters assigned to ATG's for the initial selection.

n.b The colour difference in the background images is something to do with my printscrn, and saving as the png file format. It is actually displaying the same image and looks uniform to me during normal usage.
<<

bob

User avatar

League of Extraordinary Multiboxers

Posts: 4587

Joined: Sat Feb 15, 2014 11:14 am

Location: In the dining room, with the lead pipe.

Post Wed Mar 30, 2016 8:51 am

Re: Rotating Custom xml templates

And because I figured I'd try it out to see if I could make it work... this custom XML does a triangle button in a square box. The triangle is framed and also contains the actual button which is linked to ISBoxer. For it to work ISBoxer needs a button set with 2 buttons, Button1 is for the square box, and background image if you have one, Button2 is the one which has the actions on it. The triangle (which is made up of line type buttons) calls the click on button 2. The sizing is what it is because, it just is, but you can adjust it as you need.

It would probably be better to generate the "click area" via a script than add in each line manually, and that might allow some data driven sizing, but that requires a bit more tinkering with Lavishscript and is beyond my hacky attempts (I think I am trying to access the properties before the menu has finished loading - if I could figure it out, then basic shaped click areas would be sorted).

Code:
    <ISUI>

   <template name='background.button' template='MenuMan.Button'>
      <Width>90</Width>
      <Height>84</Height>
      <Alpha>1.0</Alpha>
      <Border>1</Border>
      <BorderColor>FF646464</BorderColor>
      <Texture/>
      <TexturePressed/>
      <TextureHover/>
      <BackgroundColor>FF999999</BackgroundColor>
      <!-- <Text>1</Text> -->
   </template>

   <template name='actual.button' template='MenuMan.Button'>
      <Width>2</Width>
      <Height>2</Height>
      <Alpha>1.0</Alpha>
      <Border>0</Border>
      <BorderColor>FF646464</BorderColor>
      <Texture/>
      <TexturePressed/>
      <TextureHover/>
      <BackgroundColor>FFFFFFF</BackgroundColor>
      <!-- <Text>1</Text> -->
   </template>

   <template name='triangle.row' template='Button'>
      <Width>2</Width>
      <Height>2</Height>
      <Alpha>1.0</Alpha>
      <Border>1</Border>
      <BorderColor>FF646464</BorderColor>
      <Texture/>
      <TexturePressed/>
      <TextureHover/>
      <BackgroundColor>00333333</BackgroundColor>
      <!-- <Text>1</Text> -->
      <OnLeftClick>
         <![CDATA[
            UIElement[buttons@TRIANGLE].FindUsableChild[btn2,lguielement]:LeftClick
         ]]>
      </OnLeftClick>
   </template>

   <Window name='TRIANGLE'>
      <Width>90</Width>
      <Height>100</Height>
      <!-- height needs to include the ISboxer titlebar which is 16 pixels -->
      <Title>${This.GetMetadata[menu].Escape}</Title>
      <BackgroundColor />
      <!--- This needs to be empty to make the menu transparent and click through -->
      <!-- <Texture filename='' />   this is set via ISBoxer now -->
      <Alpha>1.0</Alpha>
      <Visible>1</Visible>
      <Border>0</Border>
      <BorderColor>88FFFFFF</BorderColor>
      <Children>
         <Frame Name='buttons'>

            <BackgroundColor>FFC8C8C8</BackgroundColor>
            <Border>1</Border>

            <Width>100%</Width>
            <Height>100%</Height>
            <BackgroundColor>00333333</BackgroundColor>
            <Children>


               <Button name='btn1' template='background.button'>
                  <X>0</X><Y>0</Y>
               </Button>

               <Frame Name='tripos'>
                  <X>0</X>
                  <Y>22</Y>
                  <Width>100%</Width>
                  <Height>100%</Height>
                  <Children>

                     <Button name='btn2' template='actual.button'>
                        <X>45</X><Y>0</Y>
                     </Button>

                     <!-- row 1 -->
                     <Button name='tri1' template='triangle.row'>
                        <X>45</X><Y>0</Y>
                     </Button>

                     <!-- row 2 -->
                     <Button name='tri2' template='triangle.row'>
                        <X>44</X><Y>2</Y>
                        <width>4</width>
                     </Button>

                     <!-- row 3 -->
                     <Button name='tri3' template='triangle.row'>
                        <X>43</X><Y>4</Y>
                        <width>6</width>
                     </Button>

                     <!-- row 4 -->
                     <Button name='tri4' template='triangle.row'>
                        <X>42</X><Y>6</Y>
                        <width>8</width>
                     </Button>

                     <!-- row 5 -->
                     <Button name='tri5' template='triangle.row'>
                        <X>41</X><Y>8</Y>
                        <width>10</width>
                     </Button>
                     
                     <!-- row 6 -->
                     <Button name='tri6' template='triangle.row'>
                        <X>40</X><Y>10</Y>
                        <width>12</width>
                     </Button>
                     
                     <!-- row 7 -->
                     <Button name='tri7' template='triangle.row'>
                        <X>39</X><Y>12</Y>
                        <width>14</width>
                     </Button>
                     
                     <!-- row 8 -->
                     <Button name='tri8' template='triangle.row'>
                        <X>38</X><Y>14</Y>
                        <width>16</width>
                     </Button>
                     
                     <!-- row 9 -->
                     <Button name='tri9' template='triangle.row'>
                        <X>37</X><Y>16</Y>
                        <width>18</width>
                     </Button>
                     
                     <!-- row 10 -->
                     <Button name='tri10' template='triangle.row'>
                        <X>36</X><Y>18</Y>
                        <width>20</width>
                     </Button>
                     
                     <!-- row 11 -->
                     <Button name='tri11' template='triangle.row'>
                        <X>35</X><Y>20</Y>
                        <width>22</width>
                     </Button>
                     
                     <!-- row 12 -->
                     <Button name='tri12' template='triangle.row'>
                        <X>34</X><Y>22</Y>
                        <width>24</width>
                     </Button>
                     
                     <!-- row 13 -->
                     <Button name='tri13' template='triangle.row'>
                        <X>33</X><Y>24</Y>
                        <width>26</width>
                     </Button>
                     
                     <!-- row 14 -->
                     <Button name='tri14' template='triangle.row'>
                        <X>32</X><Y>26</Y>
                        <width>28</width>
                     </Button>
                     
                     <!-- row 15 -->
                     <Button name='tri15' template='triangle.row'>
                        <X>31</X><Y>28</Y>
                        <width>30</width>
                     </Button>
                     
                     <!-- row 16 -->
                     <Button name='tri16' template='triangle.row'>
                        <X>30</X><Y>30</Y>
                        <width>32</width>
                     </Button>
                     
                     <!-- row 17 -->
                     <Button name='tri17' template='triangle.row'>
                        <X>29</X><Y>32</Y>
                        <width>34</width>
                     </Button>
                     
                     <!-- row 18 -->
                     <Button name='tri18' template='triangle.row'>
                        <X>28</X><Y>34</Y>
                        <width>36</width>
                     </Button>
                     
                     <!-- row 19 -->
                     <Button name='tri19' template='triangle.row'>
                        <X>27</X><Y>36</Y>
                        <width>38</width>
                     </Button>
                     
                     <!-- row 20 -->
                     <Button name='tri20' template='triangle.row'>
                        <X>26</X><Y>38</Y>
                        <width>40</width>
                     </Button>
                     
                     
                  </Children>
               </Frame>
            </Children>
         </Frame>
      </Children>
   </Window>
</ISUI>


/e Note: This template cant be used to have more than 1 triangle button the way it is setup.
/e2, and you will probably need to name your menu, "Triangle".
<<

photogeek123

Posts: 12

Joined: Mon Mar 28, 2016 9:16 am

Post Wed Mar 30, 2016 11:47 am

Re: Rotating Custom xml templates

That was actually a smart way of getting the shape of button i want, i am creating a layout to move my character inpendently and i had forgotten that top+right, top+left buttons would be a good idea too, so i went with square buttons instead, but that snippet might come in handy at some point :)

Return to Menus

Who is online

Users browsing this forum: No registered users and 2 guests

cron