Layout SDK

Layout Editor / Layout File Manager

Users Guide
for Version 1.3.0
 CITIZEN Layout SDK

Revision history

Date Description
2009.06.01 1.0.0.0 release
2009.11.19 1.0.1.0 release
- Changed to hide the printing dialog in Layout Print Engine.
2013.11.22 1.1.0.0 release
- Added support OS:
Windows 7, Windows 8, Windows 8.1,
Windows Server 2008, Windows Server 2008R2, Windows Server 2012
- Supports the creation of 64-bit user applications.
- Supports multi-threaded user applications for printing.
- Added support barcode:
MaxiCode, Data Matrix, GS1 Composite, GS1 Databar (RSS), iQR
- Support for dot-by-dot print of the image.
And, Changed the property name from [FixedAspect] to [SizeMode].
- Added speed up method for the first printing:
PreparePrint(), HidePreview()
- Support for snapping the inserted parts on the hid grid. (Layout Editor)
- Added the vs90_piaredist.exe to the installer.
The vs90_piaredist.exe ( Microsoft Primary Interoperability Assemblies 2005 ) is
"Distributable Code" by Microsoft.
- Fixed some bugs.
2014.09.08 1.2.0.0 release
- Supported the mobile terminal (Android).
- Added the printer font mode for the mobile terminal in Layout Editor.
- Added the CLFX layout file export function for the mobile terminal in Layout Editor.
- Added the Layout Print Engine for Android using the CLFX layout file.
2016.08.16 1.3.0.0 release
- Added support OS: Windows 10
- Changed to .Net Framework 4.0 based.
- Supported "Straight Line" and "Rectangle" on the layout for the mobile terminal.
- Changed the layout file from CLFX to XML for the mobile terminal.
- Added the XML layout file import funcition for mobile terminal in Layout Editor.
- Change the designation from "Layout Print Engine" to "Layout SDK". (Library name is
no change)
- Fixed some bugs.

-2- CITIZEN SYSTEMS JAPAN

 CITIZEN Layout SDK

Permission Notice
1. Unauthorized use of all or any part of this document is prohibited.
2. The information in this document is subject to change without prior notice.
3. This document has been created with full attention. If, however, you find an error or question,
Please contact us.
4. We shall not be liable for any effect resulting from operation regardless of the above item 3.
5. If you do not agree with the above terms, you are not permitted to use this library.

Copyright / Trademarks
 The copyright for this Users Guide belongs to Citizen Systems Japan Co., Ltd.
 CITIZEN is a registered trademark of Citizen Watch Co., Ltd.
 Windows and Windows Server are either registered trademarks or trademarks of Microsoft
Corporation in the United States and/or other countries.
 Pentium is a trademark or registered trademark of Intel Corporation or its subsidiaries in the United
States and other countries.
 QR Code and iQR Code are registered trademarks of DENSO WAVE INCORPORATED in Japan
and in other countries.
 Android is a trademark of Google Inc.
 IOS is a trademark or registered trademark of Cisco in the U.S. and other countries and is used
under license.
 Oracle and JavaScript are registered trademarks of Oracle and/or its affiliates.
All other company and/or brand/product names are trademarks and/or registered trademarks of their
respective owners.

-3- CITIZEN SYSTEMS JAPAN

 CITIZEN Layout SDK

Table of Contents

Revision history .........................................................................2

Permission Notice ......................................................................3

Copyright / Trademarks .............................................................3

Table of Contents .......................................................................4

1. Preparation .............................................................................6
1.1 Operating Environment ............................................................................................... 7

1.2 System Outline ............................................................................................................. 8

1.3 Installation .................................................................................................................. 13

1.4 Uninstallation ............................................................................................................. 15

2. Layout Editor ........................................................................16

2.1 Starting up and Exiting the Layout Editor ............................................................... 17

2.2 Layout Editor Overview ............................................................................................. 19

2.3 Using the Layout Editor ............................................................................................ 21

2.4 Common Operations for the Layout Editor ............................................................. 32

2.4.1 Setting up the Layout Properties ........................................................................ 32
2.4.2 Frame Operation Procedures ............................................................................. 33
2.4.3 Basic Parts Operations ....................................................................................... 37
2.4.4 Save As ............................................................................................................... 41
2.4.5 Save .................................................................................................................... 41
2.4.6 Print..................................................................................................................... 42
2.4.7 Print Preview ....................................................................................................... 42
2.4.8 Export.................................................................................................................. 43
2.4.9 Import .................................................................................................................. 44

2.5 Inserting Parts ............................................................................................................ 45

2.5.1 Inserting Characters ........................................................................................... 45
2.5.2 Inserting an Image .............................................................................................. 48
2.5.3 Inserting a Barcode............................................................................................. 50
2.5.4 Inserting Numbering ........................................................................................... 53
2.5.5 Inserting Numbering (Barcode) .......................................................................... 56

-4- CITIZEN SYSTEMS JAPAN

 CITIZEN Layout SDK

2.5.6 Inserting Date and Time ..................................................................................... 59

2.6 Inserting Figures ........................................................................................................ 62

2.6.1 Inserting a Straight Line ...................................................................................... 62
2.6.2 Inserting a Rectangle .......................................................................................... 64
2.6.3 Inserting a Circle or Oval .................................................................................... 66
2.6.4 Inserting a Polygon ............................................................................................. 68
2.6.5 Inserting an Arc, Pie or Chord ............................................................................ 70
2.6.6 Inserting a Polyline ............................................................................................. 72
2.6.7 Inserting a Free Line ........................................................................................... 74
2.6.8 Inserting a Bezier Curve ..................................................................................... 76

2.7 Changing the Layout ................................................................................................. 78

2.7.1 Assigning vertical and horizontal coordinates for the part .................................. 78
2.7.2 Aligning the Parts ................................................................................................ 78
2.7.3 Changing the Order ............................................................................................ 79
2.7.4 Setting up Groups ............................................................................................... 80
2.7.5 Locking................................................................................................................ 80

2.8 Preferences ................................................................................................................ 81

2.8.1 Preferences ........................................................................................................ 81
2.8.2 Display Settings .................................................................................................. 85

3. Layout File Manager .............................................................87

3.1 Starting up and Exiting Layout File Manager ......................................................... 88

3.2 Layout File Manager Overview ................................................................................. 89

3.3 File Operations ........................................................................................................... 91

3.3.1 Selecting a Folder ............................................................................................... 91
3.3.2 Creating a New File ............................................................................................ 92
3.3.3 Opening a File .................................................................................................... 92
3.3.4 Rename .............................................................................................................. 93
3.3.5 Print..................................................................................................................... 93
3.3.6 Print Preview ....................................................................................................... 93
3.3.7 Creating a New Folder ........................................................................................ 94
3.3.8 Moving ................................................................................................................ 95
3.3.9 Copy.................................................................................................................... 96
3.3.10 Delete.................................................................................................................. 97

3.4 Bookmark ................................................................................................................... 98

3.5 Display Setting ........................................................................................................... 99

-5- CITIZEN SYSTEMS JAPAN

 CITIZEN Layout SDK

1. Preparation

1 Preparation

-6- CITIZEN SYSTEMS JAPAN

 CITIZEN Layout SDK

1.1 Operating Environment

To enjoy all the benefits of Layout SDK, the host system needs to satisfy the following requirements;
Please be sure to check before installation.

 Windows PC ( Development environment / Execution environment )

CPU : Pentium 1.0 GHz or higher with the OS requirement satisfied
Memory : 1GB or more with the OS requirement satisfied
HDD : Free space of 10MB or more for installation
Monitor : Resolution of 1024x768 or above and High Color (16bit) or above
OS : Windows XP, Windows 7 (32bit, 64bit),
Windows 8 (32bit, 64bit), Windows 8.1 (32bit, 64bit),
Windows 10 (32bit, 64bit),
Windows Server 2008, Windows Server 2008R2,
Windows Server 2012
Software : .NET Framework 4.0
CITIZEN Printer Driver

– Reference –
To print from Android terminal must meet the following configuration.
 Android terminal ( Execution environment )
OS : Android 2.3.3(API 10) or newer for Wi-Fi, Bluetooth interface
Android 3.1(API 12) or newer for Wi-Fi, Bluetooth, USB Host interface
Software : Android POS Print SDK Version 1.14 or newer
* Requires a Windows PC for creating the layout.

To print from iOS terminal must meet the following configuration. ( Preliminary )
 iOS terminal ( Execution environment )
Web browser : HTML5 supported
Software : iOS POS Print SDK Version 1.16 or newer
* Requires a Windows PC for creating the layout.

-7- CITIZEN SYSTEMS JAPAN

 CITIZEN Layout SDK

1.2 System Outline

Layout SDK is a basic set of all platforms, and it consists of Layout Editor, Layout File Manager,
Windows Layout SDK.
Output can be transmitted only to a Citizen Systems printer. Layout SDK are also resourceful in
preparing/designing labels and receipts.

The outline of each tool is provided as follows;

 Layout Editor
Prepares the print layout.
The display window consists of tools necessary for layout editing process.

 Layout File Manager

Manages the prepared layout files.
Displays the list of files, thumbnails or comments within the layout.

 Windows Layout SDK

Executes printing by setting up the printing data with VB-like I/F for the selected layout.
This engine is suppossed to be called by applications in upper layer

- Note -
Please do not create a layout file with the new version of the Layout Editor than the Layout SDK.
The Layout SDK may fail to load the layout file.

-8- CITIZEN SYSTEMS JAPAN

 CITIZEN Layout SDK

 System diagram
Layout SDK Basic set

Layout SDK Extension

General-purpose printing function

Windows
Layout Editor User-created
Export

Layout File Layout File

( CLF ) ( XML )

Windows Android iOS

Windows Android iOS

App App App

Windows Android iOS

Layout SDK Layout SDK Layout SDK

Windows Android iOS

Printer Driver POS Print SDK POS Print SDK

Printer Printer Printer

Windows font Printer font Printer font

-9- CITIZEN SYSTEMS JAPAN

 CITIZEN Layout SDK

- Notes -
 The difference due to the operation environment - General

Windows Android iOS

Layout Editor ○*1 ×*2

Layout File Manager ○*1 ×

○*1, *3 ○*4 ○*5

Layout SDK
( Windows ) ( Android ) ( iOS )

・Wired / Wireless LAN

・USB ・Wired / Wireless LAN
・Wired / Wireless LAN
Interface ・Bluetooth*6 ・Bluetooth
・Bluetooth
・COM*6 ・USB
・LPT

Supported by the CITIZEN Supported by “Android POS Supported by “iOS POS

Printer *7 *8
printer driver. Print SDK” Print SDK”

* 1: It is Layout SDK basic set.

* 2: Please use the tool for Windows.

* 3: For more information, please refer to the "Windows Layout SDK Programming Manual".

* 4: For more information, please refer to the "Android Layout SDK Programming Manual".

* 5: For more information, please refer to the "iOS Layout SDK programming manual".

