Skip to content

Smart Widgets Editor

Description

This document describes the Smart Widgets Editor tool.

The Smart Widgets Editor tool is a powerful utility that can be used to create complex widgets with up to six layers, including the layer for the base image. The layers can be arranged in any desired order. Each layer can contain one or more images arranged in a sequence that can be manipulated in a variety of ways.

Image manipulation options include horizontal motion, vertical motion, and angular motion. Two or more layers can be linked to produce synchronized movements of images. This enables the generation of complex widgets with multiple moving parts.

Requirements

The following are required before using the Smart Widgets Editor tool:

  • Windows PC (Windows XP to Windows 10)
  • Windows 7+ is ideal
  • Workshop4 IDE installed

Note

Before using Smart Widgets Editor, it is required to purchase a Workshop4 PRO license. This will then enable the Smart Widgets in the widgets pane.

Opening the Tool

In the widgets section of Workshop4 Pro, placing Smart Gauge from the Gauges Tab,

Smart Gauge

Smart Gauge

a Smart Slider or a Smart Knob from the inputs tab

Smart Slider

Smart Slider

Smart Knob

Smart Knob

will create an empty object named accordingly with a property named “Config”.

Empty Object with a property named “Config”

Clicking this button to open the tool

Click on the button to open the tool

Double-clicking on the entry will also open the tool.

Double-click on the entry to open the tool

If the project hasn’t been saved at least once, opening the tool will require you to do so before continuing.

Starting a New Widget

To start creating a new widget, add a face or base image. Click on the ellipsis symbol indicated in the image below. The face or base image is a static part of the widget.

Click on the ellipsis symbol

Select the desired file. In this example, a 250x250 pixel PNG image with a blue border and a transparent interior is chosen as the base image.

Select the desired file

The face image now appears in the preview area.

The face image displayed in the preview area

The Preview Area is the size of the whole 4D Display. The Working Area covers the whole widget area that is the size of the Face Image by default.

Size of the Working Area

By default, the Smart Widgets Editor tool assumes that the working area is the entire size of the newly added base image.

It is possible to limit the size of the working area to a smaller section of the base image. To do this, remove the tick mark from the Face size is gauge size option and set the values of the parameters Size X/Y to a value less than the dimensions of the base image. In the example below, the working area is half of the whole base image.

Limiting the working area size to a section of the base image

Note

The dotted lines in the above image serve to illustrate the resized working area. These do not appear in the preview area.

It is also possible for the working area to be larger than the size of the base image. To illustrate, the parameters Size X/Y are set to 300 and 272 respectively.

Setting the working area to be larger than the size of the base image

Illustration using parameters 300 and 272 for Size X/Y, respectively

Note

The dotted lines in the above image serve to illustrate the resized working area. These do not appear in the preview area.

WYSIWYG area

It can be observed better in the WYSIWYG area.

Noticed that in the above image, the widget’s position is also changed with its top left at (0, 0).

Location of the Base Image in the Working Area

Following the example from the previous section, if the size of the working area is set manually, the face/base image can also be repositioned.

Repositioning the face/base image

To change the location of the base image in the working area, set the values of the parameters Left/Top. These are the coordinates of the top-left corner of the base image with respect to the origin of the working area. As an example, the Left/Top parameters are set to 10 below. The base image is therefore moved to the right by 10 pixels and downwards by 10 pixels.

Changing the location of the base image in the working area

Note

The dotted lines in the above image serve to illustrate the resized working area. These do not appear in the preview area.

To move the base image to the centre of the working area, click on the Centre button as shown below. Smart Widgets Editor automatically computes the Size X/Y*** parameter values.

Moving the base image to the centre of the working area

Note

The dotted lines in the above image serve to illustrate the resized working area. These do not appear in the preview area.

Moving the base image to the centre of the working area

Adding Layers

The face or base image is a static part of the widget to which another separate part/layer, image or group of images, can be added. To add another image or group of images, a layer must first be created.

To add a layer, follow the steps indicated below.

Adding a layer to the base image

Adding a layer to the base image Layers can contain single or multiple images that can be manipulated in a variety of ways.

