menu Pujie Black Help

Watch Part Designer

The Watch Part Designer allows you to design watch parts using vector graphics and images. A watch part is build from layers. These layers can contain vector shapes, text, arcs and images. This manual will describe the following aspects.

Content

What is new

PUJIE BLACK 4.0

With Pujie Black 4.0 a lot of new things are possible. You can add images and automate the layers of your custom complications and live texts.

Image Layers Automation PUJIE BLACK 3.6

Pujie Black 3.6 adds a lot of new elements to the watch part drawer, click the links below to jump to the new stuff!

Text Layers Arc Layers Layer Grouping New Layer Operations Rotate Tool

The main interface

This section describes the main user interface of the watch part designer. How to undo/redo, how to change the grid and how to zoom and pan the canvas.

App bar

The app bar contains all your higher level controls. You can use it to undo any step made, change the grid and more.

Undo
The undo button allows you to go back a step. At most 99 steps will be saved. The undo button shows a counter of the number of steps you can go back.
Redo
The redo button allows you to redo a step. The redo button shows a counter of the number of steps you can redo. Keep in mind that after making a new change your redo history will be gone.
Watch face visibility
Tap to toggle the visibility of the watch face. The watch face shown is your current preset.
Grid
Tap to show a dialog which will allow you to change the properties of the grid (number of lines, snapping and colors).
Play
Tap to make the watch part 'play'. In the case of a watch hand, the hand will start rotating at seconds speed.
Zooming and panning

You can zoom the canvas using the standard gestures, pinch-to-zoom and double tap. Panning is done by moving the canvas using touch. This is demonstrated in the video below.

play_circle_filled
Canvas

To make more space, you can move the layers section downwards. This is demonstrated in the video below.

play_circle_filled
Grid

The grid makes it easy to make nice shapes. Using grid snapping you can quickly get your anchor point in the correct position. And move layers to an exact position. Use the grid button on the appbar to open the grid dialog

From the dialog you can choose if you wan't to show the grid or if you want to snap to the grid. It allows you to change the number of horizontal and vertical gridlines, and the radial divisions (for rotation snapping). And you can adjust the background color.

When grid snapping is turned on, you will see green lines snap lines when you move your anchor points or your layers. Those lines indicate to which grid lines the point will snap. This is shown in the next image.

Layers

Your watch parts can be build from several layers.

Layers

The building blocks of your watch parts are layers. Layers can have different types, they can be shapes (open or closed), texts, arcs or images.

Use the Add Layer button to add a new layer

Then from the popup menu choose what you want to add

You can choose from the following options, but keep in mind that all these shapes can be edited. They are just quick start options.

LAYER TYPES
Polygon
This will enable the pen tool and will allow you to start adding anchor points to the canvas. Just tap somewhere on the canvas and the anchor points will be placed. Watch the video below to see it in action.
Circle
This will add a circle.
Square
This will add a square.
Rounded Rectangle
This will add a rounded rectangle. A dialog will be shown asking you to specify the radius of the corners and the size of the rectangle
Line
This will add a single line.
Text
This will add a text layer. Use the text button on the layers to adjust its properties
Arc
This will add an arc. Use the arc button on the layers to adjust its properties
Image
This will add an image layer. From the image style you can select or change the image properties
play_circle_filled
Layer list

Once you have added your layer, it will be added to the layer list. A layer has the following components.

LAYER LIST PARTS
1
Drag handle
Drag and move to change the order of the layers.
2
Layer name
Double tap to change the name of the layer. (or use the context menu)
3
Visibility
Tap to toggle visibility of the layer
4
Selection indicator
Shows that the layer is selected
5
Layer style
Tap to change the style of the layer (Fill, Stroke & Shadow)
6
Layer information
Shows additional layer information
7
Context menu
Shows the context menu with additional option (Delete, Add Copy, Rename & Set scaling properties)

Layers can be ordered and deleted. Watch the video below to see it in action