* 6: on the specifications of interface, there is a case where the data transfer rate is insufficient. Please take sufficient
verification.
* 7: For more information, please refer to the "Android POS Print SDK Programming Manual".

* 8: For more information, please refer to the "iOS POS Print SDK Programming Manual".

- 10 - CITIZEN SYSTEMS JAPAN

 CITIZEN Layout SDK

 The difference due to the operation environment - Printing

Windows Android iOS

Layout File format CLF XML

Limit of layout No limit Some restrictions (see Appendix)

Layout printing
High Some restrictions
reproducibility

Print preview of under

Yes No
execution environment

Print Languages by Windows by the printer

Print data Graphics-based Command-based

Printer function
·Cutter
·Buzzer Yes *1 Yes *2
·Drawer
·NV logo

Print completion
No Yes *3 Yes*4
detection

*1 : Available by setting the printer driver.

*2 : Available by setting the export of the Layout Editor.

*3 : This library is using the print completion detection function of Android POS Print SDK.
*4 : This library is using the print completion detection function of iOS POS Print SDK.

- 11 - CITIZEN SYSTEMS JAPAN

 CITIZEN Layout SDK

 The difference due to the operation environment - Layout parts limitation

Layout parts Windows Android iOS

Characters No Some limitations

Image No Some limitations

Some limitations
Supported :

QR Code, EAN-13, EAN-8, UPC-A, UPC-E, Codabar, ITF,

Barcord No
Code 39, Code 93, Code 128, GS1-128, PDF417

Unsupported :

MaxiCode, Data Matrix, GS1 Composite, GS1 Databar, iQR

Numbering,
No Unsupported
Numbering barcode

Figures ( Straight Line,

No Some limitations
Rectangle )

Figures ( Circle,
Polygon, Arc, Polyline,
No Unsupported
Free Line, Bezier
Curve )

- 12 - CITIZEN SYSTEMS JAPAN

 CITIZEN Layout SDK

1.3 Installation

Procedure for installing Layout SDK ( Layout Editor, Layout File Manager, Windows Layout SDK ) on the
PC:
Please check if the operating environment requirements are satisfied and terminate all other programs
on the PC before installation.

1. Double-click [Setup_en].

2. Click the [Next] button.

3. Read the License Agreement and check “I accept the terms of the license agreement.”
4. Click the [Next] button.

- 13 - CITIZEN SYSTEMS JAPAN

 CITIZEN Layout SDK

5. Select “Developers” and click the [Next] button.

6. Installation will begin.

7. Upon completion of installation click the [Finish] button to exit setup.

- 14 - CITIZEN SYSTEMS JAPAN

 CITIZEN Layout SDK

1.4 Uninstallation

Procedures for uninstalling Layout SDK from the PC:

Please terminate all other programs on the PC before uninstalling.

1. Open the Control Panel.

2. Open “Uninstall Program”
3. Double-click “CITIZEN Layout SDK”
4. “User Account Control” dialog box will be displayed. Click the [Continue] button.
5. A confirmation message will be displayed. Click the [Yes] button.
6. Uninstallation will begin.
7. Uninstallation will be completed. Click the [Finish] button.

- Note -
The PC may request for rebooting of Windows after completion of uninstallation.
Follow the message and reboot the system.

- 15 - CITIZEN SYSTEMS JAPAN

 CITIZEN Layout SDK

2. Layout Editor

2 Layout Editor

- 16 - CITIZEN SYSTEMS JAPAN

 CITIZEN Layout SDK

2.1 Starting up and Exiting the Layout Editor

 Procedure for starting up the Layout Editor:

- In Windows 8 or Windows 8.1

1. Tap “Layout Editor” tile on the Start screen.
2. Layout Editor will start up.

- In other Windows
1. Click the [Start] button displayed at the bottom left of the Desktop.
2. Click “All Programs”
3. Click “CITIZEN”
4. Click “Layout SDK”
5. Click “Layout Editor”
6. Layout Editor will start up.

- Note -
If you want to print by the mobile terminal ( Android, iOS ), please click "Printer
font" in preferences and put a check on it.

- Note -
The “Information” dialog box will be displayed at Layout Editor start up.

If you prefer not to receive this message in the future, please check the "Don't
show this message again" option and click the [OK] button.

- 17 - CITIZEN SYSTEMS JAPAN

 CITIZEN Layout SDK

 Procedure for exiting Layout Editor

1. Click “File” - “Exit” on the Menu Bar.

- Note -
If any changes have been made to the displayed file, a saving confirmation
dialog will be displayed.

[Yes] button: Exits the program after saving the file.

[No] button: Exits the program without saving the file.
[Cancel] button: File editing will be continued.

2. Exit the Layout Editor.

- 18 - CITIZEN SYSTEMS JAPAN

 CITIZEN Layout SDK

2.2 Layout Editor Overview

This section describes the terms and functions of the Layout Editor display screen.

Insert Toolbar Menu Bar Main Toolbar Layout Toolbar

[Layout Properties] button

Frame tab

Scroll bar Property editing area

Ruler

Layout editing area

Status Bar

Functions
Name Function
Menu Bar Provides access to various functions.
Main Toolbar Displays the default tools for Windows applications.
Displays the tools that are most often used in layout editing.
Layout Toolbar
(See 2.7 Changing the Layout).

Displays the tools for field insertion.

Insert Toolbar
(See 2.5 Inserting Parts and 2.6 Inserting Figures).

Layout editing area Executes field input and layout editing.

Displays or changes the properties of the selected field.
Properties editing area
(See 2.5 Inserting Parts and 2.6 Inserting Figures).

Displays the prepared frame.

Frame tab
(See 2.4.2 Frame Operation Procedures).

Status Bar Displays the status.

- 19 - CITIZEN SYSTEMS JAPAN

 CITIZEN Layout SDK

The Main Toolbar shows the most commonly used tools in the application

Names and functions of Main Toolbar buttons

Button Name Function
New Prepares a new document.

Open Opens a saved file.

Save Saves the file that is being edited.

Print Prints the file that is being edited.

Print Preview Displays the print preview for the file that is being edited.

Undo Invalidates the previous operation.

Redo Redoes the invalidated operation.

Cut Cuts the selected part and copies it onto the clipboard.

Copy Copies the selected part onto the clipboard.

Paste Pastes the part on the clipboard.

Zoom Out Reduces the zoom magnification by 25%.

Zoom In Increases the zoom magnification by 25%.

Zoom Menu Selects the zoom magnification.

[Layout Properties] Displays the layout properties window.

button (Displays the name of printer that is set up.)

- 20 - CITIZEN SYSTEMS JAPAN

 CITIZEN Layout SDK

2.3 Using the Layout Editor

This section describes the basic operation procedures for Layout Editor by preparing a sample layout.

 Sample layout

Frame1
(image + text)

Layout Editor

Frame2
(numbering barcode)

Frame3 (figure)

 Layout specifications
Paper size: 80 х 297mm
Frame length: 20mm
[Logo mark image]
Format: Bitmap
Frame1
[Text]
Size: 9pt
Font: Times New Roman
Frame length: 20mm
[Numbering barcode]
Type: Code39 Frame2
・ The number starts from 1234 and is incremented by 1.
・ Displays the legible character set below the barcode.
Frame length: 5mm
[Straight line]
Line width: 1mm Frame3
Shape: Broken

- 21 - CITIZEN SYSTEMS JAPAN

 CITIZEN Layout SDK

 Start up the Layout Editor.

1. Start up the Layout Editor.

(See 2.1 Starting up and Exiting Layout Editor).

- Note -
The initial zoom setting on the screen is 100%.
Set up the zoom magnification from the Zoom menu on the Main Toolbar if
necessary.
(See 2.8.2 Display settings).

 Set up the layout properties.

1. Select “File” -“Layout Properties” on the Menu Bar or click the [Layout Properties] button on the
Main Toolbar.

- 22 - CITIZEN SYSTEMS JAPAN

 CITIZEN Layout SDK

2. Only the Citizen printers that are installed will be displayed on the list. Select the printer to be
used from the list.
3. Select the paper. Here, select “A4 length 80×297mm 42c” (select to suit your printer).
4. Click the [OK] button.
(See 2.4.1 Setting up the Layout Properties).

 Set up the size of Frame1.

1. Input “20” for [Length] in properties editing area.

2. Click inside the Layout editing area.

 Specify the image assignment area.

1. Click the [Image] button on Insert Toolbar.
2. Move the mouse pointer (cross-shaped cursor) to the Layout editing area.

3. Highlight the area for the image to be assigned by dragging the cursor in the right and
downward direction.

- 23 - CITIZEN SYSTEMS JAPAN

 CITIZEN Layout SDK

- Note -
Inserting can be canceled by pressing the [ESC] key during the procedure.
Prepare the assignment area within the print area. The print area is indicated as
the red line on the Layout editing area.
(See 3.5 Display Settings).

4. The image assignment area will be displayed.

- Note-
To delete the inserted assignment area, click the image to be deleted and press
the [Delete] key.

 Set up the image properties.

1. Select the [DefaultPath] input field and click the button.

2. An “Open” dialog box will be displayed.

3. Select the image file to be inserted and click the [Open] button.

- 24 - CITIZEN SYSTEMS JAPAN

 CITIZEN Layout SDK

4. The image file will be inserted within the assignment area.

5. Click the blank section in the Layout editing area and cancel the selection of the image part.

 Input the text.

1. Click the [Text] button on Insert Toolbar.

2. Specify the assignment area.

(See 2.3 Using Layout Editor ■ Specify the image assignment area).

- 25 - CITIZEN SYSTEMS JAPAN

 CITIZEN Layout SDK

3. Input “Layout Editor” in [DefaultText].

4. Click the [Font] input field and click the button.

5. The “Font” dialog box will be displayed.

6. Select “Times New Roman” for [Font Name] and “9” for [Size], and then click the [OK] button.

- 26 - CITIZEN SYSTEMS JAPAN

 CITIZEN Layout SDK

7. Text will be inserted.

 Insert Frame2.
1. Right-click on “Frame1” of the frame tab.

2. Click “Insert” from the menu.

3. “Frame2” will be added.

- 27 - CITIZEN SYSTEMS JAPAN

 CITIZEN Layout SDK

4. Set up the length of Frame2 to “20”

(See 2.3 Using Layout Editor ■ Specify the size of Frame1).

5. Click the space within the Layout editing area.

 Insert the numbering barcode.

1. Click the [Numbering (Barcode)] button on Insert Toolbar.

2. Specify the assignment area.

(See 2.3 Using Layout Editor ■ Specify the image assignment area).

3. Input “1” as the increment value in [Increment].

4. Input the initial value “1234” in [Initial].
5. Select “Code39” from the pull-down menu of [CodeType].
6. Select “DspOn” for human readable interpretation line from the pull-down menu of [ChrDisplay].

- 28 - CITIZEN SYSTEMS JAPAN

 CITIZEN Layout SDK

7. The numbering barcode will be inserted.

 Add Frame3.