It is possible to manipulate a single image’s horizontal position, vertical position and angular rotation, show multiple fixed images and manipulate multiple images that change in sequence. All of these are discussed in detail in the sections Layers with a Manipulated Image, Layers with Multiple Fixed Images and Layers with a Series of Manipulated Images respectively.

Alpha

The transparency of a layer can be adjusted by varying the value of its alpha field. By default, a layer is opaque and has an alpha value of 255. Below is a layer with the alpha value set to 255.

Adjusting the transparency of a layer

Below is the same layer with the alpha value set to 100.

Adjusting the transparency of a layer with an alpha value set to 100

An alpha value of 0 means that a layer is fully transparent.

Organizing Layers

Smart Widgets Editor allows the user to use up to five layers of images, besides the layer for the base or face image. When working with multiple layers, it is best to refer to the layer guide to determine the order of arrangement of the layers, from top to bottom. The layer guide is indicated below.

Organizing layers

In the above example, there is only one active layer (Layer 1) besides the layer containing the face/base image. Also, note that Layer 1 here is above the layer containing the face/base image. Each layer can be configured to be on top or below the layer containing the face/base image.

Order of Layers

For all layers below the base image, the layer with the lowest index number is always the topmost layer while the layer with the highest index number is the bottommost layer. The same applies to layers above the base image.

Note that Smart Widgets Editor automatically generates the frames of an enabled layer, based on how the layer is configured. For a widget containing a single enabled layer, the frames of the final output widget will be the generated frames of the single layer. For a widget with more than one enabled layer, each frame of the final output widget is a combination of the corresponding frames of each enabled layer.

It is important to note that Smart Widgets Editor generates all possible combinations of each enabled layer as the output frames of the final widget. The frames are generated cyclically and sequentially such that the layer with the lowest index number completes a cycle with all of its frames before using the next frame of the layer with the second lowest index number. This process continues such that when the layer with the second lowest index number completes a cycle with all of its frames, the next frame of the layer with the third lowest index number is used.

The process described above can be easily visualized with a clock. The second hand has the lowest index number, the minute hand has the second lowest index number and the hour hand has the highest index number. The second hand must first complete a cycle before the minute hand move by one minute and the minute hand must first complete a whole hour for the hour hand to completely move by one hour.

It is also possible to link two or more enabled layers. Linked layers can be viewed as a single layer with an index number equal to the index number of the layer with the lowest index number in the group. For more details, refer to the section Linking Layers.

Swapping Contents of Layers

The contents of two adjacent layers can be swapped by using the up/down buttons in the layer guide. This doesn’t include the face/base image. Using this technique, the contents of all layers can be rearranged as desired.

Swapping Contents of Layers

To facilitate this discussion, another layer is added to the project. Layer 2 contains an image again with the 4D Systems logo but this time with an orange background. This layer is configured to be below the face/base image layer. The Top/Left parameters of this layer are also configured accordingly to come up with the output below.

Swapping Contents of Layers

Notice that Layer 1 (logo with white background) covers small portions of the face image (hollow rectangle) and Layer 2 (logo with orange background). The logo with an orange background is covered by both the face image and Layer 1.

Layer 1 (logo with white background)

Layer 2 (logo with orange background)

Pressing the down arrow of a layer in the layer guide section will swap its contents with the adjacent layer below it. Pressing the up arrow of a layer in the layer guide section will swap its contents with the adjacent layer above it. To swap the contents of Layer 1 and Layer 2, click any of the two buttons indicated in the layer guide below.

Swapping Contents of Layers

By doing so, the contents of the layers will change

Changing the contents of a layer

Changing the contents of a layer

However, if you look carefully, the logo with an orange background is still below the base image while the logo with the white background is still above the base image. Therefore, the preview area will still show the same.

Swapping Contents of Layers

Therefore, Layer 1 which previously contained an image (orange) above the face image now has an image (white) below the face image while Layer 2 which previously contained an image (white) below the face image now has an image (orange) above the face image.

As shown in the previous discussion, the contents of both layers were swapped. But it doesn’t change the appearance in the preview area since swapping includes all the parameters of each layer including the layer’s position concerning the face image.

Swapping layers that are both above or below is a different case.

Swapping Layers