play_circle_filled
Layer grouping

Layers can be grouped in order to transform them as a group. By long pressing a layer in the list, the tool goes into multi shape select mode. This will allow you to select multiple layers at once. The appbar will transform in the following:

After selecting the layers you want to add to a group, use the group button to create the group.

Group
Tap to group the layers

Once your group is created you can drag layers in to or out of the group. When dragging a layer over a collapsed group it will show a light blue overlay to indicate that the layer will be added to the group

Groups can be expanded and collapsed. And groups can be transformed, duplicated and copied as a whole. The video below shows how to use grouping.

play_circle_filled
Layer operations

From the context menu (button 7) on the layers you can do a number of extra operations. The following image shows the options.

SPECIAL LAYER OPTIONS
Flip horizontal/vertical
This will allow you to horizontally and verticall flip your layers. N.B. text won't be flipped, but the text alignment will.
Reset rotation center
If you had previously adjusted the rotation center of this layer, this will reposition it (and keep it) in the center
Add copy
Adds a copy of the layer to this watch part
Copy to clipboard
Copies the layer to the clipboard, so that it can be pasted in to another watch part. Pasting is done from the overflow menu on the appbar
Set scaling options

Layer types

Layers can have different types, in the section we describe the types available

Shape layers

Shape layers can be used to draw any form of shape. The interface contains presets for Circles, Squares and line, but essentially all shapes are editable and consist of Anchorpoints

Anchor points

Anchor points can be manipulated directly by using the Select Tool. Additional operations can be accessed by long pressing an anchor point.

CONTEXT MENU ON CURVED POINT CONTEXT MENU ON STRAIGHT POINT
Switch to straight point
Tap to make the lines which pass through this point straight.
Switch to curved
Tap to make the lines which pass through this point curved.
Lock curve control points
Tap to toggle between locked and unlocked curve control points. When locked, the curve points will be fixed at opposite sided of the anchor point. When unlocked the control points can be moved independently
Unlock curve control points
Tap to toggle between locked and unlocked curve control points. When locked, the curve points will be fixed at opposite sided of the anchor point. When unlocked the control points can be moved independently
Remove anchor point
Removes the anchor point from the shape, without creating a hole in the shape.
Delete anchor point
Deletes the anchor point from the shape, and creates a hole in the shape. Can only be done on closed shapes.
Text layers

Text layers can be used to show text on the canvas. A text layer will have an extra text style button on the layer in the layer list.

TEXT LAYER PARTS

The text layers contains all the parts as discussed in the layer list section.

1
Text style
Tap to open the text style dialog. This will allow you to adjust the text, font, text layer style, alignment and font size.
LIVE TEXT TAGS

The live text watch part allows you to add 'live text', using text tags. When changing the text on a text layer you will have some extra options in the text dialog. You can add all kinds of text tags to add dynamic text to the part.

Just tap one of the tags, and it will be added to the input text. You can also write the tags in the text using the keyboard.

Arc layers

Arc layers show an arc on the canvas. The arc are defined by their start angle and sweep angle. They also have a part based option. When you add an arc layer to the canvas you will have an extra button to access the arc style.

ARC LAYER PARTS

The arc layers contains all the parts as discussed in the layer list section.

1
Arc style
Tap to open the arc style dialog. This will allow you to adjust the start angle, sweep angle, part angle and gap angle.
ARC EXAMPLE
Image layers

An image layer allows you to add images to your watch part. Using the image style options you can change some properties of your image. An image layer will have an additional button to access the properties and choose the image.

IMAGE LAYER PARTS

The image layers contains all the parts as discussed in the layer list section.

1
Image properties
Tap to open the image properties dialog. This will allow you to pick the image and change some image properties like opacity, brightness, contrast, saturation and the hue. Additionally you can blur the image.
IMAGE LAYER EXAMPLE
play_circle_filled
Layer styles

