TD200C - PanelEdit

1. TD200C Customizable Operator Panel Joint Project between: SIEMENS A&D AS SM6, SE&A JoCy, TTB

TD200C
Customizable Operator Panel
Joint Project between: SIEMENS A&D AS SM6, SE&A JoCy, TTB
Introduction to PanelEdit
Dan Benson
Siemens TTB
September 9, 2003
Contact Information:
Dan Benson
Siemens Technology-To-Business Center (TTB)
1995 University Ave., Suite 375
Berkeley, CA 94708
tel: 510-665-1335
fax: 510-665-1331
USA cell: 510-708-1029
Germany cell: +49-0160-493-3358
[email protected] / www.ttb.siemens.com

2. PanelEdit

Technology-To-Business Center
PanelEdit
Title
PanelEdit
Contact Cells
Button Examples
Usage
The PanelEdit application is used to configure the buttons
of a keypad panel.
The main window represents the front of the TD200c, the
green rectangle represents the LCD.
Background Image
Background Color
Edit individually
placed images
Drawing Buttons
Application Options
Printing Preview
Edit the text of
each button
Draw buttons
Print Settings
Image Orientation
Erase buttons
Outlining Options
Bleeding Edges
Viewing Options
Overlay Template
Company Confidential
(2)
Tool Palette
Grid area where
buttons are drawn
LCD region
of TD200c

3. PanelEdit – Grid of Contact Cells

Technology-To-Business Center
PanelEdit – Grid of Contact Cells
Title
PanelEdit
Contact Cells
Button Examples
Usage
Background Image
Background Color
Drawing Buttons
Application Options
Printing Preview
Print Settings
Image Orientation
Outlining Options
Bleeding Edges
The default background picture in PanelEdit shows the
contact locations of the PCB layer of the keypad. For the
TD200c, there are 80 individual cells.
Contact cells
The minimum size of a button is
4 contiguous cells (2 x 2) which
is typical for the size of a finger.
Buttons cannot be smaller than 2
cells in width or in height. Note:
if a button is drawn smaller than
the minimum, or is erased such
that a button is split, the invalid
buttons are made red and will
flash until corrected.
Viewing Options
Overlay Template
Company Confidential
(3)
Invalid region made by
erasing part of the button
Minimum size
button (2 x 2)

4. Button Examples

Technology-To-Business Center
Button Examples
Title
PanelEdit
Contact Cells
Button Examples
Usage
Background Image
Background Color
Drawing Buttons
Application Options
Printing Preview
Print Settings
Image Orientation
Outlining Options
Bleeding Edges
Viewing Options
Overlay Template
Company Confidential
(4)
Examples of various button sizes and placements.

5. PanelEdit - Usage

Technology-To-Business Center
PanelEdit - Usage
Title
PanelEdit
Contact Cells
Button Examples
Usage
Background Image
Background Color
The typical usage scenario to create a
custom panel is as follows:
1. Insert background image
2. Draw buttons
3. Print overlay
4. Adhere overlay to keypad
Drawing Buttons
Application Options
Printing Preview
Print Settings
Image Orientation
Outlining Options
Bleeding Edges
Viewing Options
Overlay Template
Company Confidential
(5)
An additional step (not currently implemented) would
be to assign memory locations or functions to each
button. Then, the button configuration data would be
downloaded to a PLC. When a TD200c is connected to
that PLC and powered-up, the corresponding button
data would be read from the PLC and the custom
keypad is then activated.

6. Background Image

Technology-To-Business Center
Background Image
Title
PanelEdit
Contact Cells
To load a background image from a file, choose
Picture | Load from file…
Button Examples
Usage
Background Image
Background Color
Select the image file…
Drawing Buttons
Application Options
Printing Preview
Print Settings
Image Orientation
Outlining Options
Bleeding Edges
Viewing Options
Overlay Template
Company Confidential
(6)
And the background
is displayed.

7. Background Image - alternative

Technology-To-Business Center
Background Image - alternative
Title
PanelEdit
Contact Cells
Button Examples
Usage
It’s also possible to give a background color or insert a
plain background image and then insert individual
bitmaps for each button.
Here a plain background is loaded:
Background Image
Background Color
Drawing Buttons
And then individual pictures are
inserted for the buttons:
Application Options
Printing Preview
Print Settings
Image Orientation
Outlining Options
Each graphic comes from
a separate image file
Bleeding Edges
Viewing Options
Overlay Template
Company Confidential
(7)
Several individual
pictures can be
inserted and
manipulated.

8. Drawing Buttons

Technology-To-Business Center
Drawing Buttons
Title
PanelEdit
Contact Cells
Button Examples
Usage
Background Image
Background Color
Drawing Buttons
Application Options
Printing Preview
Print Settings
Image Orientation
Outlining Options
Bleeding Edges
Viewing Options
Overlay Template
Company Confidential
(8)
Press the “Draw Buttons” toolbar button. As you
move the cursor over the button grid region,
the minimum size button area appears as the
cursor.
When the cursor is in
the area where you
want a button, press the
mouse and a button will
be placed there.
If you want a larger
button, simply hold the
mouse button and drag
to enlarge the button.
When you are finished,
release the mouse
button.
Button 7 was defined by holding down the
mouse button while dragging to the right.