Using the same layers as the previous example but this time both are above the face image.

Swapping Layers

By clicking the swap buttons, it can be noticed that Layer 1 is still above Layer 2.

Using the swap buttons

The reason behind this is discussed in the previous section, Order of Layers.

Even if Layer 1 is still above Layer2, their contents have been swapped. Thus it can be seen that the logo with an orange background covers some portion of the logo with a white background.

Swapping contents of layers

Setting Layer Parameters

Since a layer is used to display a single manipulated image, a series of static images or a series of manipulated images, it can have one or more frames. Furthermore, each frame is associated with a value of that layer. The number of frames in a layer is reflected in the Min/Max Values parameters.

Setting Layer Parameters

The total number of frames is specified by the user by setting the values of the Min/Max Values parameters.

For a layer with Numerical Part enabled and set to String Lookup, the number of frames corresponds to the number of Strings added to the image list. For these cases, therefore, the Min/Max Values parameter values are automatically set by the Smart Widgets Editor tool as soon as the string items are added.

Note

All methods of manipulating images in a layer are associated with the Min/Max Values. Manipulating images in a layer requires that the Min/Max Values cover multiple frames.

Layers with a Manipulated Image

Images contained in each layer can be manipulated to move horizontally, vertically and/or rotate at certain angles.

This section will discuss how to manipulate a single image in a layer.

An image can be manipulated by setting the values of the parameters shown in the image below.

Layers with a manipulated image

To move the image along the x and/or y axes, set the values of parameters Min/Max X and/or Min/Max Y. To rotate the image at certain angles, set the values of the parameters Min/Max Degree. To specify the point of rotation of the image, set the values of the parameter Reference point. These are all in conjunction with Min/Max Values.

These parameters and their corresponding manipulation effects are discussed in detail in the subsequent sections. By using a combination of different manipulation parameters, it is possible to create more complex motions for any image.

Horizontal Motion

A layer may contain an image that moves horizontally by utilizing the X positions for the minimum and maximum layer values (Min/Max X). The tool moves the manipulated image from left to right or right to left depending on which is greater between the X positions of the maximum value and the minimum value.

The Min/Max X position values serve as the end positions of the reference point of the image in the working area. By default, the reference point of an image is its top-left corner (0, 0).

Setting the Horizontal Motion of a layer

In this example, 4D Systems- White BG.png is moved left to right from 0 to 100 X positions from values 0 to 100.

Illustration of setting the horizontal motion of a layer

In this example, 4D Systems- White BG.png is moved right to left from 50 to -50 X positions from values 0 to 20.

By default, both X position values are set to zero to have no horizontal motions. By using equal values for the X position, the tool prevents horizontal motions. Furthermore, the image will always be displayed with its reference point at the set X position.

Illustration of setting the horizontal motion of a layer

In this example, 4D Systems- White BG.png is displayed at 50 X position from values 0 to 20.

Here’s a simple demonstration of what to expect.

Min and Max Values: 0 to 100

Min/Max X: 0 to 100

Illustration of setting the horizontal motion of a layer

At Frame 0:

At Frame 0

At Frame 50:

At Frame 50

At Frame 100:

At Frame 100

Vertical Motion

A layer may contain an image that can be manipulated to move vertically by utilizing the Y positions for the minimum and maximum layer values (Min/Max Y). The tool moves the manipulated image downwards or upwards depending on which is greater between the Y positions of the maximum value and the minimum value.

The Min/Max Y position values serve as end positions for the reference point of the image in the working area. By default, the reference point of an image is its top-left corner (0, 0).

Setting the vertical motion of a layer

In this example, 4D Systems-White BG.png is moved downwards from 0 to 100 Y positions from the values 0 to 100.

Illustration of setting the vertical motion of a layer

In this example, 4D Systems-White BG.png is moved upwards from 50 to -50 Y positions from values 0 to 20.

By default, both Y position values are set to zero to have no vertical motions. By using equal values for the Y position, the tool prevents vertical motions. Furthermore, the image will always be displayed with its rotation point at the set Y position.

Illustration of setting the vertical motion of a layer

In this example, 4D Systems-White BG.png is displayed at 50 Y position from values 0 to 100.

