XWidgetSoft Forum

Having 8 animated png images (multiple serial) is possible to play them according the weather conditions?

Sun: pnganimate1
Cloudy: pnganimate2
Fog: pnganimate3
Rain: pnganimate4
Lightning: pnganimate5
Snow: pnganimate6
Moon: pnganimate7
Moon_cloudy: pnganimate8

Also there will be the possibility to click on and replay to see the effect..

_________________
...and remember: don't take life too seriously...
My profile on Deviantart: http://jimking.deviantart.com/

The fact hamid is that I DON'T have 8 single animpngs. It will be a piece of cake..
I have a multiple serial images for each weather condition. Example:
For "sun" -> 100 images
For "cloudy" -> 80 images etc

That's why I asked the way.. (through script?)

pm: You have an Android phone?
I can send you the .apk to see what I want to do!
https://play.google.com/store/apps/deta ... .dm2widget
(includes sound of the minions talking for each weather scenes.)

Analyzing the file I have all the elements. (animations/graphics/sounds)

_________________
...and remember: don't take life too seriously...
My profile on Deviantart: http://jimking.deviantart.com/

_________________
...and remember: don't take life too seriously...
My profile on Deviantart: http://jimking.deviantart.com/

Better a bit higher RAM than CPU, that everything is freezing!

Give me time to finish the design part, adding/creating all the 8 animpngs and see in practice the behaviour..
I will post here the test .xwp soon..

_________________
...and remember: don't take life too seriously...
My profile on Deviantart: http://jimking.deviantart.com/

I finished and posted the "steady" version with no animated pngs/minions (just images)...
viewtopic.php?f=11&t=4830

After finish will the animpng images, I'll upload the test version here...

_________________
...and remember: don't take life too seriously...
My profile on Deviantart: http://jimking.deviantart.com/

_________________
...and remember: don't take life too seriously...
My profile on Deviantart: http://jimking.deviantart.com/

1. You need to recheck the script or what I did since I have all them visible on loading/running

2. The cpu is a bit high on loading and during the animations only for 1-2 secs gets ~40%

3. Here is the test_1 version:
http://www13.zippyshare.com/v/10389199/file.html

The file is a little large for uploading here that's why I use a file hosting site..

EDIT:
4. I don't know why but even when I choose "Auto Size" for the animpngs the designer with the pngs that change dimensions,
these images are reproduced stretch...
Good example is the "rain" animpng...

_________________
...and remember: don't take life too seriously...
My profile on Deviantart: http://jimking.deviantart.com/

_________________
...and remember: don't take life too seriously...
My profile on Deviantart: http://jimking.deviantart.com/

_________________
...and remember: don't take life too seriously...
My profile on Deviantart: http://jimking.deviantart.com/

why don't you use jpeg with quaility of 20%?
then you don't need to resize the images,
it will be in original shape with low filesize and quality
but that's ok for now

_________________
...and remember: don't take life too seriously...
My profile on Deviantart: http://jimking.deviantart.com/

so where is the test widget?
you just send the images,
what should i test?

_________________
...and remember: don't take life too seriously...
My profile on Deviantart: http://jimking.deviantart.com/

but that's the file with large size,
you should send the widget without images,

for now i tested images without widget,
and the problem of images is their dimensions are different,
and the pnganimate Object doesn't have image Sizing and Positioning
so we should do one of these:
1. convert them to a fixed size by adding a invisible layer to the upside of them
2. using an image Object and make animation through code

anything else i should test?

Here is the widget with the resized images. Now you can test it without problem:

_________________
...and remember: don't take life too seriously...
My profile on Deviantart: http://jimking.deviantart.com/

_________________
...and remember: don't take life too seriously...
My profile on Deviantart: http://jimking.deviantart.com/

i'm using xnview to make them in fixed size,
and it can do the job,
but since i don't want to download the original big size images,
so you should do this by your own,

the process is easy,
you need to batch convert each series with largest dimension of that folder by using a resize filter
the only problem with xnview is it doesn't have alpha and transparent colors
which program do you use to make transparent png images?
can you do this on that program?


