Signing or Drawing on Photos

Top  Previous  Next

Users can sign the photo, draw on it, add frames or emojis/stickers by tapping on the drawing icon in the main Breeze Kiosk window. The edited image is saved as a new JPEG image displayed in the main Breeze Kiosk screen.

 

drawing and signing

 

The photo is displayed full screen with a menubar down the left hand side. The current line width and pen color is displayed in the top left hand corner. Users can sign their print or draw on it using a touchscreen or mouse. Tapping the color palette icon in the menubar will display a panel of colors allowing users to choose the pen color:

 

drawing_color

 

When the user taps on a color in the panel it is highlighted and the pen width and color indicator in the top left corner is updated to show the color. The color panel can be dismissed by tapping anywhere in the menubar or by drawing on the print.

Tapping the line width icon in the menu bar will display a slider allowing users to adjust the line width:

 

drawing_line_width

 

The pen width can be adjusted by moving the slider left or right and the pen width and color indicator in the top left corner is updated to show the new pen width. The pen width slider can be dismissed by tapping anywhere in the menubar or by drawing on the print.
 

drawing_emoji
 

Users can add emojis/stickers/virtual props by clicking on the emoji icon in the menu and then selecting the required image. The image is placed in the center of the print preview and can be moved by dragging the center and resized or rotated the image by dragging the corners. Tap outside the image to fix it. The emoji can be removed by tapping the undo button.

 

If the user makes a mistake they can undo the last action by tapping the "Undo" icon (the red arrow in the menubar). Alternatively they can start again by tapping the trashcan icon. Actions that have been undone by tapping on the undo or trashcan icons can be re-done by tapping the "Redo" icon (the blue arrow in the menubar).

 

Tapping the accept icon accepts the the photos together with any drawing added by the user and saves a new JPEG image which can be shared or printed from the main Breeze Kiosk screen..

 

Tapping on the cancel icon (the cross at the bottom of the menubar) will cancel the edits without saving a copy and returns to the main Breeze Kiosk screen.

 

Modifying the appearance of the screen

 

The default screen appearance is a black background with a white menubar area. The icons for the actions in the menubar a defined using PNG files in the icons subfolder of in the installation folder:

color.png - image used for the color palette icon

width.png - image used for the pen width icon

emoji.png - image used for the emoji icon

frames.png - image used for the frames icon

redo.png - image used for "Redo" icon

undo.png - image used for the "Undo" icon

clear.png - image used for the clear/trashcan icon

accept.png - image used for the accept icon

cancel.png - image used for the cancel icon

 

The appearance of the icons can be changed by replacing the PNG images in the icons subfolder with new images or by placing PNG images in the current photobooth images folder.

 

The appearance of the whole screen can be modified by creating a JPEG screen image named usermodifyprint.jpg and placing it in the current photobooth images folder. The screen image should be the same size in pixels as the screen on which the photo booth will be displayed.

 

An optional overlay can be placed on top of the background and print layout by creating a PNG screen image named usermodifyprint_overlay.png and placing it in the current photobooth images folder. The overlay image should be the same size in pixels as the screen on which the photo booth will be displayed and should contain transparency information in the alpha channel. The overlay can be used to display instructions to the user and will appear on screen but not in the final prints.

 

A set of color icons is available in the "color icons" subfolder of the installation folder:

color icons

These can be used by renaming the "icons" subfolder to "b&w icons" and renaming the "color icons" subfolder to "icons" in the installation folder. Alternatively the icon PNG files can be copied into the current photo booth images folder.

 

Editing the settings

 

Hold down the shift and ctrl keys and left click the mouse to display the settings dialog:
 

drawing_settings
 

Use the checkboxes in the "Menu Items" area to select which actions should be made available to the user in the menubar area.

 

Select "Enable line drawing" if you want users to be able to draw on the print. Disable "Enable line drawing" if you only want users to be able to add emojis or frames.

 

The initial color setting specifies the pen color that is selected when the screen is displayed. Click on the "..." button to choose a different color.

The initial line width specifies the line width in pixels of the pen when the screen is first displayed. The min line width and max line width settings specify the range of line widths the user can select if the "Line width selector" menu option is enabled.

Select "Automatically close color selector when user selects color" to close the color selector menu when a color is selected.

 

