Widget Properties – RDK TECH https://rdktech.org Rapid Development Kit Mon, 18 Mar 2024 19:19:42 +0000 en-US hourly 1 https://wordpress.org/?v=6.8.1 https://rdktech.org/wp-content/uploads/2024/02/RDK-logo-black-2-32x32.png Widget Properties – RDK TECH https://rdktech.org 32 32 Center Editor https://rdktech.org/rdk-documentation/widget-properties/on-context-menu/center-editor-2/ Mon, 18 Mar 2024 19:19:42 +0000 https://test-inc.xyz/?post_type=epkb_post_type_1&p=1139  

Move to Center

  • Move the centor of rotation to the center of the widget: This feature along with Align to center can enable users to align all the centers of the rotational widgets to a signel point.
]]> Reset Editor https://rdktech.org/rdk-documentation/widget-properties/on-context-menu/reset-editor/ Mon, 18 Mar 2024 19:19:22 +0000 https://test-inc.xyz/?post_type=epkb_post_type_1&p=1137  

Reset Size Editor

  • Reset to Original Size: Reset the widget size to its original size.
  • Reset Ratio by Width: Reset the widget’s width according to the aspect ratio.
  • Reset Ratio by Height: Reset the Widget’s height according to the aspect ratio.
]]> Common Right-Click Menu https://rdktech.org/rdk-documentation/widget-properties/on-context-menu/common-right-click-menu/ Mon, 18 Mar 2024 19:19:02 +0000 https://test-inc.xyz/?post_type=epkb_post_type_1&p=1135

Clicking the mouse right button in the Design Panel, a pop-up menu shows up. The contents of this menus varies depending if any widget is selected or which widget is selected. Different widgets offer different sets of Right-Click menus. However, in this page, a common set of selection in this menu is described.

When no widget is selected

Basic Editing Functions

Function Description Shortcut
Undo Recover to the last action. The menu shows the name of the previous action. Ctrl+Z
Redo Whenever an action can be done again, this function is enabled for repeating the previous action. Ctrl+Y
Paste Pasting an item from the clipboard. ADE currently supports pasting widgets, pictures and SVG. Ctrl+V
Select All Select all items in the design panel. Ctrl+A

Resize Canvas

These functions are used when users export HMI design into documentation. In regular HMI development, these functions are seldom used.

Function Desciption Shortcut
Fit Content Fit all the items on the canvas into an optimizaed rectangular.
Fit Content with Padding… This function generates a similar result as Fit Content does with borders. This function ask users to enter the padding size.
Fit Screen Adjust the canvas to the size of the design panel. However, Widget Panel, Property Panel and Page List are not included.

When one or multiple widgets are selected

Arrangement

Function Description Shortcut
Bring to Front Move the selected widget(s) to the top layer. Shift+Page Up
Bring Forward Move the selected widget(s) one layer up. Page Up
Bring Backward Move the selected widget(s) one layer down. Page Down
Bring to Back Move the selected widget(s) to the bottom layer. Shift+Page Down

Widget-dependent functions

These functions are widget-dependent. Please refer to each widget’s description for details.

When users export the HMI design to a HTML webpage, they can use this function to make the change page feature work. This function is only applicable to the exporting HMI designs. The candidate pages are shown in the sub-menu.

Locked

If the widgets are locked, both the location and the size of the widget are fixed. This fuction can avoid unintended widget reloation or resizing.

Group

When multiple widgets are selected, users can create a group for these widgets.

Shortcut: Ctrl+G

Ungroup

This function dissolves the selected group.

Shortcut: Ctrl+Shift+G

Delete

Delete the selected widget(s).

Shortcut: Delete

Add to My Collections…

Users can add the selected widget(s) to their private collection for reuse. Please refer to 私有收藏 for more details.

Cut

Cut the selected widget(s) and store it in the clipboard.

Shortcut: Ctrl+X

Copy

Copy the selected widget(s) to the clipboard.

Paste

Paste the item from the clipboard. If a widget is pasted multiple times, the pasted items are overlapped, so users have to move the paste items to different locations.

Shortcut: Ctrl+V

Selection (with Background) as PNG…

Export the selected widget(s) including the background to an PNG file. A file dialog box shows up once this function is selected to allow users to specify the file name.

