Slick Forums

Discuss the Slick 2D Library
It is currently Sun Dec 17, 2017 6:12 am

All times are UTC




Post new topic Reply to topic  [ 14 posts ] 
Author Message
 Post subject: ResizableFrame question
PostPosted: Mon Jun 17, 2013 12:16 pm 
Offline

Joined: Tue Oct 11, 2011 7:30 pm
Posts: 32
Hi

I'm looking to do something similar to the ResizableFrame, I have been looking at the ResizableFrame code but I have some questions.

I couldn't see any paint methods, how is this drawn? (I must be missing something simple here)

When drawing a frame you need to provide images for the top, bottom, left, right, 4 corners, I couldn't see any methods to override any of these programatically. How can I override any of these so I can set them manually?

Thanks

abcdef


Top
 Profile  
 
PostPosted: Mon Jun 17, 2013 7:05 pm 
Offline
Slick Zombie

Joined: Fri Jan 29, 2010 7:02 pm
Posts: 1242
The images are defined by the theme.

_________________
TWL - The Themable Widget Library


Top
 Profile  
 
PostPosted: Mon Jun 17, 2013 7:46 pm 
Offline

Joined: Tue Oct 11, 2011 7:30 pm
Posts: 32
Whats the format in the xml? (I've looked at some of the samples but its not clear what the general rule is)

also where in the class itself is the painting done? I want to create a class similar to ResizableFrame and do some things with the border graphics but I can't see where I can control this.


Top
 Profile  
 
PostPosted: Tue Jun 18, 2013 6:23 am 
Offline
Slick Zombie

Joined: Fri Jan 29, 2010 7:02 pm
Posts: 1242
You can see an example for ResizableFrame in the TWLExamples repositories - the chat example and simple.xml both use it.

Painting is generally done in Widget.paintBackground - which just draws the background image over the whole widget. The theme engine does the rest. The background image is typically a 9-split image (the 4 corner, 4 edges and center) but any kind of construction can be used.

_________________
TWL - The Themable Widget Library


Top
 Profile  
 
PostPosted: Tue Jun 18, 2013 8:30 am 
Offline

Joined: Tue Oct 11, 2011 7:30 pm
Posts: 32
Thanks, I have seen simple.xml. The bits I see that are important are

Code:
<composed name="frame.resizeable-title" border="25,5,5,5">
            <alias ref="-borderA"/>
            <grid weightsX="0,1,0" weightsY="0,1" inset="4">
                <alias ref="none"/>
                <select sizeOverwriteV="18">
                    <alias ref="-gradA" if="keyboardFocus | hasOpenPopups"/>
                    <alias ref="-gradB"/>
                </select>
                <alias ref="none"/>
                <alias ref="none"/>
                <alias ref="none"/>
                <alias ref="none"/>
            </grid>
        </composed>


and

Code:
 <images file="simple.png" format="COLOR">
        <area name="-borderA" border="3" xywh="0,0,9,9" splitx="L3,R3" splity="T3,B3"/>


Its not very clear where it gets all the bits to form the 9 areas of the background. You have alias's everywhere but there is no documentation to tell people what they match to.

The way I have things setup is to have the 9 parts in separate files so I'd like to know how to individually set the "background". I will have similar requirements for scroll bars so hopefully solving this will solve that too :)


Top
 Profile  
 
PostPosted: Tue Jun 18, 2013 5:30 pm 
Offline
Slick Zombie

Joined: Fri Jan 29, 2010 7:02 pm
Posts: 1242
The names references by alias are all defined inside <images> sections (except for "none" which means no image) - eg <area> elements.

For performance it would be better to combine your PNGs into one.

_________________
TWL - The Themable Widget Library


Top
 Profile  
 
PostPosted: Tue Jun 18, 2013 5:51 pm 
Offline

Joined: Tue Oct 11, 2011 7:30 pm
Posts: 32
So there is no way to specify the separate parts then

I understand the whole references thing but not what the values in the Image section mean.

I'm going to guess (as I haven't seen anything to say either way) that you need provide a background image with borders already on (hence nothing to directly say what border images you need) and then you need specify

Code:
<param name="border">
                <border>background.border</border>
</param>


and something which tells the border what size in the background image it is.

The dtd doesn't have any of this so its hard to see what other options are available. (I can't see which source file background.border is defined in either)

I still find this quite confusing, it would be much easier to be able set all the border images individually in both the xml and the code and for it to set all the border sizes automatically. If I want to change the general background of the widget I need to have a new image for each color.


Top
 Profile  
 