and i can't see transparency of images,
are their background be transparent or they are white?

I use GIMP for my widgets.
http://www.gimp.org/
And the batch process to make them in fixed size, it's easy.
The important thing as I told you is to change and make a fix size for the behind transparent layer NOT resize the image dimensions. Because resizing the images, since in some cases the size change a lot, the half images will appear badly stretched..
GIMP support this mode but I need to check how they look after that...

The images that I sent you are just for test ,converted from png to jpg using ACDSee so they have lost their transparency..
For your part just concentrate more on how it works using the script and leave the design part to me..

_________________
...and remember: don't take life too seriously...
My profile on Deviantart: http://jimking.deviantart.com/

in xnview there is an option named [canvas resize] to do this
it will automatically fill extra parts with a color and have aligning option to do that
the problem is xnview doesn't have alpha and transparency for colors
so the extra parts will be filled with a color you choose

so just search in GIMP for [canvas resize] or something similar
and see if it has transparency for it or not


edit:
the script is now fixed,
i'll add it later

edit2:
should animation play:
1.on each core update
or
2.just when weather changed?

_________________
...and remember: don't take life too seriously...
My profile on Deviantart: http://jimking.deviantart.com/

i found a bug in xwidget,
i don't know when it happens, but xul file doesn't match with designer's settings
the play setting is set to true in xul but in designer it set as unchecked
i tested a lot and finally i found that the problem is there

when i run the widget fog animation and cloudy animation will start playing,
but they should be hidden and even doesn't set to play
the only way to correct it will be to edit xul file and remove play="true" from it manually



i'm going to make the script to load images to pnganimate objects
currently widget working with 100MB ram usage and it's too high for a widget
and also it's just the resized imaged,
for original ones it should be more than this,

you don't said that how much ram "xwtest.exe" uses when you run the widget in designer with original images?

ok, it's ready,
i have removed all the images from the widget to reduce the size, since i have some connection problems,
so add them yourself again,
despicable_me_weather_hd_animated [test3] [2014.07.24].xwp [1.93 KiB]
Downloaded 257 times

===========
Changes:
1. fixed: problem with xul file that incorrectly starts animations on start
2. fixed: problem in script code that other animations didn't get invisible after weather update
3. Added: Script code to automatically load the animate image files on weather update and unload previous images, so no need to add the files to the pnganimate objects and no need to load all the files at start, so the ram usage will be decreased about 90%
4. removed: image lists from pnganimate Objects, it doesn't need them anymore
5. sorted: the pnganimate Objects Alphabetically to better manage them
===================



steps you should do:
1. create image folders based on weathercore tag (same as pnganimate object names)
> be careful: you have made "thunder" folder instead of "lightning" in previous version
2. images on each folder should start from "1.png" and should all be ".png"
3. add other image files that i have deleted from widget folder

OK..Let me try!

_________________
...and remember: don't take life too seriously...
My profile on Deviantart: http://jimking.deviantart.com/

Here are the results after I did all the steps: (and using the original .pngs)
1. The cpu only for 1-2 secs increases for some animations but after that is 0%. So great!
2. I checked the ram and only for the long animations is ~60-70Mb. Ok is a bit high but I expected worst.
I think that for a widget with many animations is ok!

Now I have to concentrate fixing the image layers..
You did a great job as usual bro!

_________________
...and remember: don't take life too seriously...
My profile on Deviantart: http://jimking.deviantart.com/

For some "extra" features you need to dl the plugin file from the site.
For the batch operation:
http://www.alessandrofrancesconi.it/projects/bimp/

I don't know if is the first time that you use GIMP but you gonna love it.
I only use this and ACDSee Pro for edit/mod/view pics.

_________________
...and remember: don't take life too seriously...
My profile on Deviantart: http://jimking.deviantart.com/

I forgot it! I also have these sounds (converted from mp3 to wav) for each animation/wth condition:
Can we can add them in the script/widget..?