Here’s a simple demonstration of what to expect.

Min and Max Values: 0 to 100

Min/Max Y: 0 to 100

At Frame 0:

At Frame 0

At Frame 50:

At Frame 50

At Frame 100:

At Frame 100

Diagonal Motion

By combining Horizontal Motion and Vertical Motion, it is possible to move a layer image diagonally.

Setting the diagonal motion of a layer

In this example, with 101 frames, 4D Systems-White BG.png moves diagonally from (0, 0) to (100, 100).

As discussed in Horizontal Motion and Vertical Motion, setting the minimum and maximum positions for any of the two (Min/Max X and Min/Max Y) prevents motion in the respective directions. Therefore, setting both to have equal values will give the image a fixed position.

Illustration of setting the diagonal motion of a layer

In this example, 4D Systems-White BG.png is located at (50, 50). That means the reference point, which is the top-left corner (0, 0) of the image (as seen in the image above), is located at (50, 50) of the working area. It is really important to note that the X and Y positions correspond to the position of the Reference Point of the image concerning the working area rather than the preview area**.

Here’s a simple demonstration of what to expect.

Min and Max Values: 0 to 100

Min/Max X: 0 to 100

Min/Max Y: 0 to 100

At Frame 0:

At Frame 0

At Frame 50:

At Frame 50

At Frame 100:

At Frame 100

Angular Motion

The image on a layer can also be manipulated to rotate at certain angles by varying the values of the parameters Min/Max Degree. Smart Widgets Editor rotates the image clockwise or counter-clockwise depending on the values of the Min/Max Degree parameters.

The Minimum Degree parameter is the angle of the image at its starting position while the Maximum Degree parameter is the angle of the image at its ending position. A negative angle rotates the image counter-clockwise, while a positive value rotates the image clockwise.

In the example shown below, the image has 21 frames, indexed 0 to 20, rotating 90 degrees clockwise.

Setting the angular motion of a layer

At frame 0, the image is at its original position.

At Frame 0

At frame 10, the image is rotated by 45 degrees clockwise.

At Frame 10

Notice that the image was rotated at its top-left corner (0, 0), which is the default reference point. The values of the parameter Reference Point specify the coordinates of the rotation point of an image. The coordinates of the reference point are relative to the top-left corner of the image. Again, the reference point is at its top-left corner by default – point (0, 0).

Note

The part of the logo outside of the working area is not shown. This is true for all image manipulation methods. The Smart Widget will only take the set Working Area which is the area of the face image by default. For more information, refer to Size of the Working Area.

The coordinate values below map the reference point of the logo to its centre.

Map the reference point of the logo to its centre

Furthermore, as mentioned in the previous sections, the Min/Max X and Y position values serve as end positions for the reference point of the image in the working area.

Thus the parameters shown above will give this output.

Map the reference point of the logo to its centre

As discussed in the previous sections, setting the parameters Min X and Y and Max X and Y to equal values will give the image a fixed position in the working area.

In the example below, the reference point of the image will remain at points (125, 125) of the working area at all frames.

Setting the reference point of the image to remain at points (125, 125) of the working area at all frames

Here’s the output:

The output of setting the reference point of the image to remain at points (125, 125) of the working area at all frames

The following paragraphs discuss the use of the angular motion parameters in more detail using an actual example.

Consider the image on Layer 1 in the example below.

Example using the angular motion parameters

Example using the angular motion parameters

Example using the angular motion parameters

Layer 1 has 100 frames, indexed from 0 to 99. Note also that the Minimum Degree and Maximum Degree parameters are set to 0 and 90, respectively. This means that at frame 0, the image on Layer 1 is at its original position. At frame 99, the image on Layer 1 will have rotated by 90 degrees, clockwise. The point of rotation of the image is at point (0,0), relative to its top-left corner.

Setting the reference point The output of setting the reference point

The tool then places the image in the working area.

Placing the image in the working area The output of placing the image in the working area

Based on the parameter values above, at frame 0, the rotation point of the image coincides with point (0, 0) of the working area (Min X and Min Y). At frame 99, the rotation point of the image still coincides with point (0, 0) of the working area (Max X and Max Y). Thus, the image remains at a fixed position at all frames.