By default the emoji and frame menus have a white background. Select "Use gray background for emoji and frame menus" to use a mid-gray background instead. This is useful if the emojis or frames have light colors which don't show up well against a white background.

 

Select "Automatically close frame selector when user selects a frame" to close the frame selector menu when a frame is selected. If this option is not selected the frame selector menu will continue to be displayed when a frame is selected and the print preview is updated to show the selected frame.

 

Select "Default to first frame" to add the first frame to the print layout when opening the drawing/signing screen.

 

The "Inactivity timeout (secs):" setting allows a timeout to be set. If the user does not touch the screen for a period longer than the timeout value the screen will be closed and the photos either printed or canceled depending on the timeout action setting. Setting the timeout to 0 will disable the timeout.

 

Select "Emojis" to add the option to add emojis/stickers/virtual props to prints and specify the folder where the emoji images are stored in "Emoji folder:". The images should be PNG images with an optional alpha channel for transparency information. The recommended image size for the emoji images is between 128x128 pixels and 1024x1024 pixels.

The folder name can be a relative path (e.g. "emoji") to use images in a subfolder or an absolute path (e.g. C:\emoji_images) if they are stored elsewhere. If it is set to a relative path it looks for the subfolder in the current photo booth images folder first and then looks in the installation folder. This allows different sets of emojis to be made available for each profile if required.

Emoji icons supplied by EmojiOne

 

The position of the photo preview can be adjusted using the "Preview position:" dropdown. The default setting is to center it vertically. Select the "Top" option to place the preview at the top of the screen or "Bottom" to place it at the bottom of the screen.

 

By default users can draw anywhere on the photo, but this can be limited by enabling the clipping and exclusion clipping regions. The clipping region is used to specify a region where the user is allowed to draw. The exclusion region allows an area within the drawing area to be protected e.g. to stop people drawing on corporate logos. The clipping and exclusion clipping regions can be edited by clicking on the "OK" button. The clipping region will be displayed by a green rectangle and the exclusion clipping region by a red rectangle. Click on one of the rectangles to select it and then adjust its size and position by dragging it corners. Click in the menubar area to save the settings and return to drawing mode.

 

Select the "Show mouse cursor" to display the mouse cursor to allow users to draw on the photos using a mouse.

 

Frames

 

The frames option allows users to choose a frame to apply to the photo. The frames are defined by overlay PNG images in the current photo booth images folder with filenames starting with frame_ e.g. frame_1.png, frame_2.png etc. The frame overlays are sorted into alphabetical order when they are displayed in the frame selector menu.

The frames menu icon will only be displayed if the "Frames" option is selected in the settings and one or more frame overlay images are found in the current photo booth images folder.

 

The frame overlay images should be the same size in pixels as the photo and have transparent areas where the photos are positioned so that the photos can be seen underneath the frame overlay.

Please note: The frame overlay may obscure them captions and logos added by the photo booth software that created the print layout. If you wish to add a logo or caption to the  photos and use the frames option in the drawing/signing screen you either need to leave transparent areas in frames or to add the logos or captions to each of the frame overlay images.

 

Implementation notes

 

The signing and drawing screen is implemented using a dynamic library named UserModifyPrint.dll and saves its settings in the Windows registry using the following registry key:

HKEY_CURRENT_USER\SOFTWARE\BreezeSystems\BreezeKiosk\100\UserModifyPrint

If different drawing and signing functionality is required it can be implemented by creating a new dynamic library to replace the default UserModifyPrint.dll library without requiring a custom build of BreezeKiosk.

 

Copyright information for icons used by UserModifyPrint.dll:
Undo/Redo/Cancel/Accept/Frames icons: These icons are provided by icons8 as Creative Commons Attribution-NoDerivs 3.0. You can copy, use and distribute this icon, even for commercial purposes, all without asking permission provided you link to icons8.com website from any page you use this icon. You may not alter, transform, or build upon this work. https://icons8.com

Color Palette/Trashcan icons from http://downloadicons.net

Printer icon: royalty free icon purchased from http://artistsvalley.com. This icon may only be used with Breeze Systems' products unless a separate license is purchased from Artists Valey.

Line width: Copyright Breeze Systems Limited. This icon may only be used with Breeze Systems' products.