Use the Web Graphical Button - Add screen to design buttons for use with your graphical Point Of Sale screen available in RecTrac and WebTrac.
Note: As you configure your button, the Button Preview area refreshes on this screen.
Before You Begin
Here are some concepts essential to this process.
Button Types
- Information - When clicked, this button displays only information. For Example: For your campground graphical POS, you might have an Information button over your beach that reminds patrons the hours when a lifeguard is on duty, and that floats are not allowed.
- Switch - Enables this button to switch between the parent and child layers in your design. For Example: You use Graphical POS for campground reservations. You have two (2) campgrounds, your Parent Layer is an area map with a Switch button for each of your two (2) campgrounds. When a Switch button is clicked, the Parent Layer is hidden and the Child Layer shows for the campground that is chosen. Each Child Layer has a Switch button for returning to the Parent Layer (hiding the Child Layer and showing the Parent Layer).
- Purchase - Links this button to a POS item/ticket/rental code within RecTrac. For Example: Your campground graphical reservations screen includes Purchase buttons linked to individual campsite rental items within the system. When a Purchase button is clicked for a camp site (i.e., site 12), additional information is shown along with Add to Cart.
Buttons: Text, Invisible, or a Picture?
- Text Buttons - Create standard buttons with text labels in your choice of font, color, border and place them as needed for your POS items available on this screen.
- Invisible Buttons - If the background image for this layer already includes all of the needed button shapes, then consider adding invisible buttons. For Example: You have an image of your event arena with all of the numbered sections and seats for which tickets are sold. Alternatively, you might have a campground drawing as the background image with all of the site numbers and tents already on it. You would create clickable buttons to the applicable POS items, erase the Label, set Border Style to None, and Set the Background color to have A=0 (set the Alpha Channel to be 100% transparent).
- Picture Buttons - Like Layers, Buttons can include a background image. You might have buttons that are entirely a picture without text, you might have buttons with a background image and have text labels over them. For Example: For Trout Brook Campground, you might have all fish-shaped buttons (i.e., a fish background image) with each having a text label over it.)
TouchButtonCreate_Tab1
Label (TouchButton_FieldLabel)
Enter this button's text, if any. This text displays in the Font Color with the Font Family you have specified under Font/Background Settings.
DeleteBackground Color (TouchButton_CSSStyle_BackgroundColor)
Click to select the background color for this button. The Pick a Color screen opens specify the color with the options provided and then use the close "X" in the corner to close that screen. There are multiple methods of specifying a color like red click on the color within the picker enter the HTML Hexadecimal Color Code (i.e. #ff0000) or enter the RGB value (i.e. R=255 G=0 and B=0) and you will get the same results.
DeleteFont Color (TouchButton_CSSStyle_Color)
Click to select the color for text on this button. The Pick a Color screen opens, specify the color with the options provided, and then use the close X" in the corner to close that screen. There are multiple methods of specifying a color like red click on the color within the picker enter the HTML Hexadecimal Color Code (i.e. #ff0000) or enter the RGB value (i.e. R=255 G=0 and B=0) and you will get the same results.
DeleteFont Family (TouchButton_CSSStyle_FontFamily)
Expand the Drop-down list to select the desired Font to use for the button text (i.e., Verdana).
DeleteFont Size (TouchButton_CSSStyle_FontSize)
Enter the font size (i.e., 2.0) and then click the Drop-down list to select the units (i.e., %) to use for the button text. Choosing a scalable size (em or %) is advantageous when you utilize devices with different screen sizes and resolutions, and ensure a font is legible whether you are using a small cellphone or a desktop computer screen for POS. A pixel-based unit is still available where necessary.
%are scalable units based on the document's default font-size. For Example: Your document's font size might be 12-points.
100% = 100% of the document's font size (or 12-points for your button text)
50% = half of 12-points (6-points for your button text)
200% = twice 12-point (24-points for your button text)
Ems are scalable units based on the document's default font-size. For Example: Your document's font size might be 12-points.
1.0-em = 100% of the document's font size (or 12-points for your button text)
0.5-ems = half of 12-points (6-points for your button text)
2.0-em = twice 12-points (24-points for your button text)
Px are fixed units based on pixels" rendered on the device's display. One pixel is equal to the one dot on the computer's display (the smallest unit of division of your screen's resolution). One problem with the pixel-unit is that it does not automatically scale for different devices. Your buttons can be hard or easy to read based on screen size and resolution. For Example: You have different point of sale devices which include a mix of 9.7-inch iPads with a Retina display (2048 by 1536 pixel resolution) and older fixed terminals with a 1024x768 display on 14 inch screens. A 16-pixel font might be easy to read on your older terminal but completely illegible on your iPad.
DeleteFont Weight (TouchButton_CSSStyle_FontWeight)
Expand the Drop-down list to select the desired Weight to use for the button text: Normal or Bold.
DeleteText Align (TouchButton_CSSStyle_TextAlign)
Expand the Drop-down list to select the text alignment to use for the button text: Left, Right, Center, or Justify.
DeleteBorder Color (TouchButton_CSSStyle_BorderColor)
Click to select the color of the borders around this button. The Pick a Color screen opens, specify the color with the options provided, and then use the close X" in the corner to close that screen. There are multiple methods of specifying a color like red click on the color within the picker enter the HTML Hexadecimal Color Code (i.e. #ff0000) or enter the RGB value (i.e. R=255 G=0 and B=0) and you will get the same results.
Note: If you do not want borders on this button then set the Border Style field to None.
DeleteBorder Width (TouchButton_CSSStyle_BorderWidth)
Enter the width (i.e., 2.0) and then click the Drop-down list to select the units (i.e., %) to use for the button's border. Choosing a scalable size (em or %) is advantageous when you utilize devices with different screen sizes and resolutions, to ensure consistent size whether you are using a small cellphone or a desktop computer screen for POS. A pixel-based unit is still available where necessary.
DeleteBorder Style (TouchButton_CSSStyle_BorderStyle)
Expand the Drop-down list to select the desired Border Style to use for the button text (i.e., Solid). If you do not want borders for this button, then select None.
DeleteBorder Radius (TouchButton_CSSStyle_BorderRadius)
Enter the Radius (i.e., 15) and then click the Drop-down list to select the units (i.e., %) to use for the button. Having a Border Radius of zero gives you a button with sharp edges. Setting a Border Radius enables you to round the edges of your button.
DeleteText Decoration (TouchButton_CSSStyle_TextDecoration)
Expand the Drop-down list to select the Text Decoration to use for the button text: None, Underline, Overline, or Line-Through.
DeleteLine Height (TouchButton_CSSStyle_LineHeight)
Enter the Line Height (i.e., 2.0) value and then click the Drop-down list to select the units (i.e., em) to use. Use Line Spacing to increase or decrease the vertical spacing above the button's Label text (especially helpful for multiple-line text).
DeleteLetter Spacing (TouchButton_CSSStyle_LetterSpacing)
Enter the Letter Spacing (i.e., 2.0) value and then click the Drop-down list to select the units (i.e., em) to use. Use Letter Spacing to increase or decrease the space available between characters in the button's Label text. Reducing letter spacing helps condense text into a smaller space. Increasing letter spacing fills larger spaces with less text.
DeleteText Shadow Color (TouchButton_CSSStyle_TextShadowColor)
This field is applicable only if you are displaying a shadow of the button's text.
Click to select the color for this button's shadow. The Pick a Color screen opens specify the color with the options provided and then use the close "X" in the corner to close that screen. There are multiple methods of specifying a color like red click on the color within the picker enter the HTML Hexadecimal Color Code (i.e. #ff0000) or enter the RGB value (i.e. R=255 G=0 and B=0) and you will get the same results.
DeleteText Shadow Blur (TouchButton_CSSStyle_TextShadowBlur)
This field is applicable only if you are displaying a shadow of the button's text.
Enter the Text Shadow Blur (i.e. 2.0) value and then click the Drop-down list to select the units (i.e. em) to use. This makes the shadow appear blurry and soft in appearance.
DeleteText Shadow Horizontal Position (TouchButton_CSSStyle_TextShadowHPosition)
This field is applicable only if you are displaying a shadow of the button's text.
Enter the Text Shadow Horizontal Position (i.e. 2.0) value and then click the Drop-down list to select the units (i.e. em) to use. This specifies the horizontal space between the character and its shadow. You MUST have a value greater than zero in either horizontal or vertical spacing to see the shadow.
DeleteText Shadow Vertical Position (TouchButton_CSSStyle_TextShadowVPosition)
This field is applicable only if you are displaying a shadow of the button's text.
Enter the Text Shadow Vertical Position (i.e. 2.0) value and then click the Drop-down list to select the units (i.e. em) to use. This specifies the vertical space between the character and its shadow. You MUST have a value greater than zero in either horizontal or vertical spacing to see the shadow.
DeleteBackground Image (Relative to Image Path) (TouchButton_CSSStyle_BackgroundImage)
This field is applicable only if you are including a Background Image on this button.
Enter the filename and the file extension of an image file to use as this button's background image relative to the server's Images folder. Acceptable file types include .jpg.gif and .png. The image MUST reside in the server's Images folder or a subfolder underneath it.
For Example: For Trout Brook Campground the buttons will use a fish-outline. It is saved as a Fish.png image.
1. Prerequisite -- Copying File to Server's Images Folder:
Prior to using the image it must reside in the RecTrac server's Images path. When the default installation path is used the images MUST be stored on your server in: X:\VSI3\RecTrac\WebServer\GUI\images\ (where X is the drive letter of the RecTrac installation). Ask your organization's IT for help copying the file.
2. File resides within the Images folder (and NOT a subfolder)::
Enter the following into the Layer Image field within RecTrac: Fish.png without the location as it resides directly within the server's Images folder.
3. File resides within a subfolder to the Images folder::
Enter: Camp/Fish.png to specify the subfolder image filename and file extension.
Note: The direction of the slashes is important and MUST match what the program is expecting or it will NOT work. Try reversing the slashes if the image does not initially display. Double-check the spelling of the folder name and file names as it MUST be exact.
DeleteBackground Position (TouchButton_CSSStyle_BackgroundPosition)
This field is applicable only if you are including a Background Image on this button.
Expand the Drop-down list to select the desired starting position to use for the background image you're placing on this button (i.e. Left Top).
DeleteBackground Size (TouchButton_CSSStyle_BackgroundSize)
This field is applicable only if you are including a Background Image on this button.
Expand the Drop-down list to select the size options for the background image you're placing on this button.
Auto is the default which displays the background image in its original size within this button.
Contain resizes and stretches the background image to make sure it is fully visible.
Cover resizes stretches and cuts off an edge of the background image to cover the entire button.
100% resizes and stretches the background image to use 100% of the available height and width of the button.
DeleteBackground Repeat (TouchButton_CSSStyle_BackgroundRepeat)
This field is applicable only if you are including a Background Image on this button.
Expand the Drop-down list to select whether to repeat the background image you're placing on this button. Select No Repeat when you do NOT want the image to repeat on the button. Select Full Repeat to have the image repeat both horizontally (i.e. X) and vertically (i.e. Y) within the button. You can also choose to repeat only horizontally or only vertically.
DeletePadding Top (TouchButton_CSSStyle_PaddingTop)
Enter the Padding Top (i.e., 2.0) value and then click the Drop-down list to select the units (i.e., em) to use. Padding adds empty space between the button's border and its inside text content.
DeletePadding Bottom (TouchButton_CSSStyle_PaddingBottom)
Enter the Padding Bottom (i.e., 2.0) value and then click the Drop-down list to select the units (i.e., em) to use. Padding adds empty space between the button's border and its inside text content.
DeletePadding Left (TouchButton_CSSStyle_PaddingLeft)
Enter the Padding Left (i.e., 2.0) value and then click the Drop-down list to select the units (i.e., em) to use. Padding adds empty space between the button's border and its inside text content.
DeletePadding Right (TouchButton_CSSStyle_PaddingRight)
Enter the Padding Right (i.e., 2.0) value and then click the Drop-down list to select the units (i.e., em) to use. Padding adds empty space between the button's border and its inside text content.
DeleteHeight (TouchButton_CSSStyle_Height)
Enter the height (i.e., 20) and then click the Drop-down list to select the units (i.e., em) to use for the button. Choosing a scalable size (em or %) is advantageous when you utilize devices with different screen sizes and resolutions, and ensure a font is legible and a button is clickable whether you are using a small cellphone or a desktop computer screen for POS. A pixel-based unit is still available where necessary.
% are scalable units based on the height of the graphical POS area of the screen. For Example: That height might be 1000-pixels.
100% = uses all of the area's 1,000-pixel height for your button height, 50% = half of that area, and likely neither would be desirable for button height.
A smaller area, such as 12% might be more appropriate for button height.
Ems are scalable units based on the document's default font-size. For Example: Your document's font size might be 12-points.
1.0-em = 100% of the document's font size (or 12-points for your button height).
2.0-em = twice 12-points (24-points for your button text).
Px are fixed units based on pixels" rendered on the device's display. One pixel is equal to the one dot on the computer's display (the smallest unit of division of your screen's resolution). One problem with the pixel-unit is that it does not automatically scale for different devices. Your buttons can be hard or easy to read based on screen size and resolution. For Example: You have different POS devices which include a mix of 9.7-inch iPads with a Retina display (2048 by 1536-pixel resolution) and older fixed terminals with a 1024x768 display on 14-inch screens. A 16-pixel height might be easy to use on your older terminal but difficult to touch on your iPad.
DeleteWidth (TouchButton_CSSStyle_Width)
Enter the width (i.e., 20) and then click the Drop-down list to select the units (i.e., em) to use for the button. Choosing a scalable size (em or %) is advantageous when you utilize devices with different screen sizes and resolutions, and ensure a font is legible and a button is clickable whether you are using a small cellphone or a desktop computer screen for POS. A pixel-based unit is still available where necessary.
% are scalable units based on the width of the graphical POS area of the screen. For Example: That width might be 1000-pixels.
100% = uses all of the area's 1,920-pixel width for your button width, 50% = half of that area, and likely neither would be desirable for button width.
A smaller area, such as 20% might be more appropriate for button width.
Ems are scalable units based on the document's default font-size. For Example: Your document's font size might be 12-points.
1.0-em = 100% of the document's font size (or 12-points for your button width).
2.0-em = twice 12-points (24-points for your button width).
Px are fixed units based on pixels" rendered on the device's display. One pixel is equal to the one dot on the computer's display (the smallest unit of division of your screen's resolution). One problem with the pixel-unit is that it does not automatically scale for different devices. Your buttons can be hard or easy to read based on screen size and resolution. For Example: You have different POS devices which include a mix of 9.7-inch iPads with a Retina display (2048 by 1536-pixel resolution) and older fixed terminals with a 1024x768 display on 14-inch screens. A 16-pixel height might be easy to use on your older terminal but difficult to touch on your iPad.
Delete