1. Right-click on “Frame2” of the frame tab and click “Insert”

(See 2.3 Using Layout Editor ■ Insert Frame2).

2. Set up the length of Frame3 to “5”

(See 2.3 Using Layout Editor ■ Specify the size of Frame1).

3. Click the space within the Layout editing area.

 Insert a broken line.

1. Click the [Straight Line] button on Insert Toolbar.

- 29 - CITIZEN SYSTEMS JAPAN

 CITIZEN Layout SDK

2. Click the beginning point of the broken line and drag to the ending point while pressing the [Shift]
key.

- Note -
A horizontal straight line can be inserted by dragging while pressing the [Shift] key.

Select "Dash" from the pull down menu [Stroke Dash Style] for altering the style.
Enter "1" for line width under [Stroke Width].
3. A broken line will be inserted.

- 30 - CITIZEN SYSTEMS JAPAN

 CITIZEN Layout SDK

 Check the print image.

1. Click the [Print Preview] button on Main Toolbar.

2. “Print Preview” dialog box will be displayed.

3. To check the entire or more details, select desired zoom magnification under zoom menu on
“Print Preview” dialog box.

4. Click the “Close” button and close the “Print Preview” dialog box.

Correct the layout in each frame based on the preview results.

(See 2.4.3 Basic Parts Operations).

- 31 - CITIZEN SYSTEMS JAPAN

 CITIZEN Layout SDK

2.4 Common Operations for the Layout Editor

2.4.1 Setting up the Layout Properties

Procedures for selecting paper size and printer set up:

1. Click “File” -“Layout Properties” of the Menu Bar or click the [Layout Properties] button on Main
Toolbar.

2. The “Layout Properties” dialog box will be displayed.

3. Select the printer to output from the pull-down menu under [Name].
4. Select the paper size to be used from the pre-defined list of paper sizes.
5. Click the [OK] button.

- Note -
The “Layout Properties” dialog box is displayed first when a new file is created.
The changes made to the default settings on the first dialog box will be saved.
To change the settings during layout, the dialog box can be displayed according
to the pre-defined steps.

- 32 - CITIZEN SYSTEMS JAPAN

 CITIZEN Layout SDK

2.4.2 Frame Operation Procedures

Layout editor can prepare layouts by dividing the input into frames along the vertical direction of the
paper.
This section describes the relationship between the output image and the frame along with frame
operation procedures.

 Relationship between output image and frame

When multiple frames are prepared with Layout Editor, the frames displayed in “Frame Tab” are
assembled from left to right to generate the output image.

Output image Layout Editor frame tabs

FrameA

FrameB

….Sample image….
FrameC

 Adding a frame

1. Right-click on the name of the frame on the frame tab.

2. Menu will be displayed. Click “Insert”
3. A new frame will be inserted on the right of the existing frame.

 Deleting a frame

1. Right-click on the frame to be deleted.

2. Menu will be displayed. Click “Delete”

- 33 - CITIZEN SYSTEMS JAPAN

 CITIZEN Layout SDK

3. A confirmation message for deletion will be displayed. Click the [Yes] button.

- Note -
When a frame is deleted, all parts laid out in the frame will also be deleted.

 Changing the name of a frame

1. Right-click on the frame to change the name.

2. Menu will be displayed. Click “Rename”

3. The name of the frame will be highlighted. Input the new frame name.
4. Press the [Enter] key to confirm.

- Note -
It is also possible to change the frame name from [(Name)] in the Frame
Properties editing area.

- 34 - CITIZEN SYSTEMS JAPAN

 CITIZEN Layout SDK

 Copying a frame

1. Right-click on the frame to be copied.

2. Menu will be displayed. Click “Copy”
3. The copied frame will be inserted on the right of the original frame.

- Note -
Frame copying will copy all parts laid out on the original frame as well as the
frame attributes.

 Moving a frame

1. Drag the name of the frame to be moved to the desired position.

- 35 - CITIZEN SYSTEMS JAPAN

 CITIZEN Layout SDK

 Frame properties
Layout Editor enables properties to be set up for each frame.
Click the blank section in the Layout editing area to display the frame properties.

Property name Description

Size
Landscape*1 Set horizontal frame layout.
*1
Length Set frame height.
Width*1 Frame width, Not editable.
Others
IsDefault Set current frame as base frame.
Locked Set frame lock.
*1
Printable Set printing permission to frame.
Design
(Name) *1 Set name to frame.
Use frame name, keyword and part name simultaneously to search and
Search
print coupons.
*1
Frame Name Click [FrameName] to select frames.
*1
Keyword Set search keyword.
Parts Name*1 Click [PartsName] to select parts.
*1
: This property supports the mobile terminal ( Android, iOS ).

- 36 - CITIZEN SYSTEMS JAPAN

 CITIZEN Layout SDK

2.4.3 Basic Parts Operations

This section describes the basic operation procedures for moving, rotating etc. of the inserted parts.

 Parts operations and pointer shape

The available operations vary depending on the type of parts or the location pointed to by the mouse
pointer.
The mouse pointer shape will also change depending on the operations available.

Parts operations and pointer shape

Pointer position
Shape Operation
(Marker shape)

The part can be selected or moved. Inside the part frame

Moves the configuration point for the part. Part configuration point (●)

Scales up/down the part frame (part) simultaneously in Four corners of the part frame
vertical and horizontal directions. (□)

Center of the four sides of the

Scales up/down the part frame (part).
part frame (□)

Four corners of the part frame

Rotates the part.
(●)
Changes the ratio of a rounded rectangle corner.
Left top of a rectangle (●)
(See 2.6.2 Inserting a Rectangle).

 Select an inserted part.

To edit the inserted part:

1. Click the [Select Objects] button on Insert Toolbar.
2. Click the part to be edited or click inside the part frame to select it. To select multiple parts,
click the parts while pressing the [Shift] key.

- 37 - CITIZEN SYSTEMS JAPAN

 CITIZEN Layout SDK

- Note -

When a part is selected, □ markers are displayed around the part as shown in
the figure.
Press the [A] key while pressing the [Ctrl] key to select all inserted parts.
To cancel selection, click in the blank space or press the [ESC] key.

 Scale up/down a part.

The size of an inserted part is changed or the size of a text frame is changed to an appropriate size.
There are 2 ways to change the size of an inserted part.

<Dragging the marker to change>

1. Click the part to be changed and drag □ (the marker) on the outer frame. Dragging any of the
markers on four corners can change the size simultaneously in vertical and horizontal
directions.

- Note -
It is possible to scale up/down while maintaining the aspect ratio by pressing the
[Shift] key while dragging a corner marker.

<Inputting the part size>

1. Select the part to be changed.

2. Input the size of the outer frame (width, height) in [Size] in the Properties editing area.

- 38 - CITIZEN SYSTEMS JAPAN

 CITIZEN Layout SDK

 Move an inserted part.

There are 2 ways to move an inserted part.

<Dragging to the desired position>

1. Click inside the part to be moved and drag it to the desired position.

<Moving by specifying the position>

1. Select the part to be moved.

2. Input the top left corner coordinates (left position, top position) of the outer frame for the part
under [Location] of the Properties editing area.

 Rotate an inserted part.

An inserted part is rotated.

The rotation angle can be 0, 90, 180 or 270 degrees.
There are 2 ways to rotate a part.

<Dragging to rotate>

1. Select the part.

2. Click on any of the red circles displayed around the corners and drag them according to the
desired angle.

- 39 - CITIZEN SYSTEMS JAPAN

 CITIZEN Layout SDK

<Inputting the rotation angle>

1. Select the part.

2. Select the rotation angle from the pull-down menu of [Rotation] in the Properties editing area.

- 40 - CITIZEN SYSTEMS JAPAN

 CITIZEN Layout SDK

2.4.4 Save As

A prepared file is saved with a name.

1. Click “File” — “Save As” on the Menu Bar.
2. “Save As” dialog box will be displayed.
3. Specify the folder to save the file.
4. Input the name under “File Name”
5. Click the [Save] button.

- Note -
The files prepared by Layout Editor will be saved with “.CLF” extensions.
"CLF" file can be used from the application on Windows PC.

2.4.5 Save

To save the edited file:

“Save As” dialog box will be displayed if the file has never been saved.
(See 2.4.4 Save As)

1. Click the [Save] button on Main Toolbar.

- 41 - CITIZEN SYSTEMS JAPAN

 CITIZEN Layout SDK

2.4.6 Print

To print a particular file:

1. Click the [Print] button on Main Toolbar.

2. “Print” dialog box will be displayed. The settings specified in layout properties will be displayed
in the dialog box.
(See 2.4.1 Setting up the Layout Properties).

3. Change them if necessary.

4. Click the [OK] button.

2.4.7 Print Preview

The print preview for a prepared file is displayed.

1. Click the [Print Preview] button on Main Toolbar.

2. “Print Preview” dialog box will be displayed.

(See 2.1 Using Layout Editor ■ Check the print image).

3. To check details, change the zoom magnification from the pull-down menu of the Zoom Menu.
4. Click the [Close] button.

- 42 - CITIZEN SYSTEMS JAPAN

 CITIZEN Layout SDK

2.4.8 Export

To export the edited file for the mobile terminal ( Android, iOS ):

- Note -
Export is disabled at default. If you want to use the export, please click "Printer
font" in preferences and put a check on it.

- Note -
XML file format by the export does not include all of the layout information. If the
re-editing of the layout is required, please save in CLF file format always.

1. Click “File” — “Export” on the Menu Bar.

2. “Driver Settings” dialog box will be displayed.

3. Change them if necessary.
(Features are similar to the Windows driver, functions will work in the mobile terminal ( Android, iOS )).

4. Click the [OK] button.

5. “Export Layout for Mobile” dialog box will be displayed.
6. Specify the folder to save the file.
7. Input the name under “File Name”
8. Click the [Save] button.

- Note -
The layout is saved with the extension "XML".
"XML" file can be used from the app on the mobile terminal ( Android, iOS ).

- 43 - CITIZEN SYSTEMS JAPAN

 CITIZEN Layout SDK

2.4.9 Import

To import the saved file for the mobile terminal ( Android, iOS ):

- Note -
Import is disabled at default. If you want to use the export, please click "Printer
font" in preferences and put a check on it.

1. Click “File” — “Import” on the Menu Bar.

2. “Import Layout for Mobile” dialog box will be displayed.
3. Select the file to import
4. Click the [OK] button.
5. "Layout Properties" dialog box will be displayed.
6. Select the printer and paper.
7. Click the [OK] button.

- 44 - CITIZEN SYSTEMS JAPAN

 CITIZEN Layout SDK

2.5 Inserting Parts

2.5.1 Inserting Characters

Text parts are inserted.

- Note -
In the mobile terminal to use the printer fonts, the print results might be different
from the display.

1. Click the [Text] button on Insert Toolbar

2. Specify the area to insert the text part.
(See 2.3 Using Layout Editor).

3. Input the character series to be displayed in [Default Text] of the Properties editing area.
4. Change the attributes in the Properties editing area if necessary.