When you press the shape style button (number 5. in the layer section) the center toolbar will switch to the shape style toolbar. This will allow you to change the style of the shape, styles are updated on the fly, but once you are done press the adjust style button to save your changes. Keep in mind that you can always revert back by using the undo button in the main menu.

SHAPE STYLES
Fill
On this tab you can change the fill of the shape. You can choose from Solid, Linear Gradient or Radial Gradient.
Stroke
On this tab you can change the stroke of the shape.
Shadow
On this tab you can enable and change the shadow of the shape.
Styles
This tab gives you access to all the styles use currently in the watch part. By tapping one of the styles you can directly apply the style of one of the other shapes in the watch part.

Drawing tools

The drawing tools are divided over 2 toolbars, the main toolbar and the header toolbar. The header toolbar changes according to the selected drawing tool and the selected state.

MAIN TOOLBAR

To switch between the scale tool and the move tool, long press the button and a popup menu will show.

Select tool
With the select tool you can move the individual anchor points of a shape. Use the tool to select a point, then move the anchor point around to replace it. Watch the video below to see it in action.
play_circle_filled
HEADER TOOLBAR SUB TOOLS

When an anchor point is selected the header toolbar will show the following controls

Single selection state
When the select multiple icon is visible, you can select multiple anchor points and move them as a group. If the transform tool is selected after selecting multiple anchor points, only those anchor points will be transformed.
Multiple selection state
When the select multiple icon is visible, you can select multiple anchor points and move them as a group. If the transform tool is selected after selecting multiple anchor points, only those anchor points will be transformed.
X
Change/View X-coordinate
This allows you to see and edit the exact X-coordinate of the selected anchor point.
Y
Change/View Y-coordinate
This allows you to see and edit the exact Y-coordinate of the selected anchor point.
Scale tool
With the scale tool you can move and resize shapes. Watch the video below to see it in action.
play_circle_filled
HEADER TOOLBAR SUB TOOLS

When a control point of the layer is selected the header toolbar will show the following controls

Resize from center state
Press to toggle between resizing from the center and resizing from the opposite corner.
Resize from opposite corner state
Press to toggle between resizing from the center and resizing from the opposite corner.
X
Change/View X-coordinate
This allows you to see and edit the exact X-coordinate of the selected anchor point.
Link X & Y coordinates
Press to toggle between linking and unlinking the X & Y coordinates. I.e. when linked, resizing will maintain the aspect ratio.
Unlink X & Y coordinates
Press to toggle between linking and unlinking the X & Y coordinates. I.e. when unlinked, resizing will lose the aspect ratio.
Y
Change/View Y-coordinate
This allows you to see and edit the exact Y-coordinate of the selected anchor point.
MULTI SHAPE SCALING

By long pressing a layer in the list, the tool goes into multi shape select mode. This will allow you to select multiple shapes at once and scale them together. This is demonstrated in the video below.

play_circle_filled
Move tool
With the move tool you can position your shapes. Watch the video below to see it in action.
play_circle_filled
Rotate tool
With the rotate tool you can rotate your layers. Watch the video below to see it in action. Rotation is perform arround the Rotation Center, this rotation center can be adjusted. Use the overflow menu on the layers to reset the rotation center.
play_circle_filled
HEADER TOOLBAR SUB TOOLS

When a control point of the layer is selected the header toolbar will show the following controls

R
Change the rotation angle
This allows you to see and edit the exact rotation angle (in degrees) of the current rotation operation.
Pen tool
With the pen tool you can draw a new polygon. When selected, tap anywhere on the canvas to place a new anchor point. The pen tool is only visible on open shapes. Tap at the ending anchor point to close the shape.
play_circle_filled
Add anchor point tool
Use the add anchorpoint tool to add new anchor points to existing shapes. Just tap somewhere on the line between 2 anchor points and you point will be added to the shape.
play_circle_filled

Automation

For some watch parts it is possible to automate your layers based on data properties. For instance, when designing a custom complication, you can change the visibility of a layer based on the availability of a complication data type. Live texts can also be automated