_________________
...and remember: don't take life too seriously...
My profile on Deviantart: http://jimking.deviantart.com/

Ok bro... Thanks again!
I will edit the last test file according your instructions..

_________________
...and remember: don't take life too seriously...
My profile on Deviantart: http://jimking.deviantart.com/

All work fantastic @hamid!
Let's see now what I can do with the images with different size...
Now its up to me..

_________________
...and remember: don't take life too seriously...
My profile on Deviantart: http://jimking.deviantart.com/

i think there is a little audio/video sync problem for some of them,
specially for "sun" playback,
am i right?
if so i can add different delay for each of them in code

_________________
...and remember: don't take life too seriously...
My profile on Deviantart: http://jimking.deviantart.com/

if you have problem converting them,
you can use XnviewMP,

i just downloaded new version of it and i see that it has the canvas resize with transparency option
it's free, but its website tells: free for personal & educational use
so i don't know if our work is personal/educational or not,

if you want help about batch converting them in XnviewMP, i can help


you said that you're using acdsee,
acdsee is same as xnviewMP,
so if xnviewMP have this feature, acdsee must have it, even more than it

Unfortunately ACDSee Pro is a professional image editor and viewer program but doesn't keep the transparency when edit a png image. I will take a look at your program..

_________________
...and remember: don't take life too seriously...
My profile on Deviantart: http://jimking.deviantart.com/

This matter with ACDSee is old.. I use it for years and never supported this feature. Read
www.acdsee.com/en/support/acdsee-pro-6/ ... es/6-0-169

_________________
...and remember: don't take life too seriously...
My profile on Deviantart: http://jimking.deviantart.com/

how's it going?
did you done with this?

At the end I had to edit the most of the pics manually since the layer resize doesn't have the batch function..!
I had finished the job, but then I discovered that I also had to do an extra process to not lose the original quality.. So I have to do it again.. That's why it's not posted yet..

_________________
...and remember: don't take life too seriously...
My profile on Deviantart: http://jimking.deviantart.com/

really? you do all of them manually?

did you try XnConvert/XnViewMP?
it has the batch processing for this,
you can do canvas resizing for each series,
no need to do it one by one

_________________
...and remember: don't take life too seriously...
My profile on Deviantart: http://jimking.deviantart.com/

for me, if i have to do this manually and for free, i would left the project and go for another
but i don't know how you can do these all for free

also i see you're making 5-10 widget per day,
how did you do these so fast?
do you making money from these?

_________________
...and remember: don't take life too seriously...
My profile on Deviantart: http://jimking.deviantart.com/

I checked both XnConvert/XnViewMP and I see that they have only "canvas resize" but in this case we need "layer" resize...
Thanks for the suggestion though. I will keep XnConvert since is a good freeware program.

_________________
...and remember: don't take life too seriously...
My profile on Deviantart: http://jimking.deviantart.com/

The fact hamid is that even with the canvas resing the background transparency changes its dimensions but the image inside remains in the same position. So viewing fast the images one after the other fast, you can notice the same up/down movement of the images..I hope you understand what I mean..
(The images have to have the same up/down position, and the resizing just add space inside the layer)
I will do some more tests though..

_________________
...and remember: don't take life too seriously...
My profile on Deviantart: http://jimking.deviantart.com/

i'm not sure if you use aligning option of the canvas resize
you can use align to bottom-center for all images to add space for all of them only on the upside
so it shouldn't have any problem then

_________________
...and remember: don't take life too seriously...
My profile on Deviantart: http://jimking.deviantart.com/

===========
here's the step by step in XnConvert:
1. in the input tab, input your files from one of the series (input all of the images in a series/folder)
2. in the actions tab, use [Add action] to add [Canvas Resize] to the list of actions
3. in the explorer, sort the images in that series/folder by dimension and find the largest dimension for that series/folder
4. in the Canvas resize options, use that largest dimension in the canvas resize to make it apply to all images of that series/folder
5. in the Canvas resize options, set alpha to 0 to make the resizing layer transparent
6. in the Canvas resize options, set the position to [Bottom] to make all adding layers go to upside
7. in the Output tab, Choose the Output folder and filenames to save the new files
8. in the Output tab, Choose the Output format if it needed to change
9. click on [Convert] button to convert the files of that series/folder
============



