Sprite sheets

Targets Web
1

I just played with something that may allow displaying icons a bit faster in pure Xojo.

On a 32x32 WebContainer, I place a 32x224 ImageWell with top and left zero, containing a picture composed of seven 32x32 icons. The picture is accessed through its URL on my server (so the browser has only one picture object to manage).

I drag an instance on the WebPage, which shows the first icon in the picture. To switch icon, I set the ImageWell 32 pixels by 32 pixels higher.

Am I wrong to believe Xojo will use only one copy of the URL picture which the browser will cache, so display of the icons should be fast ? In this setting, all icons are sent in one shot in the bigger picture. Sort of a home made sprite sheet …

I have put together a small web app at http://match-software.com/cgi-bin/set/set.cgi

What do you think ?

2

I get a 500 internal server error

3

Sorry. It is fixed now.

4

Yes, the link is OK now. By coincidence I was just doing some CSS image sprites a few minutes ago.

5

Field of conscience :wink:

I tried an animation, but it was stealing all the app processes. What I did remains server side, with all the hinderances attached.

CSS is probably better, as it executes client side, so it should be able to support animations. I looked for CSS examples on the Internet but found no simple tutorials. It would be great to be able to use CSS within Xojo for that. Maybe through a WebSDK WebWrapper…

Maybe you could share your insight ?

6

It seems that the transition is rather slow compared to a CSS image sprite on an regular HTML webpage. I can move the slider right across quickly before the first image has changed. As you say Michel your process is server-side, which accounts for the sluggishness. I can not claim to have any insight, but there may be a solution with WebSDK.

7

If you could share a small example of CSS, I can try to adapt that to a WebSDK control.

8

Well I just adapted some code from W3Schools to change a series of link images on mouse hover and active. The image img_sprite.png is in three sections vertically containing the normal, hover and active images with a divider 1 pixel wide between each.

In the HTML header:

[code]

#navsel { position: relative; } 
#navsel li {
    margin: 0;
    padding: 0;
    list-style: none;
    position: absolute;
    top: 0;
}

#navsel li, #navsel a {
    height: 32px;
    display: block;
}

#home_en {
    left: 0px;
    width: 32px;
    background: url('img_sprite.png') 0 0;
}

#home_en a:hover {
    background: url('img_sprite.png') 0 -33px;
}

#home_en a:active {
    background: url('img_sprite.png') 0 -66px;
}
</style>
[/code] and in the body section: [code]
[/code] This is a simplified version, you can add more columns of images as required to the png, and I have omitted the code for the parent control on the webpage.
9

[quote=116591:@Richard Corlett]Well I just adapted some code from W3Schools to change a series of link images on mouse hover and active. The image img_sprite.png is in three sections vertically containing the normal, hover and active images with a divider 1 pixel wide between each.

In the HTML header:

[code]

#navsel { position: relative; } 
#navsel li {
    margin: 0;
    padding: 0;
    list-style: none;
    position: absolute;
    top: 0;
}

#navsel li, #navsel a {
    height: 32px;
    display: block;
}

#home_en {
    left: 0px;
    width: 32px;
    background: url('img_sprite.png') 0 0;
}

#home_en a:hover {
    background: url('img_sprite.png') 0 -33px;
}

#home_en a:active {
    background: url('img_sprite.png') 0 -66px;
}
</style>
[/code] and in the body section: [code]
[/code] This is a simplified version, you can add more columns of images as required to the png, and I have omitted the code for the parent control on the webpage.[/quote]

Richard, this is much clearer than what I had found. It will enable me to experiment. Thank you.

10

Someone should file a feature request for Sprite Sheets. That’s would be an excellent speed boost from the framework.

11

Done.

34680 - Sprite sheet support for WE

Hope it is alright.

12

Well done, Michel! =3

13

Actually now that I think about it, built in sprite sheet support would be even better for Xojo Cloud. I experiment with the CSS method in WE, but it may get a bit too involved for XC users. A ready to run solution would certainly be wonderful.

14

It’s not so much the need for SpriteSheets as the need to expand the existing WebImageView control so we can set the scaling of the image, position, and if it repeats in the x,y, or both for tiling.

We could then just set the WebImageView to be the spritesheet image and play with the other properties to control the image.
I know the scaling/tiling would add a lot of needed functionality. It would make it trivial to make a tiled background on a webpage. And not having to resize images through code or pre-compile time would be nice, and this really is a simple fix/adjustment to the current control that would need only modify the DOM-Css marginally.

(^would that be worth adding to the case or…?)

15

[quote=116711:@Brock Nash]It’s not so much the need for SpriteSheets as the need to expand the existing WebImageView control so we can set the scaling of the image, position, and if it repeats in the x,y, or both for tiling.

We could then just set the WebImageView to be the spritesheet image and play with the other properties to control the image.
I know the scaling/tiling would add a lot of needed functionality. It would make it trivial to make a tiled background on a webpage. And not having to resize images through code or pre-compile time would be nice, and this really is a simple fix/adjustment to the current control that would need only modify the DOM-Css marginally.

(^would that be worth adding to the case or…?)[/quote]

I filed the feature request with my limited knowledge, but by all means, Brock, please add all that !

The more details in the FR, the easier it is for Xojo engineers, and the more chances we have to see this implemented in a future release :slight_smile:

About using Sprite Sheet images in existing Xojo version, I am experimenting with WebSDK, and it appears quite promising. I just used the very first project described in WebControlSDK.pdf, simply dragged the HTML taken from http://www.w3schools.com/css/tryit.asp?filename=trycss_sprites_nav with the sheet image hosted on my site, and it worked right away. This quite interesting, as this way many CSS features become available in a much better way than through Page Source.

16

It’s been a while since I’ve used sprites, but I don’t believe you can use them for tiling unless they’re all being tiled in the same direction and they all have the same width.

I could see us using sprites for WebToolbar icons though. They’re all the same size.

17

Brock mentioned background image tiling and it made me think that some of the pages on my site use tiling for their background. So I tried to place this in a Page Source. It displays for a second, then the app background erases it.

<body style="background-color: rgb(255, 255, 255); background-image: url(http://micr-fonts.com/images/finelines.gif);" alink="#ff0000" link="#ff0000" vlink="#ff0000">

That would be nice.

18

It doesn’t surprise me that this doesn’t work. You’re essentially adding a second body tag to the html file which is not really allowed. Additionally, WebPages are drawn on top of the body so the background is getting obscured.

19

This tool receives a pack of images and creates and maps sprites (CSS option) http://www.leshylabs.com/blog/posts/2013-12-03-Leshy_SpriteSheet_Tool.html

Xojo WE could do something like this for image resources to be shown, packing images in sprite sheets to be served, cached and the sprites used on the client side. Devs could mark images as sprites and Xojo would handle them as needed behind the scenes.

Repeatable sprites are used mainly for things like painting expandable horizontal custom buttons AFAIK. Some really good designers handle much of those effects just using CSS3 than using bitmaps (but surely not everything).

20

I was also faced the same problem with creating background tiling this way, so I use a JavaScript instead:

[code]Dim myJS As String

myBackground=New WebPicture(aTileImage, Picture.FormatJPEG) // myBackground is a property of the webpage, & aTileImage is the image resource

myJS=“document.getElementById('”+self.ControlID+“').style.backgroundImage = 'url(”+myBackground.URL+“)';”

self.ExecuteJavaScript(myJS)[/code]

Although this is an easy workaround, having background image tiling as a built-in feature would be a great addition to Xojo web edition’s capabilities. There is already a feature request <https://xojo.com/issue/16576> in Feedback.