Puppy Linux Discussion Forum Forum Index Puppy Linux Discussion Forum
Puppy HOME page : puppylinux.com
"THE" alternative forum : puppylinux.info
 
 FAQFAQ   SearchSearch   MemberlistMemberlist   UsergroupsUsergroups   RegisterRegister 
 ProfileProfile   Log in to check your private messagesLog in to check your private messages   Log inLog in 

The time now is Sun 22 Apr 2018, 07:19
All times are UTC - 4

 Forum index » Off-Topic Area » Programming
multiple images to sprite combiner
Post new topic   Reply to topic View previous topic :: View next topic
Page 1 of 2 [20 Posts]   Goto page: 1, 2 Next
Author Message
technosaurus


Joined: 18 May 2008
Posts: 4786
Location: Kingwood, TX
PostPosted: Wed 07 Nov 2012, 05:56    Post subject:  multiple images to sprite combiner
Subject description: outputs a vertically oriented png of all images		  
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:
#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;
}
spritify-0.2.pet
Description  updated background to translucent
removed freetype dependency from the pet
 pet

 Download 
Filename  spritify-0.2.pet 
Filesize  51.96 KB 
Downloaded  724 Time(s) 
spritify-0.1.pet
Description 
pet

 Download 
Filename  spritify-0.1.pet 
Filesize  56.56 KB 
Downloaded  708 Time(s) 

_________________
Check out my github repositories. I may eventually get around to updating my blogspot.

Last edited by technosaurus on Wed 07 Nov 2012, 11:12; edited 1 time in total
Back to top
View user's profile Send private message Visit poster's website 
Flash
Official Dog Handler


Joined: 04 May 2005
Posts: 12819
Location: Arizona USA
PostPosted: Wed 07 Nov 2012, 07:45    Post subject:  
Seems like this belongs in the Additional software section, perhaps under Graphics? I'll move it there if there's no objection.
Back to top
View user's profile Send private message 
technosaurus


Joined: 18 May 2008
Posts: 4786
Location: Kingwood, TX
PostPosted: Wed 07 Nov 2012, 09:51    Post subject:  
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.
_________________
Check out my github repositories. I may eventually get around to updating my blogspot.
Back to top
View user's profile Send private message Visit poster's website 
Flash
Official Dog Handler


Joined: 04 May 2005
Posts: 12819
Location: Arizona USA
PostPosted: Wed 07 Nov 2012, 10:17    Post subject:  
Okay, I'll leave it here for now. Smile
Back to top
View user's profile Send private message 
technosaurus


Joined: 18 May 2008
Posts: 4786
Location: Kingwood, TX
PostPosted: Wed 07 Nov 2012, 11:55    Post subject:  
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:
<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>
sprite.png
 Description   
 Filesize   28.27 KB
 Viewed   1153 Time(s)

sprite.png

_________________
Check out my github repositories. I may eventually get around to updating my blogspot.
Back to top
View user's profile Send private message Visit poster's website 
seaside

Joined: 11 Apr 2007
Posts: 917
PostPosted: Thu 08 Nov 2012, 12:22    Post subject:  
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
Back to top
View user's profile Send private message 
technosaurus


Joined: 18 May 2008
Posts: 4786
Location: Kingwood, TX
PostPosted: Thu 08 Nov 2012, 13:17    Post subject:  
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:
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]));

_________________
Check out my github repositories. I may eventually get around to updating my blogspot.
Back to top
View user's profile Send private message Visit poster's website 
greengeek


Joined: 20 Jul 2010
Posts: 4936
Location: Republic of Novo Zelande
PostPosted: Wed 30 Jan 2013, 07:21    Post subject:  
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 Smile
Back to top
View user's profile Send private message 
Keef


Joined: 20 Dec 2007
Posts: 888
Location: Staffordshire
PostPosted: Wed 30 Jan 2013, 14:46    Post subject:  
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.
Back to top
View user's profile Send private message 
technosaurus


Joined: 18 May 2008
Posts: 4786
Location: Kingwood, TX
PostPosted: Wed 30 Jan 2013, 22:42    Post subject:  
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/GtkWidget.html#gtk-widget-set-tooltip-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...)
_________________
Check out my github repositories. I may eventually get around to updating my blogspot.
Back to top
View user's profile Send private message Visit poster's website 
Keef


Joined: 20 Dec 2007
Posts: 888
Location: Staffordshire
PostPosted: Thu 31 Jan 2013, 11:13    Post subject:  
I can hover to my heart's content, no clicking necessary. Don't have a magic carpet, jet-pack or mutant super-powers either.
Back to top
View user's profile Send private message 
greengeek


Joined: 20 Jul 2010
Posts: 4936
Location: Republic of Novo Zelande
PostPosted: Thu 31 Jan 2013, 12:39    Post subject:  
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...)
Back to top
View user's profile Send private message 
GustavoYz


Joined: 07 Jul 2010
Posts: 894
Location: .ar
PostPosted: Sat 16 Feb 2013, 19:09    Post subject:  
Hmmm...
I dont have mtpixel.h. Google isn't helping me out, so where can I get it?
Thanks.
_________________
Back to top
View user's profile Send private message 
Keef


Joined: 20 Dec 2007
Posts: 888
Location: Staffordshire
PostPosted: Sat 16 Feb 2013, 20:25    Post subject:  
It's in the mtcelledit src
http://code.google.com/p/mtcelledit/downloads/
Back to top
View user's profile Send private message 
GustavoYz


Joined: 07 Jul 2010
Posts: 894
Location: .ar
PostPosted: Sun 17 Feb 2013, 02:40    Post subject:  
Keef wrote:
It's in the mtcelledit src
http://code.google.com/p/mtcelledit/downloads/


Thanks!
_________________
Back to top
View user's profile Send private message 
Display posts from previous:   Sort by:   
Page 1 of 2 [20 Posts]   Goto page: 1, 2 Next
Post new topic   Reply to topic View previous topic :: View next topic
 Forum index » Off-Topic Area » Programming
Jump to:  


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 vote in polls in this forum
You cannot attach files in this forum
You can download files in this forum


Powered by phpBB © 2001, 2005 phpBB Group

[ Time: 0.0686s ][ Queries: 13 (0.0218s) ][ GZIP on ]