(old)Puppy Linux Discussion Forum

Posted: **Wed 07 Nov 2012, 09:56**

I wanted a smaller tool to make css sprites for faster page loading

usage: spritify image1 image2 ... >log.txt (output file is sprite.png)

Code: Select all

#include <stdlib.h>
#include <stdio.h>
#include <string.h>
#include <mtpixel.h>

int main( int argc, char *argv[] ){
int i=0,height=0,width=0,y=0;
mtpixel_init();
mtImage *imglist[argc];
argc--;
do{	imglist[i] = mtpixel_image_load( argv[i+1] );
	height+=imglist[i]->height;
	if (imglist[i]->width > width) width=imglist[i]->width;
} while (++i < argc);
imglist[argc]=mtpixel_image_new_rgb(width,height);
imglist[argc]->palette.trans=0;
i=0;
do{	if (imglist[i]->type == MTPIXEL_IMAGE_INDEXED)
		mtpixel_image_paste(imglist[argc],mtpixel_image_to_rgb(imglist[i]),mtpixel_brush_new(),0 ,y);
	else mtpixel_image_paste(imglist[argc],imglist[i],mtpixel_brush_new(),0 ,y);
	printf("name=%s;width=%d;height=%d;y_offset=%d\n",argv[i+1],imglist[i]->height,imglist[i]->width,y);
	y+=imglist[i]->height;
	mtpixel_image_destroy( imglist[i] );
}while (++i < argc);
	mtpixel_image_save( imglist[argc], "sprite.png", MTPIXEL_FILE_TYPE_PNG, 5 );
mtpixel_quit();
return 0;
}

Posted: **Wed 07 Nov 2012, 11:45**

Seems like this belongs in the Additional software section, perhaps under Graphics? I'll move it there if there's no objection.

Posted: **Wed 07 Nov 2012, 13:51**

It is a graphics tool, really one that game or web programmers would mostly use. I figured I would get more relevant feedback here... for instance I should probably output the printed results in proper css format, but I was too tired to Google it.

Posted: **Wed 07 Nov 2012, 14:17**

Okay, I'll leave it here for now.

Posted: **Wed 07 Nov 2012, 15:55**

Here is an example that reduced the overall download size 3 to 1 and the number of requests from 30 to 1.

just doing the first couple of images for demo (note that the first image does not require as many parameters - its a good idea to use your most common one first)

Code: Select all

<html><head><meta content="text/html; charset=ISO-8859-1" http-equiv="Content-Type"><title>test</title><style>

#i{height:24;width:24;background:url(sprite.png)}
#i.chat{background-position:0px -24px;}

</style></head><body>

<img id="i"><img id="i" class="chat">

</body></html>

Posted: **Thu 08 Nov 2012, 16:22**

technosaurus,

That is a handy generator. Thanks.

Aside from Web programming, do you see any potential for using this in some way on the desktop?

Regards,
s

Posted: **Thu 08 Nov 2012, 17:17**

It is very common to use sprites in game programming and it _could_ be used on the desktop by generating svg images with a viewport (or is it viewbox? - I get them confused)... however it makes things more complicated, which is probably why I have never seen it on the desktop (it is used to some extent in web programming). It would be an interesting addition to my bashbox and multicall binary projects ... a distro with 1 binary, 1 script and 1 image, with everything generated on the fly. I wrote an really simple svg based game framework a while back that theoretically could use the sprites for character movements and such.

Currently the output (besides the sprite itself) is just the relevant image data: original image name, width, height and y offset in a shell parse-able format, but I am interested in feedback regarding a standard format for different use cases.

for css something like:
.img{float:left;padding:0 0 0 0;display:block;background:url(sprite.png)}
.image_name{height:image_height;width:image_width;background-position:0-y_offset}
and sample code for inclusion:
<div class="img image_name"></div>

possibly something else for svg or direct use in javascript

Code: Select all