and here's an example for converting result,
i have used jpg, because i don't have access to original pngs
so they doesn't have transparency because of jpeg,
plz test it to see the result:
Resizing-test.zip [514.96 KiB]
Downloaded 250 times

Ok! I will test it today. Thanks for the instructions since I have never used this program..

_________________
...and remember: don't take life too seriously...
My profile on Deviantart: http://jimking.deviantart.com/

RESULTS:
It seems that all work great!
The only thing that I had to search for, was the right "Background color" to keep the transparency.
Should be "Black" - "Alpha 0"
Thanks a bunch hamid!

_________________
...and remember: don't take life too seriously...
My profile on Deviantart: http://jimking.deviantart.com/

about transparency, the only thing that is important is setting alpha to 0

i don't know if setting background color have any effect in the future
(but maybe it can be seen by softwares don't support the transparency or when converting to a format that doesn't support transparency)
so better to use the original background color for it

and how did you found the original background color is black?



================
to find the original background color for each series
you can do one of these:

1. in XnConvert, you can temporary use [Change Color Depth] Action from action list and for its setting use 32bit with alpha255 to see the original color in preview (but this is not so exact because you can't find the color code for it)

2. in XnViewMP, you can open one of the images from each series and from menubar choose [view]>[use alpha channel] to switch between showing/hiding alpha channel (this is not exact again because you only see the color visually and don't see color code)

3. in XnViewMP, you can open one of the images from each series and from menubar choose [view]>[show color information] to enable color information on mouse pointer, so you can use your mousepointer on background of image to get the color code for it (this is the exact color for it since we have the color code for it)

================

i recommend to use 3rd way for it, since it will give the color code for it and it can be easily used in canvas resize color selection dialog,
so we will not have any problems in the future

_________________
...and remember: don't take life too seriously...
My profile on Deviantart: http://jimking.deviantart.com/

I mean [resizing]... The [canvas resizing] works fine.

_________________
...and remember: don't take life too seriously...
My profile on Deviantart: http://jimking.deviantart.com/

I wanted to resize the "lightning" images, but I use the "scale" option of the designer.
I send you 10 images to test

_________________
...and remember: don't take life too seriously...
My profile on Deviantart: http://jimking.deviantart.com/

there is a problem with detecting it as 32bit png image
it doesn't open it as 32bit with XnConvert
so some functionality don't work correctly for it

for example:
-in XnConvert, changing to 32bit doesn't detect alpha (but it works fine when doing this manually in XnViewMP)
-in XnConvert, using canvas resize with black background works fine but by using other colors it doesn't detect alpha!
-in XnConvert, using Resize action with some other filter (ex: bilinear) will work fine and detect alpha correctly but with some other filter doesn't work


as a solution:
you can use some other filter in resizing action (i don't think it will have a visible effect on quality)



is it a problem with all of the images or just this folder?
since this is for lightning, doesn't it have a light effect in original animation?

_________________
...and remember: don't take life too seriously...
My profile on Deviantart: http://jimking.deviantart.com/

_________________
...and remember: don't take life too seriously...
My profile on Deviantart: http://jimking.deviantart.com/

I tested with the "Bilinear" and the "Nearest Neighbour" (the only options that keep the transparency) and unfortunately the low quality after the resize is visible.. (maybe I'm too perfectionist!)
So I'll select the "scale" solution of the designer..
Thanks for all your help mate!

_________________
...and remember: don't take life too seriously...
My profile on Deviantart: http://jimking.deviantart.com/

Posted: (FINALLY )
viewtopic.php?f=11&t=4931

_________________
...and remember: don't take life too seriously...
My profile on Deviantart: http://jimking.deviantart.com/