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/

i think we have done this a lot,

here's the steps for adding the images to widget:
1. rename pnganimate files to weather names
2. add a pnganimate Object into widget
3. use weather tag in it to work as file name
4. add path and extension to it if necessary to match the file location



in the OnClick event of pnganimate Object add a function to do it

didn't we done these before?

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/

i don't have android,
and the file size is too big for me to try



i think it can be done in 3ways:
1. the easiest way (maybe with less resource usage):
> make each series into one png animate and use the way that i have described in above post

2. the other easy way (maybe with more ram usage, [i'm not sure]):
> using 8 pnganimate objects and using weathercore update to visible/invisible them

3. the hard way (maybe with less ram usage than second way):
> using 1 pnganimate object and using code to load the list of files to it based on weathercore update
>> i have never loaded list from code, so i'm not sure if the command is available in script

edit:
maybe there could be a 4th way:
4. maybe the hardest way (i don't know about it's resource usage, maybe more cpu and less ram usage):
> using code to load each image one by one to make animaton through code

check your pm.... (the files that I'm working on)

I think that GIMP supports this function, but I need to search about "how"..


Could you pls give me the part of the script for this...?
I was thinking this mode..
As default, all the pnganimated will have animation OFF. And each time one of the 8 weather conditions is loaded/pnganim show, only the one of the 8 will be shown/play. The other 7 will be hidden and with anim OFF. So the cpu will be ok I think..!


These ways are surely really hard to do and I'm almost sure that the cpu/ram will be too high!
So 3,4 are out..

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

there will be no problem with cpu usage,
maybe the ram usage get high,
because all of the images will be loaded to widget at start,
but i'm not sure,
better to try

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/

add this to the widget,
i think it should work ok
i didn't know the correct weathernames, so correct them if they are wrong

Steps to add:
1. change the WeatherNames line according to WeatherTexts of Xwidget (correct them if i made any wrong)
2. add pnganimate Objects with the same name as WeatherTexts of Xwidget
3. add link to the functions in the widget's Events
> [widgetOnLoad] to the Widget's Onload Event
> [accweathercore1OnUpdate] to the accweathercore OnUpdate Event
4. invisible the pnganimate Objects

edit:
i have edited the whole code,
if you have used previous code, plz add this one instead

Thanks hamid.. I will test/edit it soon..

Ok, I will...

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

after you have done with it,
plz add Ram Usage of "xwtest.exe" in here

i have also found the command for loading list of files from code,
it is the same as single file:

so we can also try 3rd way, if ram usage is too high

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/

the file size is too big for me
can you add a smaller size here,
i think it's easy to batch convert the images to smaller size
use jpeg with quality of 20% for test version


i thought that you will read completely my edited post above,
i had added another step to it,

you should make invisible all the pnganimate Objects
i can add the code to automatically do this on each start, but i don't think it's necessary

I will try to convert it <10Mb....
I will upload it as soon as possible..

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

I edited all the images:
- Converted to .jpg
- Resized 50%

Keep a backup from the "rain" folder with the .pngs images to check this issue of the designer.

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

Was the better way...
Anyway, I will wait for your reply..

_________________
...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?

You didn't notice the file posted in one of my prev posts..
Here is the test_1 version:
http://www13.zippyshare.com/v/10389199/file.html

(replace the folders with the last ones)

_________________
...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/

But the pnganimate Object has the "Auto Size" option so ALL the images should be shown in their original size.
One more thing that Tony should fix..

1. This requires time since the images are too many and I'm afraid that changing the back transparent layer with the batch function the images will not have the same center position..
2. I don't know how to do this..

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

the problem is our images have different dimensions, they are not in fixed dimension,
i mean one is 171x71 and another is 171x120
and the problem with pnganimate Object is not resizing,
the problem is it will always stretch the image,
and there's no option to disable stretching,
and also there is no option for aligning image (for this our images align to bottom)
these images need to be used in original size and align to bottom



1. This requires time since the images are too many and I'm afraid that changing the back transparent layer with the batch function the images will not have the same center position..
2. I don't know how to do this..[/quote]i'm working on it to make them fixed size or make a one gif or png animation file

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?

Will play only when the weather changes.. And a double click option to reproduce the current animation at any time..

I will try to edit the images with gimp as soon as possible..

_________________
...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,

===========
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/

i'm thinking that if we use the first version with original images, it will have ram usage about 500MB, since it will load all large size images at start and hold them until widget closed
but now just using 20MB for a default widget and about 40MB for images




i have just downloaded the gimp,
it was also so large, but i did it

it has some good features,
and also i found that it has the same canvas sizing option inside it
but i don't find any batch processing mode in it



1. do you work on images one by one?
or
2. there is a batch processing operation that i didn't found?
or
3. you use script to make automation?

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/

it's ready:

========
Changes:
Added: code for playing wav files
Changed: Adjusted the framerate of pnganimate Objects to the wav playback
================

steps you should do:
1. adding the wav files to a folder named "wav" in widget directory
2. renaming wav files to match the weather names
> be careful: you have named a wav file "moon-cloudy.wav" instead of "moon_cloudy.wav"
3. steps for the previous version again:

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

Thanks hamid but for me works great! I had installed the original Android app on my phone, and this one works exactly like the original..
No delay.
And there is any I can edit a bit the Interval (MS) value...

_________________
...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/

in XnviewMP the transparency only apply if the image is in 32bit depth,
and if it's not, you should add action for conversion to 32bit depth before canvas resize action in the list of actions


maybe for acdsee is the same,
just make sure your images are in 32bit depth,
and try again

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

Yes, I edited most of them manually!
Using the shortcut keys and the arrows I need ~10secs for each image. So the process is fast, but yes, the images are many..
So surely I'll take a look at "XnConvert/XnViewMP"...

_________________
...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?

I do all this just for fun and share.. and for free. I really enjoy it!
Sometimes I upload 5-6 widget all together, but the fact is I spent more than one day for these..
About the design part after all these widgets, and after have an idea in my head, yes, I think that I'm fast enough.
For example the script that I asked you about the mouse over/leave and the pnganimate was for this and I spent ~2days:
viewtopic.php?f=11&t=4889

For this Minion widget I'll edit some pics a day without be hasty to post it..

_________________
...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/

what do you mean by layer resize?
what's the different of canvas resizing and layer resizing?


i have used canvas resize and it will do the job we want,
i don't know how else you want it to be

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

Yes I know what do you mean, but I'm not sure if there is a batch option for this.. I'm almost sure that it should be manually..

_________________
...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:

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

At the beginning I tried with the default white color, but I noticed, when I opened an image with GIMP, that the extra layer created was filled with a light cyan color and no transparency. Then I remembered the "Mask" option in the designer where the black color is filled with transparency, and with the useful preview window of the XnConvert.. I found it!

One stupid thing that I discovered though is that with the resize option the pngs lose their transparency! (I don't find any extra option there...)

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

i recommend to check 1image of each folder with 3rd way to find out exact color code
to prevent any dual background color


do you mean [resizing] or [canvas resizing]?
i have used canvas resizing and it do the transparency correctly,
just make sure:
1. you set alpha to 0
2. output format to png (or if the originals are png you can use as original in output format)

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

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

both works fine for me


edit:
can you upload one of the images to test on it?

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?

I didn't test it for the rest of the images since there is no need to resize them..But all the images have the same properties so we will have the same issue.

No.. This is the animation with a sound if you remember..

But as I told you I used the "scale" option of the designer only for this animatepng, so I resolved the problem in this way..
I will test all these though and I'll reply...
Thanks!

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

those are just some examples of the problem in XnConvert
no need to test


just if you want to resize you can use bilinear in filtering of resize action
or
maybe designer's scaling is better, better to not touch the original state of images




i thought maybe the lightning effect has missed because of the bad detection of bit depth
that's why i asked for how it is in original widget





they shouldn't be same,
for jpgs that you send to me, some of them had black background and some others have white,
so there should be a difference in them

Thanks for the clarifications. For the rest images there is no need to resize them so it doesn't matter if works or not..

I mean this part..

_________________
...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/