<Changing the font>

1. Click the [Font] input field in the Properties editing area.
2. Click the button.

3. “Font” dialog box will be displayed.

4. Select the font name, style and size from the lists.
5. Click the [OK] button.

- 45 - CITIZEN SYSTEMS JAPAN

 CITIZEN Layout SDK

Text properties
Name Description
Misc
Set text flip.
IsReversal
(No: False, Yes: True)
Text frame
CharacterSpacing Set text.
Set row alignment.
LineAlignment
(Top: Top, Center: Middle, Bottom: Bottom)
LineSpacing Set line spacing.
Set text alignment.
TextAlignment*1
(Left: Left, Center: Center, Right: Right, Justify: Justify)
Set text orientation.
TextDirection
(Horizontal: Horizontal, Vertical: Vertical)
Set text auto return.
TextWrapping
(Yes: Wrap, No: NoWrap)
Design
(Name) *1 Set name to part.
DefaultText*1 Input the text to be displayed.
Font
Font Set text font (Typeface/Size/Style).
FontColor Set text color.
FontColorAlpha Set text opacity (0: transparent - 255: solid).
FontStretchX Set text horizontal scale.
FontStretchY Set text vertical scale.
Printer Font
Bold*1 Set the emphasized characters. (No: False, Yes: True)
*1
Font Set printer font (FontA/FontB/FontC).
*1
Height Set magnification of characters height (1-8 times).
Reverse*1 Set the black/white inverted printing. (No: False, Yes: True)
*1
Underline Set underline. (No: False, Yes: True)
*1
Width Set magnification of characters width (1-8 times).
Behavior
Set part flip.
FlipType (No: None, Horizontal: Horizontal, Vertical: Vertical,
Horizontal and vertical: Both)
Location*1 Set part position (X, Y).
Locked Set part lock. (No: False, Yes: True)

- 46 - CITIZEN SYSTEMS JAPAN

 CITIZEN Layout SDK

Rotation*1 Set part rotate angle (0/90/180/270).

*1
Size Set part size (width, height).
SkewAngleX Set part horizontal slant angle.
SkewAngleY Set part vertical slant angle.
Outline
IsOutline Set outline. (No: False, Yes: True)
OutlineColor Set outline color.
OutlineColorAlpha Set outline opacity (0: transparent - 255: solid).
OutlineLineJoin Set outline combine shape.
OutlineWidth Set outline width.
*1
: This property supports the mobile terminal ( Android, iOS ).

- 47 - CITIZEN SYSTEMS JAPAN

 CITIZEN Layout SDK

2.5.2 Inserting an Image

An image part is inserted.

Select an image to be inserted from the desired folder.

- Note -
Image formats that can be used : BMP, GIF, JPG, JPEG, PNG, ICO, EMF, WMF
Recommended image formats : Monochrome (1bpp) PNG

- Note -
In the mobile terminal to use the printer fonts, the print results might be different
from the display.

1. Click the [Image] button on Insert Toolbar.

2. Specify the image part assignment area.
(See 2.3 Using Layout Editor).

3. Click the [DefaultPath] input field in the Properties editing area.

4. Click the button.

5. “Open” dialog box will be displayed. Select the image file to be inserted.
6. Click the [Open] button.
7. Change the attributes in the Properties editing area if necessary.

- 48 - CITIZEN SYSTEMS JAPAN

 CITIZEN Layout SDK

Image properties
Name Description
Design
(Name) *1 Set name to part.
DefaultPath*1 Set image file.
Set how the image is displayed.
(Dot by dot: Normal,
SizeMode*1,*2
Fit to part: StretchImage (FixedAspect = False),
Fit to part with fixed aspect ratio: Zoom (FixedAspect = True))
Adjustment
Brightness*1 Set brightness (-100 – 100).
Contrast*1 Set contrast (-100 – 100).
*1
GammaCorrection Set gamma correction (0.01 – 5.00).
Set monochrome.
*1
Monochrome (None, Threshold, Dither1, Dither2,
ErrorDiffusion1, ErrorDiffusion2)
ThresholdValue*1 Set threshold for monochrome.
Operation
Set part flip.
FlipType (No: None, Horizontal: Horizontal, Vertical: Vertical,
Horizontal and vertical: Both)
*1
Location Set part position (X, Y).
Locked Set part lock. (No: False, Yes: True)
Rotation*1 Set part rotate angle (0/90/180/270).
*1
Size Set part size (width, height).
SkewAngleX Set part horizontal slant angle.
SkewAngleY Set part vertical slant angle.
Frame
IsFrame Set frame line. (No: False, Yes: True)
StrokeAlpha Set frame line color opacity (0: transparent – 255: solid).
StrokeColor Set frame line color.
StrokeDashCap Set dashed line end style.
StrokeDashStyle Set frame line style.
StrokeLineJoin Set frame line combine shape.
StrokeWidth Set frame line width.
*1
: This property supports the mobile terminal ( Android, iOS ).
*2
: StretchImage of SizeMode is not supported in Android, iOS. It will operate as a " Normal ".

- 49 - CITIZEN SYSTEMS JAPAN

 CITIZEN Layout SDK

2.5.3 Inserting a Barcode

A barcode part is inserted.

- Note -
In the mobile terminal ( Android, iOS ) to use the printer fonts, the print results
might be different from the display.

1. Click the [Barcode] button on Insert Toolbar.

2. Specify the assignment area for the barcode part.
(See 2.3 Using Layout Editor).

3. Input the code to be generated in [DefaultCode] under the Properties editing area.
4. Select the type of barcode to be generated from the pull-down menu of [CodeType] under the
Properties editing area.
5. Change the attributes from the Properties editing area if necessary.

Barcode properties
Name Description
Design
(Name) *1 Set name to part.
*1
DefaultCode Set barcode data.
Barcode
CellAdjust Set correction level by dot for 2D cell size and barcode bar width.
*1
CellPitch Set cell pitch for 2D, bar pitch for 1D barcode.
Set symbology.
(QR Code, EAN-13, EAN-8, UPC-A, UPC-E, Codabar, ITF, Code 39, Code 93,
CodeType*1
Code 128, GS1-128, MaxiCode, PDF417, Data Matrix, GS1 Composite, GS1
Databar, iQR)
FontName Set font for human readable interpretation.
*1
QuietZone Set margin for barcode.
Set error correction for QR Code.
EccLevel*1
(L (7%), M (15%), Q (25%), H (30%), S (50%))
Set model version for QR Code.
ModelNo
(Model 1, Model 2, Micro QR, Model 2 (GS1 format))
Version Set barcode version, “0” to auto.
*1
BarHeight Set barcode height.

- 50 - CITIZEN SYSTEMS JAPAN

 CITIZEN Layout SDK

Set display for human readable interpretation.

*1
ChrDisplay (No: DspOff, Yes: DspOn, Indication with 3mm fixing: DspOn3mm, Indication with
user-defined fonts: DspOnUser)
Set add-on for EAN-8/13, UPC-A/E.
OptEANUPC
(No: StandardE, Yes: AddOn)
Set check digit.
ChkDigit
(Yes: On, No: Off)
NwRatio Set ratio of wide and narrow bar space.
Set bearer bar for ITF.
OptITF
(No: StandardI, Yes: BearerBar)
Set codeset for CODE128, GS1-128 (EAN-128).
OptCODE128
(A: SetA, B: SetB, C: SetC, Automatic: SetAuto)
Set number of column.
PDF417Column*1
(Automatic: 0 or Standard/Truncated: 1 – 30, MicroPDF417: 1 – 4)
Set correction level for PDF417.
PDF417Ecc*1 (Auto, PDF0, PDF1, PDF2, PDF3, PDF4, PDF5, PDF6, PDF7, PDF8 and
MicroPDF417: Auto only)
Set model version for PDF417.
PDF417Model
(Standard, Truncated, MicroPDF417)
Set number of row.
PDF417Row*1
(Automatic: 0 or Standard/Truncated: 3 – 90, MicroPDF417: 4 – 44)
PDF417XYratio Set row height by ratio.
AtMark Set @ sequence interpretation. (ON, OFF)
Set code type for GS1 Composite.
(GS1DatabarOmniCCA, GS1DatabarOmniCCB, GS1DatabarTrncCCA,
GS1DatabarTrncCCB, GS1DatabarStkCCA, GS1DatabarStkCCB,
GS1DatabarStkOmniCCA, GS1DatabarStkOmniCCB, GS1DatabarLmtCCA,
CompositeModel
GS1DatabarLmtCCB, GS1DatabarExpCCA, GS1DatabarExpCCB,
GS1DatabarExpStkCCA, GS1DatabarExpStkCCB, EAN13CCA, EAN13CCB,
EAN8CCA, EAN8CCB, UPCACCA, UPCACCB, UPCECCA, UPCECCB,
EAN128CCA, EAN128CCB, EAN128CCC)
Set model for Data Matrix.
DmxModel
(Square, Rectangular, Sqr_GS1, Rect_GS1)
Set human readable on two-dimensional barcode in <ChrDisplay> =
Dsp2dStr
"DspOnUser". (ON, OFF)
Set view by using the escape sequence characters that can not be displayed. (ON,
EscapeStr
OFF)
iQRCompress Set data compression for iQR. (ON, OFF)

- 51 - CITIZEN SYSTEMS JAPAN

 CITIZEN Layout SDK

Set model for iQR.

iQRModel
(Square, Rectangular, Sqr_GS1, Rect_GS1)
Set mode for MaxiCode.
MaxiCodeMode
(Mode2, Mode3, Mode4, Mode5)
Set even number of Column (2 – 20, Only even) for GS1 Databar (RSS) Expanded
RssExpColum
Stacked.
RssHeight Set bar height.
Set model for GS1 Databar (RSS).
RssModel (GS1DatabarOmni, GS1DatabarTrnc, GS1DatabarStk, GS1DatabarStkOmni,
GS1DatabarLmt, GS1DatabarExp, GS1DatabarExpStk)
Operation
Set part flip.
FlipType (No: None, Horizontal: Horizontal, Vertical: Vertical,
Horizontal and vertical: Both)
*1
Location Set part position (X, Y).
Locked Set part lock. (No: False, Yes: True)
*1
Rotation Set part rotate angle (0/90/180/270).
*1
Size Set part size (width, height).
*1
: This property supports the mobile terminal ( Android, iOS ).

- Note -
The displayed details will vary depending on the type of barcode to be inserted.

- 52 - CITIZEN SYSTEMS JAPAN

 CITIZEN Layout SDK

2.5.4 Inserting Numbering

Numbering parts are inserted.

- Note -
Numbering parts are not supported in the mobile terminal ( Android, iOS ) and
export.

1. Click the [Numbering] button on Insert Toolbar.

2. Specify the assignment area for the numbering part.
(See 2.3 Using Layout Editor).

3. Input the increment value in [Increment] under the Properties editing area.
4. Input the initial value in [Initial] under the Properties editing area.
5. Change the attributes in the Properties editing area if necessary.

