Is there some way to put a backgroundimage on SignaturePadView?

manuelgalindogmanuelgalindog MXMember ✭✭
edited December 2016 in General

Hello,

i'm using this SignaturePadView https://github.com/aritchie/acr-xamarin-forms/tree/master/Acr.XamForms.SignaturePad, till now i'm able to show an image as background and the SignaturePadView for user signature front of this, my problem comes because i need to send the user signature and the image to the server, so..

I wonder if there's some way to save an image as background on the SignaturePadView.

Here's the code of my class, i will add some comments to explain it clearly.

namespace MyNamespace
{
public partial class Mypage : ContentPage
{
double width;
double height;
Reservation reservation;
Signature signature;
Image padImage;
SignaturePadView padView;

    public Mypage ()
    {
        InitializeComponent ();
        NavigationPage.SetHasNavigationBar (this, false);
    }

    protected override void OnBindingContextChanged ()
    {

*** GET THIS OBJECT FROM THE PREVIOUS PAGE ***
reservation = (Reservation)BindingContext;
}

    protected override async void OnAppearing ()
    {
        base.OnAppearing ();
        var load = UserDialogs.Instance.Loading (L10n.Localize ("Loading"));
        try {

*** CREATE THE IMAGE ***
var image = new Image {
Aspect = Aspect.AspectFit,
HorizontalOptions = LayoutOptions.FillAndExpand,
VerticalOptions = LayoutOptions.FillAndExpand

            };

*** HERE I GET THE "SIGNCARD", IT'S A FORMAT PROVIDED BY MY WEBSERVICE, INSIDE THERE IS A BYTES ARRAY ENCODED AND ZIPPED***

            signature = await App.Service.GetSignCard (reservation.Code);

*** DECODED THE IMAGECONTENT PROPERTY ***

            var bytesFrom64 = Convert.FromBase64String (signature.ImageContent);

*** UNZIP THE BYTE ARRAY ***

            using (var compressed = new MemoryStream (bytesFrom64))
            using (var gzStr = new GZipStream (compressed, CompressionMode.Decompress))
            using (var imgStr = new MemoryStream ()) {
                gzStr.CopyTo (imgStr);
                var bytesFromStream = imgStr.ToArray ();

*** SET THE IMAGE CONTENT TO THE MAIN IMAGE ***
image.Source = ImageSource.FromStream (() => new MemoryStream(bytesFromStream));
}

            PadImageLayout.Children.Add (image,
                                         yConstraint: Constraint.Constant (0),
                                         xConstraint: Constraint.Constant (0),
                                         widthConstraint: Constraint.RelativeToParent ((parent) => { return parent.Width; }),
                                         heightConstraint: Constraint.RelativeToParent ((parent) => { return parent.Height; })
                                        );

                padView = new SignaturePadView {
                HorizontalOptions = LayoutOptions.FillAndExpand,
                VerticalOptions = LayoutOptions.FillAndExpand,
                BackgroundColor = Color.Transparent,
                CaptionText = string.Empty,
                CaptionTextColor = Color.Transparent,
                ClearText = "Clear",
                ClearTextColor = Color.Black,
                PromptTextColor = Color.Transparent,
                SignatureLineColor = Color.Transparent,
                StrokeColor = Color.Black,
                StrokeWidth = 2
            };
            PadImageLayout.Children.Add (padView,
                                         yConstraint: Constraint.Constant (0),
                                         xConstraint: Constraint.Constant (0),
                                         widthConstraint: Constraint.RelativeToParent ((parent) => { return parent.Width; }),
                                         heightConstraint: Constraint.RelativeToParent ((parent) => { return parent.Height; })
                                        );
            load.Hide ();
        } catch (Exception ex) {
            load.Hide ();
            Debug.WriteLine (ex.Message);
        }
    }

    /// <summary>
    /// Save the sign and send it to the server
    /// </summary>
    /// <param name="sender">Sender.</param>
    /// <param name="args">Arguments.</param>
    void OnSavedClicked (object sender, EventArgs args)
    {
        var load = UserDialogs.Instance.Loading (L10n.Localize ("Loading"));
        try {
            var sign = new Signature {
                CompressionTypeSpecified = signature.CompressionTypeSpecified,
                EncodingTypeSpecified = signature.EncodingTypeSpecified,
                ImageTypeSpecified = signature.ImageTypeSpecified,
                CompressionType = signature.CompressionType,
                EncodingType = signature.EncodingType,
                ImageType = signature.ImageType,
                FileName = signature.FileName,
                ImageContent = ""
            };

            var img = padView.GetImage (ImageFormatType.Png);

            load.Hide ();
        } catch (Exception ex) {
            load.Hide ();
            Debug.WriteLine (ex.ToString ());
        }
    }
    }

}

As u can see, all code in the OnAppearing() method it's just construction of the view, i'm able to create the SignaturePadView and put it just in front of the image, furthermore i can decompress and show the image just how i want to.

The OnSavedClicked() method creates an new instance of a Signature object and set the properties of the Signature object that i get on the OnAppearing() method, is in this point where i'm stuck, i need to this object (the object i will send it to server) also contains the image&signature

So, if there is a way to set an imagebackground on the signaturepadview, that be the better solution, i guess..
Then, i'm thinking about use some screenshot tools libraries, but this won't be the better way to do it. The better case it's send the image at it is, not an screenshot.

Any ideas to send the image and the signature at same bytearray to the server?
PS: I'm working on Xamarin Studio with Xamarin Forms, it's an application for iPads/Tablets. If you need to i give you more details of my code, just tell me :)

Thanks in advance :)

Manuel.

Sign In or Register to comment.