when I open the application icon of a MFC-project with Visual Studio 2008 there are 13 images (different sizes, different color palette). How would you change the icon of your MFC-application without changing each image?
Thanks!
I like to use the Icons file type extension with Paint.NET. When you open a .ICO file it will prompt you for which image to open - select only the largest / highest-bit image. Make your changes, and then save. You will be prompted for which sizes and bitness to save - select the same list that was present in the original icon.
Using this method, you will get automatically scaled and dithered icons at the smaller sizes. A designer would actually tweak the icons at each size to get the best look, but for most applications this technique produces something that is usable.
An icon resource typically contains many different versions of an icon. For an application icon you would expect 16x16, 32x32, 48x48 and 256x256. You'd also expect to see the 3 smaller ones at 32 bit colour, 8 bit colour 4 bit colour. Or some variant on that. Microsoft publishes guidelines.
Why so many different versions of the same icon?
Well, the icon will be drawn in different settings. On a window caption bar, the 16px version will typically be shown. On the Windows 7 taskbar the 48px version will be shown. When usint ALT+TAB in XP the 32px will be shown. In Vista/7 explorer with ultra large icon view, the 256px will be shown.
To obtain the best visual appearance you must have different versions of the image for different sizes because small raster images aren't easy to scale. What's more, you may present a slightly different version of the icon at different resolutions. For example you may use 3D effects only on larger resolution, partial transparency versions.
When using remote desktop, lower colour depths may be used if the connection is bandwidth challenged.
The MS guidelines go into these issues in detail.
The normal practice of for the graphic designer to design the icon and once you are happy with it the designer will produce rasterised versions for all the required sizes and colour depths, typically in a single .ico file.
Related
Windows 10 has new pin icons in the Jump List. Black and white for different themes.
Old Windows 7 pin icons stayed inside imageres.dll, ID 5100, 5101.
Where are new icons stored? How get they with WinAPI?
Icons have traditionally been raster images. The benefit of raster images is, that they are blazingly fast to render. That speed comes with a downside, namely that raster images only look good at a narrow range of pixel densities. That was great for as long as most displays had a pixel density of 96 PPI (pixels per inch). With pixel densities increasing, raster images stopped being as useful as they used to be. On high-density displays, icons would either render too small, or had to be scaled up with all sorts of visual artifacts.
To address this, Windows 8 introduced font-based icons as the Windows UI Symbol font, that was superseded in Windows 10 by the Segoe MDL2 Assets font. Fonts are vector-based, and can be scaled across a wide range without (or very little) visual artifacts.
While I have not verified, whether the Windows Shell actually does use font icons, the icons you are looking for are available in the Segoe MDL2 Assets font with Unicode code points in the private use area:
U+E718 ("Pin")
U+E77A ("Unpin")
Since Windows 10 version 1903, icon resource files have been relocated to: C:\Windows\SystemResources\imageres.dll.mun
There is now a new extension for these files .mun instead of .mui (which still exist in system32 and syswow64 sub folders.
Also see the answer to the question Can I trust imageres.dll system icons indexes?:
The correct way to get the icons is to use SHGetStockIconInfo. It will tell you where the icon is in the current version of Windows.
If you want the system's current folder icons (which may not be the standard ones due to user customization), use SHGetFileInfo.
The RECT I get from WM_DPICHANGED is not scaled when I move a window between two monitors with different scaling, I get the same dimensions in pixels whichever monitor I move it to (which results in the window being too large for the monitor or too small for its contents). From using Spy++ it looks like this is the case for other applications too. The documentation
suggests that it should be scaled linearly with DPI by default.
My application is using Qt Quick, which sets PROCESS_PER_MONITOR_DPI_AWARE by default. I've also tried SetProcessDpiAwareness(PROCESS_SYSTEM_DPI_AWARE) in my own code, which works as I want in terms of window sizing, but the contents are blurry on the secondary monitor (as you'd expect), and SetProcessDpiAwarenessContext(DPI_AWARENESS_CONTEXT_PER_MONITOR_AWARE_V2) which works like the Qt default but scales the window decorations correctly too. In all 3 cases the window contents are scaled correctly.
I'm wondering if there is an issue with Windows itself, or if an update has changed this behaviour, as no application currently resizes correctly for me, and I'm pretty sure some applications, e.g. Explorer and Edge used to at least. I'm currently using Windows 10 17134.
When I make a new Universal App in Visual Studio 2013 I get a number of graphics files for the logos, splash screens, etc. in the Assets folder, for example Square71x71Logo.scale-240.png. The Package.appxmanifest then maps these files to the various required things. For example Square71x71Logo.scale-240.png is mapped in Package.appxmanifest to Square 71x71 Logo.
The actual file is 170 pixels wide, 170 pixels high, Photoshop reads it as having 72 pixels per inch, and it has an 8 bit colour depth.
What does the .scale-240 part of the file name signify?
I'm replacing the file and I am not sure how to scale-240-ify the new image.
The scale-240 part of the file name is a resource qualifier that indicates that the file is used for 240% DPI systems.
Resource qualifiers allow the app to provide different versions of the same resource for different scenarios and refer them all internally by the base name:
Scaling for different DPI systems: .scale-100, .scale-140, .scale-180, .scale-240
Language (if the image has text in it): .lang-de-DE, .lang-en-us
Contrast (to simplify for high contrast modes): .contrast-high, .contrast-standard
Layout direction (if the image should be different in LTR vs RTL language settings): .layoutdir-RTL, .layoutdir-LTR
DirectX feature level: .DXFL-DX9, .DXFL-DX11
The app can reference the image by its base name (e.g. logo.png) and the version which best matches the current scale, contrast level, language, etc. will be automatically used.
The default phone template provides scale-240 images since high-DPI phones are fairly common and it is generally better to scale down from a larger image than to scale up a small image. Best would be for you to provide multiple resolutions when you replace the stock ones with your own, especially if your images are complicated and don't scale well by default.
See How to name resources using qualifiers (XAML)
Universal apps need to be able to run on very different screens. You cannot predict up front what kind of device the user might have. Big difference if he has a cheap contract phone, an expensive slate or a desktop machine. WinRT helps by automatically scaling your app to match the screen resolution.
Supported scaling percentages for a desktop/slate app are 80, 100, 140 or 180%. For a phone it is 100, 140 or 240%.
Text can auto-scale easily but images do not. They get blurry when they get rescaled, a single pixel in the image no longer coincides with a single screen pixel. Pretty noticeable when the image contains fine line art or text. Scaling down necessarily loses pixels, details may disappear.
So the Visual Assets tab of the manifest editor allows you to select multiple images, each suitable for a specific scaling percentage. You found the -240 version in your phone project's Assets directory, the 240% scaling version that were auto-generated when you created the project. The desktop version has -100 assets by default, 100% scaling.
You may want to add your own. You don't have to.
.scale-xxx appears to refer to pre-scaled image resources.
If you are using a an image logo.png with size 100x100px then logo.scale-240.png should be an image of size 240x240px, i.e. scaled by a factor of 240 percent. The idea behind this concept is apparently to avoid potentially expensive and inaccurate rescaling by the displaying device, by supplying several prescaled images at defined scales.
In your case: 170px / 2.40 = ~71px
See also the corresponding MSDN article. (The linked article is in German, I will leave it to the interested reader to find the matching English one ;-)
I have an icon that has 32 (256x256, 48x48, 32x32, 16x16), 8 (256x256, 48x48, 32x32, 16x16) and 4 (32x32, 16x16) bit icons.
I have specified that I want to use my icon for the form and application itself and for some reason, after I run application and once i am in the application, rather than using nice icon application uses 4bit icon for all areas?
I happen to find this article:
http://www.vbaccelerator.com/home/VB/Tips/Setting_the_App_Icon_Correctly/article.asp
It doesn't seem to explain easily on how to create an RC and RES file
I have found that the best approach is to only have one icon image per icon file. If you expect the icon to show as a 16x16 then provide a .ico file with a 16x16 icon in (say) 8-bit colour. That way VB has to use the icon you provide. It may mean you end up with a few file versions (16x16, 32x32) of the same icon but it makes like much easier.
I need to develop a desktop application which will
1.) have a list of the Different Application logos (Background Transparent) e.g. IE, FIREFOX, CHROME, PHOTOSHOP ETC.
2.) User will take a screenshot of desktop and save the image.
3.) Now my application need to search all the logos in the screenshot image and tell which all logos are present and where.
4.) I used OPENCV, it's working, but when user changes the desktop background & captures screenshot, it's not working as the transparent area of logo is getting the desktop background content.
Can somebody provide a solution or libraries open source, commercial to do this job.
This is easy to do using cross-correlation.
See my answer to this question.
Basically:
Start with desktop image and one template image for each icon
Apply edge detection (e.g. Sobel) to the desktop image and template images.
Throw away the original desktop image and templates, you won't need them anymore cause we'll be using the edge-detected images
For each template
Do template matching as you normally would
Threshold the maximum of the result. If it's above the threshold, you have a match at that position. Otherwise, no match.
If your icons are aligned in a grid on the desktop, you may be able to speed up your processing by only checking those specific grid positions.
EDIT
You can also save a lot of time by knowing which icons to search for. If you have access to the file system, then just look for *.lnk files (or any other extensions you may be interested in) in the directory that corresponds to the desktop (can't remember exactly what it is, but for Windows7 it's something like c:\users\misha\desktop). That will tell you what icons are there on the desktop. This will allow you to shorten your template candidate list before you go and do the template matching.
I like misha's answer and I think it should work for you. But it that doesn't work you could try replacing the transparant pixels in your reference logo with uniformly distributed random noise before trying the match. This will make the transparant pixels irrelevant for any matching computation because they will match just as bad no matter what there is on the desktop in those pixels.
I'm not familiar with the tools you're using, but I'm guessing you have to either:
a) Tell your program to ignore transparent pixels in the icon images during the comparison operation.
OR
b) Tell your program to treat transparent pixels in the icon images as "wildcards" which can be any color.