When this function is selected and the Shift key is pressed, then the exporting destination is the clipboard. No file is created.

Shortcut: Ctrl+Alt+E

Selection (w/o Background) as PNG…

This function performs the same task as the previous one does expect that the background is excluded in exporting.

Shortcut: Ctrl+Alt+E

Sizing Policy…

This function is used in a group. When a group is resized, how the size and location of the widgets are adjusted. When users want to store a group into the private collection for the future. This function can be used for adopting this group under different resolutions.

All the options in the dialog box allows users to specify during a group resizing, how a widget’s width, height, and horizontal/vertical locations are changed.

尺吋變化規則

]]> Image Size Handler https://rdktech.org/rdk-documentation/widget-properties/on-widget-editor/image-size-handler/ Mon, 18 Mar 2024 19:17:57 +0000 https://test-inc.xyz/?post_type=epkb_post_type_1&p=1133  

文字方框編輯器

利用拖曳箭頭改變文字顯示框的大小

利用拖曳箭頭改變背景的圓角半徑，可將背景從矩形變成橢圓

 註解：如果背景不透明度為0則無效
]]> Rich Text Editor https://rdktech.org/rdk-documentation/widget-properties/on-widget-editor/rich-text-editor/ Mon, 18 Mar 2024 19:17:35 +0000 https://test-inc.xyz/?post_type=epkb_post_type_1&p=1131

圖5-11 Rich Text Editor

允許元件就地編輯，輸入多行文字及符號，可顯示不同字型、風格、尺寸及顏色。

 註解：選取欲編輯的文字後即可進入編輯模式
]]> Image Size Editor https://rdktech.org/rdk-documentation/widget-properties/on-widget-editor/image-size-editor/ Mon, 18 Mar 2024 19:17:08 +0000 https://test-inc.xyz/?post_type=epkb_post_type_1&p=1129

Users can drag the triangle at the top-left corner or at the bottom-right corner to change the size of the background image size. The size of the background image is limited by the dotted border of the widget.

This editor is applicable to Circular Scale and Circular Gague widgets.

]]> Tick Diameter Handler https://rdktech.org/rdk-documentation/widget-properties/on-widget-editor/tick-diameter-handler/ Mon, 18 Mar 2024 19:16:46 +0000 https://test-inc.xyz/?post_type=epkb_post_type_1&p=1127  

Circular Scale Radius Editor

Users can drag this mark to change the radius of the circular scale.

Once the radius changes, the scale, tiks, and numbers change positions accordingly.

]]> Tick Boundary Handler https://rdktech.org/rdk-documentation/widget-properties/on-widget-editor/tick-boundary-handler/ Mon, 18 Mar 2024 19:16:26 +0000 https://test-inc.xyz/?post_type=epkb_post_type_1&p=1125  

Scale Editor

Users can drag positional marks to adjust the scope of the scale.

The “T” mark is for adjusting the position of the numbers of the scale.

]]> Bore Boundary Handler https://rdktech.org/rdk-documentation/widget-properties/on-widget-editor/bore-boundary-handler/ Mon, 18 Mar 2024 19:15:17 +0000 https://test-inc.xyz/?post_type=epkb_post_type_1&p=1121  

Bore Editor

Users can use arrows to adjust the position, aize and aspect ratio. Keep in mind that position, size and aspect ratio of the bore are independently set up. The change on these attributes does not alter the knob’s attributes.

The bore serves as the background for the progress bar and the liquid column is the foreground. The liquid colume moves according to the value of the binding register but the bore remains staionary.

If the scales are stencils, users can use the bore to show the color through the scales. For example, the bore is darker grey and this color is shown on the scales.

]]> Knob Size Handler https://rdktech.org/rdk-documentation/widget-properties/on-widget-editor/knob-size-handler/ Mon, 18 Mar 2024 19:14:54 +0000 https://test-inc.xyz/?post_type=epkb_post_type_1&p=1119  

Knob Editor

Users can use arrows to move the know poisition, size and aspect ratio.

Users can adjust the knob starting and ending positions by dragging the auxiliary lines at the both ends.

The knob auxiliary lines move to the endpoints of the bore.

 ⮜The starting and ending point example

]]>