<Changing the font>

1. Click the [Font] input field of the Properties editing area.
2. Click the button.

3. “Font” dialog box will be displayed.

4. Select the font name, style and size from the lists.
5. Click the [OK] button.

- 53 - CITIZEN SYSTEMS JAPAN

 CITIZEN Layout SDK

Numbering properties
Name Description
Others
Set text flip.
IsReversal
(Yes: True, No: False)
Text frame
CharacterSpacing Set text tracking.
Set row alignment.
LineAlignment
(Top: Top, Center: Middle, Bottom: Bottom)
LineSpacing Set line spacing.
Set text alignment.
TextAlignment
(Left: Left, Center: Center, Right: Right, Justify: Justify)
Set text orientation.
TextDirection
(Horizontal: Horizontal, Vertical: Vertical)
Set text auto return.
TextWrapping
(Yes: Wrap, No: NoWrap)
Design
(Name) Set name to part.
Numbering
DecimalDigits Set the limit for number of digits after the decimal point.
Set hexadecimal notation.
Hexadecimal
(No: True, Yes: False)
Increment Set increment/decrement.
Index Set index of numbering.
Initial Set init value.
IntegralDigits Set the number of digit to be displayed.
PrefixText Set prefix character for Numbering.
SuffixText Set suffix character for Numbering.
Set 1000 separator (,).
ThousandsSeparator
(Yes: True, No: False)
Set zero-fill when fewer than the minimum number of digit.
ZeroFill
(Yes: True, No: False)
Font
Font Set text font (Typeface/Size/Style).
FontColor Set text color.
FontColorAlpha Set text opacity (0: transparent – 255: solid).
FontStretchX Set text horizontal scale.
FontStretchY Set text vertical scale.

- 54 - CITIZEN SYSTEMS JAPAN

 CITIZEN Layout SDK

Operation
Set part flip.
FlipType (No: None, Horizontal: Horizontal, Vertical: Vertical,
Horizontal and vertical: Both)
Location Set part position (X, Y).
Locked Set part lock. (No: False, Yes: True)
Rotation Set part rotate angle (0/90/180/270).
Size Set part size (width, height).
SkewAngleX Set part horizontal slant angle.
SkewAngleY Set part vertical slant angle.
Outline
Set outline.
IsOutline
(No: False, Yes: True)
OutlineColor Set outline color.
OutlineColorAlpha Set outline opacity (0: transparent – 255: solid).
OutlineLineJoin Set outline combine shape.
OutlineWidth Set outline width.

- 55 - CITIZEN SYSTEMS JAPAN

 CITIZEN Layout SDK

2.5.5 Inserting Numbering (Barcode)

Numbering (barcode) parts are inserted.

- Note -
Numbering (barcode) parts are not supported in the mobile terminal ( Android,
iOS ) and export.

1. Click the [Numbering (Barcode)] button on Layout Toolbar.

2. Specify the assignment area for the numbering (barcode) part.
(See 2.3 Using Layout Editor).

3. Input the increment value in [Increment] under the Properties editing area.
4. Input the initial value in [Initial] under the Properties editing area.
5. Select the type of barcode to be generated from the pull-down menu of [CodeType] under the
Properties editing area.
6. Change the attributes in the Properties editing area if necessary.
(See 2.5.3 Inserting a Barcode/2.5.4 Inserting Numbering).

Numbering (Barcode) properties

Name Description
Design
(Name) Set name to part.
Numbering
DecimalDigits Set the limit for number of digits after the decimal point.
Set hexadecimal notation.
Hexadecimal
(No: True, Yes: False)
Increment Set increment/decrement.
Index Set index of numbering.
Initial Set init value.
IntegralDigits Set number of digit for integer.
PrefixText Set prefix character for Numbering.
SuffixText Set suffix character for Numbering.
Set 1000 separator (,).
ThousandsSeparator
(Yes: True, No: False)
Set zero-fill when fewer than the minimum number of digit.
ZeroFill
(Yes: True, No: False)

- 56 - CITIZEN SYSTEMS JAPAN

 CITIZEN Layout SDK

Barcode
CellAdjust Set correction level by dot for 2D cell size and barcode bar width.
CellPitch Set cell pitch for 2D, bar pitch for 1D barcode.
Set symbology.
(QR Code, EAN-13, EAN-8, UPC-A, UPC-E, Codabar, ITF, Code 39, Code
CodeType
93, Code 128, GS1-128, MaxiCode, PDF417, Data Matrix, GS1 Composite,
GS1 Databar, iQR)
FontName Set the font for human readable interpretation.
QuietZone Set margin for barcode.
Set error correction for QR Code.
EccLevel
(L (7%), M (15%), Q (25%), H (30%), S (50%))
Set model version for QR Code.
ModelNo
(Model 1, Model 2, Micro QR, Model 2 (GS1 format))
Version Set barcode version, “0” to auto.
BarHeight Set barcode height.
Set for human readable interpretation.
ChrDisplay (No: DspOff, Yes: DspOn, Indication with 3mm fixing: DspOn3mm,
Indication with user-defined fonts: DspOnUser)
Set add-on for EAN-8/13, UPC-A/E.
OptEANUPC
(No: StandardE, Yes: AddOn)
Set check digit.
ChkDigit
(Yes: On, No: Off)
NwRatio Set ratio of wide and narrow bar space.
Set bearer bar for ITF.
OptITF
(No: StandardI, Yes: BearerBar)
Set codeset for CODE128, GS1-128 (EAN-128).
OptCODE128
(A: SetA, B: SetB, C: SetC, Automatic: SetAuto)
Set number of column.
PDF417Column
(Automatic: 0 or Standard/Truncated: 1 – 30, MicroPDF417: 1 – 4)
Set correction level for PDF417.
PDF417Ecc (Auto, PDF0, PDF1, PDF2, PDF3, PDF4, PDF5, PDF6, PDF7, PDF8 and
MicroPDF417: Auto only)
Set model version for PDF417.
PDF417Model
(Standard, Truncated, MicroPDF417)
Set number of row.
PDF417Row
(Automatic: 0 or Standard/Truncated: 3 – 90, MicroPDF417: 4 – 44)
PDF417XYratio Set row height by ratio.
AtMark Set @ sequence interpretation. (ON, OFF)

- 57 - CITIZEN SYSTEMS JAPAN

 CITIZEN Layout SDK

Set code type for GS1 Composite.

(GS1DatabarOmniCCA, GS1DatabarOmniCCB, GS1DatabarTrncCCA,
GS1DatabarTrncCCB, GS1DatabarStkCCA, GS1DatabarStkCCB,
GS1DatabarStkOmniCCA, GS1DatabarStkOmniCCB,
CompositeModel
GS1DatabarLmtCCA, GS1DatabarLmtCCB, GS1DatabarExpCCA,
GS1DatabarExpCCB, GS1DatabarExpStkCCA, GS1DatabarExpStkCCB,
EAN13CCA, EAN13CCB, EAN8CCA, EAN8CCB, UPCACCA, UPCACCB,
UPCECCA, UPCECCB, EAN128CCA, EAN128CCB, EAN128CCC)
Set model for Data Matrix.
DmxModel
(Square, Rectangular, Sqr_GS1, Rect_GS1)
Set human readable on two-dimensional barcode in <ChrDisplay> =
Dsp2dStr
"DspOnUser". (ON, OFF)
Set view by using the escape sequence characters that can not be
EscapeStr
displayed. (ON, OFF)
iQRCompress Set data compression for iQR. (ON, OFF)
Set model for iQR.
iQRModel
(Square, Rectangular, Sqr_GS1, Rect_GS1)
Set mode for MaxiCode.
MaxiCodeMode
(Mode2, Mode3, Mode4, Mode5)
Set even number of Column (2 – 20, Only even) for GS1 Databar (RSS)
RssExpColum
Expanded Stacked.
RssHeight Set bar height.
Set model for GS1 Databar (RSS).
(GS1DatabarOmni, GS1DatabarTrnc, GS1DatabarStk,
RssModel
GS1DatabarStkOmni, GS1DatabarLmt, GS1DatabarExp,
GS1DatabarExpStk)
Operation
Set part flip.
FlipType (No: None, Horizontal: Horizontal, Vertical: Vertical,
Horizontal and vertical: Both)
Location Set part position (X, Y).
Locked Set part lock. (No: False, Yes: True)
Rotation Set part rotate angle (0/90/180/270).
Size Set part size (width, height).

- 58 - CITIZEN SYSTEMS JAPAN

 CITIZEN Layout SDK

2.5.6 Inserting Date and Time

Date and time parts are inserted.

- Note -
Date and time parts are not supported in the mobile terminal ( Android, iOS ) and
export.

1. Click the [Date & Time] button on Layout Toolbar.

2. Specify the assignment area for the date and time part.
(See 2.3 Using Layout Editor).

3. Input the date in [Date] under the Properties editing area.

- Note -
The calendar will be displayed by clicking the pull-down menu of [Date].
It is also possible to input the date by clicking on a desired date in the calendar.

4. Input the time in [Time].

5. Change the attributes in the Properties editing area if necessary.

<Changing the font>

1. Click the [Font] input field in the Properties editing area.
2. Click the button.

3. “Font” dialog box will be displayed.

4. Select the font name, style and size from the lists.
5. Click the [OK] button.

- 59 - CITIZEN SYSTEMS JAPAN

 CITIZEN Layout SDK

Date & time properties

Name Description
Others
Set text flip.
IsReversal
(Yes: True, No: False)
Text frame
CharacterSpacing Set text tracking.
Set row alignment.
LineAlignment
(Top: Top, Center: Middle, Bottom: Bottom)
LineSpacing Set the line spacing.
Set text alignment.
TextAlignment
(Left: Left, Center: Center, Right: Right, Justify: Justify)
Set text orientation.
TextDirection
(Horizontal: Horizontal, Vertical: Vertical)
Set text auto return.
TextWrapping
(Yes: Wrap, No: NoWrap)
Design
(Name) Set name to part.
Font
Font Set text font (Typeface/Size/Style).
FontColor Set text color.
FontColorAlpha Set text opacity (0: transparent – 255: solid).
FontStretchX Set text horizontal scale.
FontStretchY Set text vertical scale.
Operation
Set part flip.
FlipType (No: None, Horizontal: Horizontal, Vertical: Vertical,
Horizontal and vertical: Both)
Location Set part position (X, Y).
Locked Set part lock. (No: False, Yes: True)
Rotation Set part rotate angle (0/90/180/270).
Size Set part size (width, height).
SkewAngleX Set part horizontal slant angle.
SkewAngleY Set part vertical slant angle.
Date
Date Set date.
Set date format.
DateTimeSpecified
(Fixed: Fixed, Current (at time of printing): Now, Offset: Offset)

- 60 - CITIZEN SYSTEMS JAPAN

 CITIZEN Layout SDK

Format Set time format.

