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 Wed 20 Aug 2014, 00:54
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 Posts_count   Goto page: 1, 2 Next
Author Message
technosaurus


Joined: 18 May 2008
Posts: 4334

PostPosted: Wed 07 Nov 2012, 05:56    Post_subject:  multiple images to sprite combiner
Sub_title: 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  463 Time(s) 
spritify-0.1.pet
Description 
pet

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

_________________
Web Programming - Pet Packaging 100 & 101

Edited_time_total
Back to top
View user's profile Send_private_message 
Flash
Official Dog Handler


Joined: 04 May 2005
Posts: 11011
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: 4334

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.
_________________
Web Programming - Pet Packaging 100 & 101
Back to top
View user's profile Send_private_message 
Flash
Official Dog Handler


Joined: 04 May 2005
Posts: 11011
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: 4334

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   879 Time(s)

sprite.png


_________________
Web Programming - Pet Packaging 100 & 101
Back to top
View user's profile Send_private_message 
seaside

Joined: 11 Apr 2007
Posts: 886

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: 4334

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]));

_________________
Web Programming - Pet Packaging 100 & 101
Back to top
View user's profile Send_private_message 
greengeek

Joined: 20 Jul 2010
Posts: 2475
Location: New Zealand

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: 619
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: 4334

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...)

_________________
Web Programming - Pet Packaging 100 & 101
Back to top
View user's profile Send_private_message 
Keef


Joined: 20 Dec 2007
Posts: 619
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: 2475
Location: New Zealand

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: 895
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: 619
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: 895
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:   Sort by:   
Page 1 of 2 Posts_count   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:  

Rules_post_cannot
Rules_reply_cannot
Rules_edit_cannot
Rules_delete_cannot
Rules_vote_cannot
You cannot attach files in this forum
You can download files in this forum


Powered by phpBB © 2001, 2005 phpBB Group
[ Time: 0.0868s ][ Queries: 12 (0.0107s) ][ GZIP on ]