Resource-Image usability for a Canvas background - c#

I'll be able to program a short program where you can click on a canvas and you'll get the RGB color value for the clicked pixel.
At first i had the graphics on my own HDD with absolute paths.
Problem is, that the program will crashed on each other pc ;)
So, i had created a folder named "Recourcen" within the Project explorer.
Inserted are all the graphics i need.
If i define some images in wpf and write it as follow
...Source="/Resourcen/color_wheel_730.png"
The Image get the right source.
But if i want to use it for a canvas in source, it doesn't run without getting errors.#
canvas_colorpick.Background = new ImageBrush
{
ImageSource = new BitmapImage(new Uri(#"..\..\Resourcen\color_wheel_730.png", UriKind.Relative))
};
I had tested some formattings, but nothing will work in the source code section :(
After some hours of testing i thought i must be put a question to these forum.
Hope somebody can help me with my noob question above.
Greetings from Germany!
Bjoern

Make sure you have set the BuildAction as Resource for added image file in your project.
Also, try using WPF Pack URI to provide the uri source:
canvas_colorpick.Background = new ImageBrush
{
ImageSource = new BitmapImage(new Uri(#"pack://application:,,,/Resourcen/color_wheel_730.png"))
};
Note - Assuming folder Resourcen folder added in same project where XAML resides.

Related

Comparing two images using ImageMagick and C#

I want to compare two images and then generate and save an image that will show all the differences that has been found,
for example:
I am using ImageMagick: https://magick.codeplex.com/
But they don't have full documentation for C#.
I found only: http://www.imagemagick.org/Usage/compare/
This code for example show value from 0-1 that represent how similar the pictures are:
MagickImage img1 = new MagickImage(#"C:\test\Image1.jpg");
MagickImage img2 = new MagickImage(#"C:\test\Image2.jpg");
double diff = img1.Compare(img2,new ErrorMetric());
But how can I compare the images using ImageMagick and then save the result as shown in the example above and in their website?
Update:
With the help of dlemstra I wrote the following code and I generate images that suppose to show the difference as in the example above.
MagickImage img1 = new MagickImage(#"C:\test\Image1.jpg");
MagickImage img2 = new MagickImage(#"C:\test\Image2.jpg");
MagickImage img3 = new MagickImage(#"C:\test\Image3.jpg");
MagickImage img4 = new MagickImage(#"C:\test\DiffImage.jpg");
MagickImage img5 = new MagickImage(#"C:\test\DiffImage.jpg");
var imgDiff = new MagickImage();
img1.Compare(img2, new ErrorMetric(), imgDiff);
imgDiff.Write(#"C:\test\Diff4.jpg");
img1.Compare(img3, new ErrorMetric(), imgDiff);
imgDiff.Write(#"C:\test\Diff5.jpg");
img1.Compare(img4, new ErrorMetric(), imgDiff);
imgDiff.Write(#"C:\test\Diff6.jpg");
img5.Compare(img4, new ErrorMetric(), imgDiff);
imgDiff.Write(#"C:\test\Diff7.jpg");
The Strange results are: When I compare the following two images with the marked only difference:
This is the result that I get (And not as the example above from "imageMagick"
You will need to use one of the other overloads of the Compare method for this. The example below demonstrates how to do this:
using (var img1 = new MagickImage(#"C:\test\Image1.jpg"))
{
using (var img2 = new MagickImage(#"C:\test\Image2.jpg"))
{
using (var imgDiff = new MagickImage())
{
double diff = img1.Compare(img2, new ErrorMetric(), imgDiff);
imgDiff.Write(#"C:\test\Diff-Image1-Image2.jpg");
}
}
}
But when you are working with jpeg images (they are lossy) you probably also want to set the ColorFuzz on the first image:
img1.ColorFuzz = new Percentage(5); // adjust this value for your situation
This will make it so that pixels that are almost the same will also match.
Lessons Learned:
Wanted to add some important notes so others hopefully avoid the pitfalls which I ran into when testing out ImageMagick (or any compare tool) for the first time.
Beware of editing in Windows Paint in general.
Don’t edit a *.png with a transparent background in Windows paint and expect a good compare. Windows Paint doesn’t handle transparent background and the png you edited in Paint will now have a white background. The Image will look exactly the same to the naked eye but the image comparers know better.
If you have SnagIt, this is a better tool for making edits to an image when you want to put a image compare tool to the test.
Conclusion:
The code written by #dlemstra does work as expected. Just make sure that when you are testing out the first time that the second image (which you modified) didn’t get unintentionally modified by the image editor that you use. This is a general warning for when you are testing out any image compare tool for the first time to see if you want to use it or not.
Examples:
Example 1: Transparent png + Windows Paint
Downloading a transparent image, making and edit to it in Paint which unintentionally also changes background to white instead of transparent.
Just by opening, then saving the second image in Paint without making any edits to the image will cause the diff to look like this:
I couldn’t figure out what was going on until I compared with Beyond Compare:
Example 2: Complex *.jpg + Windows Paint
Windows Paint was also not good at keeping complex images identical between saves:
The big red areas were changes I had made, but the thin outlines of the roses were changes that Windows Paint made to the picture
Even when I made no changes at all and just open, saved and closed the second image in Paint (and the original image was an image which had also been saved in Paint), Paint still made undesired edits to the picture (dark red dots in image):
I then had an original image which had been saved in Paint and copied this image, opened the second image in snagIt, saved the second image in snagit, and then closed the image and compared the two images (which should have been identical). However, it seemed that snagIt made it’s own modifications to the original ‘Paint saved’ image:
Lastly, I copied the ‘Snagit saved’ image, opened this second image also in SnagIt, made an edit to the second image, saved the image in SnagIt and then closed the image. SnagIt did not make any modifications to this image and the compare showed exactly what I expected:
Lastly:
Most information you find about ImageMagick pertains to using it via the command line. You can add the Magick.Net nuget to your C# project in Visual Studio by installing it via the NuGet Package Manager

Using a resource image in a library different from the main project

I have a WPF program with two libraries
now inside I have a gray resource background both in the main program and HelperLib. But additionally in the HelperLib I have a red background I want to use.
Now when I want to change the background of a window with:
switch (bubbleType)
{
case eBubbleType.ERROR:
bw.btText.Background = new ImageBrush(new BitmapImage(new Uri("pack://application:,,,/Resources/Images/gradientWallpaper_RED.jpg"))); <-----I want to use this one
break;
default:
bw.btText.Background = new ImageBrush(new BitmapImage(new Uri("pack://application:,,,/Resources/Images/gradientWallpaper.jpg")));
break;
}
but I get an image not found exception on the RED image but not on the other one.
I suspect that, when using the gray gradient it's not using the one in the lib but the one in the main program since I see that the resource is related to the assembly not to the project.
Both images have the same properties as in picture:
Thanks for helping
You would have to use a Resource File Pack Uri with the name of the referenced assembly:
new Uri(
"pack://application:,,,/HelperLib;component/Resources/Images/gradientWallpaper_RED.jpg")

Programmatically change jpg in picturebox

I have a simple application in winforms where I need to change the image depending on an if statement. The statement is triggering because other things are also happening. I've looked at the following examples:
Dynamically set Image of a Picturebox in winforms applications?
Change PictureBox's image to image from my resources?
Setting a picture from my Resources programmatically to a PictureBox
and none of these have led me to a solution to why I'm unable to change the image.
Here's what I have tried:
pictureBox1.Image = global::KatReminder.Properties.Resources.angry_orange_cat;
pictureBox1.Refresh();
pictureBox1.Load();
pictureBox1.Image = Image.FromFile(#"\Resources\angry-orange-cat.jpg");
pictureBox1.BackgroundImage = KatReminder.Properties.Resources.angry_orange_cat;
pictureBox1.Refresh();
pictureBox1.Load(#"\Resources\angry-orange-cat.jpg");
In the two examples with files, the full path I'm using has been truncated for this example.
You should try calling pictureBox1.Invalidate(). Usually that works for me when I need to make sure something gets repainted.

Is it possible to bypass a "Specified Visual is already a child of another Visual or the root of a CompositionTarget" exception?

I want to move an Image (my hero) in a Grid of Images. When I remove the corridor it moves to and place the hero Image there, the code executes fine (the hero is the only unique image in the grid). But when I place a corridor Image on the hero's previous location, I receive the above mentioned error. I understand that it is because I have like 50 other corridor Images as Children in the Grid with the name "corridorImg".
int newTileIndex = Image_Grid2.Children.IndexOf(heroImg) + map.mapWidth - 1;
int currentTileIndex = Image_Grid2.Children.IndexOf(heroImg);
Image_Grid2.Children.RemoveAt(currentTileIndex);
Image_Grid2.Children.RemoveAt(newTileIndex);
// Tried to solve issue by creating new Image by using clone of the corridor Image, but same exception
Image oldTileImage = new Image();
oldTileImage = corridorImg;
Image_Grid2.Children.Insert(currentTileIndex, oldTileImage);
Image_Grid2.Children.Insert(newTileIndex, heroImg);
I agree with #HighCore that you should use MVVM for this.
Your specific issue though is that you didn't actually clone the Image, you just made a new one and then overwrote the variable it was assigned to. In your second-to-last line, you're re-inserting the original corridorImg, you're just calling it oldTileImage. To truly clone the Image, you need to copy its properties over. If you're using image sources, that would look like:
Image corridorImgClone = new Image();
corridorImgClone.Source = corridorImg.Source;

How to change image location

I'm developing WPF with C# and I have this code to get the picture angry.png from the smiles folder in the output folder (e.g. bin\debug):
BitmapImage bitmap = new BitmapImage(
new Uri(#"smiles/angry.png",
UriKind.RelativeOrAbsolute));
But I want to get the picture angry.png from another location like Resources\Image\smiles\angry.png. Could you tell me how to change the folder location so that this would work?
In that case ..\..\Resources\Image\smiles\angry.png should be sufficient.

Categories

Resources