XWidgetSoft Forum

Ok hamid...It's up to you now!

The widget will work like this:
1) With mouse over a button: The "green"/"orange" or "blue" layer will appear and the corrisponding progressbar (liquid in bottle) will go from 0>100 to give the effect of stuffing the glass.
2) With mouse out the "green"/"orange" or "blue" layer disappears and the progressbar(liquid in bottle) goes from 100>0
(empty glass)
3) And with click on a button, will have shutdown/restart/sleep, according the buttons.

...if you have any suggestions tell me..

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

for now, a test version:


Note:
1. as ever, i have deleted the images to reduce the upload size
2. it's not finished yet

==========

changes:
1. added: the code for the glass getting full/empty on mouse enter/leave

==========

ideas:
1. the liquid that comes out (layers) is not realistic at all, also it's position is seems that behind the glass
2. the liquid in glass (progressbar) not realistic, it's stretching, i think it's better to make it background, and in foreground a black progressbar make it visible, also it will be more realistic to have the top of the liquid at the end of the black progressbar
3. maybe adding a timer for cancel the decision, when click a button, it start filling the liquid and when filled start the command, you can cancel before it gets filled (maybe by click on glass)
4. maybe an effect for what command going to run (ex: status text shows shutdowning...) or some other effects (many effects can be added as a Rclick options)
5. maybe better to don't show layers until button pressed (mouse enter/leave will just make a preview of filling/emptying, when the button pressed the machine works and real liquid will comes out)

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

Edit:
i found that there is an opion available in background/foreground of progressbar for this purpose, it's [Allow Clipped], this way it doesn't get stretch, and also you can use thumb image for the top of liquid;

there are so many ways to do that, and this is one way,
choose what you think easier for you...


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

Edit2:
some questions:
1. is it reflect of machine's light under the glass or it's reflect of liquid? (i'm asking it because it will get hide when mouseleave the button when still glass is full)
2. should it finish filling (make invisible layers) after the glass get filled?

hamid don't forget that I used the built-in images. I try to do my best but the image are these... Also was just my first "test widget".
The glass consists of 2 parts/images: down_back image and front. The liquid that comes out (layers) is actually between the two images so actually is "in" the glass.


I know about the [Allow Clipped] option man! I found the top part of the liquid as thumb so let me re-create all three progressbars.

1. If we can do it better,an idea is to create three more progressbars forthe top liquid.
With the mouse over, first the top liquid start falling progressbar from 100>0 and then the bottom liquid/progressbar will start too.. Under the glass it's the reflect of liquid so should be appear at the same time with the top liquid image.
2. Yes...

One thing that we need to adjust is the speed of the filling liquid. It's too slow...Can be done?

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

I'm doing the 2nd test with the new look of the liquid in glass and the creation of 3 progressbars for the top liquid.
The only "negative" using the thumb function for the in glass liquid, is that we can have the full empty look. So you need to make an addition in the script to "show the progressbar with the mouse enter"..
But you will see it in practice...
I will post it as soon as possible..

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

they are not centered on each other, and it is different from the original image on the site


you can change the speed by changing the value of +=1 and -=1 (in the fillit() and emptyit() functions) to a higher value,
i think 2 is enough for it for mouseover, but after pressing i think it's better to be slow to make user have time to cancel the command (i don't know if you want to have animation after button press)



i'll do it

I will try to test various positions (front/behind) of the various images to reproduce the same visual as the original...
Don't forget that is always a port from a locker theme for ANDROID and there the animation/effects work different....!
Wait for my second test .xwp..

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

Test this one:
Concentrate only on "upgreen" and "progressbargreen" progressbars.
The first one is the falling liquid and the second the liquid in the glass.
The "upgreen" should go from 100->38 and the "progressbargreen" from 0->100
They need to move at the same time to give the effect like the screenshot the image.

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