At frame 0:

At Frame 0

At frame 50:

At Frame 50

Note

The part of the logo outside of the working area is not shown. This is true for all image manipulation methods. The Smart Widget will only take the set Working Area which is the area of the face image by default. For more information, refer to Size of the Working Area.

At frame 99:

At Frame 99

Note

The part of the logo outside of the working area is not shown. This is true for all image manipulation methods. The Smart Widget will only take the set Working Area which is the area of the face image by default. For more information, refer to Size of the Working Area.

To demonstrate how the rotation point is changed, the values of the Reference point parameters are now set to the values shown below.

Setting the values of the reference point parameters

The rotation point of the 120x120-pixel image is now at its center. Note however that only a quarter of the image is visible in the working area.

Demonstration of how to change the rotation point

Demonstration of how to change the rotation point

For the entire image to be visible in the working area at frame 0, the location of its rotation point is moved to point (100, 100) on the working area.

Setting rotation point to (100, 100) to enable the visibility of the entire image in the working area

Demonstration of setting rotation point to (100, 100) to enable the visibility of the entire image in the working area

Based on the new Min/Max X and Y parameters above, the rotation point of the image will remain fixed at points (100, 100) on the working area at all frames.

At frame 0:

At Frame 0

At frame 50:

At Frame 50

At frame 99:

At Frame 99

Combination of Diagonal and Angular Motions

By properly configuring the manipulation parameters, it is possible to move an image along the x and y axes while rotating it at the same time. The animation of such an object involves all three basic motions (horizontal, vertical, and angular). Consider the example shown below, which is similar to the example used in the previous section (Angular Motion).

Combination of Diagonal and Angular Motions

The image on Layer 1 is a 120x120-pixel yellow arrow with a white background.

The Min/Max Values parameter values indicate that Layer 1 has 100 frames, indexed from 0 to 99.

Setting the Min/Max Values parameter values

The Min/Max Degree parameter values indicate that the image will be rotated clockwise by 90 degrees from its original position.

Setting the Min/Max Degree parameter values

The Reference point parameter values indicate that the rotation point of the image is at its center.

Setting the Reference point parameter values

The output of setting the Reference point parameter values

The Min/Max X and Y parameter values indicate that the image, by its center (point of rotation), will be moved from point (60, 60) to point (120, 120) on the working area from frame 0 to frame 99.

Setting the Min/Max X and Y parameter values

The purple arrow in the image below shows the path of the rotation point as it diagonally moves across the working area.

The output of setting the Min/Max X and Y parameter values

Frame 0 Frame 25
Frame 0 Frame 25
Frame 50 Frame 99
Frame 50 Frame 99

Layers with Multiple Fixed Images

This section discusses layers containing multiple fixed images. It is possible to make a layer show a series of fixed, non-moving or static images. The procedure for doing this is shown below.

Layers with Multiple Fixed Images

In this example, PNG images containing a letter are used.

Browsing PNG Images containing a letter

Selecting PNG Image

Using the PNG Image with a layer

Frames and Values

Set the Min and Max Values to 0 and 5, respectively. This results in a total of 6 frames, enough to represent the six images.

A total of 6 frames, enough to represent the six images

Display the Static Images

The generated frames of a layer containing static images are indexed from 0 up to N-1, where N is the total number of frames. The first frame shown in the working area is the first file in the image list when the static images were added. Note also that, in the layer guide, the index of the current frame and the total number of frames are shown. The image below shows the index of the current frame and the total number of frames on Layer1.

The index of the current frame and the total number of frames on Layer1

To show the rest of the static images, move the thumb of the GCI frame slider to the right.

Move the thumb of the GCI frame slider to the right

The image below shows the thumb positioned at the end of the slider. Hence, the last static image is currently displayed in the working area.

The thumb positioned at the end of the slider

Display the Static Images

Change the Location of the Static Image

The x and y coordinates of the static images can be set by changing the values of the Min/Max X and Min/Max Y parameters.

Change the Location of the Static Image

By default, a set of static images in a layer has Min/Max X and Min/Max Y parameters set to 0. Thus, the top-left corners of the static images are located at point (0,0) of the working area. In the image below, the Min/Max X and Min/Max Y parameters are set to (120, 120) and (120, 120).

