code examples for HueShiftTool usage?

[Rob A.]

After reading the documentation on the ImageEditor I find a significant lack of documentation on how to use the many "commands".  In my case the HueShiftTool?

Image Editor Docs

I'd love to see code samples contained in the documentation rather than links to generic projects that need to be installed.  I usually just need the basic "idea" behind how to implement, but I see nothing on "HueShiftTool".  There is an "Effect" property but no idea what I need to do beyond that?

My objective is to simply apply a Hue Shift to the loaded image in the Image Editor.  I don't need all the UI aspects, just execute a hue shift on the loaded image.

Any suggestions welcome.

Cheers, Rob.

[Martin Ivanov]

Hello Rob,

I've added an item for improvement of the RadImageEditor documentation in our internal backlog. You can also find your Telerik points updated.

Basically, the image editor tools are activating specific UI elements that contain settings which are applied over the image after the tool changes are committed. Most tools themselves don't have an API for applying the corresponding changes and in most cases you need to do this via the UI or to create a custom tool. However, for the HueShiftTool there is a public property which you can use in order to apply the shift. To activate a tool you can use the ExecuteTool() method of RadImageEditor. Then, you can apply the changes with the CommitTool() method.

var tool = new HueShiftTool();
var effect = (HueShiftEffect)tool.Effect;
effect.HueShift = 30;
imageEditor.ExecuteTool(tool);
imageEditor.CommitTool();

I hope this helps.

Regards,
Martin Ivanov
Progress Telerik

[Rob A.]

Hi Martin,

Perfect, exactly what I needed ... a small snippet to get me in the right direction.

FYI, I do prefer this small snippet of code answers vs. linking to a full project/solution download ... snippets are much more helpful/efficient for me needs.

Cheers, Rob.

[Martin Ivanov]

Hello Rob,

Thank you for the feedback. We will keep this suggestion in mind when updating and creating documentation.

Regards,
Martin Ivanov
Progress Telerik

[Rob A.]

Hi Martin,

I've got your sample working but not in a way I'd like it to work.  I'm basically working with Hue Shift and Saturation effects.  

I started going down the path of using RadImageEditorUI but soon discovered it has some issues I can't overcome when using XAML/StyleManage (themed):

1.  Can't remove the Redo/Undo

2.  Can't remove the Zoom/Scaling feature

3.  Unable to actually access the values being changed by each command tool

4.  command tool values reset when I select a different command tool

So I went back to the RadImageEditor and used your suggestion above but I guess I don't really understand how it works and my search thru your documentation ... unfortunately your documentation is SEVERELY lacking for these two controls.  Some of your documentation links send me to a silverlight application which in turn prompts me to install silverlight.  Other links send me to GitHub where I've downloaded the "master wpf" solutions but those solutions don't really demonstrate anything ... mostly just empty shell reference (nothing like what you listed above)??

But now with the RadImageEditor when I do a .CommitTool() (from you example) I have two more issues:

1.  Hue Shift text, slider, textbox and (ok, cancel, reset) button appear on top of the loaded image (see attached)?

2.  How do I operate both Saturation and Hue controls at the same time?

Do you folks have an up-to-date solution that demonstrates ALL of the features ... full XAML and code behind ... of the RadImageEditor and RadImageEditorUI??  Please don't point me to your existing links referenced in your online documentation as they are NOT current nor helpful.

Cheers, Rob.

[Martin Ivanov]

Hello Robin,

The features you are looking for are not presented via the API of the controls so you won't find resources on them. The SDK examples and the documentation show mostly built-in features. Regardless this, I agree that the RadImageEditor resources need improvement, so we will work on this fact.

 For the issues at hand, let address them in the order listed by you.

RadImageEditorUI:

1. Can't remove the Redo/Undo
   
   I already replied in the forum where you ask about this. 
   
