Differences

This shows you the differences between two versions of the page.

--- mycnc:mycnc_screen_configuration [2020/01/24 10:29] – ivan
+++ mycnc:mycnc_screen_configuration [2020/02/24 10:35] – ivan
@@ Line 1: / Line 1: @@
-===== MyCNC Screen Configuration ======
+===== Screen Editing and Configuration ======
 In this manual, we will be going through all the different elements that can be used to display (and interact with) the necessary information on the myCNC screen. Sample examples for the step-by-step screen configuration of myCNC software are available [[mycnc:mycnc_screen_configuration:screen_configuration_examples|here]].
@@ Line 26: / Line 26: @@
 ==== MyCNC GUI elements ====
+^ Element ^ Use ^
+| **Label** | Unchanging text element |
+| **Display** | Changing value |
+| **BDisplay** | Changing value - can be clicked by the user to enter a new value |
+| **KDisplay** | Changing value - can be clicked by the user to enter a new value |
+| **RadioDisplay** | Changing value - preset from a list of choices |
+| **Radio2Display** | Changing value - preset from a list of choices (update of RadioDisplay) |
+| **KSpinBox** | Changing value - changed by pressing the arrows to increase/decrease |
+| **KSpinBox2** | Changing value - changed by pressing the arrows to increase/decrease, can be clicked to enter new value |
+| **LED** | LED display to show some status (can be on/off) |
+| **SVG Display** | Set of images to change depending on input |
+| **MyItems** | Container element which can contain other elements |
+| **Border** | Frame element which can contain other elements |
+| **Button** | Button |
+| **XButton** | Button with an LED indicator |
+| **GLView** | 3D Visualization |
+| **NCView** | 2D Visualization |
+| **Logview** | Program log window |
+| **Statusbar** | Progress and status bar |
+| **NCList** | Program G-code commands list |
+| **Myscope** | Time graphs |
+| **CentringView** | Centering widget (built-in) |
+| **Rotation2View** | Full program rotation widget (built-in) |
+The following table outlines the parameters that define the on-screen elements within myCNC:
+^ Parameter ^ Example ^ Use ^
+| **type** | type="label" | Element type |
+| **skin** | skin="gantry/gantry" | Background for the element |
+| **where** | where="oil-change" | Which container element is the current element in |
+| **position** | position="0;0" | XY position (in pixels) within the container element |
+| **width** | width="490" | Width, in pixels |
+| **height** | height="200" | Height, in pixels |
+| **labelWidth** | labelWidth="490" | Label width, in pixels (if the element is, or contains, a label |
+| **displayWidth** | displayWidth="90" | Width of the display element, in pixels |
+| **labelFgColor** | labelFgColor="##f-title" | Foreground colour for the label |
+| **labelBgColor** | labelBgColor="##b-title" | Background colour for the label |
+| **labelFontSize** | labelFontSize="18" | Label font size |
+| **labelFontStyle** | labelFontStyle="normal" | Label font style (normal, bold, etc) |
+| **message** | <message>Mileage/Oil Change</message> | Static text being displayed |
+| **name** | name="display-cnc-gvariable-6090" | Name of the variable or input being displayed |
+| **bgColor** | bgColor="##b-display" | Background colour of the element (other than label) |
+| **fgColor** | fgColor="##f-display" | Foreground colour of the element (other than label) |
+| **fontStyle** | fontStyle="bold" | Font style (normal, bold, etc) |
+| **format** | format="%6.3f" | Format of presentation for a value (number of digits, number of decimal places, float/integer), or format of the list for a RadioDisplay type element |
+| **displayAlignment** | displayAlignment="right;bottom" | Alignment of the element (right, left, center, bottom, etc) |
+| **fontFamily** | fontFamily="Open Sans" | Font used for the element |
+| **deviation** | deviation="0.0005" | Minimum necessary change in the value to display a new value for the user |
+| **action** | action="direct-run:G90 G92 X %v" | Action that will be executed after the element has been clicked |
+| **orientation** | orientation="horizontal" | Orientation of the element (vertical/horizontal) |
 ++++Label|
@@ Line 355: / Line 406: @@
   * it is necessary to **include** the actual code for the widget that will be inserted (oil-change.xml). That file contains all the necessary information about what's inside the widget, however it is not necessary to edit it if the entire widget needs to be moved or removed from the screen.
-Note that the widget within which the oil-change myitems window is embedded is its own separate widget (consisting of a frame with rounded borders). The example code for that will be as follows:
+++++
+++++ Border |
+Note that while the myitems screen element from the example above is its own element, it is also embedded into a separate on-screen element called the border. This border is a frame around an element (typically with rounded corners) and it allows for an easy visual separation between different on-screen elements.
+As mentioned, an example of a border can be seen around the oil change section in the user settings tab of the X1366M/M4 profiles:
+{{:mycnc:screen-config-033-border.png}}
+Sample border code is available here:
 <code c>  <gitem  where="user-widget" name="oil-change-frame"
@@ Line 369: / Line 431: @@
 ++++
+++++ Skin |
+A skin is a parameter which effectively serves as a background for the element within which it is embedded.
+Example of a skin can be seen in the Gantry Alignment widget:
+{{:mycnc:screen-config-034-skin.png}}
+The background of the widget consists of a diagram of the machine. This diagram is embedded using the ''skin'' parameter.
+Example code:
+<code><gitem  where="gantry-border" name="gantry-widget" bgColor="##b-widget"  type="myitems"
+skin="gantry/gantry"
+position="10;10" width="600" height="400" /></code>
+  * **where** specifies the element within which the new element is embedded
+  * **name** should be chosen to be unique
+  * **bgColor** specifies the background colour of the element
+  * **type** is set to ''myitems'' (discussed in the other section of this manual)
+  * **skin** is set to the image path within the art/buttons-no-theme folder
+  * **position** specifies the position in the element within which the item is located
+  * **width** and **height** specify the size
+++++
 ++++Button|
@@ Line 398: / Line 486: @@
     * **both** - there are separate actions (";" semicolon separated) for **pressed** and **released** events
   * **skinbase** - besides the Image file for each button there is a common **skin** SVG file for all the buttons. For selected buttons skin file can be redefined with **skinbase** attribute which specifies the border/mask which the button will be used with. This SVG file will be used as a bottom layer for the button image.
+    * A skinbase set equal to "transparent" will remove the border around a button or an on-screen element.
 ++++
@@ Line 411: / Line 500: @@
 <gitem where="x-mill"
  xattr="3;3;16;16;led;red;round"
- address="outputs" number="#OUTPUT_SPINDLE".
+ address="outputs" number="#OUTPUT_SPINDLE"
  position="720;10" width="70" height="70"
  image="M/button-m03" action="plc-run:M03/#5524"
@@ Line 897: / Line 986: @@
 | item: | See [[mycnc:item_list|Common Item List]] for more information. |
-| fake | Empty Handler Action. Nothing happens when you run this action |
+| fake | Empty Handler Action. Nothing happens when you run this action. |
 | myitem-value-inc, myitem-value-dec | Increement/Decrement XML item value by name |