Automation is seperated into automation which works directly on the layers like positioning, scale, translation (moving), rotation and visibility. And automation which applies to specific properties of a layer, like the fill opacity, stroke opacity, stroke width (and more..), and arc angles.

Automation Interface

Throughout the whole interface, automation is indicated using the automation icon.

Automation
APP BAR

When your watch part supports automation, the app bar is slightly different from the regular app bar. The play icon is removed, and the watch face preview is not available. Those buttons are replaced by other options as discussed below,

Pause automation
Use this button to temporarily pause all automation. This will allow you the adjust some parameters which are unavailable when they have automation applied
Resume automation
Resume automation when it has been paused
Complication data provider
When you are designing a custom complication, this button will allow you to switch between one of the build in complication data providers.
AUTOMATION INDICATOR

If a layer has any form of automation, this is indicated with the automation icon in front of the layer name, as demonstrated in the image below.

1
Automation indicator
Whenever a layer has any form of automation, this indicator is shown
Layer transformation automation

To automate the position, size, rotation and visibility of a layer, select the layer in the layer list and tap the little automation icon on the header bar. This will show the following popup menu.

If one of the layer automation types is assigned, the button will show a darker background. Furthermore, the layer in the layer-list will show the automation icon, indicating that this layer uses automation.

Tapping one of the automation buttons will open the automation expression editor, this dialog is used to write your automation code. It is explained in the automation expression editor section

Layer style automation

To automate the layer style of a layer, tap the layer style button (see button 5 in the layer list). Then look for a property which has the automation icon next to it. Tapping this automation icon will bring you to the automation expression editor.

The image below shows that you can automate the Stroke Size and the Opacity of the Stroke by tapping on the automation icon.

Whenever a property is automated, it's value is replaced with the text Automated. In that case the value stepper can not be used.

The following properties of the layer style can be automated

Stroke Opacity
Stroke Size
Fill Opacity
Shadow Opacity
Shadow Size
Shadow X Offset
Shadow Y Offset
Arc style automation

To automate the arc style of an arc layer, tap the arc style button (see button 1 in the arc layers section). Then look for a property which has the automation icon next to it. Tapping this automation icon will bring you to the automation expression editor.

The following properties of the arc style can be automated

Start Angle
Sweep Angle
Part Angle
Gap Angle
Text style automation

To automate the text style of a text layer, tap the text style button (see button 1 in the text layers section). Then look for a property which has the automation icon next to it. Tapping this automation icon will bring you to the automation expression editor.

The following properties of the text style can be automated

Text
Automation expression editor

The automation expression editor is used to define the automation. This is done using a combination of JavaScript and predefined variables.

The syntax used in the automation expression editor is called JavaScript. JavaScript is a well known and extensively used programming language. It is mainly used in web enviroments, but is extremely suitable in this case, because it is relatively easy to learn, and there is a lot of documentation available online. Below you can find some good resources for learning Javascript

A very extensive javascript manual. Note that we are using this in the context of Watch Face automation, and therefore simple expressions will often be sufficient
The Math object, containing functions like sine, cosine, tangent, square root etc. And constants for PI. Which could all be of interest to watch face automation

The image below shows the automation expression editor. In this case it was started to Automate rotation, as indicated in the title of the dialog.

SIMPLE AUTOMATION

In the image above, the expression is set to the following

[cnormval] * 360.

This will be the rotation angle for the selected layer. The normalized complication value (cnormval) is multiplied with 360 (for 360 degrees of a full circle).

COMPLEX AUTOMATION

When your automation expression is relatively simple and can be expressed in a single line, your expression can be stated as described above. If your expression uses more than one line of text you have to add the keyword return to the final value you want your expression to return.

In a complex automation expression you can define functions, use variables, use if statements, use the build-in JavaScript functions and more.

For example, you could write the following:

function convertToDegrees(inputValue) {
return inputValue * 360;
}

var value = [cnormval];

