Differences

This shows you the differences between two versions of the page.

Link to this comparison view

field type - drawing [2016/09/14 14:19] (current)
Line 1: Line 1:
 +====== Drawing ======
  
 +The drawing field is used to for creating an image overtop of an existing image and saving the two merged together into a single image. ​ By utilizing the wPaint plugin, an application developer can draw with their cursor and insert text over top of the displayed image. ​ All images must be in png format.
 +
 +===== How to Create - Method 1 =====
 +  - Click the {{:​presentation-layer:​field-plus.png|}} to add a field in your [[Form|form]].
 +  - Choose "New Field"
 +  - Select the table you wish to add the field to. Most of the time, this will be the current [[Table|table]] you are on, called the current [[Context|context]].
 +  - Select a field name and click "​Choose Type".
 +  - Choose "​Drawing"​ from the list of field types.
 +  - You can continue adding fields or click the "​Select"​ button to finish adding.
 +
 +===== How to Create - Method 2 =====
 +This field is able to be placed on a page itself, not as part of a table'​s records.
 +
 +==== Adding the Field ====
 +  - Click the “Fields” button in the left toolbar to expand the list of fields available. {{ :​expand_fields.png?​nolink&​200 |}}
 +  - Click on “Drawing”,​ holding the mouse button down and dragging the filter field onto the page, releasing over the grey shadow where the field will be placed. {{ :​drawing_drop.png?​nolink&​1000 |}}
 +  - An empty drawing field will appear on the page in the location specified.
 +
 +==== Accessing the Features ====
 +When hovering the mouse over the field, an icon containing a blue pencil over a sheet of paper will appear in the top left corner of the field. Click this icon to access the field features as listed below.
 +{{ :​drawing_edit.png?​nolink&​500 |}}
 +
 +===== Features =====
 +Field features can be edited by clicking on the orange field icon {{:​type-24.png|}} when the [[Presentation Layer|presentation layer]] is displayed.
 +
 +==== Field Label ====
 +  * [[Field Setting - Field Label|Field Label]]
 +  * [[Field Setting - Display Alternate Label]] (affects this form only)
 +
 +==== Grid Appearance ====
 +  * [[Field Setting - Column Span|Column Span]]
 +  * [[Field Setting - Row Span|Row Span]]
 +
 +==== List Appearance ====
 +  * [[Field Setting - Column Width|Column Width]]
 +  * [[Field Setting - Align header text|Align header text]]
 +  * [[Field Setting - Default Sort|Default Sort]]
 +  * [[Field Setting - Align data horizontally|Align data horizontally]]
 +  * [[Field Setting - Refresh Column Every X Seconds|Refresh Column every X seconds]]
 +
 +==== Tree Appearance ====
 +  * [[Field Setting - Column Width|Column Width]]
 +  * [[Field Setting - Default Sort|Default Sort]]
 +
 +==== Tooltip ====
 +  * [[Field Setting - Tooltip|Tooltip]]
 +  * [[Field Setting - Descriptive Text|Descriptive Text]]
 +  * [[Field Setting - Display Alternate Descriptive Text|Display Alternate Descriptive Text]] (affects this form only)
 +
 +==== Block Association ====
 +  * [[Field Setting - Temporary Block Association|Temporary Block Association]]
 +  * [[Field Setting - Global Block Association|Global Block Association]]
 +
 +==== Validation ====
 +   * [[Field Setting - Required|Required]]
 +
 +==== Audit History ====
 +  * [[Field Setting - Audit This Field|Audit This Field]] ​
 +  * [[Field Setting - Show Audit History|Show Audit History]]
 +
 +==== View Only ====
 +  * [[Field Setting - View Only|View Only]]
 +
 +==== File Access ====
 +  * [[Field Setting - Public URL|Allow access to file by assigning a public URL]]
 +  * [[Field Setting - Enable Downloading|Enable downloading of this file]]
 +
 +==== Drawing Options ====
 +  * [[Field Setting - Height|Height]]
 +  * [[Field Setting - Width|Width]]
 +
 +===== Field Parts =====
 +The Drawing Field has 16 different field parts:
 +
 +  * Background Filename - The file name of the stored file containing the background image.
 +  * Foreground Filename - The file name of the stored file containing the foreground image.
 +  * Merged Filename - The file name of the stored file containing the merged image.
 +  * Background File Size - The size of the background image file in bytes.
 +  * Foreground File Size - The size of the foreground image file in bytes.
 +  * Merged File Size - The size of the merged image file in bytes.
 +  * Background Download URL - If the Drawing Field is set to allow public access to the file, this will be the URL where the stored background image file is found. If the Field is not set to allow public access, it will be a path to the image which will attempt to force the browser to download the file.
 +  * Foreground Download URL - If the Drawing Field is set to allow public access to the file, this will be the URL where the stored foreground image file is found. If the Field is not set to allow public access, it will be a path to the image which will attempt to force the browser to download the file.
 +  * Merged Download URL - If the Drawing Field is set to allow public access to the file, this will be the URL where the stored merged image file is found. If the Field is not set to allow public access, it will be a path to the image which will attempt to force the browser to download the file.
 +  * Background Encoded File - A base64 encoded string containing the contents of the background image. ​ This is cleared after it is saved into an image file.
 +  * Foreground Encoded File - A base64 encoded string containing the contents of the foreground image. ​ This is cleared after it is saved into an image file.
 +  * Merged Encoded File - A base64 encoded string containing the contents of the merged image. ​ This is cleared after it is saved into an image file.
 +  * Height - The height of the merged image.
 +  * Width - The width of the merged image.
 +  * Mime Type - The Internet Media Type, will always be image/png
 +  * Location Type - Will always be empty
 +
 +===== Copying Field Parts to and from File Attachments in Actions =====
 +To copy a [[Field Type - File Attachment|file attachment]] to a field part of a drawing field in an action, set either the "​Download URL" or "​Stored Value" part of the file attachment you are reading to either the "​Background Download URL", the "​Foreground Download URL" or the "​Merged Download URL" of the drawing field you want to set, and the file will copy in the background correctly. ​ You can also set the "​Stored Value" part of the file attachment to the "Full Field" of a drawing field and the file will automatically be set to the "​Foreground Download URL" part for that field.
 +
 +To copy a field part of a drawing field to a file attachment in an action, set either the "​Background Download URL", the "​Foreground Download URL", or the "​Merged Download URL" part of the drawing you are reading to "​Download URL" of the file attachment field you want to set, and the file will copy in the background correctly.
 +
 +===== Saving a Field Part from a URL =====
 +If you have the URL to a file on the internet, you can use an action to push that URL into either the "​Background Download URL", the "​Foreground Download URL", or the "​Merged Download URL" of the drawing field you want to set and that file will be downloaded and saved into that field part.
 +
 +===== Using The wPaint Plugin =====
 +In non-editable mode, the field will display either the merged image, the background image, or the foreground image, with priority given in that order should one of more of those images not exist. ​ In editable mode, the field will display a canvas using the field'​s height and width settings (or 400 if they are not set), showing the background image with the foreground image over top of it.  If either image is too large for the canvas, it will be scaled down to fit.  On the contrary, should both images be smaller than the dimensions of the canvas, the remaining area will be filled in with grey.  {{ :​drawing_field.png?​nolink&​500 |}}
 +
 +The toolbar appears when the component has entered edit mode.  It allows the application developer to select a desired action that will be performed in the canvas below.
 +  * Handle - This allows the application developer to click and drag the toolbar to a new location.
 +  * Undo - This undoes the last action performed.
 +  * Redo - This redoes the last action undid.
 +  * Clear - This clears out the entire foreground image (including anything that had been previously saved).
 +  * Shapes 1 - This allows the application developer to create a shape on the canvas. ​ By holding down the mouse button, they can change to one of these shapes: Rectangle, Rounded Rectangle, Square, Rounded Square, Diamond.
 +  * Shapes 2 - This allows the application developer to create a shape on the canvas. ​ By holding down the mouse button, they can change to one of these shapes: Elipse, Cirlce, Pentagon, Hexagon.
 +  * Line - This allows the application developer to create a straight line on the canvas.
 +  * Pencil - This allows the application developer to freely draw on the canvas.
 +  * Text - This allows the application developer to place text on the canvas. ​ They are also able to change the font size, font family and toggle the bold and italic modes.
 +  * Eraser - This allows the application developer to erase parts of the foreground image (including anything that had been previously saved).
 +  * Bucket - This allows the application developer to fill in an entire area with a single color.
 +  * Fill Color - This allows the application developer to choose the color of the fill area by selecting an option from the color palette, entering a hexidecimal value in the text box, or by clicking the dropper and clicking again over an area of the foreground image to copy it's color.
 +  * Stroke Width - This allows the application developer to change the size of the effect area for an action.
 +  * Stroke Color - This allows the application developer to choose the color of the effect area for an action by selecting an option from the color palette, entering a hexidecimal value in the text box, or by clicking the dropper and clicking again over an area of the foreground image to copy it's color.
field type - drawing.txt · Last modified: 2016/09/14 14:19 (external edit)
Copyright WorkXpress, 2019