Set the Min/Max X and Min/Max Y parameters to (120, 120) to change the Location of the Static Image

The Output of changing the Location of the Static Image

Layers with a Series of Manipulated Images

It is also possible for a layer to contain a series of images that are manipulated at the same time. Consider the following example, which is similar to the previous example.

Layers with a Series of Manipulated Images

Layers with a Series of Manipulated Images

In this example, there are six images and six frames.

Layer containing six images and six frames

The Min/Max Degree parameters indicate that the images will be rotated from 0 to 180 degrees.

Min/Max Degree parameters

The Reference point parameters indicate that the images will be rotated at their center.

Reference point parameters

Reference point parameters

The Min X and Y and Max X and Y parameters indicate that the reference point of the images will be moved from (25, 25) to (200, 200).

 Set Min X and Y and Max X and Y parameters to move the reference point of an image

Moved the reference point of the image

The above configuration will result in the following:

At Frame 0: At Frame 1:
Frame 0 Frame 1
At Frame 2: At Frame 3:
Frame 2 Frame 3
At Frame 4: At Frame 5:
Frame 4 Frame 5

Adding Numerical Part

The value of each layer can be displayed on the widget using the Numeric part section.

Adding Numerical Part

To display the value of a layer simply enable its numeric part.

Display the value of a layer by enabling its numeric part

Display Options

There are two options for displaying the numeric part. These are Number and String Lookup.

The Number corresponds to the minimum and maximum value of a layer (Min/Max Values). By using this, the value of which the layer is currently at on the GCI frame will simply be printed with its top left position at the Top / Left position on the working area.

The Number corresponds to the minimum and maximum value of a layer (Min/Max Values)

The values printed can be formatted using Format.

Format the values printed using the Format filed

By default (using “blank”), a value of zero displays nothing. Using 0 or 00 will display a minimum of 1 digit or 2 digits respectively. If a thousand operator is desired, a comma is simply needed to be in the Format.

The Format also accepts decimal places. A Format of 0.0 will always display a number with a minimum of 2 digits with the decimal point just before the last digit. In that case, if the value of the layer is 5, the value printed will be 0.5

Extra digit Spacing provides the user an option to add extra pixel spacing between each printed digit.

Alignment Options are provided for the user. The user can easily left-align, centre-align or right-align the numeric part concerning the longest string to be generated.

Alpha, just like in the image part of each layer, controls the transparency. An alpha of 255 will give an opaque numerical part.

String Lookup corresponds to Strings that the values correspond to. This is useful for widgets with a small number of frames.

String Lookup

When using String Lookup with a manipulated image, previously set Min/Max Values will be ignored and be changed automatically depending on the number of Strings listed.

Changing the Font Colour

The font colour can be changed by clicking on the More button button of Colour to open this window.

Colour palette

This allows users to select a basic colour or define a new Custom font colour. When defining a new custom colour, the window will open a colour picker.

Colour picker

Changing the Font, Font Size and Font Style

Font, font size and font style can be modified by clicking on the More button button of Font.

Select the Font, Font Size and Font Style

This window will open. Pressing OK will apply the selected font properties.

Linking Layers

By default, frames are generated for all possible combinations of all the values of enabled layers. The layers can be linked if this isn’t desired.

Linking Layers

In this example, Layer 1 has 100 frames indexed 0 to 99 while Layer 2 has 2 frames indexed 0 and 1. Without linking the two layers, the GCI frame has an output of 200 frames indexed from 0 to 199.

Linking Layers

That is 100 frames from Layer 1 while Layer 2 is on its first frame (index 0).

Linking Layers

Linking Layers

Linking Layers

Linking Layers

and another set of 100 frames from Layer 1 while Layer 2 is on its second frame (index 1).

Linking Layers

Linking Layers

Linking Layers

Linking Layers

As shown in the images, it can be noticed that Layer 1 completes one cycle before Layer 2 moves to its next frame. If other layers are active, this pattern is also applicable. This was discussed in Order of Layers