return convertToDegrees(value);

Note that the above complex example is exactly the same as the simple example above. It just uses a more complex syntax, indicating what is possible with the automation expression editor.

Because the we are using JavaScript we have access to a lot of build in functions, especially the Math Object could be of interest. For instance, this will allows you to write

var value = [cnormval];

return Math.sin(value);
RETURN TYPE

Depending on the property you would like to automate, the expression editor expects a certain return type. For instance if you are automating the visibility, the expression editor expects a boolean value ( true or false ) as the return type of the expression. But if you are automating the scale of a layer, the expression editor expects a numerical value.

If your expression returns the wrong type, it will be indicated in red in the editor.

Advanced automation data

Some automation data fields are represented as objects, or arrays of objects. These are described below:

Full in progress event & upcoming full event
tags : [cur_evnt_full] & [com_evnt_full]

An object containing the full event data:

{ 
  "title":"Going to the city",
  "begin":{ 
	 "day":12,
	 "month":9,
	 "year":2019,
	 "hour24":14,
	 "hour12":2,
	 "minutes":0,
	 "ampm":"pm",
	 // offset in minutes from now, 
	 // can be negative when the begin
	 // is in the past
	 "offset": 62 
  },
  "end":{ 
	 "day":12,
	 "month":9,
	 "year":2019,
	 "hour24":15,
	 "hour12":3,
	 "minutes":0,
	 "ampm":"pm",
	 // offset in minutes from now,
	 // can be negative when the end
	 // is in the past
	 "offset": 122
  },
  "color":"#ff7537",
  "allday":false,
  // duration in milliseconds
  "duration":3600000,
  "location":"Kalverstraat, 1012 Amsterdam, Netherlands",
  // human readable begin and end time, 
  // takes users clock settings 
  // into account
  "time":"02:00 PM - 03:00 PM",
  "day":"today",
  // progress is a value 
  // between 0 and 1, where 1 means 
  // finished and 0 means not yet started
  "progress":0.2245
}


	
Usage Example:
	
var event = [cur_evnt_full];	

if(event) {
   return "Current event: " + event.title;
}	

return "No current event";
	
Calendar Events
tag : [cal_events]

An array of Calendar Event objects (see FULL IN PROGRESS EVENT & UPCOMING FULL EVENT)

[ event1, event2, ... , eventN ]
	
Usage Example:
	
var events = [cal_events];	

if(events.length > 0) {
   return events[0].title;
}	

return "No events";
	

Post effects

Once you have finished your watch part it is time to consider some of the post effects users can apply. Especially with watch hands, users can change their radius (length) and thickness afterwards. To make this work as intended you have to think about the scaling properties of your shape.

Scaling properties

To make you shapes scale nicely (thickness and lenght), some shapes might require different methods than others. For instance when you have circles in your watch part you probably want them to remain circles even if the scaling in X direction (thickness) and Y direction (lenght/radius) is not the same. This is handled by setting the correct scaling properties for your shapes.

You can access the scaling properties from the overflow menu on the shape layers (button 7).

Keep aspect ratio
Enable this option to make sure that the aspect ration of the shape is kept. For instance enable this on circles if you wan't them to remain circles eventhough scaling in the X and Y direction is not equal.
Calculate center
Enable this option to re-calculate the center after scaling, this is especially handy for shapes which have to keep aspect ratio but are not centered at the origin.
Scale from top
Enable this option to set the origin of scaling at the top of the watch part. For instance as with the Minority watch hands
Scale stroke size
Disable this option if you want to keep the stroke size the same after scaling.
Scale shadow
Disable this option if you want to keep the shadow size the same after scaling.
Palette changing

Keep in mind that the colors of your watch part can easily be changed afterwards, outside of the watch part designer.

Changing the palette of a watch part is done by tapping the multi-colored round button in front of the chosen watch part in the main interface of Pujie Black

This will show the following dialog, which will allow you to change all the colors in the watch part.