Please can you help me work out how to build a Codenameone Slider control that simply animates its Progress when it renders initially, so the user sees the progress bar increase over the course of a few seconds.
My actual implementation is to use Chen's awesome ArcProgress control to show how far something has grown, so as the control renders the arc is filled to its 70% or so level over a few seconds. I have the image above all built and working so far.
Many thanks
You just need to invoke setValue to indicate the current position. I'm guessing you don't see the progress moving because you're doing the progress on the EDT thus blocking painting.
All paint operations are performed on the EDT thread and so if your loading/processing code runs on that thread (the main thread) you're effectively blocking the paint operations. There's a long discussion of this in the EDT section of the developer guide.
Related
So here's my setup:
Camera images coming in at 1920x1080 # 25 FPS
Writing image data to WriteableBitmap on UI thread (simple copy, no processing)
Two Image controls in two different windows on two different monitors has their Source property set to the WriteableBitmap
Some generic UI stuff goes over the camera images
This works great, uses about 4% CPU on an old laptop (8 logical processors). The video is as smooth as can be. However, my UI has some animations (stuff moving around). When the camera display is running, those animations gets choppy.
Right now, the camera image is in Gray8 format, so it will be converted (I guess when calling WritePixels?). I also tried forcing one of the animations to 25 FPS too, no change.
Where should I start to resolve this? Is the issue that I'm locking the bitmap for too long, or is there something else going on? From what I can see locking the bitmap will cause the render thread to block, so moving that to another thread seems pointless. And it does feel like that somewhat defeats the purpose of WriteableBitmap.
This is always going to be tricky because you're capturing at 25FPS whilst WPF tries to update at 60. It's difficult to offer any meaninful advice without seeing a testable project but I'd probably start by doing the updates in a CompositionTarget.Rendering handler.
I have a WPF application showing a large image (1024x1024) inside a ZoomableCanvas. On top of the image, I have some 400 ellipses. I'm handling touch events by setting IsManipulationEnabled="True" and handling the ManipulationDelta event. This works perfectly when zooming slowly. But as soon as I start zooming quickly, there is a sudden frame-rate drop resulting in a very jumpy zoom. I can hear the CPU fan speeding up when this occurs. Here are some screenshots from the WPF Performance Suite at the time when the frame-rate drops:
Perforator
Visual Profiler
Software renderer kicks in?
I'm not sure how to interpret these values, but I would guess that the graphics driver is overwhelmed by the amount of graphics to render, causing the CPU to take over some of the job. When zooming using touch, the scale changes by small fractions. Maye this has something to do with it?
So far, I have tried a number of optimization tricks, but none seem to work. The only thing that seems to work is to lower the number of ellipses to around 100. That gives acceptable performance.
Certainly this is a common problem for zoomable applications. What can I do to avoid this sudden frame-rate drop?
UPDATE
I discovered that e.DeltaManipulation.Scale.X is set to 3.0.. in the ManipulationDelta event. Usually, it is around 1.01... Why this sudden jump?
UPDATE 2
This problem is definitely linked to multi-touch. As soon as I use more than one finger, there is a huge performance hit. My guess is that the touch events flood the message queue. See this and this report at Microsoft Connect. It seems the sequence Touch event -> Update bound value -> Render yields this performance problem. Obviously, this is a common problem and a solution is nowhere to be found.
WPF gurus out there, can you please show how to write a high performance multi-touch WPF application!
Well I think you've just reached the limits of WPF. The problem with WPF is that it tesselates (on CPU) vertex grafics each time it is rendered. Probably to reduce video memory usage. So you can imagine what happens when you place 600 ellipses.
If the ellipses are not resized then you could try to use BitmapCache option. In this way ellipses will be randered just once in the begining and then will be stored as textures. This will increase memory usage but should be ok I think.
If your ellipses are resized then previous technic won't work as each ellips will be rerendered when resized and and it will be even slower as this will rewrite textures (HW IRTs in perforator).
Another possibility is to design special control that will use RenderTargetBitmap to render ellipses to bitmaps and then will render it through Image control. In this way you can control when to render ellipses you could even render them in parralel threads (don't forget about STA). For example you can update ellipse bitmaps only when user interaction ends.
You can read this article about WPF rendering. I don't agree with the author who compares WPF with iOS and Android (both use mainly bitmaps compared to WPF). But it gives a good explanation about how WPF performs rendering.
I've got an application that goes into high CPU usage (slowly over time) when the ErrorProvider control sets the blinking icon continuously on several controls.
The high CPU usage is not immediate but have a slow ramp until the application hits 100% CPU.
When there is no error shown then CPU goes back to normal. Is it normal that the ErrorProvider takes so much CPU time?
This isn't normal. In all likelihood you are leaking memory or window handles. Start diagnosing this with Taskmgr.exe, Processes tab. View + Select Columns and tick Memory (Commit size), Handles, USER objects and GDI objects. Observe the values of these columns while your app runs.
Steadily increasing values indicates a problem in your code that can drive up the cpu usage. A pretty classic problem is leaking USER handles, induced by removing controls from your form with Controls.Remove() or Controls.Clear() and forgetting to dispose those controls.
According to this MS connect bug report: Graphical Resources Leak In ErrorProvider
When there is an error associated with a control, the ErrorProvider component displays a blinking icon on its right. I've discovered that every time the icon blinks, an new DeviceContext is added to the System.Drawing.Internal.DeviceContexts internal list. And when I call the Dispose() method on the ErrorProvider object, the DeviceContexts list is not cleared.
Consequence : by default, the icon blinks every 250 ms so 4 DeviceContext objects are added to the System.Drawing.Internal.DeviceContexts list per second. When an ErrorProvider is active and the BlinkStyle is AlwaysBlink, the list grows indefinitely ... and when this list is very big (I've seen it with 500000+ objects!) the application drawing operations are very very very slow :(
This bug is marked as fixed but the most recent comment says it is under investigation.
I have a WPF window that contains a fancy image with roughly 200 controls (derived from buttons), all of which use one of my 5 templates (paths, shadow effects, etc). Agreed, it is a heavy window to draw. I can live with that.
My problem comes from resizing the window. Maximize/Restore take about 1-2 seconds, but manually dragging the bottom-left corner causes the system to hang for about 5-10 seconds. In that delay, the window is black & contains partial leftovers until the final result is shown. It looks amateurish and that, I can't live with.
Remote connection : using a remote account, I found that the window resize always takes 1-2 seconds, but doesn't draw the "intermediate" stages while I'm dragging the window borders. The result is as snappy as I would expect.
My conclusion is this: It's the redraws during the resize that are bottlenecks.
The inevitable question is this : how can I prevent redrawing the window until the resize is finished?
Thanks in advance for any ideas...
#Seb: I'm beginning to think WPF is
not designed for interfaces that go
beyond 2-3 controls at a time
Visual Studio 2010 and Expression Blend should be good counterexamples. Though Visual Studio sometimes freezes the bottleneck is definitely not in the WPF rendering.
#Seb: The inevitable question is this : how
can I prevent redrawing the window
until the resize is finished?
Simply set the window's content visibility to Visibility.Collapsed before the resize/maximize and make it visible afterwards. Though I think you asked the wrong question. Here is the right one
How to make my controls measure/arrange extremely fast?
And to answer it you should take a look at your code. Maybe you intensively use dependency properties in the measuring/arrange algorithm? Or maybe you picked wrong panels (e.g. Grid is slower than Canvas)? Or maybe... I stop guessing here :).
By the way, it's always better to launch your app under profiler and prove the bottleneck rather than assuming the place where it might be. Check Eqatec Profiler it's free yet powerful enough. VS 2010 also offers nice profiling features, though it's far from being free. And you may want to check WPF Performance Suite.
Hope this helps.
Let me know how this works... I am assuming that your root visual item is stretching to horizontally and vertically to fill your window with auto height/width. Get rid of the Auto height/width. On app start up set the dimensions of the root element. There is a FrameworkElements have a size changed event. Register for this on your Application.Current.MainWindow (maybe be a typo, that was from memory). Whenever this event fires, start a timer with a small interval. If you get another resize while the timer is running, ignore it and reset the timer. Once the timer fires, you now know the new size the user desires and that they have (at least for a short period) stopped resizing the window.
Hope that helps!
From Ragepotato's answer and your comment about needing to see roughly what the interface would look like while resizing, as long as you don't have your objects dynamically re-locating themselves (like a Wrap Panel) - you could take a screenshot of the window contents and fill your frame with it.
Set it to stretch both height and width, and you'd get a (slightly fuzzy) idea of what a particular size would be. It wouldn't be live while resizing, but for those few seconds that probably wouldn't matter..
I know that this could look a dumb question, but here's my problem.
I have a worker dialog that "hides" a backgroundworker, so in a worker thread I do my job, I report the progress in a standard way and then I show the results in my WPF program.
The dialog contains a simply animated gif and a standard wpf progress bar, and when a progress is notified I set Value property. All lokks as usual and works well for any kind of job, like web service calls, db queries, background elaboration and so on.
For my job we use also many "couplers", card readers that reads data from smart card, that are managed with native C code that access to serial port (so, I don't use .NET SerialPort object).
I have some nunit tests and I read a sample card in 10 seconds, but using my actual program, under the backgroundworker and showing my worker dialog, I need 1.30 minutes to do the SAME job.
I struggled into problem for days until I decide to remove the worker dialog, and without dialog I obtain the same performances of the tests!
So I investigated, and It's not the dialog, not the animated gif, but the wpf progress bar!
Simply the fact that a progress bar is shown (so, no animation, no Value set called, nothing of nothing) slows serialport communicatitons.
Looks incredible? I've tested this behavior and it's exactly what happens.
What you describe sounds completely normal. Updating a progress bar's value once is a relatively trivial task, but if your code is performing a large number of operations, then updating the progress bar each time can end up taking much more total time than just the operations would themselves.
If your code performs, say, 10,000 operations, try setting your progress bar's maximimum value to 10, and only update the bar every 1,000 operations.
Another possibility is to set the bar's value using BeginInvoke instead of Invoke (if this is how you're doing it in the first place). Invoke blocks until the invoked method is completed, which means each operation in your loop has to wait for the progress bar to be updated before continuing.
I always use the following code for updating progress bars (has to be run in the UI thread)
private int UpdateCount = 0;
public void UpdateProgress(int value)
{
// We are updating every tenth time.
if (((UpdateCount % 10) == 0)) {
ProgressBar1.Value = value;
}
UpdateCount += 1;
}