That is if Layer 1 completes one cycle then Layer 2 moves to its next frame, if Layer 2 completes one cycle then Layer 3 moves to its next frame, and so on. Single frame-enabled layers can be simply skipped.

Here are the layers used in the previous example.

Linking Layers

Linking Layers

Linking layers allows layers to move at the same time with each other. Using the same example, linking the two layers will give 100 GCI frames instead of 200.

Linking Layers

It is possible to have up to two groups of linked layers as shown in the image.

Layer 1 contains a manipulated image having values 1 to 100 therefore having a total of 100 frames indexed 0 to 99 while Layer 2 contains two static images having default values 0 and 1.

Instead of having two sets of 100 frames, by linking the layers, the output GCI will have the 100 frames from Layer 1 be equally divided among the 2 frames of Layer 2.

Linking Layers

Where: G1 is the number of frames of the layer with the most frames from group 1 (if not used, G1 = 1)

G2 is the number of frames of the layer with the most frames from group 2 (if not used, G2 = 1)

Na to Nb are the frames not linked with any layer (if not used, N = 1)

Therefore, the first 50 frames (index 0-49) of Layer 1 will be generated with the first frame (index 0) of Layer 2

Linking Layers

Linking Layers

Linking Layers

Linking Layers

and the other 50 frames (index 50-99) of Layer 1 will be generated with the other frame (index 1) of Layer 2.

Linking Layers

Linking Layers

Linking Layers

Linking Layers

The order of linked layers concerning other layers or other groups of linked layers can simply be described as being the same as the order of the least indexed layer in the group.

For instance, a smart gauge with all layers enabled has Layer 1 and 5 linked together and Layer 3 and 4 linked together as well. The order of the layers will be:

Layer 1 Layer 2 Layer 3
Layer 5 Layer 4

Notice that Layer 5 simply joins with Layer 1 while Layer 4 joins Layer 3. Or simply:

Group 1 (Layer 1) Layer 2 Group 2 (Layer 3)

This means Group 1 needs to complete a whole cycle from its Min/Max Values before Layer 2 moves a single frame. Then when Layer completes a whole cycle, Group 2 will move a single frame.

There is a special kind of layers link that is mainly to create analog clock widgets using layers with manipulated layers though it is not limited to that. It can be used with other widgets as long as the user wants to.

Let’s discuss this in detail using a Workshop4 example.

Open a Smart Gauge Tool. Load an existing smart widget file by clicking on the Load button button.

It will open this location: \Users\Public\Documents\4D Labs\Smart Gauges Knobs and Sliders

Select and open the file HMS Watch 281.4Dsmart.

This widget has three enabled frames for the clock's hands.

Check Layers 2 and 3 and you’ll notice that both have this option checked

Clockwork link to the previous layer

Before testing this out, observe the frames when this feature is not being used. Start by disabling the clockwork links.

Deselect the clockwork link to the previous layer

The effect is hardly noticeable for a minute and second-hand clockwork link. Therefore, let’s disable Layer 1 (seconds’ hand) for now and observe Layer 2 and Layer 3 for this example.

Disable Layer 1 (seconds’ hand) for now

By doing that, now we have:

The results of disable Layer 1 (seconds’ hand) for now

Similar to what’s been discussed in Linking Layers, the first layer will complete a cycle first then the next layer will move one frame. In this case, once the minute hand (Layer 2) has completed a cycle, the hour hand (Layer 3) will move to the next frame which is the next hour.

Clockwork Link

Clockwork Link

Clockwork Link

Clockwork Link

However, as shown above, the output isn’t desirable for a clock since the hour hand should rotate towards the 1-hour position while the minute hand is completing its cycle.

Clockwork Link

For that, users can use the Clockwork Link feature. Enable the clockwork feature for Layer 3 then observe the difference.

Clockwork Link

Clockwork Link

Clockwork Link

Clockwork Link

As shown above, the hour hand moves towards the 1-hour position while the minute hand completes a whole 60-minute cycle.

Display Widget Frames

The frames in a layer are indexed from 0 to N-1, where N is the total number of frames. To display the frames, the GCI frame slider is used.

Display Widget Frames

The layer guide shows all of the active layers and their order of arrangement. The index of the frame that is currently displayed and the total number of frames on each layer are also shown. In the example below, only Layer 1 is active. It has 100 frames and frame 0 is currently being shown.

