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/18 10:01] – 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 355: / Line 355: @@
   * 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 380: @@
 ++++
+++++ 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 435: @@
     * **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 449: @@
 <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 935: @@
 | 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 |