CAD with WPF: "Capture" External TabletDevice

CAD with WPF: "Capture" External TabletDevice

• AmitKa

  This is awesome, Michael! Thanks for sharing this in the forum!

  I did receive your eMail and I will reply shortly.

  Thanks, Stefan Wick

  
  
  

• bachie

  Hi Stefan,

  thanks for your code example. First of all / @Stefan: Did you receive my eMail

  Back to topic. To use a transparent above-all InkCanvas and a remap plugin was my first idea too, but this approach has some disadvantages:

  • You cannot access the GUI elements below the transparent layer with your mouse.
  • You are handling the ink twice: in the transparent layer and in the target InkCanvas/InkPresenter, where it should be shown and saved after remapping.

  Anyway, I have found a practical solution in the meantime. It has the following characteristics:

  • You can map your external graphics tablet stylus input to any desired rectangle in your InkCanvas.
  • You can use all of your tablet's size and resolution, if your app window is maximized.
  • No transparent layer is needed.
  • You can still use the mouse normally.
  • A custom stylus cursor is shown at the correct position, i.e. where the ink flows after remapping. (The irritating original stylus cursor is hidden.)

  The most significant construction steps are:

  1. Subclass an InkCanvas (this will become your editor control, e.g. as content of a TabItem)
  2. Constructor: Add Stefans remap plugin to the StylusPlugins collection (initially disabled). (It will serve well for testing purposes. Later you can extent it by a method, which implements your own remapping logic.)
  3. Overwrite some event handling methods and do the following:
  • Capture the stylus and keep it captured in OnStylus->Up,Down,Move,InAirMove using the code line

    if (Stylus.Captured != this) Stylus.Capture(this, CaptureMode.Element);

    This is the important step. It will "bind" the stylus input to your InkCanvas, even if the stylus cursor leaves its bounds. However, it does not work, if the cursor goes beyond the application window. So, in order to make use of the full size and resolution of your graphics tablet, you will need to make your app window maximized.
  • Release it OnLostFocus and OnStylusOutOfRange with the corresponding code line

    if (Stylus.Captured == this) Stylus.Capture(this, CaptureMode.None);

  • OnStylusInAirMove, OnStylusDown: Enable the remap plugin. (Later you could add some logic for not remapping the eraser and e.g. to set the .EditingMode.)

  • optional: OnLostFocus, OnStylusOutOfRange: If it is desired, you can prevent mouse inking by this.EditingMode = InkCanvasEditingMode.Select in these methods (use .Select also as the inital value for the EditingMode of the InkCanvas).

  4. Extension: Hide the original unremapped (and therefore irritating) stylus cursor and show a custom one at the remapped position instead:

  • OnStylusInAirMove: Show and update the remapped stylus cursor: Use an Ellipse child element of Width=Height=2 (XAML defined). Position it, where the ink will flow after remapping. To calculate the coordinates, I am using a public StylusPointCollection calculateRemapping(StylusPointCollection stylusPoints) method in the remap plugin (it just makes the for loop of Stefan's code public). To move the ellipse (here named "remappedStylusCursor") you can use
    remappedStylusCursor.RenderTransform = new TranslateTransform(p.X - remappedStylusCursor.ActualWidth / 2, p.Y - remappedStylusCursor.ActualHeight / 2);

  • It is also advisable to create a new implematation for the .Enabled property in the RemapPlugin, which allows you to centralize the show/hide logic for the real and the remapped cursor. (You can hide the real cursor, by _target.Cursor = Cursors.None; _target.ForceCursor = true; where _target is your InkCanvas (transported into the RemapPlugin as constructor parameter).

  That's it. I hope, it helps others with the same scenario. Any questions

  Michael.

  
  

• B. Ritter

  Hi Michael,

  thank you for your suggestion - I'll add this to our list of features to consider for one of the next releases. In the current version, the focus of the stylus and Tablet features has been on integrated digitizers (e.g. Tablet PC scenarios). With integrated digitizers the input is always mapped to the whole screen.

  In the current version we actually do allow re-mapping stylus input within a given UIElement. To accomplish this you can add your own System.Windows.Input.StylusPlugin object to your UIElement's StylusPlugins collection. In that plug-in you can remap the x,y data (see code sample below). As an example, you could use a transparent, custom InkCanvas in a Window that sits on top of your application. That InkCanvas could remap the stylus input to a specified target region - allowing you to draw on a small area of the app wile using the full area on your digitizer pad.

  Thanks, Stefan Wick

  public class RemapPlugin : StylusPlugIn
  {
  public RemapPlugin()
  {
  _matrix = new Matrix();
  _matrix.Scale(0.5d, 0.5d);
  _matrix.Translate(200d, 200d);
  }

  void OnRawStylusInput(RawStylusInput args)
  {
  StylusPointCollection stylusPoints = args.GetStylusPoints();
  for (int x = 0; x < stylusPoints.Count; x++)
  {
  StylusPoint sp = stylusPoints[x];
  Point pt = (Point)sp;
  pt *= _matrix;
  sp.X = pt.X;
  sp.Y = pt.Y;
  stylusPoints[x] = sp;
  }
  args.SetStylusPoints(stylusPoints);
  }

  protected override void OnStylusDown(RawStylusInput rawStylusInput)
  {
  OnRawStylusInput(rawStylusInput);
  base.OnStylusDown(rawStylusInput);
  }

  protected override void OnStylusMove(RawStylusInput rawStylusInput)
  {
  OnRawStylusInput(rawStylusInput);
  base.OnStylusMove(rawStylusInput);
  }

  protected override void OnStylusUp(RawStylusInput rawStylusInput)
  {
  OnRawStylusInput(rawStylusInput);
  base.OnStylusUp(rawStylusInput);
  }

  private Matrix _matrix;
  }

  class RemapInkCanvas : InkCanvas
  {
  public RemapInkCanvas()
  {
  this.StylusPlugIns.Insert(0, new RemapPlugin());
  }
  }
  

  
  
  
• CAD with WPF: "Capture" External TabletDevice