I have an image in my UWP c# project, that is a transparent png with white foreground. I now want to change the white color from this png image into another color (like blueish).
Example (note that the colored image does not have a transparent background. This is due bad image processing software I'm using and to demonstrate the change of the white color. The Background should be transparent in the end result).
I remember, that this was possible in unity, now I want to do this now in an uwp-app. I thought about using the Lumia ImagingSDK or maybe the Composition API, but do not know, hot to do it with either those.
A way you could do this is using the Composition effect system.
Prerequisites
Targeting at least build 10586 (the Composition API was experimental before this).
While not strictly required, having a basic understanding of the Visual Layer wouldn't hurt. I wrote a blog post that is an introduction to this topic here.
Adding the Win2D nuget package.
Additionally you can look to a gist I wrote here, which is a quick way to get up and running using the Composition API within a XAML app. It demos using an effect as well. Not only that, but it also covers loading an image using the Composition API (with a package I wrote).
Gettings Started
You'll want to do something very similar to the gist, but instead of defining an InvertEffect, you'll want to define both a CompositeEffect and a ColorSourceEffect. What this will do is take an image and use it as a "mask", and then replaces the white in the image with a color. You would define the effect like this:
IGraphicsEffect graphicsEffect = new CompositeEffect
{
Mode = Microsoft.Graphics.Canvas.CanvasComposite.DestinationIn,
Sources =
{
new ColorSourceEffect
{
Name = "colorSource",
Color = Color.FromArgb(255, 255, 255, 255)
},
new CompositionEffectSourceParameter("mask")
}
};
The next step is to create an effect factory:
var effectFactory = compositor.CreateEffectFactory(graphicsEffect, new string[] { "colorSource.Color" });
The second parameter, while not required, is probably what you want in this case. Setting this parameter allows you to change the property after the effect has been compiled, which allows you to set it manually and every new effect brush you create or to animate that property on an effect brush. We'll just be setting it manually. Use your new effect factory to create a new effect brush. Note that this factory can create many new effect brushes with the definition you used above:
var effectBrush = effectFactory.CreateBrush();
However, first you'll need to apply your image as the mask. You can load your image into a surface using a library I wrote called CompositionImageLoader. You can also download it on nuget. After creating a surface with your image, create a CompositionSurfaceBrush and apply it to an effect.
var imageLoader = ImageLoaderFactory.CreateImageLoader(compositor);
var surface = imageLoader.LoadImageFromUri(new Uri("ms-appx:///Assets/Images/HAvng.png"));
var brush = compositor.CreateSurfaceBrush(surface);
effectBrush.SetSourceParameter("mask", brush);
Note that you should probably keep your ImageLoader somewhere, as creating one over and over again will be expensive. All that's left to do is apply the effect brush to a visual and set the color:
visual.Brush = effectBrush;
effectBrush.Properties.InsertColor("colorSource.Color", Colors.Red);
And then you're done! Note that if you want to change the color after this, all you have to do is call the same InsertColor method as above with a new color.
Final Product
In my test code, the method looked like this:
var compositor = ElementCompositionPreview.GetElementVisual(this).Compositor;
var visual = compositor.CreateSpriteVisual();
visual.Size = new Vector2(83, 86);
visual.Offset = new Vector3(50, 50, 0);
_imageLoader = ImageLoaderFactory.CreateImageLoader(compositor);
var surface = _imageLoader.LoadImageFromUri(new Uri("ms-appx:///Assets/Images/HAvng.png"));
var brush = compositor.CreateSurfaceBrush(surface);
IGraphicsEffect graphicsEffect = new CompositeEffect
{
Mode = Microsoft.Graphics.Canvas.CanvasComposite.DestinationIn,
Sources =
{
new ColorSourceEffect
{
Name = "colorSource",
Color = Color.FromArgb(255, 255, 255, 255)
},
new CompositionEffectSourceParameter("mask")
}
};
_effectFactory = compositor.CreateEffectFactory(graphicsEffect, new string[] { "colorSource.Color" });
var effectBrush = _effectFactory.CreateBrush();
effectBrush.SetSourceParameter("mask", brush);
visual.Brush = effectBrush;
effectBrush.Properties.InsertColor("colorSource.Color", Colors.Red);
ElementCompositionPreview.SetElementChildVisual(this, visual);
Note that in this example the visual was attached to this, which was my MainPage. You can attach it to any XAML element. If you'd like to see an example of a custom control that you can define in your XAML markup that creates and then resizes your visual as you resize the control, you can find that here.
To see more Composition related stuff, come on over to our GitHub page! We'll be happy to help you out with any questions you might have about the API.
Related
https://learn.microsoft.com/en-us/bingmaps/v8-web-control/map-control-concepts/pushpins/pushpin-events-example
If I'm trying to make an app on C# using Bing Maps API, is it possible to have pushpin events like in the link above? Some sample code I found lets me put a pushpin like thisenter image description here
This is the section of code that created 4 pushpins(only 2 visible in the picture).
var r = new ImageryRequest()
{
CenterPoint = new Coordinate(coord1, coord2),
ZoomLevel = 5,
ImagerySet = ImageryType.RoadOnDemand,
Pushpins = new List<ImageryPushpin>(){
new ImageryPushpin(){
Location = new Coordinate(45, -120.01),
Label = "hi"
},
new ImageryPushpin(){
Location = new Coordinate(0, 1),
IconStyle = 3
},
new ImageryPushpin(){
Location = new Coordinate(coord1, coord2),
IconStyle = 20
},
new ImageryPushpin(){
Location = new Coordinate(33, -75),
IconStyle = 24
}
},
BingMapsKey = BingMapsKey,
};
It looks like you are using the BingMapsRestToolkit that provides a c# API for accessing the Bing Maps REST services. In particular, you are calling the static imagery service which returns an image, not an interactive map. If you wanted to write some code so that someone could click on a pushpin in the image and you would know it, there would be a decent amount of math involved. It can be done, but you might be better to first consider using an interactive map SDK in your app instead as that would provide a lot more capabilities that would allow the user to interact with the map. Bing Maps has two interactive map SDKs that you can develop with using C#.
There is the Windows UWP map SDK that can be used in Windows apps, and in WPF apps via a XAML island. Here are some useful resources:
https://learn.microsoft.com/en-us/windows/uwp/maps-and-location/
https://learn.microsoft.com/en-us/windows/apps/desktop/modernize/host-standard-control-with-xaml-islands
There is also an older WPF SDK that has fewer capabilities than the UWP SDK. It is generally recommended to use the UWP map control, but if you want to use this, here are the details: https://learn.microsoft.com/en-us/previous-versions/bing/wpf-control/hh750210(v%3dmsdn.10)
I'm using NTwain to scan documents into memory and I have it all working except for one part: When trying to set the size of the page to scan, it scans the entire width and height, rather than just the specified size.
I went and examined the details of NTwain's capabilities on the current source, and found the the ICapSupportedSizes was not supported for any action.
Here's how I'm setting the capabilities (this is on an open, valid source)
_twain.CurrentSource.Capabilities.ICapXResolution.SetValue(new TWFix32() { Whole = 600 });
_twain.CurrentSource.Capabilities.ICapYResolution.SetValue(new TWFix32() { Whole = 600 });
_twain.CurrentSource.Capabilities.ICapPixelType.SetValue(PixelType.BlackWhite);
_twain.CurrentSource.Capabilities.ICapSupportedSizes.SetValue(SupportedSize.USLegal);
_twain.CurrentSource.Capabilities.CapDuplexEnabled.SetValue(BoolType.False);
UPDATE:
I've found out that none of the settings are actually working. I set it as black and white, even if it shows black and white in the settings, it displays in color. Doesn't matter what DPI I set it at either as it defaults to 300 no matter what. I've updated it to grab out the source and use that to change the settings and call Enable, but it still doesn't work.
Any help is appreciated.
Thanks!
Enviornment Information
.NET Framework 4.6.1
Win Forms
C#
NTwain
Scanner: Canon Flatbed Scanner Unit 102
You will need to use the DGImage.ImageLayout property to set the page size in a generally-supported way.
For example:
var ds = _twain.CurrentSource;
ds.Capabilities.ICapUnits.SetValue(Unit.Inches);
ds.DGImage.ImageLayout.Get(out TWImageLayout imageLayout);
imageLayout.Frame = new TWFrame
{
Left = 0,
Right = pageWidthInInches,
Top = 0,
Bottom = pageHeightInInches
};
ds.DGImage.ImageLayout.Set(imageLayout);
Right now, I am trying to develop a program using Mono and GTK# on a Debian (Raspbian) system.
The issue I'm facing is, that, completely randomly, the GUI (generated by the Stetic designer or its dynamic elements) isn't completely drawn, missing either a few characters from a Label-element or whole widgets, mostly those that were dynamically created. This is how it looks on a dialog window: http://imgur.com/oEZRg7c (text is cut off)
As soon as one window shows this issue, every other window has the same issues, sometimes missing whole widgets, even if those were created afterwards. The solution is usually to quit the program and reopen it, as it only randomly occurs.
This is how the constructor of most of my windows looks like (the part after Build() varies):
public partial class ErrorSolutionDialog : Gtk.Dialog
{
public ErrorSolutionDialog (string errorMessage, string solutionHint)
{
this.WidthRequest = this.Screen.Width;
this.HeightRequest = this.Screen.Height;
this.Maximize ();
this.Fullscreen ();
this.KeepAbove = true;
this.DestroyWithParent = false;
Build ();
this.ErrorMessage.Markup = "<b><span size='xx-large'>" + errorMessage + "</span></b>";
this.SolutionHint.Text = solutionHint;
}
}
I wouldn't say that the use of the Stetic designer inside Xamarin Studio/Monodevelop is bad, but as any piece of software it certainly has some issues.
Also, the use of any designer in any software environment will tie you to that development platform forever. Finally, the created source code will be hardly maintainable, apart from completely foreign for you.
That's why I always recommend to get rid of the designer. You can follow a Gtk# tutorial such as this one, and you'll find it is easy and rewarding. And you'll have whole and thorough control of your code.
The basics about Gtk# is creating a layout with VBoxes and HBoxes. For example, the following code creates a layout in which you'll have a TreeView and a TextView in a Dialog.
var swWin1 = new Gtk.ScrollWindow();
var swWin2 = new Gtk.ScrollWindow();
// TextView
this.txtView = new Gtk.TextView();
swWin1.AddWithViewport( this.txtView );
// TreeView
this.tvView = new Gtk.TreeView();
swWin2.AddWithViewport( this.tvView );
// Layout
var hBox = new HBox( false, 2 );
hBox.PackStart( swWin1, true, true, 5 );
hBox.PackStart( swWin2, true, true, 5 );
this.VBox.PackStart( hBox, true, true, 5 );
PackStart() is the method doing the magic in order to add a widget to a layout. The booleans tell Gtk to expand the widget. A ScrollWindow adds scrollbars to any widget.
Finally, my advice is for any action, use Gtk.Action, and call its methods CreateMenuItem() and CreateToolItem() in order to create menu entries and toobar buttons, instead of repeating the same code again and again.
Hope this helps.
I am not an experienced programmer, just need to add a DICOM viewer to my VS2010 project. I can display the image in Windows Forms, however can't figure out how to change the window center and width. Here is my script:
DicomImage image = new DicomImage(_filename);
int maxV = image.NumberOfFrames;
sbSlice.Maximum = maxV - 1;
image.WindowCenter = 7.0;
double wc = image.WindowCenter;
double ww = image.WindowWidth;
Image result = image.RenderImage(0);
DisplayImage(result);
It did not work. I don't know if this is the right approach.
The DicomImage class was not created with the intention of it being used to implement an image viewer. It was created to render preview images in the DICOM Dump utility and to test the image compression/decompression codecs. Maybe it was a mistake to include it in the library at all?
It is difficult for me to find fault in the code as being buggy when it is being used for something far beyond its intended functionality.
That said, I have taken some time to modify the code so that the WindowCenter/WindowWidth properties apply to the rendered image. You can find these modifications in the Git repo.
var img = new DicomImage(fileName);
img.WindowCenter = 2048.0;
img.WindowWidth = 4096.0;
DisplayImage(img.RenderImage(0));
I looked at the code and it looked extremely buggy. https://github.com/rcd/fo-dicom/blob/master/DICOM/Imaging/DicomImage.cs
In the current buggy implementation setting the WindowCenter or WindowWidth properties has no effect unless Dataset.Get(DicomTag.PhotometricInterpretation) is either Monochrome1 or Monochrome2 during Load(). This is already ridiculous, but it still cannot be used because the _renderOptions variable is only set in a single place and is immediately used for the _pipeline creation (not giving you chance to change it using the WindowCenter property). Your only chance is the grayscale _renderOptions initialization: _renderOptions = GrayscaleRenderOptions.FromDataset(Dataset);.
The current solution: Your dataset should have
DicomTag.WindowCenter set appropriately
DicomTag.WindowWidth != 0.0
DicomTag.PhotometricInterpretation == Monochrome1 or Monochrome2
The following code accomplishes that:
DicomDataset dataset = DicomFile.Open(fileName).Dataset;
//dataset.Set(DicomTag.WindowWidth, 200.0); //the WindowWidth must be non-zero
dataset.Add(DicomTag.WindowCenter, "100.0");
//dataset.Add(DicomTag.PhotometricInterpretation, "MONOCHROME1"); //ValueRepresentations tag is broken
dataset.Add(new DicomCodeString(DicomTag.PhotometricInterpretation, "MONOCHROME1"));
DicomImage image = new DicomImage(dataset);
image.RenderImage();
The best solution: Wait while this buggy library is fixed.
I have a WPF .NET 3.5 app that draws transparent tile layers on top of one another using an ImageDrawing and DrawingGroup.
I'm trying to convert this for Windows 8 using Metro.
Microsoft's porting overview at http://msdn.microsoft.com/en-us/library/windows/apps/hh465136.aspx suggests changing System.Windows namespace references to Windows.UI.Xaml. This helped with most things, but I haven't found ImageDrawing and DrawingGroup and didn't find any mention of them in Windows.UI.Xaml.
Do they exist in Metro? If so, where, or if not, what can I use to accomplish an equivalent task?
Here's an example code I'm using:
Windows.UI.Xaml.Controls.Image img = mapGrid.Children.Cast<Windows.UI.Xaml.Controls.Image>().First(e => Grid.GetRow(e) == 2 && Grid.GetColumn(e) == 4);
if (img != null)
{
Uri back = new Uri("tiles/green.png", UriKind.RelativeOrAbsolute);
Windows.UI.Xaml.Media.ImageDrawing background = new Windows.UI.Xaml.Media.ImageDrawing(new Windows.UI.Xaml.Media.Imaging.BitmapImage(back), new Rect(0, 0, 32, 32));
Windows.UI.Xaml.Media.DrawingGroup myDrawingGroup = new Windows.UI.Xaml.Media.DrawingGroup();
myDrawingGroup.Children.Add(background);
// Add one or more foreground tiles here, removed for brevity.
}
Fully qualified namespaces for clarity (I hope).