Get a Jumpstart with our Sample Apps
Results 1 to 17 of 17

Thread: Setting the Ink Control Background Image

  1. #1
    Alpha Software Employee Beta Spark's Avatar
    Real Name
    Sarah Mitchell
    Join Date
    Jul 2015
    Posts
    385

    Default Setting the Ink Control Background Image

    The UX Component's Ink Control is highly customizable. Every aspect of how the Ink control is rendered can be customized. In the video below, we explain how to set the background image for an Ink control in a UX Component.

    Setting the Ink Control Background Image



    Video Link: http://www.alphasoftware.com/video-library/?v=5066

    Additional Resources

    Check out these other videos and threads about the ink control and rich media capture:

    • Introduction to the Ink Control: The Ink Control is a new data bound control for collecting "ink" information - ie, drawings.
    • Displyaing and Capturing Ink using the Ink Control: Learn how to configure the Ink Control for use in a UX Component, including important details about styling the control.
    • Ink Control Capabilities: A thread discussing some of the ink control's capabilities and how the data for the image is captured and stored.
    • The Ink Data Type: Learn how to store and work with the Ink data type in Grids and Reports.
    • Rich Media: Ink isn't the only data on our minds at Alpha. Tools for capturing video and audio are also in the works. Visit this thread to find out how you can get access to these features.
    Sarah Mitchell

    Looking for answers? Try our documentation.
    If you can't find something, let us know!

  2. #2
    "Certified" Alphaholic CharlesParker's Avatar
    Real Name
    Charles Parker
    Join Date
    Dec 2012
    Location
    New Orleans, LA
    Posts
    1,681

    Default Re: Setting the Ink Control Background Image

    I followed the image annotation video, but for some reason the annotate html button does not show, the capture button does. Any idea why that might be?
    NWCOPRO Nuisance Wildlife Control Software-My Application: http://www.nwcopro.com OR my Developer Chat
    Please ignore and excuse ANY posts I make in the desktop section - as an idiot, I am prone to reply in the wrong section - and I don't know diddly about the AS Desktop development.

  3. #3
    Alpha Software Employee Beta Spark's Avatar
    Real Name
    Sarah Mitchell
    Join Date
    Jul 2015
    Posts
    385

    Default Re: Setting the Ink Control Background Image

    Quote Originally Posted by CharlesParker View Post
    I followed the image annotation video, but for some reason the annotate html button does not show, the capture button does. Any idea why that might be?
    Can you post your component so I can take a look?

    Thanks
    Sarah Mitchell

    Looking for answers? Try our documentation.
    If you can't find something, let us know!

  4. #4
    "Certified" Alphaholic CharlesParker's Avatar
    Real Name
    Charles Parker
    Join Date
    Dec 2012
    Location
    New Orleans, LA
    Posts
    1,681

    Default Re: Setting the Ink Control Background Image

    Yes, I am updating to the latest pre-release (cant remember which one I was on, so that could be an issue. I will post back if I still cannot fig it out
    NWCOPRO Nuisance Wildlife Control Software-My Application: http://www.nwcopro.com OR my Developer Chat
    Please ignore and excuse ANY posts I make in the desktop section - as an idiot, I am prone to reply in the wrong section - and I don't know diddly about the AS Desktop development.

  5. #5
    "Certified" Alphaholic CharlesParker's Avatar
    Real Name
    Charles Parker
    Join Date
    Dec 2012
    Location
    New Orleans, LA
    Posts
    1,681

    Default Re: Setting the Ink Control Background Image

    Ok, so I downloaded the example component sample component, opened it and edited it to my Mysql DB, and I am getting the same results. Is it because my image in my DB is just a normal jpg stored in the table as a filename? In other words I do not USE base64 as the Data type in Image props in my list control. My data type is Name and <value> as the Image file transformation template.
    That seems to be the only difference. I attached my component in the hopes you can guide me as well as point out to others what I am doing wrong so maybe they can avoid the pitfall I am experiencing.
    My connection string isnt there but the database holds the following value for the image: https://www.nwcopro.com/Images/Invoi...dd284bf491.jpg
    The image is there, shows up in the list etc, however the Annotate image button that should be there isn't so either I am over looking something or maybe I shouldn't be able to DO something to get to this - anyways, thanks for helping me out!

    BTW, I built one from scratch and got to this exact point after watching the video. One thing thats pretty cool about the new form veiw controls is that if your already somewhat familiar with Alpha they are easy to pick up and understand! I think my end users will benefit.
    Charles
    Attached Files Attached Files
    NWCOPRO Nuisance Wildlife Control Software-My Application: http://www.nwcopro.com OR my Developer Chat
    Please ignore and excuse ANY posts I make in the desktop section - as an idiot, I am prone to reply in the wrong section - and I don't know diddly about the AS Desktop development.

  6. #6
    "Certified" Alphaholic CharlesParker's Avatar
    Real Name
    Charles Parker
    Join Date
    Dec 2012
    Location
    New Orleans, LA
    Posts
    1,681

    Default Re: Setting the Ink Control Background Image

    Well I still do not have this working as expected however it is known to me now that unless my image is base64 encoded the "annotate" button is not there.
    I took my jpeg and converted it to base64 and inserted the code into a longtext field in my database.

    So I think my question is can I use a filename reference (<value>)?

    If not it should not be an option, if it is ok then I must be overlooking something - When I get this working and fully understand it - this will be pretty cool stuff!
    I am on 3686 V4.2 btw.
    NWCOPRO Nuisance Wildlife Control Software-My Application: http://www.nwcopro.com OR my Developer Chat
    Please ignore and excuse ANY posts I make in the desktop section - as an idiot, I am prone to reply in the wrong section - and I don't know diddly about the AS Desktop development.

  7. #7
    "Certified" Alphaholic CharlesParker's Avatar
    Real Name
    Charles Parker
    Join Date
    Dec 2012
    Location
    New Orleans, LA
    Posts
    1,681

    Default Re: Setting the Ink Control Background Image

    UPDATE: deleted my list and form view and redid it with the image properties as base64 - I finally got it working! YAY!

    SO, what do I do about my fields that all have the filename reference to a regular jpg? I did not know about the base64 requirements. If it is indeed a REQUIREMENT due to the nature of annotation then the option to to use a name reference and a <value> instead of base64 should not be allowed as an option in the form view.

    My guess is I am doing something wrong!

    Cheers~
    NWCOPRO Nuisance Wildlife Control Software-My Application: http://www.nwcopro.com OR my Developer Chat
    Please ignore and excuse ANY posts I make in the desktop section - as an idiot, I am prone to reply in the wrong section - and I don't know diddly about the AS Desktop development.

  8. #8
    "Certified" Alphaholic CharlesParker's Avatar
    Real Name
    Charles Parker
    Join Date
    Dec 2012
    Location
    New Orleans, LA
    Posts
    1,681

    Default Re: Setting the Ink Control Background Image

    It seems to me that to play with this you will need to be doing something to base64 encode and decode, etc.
    So I manually added a base64 encoded file with the prefix. This worked fine on my desktop web browser, same application on my ipad - I could not view the image. Not sure why, all I can think is that the ink control works properly only in a PG build.

    So I hope I have provided enough detail through this discourse that someone with more knowledge than I can guide me and correct me as to what my misconceptions are, etc.
    It seems I still have a waaay to go in the learning curve on this. I will continue to post my observations on this until I get it working as expected...
    NWCOPRO Nuisance Wildlife Control Software-My Application: http://www.nwcopro.com OR my Developer Chat
    Please ignore and excuse ANY posts I make in the desktop section - as an idiot, I am prone to reply in the wrong section - and I don't know diddly about the AS Desktop development.

  9. #9
    "Certified" Alphaholic CharlesParker's Avatar
    Real Name
    Charles Parker
    Join Date
    Dec 2012
    Location
    New Orleans, LA
    Posts
    1,681

    Default Re: Setting the Ink Control Background Image

    WOW - so close! I got everything working EXCEPT the fact that I cannot save the Captured Image! In other words, I click capture and save and everything is saved EXCEPT the base64 encoded file.

    This is pretty cool but I gotta say it was difficult and seems to be a series of steps that need to be done in order, anything else caused missteps for me - however the result is so far awesome.

    So, at this point the ipad does indeed have no trouble with the base64 and it is working both on the PC and the ipad in the chrome browser, not sure why the image didnt get saved when the annotation did, but again I am still working on this.
    What I have found is you shoudl create everything about your list control FIRST then create the form view. I worked over those two out of order so many times I finally deleted both saved the component and created two NEW objects with different variable names (just in case) a NEW list control first - setup everything about it, then I setup the form view. A couple of my attempts I realized that re-selecting the "list" seemed to reset everything but in the end deleting the controls and creating NEW ones were the best effort in starting over.

    For the most part, Alpha really takes the time to make it simple for the average "I can't write code" guy and in the end it is ME that looks really good out in front of my collegues saying yeah lemme show you what we can do here...this makes is so worht the effort!

    Hopefully I will be posting my next post to claim I FINALLY got it 100% the way I want it!
    NWCOPRO Nuisance Wildlife Control Software-My Application: http://www.nwcopro.com OR my Developer Chat
    Please ignore and excuse ANY posts I make in the desktop section - as an idiot, I am prone to reply in the wrong section - and I don't know diddly about the AS Desktop development.

  10. #10
    "Certified" Alphaholic CharlesParker's Avatar
    Real Name
    Charles Parker
    Join Date
    Dec 2012
    Location
    New Orleans, LA
    Posts
    1,681

    Default Re: Setting the Ink Control Background Image

    Welp - finally GOT IT!
    I must say I was a bit intimidated and frustrated for awhile, but learning the new editors, the new form view controls in a day was actually NOT BAD. I do think it was because of my understanding of other areas of Alpha that some things just came to me. There are some new action javascript events for FORM VIEW that made a big difference as well.
    My advice to anyone wanting to try these new controls - first get your list right, then create your editor sets and editors, then create your form view control.
    One word of advice, if you rename the variable for the editor - the save buttons will reference the old name (easily modified after, but I didn't realize it for awhile)

    Secondly, check out the Form view actions in the builder for like an onclick event, made things much simpler.

    have a great day.
    NWCOPRO Nuisance Wildlife Control Software-My Application: http://www.nwcopro.com OR my Developer Chat
    Please ignore and excuse ANY posts I make in the desktop section - as an idiot, I am prone to reply in the wrong section - and I don't know diddly about the AS Desktop development.

  11. #11
    Alpha Software Employee Beta Spark's Avatar
    Real Name
    Sarah Mitchell
    Join Date
    Jul 2015
    Posts
    385

    Default Re: Setting the Ink Control Background Image

    Quote Originally Posted by CharlesParker View Post
    Welp - finally GOT IT!
    I must say I was a bit intimidated and frustrated for awhile, but learning the new editors, the new form view controls in a day was actually NOT BAD. I do think it was because of my understanding of other areas of Alpha that some things just came to me. There are some new action javascript events for FORM VIEW that made a big difference as well.
    My advice to anyone wanting to try these new controls - first get your list right, then create your editor sets and editors, then create your form view control.
    One word of advice, if you rename the variable for the editor - the save buttons will reference the old name (easily modified after, but I didn't realize it for awhile)

    Secondly, check out the Form view actions in the builder for like an onclick event, made things much simpler.

    have a great day.
    Hi Charles,

    Looks like you figured it out before I had a chance to look at your project. Glad you figured it out!

    It sounds like maybe our documentation on how to do this task could be improved. Do you have any suggestions? I'll take a look at the base64 issue you encountered.

    Thanks!
    Sarah Mitchell

    Looking for answers? Try our documentation.
    If you can't find something, let us know!

  12. #12
    "Certified" Alphaholic CharlesParker's Avatar
    Real Name
    Charles Parker
    Join Date
    Dec 2012
    Location
    New Orleans, LA
    Posts
    1,681

    Default Re: Setting the Ink Control Background Image

    At this point it would have been better for me to watch the videos on the editor sets and editors as they relate to lists would have been smart, but being a let's just do this kinda guy who reads the instructions after.... Well I could've done this in less time, lol
    NWCOPRO Nuisance Wildlife Control Software-My Application: http://www.nwcopro.com OR my Developer Chat
    Please ignore and excuse ANY posts I make in the desktop section - as an idiot, I am prone to reply in the wrong section - and I don't know diddly about the AS Desktop development.

  13. #13
    Member Bitzer's Avatar
    Real Name
    Lachlan Chambliss
    Join Date
    Jul 2016
    Posts
    2

    Default Re: Setting the Ink Control Background Image

    Hi,

    I don't know if this helps, it is also based off the videos, I just put this doc on annotation in the form view together last week.

    http://documentation.alphasoftware.c...20Controls.xml

  14. #14
    "Certified" Alphaholic CharlesParker's Avatar
    Real Name
    Charles Parker
    Join Date
    Dec 2012
    Location
    New Orleans, LA
    Posts
    1,681

    Default Re: Setting the Ink Control Background Image

    whoops - reposted...
    Last edited by CharlesParker; 09-18-2016 at 03:02 PM.
    NWCOPRO Nuisance Wildlife Control Software-My Application: http://www.nwcopro.com OR my Developer Chat
    Please ignore and excuse ANY posts I make in the desktop section - as an idiot, I am prone to reply in the wrong section - and I don't know diddly about the AS Desktop development.

  15. #15
    "Certified" Alphaholic CharlesParker's Avatar
    Real Name
    Charles Parker
    Join Date
    Dec 2012
    Location
    New Orleans, LA
    Posts
    1,681

    Default Re: Setting the Ink Control Background Image

    My biggest issue now is that when using a touch device (Ipad air2) I am automatically switching tools! So I go to draw on the image and I am suddenly navigating the "stack" or I am dragging to resize my eraser when in fact the drawing tool was selected and I was trying to draw on the image not navigate the stack.
    Now, I am using the 9/17/16 pre-release so I don't know if THAT has anythign to do with it - however it is super annoying to not be able to stay using the currently selected tool.
    Also, I must say I have been tweaking this INK editor for hours and would really like a reset button in the event that I have settings way out of whack as they say.

    I am certain this is ME screwing it up, but if theres a setting to stop the auto switching I would love to know about it - in fact I would like to get rid of the stack navigation entirely.

    The other part I cannot figure out is the style and the classes that are necessary. the default is pretty good but when I choose a different layout with more pens and the whole look changes and I have no idea what to style or what class should be there to make it look decent.
    It just seems to be missing parts for me to assign a known class or style, such as the movement buttons for the edit part, the defaults have a background color but once you choose another pen layout thats all gone with no way to go back or fix it.
    NWCOPRO Nuisance Wildlife Control Software-My Application: http://www.nwcopro.com OR my Developer Chat
    Please ignore and excuse ANY posts I make in the desktop section - as an idiot, I am prone to reply in the wrong section - and I don't know diddly about the AS Desktop development.

  16. #16
    Member
    Real Name
    Ted Thomas
    Join Date
    Oct 2011
    Location
    Colorado
    Posts
    35

    Default Re: Setting the Ink Control Background Image

    I have a similar issue. I noticed that the ink tools in the development preview modes are different that on the server. In preview, tools are on top of the ink and have a different size and appearance. On the server, they are on the side of the ink and are smaller. My guess is that it has something to do with the css. When/if I find something I will report back.

  17. #17
    "Certified" Alphaholic CharlesParker's Avatar
    Real Name
    Charles Parker
    Join Date
    Dec 2012
    Location
    New Orleans, LA
    Posts
    1,681

    Default Re: Setting the Ink Control Background Image

    There is definitely a CSS issue and there needs to be some documentation on the parts. If you do not meddle with it, and JUST adjust the pen choices and the size it seems to work as expected, however like I said I am getting some weird actions on a touch device (Ipad Air2) and I do not recall any issue when I first got this working with the stack navigation on drag. This behavior is not wanted for sure, and I see no way to turn it off.
    If your getting different results locally VS live it's probably that your missing some CSS - however I am pretty sure you won't catch it in Google Chromes dev tools. I looked at that myself but there was no css error in the console - which I don't understand I just accepted it as truth because after I did a publish to include the styles etc. things started working out for me.
    NWCOPRO Nuisance Wildlife Control Software-My Application: http://www.nwcopro.com OR my Developer Chat
    Please ignore and excuse ANY posts I make in the desktop section - as an idiot, I am prone to reply in the wrong section - and I don't know diddly about the AS Desktop development.

Similar Threads

  1. Ink Control Background Color and image not working?
    By pcaspa in forum Tablet-Optimized Form Capabilities Beta
    Replies: 1
    Last Post: 11-10-2015, 04:46 PM
  2. Replies: 3
    Last Post: 05-19-2014, 10:03 AM
  3. tree control background color and text background
    By gmeredith17 in forum Alpha Five Version 9 - Desktop Applications
    Replies: 2
    Last Post: 07-26-2008, 06:47 PM
  4. tree control background color and text background
    By gmeredith17 in forum Alpha Five Version 8
    Replies: 0
    Last Post: 07-25-2008, 11:15 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •