Home » Archived » Visual Editor (VE) » Image Flicker Problem
| Image Flicker Problem [message #96996] |
Fri, 08 July 2005 06:53  |
Eclipse User |
|
|
|
Originally posted by: nightblue99.yahoo.com
Hi to all; I am developing a GUI builder fr SWT using images in the design
area without using GEF, I handle all the necessary actions with
paintListener and redraw options. But one problem is as follows:
First of all I saved all the images in the canvas. I have a few images on
my design canvas; if I add one new widget to the canvas, I get the widget
image and repaint the all canvas(all the images) and there is no problem.
But when I mouse down the one widget and moving the mouse to
reposititoning the widget, I redraw the canvas images with mouse move
operations but flickers appears on the canvas.
How can I prevent to canvas flickering?
Thanks
|
|
| | |
| Re: Image Flicker Problem [message #97350 is a reply to message #97091] |
Mon, 11 July 2005 17:31  |
| Eclipse User |
|
|
|
Hi nightblue,
> I do not mix lightweight images with heavyweight controls.
> All the visuals on the design canvas are images of heavyweight widgets
> that are selected by a user.
Not sure why you are getting flicker - are you double buffering ?
> - Why am I undertaking to this project is that my client wants that all
> the rich client screens will be SWT and similar to the underlying
> operating system. But when we used to free visual GUI builders (such as
> Eclipse VE), it took so much time when we had built some very rich
> client screens, and not supported some of things that the client wants.
> So we started to create GUI builder without Eclipse workbench
> (standalone). In fact it will be part of the J2ee client side,
> communicating with the server side using XML.
Sounds like a cool project. I don't know what release of the VE you
used to evaluate it but we have done a lot of performance stuff in our
last few releases and also have a big focus on RCP right now so we
support RCP Editors and Views and have a ton of other RCP stuff in the
pipeline. If you could be more specific about what wasn't supported we
could let you know when it's going to be in plan (or add it if we need
to or maybe it's already there). For the time it took to build the GUI
is that a straight CPU performance gripe or something with usability
that you think you can design better ? If you are looking for a solid
commercial SWT/RCP GUI builder also be sure to take a look at SWT
Designer from Instantiations which has a free eval from their website.
For the J2EE client side communicating with XML this is the basis by
which Canoo do their ultra lightweight client www.canoo.com/ulc and
their visual builder is based on the VE framework, so as a yard stick
for what can be done by extending the VE it should be a good litmus test
for what is achievable. The VE has two goals - one is an out of the box
GUI building experience with the main Java widget toolkits and the other
is a framework that people wanting to build their own GUI builders can
extend. Canoo are a good example of a success story extending the VE
and there are others as well. I strongly strongly suggest from my
experience of building GUI builders (and not from any vested interest in
the VE) that creating a GUI builder is way way harder than you first
think it is, and the path of getting a half decent prototype working and
then getting bogged down in detail is one that many have trodden. The
VE's main goal is to provide a framework for people building GUI
builders and while it is lacking in many areas we're quite a nice bunch,
we have a mailing list for people who are extending it, we're an
open-source project with full visibility, and we'd love to get into the
specific grungy details of what you're tacking and see how we can help
you and vice-versa.
Best regards,
Joe Winchester
|
|
|
| Re: Image Flicker Problem [message #97546 is a reply to message #97350] |
Wed, 13 July 2005 03:17 |
| Eclipse User |
|
|
|
Originally posted by: nightblue99.yahoo.com
Hi Joe;
- About Image Flicker: My design are is Canvas, the paintListener is
attached on it. When I pick a widget from the toolbar and drop on it, I
get the image and redraw the canvas then no problem.
When I want to focus on the image of the widget, new small rectangular
widgets on the NW(North West),N(North),W,E,S,C... are drawn that a user
plays with properties of the image of the
widget(relocation,resize,..etc.). But when the user mouse down on the
C(Center of the image) and begins to mouse move, the image of the widget
is moving(in every move I call redraw of the canvas) but then image
flicking problems occur. Very fast painting can be the problem? I dont
know...
- Yes you are absolutely true that implementing the GUI builder is very
hard than I am thinking. In fact I am the sole people to accomplish this
task.
- As you said I would like to start and redesign my project using the VE
framework but understanding the VE framework source code seems to hard for
me. My main focus is that creating the XML file according to the UIML
standards. In tool I want to design is that a user of GUI builder easily
builds thinks that are related with Table, Referential Combo box,
layouts(in fact layouts will be implementing with the just locations of
the childs to the parent, no special layout formats are used)..... For
users of the GUI builder, knowing the SWT framework can not be must, they
does not touch the any SWT related code.
- Could you give me a road that how can I start ?
Thanks for advance
|
|
| |
| Re: Image Flicker Problem [message #97981 is a reply to message #97546] |
Thu, 14 July 2005 19:22 |
| Eclipse User |
|
|
|
Hi nightblue,
> - About Image Flicker: My design are is Canvas, the paintListener is
> attached on it. When I pick a widget from the toolbar and drop on it, I
> get the image and redraw the canvas then no problem.
> When I want to focus on the image of the widget, new small rectangular
> widgets on the NW(North West),N(North),W,E,S,C... are drawn that a user
> plays with properties of the image of the
> widget(relocation,resize,..etc.). But when the user mouse down on the
> C(Center of the image) and begins to mouse move, the image of the
> widget is moving(in every move I call redraw of the canvas) but then
> image flicking problems occur. Very fast painting can be the problem? I
> dont know...
I think it is because you are doing a redraw every mouse move cause the
mouse move is on the UI thread and so is your redraw. What you should
do is try to batch up your redraw and also optimize it. For example in
your mouse event mark a flag that the mouse has moved and put an async
runnable on the UI with Display.asyncExec(...). Next time the mouse
moves check your flag and if it is there then don't post a new runnable.
When your runnable runs (after the UI thread has cleared the other work)
redraw and unset the flag (that is basically a dirty flag). What this
does is mean that if there are a ton of mouse requests on the UI they
will result in fewer (ideally one) redraw. Then you can optimize this
by working out just the area that you wish to repaint on your canvas and
just doing a redraw(...) on that rectangle to be precise with what area
will be repainted. If the area to redraw is dependent on info you get
in the mouse callback (for example if when the mouse goes down you begin
to mark a rectangle corner and as it moves you are painting some kind of
rectangle) then instead of a dirty flag make this a dirty rectangle.
Keep doing math to grow as the mouse keeps moving and once the UI has no
more work (i.e. the user has stopped moving the mouse) your paint
callback should redraw just this dirty rectangle. This is also
sometimes known as a damaged rectangle.
> - Yes you are absolutely true that implementing the GUI builder is very
> hard than I am thinking. In fact I am the sole people to accomplish this
> task.
It is tough and I am impressed you are getting along so well.
> - As you said I would like to start and redesign my project using the VE
> framework but understanding the VE framework source code seems to hard
> for me. My main focus is that creating the XML file according to the
> UIML standards. In tool I want to design is that a user of GUI builder
> easily builds thinks that are related with Table, Referential Combo box,
> layouts(in fact layouts will be implementing with the just locations of
> the childs to the parent, no special layout formats are used)..... For
> users of the GUI builder, knowing the SWT framework can not be must,
> they does not touch the any SWT related code.
> - Could you give me a road that how can I start ?
Luckily you are not the sole person to try this. As a feel for what can
be done Jeff's URL to AUIML would be a good thing to look at - they
extended the VE with their own XML persistence format for a GUI that can
be rendered in Swing or HTML. It's pretty cool, but it should give you
a warm and fuzzy for what kind of stuff can be done extending the VE.
For the "how do I do this for my scenaril" we should probably discuss
this in the ve-dev mailing list which we have details about on
https://dev.eclipse.org/mailman/listinfo/ve-dev. At 50,000 feet the VE
has its own internal EMF model of what a GUI looks like. When a file is
opened and given to an editor part (like the JavaVisualEditorPart) a
model builder parses the file and creates the EMF model. We have a
parser for a .java file, AUIML wrote one for their format, and there are
others that people have written with help from the ve-dev mailing list.
Once this EMF model exists the VE will create a VM for you that hosts
the list java instances and create the GUI. The VE creates a separate
VM so the -classpath can include user .jars and projects, but this can
be in the IDE VM if having non-IDE classes is not an issue. The VE also
provides the frameworks for making the GUI (that gets positioned off
screen) get rendered in GEF (which is a graphical editor framework that
is a big canvas and an object model of figures beneath it and a ton of
code that means that the kind of mouse flicker problem you are fixing
doesn't exist). The VE has property sheet frameworks so when things
are selected properties can be viewed, edited, etc... This is built
around the JavaBeans framework and is extensible through BeanInfo or
through EMF overrides. There is also a palette and a bunch of other
stuff the VE will give you. The subsystem you won't activate is the
Java one that (for us) does the code parsing, remembers what bit of the
EMF model came from where and updates the source and keeps it in sync
with the model. Most people doing XML stuff just let the user code
their GUI and then generate their XML persistence format on save,
although we do have one extender who is attempting synchronous XML round
tripping which will be cool, but it shouldn't be attempted as a 1.0
feature (we know cause synchrounous Java round tripping was hard for us
to get right).
VE is open source'd under the EPL-v10 license and everything is public -
the bugzilla requests, the planning, etc... If there is a part of VE
code that, while extending it, you don't like or want to change/add
there is the path of making contributions that someone else verifies and
checks in and then the possibility of graduation to project comitter if
that is something you are interested in pursuing. That's pretty much
the whole model of open source and something that we really try to
practice with the VE.
Best regards,
Joe Winchester
|
|
|
| Re: Image Flicker Problem [message #98011 is a reply to message #97981] |
Fri, 15 July 2005 03:51 |
| Eclipse User |
|
|
|
Originally posted by: nightblue99.yahoo.com
Hi Joe;
- Really thaks very much for commenting and helping. I solved the image
flicker problem, indeed I decided that I do not call redraw() method on
canvas every mouse move; just one call on mouse up. (When moving the mouse
just small rectangles over the image is moving, then when mouse up call
redraw() on canvas, the image redrawn on the new location it is funny
:))).
- Now I am going into the details; now implementing the resize of the
image and going into the parent-child relationship. And then going into
the BeanInfo framework related issues...... so on... so on...
Sincerely;
|
|
|
| Re: Image Flicker Problem [message #609017 is a reply to message #96996] |
Fri, 08 July 2005 15:32 |
| Eclipse User |
|
|
|
Hi nightblue,
> Hi to all; I am developing a GUI builder fr SWT using images in the
> design area without using GEF, I handle all the necessary actions with
> paintListener and redraw options. But one problem is as follows:
>
> First of all I saved all the images in the canvas. I have a few images
> on my design canvas; if I add one new widget to the canvas, I get the
> widget image and repaint the all canvas(all the images) and there is no
> problem. But when I mouse down the one widget and moving the mouse to
> reposititoning the widget, I redraw the canvas images with mouse move
> operations but flickers appears on the canvas.
>
> How can I prevent to canvas flickering?
I think that what you are doing is attempting to mix some lightweight
(paint event gc.draw stuff) on a Canvas with some heavyweight (new
SomeControl(canvas,SWT.NONE). This is a mixture of lightweight drawing
with heavyweight widgets and will give unpredictable results in the case
you're describing where the platform wants to do native stuff with its
control when you cursor over it and you are trying to do stuff as well
and it flickers. I don't think there is any cure for this, although you
should look at the various style bits on Composite to see if these can
help. These are documented in the comments and also in the eclipse
corner article
http://www.eclipse.org/articles/Article-SWT-graphics/SWT_gra phics.html
Out of curiosity though, why are you mixing a widget with paint stuff ?
Also - what is your endgame with your GUI builder ? It's a fairly big
undertaking to create a GUI biulder for SWT.
Best regards,
Joe Winchester
|
|
|
| Re: Image Flicker Problem [message #609018 is a reply to message #97078] |
Sat, 09 July 2005 04:40 |
| Eclipse User |
|
|
|
Originally posted by: nightblue99.yahoo.com
Hi Joe;
- First of all thanks for answering my question. I have looked at that
article for several time :).
- Secondly, I do not mix lightweight images with heavyweight controls. All
the visuals on the design canvas are images of heavyweight widgets that
are selected by a user.
- Why am I undertaking to this project is that my client wants that all
the rich client screens will be SWT and similar to the underlying
operating system. But when we used to free visual GUI builders (such as
Eclipse VE), it took so much time when we had built some very rich client
screens, and not supported some of things that the client wants. So we
started to create GUI builder without Eclipse workbench (standalone). In
fact it will be part of the J2ee client side, communicating with the
server side using XML.
|
|
|
| Re: Image Flicker Problem [message #609035 is a reply to message #97091] |
Mon, 11 July 2005 17:31 |
| Eclipse User |
|
|
|
Hi nightblue,
> I do not mix lightweight images with heavyweight controls.
> All the visuals on the design canvas are images of heavyweight widgets
> that are selected by a user.
Not sure why you are getting flicker - are you double buffering ?
> - Why am I undertaking to this project is that my client wants that all
> the rich client screens will be SWT and similar to the underlying
> operating system. But when we used to free visual GUI builders (such as
> Eclipse VE), it took so much time when we had built some very rich
> client screens, and not supported some of things that the client wants.
> So we started to create GUI builder without Eclipse workbench
> (standalone). In fact it will be part of the J2ee client side,
> communicating with the server side using XML.
Sounds like a cool project. I don't know what release of the VE you
used to evaluate it but we have done a lot of performance stuff in our
last few releases and also have a big focus on RCP right now so we
support RCP Editors and Views and have a ton of other RCP stuff in the
pipeline. If you could be more specific about what wasn't supported we
could let you know when it's going to be in plan (or add it if we need
to or maybe it's already there). For the time it took to build the GUI
is that a straight CPU performance gripe or something with usability
that you think you can design better ? If you are looking for a solid
commercial SWT/RCP GUI builder also be sure to take a look at SWT
Designer from Instantiations which has a free eval from their website.
For the J2EE client side communicating with XML this is the basis by
which Canoo do their ultra lightweight client www.canoo.com/ulc and
their visual builder is based on the VE framework, so as a yard stick
for what can be done by extending the VE it should be a good litmus test
for what is achievable. The VE has two goals - one is an out of the box
GUI building experience with the main Java widget toolkits and the other
is a framework that people wanting to build their own GUI builders can
extend. Canoo are a good example of a success story extending the VE
and there are others as well. I strongly strongly suggest from my
experience of building GUI builders (and not from any vested interest in
the VE) that creating a GUI builder is way way harder than you first
think it is, and the path of getting a half decent prototype working and
then getting bogged down in detail is one that many have trodden. The
VE's main goal is to provide a framework for people building GUI
builders and while it is lacking in many areas we're quite a nice bunch,
we have a mailing list for people who are extending it, we're an
open-source project with full visibility, and we'd love to get into the
specific grungy details of what you're tacking and see how we can help
you and vice-versa.
Best regards,
Joe Winchester
|
|
|
| Re: Image Flicker Problem [message #609048 is a reply to message #97350] |
Wed, 13 July 2005 03:17 |
| Eclipse User |
|
|
|
Originally posted by: nightblue99.yahoo.com
Hi Joe;
- About Image Flicker: My design are is Canvas, the paintListener is
attached on it. When I pick a widget from the toolbar and drop on it, I
get the image and redraw the canvas then no problem.
When I want to focus on the image of the widget, new small rectangular
widgets on the NW(North West),N(North),W,E,S,C... are drawn that a user
plays with properties of the image of the
widget(relocation,resize,..etc.). But when the user mouse down on the
C(Center of the image) and begins to mouse move, the image of the widget
is moving(in every move I call redraw of the canvas) but then image
flicking problems occur. Very fast painting can be the problem? I dont
know...
- Yes you are absolutely true that implementing the GUI builder is very
hard than I am thinking. In fact I am the sole people to accomplish this
task.
- As you said I would like to start and redesign my project using the VE
framework but understanding the VE framework source code seems to hard for
me. My main focus is that creating the XML file according to the UIML
standards. In tool I want to design is that a user of GUI builder easily
builds thinks that are related with Table, Referential Combo box,
layouts(in fact layouts will be implementing with the just locations of
the childs to the parent, no special layout formats are used)..... For
users of the GUI builder, knowing the SWT framework can not be must, they
does not touch the any SWT related code.
- Could you give me a road that how can I start ?
Thanks for advance
|
|
|
| Re: Image Flicker Problem [message #609050 is a reply to message #97546] |
Wed, 13 July 2005 07:22 |
| Eclipse User |
|
|
|
nightblue wrote:
<snip>
> - As you said I would like to start and redesign my project using the VE
> framework but understanding the VE framework source code seems to hard
> for me. My main focus is that creating the XML file according to the
> UIML standards. In tool I want to design is that a user of GUI builder
> easily builds thinks that are related with Table, Referential Combo box,
> layouts(in fact layouts will be implementing with the just locations of
> the childs to the parent, no special layout formats are used)..... For
> users of the GUI builder, knowing the SWT framework can not be must,
> they does not touch the any SWT related code.
> - Could you give me a road that how can I start ?
>
> Thanks for advance
>
>
You may want to check out the AUIML project
(http://www.alphaworks.ibm.com/tech/auiml) that has created a
VisualBuilder based off the VE (that does not require a knowledge of any
Swing or SWT related code)
Hope this helps,
- Jeff
|
|
|
| Re: Image Flicker Problem [message #609076 is a reply to message #97546] |
Thu, 14 July 2005 19:22 |
| Eclipse User |
|
|
|
Hi nightblue,
> - About Image Flicker: My design are is Canvas, the paintListener is
> attached on it. When I pick a widget from the toolbar and drop on it, I
> get the image and redraw the canvas then no problem.
> When I want to focus on the image of the widget, new small rectangular
> widgets on the NW(North West),N(North),W,E,S,C... are drawn that a user
> plays with properties of the image of the
> widget(relocation,resize,..etc.). But when the user mouse down on the
> C(Center of the image) and begins to mouse move, the image of the
> widget is moving(in every move I call redraw of the canvas) but then
> image flicking problems occur. Very fast painting can be the problem? I
> dont know...
I think it is because you are doing a redraw every mouse move cause the
mouse move is on the UI thread and so is your redraw. What you should
do is try to batch up your redraw and also optimize it. For example in
your mouse event mark a flag that the mouse has moved and put an async
runnable on the UI with Display.asyncExec(...). Next time the mouse
moves check your flag and if it is there then don't post a new runnable.
When your runnable runs (after the UI thread has cleared the other work)
redraw and unset the flag (that is basically a dirty flag). What this
does is mean that if there are a ton of mouse requests on the UI they
will result in fewer (ideally one) redraw. Then you can optimize this
by working out just the area that you wish to repaint on your canvas and
just doing a redraw(...) on that rectangle to be precise with what area
will be repainted. If the area to redraw is dependent on info you get
in the mouse callback (for example if when the mouse goes down you begin
to mark a rectangle corner and as it moves you are painting some kind of
rectangle) then instead of a dirty flag make this a dirty rectangle.
Keep doing math to grow as the mouse keeps moving and once the UI has no
more work (i.e. the user has stopped moving the mouse) your paint
callback should redraw just this dirty rectangle. This is also
sometimes known as a damaged rectangle.
> - Yes you are absolutely true that implementing the GUI builder is very
> hard than I am thinking. In fact I am the sole people to accomplish this
> task.
It is tough and I am impressed you are getting along so well.
> - As you said I would like to start and redesign my project using the VE
> framework but understanding the VE framework source code seems to hard
> for me. My main focus is that creating the XML file according to the
> UIML standards. In tool I want to design is that a user of GUI builder
> easily builds thinks that are related with Table, Referential Combo box,
> layouts(in fact layouts will be implementing with the just locations of
> the childs to the parent, no special layout formats are used)..... For
> users of the GUI builder, knowing the SWT framework can not be must,
> they does not touch the any SWT related code.
> - Could you give me a road that how can I start ?
Luckily you are not the sole person to try this. As a feel for what can
be done Jeff's URL to AUIML would be a good thing to look at - they
extended the VE with their own XML persistence format for a GUI that can
be rendered in Swing or HTML. It's pretty cool, but it should give you
a warm and fuzzy for what kind of stuff can be done extending the VE.
For the "how do I do this for my scenaril" we should probably discuss
this in the ve-dev mailing list which we have details about on
https://dev.eclipse.org/mailman/listinfo/ve-dev At 50,000 feet the VE
has its own internal EMF model of what a GUI looks like. When a file is
opened and given to an editor part (like the JavaVisualEditorPart) a
model builder parses the file and creates the EMF model. We have a
parser for a .java file, AUIML wrote one for their format, and there are
others that people have written with help from the ve-dev mailing list.
Once this EMF model exists the VE will create a VM for you that hosts
the list java instances and create the GUI. The VE creates a separate
VM so the -classpath can include user .jars and projects, but this can
be in the IDE VM if having non-IDE classes is not an issue. The VE also
provides the frameworks for making the GUI (that gets positioned off
screen) get rendered in GEF (which is a graphical editor framework that
is a big canvas and an object model of figures beneath it and a ton of
code that means that the kind of mouse flicker problem you are fixing
doesn't exist). The VE has property sheet frameworks so when things
are selected properties can be viewed, edited, etc... This is built
around the JavaBeans framework and is extensible through BeanInfo or
through EMF overrides. There is also a palette and a bunch of other
stuff the VE will give you. The subsystem you won't activate is the
Java one that (for us) does the code parsing, remembers what bit of the
EMF model came from where and updates the source and keeps it in sync
with the model. Most people doing XML stuff just let the user code
their GUI and then generate their XML persistence format on save,
although we do have one extender who is attempting synchronous XML round
tripping which will be cool, but it shouldn't be attempted as a 1.0
feature (we know cause synchrounous Java round tripping was hard for us
to get right).
VE is open source'd under the EPL-v10 license and everything is public -
the bugzilla requests, the planning, etc... If there is a part of VE
code that, while extending it, you don't like or want to change/add
there is the path of making contributions that someone else verifies and
checks in and then the possibility of graduation to project comitter if
that is something you are interested in pursuing. That's pretty much
the whole model of open source and something that we really try to
practice with the VE.
Best regards,
Joe Winchester
|
|
|
| Re: Image Flicker Problem [message #609078 is a reply to message #97981] |
Fri, 15 July 2005 03:51 |
| Eclipse User |
|
|
|
Originally posted by: nightblue99.yahoo.com
Hi Joe;
- Really thaks very much for commenting and helping. I solved the image
flicker problem, indeed I decided that I do not call redraw() method on
canvas every mouse move; just one call on mouse up. (When moving the mouse
just small rectangles over the image is moving, then when mouse up call
redraw() on canvas, the image redrawn on the new location it is funny
:))).
- Now I am going into the details; now implementing the resize of the
image and going into the parent-child relationship. And then going into
the BeanInfo framework related issues...... so on... so on...
Sincerely;
|
|
|
Goto Forum:
Current Time: Sun Jun 22 16:52:07 EDT 2025
Powered by FUDForum. Page generated in 0.07707 seconds |
Home