FormatCulture Set culture to modify date format list.
OffsetDays Set date offset by day(s).
OffsetMonths Set date offset by month(s).
OffsetYears Set date offset by year(s).
Time Set time.
Outline
Set outline.
IsOutline
(No: False, Yes: True)
OutlineColor Set outline color.
OutlineColorAlpha Set outline opacity (0: transparent – 255: solid).
OutlineLineJoin Set the corner outline format.
OutlineWidth Set outline width.

- 61 - CITIZEN SYSTEMS JAPAN

 CITIZEN Layout SDK

2.6 Inserting Figures

2.6.1 Inserting a Straight Line

- Note -
In the mobile terminal ( Android, iOS ) to use the printer fonts, the print results
might be different from the display.

1. Click the [Straight Line] button on Insert Toolbar.

2. Move the mouse pointer to the Layout editing area.

3. Click the starting point for the straight line and drag to the ending point.
(See 2.3 Using Layout Editor).

- Note -
It is possible to draw the straight line horizontally or vertically from the starting
point by dragging while pressing the [Shift] key.

4. Change the attributes in the Properties editing area if necessary.

- 62 - CITIZEN SYSTEMS JAPAN

 CITIZEN Layout SDK

Straight line properties

Name Description
Design
(Name) *1 Set name to part.
Shape
EndPoint*1, *2 Set line end point.
*1,*2
StartPoint Set line start point.
Line
StrokeAlpha Set line color opacity (0: transparent – 255: solid).
StrokeColor Set line color.
StrokeDashCap Set dashed line end style.
*1
StrokeDashStyle Set line style.
StrokeEndCap Set line end style.
StrokeStartCap Set line start style.
*1*2
StrokeWidth Set line width.
Operation
Set part flip.
FlipType (No: None, Horizontal: Horizontal, Vertical: Vertical, Horizontal and
vertical: Both)
Locked Set part lock. (No: False, Yes: True)
*1
Rotation Set part rotate angle (0/90/180/270).
SkewAngleX Set part horizontal slant angle.
SkewAngleY Set part vertical slant angle.
*1
: This property supports the mobile terminal ( Android, iOS ).
*2
: Please observe the following conditions if you want to use in the mobile terminal ( Android, iOS ).
- The straight line, please specified to be horizontal or vertical.
- Length of the straight line, please specified in 1.00mm units.
- In upside down printing, StrokeWidth, please specify more than 0.25mm.
- In non-upside down printing, StrokeWidth, please specify more than 0.13mm.

- 63 - CITIZEN SYSTEMS JAPAN

 CITIZEN Layout SDK

2.6.2 Inserting a Rectangle

- Note -
In the mobile terminal ( Android, iOS ) to use the printer fonts, the print results
might be different from the display.

1. Click the [Rectangle] button on Insert Toolbar.

2. Move the mouse pointer to the Layout editing area.

3. Click at the desired position to assign the rectangle and drag the mouse in the right and
downward direction.
(See 2.3 Using Layout Editor).

- Note -
It is possible to insert a square by dragging while pressing the [Shift] key.
In addition, it is possible to scale up/down the rectangle while maintaining the
aspect ratio by dragging the mouse while pressing the [Shift] key when changing
its size.

The corners can be rounded by dragging the green □ marker displayed on top
left of the rectangle. The position of the green marker changes when the ratio for
rounded corner is set up.
The rounded corner ration can also be changed from [RadiusX][RadiusY] in the
Properties editing area.
4. Change the attributes from the Properties editing area if necessary.

- 64 - CITIZEN SYSTEMS JAPAN

 CITIZEN Layout SDK

Rectangle properties
Name Description
Design
(Name) *1 Set name to part.
Shape Shape
RadiusX Set horizontal ratio for rounded rectangle corner.
RadiusY Set vertical ratio for rounded rectangle corner.
Line
StrokeAlpha Set line color opacity (0: transparent – 255: solid).
StrokeColor Set line color.
StrokeDashCap Set dashed line end style.
*1
StrokeDashStyle Set line style.
StrokeLineJoin Set line combine style.
*1,*2
StrokeWidth Set line width.
Fill
FillAlpha Set fill color opacity (0: transparent – 255: solid).
FillColor Set fill color.
Operation
Set part flip.
FlipType (No: None, Horizontal: Horizontal, Vertical: Vertical,
Horizontal and vertical: Both)
*1
Location Set part position (X, Y).
Locked Set part lock. (No: False, Yes: True)
*1
Rotation Set part rotate angle (0/90/180/270).
*1,*2
Size Set part size (width, height).
SkewAngleX Set part horizontal slant angle.
SkewAngleY Set part vertical slant angle.
*1
: This property supports the mobile terminal ( Android, iOS ).
*2
: Please observe the following conditions if you want to use in the mobile terminal ( Android, iOS ).
- Size (width, height ), please specified in 1.00mm units.
- In upside down printing, StrokeWidth, please specify more than 0.25mm.
- In non-upside down printing, StrokeWidth, please specify more than 0.13mm.

- 65 - CITIZEN SYSTEMS JAPAN

 CITIZEN Layout SDK

2.6.3 Inserting a Circle or Oval

1. Click the [Circle] button on Insert Toolbar.

2. Move the mouse pointer to the Layout editing area.

3. Click at the desired position to assign the rectangle and drag the mouse in the right and
downward direction.
(See 2.3 Using Layout Editor).

- Note -
It is possible to insert a perfect circle by dragging while pressing the [Shift] key.
It is also possible to scale up/down the circle/oval while maintaining the aspect
ratio by dragging the mouse while pressing the [Shift] key when changing its
size.

4. Change the attributes from the Properties editing area if necessary.

- 66 - CITIZEN SYSTEMS JAPAN

 CITIZEN Layout SDK

Circle/oval properties
Name Description
Design
(Name) Set name to part.
Line
StrokeAlpha Set line color opacity (0: transparent – 255: solid).
StrokeColor Set line color.
StrokeDashCap Set dashed line end style.
StrokeDashStyle Set line style.
StrokeWidth Set line width.
Fill
FillAlpha Set fill color opacity (0: transparent – 255: solid).
FillColor Set fill color.
Operation
Set part flip.
FlipType
(No: None, Horizontal: Horizontal, Vertical: Vertical, Horizontal and vertical: Both)
Location Set part position (X, Y).
Locked Set part lock. (No: False, Yes: True)
Rotation Set part rotate angle (0/90/180/270).
Size Set part size (width, height).
SkewAngleX Set part horizontal slant angle.
SkewAngleY Set part vertical slant angle.

- 67 - CITIZEN SYSTEMS JAPAN

 CITIZEN Layout SDK

2.6.4 Inserting a Polygon

1. Click the [Polygon] button on Insert Toolbar.

2. Move the mouse pointer to the Layout editing area.

3. Click at the desired position to assign the rectangle and drag the mouse in the right and
downward direction.

- Note -
It is possible to insert a regular polygon by dragging while pressing the [Shift]
key.
It is also possible to scale up/down the polygon while maintaining the aspect
ratio by dragging the mouse while pressing the [Shift] key when changing its
size.

4. Input the number of corners in [Corner] under the Properties editing area.

“Polygon” “Star”

5. To insert a star shape, select “Star” from the pull-down menu of [Shape] under the Properties
editing area.
6. Change the attributes from the Properties editing area if necessary.

- 68 - CITIZEN SYSTEMS JAPAN

 CITIZEN Layout SDK

Polygon properties
Name Description
Design
(Name) Set name to part.
Shape Shape
Corner Set number of corner (3 – 60) for polygon.
Set polygon ratio (0 – 100).
Ratio
(Valid only when [Shape] is set to “Star”)
Set polygon shape.
Shape
(Polygon: Polygon, Star: Star)
Line
StrokeAlpha Set line color opacity (0: transparent – 255: solid).
StrokeColor Set line color.
StrokeDashCap Set dashed line end style.
StrokeDashStyle Set line style.
StrokeLineJoin Set the figure edge format style.
StrokeWidth Set line width.
Fill
FillAlpha Set fill color opacity (0: transparent – 255: solid).
FillColor Set fill color.
Operation
Set part flip.
FlipType
(No: None, Horizontal: Horizontal, Vertical: Vertical, Horizontal and vertical: Both)
Location Set part position (X, Y).
Locked Set part lock. (No: False, Yes: True)
Rotation Set part rotate angle (0/90/180/270).
Size Set part size (width, height).
SkewAngleX Set part horizontal slant angle.
SkewAngleY Set part vertical slant angle.

- 69 - CITIZEN SYSTEMS JAPAN

 CITIZEN Layout SDK

2.6.5 Inserting an Arc, Pie or Chord

1. Click the [Arc] button on Insert Toolbar.

2. Move the mouse pointer to the Layout editing area.

3. Drag from a desired point to make the reference circle.

- Note -
It is possible to make a perfect reference circle by dragging the mouse while
pressing the [Shift] key.

[Shift]

4. Specify the arc section to be used. Click the starting point on the displayed dotted circle and drag
to the ending point. It is possible to switch the arc section to be used by pressing the [Shift] key
while dragging.

Arc Pie Chord

5. Select the shape from the pull-down menu of [Shape] under the Properties editing area.
6. Change the attributes from the Properties editing area if necessary.

- 70 - CITIZEN SYSTEMS JAPAN

 CITIZEN Layout SDK

Arc properties
Name Description
Design
(Name) Set name to part.
Shape
EndAngle Set end angle for arc, clockwise from x axis.
Set clockwise/counterclockwise for arc.
IsClockwise
(Clockwise: True, Counterclockwise: False)
Set arc shape.
Shape
(Arc: Arc, Pie: Pie, Chord: Chord)
StartAngle Set start angle for arc, clockwise from x axis.
Line
StrokeAlpha Set line color opacity (0: transparent – 255: solid).
StrokeColor Set line color.
StrokeDashCap Set dashed line end style.
StrokeDashStyle Set line style.
StrokeLineJoin Set the figure edge format style.
StrokeWidth Set line width.
Fill
FillAlpha Set fill color opacity (0: transparent – 255: solid).
FillColor Set fill color.
Operation
Set part flip.
FlipType
(No: None, Horizontal: Horizontal, Vertical: Vertical, Horizontal and vertical: Both)
Location Set part position (X, Y).
Locked Set part lock. (No: False, Yes: True)
Rotation Set part rotate angle (0/90/180/270).
Size Set part size (width, height).
SkewAngleX Set part horizontal slant angle.
SkewAngleY Set part vertical slant angle.

- 71 - CITIZEN SYSTEMS JAPAN

 CITIZEN Layout SDK

2.6.6 Inserting a Polyline

1. Click the [Polyline] button on Insert Toolbar.

2. Move the mouse pointer to the Layout editing area.

3. Click the starting point.

4. Click the component points in order.

- Note -

[Space]

It is possible to set the next component point vertical/horizontal by pressing the

[Shift] key while moving the mouse.
It is also possible to switch the starting point and ending point (whether it is
closed or not) by pressing the [Space] key while drawing a polyline, as well as
changing from the pull-down menu of [Closed] in the Properties editing area
after inserting the figure.

