Show/Hide Toolbars

Menu Designer

Navigation: Creating Menu Panels

Add Buttons with Pictures on Them

Scroll Prev Top Next More

Adding logos or other pictures to buttons can speed order-taking because the menu items (Anything that can be sold to a customer is considered a menu item. Pizza, drinks, and promotional merchandise are examples of menu items.) are more easily distinguished from each other. Order-takers may already be familiar with the logos of many products, and pictures aid new staff and those whose first language is not English.

SpeedLine Image Library

SpeedLine includes a large library of button images for toppings, condiments, beverages, and some main dishes. The image files are found in C:\Speedline\MenuImages. To add image buttons from the SpeedLine menu button library, follow the steps below. If you are using your own images on buttons, see the Prepare Images for Use on Buttons topic first.

To Add an Image Button to a Menu Panel

Best Practice HM

Hint If you have several image buttons the same size to add to a menu panel, the fastest way is to  follow the steps below to make the first button, and then copy (CTRL + C) and paste (CTRL + V)  it to make the others, changing  the menu link and image as you go.

1.If you are using your own image, rather than a pre-made image from the MenuImages library, prepare it first.

2.Open the menu panel in the Panel Designer.

3.If you are replacing an existing simple item button (a button without an image), remove it:

a.Select the button.

b.Click the Menu Link field, make note of the menu item the button is linked to, and then click OK.

c.With the button still selected, press DELETE.

4.Click the Image Speed button ButtonMenuImageSpeed on the Components toolbar.

5.Press and drag in the Panel Designer workspace to add the button.

6.In the Components Property Editor, Height and Width fields, enter the desired size in pixels.
Click to expand        See sizes for buttons in the MenuImages library

Best Practice HM

Hint Your button may be slightly larger or smaller than the image, but it should be the same shape, or distortion will occur.

7.In the Components Property Editor, click AutoImage, and then click Browse. bBrowse  The Auto Image Speed Button wizard opens.

8.Click Next, and then click the Load button buttonLoad and navigate to the image to place on the button.

Best Practice HM

Hint If you are using a pre-made image from the library, navigate to C:\Speedline\MenuImages.

9.Select the image, click Next, and then click Finish. The image is embedded in the menu file.

10.In the Components Property Editor, click Menu Link, and select Link to Menu Item.

11.In the Menu Tree, select item or modifier (A Modifier is a choice that is applied to a menu item, such as a pepperoni topping on a pizza. to link to, and then click OK.

Note HM

Note Modifiers that are included in the contents of a menu item on the same panel will be indicated by a red dot superimposed on the button when the item is selected. The contents for a menu item are specified in  an item contents node in the menu tree. If contents have not yet been defined, see Add a Recipe (Item Contents) to a Menu Item for steps to do this.

Red_dot_menu_button

Red dot indicator on a modifier button

Best Practice HM

Hint You can use a custom indicator image rather than the red dot, if you prefer. See To Add a Custom Indicator Image, below.

12.Check the menu file, save it, and refresh Terminal.

Customize an Image Button

If the caption on a button in the image library does not apply to your menu, you can superimpose a caption entered in Menu Designer on a button image with a blank color bar from the library (C:\Speedline\MenuImages). You can also add a custom indicator for item contents, if you prefer not to use the built-in "red dot" image.

To Add a Custom Caption

Mushrooms_NT_64px

Image_button_caption_from_item

Original image

Button in Terminal with caption from linked menu item

1.Follow the steps above to add an image button with a blank space to the menu panel.

2.In the Components Property Editor, do one of the following:

To use the button caption entered in the in the linked item's General tab, select the Caption from Menu Link check box, and then relink the item.

-or-

To use a custom caption, in the Caption field, type the desired text.

Note HM

Note If you select the Caption from Menu Link check box, any text entered in the Caption field is ignored. If you enter a custom caption, the item's Button Caption field is ignored.

3.To reposition the caption, click Caption Alignment, and then choose an alignment from the drop-down list. You may also need to adjust the Caption Margin value.

4.To change the size or color of the caption, click the Font field, and then click the browse button. ButtonBrowseCompEditor

Best Practice HM

Hint Adding spaces between words in the caption will force the caption to wrap to a second line.

To Add a Custom Indicator Image

Best Practice HM

Hint PNG files are recommended for custom indicators, as transparency may not work with other file types. The indicator image must be small enough that it does not interfere with seeing the main image or the button caption. The built in "red dot" image is 16px X 16px.

1.Select the modifier button to have the custom indicator image, and click the IndicatorBitmap field.

2.Click the browse button bBrowse and then click Load. buttonLoad

3.Navigate to the location where you have saved the custom indicator image.

4.Select the file, click Open, click Yes to load all channels, and then click OK.

5.Save the menu file and refresh Terminal to see your changes.

See Also:

Prepare Images for Use on Buttons

Open a Panel in the Panel Designer

Size Panel Components

Change Button Color or Caption

Add a Recipe (Item Contents) to a Menu Item

Save A Menu File