Display Widget Frames

Detailed discussions on the frames of a layer and how they are displayed are found in the sections Layers with a Manipulated Image and Layers with Multiple Fixed Images.

Besides displaying frames of images, a layer can also display the corresponding values. For more information, refer to the section Adding Numerical Part.

FAT16 File Size Limitation

The maximum file size limit for FAT16 is 2 GB. Hence, for widgets with a computed file size exceeding this limit, a warning message will be displayed under the GCI Frame slider.

FAT16 File Size Limitation

Reducing the number of layers and/or frames in a layer will reduce the resulting file size. For fully working analog clock widgets, however, the minimum total number of frames is 43200 (60 x 60 x 12). To be able to use a fully working analog clock widget, users can reduce the dimensions of the clock to around 150x150 pixels. This will limit the resulting file size to around 2 GB and below.

Scaling Widgets

The scaling section at the bottom part of the Smart Widgets Editor window provides a facility to upscale or downscale the widget.

Scaling Widgets

However, for the best quality and speed of generation, the user is advised to start with source images that are of the proper size. To scale a widget, enable scaling as shown below.

To scale a widget, enable scaling

Input the X and Y scaling parameters.

Input the X and Y scaling parameters

These parameters are the multiplying factors of the X and Y dimensions of the widget. Thus, a value of “1.00” corresponds to “100%” of the dimension. A value of “0.50” corresponds to “50%” of the dimension. The following images show a widget with three different scaling parameters.

Widget is not scaled:
Widget is not scaled Widget is not scaled
Widget is 50% of its original size:
Widget is 50% of its original size Widget is 50% of its original size
Widget is 120% of its original size:
Widget is 120% of its original size Widget is 120% of its original size

When adjusting the scaling parameters, the user can click on the up/down arrows beside the parameter values.

Adjust the scaling parameters using the up/down arrows beside the parameter values

It is also possible to use the up and down arrows of the keyboard or the scroll wheel of the mouse. All of these options adjust the scaling parameters by 0.01. On the other hand, using the PgUp and PgDn buttons of the keyboard adjusts the scaling parameters by 0.10.

Disable Proportional Scaling

By default, the scaling of a widget is proportional, such that any change in the X scaling parameter is automatically reflected in the Y scaling parameter. To disable this, click on the tick box beside the Unlock X+Y linkage property.

Disable Proportional Scaling

The X and Y parameters can now be adjusted independently.

Resampling Options

There are two resampling options – Nearest and Lanczos.

Resampling Options

Nearest is the default option. It is low quality, and it will not significantly affect the build time. On the other hand, Lanczos resampling is high quality, and it will significantly extend build time. Again, for the best quality and fastest speed of generation, the user is advised to start with source images that are of the proper size already.

Exploring Possibilities

The Smart Widgets Editor tool is a powerful utility that enables the generation of complex custom widgets. Generally, the process of creating such widgets can be broken down into the following steps:

  1. Determine the number of layers needed for the widget. Generally, a moving part needs a separate layer.
  2. Determine the different motions needed to animate each layer (horizontal, vertical, angular, or a combination of any of these).
  3. Create the graphics for each layer using an external tool such as Paint, Gimp, or Adobe Photoshop. Add the image to the corresponding layer.
  4. Implement and test the animation of each layer by playing with the manipulation parameter values.
  5. Link layers to each other if necessary.

In some cases, the number of layers can be reduced further by a careful analysis of how the widget is animated. For instance, layers that have the same motion could be combined. Clever use of transparency and static images can also be utilized to reduce the number of layers.

Workshop4 Examples

Workshop4 comes with plenty of examples of Smart Widgets. To see the examples, follow the procedure below.

Workshop4 Examples

Workshop4 Examples

Application Notes

Application notes provide step-by-step discussions on how to create basic Smart Widgets. Click on any of the links below to see an application note.

Revision History

Document Revision

Revision Date Revision Content
1.0 25/07/2017 First release, 4D Systems
1.1 29/07/2017 Updated information on numeric part and order of layers
1.2 06/12/2023 Modified for web-based documentation