5. Double-click at the ending point.

6. Change the attributes from the Properties editing area if necessary.

- 72 - CITIZEN SYSTEMS JAPAN

 CITIZEN Layout SDK

Polyline properties
Name Description
Design
(Name) Set name to part.
Shape
Set closed line.
Closed
(Yes: True/No: False)
Line
StrokeAlpha Set line color opacity (0: transparent – 255: solid).
StrokeColor Set line color.
StrokeDashCap Set dashed line end style.
StrokeDashStyle Set line style.
StrokeEndCap Set line end style.
StrokeLineJoin Set the figure edge format style.
StrokeStartCap Set line start style.
StrokeWidth Set line width.
Fill
Set fill color opacity (0: transparent – 255: solid).
FillAlpha
(Valid only when Shape: [Closed] is set to “True”)
Set fill color.
FillColor
(Valid only when Shape: [Closed] is set to “True”)
Operation
Set part flip.
FlipType
(No: None, Horizontal: Horizontal, Vertical: Vertical, Horizontal and vertical: Both)
Location Set part position (X, Y).
Set part lock.
Locked
(No: False, Yes: True)
Rotation Set part rotate angle (0/90/180/270).
Size Set part size (width, height).
SkewAngleX Set part horizontal slant angle.
SkewAngleY Set part vertical slant angle.

- 73 - CITIZEN SYSTEMS JAPAN

 CITIZEN Layout SDK

2.6.7 Inserting a Free Line

1. Click the [Free Line] button on Insert Toolbar.

2. Move the mouse pointer to the Layout editing area.

3. Click at the starting point, and make the mouse track curve to be dragged. The point where the
mouse button is released is the ending point.

- Note -

[Space]

It is possible to switch the starting point and ending point (whether it is closed or
not) by pressing the [Space] key while drawing a polyline, as well as changing
from the pull-down menu of [Closed] in the Properties editing area.

The component points of the free line will be indicated after the figure has been
inserted. It is possible to adjust the curve by dragging the component points with
the pointer.

4. Change the attributes from the Properties editing area if necessary.

- 74 - CITIZEN SYSTEMS JAPAN

 CITIZEN Layout SDK

Free Line properties

Name Description
Design
(Name) Set name to part.
Shape
Set closed line.
Closed
(Yes: True/No: False)
Line
StrokeAlpha Set line color opacity (0: transparent – 255: solid).
StrokeColor Set line color.
StrokeDashCap Set dashed line end style.
StrokeDashStyle Set line style.
StrokeEndCap Set line end style.
StrokeLineJoin Set line combine style.
StrokeStartCap Set line start style.
StrokeWidth Set line width.
Fill
Set fill color opacity (0: transparent – 255: solid).
FillAlpha
(Valid only when Shape: [Closed] is set to “True”)
Set fill color.
FillColor
(Valid only when Shape: [Closed] is set to “True”)
Operation
Set part flip.
FlipType
(No: None, Horizontal: Horizontal, Vertical: Vertical, Horizontal and vertical: Both)
Location Set part position (X, Y).
Set part lock.
Locked
(No: False, Yes: True)
Rotation Set part rotate angle (0/90/180/270).
Size Set part size (width, height).
SkewAngleX Set part horizontal slant angle.
SkewAngleY Set part vertical slant angle.

- 75 - CITIZEN SYSTEMS JAPAN

 CITIZEN Layout SDK

2.6.8 Inserting a Bezier Curve

1. Click the [Bezier] button on Insert Toolbar.

2. Move the mouse pointer to the Layout editing area.

3. Click the starting point.

4. Click the component points in order.

- Note -

[Space]

It is possible to switch the starting point and ending point (whether it is closed or
not) by pressing the [Space] key while drawing a polyline, as well as changing
from the pull-down menu of [Closed] in the Properties editing area.

5. Double-click at the ending point.

Handle

Component point

6. The Bezier curve and the handle will be indicated. The curve can be adjusted by dragging the
handle.
7. Change the attributes from the Properties editing area if necessary.

- 76 - CITIZEN SYSTEMS JAPAN

 CITIZEN Layout SDK

Bezier curve properties

Name Description
Design
(Name) Set name to part.
Shape
Set closed line.
Closed
(Yes: True/No: False)
Line
StrokeAlpha Set line color opacity (0: transparent – 255: solid).
StrokeColor Set line color.
StrokeDashCap Set dashed line end style.
StrokeDashStyle Set line style.
StrokeEndCap Set line end style.
StrokeLineJoin Set the figure edge format style.
StrokeStartCap Set line start style.
StrokeWidth Set line width.
Fill
Set fill color opacity (0: transparent – 255: solid).
FillAlpha
(Valid only when Shape: [Closed] is set to “True”)
Set fill color.
FillColor
(Valid only when Shape: [Closed] is set to “True”)
Operation
Set part flip.
FlipType
(No: None, Horizontal: Horizontal, Vertical: Vertical, Horizontal and vertical: Both)
Location Set part position (X, Y).
Set part lock.
Locked
(No: False, Yes: True)
Rotation Set part rotate angle (0/90/180/270).
Size Set part size (width, height).
SkewAngleX Set part horizontal slant angle.
SkewAngleY Set part vertical slant angle.

- 77 - CITIZEN SYSTEMS JAPAN

 CITIZEN Layout SDK

2.7 Changing the Layout

2.7.1 Assigning vertical and horizontal coordinates for the part

The selected part is assigned at the center of the paper.

1. Select a part.
2. Click the Center button on Layout Toolbar.

Center buttons and operations

Button Operation

Assign the selected part in the center horizontally.

Assign the selected part in center vertically.

2.7.2 Aligning the Parts

Multiple inserted parts are aligned.

1. Select the parts to be aligned.

(See 2.4.3 Basic Parts Operations).

2. Click the Align button on Layout Toolbar.

Align buttons and operations

Button Operation
Aligns all the selected parts by matching the left sides of their outer frames.

Aligns all the selected parts by matching the centers of their outer frames.
Aligns all the selected parts by matching the right sides of their outer frames.

Aligns all the selected parts so that the outer frames of the parts are equally spaced
horizontally within the outer frame of the selected parts.
Aligns all the selected parts by matching the top sides of their outer frames.

Aligns all the selected parts so that the outer frames of the parts are equally spaced
vertically within the outer frame of the selected parts.
Aligns all the selected parts by matching the bottom sides of their outer frames.

- 78 - CITIZEN SYSTEMS JAPAN

 CITIZEN Layout SDK

Aligns all the selected parts so that the outer frames of the parts are equally spaced
vertically within the outer frame of the selected parts.

2.7.3 Changing the Order

Inserted parts are assigned to the front as they are added.

Use the function of Order, a Layout tool to change the order of the parts.

1. Select the part to be changed.

2. Click the Order button on Layout Toolbar.

Order buttons and operations

Button Operation

Brings the selected part to the Front.

Brings the selected part Forward.

Sends the selected part Backward.

Sends the selected part to the Back.

- 79 - CITIZEN SYSTEMS JAPAN

 CITIZEN Layout SDK

2.7.4 Setting up Groups

It is possible to copy multiple parts at once or move them together without breaking the alignment by
grouping the parts.

1. Select 2 or more parts to be grouped.

(See 2.4.3 Basic Parts Operations).

2. Click the [Group] button on Layout Toolbar.

- Note -
To edit grouped parts, cancel grouping using the [Ungroup] button.

2.7.5 Locking

Parts can be locked to prevent changing the position or attributes by mistake.

1. Select the part to be locked.

2. Click the [Lock] button on Layout Toolbar.

3. The color of the □ mark will change for the locked parts, and all operations will be disabled.

- Note -
To edit a locked part, cancel the lock using the [Unlock] button.
Each individual part can be locked through [Locked] function under the
Properties editing area.

- 80 - CITIZEN SYSTEMS JAPAN

 CITIZEN Layout SDK

2.8 Preferences

2.8.1 Preferences

Preferences such as the units used in layout and grids can be set up.

- Note -
With Layout Editor, scale unit can be selected from mm and inch.
While it is possible to change the unit during layout preparation, it may cause
conversion errors as the unit is changed.
It is recommended to begin the layout after setting up the scale unit beforehand.

- Note -
Layout Editor, you can export the layout of the mobile terminal for printing using
the printer font. If you want to use the export, click "Printer font" and put a check
on it.

1. Click “Settings” — “Preferences” on the Menu Bar.

2. “Preferences” dialog box will be displayed.

3. Set up the desired items.
4. Click the [OK] button on the “Preferences” dialog box.
5. Restart Layout Editor when editing unit has been changed.
(See 2.1 Starting up and Exiting Layout Editor).

- 81 - CITIZEN SYSTEMS JAPAN

 CITIZEN Layout SDK

<Setting up the editing unit>

1. Select “Millimeters” or “Inches” as the editing unit.

<Setting up the grid style>

1. Select the style from the pull-down menu.

2. “Color Setting” dialog box will be displayed when the button is clicked.
3. Click the color to set up from the basic colors and click the [OK] button.

- Note -
It is also possible to create the color of your choice by selecting the [Define
Custom Colors] button.

4. Input the grid interval.

(See 2.8.2 Display Settings).

<Setting up the Guide Bar>

1. Select the style from the pull-down menu.
2. Click the button to display the “Color Setting” dialog box.
3. Click the color to set up from the basic colors and click the [OK] button.
(See 2.8.2 Display Settings).

- 82 - CITIZEN SYSTEMS JAPAN

 CITIZEN Layout SDK

<Setting up the Standard Font>

1. Click the [Modify…] button for standard font.

2. “Font” dialog box will be displayed.

3. Select the font name, style and size.
4. Click the [OK] button.

<Setting up the Printer Font>

1. Click the [Printer font settings] and put a check on it.
Export function will be enabled in the file menu.
(See 2.8.4 Export).

2. Click the [Modify…] button for printer font.

3. “Font” dialog box will be displayed.

4. Select the font name, style and size.
5. Click the [OK] button.
6. "Preferences" dialog box will be displayed.
7. Sets the size of each FontA, FontB, FontC.
If you select "Courier New", size is recommended 7.1pt, 5.3pt, 4.7pt respectively.

- 83 - CITIZEN SYSTEMS JAPAN

 CITIZEN Layout SDK

<Setting up AutoSave>
1. Click “AutoSave” and put a check on it.
2. Input the saving interval.
3. Click [Browse…] button to display the “Browse folder” dialog box.
4. Set up the folder to save files and click the [OK] button.

- Note -
Files saved automatically are saved as files with extension “autosave”.
To disable AutoSave, de-select the option for “AutoSave”.

- 84 - CITIZEN SYSTEMS JAPAN

 CITIZEN Layout SDK

2.8.2 Display Settings

Toolbars and grid displayed on the screen can be set up.

 Displaying the toolbars

1. Click “View” — “Toolbar” on the Menu Bar.
2. Click the toolbar to be displayed. There is a check mark for toolbars that are currently displayed.

 Displaying the Status Bar