9. Application Options

Technology-To-Business Center
Application Options
Title
PanelEdit
Application options can be set from the File menu:
Contact Cells
Button Examples
Usage
Background Image
Background Color
Drawing Buttons
Check this to automatically open
the most recently used file when
the program starts up.
Check this to set the default paper
size to “Envelope Monarch”. This is
the overlay size for printing
TD200c graphic overlays.
Application Options
Printing Preview
Print Settings
Check this to set the default paper
orientation to “Landscape”. This is
usually the case when printing
Envelope Monarch overlays.
Image Orientation
Outlining Options
Bleeding Edges
Viewing Options
Overlay Template
Company Confidential
(9)
NOTE: This is included only for
development purposes. Once the
final keyboard dimensions have
been determined this can be
removed.

10. Printing Options

Technology-To-Business Center
Printing Options
Title
PanelEdit
Contact Cells
The various printing options are found under Print Preview
by pressing the Settings… button:
Button Examples
Usage
Background Image
Background Color
Press the Settings… button
for printing options.
Drawing Buttons
Application Options
Printing Preview
Print Settings
Image Orientation
Outlining Options
Bleeding Edges
Viewing Options
Overlay Template
Company Confidential
(10)
Print Preview

11. Printing Options

Technology-To-Business Center
Printing Options
Title
PanelEdit
Contact Cells
Button Examples
Usage
Set the orientation of
the image on the page.
Optional outlines that
can be printed.
Background Image
Background Color
Drawing Buttons
Application Options
Set the offset of the
image from the top, left
corner of the page.
Restores default factory
settings.
Printing Preview
Print Settings
Image Orientation
Saves current settings
to the Registry (persists
between application
invocations).
Outlining Options
Bleeding Edges
Viewing Options
Overlay Template
Company Confidential
(11)
Expands the outer-most
edge of pixels in ½ mm
increments.
As you make changes, the changes are shown
immediately in the Print Preview window.

12. Printing: Image Orientation

Technology-To-Business Center
Printing: Image Orientation
No flipped image.
Title
PanelEdit
Contact Cells
Button Examples
Usage
Background Image
Background Color
Flipped Horizontal
Flipped Vertical
Drawing Buttons
Application Options
Printing Preview
Print Settings
Image Orientation
Outlining Options
Bleeding Edges
Viewing Options
Overlay Template
Company Confidential
(12)
Flipped Horizontal and Vertical

13. Printing: Outlining Options

Technology-To-Business Center
Printing: Outlining Options
Title
No outlines.
PanelEdit
Contact Cells
Button Examples
Usage
Background Image
Background Color
LCD and Panel outlines.
Drawing Buttons
Application Options
Printing Preview
Print Settings
Image Orientation
Outlining Options
Bleeding Edges
Viewing Options
Overlay Template
Company Confidential
(13)
Button region outlines.

14. Printing: Bleeding Edges

Technology-To-Business Center
Printing: Bleeding Edges
Title
No bleeding edge.
PanelEdit
Contact Cells
Button Examples
Usage
Background Image
Background Color
Bleeding edge of 2 mm
Drawing Buttons
Application Options
Bleeding uses outermost
row and column of pixels.
Printing Preview
Print Settings
Image Orientation
Outlining Options
Bleeding edge of 2 mm with Panel outlined.
Bleeding Edges
Viewing Options
Overlay Template
NOTE: with Panel outlined,
bleeding will be black.
Company Confidential
(14)

15. Viewing Options

Technology-To-Business Center
Viewing Options
Title
PanelEdit
Contact Cells
Button Examples
Usage
Background Image
Background Color
Viewing options under the View menu include:
• Hide/Show grid lines
• Hide/Show buttons
• Hide/Show pictures
• Hide/Show background
• Hide/Show LCD
Drawing Buttons
Application Options
Printing Preview
Print Settings
Image Orientation
Outlining Options
Bleeding Edges
Viewing Options
Overlay Template
Company Confidential
(15)
Note: if the buttons are hidden then the button tools are disabled
(Edit Text, Draw Buttons, Erase Buttons).

16. Overlay Template

Technology-To-Business Center
Overlay Template
Title
PanelEdit
Contact Cells
Button Examples
Usage
Background Image
Background Color
Drawing Buttons
Application Options
A template bitmap file of the
correct dimensions for the
overlay is supplied for the
purpose of using a bitmap or
picture editor (such as Paint,
Photoshop, etc.) to create a
background picture for
PanelEdit.
Template file loaded in Paint
Printing Preview
Print Settings
Image Orientation
Outlining Options
Bleeding Edges
Viewing Options
Overlay Template
Company Confidential
(16)
Template shows grid lines
where contact cells are
located and shows the LCD
window area in green.