2. Can't remove the Zoom/Scaling feature
   
   The approach here will be almost the same as in the Redo/Undo case, but you will need to target a different element. In other words, you can use code-behind or modify the RadImageEditorUI ControlTemplate to hide the ZoomScroller control. To prevent the scrolling using the mouse wheel, you can set the AllowMouseWheelScaling property of RadImageEditor to false. To access the RadImageEditor instance used in RadImageEditorUI, you can use the ImageEditorLoaded event and ImageEditor property of RadImageEditorUI.
   
3. Unable to actually access the values being changed by each command tool
   
   The settings of the tools are contained in their API or in the API of the corresponding settings UI control. Whether, you are using RadImageEditorUI or RadImageEditor you will need to go through the tools in order to access those settings. Additionally, in RadImageEditorUI, you have access the RadImageEditor. 
   
   If you have a concrete value in mind, you can share it and I will see if there is a convenient API for it. 
   
4. command tool values reset when I select a different command tool
   
   I already replied in the forum where you posted this question.

RadImageEditor:

1. Hue Shift text, slider, textbox and (ok, cancel, reset) button appear on top of the loaded image (see attached)?
   
   The ExecuteTool() method of RadImageEditor, activates the tool settings UI whether you are using RadImageEditorUI or only the RadImageEditor. The CommitTool() method executes the tool and hides the settings UI. What I've missed in the code example from my last reply is that the parameterless overload of the CommitTool() method is re-executing the tool automatically. To avoid this and keep the settings UI hidden, you can use the other method overload and pass bool argument to indicate the the tool should not get re-executed. I also changed the lines order in the snippet by mistake, please excuse me for this. The HueShift needs to be set after the ExecuteTool() call.
   

   var tool = new HueShiftTool();
   var effect = (HueShiftEffect)tool.Effect;
   imageEditor.ExecuteTool(tool);
   effect.HueShift = 230;
   imageEditor.CommitTool(false);

2. How do I operate both Saturation and Hue controls at the same time?
   
   You can use the ExecuteTool --> CommitTool methods sequence to execute the hue and saturation tools one after another. If you want to have two sliders in the tool settings UI, you can create a custom tool (deriving from ToolBase) with a custom settings UI, get in the GetSettingsUI method override in the tool. Additionally, you can manually update the RadBitmap  instance (get through the Image property of RadImageEditor) used in RadImageEditor, using the corresponding HueShiftEffect or SaturationEffect using a RenderTargetBitmap and the original RadBitmap. Here is a sample method showing one way to do this:
   

   public static RadBitmap ApplyEffect(RadBitmap source, Effect effect)
   {
   	Image renderImage = new Image();
   	renderImage.Effect = effect;
   	renderImage.Source = source.Bitmap;
   	renderImage.Measure(new Size(double.PositiveInfinity, double.PositiveInfinity));
   	renderImage.Arrange(new Rect(0, 0, renderImage.DesiredSize.Width, renderImage.DesiredSize.Height));
   
   	RenderTargetBitmap renderTarget = new RenderTargetBitmap(source.Width, source.Height, source.Bitmap.DpiX, source.Bitmap.DpiY, PixelFormats.Pbgra32);
   	DrawingVisual visual = new DrawingVisual();
   	using (DrawingContext drawingContext = visual.RenderOpen())
   	{
   		VisualBrush brush = new VisualBrush(renderImage);
   		drawingContext.DrawRectangle(brush, null, new Rect(0, 0, source.Width / (source.Bitmap.DpiX / 96d), source.Height / (source.Bitmap.DpiY / 96d)));
   	}
   	renderTarget.Render(visual);
   	return new RadBitmap(new WriteableBitmap(renderTarget));
   }

Regards,
Martin Ivanov
Progress Telerik

[Rob A.]

Hi Martin,

Thanks for the clarification on RadImageEditor Hue Shift / Saturation.  I actually went back to using RadImageEditorUI approach that is working well enough for my needs.  But I appreciate you providing alternative to my original post using the RadImageEditor ... I may return to it pending user feedback once my application goes to Beta stage.

Cheers, Rob.