PostPosted: Tue Jun 18, 2013 8:55 pm 
Offline
Slick Zombie

Joined: Fri Jan 29, 2010 7:02 pm
Posts: 1242
That border is not an image - it's just 4 integers - it's the border size eg the distance between the inner area of the widget and the outer area of the widget.

"background.border" is actually a Java Bean reference - "background" is the parameter <param name="background"> and "border" is a property which (in case of an image) you can specify in the <images> section. When you use a 9-way split area that border is automatically set based on the split positions:
Code:
<area name="tooltip.background" border="3" xywh="1,24,7,7" splitx="L3,R3" splity="T3,B3"/>

This defines the image with the name "tooltip.background" and a border size of 3 (a uniform border on all 4 sizes).
The coordinates in the PNG are x=1 y24 with a width and height of 7.
It is split in the x axis at 3 pixels from the left and 3 pixels to the right.
And split in the y axis at 3 pixels from the top and 3 to the bottom.

You can create a <select> image which will select one of many images based on the animation states of the widget which draws it.
This is used for all the buttons - and that's also the reason why you won't find any code in TWL which draws a button :)

_________________
TWL - The Themable Widget Library


Top
 Profile  
 
PostPosted: Wed Jun 19, 2013 7:31 am 
Offline

Joined: Tue Oct 11, 2011 7:30 pm
Posts: 32
Ah :D

Bit of Eureka moment, have been looking at ImageManager and I think I understand more or less what is going on now to create the GridImage and thus how all the borders are created for everything

I'm thinking I might extend your code to be able to create a GridImage from individual files (making it configurable in xml) and to also be able to add textures (by providing the byte buffer directly) manually to the LWJGLCacheContext so I can include images from a binary data file (example like a quake pak file) and still reference them in the xml


Top
 Profile  
 
PostPosted: Wed Jun 19, 2013 1:04 pm 
Offline

Joined: Tue Oct 11, 2011 7:30 pm
Posts: 32
Part one is complete, but done slightly different to what I said above. I have made it so that you can add any decoder in the theme xml for images. I have plugged in some other formats and it works fine. I created a PNG version (as I had to move the code) to be backwards compatible and its the default decoder if one isn't specified.

By doing it this way you can essentially write anything for the filename and interpret at will in the decoders.

Next step is to now use this functionality and to create a new tag in the theme xml file so that you can specify 9 attributes for building a GridImage manually


Top
 Profile  
 
PostPosted: Wed Jun 19, 2013 4:00 pm 
Offline

Joined: Tue Oct 11, 2011 7:30 pm
Posts: 32
Part two done now too, created a new top level item in theme, also made a special decoder just for this to set the texture to a plain color. Am now able to set all of the 8 borders + background separately using any decoder of choice.

One issue still to solve is that if the border is bigger than what you want to draw it, it defaults to border size not the size you want


Top
 Profile  
 
PostPosted: Wed Jun 19, 2013 5:12 pm 
Offline
Slick Zombie

Joined: Fri Jan 29, 2010 7:02 pm
Posts: 1242
You could already plug in your own decoders, and you can assemble as many PNGs as you want - and all that without changing a single line of code.

_________________
TWL - The Themable Widget Library


Top
 Profile  
 
PostPosted: Wed Jun 19, 2013 6:04 pm 
Offline

Joined: Tue Oct 11, 2011 7:30 pm
Posts: 32
Just seen that you have released a later version with what looks like this functionality in! But looking at the code I still have no idea how to use it

Code:
TextureDecoder decoder = (TextureDecoder)textureUrl.getContent(new Class<?>[]{TextureDecoder.class});


What are you expecting in the xml for this to work? There are no samples using this and you skip using it to default to your previous code.

The per decoder solution for borders, I have, I still don't believe is possible with what you currently have (could be wrong!!) and you still only support URL's to define the file which won't work with what I have. I only need to provide a location in my binary file. And one of my decoders actually needs more attributes as it creates an image on the fly (just a coloured background).


Top
 Profile  
 
PostPosted: Wed Jun 19, 2013 7:18 pm 
Offline
Slick Zombie

Joined: Fri Jan 29, 2010 7:02 pm
Posts: 1242
Just use a URLStreamHandler - you can take a look at the TWL Theme Editor - it uses this to access the DOM in memory without creating a file.

You can use the query part of the file name to pass anything you want to your URLStreamHandler.

_________________
TWL - The Themable Widget Library


Top
 Profile  
 
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 14 posts ] 

All times are UTC


Who is online

Users browsing this forum: No registered users and 2 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
cron
Powered by phpBB® Forum Software © phpBB Group