Blur UI on High DPI windows system - wxwidgets

wxWidgets 3.1 claims to fix the Windows High DPI issues. It works too but I see blur UI (fonts/bitmaps) looks stretched.
I went through the https://learn.microsoft.com/en-us/windows/desktop/hidpi/high-dpi-desktop-application-development-on-windows
I did the manifest changes to make my application DPI-aware, it removed the blur effect but application layout went wrong, every layout looks smaller (unusable UI).
Note* issue more vigilant on 3K and 4K system. Hardcoded pixel sizes are not scaling (like 400px width button, 500pixel width panel etc).

wxWidgets gives you a (relatively simple) way to make your application work in high DPI, but doesn't -- and can't -- do it automatically for you, in particular only sizer-based layouts without hardcoded pixel sizes will work correctly and you do need to provide your own higher definition artwork.
Concerning the existing pixel values, the simplest (even though not really the best) way to make them work better is to put FromDIP() calls around them.
Also note that you don't need to do anything special for pixel values in XRC, they're already interpreted as being resolution-independent pixels and are scaled according to the DPI automatically.

Related

Prevent wxWidgets app from scaling sizes on higher dpi

I'm writing a wxWidgets (3.1.0) app that is supposed to work on windows and mac.
On windows when i set the scaling of the text to more than 100% the sizes of my controls get all messed up. I have a dpi manifest that says my app is dpi aware. I also set the font pixel size on my dialogs and that works to some extent. When i set the size of some element from code it is resized to that pixel size which is what i need, but any size that is set in the xrc file gets scaled up. Also when i try to reduce the size of any wxSpinCtrl it can be reduced normally to some point but then only the text box gets smaller and the buttons remain unproportionally large. So is there a way to tell my app not to scale any sizes and just let everything be exactly the same pixel size as it would be on a normal dpi (despite the fact that my app will look small on higher resolutions)?
There is no way to prevent the proper scaling from being applied using wxWidgets API and I don't think this is going to change because it just doesn't seem to make any sense.
However rebuilding wxWidgets with wxHAVE_DPI_INDEPENDENT_PIXELS defined should trick the library into thinking that the underlying graphical toolkit already scales the pixel values and so prevent it from doing it on its own. I've never tested this but, AFAICS, this should result in what you want.
Nevertheless let me reiterate that what you want is totally wrong and the real fix for this problem is to explain it to whoever decided to do it.

GIMP & Photoshop Gaussian Blur issue?

I'm trying hard to nicely blur a red circle but everytime i get gradient levels of red and the image looks choppy.
Before:
http://i.imgur.com/6yzMhFI.png
After:
http://i.imgur.com/2dZl4ph.png
How i can acheive a smooth blur ?
If you are referring to the visible circles that separate the gradation levels, that is called banding Here are some ways to fix that:
Increase your document's bit level from 8-bit to 16-bit
This will increase the amount of colors your file can represent, creating more colors that can be used to represent the gradient, making it smoother in appearance.
In Photoshop navigate to Image>Mode>16-Bits/Channel
In GIMP 2.10 (or higher?), navigate to Image>Precision>16 bit..
Display or system settings might be unable to display enough colors
If changing the bit depth does not fix the issue then you might have a hardware or system settings issue.
If it's a hardware issue, your monitor might not have the capability to display enough colors to render the gradient smooth
If it's system settings you will need to go to your operating systems color depth setting, usually located under the system's display settings. It could say something like Millions of Colors, or True Color (32-bit).
The last thing related to settings is that you have a bad color profile set in your system or in your image editing software. It's beyond the scope of this answer. If you don't know how to color calibrate your monitor, then it most likely isn't this and you can skip this.
If you have to have 8-bits
If you absolutely have to keep your document in 8-bit color space then you will have to use dithering or add some noise to your image to confuse the viewers brain into seeing a smooth gradient.
Noise or dithering will confuse the viewers brain into seeing a smoother gradient by setting some focus on the imperfections of the noise/grain/dithering. This doesn't exactly answer your question, but it is about the only option you have if you keep your ultra smooth gradient in 8-bit mode.
Good Luck!
I think you are applying the Gussain-Blur to the entire image try to Select the red circle and apply the Gussain-Blur filter to it

How to size my UI components for a Cocoa mac app given the potential variety of resolutions it could be displayed on?