i can do the coding for it, but i think it's better to not do extra coding for it to save cpu usage,
so maybe better to do it this way:
1. cut the top-half of the top of the liquid to be used in behind of coming liquid
2. cut the bottom-half of top of the liquid (including its corners) to be used in front of coming liquid
3. use clipping option to show coming liquid and hide liquid in glass

i just worked on it to find the best way to use clipping, but i'm confused on clipping option,
maybe you know it better,
if you can't do it, then just send the cutted images and i will sort them as it should be

Here are the cutted images but I'm confused about what do you want to do with them..
The top second progressbar for the liquid will stay or not?

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

i don't think any progressbar will be needed,
i want to use image object for it,
is there any reason to use progressbar?


edit:
i want the top of the glass liquid in 2 half, not this one,
it should also have the bottom corners filled in bottom half

The 2nd top progress bar was for this idea:
The first one is the falling liquid and the second the liquid in the glass.
The "upgreen" should go from 100->38 and the "progressbargreen" from 0->100
They need to move at the same time to give the effect like the screenshot the image.
The second progress bar will increase the cpu a lot...?

I send you the two images + the whole green. I hope are the right images because still I don't understand their utility...

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

Any news hamid...?

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

the images was not the one that i wanted,
but i have done it without using them

==========

sorry for being late,
here's a new test:
[removed]
[see the edit part]

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

Changes:
1. Changed: type and position of objects needed for liquid movement
2. Sorted: objects in widget tree for being back/front of each other
3. Changed: name of some images for easier scripting
4. Changed: the code for liquid movement
5. Changed: speed of filling/emptying liquid to 5
6. Added: the code to load all the images for different colors through code (so it only using one object for all colors)
7. removed: extra objects from the widget

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

Note:
1. i have changed position of most of the objects, plz re-position them if needed
2. i have set most of the objects to lock position to don't change position during designing, disable it if necessary
3. if you need to change the name of images and objects, then maybe the code needs to be changed

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

to do:
1. you have to add a background to the bottom of the glass
> to hide the top of the liquid when glass gets empty
2. you have to re-size & re-position the objects if needed

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

question:
what does the [glass] layer do? (why [image2] is inside [glass] layer?)

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





Edit:
Changes:
1. Added: renamed images to designer for easier editing (in previous version, i have forgotten to add them to the designer after renaming them)
2. Changed: Visibility of images that i have recently added to designer
3. Changed: a bit position and size of objects


Edit2:

Changes:
1. fixed: the top of liquid goes a bit higher than it should be, in previous version
2. Added: the code to start filling from bottom of glass only if the color has changed (it doesn't empty the glass if the color has not changed)


question:
which way is better?
1. always fill from 0
2. only fill from 0 if color has changed

Nothing.. At the beginning were more images inside the layer. I deleted them and I left this inside..

Thanks for the rest! Let me test and I'll reply as soon as possible..
Please re-attach the .xwp file to download.

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

plz redownload


and if you can plz do this:
i have added this line 2 times:

it doesn't make any problem,
but better to remove one of them,
don't wanna go for 3rd edit

All seem ok hamid, thanks!!
The only problem is the liquid on the bottom, (when the glass is empty) that is going too low/out of glass...
I would like to fix it but I don't see any progressbar.. How can I move up a little the bottom part? Just only stretching the image..?

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

as i said here, you have to do these:

if i make it higher the glass will not get empty,
so if you want to make it empty, we should do one of these:

1. you should add a little background to the bottom of glass ([down] object in widget tree),
so it will get hide behind that background

or

2. we should use another layer to clip the visible position (i have tested it and it have problem with multiple object clipping, so if you want it this way it needs more testings)

Ok... I'll try to add this extra background to hide these parts. Thanks again!

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

i just found another way:

if you think adding background is hard for you,
you can also resize the [liquid.png] images to the size that should be used in widget,
and then there is no need to use stretch in image object,
so we can use clipping that way


here's an example:

Your last test file works flawless!
I was ready to create a background image but seems that no need to do it..
I don't know a lot about script code but about editing/creating images nothing is impossible for Jimking..!

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