fprintf(stdout, ".png{float:left;padding:0 0 0 0;display:block;background:url(sprite.png)}\n");
fprintf(stdout, ".%s{height:%d;width:%d;background-position:0-%d",spritename(argv[i]),height,width,yoffset};
fprintf(stderr, "<div class=\"png %s\"></div>",spritename(argv[i]));

Posted: **Wed 30 Jan 2013, 11:21**

I've often wondered if it's possible to make the desktop (or even a rox window) behave like a webpage so that when you hover over a directory (folder) something like a sprite or image or sticky note pops up to display/describe the owner or contents or purpose or copyright text of that folder. (rather than just a one line comment).

(just a wild idea out of left field...)

ps: this idea now copyrighted

Posted: **Wed 30 Jan 2013, 18:46**

You get that behaviour with Rox Apps.
Go to /usr/local/apps and have a hover.
You can put any old nonsense in the AppInfo.xml and it will be displayed.

Posted: **Thu 31 Jan 2013, 02:42**

rox does it on click, not hover
If you want to hack cool hover windows into your favorite gtk app, use
http://developer.gnome.org/gtk3/3.2/Gtk ... tip-window

you can add whatever image/effects you want to each window and tell gtk to use the custom window instead of the standard tooltip (btw - tooltips can already use Pango markup for color, font, size etc...)

Posted: **Thu 31 Jan 2013, 15:13**

I can hover to my heart's content, no clicking necessary. Don't have a magic carpet, jet-pack or mutant super-powers either.

Posted: **Thu 31 Jan 2013, 16:39**

Keef wrote: Don't have a magic carpet, jet-pack or mutant super-powers either.

You have superpowers. I've noticed it before. (mind you everyone here has superpowers compared to me...). I wonder if there are different versions / setups of Rox?

I like the idea of the gtk-widget-set-tooltip-window - it sounds like that might be the thing I'm looking for. In my mind's eye I was visualising a semi-transparent hover-window showing an avatar of the directory owner and a blurb of text describing the general nature of the contents. ("You don't want to enter here Luke Skywalker..."). I'll add this to my list of things to tinker with. (it's getting to be a pretty long list...)

Posted: **Sat 16 Feb 2013, 23:09**

Hmmm...
I dont have mtpixel.h. Google isn't helping me out, so where can I get it?
Thanks.

Posted: **Sun 17 Feb 2013, 00:25**

It's in the mtcelledit src
http://code.google.com/p/mtcelledit/downloads/

Posted: **Sun 17 Feb 2013, 06:40**

Keef wrote:It's in the mtcelledit src
http://code.google.com/p/mtcelledit/downloads/

Thanks!

Posted: **Fri 22 Feb 2013, 20:54**

@Gusto - have you done anything with the sources?

Posted: **Thu 28 Feb 2013, 03:28**

No, I had no time yet...
Wanted code some svg/xml output (just pointing to web usage), but still a to-do.

Is a very nice little app.

Posted: **Wed 13 Mar 2013, 19:40**

here is a tarball of sprite of the tango icon theme. It contains 213 icons each of 16x16, 32x32 & 48x48 (639 total) in 130kb. The sprites are 19, 43 and 67kb respectively

The tarball also contains an ordered list of icons. You can use it for calculating offsets based on the line # and icon size

I need to figure out how to use the whole transparency layer rather than just setting a single transparency color

Posted: **Wed 18 Sep 2013, 05:38**

here is the tango set as a single sprite sheet optimized with optipng-zopfli (zopfli compresses a bit better)
it _should_ follow the naming in the previous tarball for adding to your css ...x offset is 0, 48 or 64 and a y offset of 6846 for the 16px icons

Posted: **Fri 27 Sep 2013, 03:16**

With this you can get grayscale with a filter (this one also contains a viewBox to get the 2nd 48x48 sprite)

Code: Select all

<svg xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 48 48 48">
<filter id="greyscale"><feColorMatrix type="saturate" values="0"/></filter>
<image width="48" height="10224" xlink:href="tango48i.png" filter="url(#greyscale)"/>
</svg>

(old)Puppy Linux Discussion Forum

multiple images to sprite combiner

multiple images to sprite combiner