Cocoa uses a drawing system (user coordinate space) measured in "points" which are resolution independent...sounds great
While we need to be concerned with our app running in many resolutions, Cocoa is going to take care of that for us in (1) above...sounds too good to be true!
It does scale our controls as resolution changes...this is good.
BUT the screen size increases as my resolution increases...this is not good, I though we had a drawing canvas that was independent of the resolution!
What if the controls shrink to silly small levels as the resolution increases - should I be concerned about this?
To summarize: is their a "standard" resolution I should design for and then all automatic scaling by Apple will automatically look fine?
[Confused while reading the Apple Progammer Guide on the topic of Drawing]
You do not need to be concerned about this. The user is only allowed to select resolutions which make sense given the physical size of the display, so the standard controls will always be "large enough". You just need to test your app on Retina and non-Retina displays (and ideally both at the same time, with an external 1x monitor plugged on a 2x machine ; move your windows between the two screens and check that your images update accordingly).

windows 8 metro app designing for multiple Resolution

I am designing a simple music app where the user gets to play instruments i.e. Drums, and the problem that I am facing is with resolutions.
The drums are images, which I have converted them into buttons. Everything looks great at the state that I have designed it.
However, when I switch to other resolution states, the button(image) are distorted, e.g. skewed, scaled, and looks nasty.
I have tried designing or arranging them via selecting 'Enable state Recording', but the specific designs for that state are not being saved.
Have you tried the approaches discussed here? http://msdn.microsoft.com/en-us/library/windows/apps/hh465362.aspx For the actual button sizes, make sure you are not fixing the width/height with pixel values. Use * weighted rows and columns to layout your grids and have the buttons autosize to fill a given cell in the grid. Then match with the appropriate image resource per the article.
Grids are great for dividing up available space but they can't account for changes in aspect ratios. If your items are still set to Stretch (or Fill) then they can end up out of aspect ratio. Another option is to design the entire layout at a fixed size (let's say 1024 x 768 or 1366 x 768) and wrap the entire thing in a ViewBox. ViewBox will scale all elements equally and maintain the aspect ratio, adding letterboxing (or empty space) on the sides / top & bottom if necessary. This might be a better approach for a drum kit.
Hope that helps.
Redid the whole project of designing again.
This time, I put the image inside a specific grid and that made things lot better. :)

How to get crisp image for search result suggestion in Windows 8?

I'm using a 40 x 40 sized image as a search result suggestion image in Windows 8 search. Only advice about the image format I can find is to have correct size for it (http://msdn.microsoft.com/en-us/library/windows/apps/Hh700542.aspx: "Windows will scale or crop smaller or larger images").
However, the correctly sized image blurs annoyingly. The same thing happens whether I use jpg or png. Original image looks fine, but the result suggestion in the search charm is very ugly, being still of same size! Is Windows converting the image somehow, and how could I get the image to stay crisp?
I haven't noticed blurring with photo-like images, but this image contains clear lines and areas which are vulnerable to any scaling etc.
Update Sep 24:
Here is the test image I used when trying to figure out the problem. I also created different scale versions, but in my case the 100% version was used (that's why the "100" marking) - as I supposed because the resulting image really is 40x40. As you can see, the resulting image (right) is of same size as original (left), but blurry.
it does not happen that often but it seems the right solution in this case was simply to wait ;) I haven't done anything new regarding result suggestion images in my solution and today I realized that the images became crisp. Probably fixed by any of the windows updates.
[Took a stab at answering what seems the related question mentioned in the comments, so I'm posting here as well.]
It sounds like this could be related to automatic scaling of the images. Windows will automatically scale up/down based on pixel density, and you can help things scale well by either using vector-based images or, for bitmap images, supplying scale-specific versions.
For example, to scale an image referenced in markup as "AppLogo.jpg", you'd include these images:
AppLogo.scale-100.jpg
AppLogo.scale-140.jpg
AppLogo.scale-180.jpg
You can also use folders, e.g. "\scale-140\AppLogo.jpg".
For search result images, the 100% image is the 40x40 pixel version, 140 is 56x56, and 180 is 72x72. Just reference the image as "AppLogo.jpg" and the appropriate version will be used automatically. (You can also detect scale with DisplayProperties.ResolutionScale and manually choose an image.)
Here's a couple of articles with more examples/details:
"Guidelines for scaling to pixel density"
"Quickstart: Using file or image resources"
There's also some scaling discussion in the forums (general, not specific to search) here and here.