1. Click “View” — “Status Bar” on the Menu Bar. There is a check mark if it is currently displayed.

 Setting up the Ruler

1. Click “View” — “Ruler” on the Menu Bar. There is a check mark if it is currently displayed.

 Setting up the Grid

<Displaying the Grid>

1. Click “View” — “Grid” — “Visible” on the Menu Bar. There is a check mark if it is currently
displayed.

<Snapping the inserted parts on the Grid>

1. Click “View” — “Grid” — “Snap” on the Menu Bars. There is a check mark if it is currently
selected.

 Setting up the Guide Bar

<Adding a Guide Bar>

1. Click “View” — “Guide Bar” — “Add Horizontal” or “Add Vertical” on the Menu Bar.

- Note -
If the Ruler is displayed in the Layout editing area, it is possible to add a Guide
Bar by clicking and dragging the horizontal or vertical Ruler.
To move a Guide Bar, click and drag the displayed Guide Bar to the desired
position.

<Switching display/nondisplay of Guide Bars>

1. Click “View” — “Guide Bar” — “Visible” on the Menu Bar. There is a check mark if it is currently
displayed.

- 85 - CITIZEN SYSTEMS JAPAN

 CITIZEN Layout SDK

<Snapping the inserted parts on the Guide Bar>

1. Click “View” — “Guide Bar” — “Snap” on the Menu Bar. There is a check mark if it is currently
selected.

<Deleting a Guide Bar>

1. Click “View” — “Guide Bar” — “Clear All” on the Menu Bar.

- Note -
To delete only the desired Guide Bar among the Guide Bars displayed, click the
Guide Bar to be deleted in the Layout editing area and drag it to the horizontal or
vertical Ruler.

 Setting up Zoom
1. Click the pull-down menu of the Zoom Menu on the Main Toolbar and select the zoom
magnification.

- Note -
It is also possible to change the zoom magnification by clicking the
buttons.
button: Zooms in by 25% from the current zoom each time.
button: Zooms out by 25% from the current zoom each time.

 Displaying the Print Area

1. Click “View” — “Print Area” on the Menu Bar. There is a check mark if it is currently displayed.

- 86 - CITIZEN SYSTEMS JAPAN

 CITIZEN Layout SDK

3. Layout File Manager

3 Layout File Manager

- 87 - CITIZEN SYSTEMS JAPAN

 CITIZEN Layout SDK

3.1 Starting up and Exiting Layout File Manager

 Starting up Layout File Manager

- In Windows 8 or Windows 8.1

1. Tap “Layout File Manager” tile on the Start screen.
2. Layout File Manager will start up.

- In other Windows
1. Click the [Start] button displayed at the bottom left portion of the screen.
2. Click “All Programs”
3. Click “CITIZEN”
4. Click “Layout SDK”
5. Click “Layout File Manager”
6. Layout File Manager will start up.

 Exiting Layout File Manager

1. Click “File” — “Exit” on the Menu Bar.

- 88 - CITIZEN SYSTEMS JAPAN

 CITIZEN Layout SDK

3.2 Layout File Manager Overview

This section describes the names and functions of the parts of Layout File Manager screen.

Menu Bar Toolbar

List view
Explorer view
Thumbnail view

Recently used files view

Bookmark view

Status Bar

- 89 - CITIZEN SYSTEMS JAPAN

 CITIZEN Layout SDK

Part functions
Name Function
Menu Bar Executes various functions.
Toolbar Displays the frequently used functions.
Explorer view Displays the Explorer.
Recently used files view Displays up to 10 files that have been used by Layout Editor.
Bookmark view Displays the folder that is registered in bookmark.
Displays the folders and files in the folder specified in Explorer view or
Bookmark view.
List view
The file that has been recently used will be displayed when Recently
used files view is selected.
Thumbnail view Displays the thumbnail for a CLF-format file and its layout properties.
Status bar Displays the status.

Names and functions of &Main Toolbar buttons

Button Name Function
New Starts up Layout Editor to create a new CLF file.

Open Opens the selected file with Layout Editor.

Print Prints the selected file.

Print Preview Displays the print preview for the selected file.

Undo Undoes the folder selection by one step.

Redo Redoes the folder selection that has been undone.

Up One Level Moves the folder up by one layer from the selected folder.

Make New Folder Creates a new folder directly below the selected folder.

Add Bookmark Adds the selected folder in the bookmark.

Remove Bookmark Removes the selected folder from the bookmark.

- 90 - CITIZEN SYSTEMS JAPAN

 CITIZEN Layout SDK

3.3 File Operations

3.3.1 Selecting a Folder

This section describes the procedures for selecting folders on the Explorer view.

Explorer view displays folders with Desktop as the default location.

When a folder displayed in Explorer view is selected, the folders stored in the selected folder and the
files created by Layout Editor will be displayed on List view.

If there is a folder(s) in the layer underneath the displayed folder, [+] mark will be displayed beside the
folder icon.
Click [+] to expand the tree and display the lower folders.
Click [-] to fold the lower folders that are displayed.

- 91 - CITIZEN SYSTEMS JAPAN

 CITIZEN Layout SDK

3.3.2 Creating a New File

A new CLF file is created.

1. Click the [New] button on the Toolbar.

2. Layout Editor will start up.
3. Create the layout.
(See 2. Layout Editor).

4. Save the file.

(See 2.4.4 Save As).

- Note -
The location for saving displayed on “Save As” dialog box will be the folder
selected in step 1.

3.3.3 Opening a File

Layout Editor is started directly from Layout File Manager to open a CLF file.

1. Specify the folder the file is saved from Explorer view or Bookmark view.
2. Click the CLF file displayed on List view.
3. Click the [Open] button on the Toolbar.
4. Layout Editor will start up and the file will be opened.
(See 2.1 Starting up and Exiting Layout Editor).

- Note -
It is also possible to open a file by the following methods;
1. Double-clicking the file on List view, or
2. Right-clicking the file on List view and selecting “Open.”

- 92 - CITIZEN SYSTEMS JAPAN

 CITIZEN Layout SDK

3.3.4 Rename

The name of a folder or file can be changed.

1. Select the folder or file on Explorer view or List view.

2. Click on the folder or file that requires a name change.
3. Delete the existing name and input the new name.

- Note -
It is impossible to change or delete the extension “.CLF” at the end of a file
name.
It is also possible to change the name by the following methods;
With a folder or file selected,
1. Right-click and select “Rename,” or
2. Press the [F2] button.

3.3.5 Print

A layout file can be printed.

1. Select the file to print from List view.

2. Click the [Print] button on the Toolbar.
3. “Print” dialog box will be displayed.
(See 2.4.6 Print).

3.3.6 Print Preview

The print preview for a layout file can be displayed.

1. Select the file to preview from List view.

2. Click the [Print Preview] button on Toolbar.
3. “Print Preview” dialog box will be displayed.
(See 2.4.7 Print Preview).

- 93 - CITIZEN SYSTEMS JAPAN

 CITIZEN Layout SDK

3.3.7 Creating a New Folder

A new folder is created in the folder specified in Explorer view or Bookmark view.

1. Select the upper folder to create a new folder in Explorer view or Bookmark view (in the above
case, a folder will be created in My Documents).
2. Click the [Make New Folder] button on Toolbar.
3. Input the folder name and press the [Enter] key.

- 94 - CITIZEN SYSTEMS JAPAN

 CITIZEN Layout SDK

3.3.8 Moving

There are 3 ways to move a file.

<Using the “Move to Folder” function>

1. Click the file to be moved from List view.
2. Click “Edit” — “Move to Folder” on the Menu Bar.

3. “Browse For Folder” dialog box will be displayed.

4. Select the folder to move the file to and click the [OK] button.

<Dragging the file>

1. Click [+] on Explorer view and expand the tree to display the folder to move the file to.
2. Select the source folder from Explorer view or Bookmark view and display the file to be moved
on List view.
3. Click and drag the file on List view to the destination folder on Explorer view.

<Cutting and pasting>

1. Click the file to be moved from List view.
2. Click “Edit” — “Cut” on the Menu Bar.
3. Click the destination folder on Explorer view or Bookmark view.
4. Click “Edit” — “Paste” on the Menu Bar.

- Note -
It is possible to move a folder using similar procedures.
The source file will be deleted when it is pasted.
Nothing will happen to the source file if it is only cut.
Cut and Paste can also be selected from the menu displayed by right-clicking the file.

- 95 - CITIZEN SYSTEMS JAPAN

 CITIZEN Layout SDK

3.3.9 Copy

There are 2 ways to copy a file.

<Using the “Copy to Folder” function>

1. Click the source file to be copied on List view.
2. Click “Edit” — “Copy to Folder” on the Menu Bar.

3. “Browse For Folder” dialog box will be displayed.

4. Select the destination folder and click the [OK] button.

<Copying and pasting>

1. Click the copy source file on List view.
2. Click “Edit” — “Copy” on the Menu Bar.

- 96 - CITIZEN SYSTEMS JAPAN

 CITIZEN Layout SDK

3. Select the destination folder on Explorer view or Bookmark view.

4. Click “Edit” — “Paste” on the Menu Bar.

- Note -
It is possible to copy a folder using similar procedures.
Copy and Paste can also be selected from the menu displayed by right-clicking
the file.

3.3.10 Delete

A file or folder can be deleted.

1. Right-click the file or folder to be deleted on List view or Explorer view.

2. Click “Delete” from the menu.
File deletion confirmation dialog box

Folder deletion confirmation dialog box

3. A confirmation dialog box will be displayed. Click the [Yes] button.

- Note -
It is also possible to delete a folder from “File” — “Delete” on the Menu Bar.

- 97 - CITIZEN SYSTEMS JAPAN

 CITIZEN Layout SDK

3.4 Bookmark

It is possible to keep a frequently used folder constantly displayed on Bookmark view by registering the
folder as a bookmark.

 Add Bookmark

1. Click the folder to be registered as a bookmark on Explorer view.

2. Click the [Add Bookmark] button on the Toolbar.
3. The folder will be registered at the bottom of the Bookmark view.

 Remove Bookmark

1. Click the folder to be removed from bookmark on Bookmark view.

2. Click the [Remove Bookmark] button on the Toolbar.
- Note -
The folder itself will not be deleted even if it is removed from bookmark.

- 98 - CITIZEN SYSTEMS JAPAN

 CITIZEN Layout SDK

3.5 Display Setting

Display/nondisplay of Toolbar and Status Bar can be set up.

 Setting up the Toolbar

1. Click “View” — “Toolbar” on the Menu Bar.

2. There is a check mark if it is currently displayed.

 Setting up the Status Bar

1. Click “View” — “Status Bar” on the Menu Bar.

2. There is a check mark if it is currently displayed.

- 99 - CITIZEN SYSTEMS JAPAN

 CITIZEN Layout SDK

Layout SDK
Layout Editor / Layout File Manager
Users Guide
for Version 1.3.0

- 100 - CITIZEN SYSTEMS JAPAN