User Tools

Site Tools


mycnc:mycnc_screen_configuration

Differences

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

Link to this comparison view

Both sides previous revision Previous revision
Next revision
Previous revision
mycnc:mycnc_screen_configuration [2019/12/03 15:17]
ivan
mycnc:mycnc_screen_configuration [2020/05/08 13:41] (current)
ivan
Line 1: Line 1:
-===== MyCNC Screen Configuration ======+===== Screen ​Editing and Configuration ======
  
-Examples ​for the screen configuration of myCNC software are available [[mycnc:​mycnc_screen_configuration:​screen_configuration_examples|here]]. ​+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]].  
 + 
 +Video tutorial: 
 + 
 +{{youtube>​Nnz82oJOLA4?​large}} 
 + 
 +==== Getting Started with editing the myCNC screen==== 
 + 
 +By default, myCNC comes with a number of profiles, each with slight visual differences which are designed to best suit the workflow of a particular system, be it a plasma cutting machine, a mill, or a tangential knife setup. However, sometimes it is necessary to edit the software screen to better suit the particular workflow of the operator. Luckily, the myCNC software is almost endlessly customizable since it comes with the ability to edit the .xml files which are responsible for displaying the on-screen content.  
 + 
 +These .xml files are stored in your profile folder. On Ubuntu systems, go to your home folder, and then navigate to ''​.config/​myCNC/​profiles''​. All your profiles (which can be chosen from within the myCNC software by going into ''​Settings > Info''​) are stored here: 
 + 
 +{{:​mycnc:​screen-config-028-profiles.png}} 
 + 
 +Upon opening the necessary profile folder (we will be using X1366M in this example, for the simple 3-axis mill profile), you are presented with a list of all the .xml files which will populate your screen:  
 + 
 +{{:​mycnc:​screen-config-029-x1366m.png}} 
 + 
 +However, merely being in the profile folder does not mean that the .xml file's contents will be displayed on the myCNC screen. In order for the .xml file to be used, it must be included in the cnc-screen.xml file that is located within that profile'​s folder: 
 + 
 +{{:​mycnc:​screen-config-030-cnc-screen.png}} 
 + 
 +Upon opening the cnc-screen.xml file and scrolling down to the bottom, you are presented with a list of all the files from within the same folder which will be included when building the myCNC screen: 
 + 
 +{{:​mycnc:​screen-config-031-cnc-screen.png}} 
 + 
 +These files are named according to the different elements they put up on the screen (''​x-coordinates.xml''​ is responsible for displaying the coordinates,​ ''​x-gantry.xml''​ deals with the gantry alignment widget, etc). Don't forget to save the files and reload the myCNC application for the changes to take effect
  
 ==== MyCNC GUI elements ==== ==== MyCNC GUI elements ====
  
-=== Label ===+Below is a list of the main elements that can be utilized to create or edit a myCNC profile screen. Some of the functions of these elements overlap (such as BDisplay and KDisplay) - it is left to the user to decide which element best suits their workflow.  
 + 
 +^ 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|
  
 Labels are static text elements which are displayed as a text box (typically simple text headings/​titles/​etc). An example of such a label can be seen in the User Settings window of the 1366M4 profile, in the Oil Change tab: Labels are static text elements which are displayed as a text box (typically simple text headings/​titles/​etc). An example of such a label can be seen in the User Settings window of the 1366M4 profile, in the Oil Change tab:
Line 31: Line 110:
   * **message** can be written in the required languages (which must be specified). The program will automatically display the correct message for each selected program language. ​   * **message** can be written in the required languages (which must be specified). The program will automatically display the correct message for each selected program language. ​
  
- +++++ 
-=== Display ​===+++++ Display|
  
 **Display** allows to show dynamic info (such as a changing value), and often works in conjunction with a Label (a label will create some title, and the dynamic changing value will be placed on the screen next to the Label as a Display). An example of a Display is the Trip Counter from the User Settings window in the 1336M4 profile: **Display** allows to show dynamic info (such as a changing value), and often works in conjunction with a Label (a label will create some title, and the dynamic changing value will be placed on the screen next to the Label as a Display). An example of a Display is the Trip Counter from the User Settings window in the 1336M4 profile:
Line 57: Line 136:
   * **format** specifies how the values are presented. The first number specifies the overall digits that the value will display, while the second number specifies the amount of digits after the dot. F stands for float, while d stands for integer. For example, in this case, %6.3f specifies a float number with six total digits maximum and which allows the number to display up to the third decimal place (degree of accuracy). ​   * **format** specifies how the values are presented. The first number specifies the overall digits that the value will display, while the second number specifies the amount of digits after the dot. F stands for float, while d stands for integer. For example, in this case, %6.3f specifies a float number with six total digits maximum and which allows the number to display up to the third decimal place (degree of accuracy). ​
   * **deviation** can be specified to indicate the minimum absolute value change that would require the program to display a new value. For example, deviation of 0.01 means that the value needs to change by at lease 0.01 (absolute value) for the new numeric value to be displayed. This allows to eliminate visual changes/​jumps in numbers due to small changes which can be disregarded. ​   * **deviation** can be specified to indicate the minimum absolute value change that would require the program to display a new value. For example, deviation of 0.01 means that the value needs to change by at lease 0.01 (absolute value) for the new numeric value to be displayed. This allows to eliminate visual changes/​jumps in numbers due to small changes which can be disregarded. ​
 +++++
  
-=== BDisplay ​===+++++ BDisplay|
  
 The BDisplay element allows to display a dynamic value, like a typical Display, which can also be clicked. When clicked, a popup element will be brought up on the screen that will allow the user to enter a new value. For example, the program coordinates displayed on the main screen of the software are BDisplay elements which bring up a popup when clicked, allowing to change their values: The BDisplay element allows to display a dynamic value, like a typical Display, which can also be clicked. When clicked, a popup element will be brought up on the screen that will allow the user to enter a new value. For example, the program coordinates displayed on the main screen of the software are BDisplay elements which bring up a popup when clicked, allowing to change their values:
Line 83: Line 163:
   * **action** allows to perform some sort of action or command after the confirmation checkmark in the popup window is pressed (after the new value is entered). This value is stored as %v and will be used to change the program coordinates to the necessary value in the selected axis. This is extremely useful for changing the values which would require an action to do so (e.g. some kind of machine movement). If no actions are required (i.e., if all that is required is a value/​variable change which does not lead to direct machine actions immediately),​ KDisplay can also be used.   * **action** allows to perform some sort of action or command after the confirmation checkmark in the popup window is pressed (after the new value is entered). This value is stored as %v and will be used to change the program coordinates to the necessary value in the selected axis. This is extremely useful for changing the values which would require an action to do so (e.g. some kind of machine movement). If no actions are required (i.e., if all that is required is a value/​variable change which does not lead to direct machine actions immediately),​ KDisplay can also be used.
   * **name** specifies the global variable or the item that the element will be receiving its value from to display. In this case, it is receiving a value from the work-pos-axis-0 item. A comprehensive [[mycnc:​item_list|Common Item list]] and [[mycnc:​global_variables|Global Variables list]] can be used for reference in choosing a name for a BDisplay element. ​   * **name** specifies the global variable or the item that the element will be receiving its value from to display. In this case, it is receiving a value from the work-pos-axis-0 item. A comprehensive [[mycnc:​item_list|Common Item list]] and [[mycnc:​global_variables|Global Variables list]] can be used for reference in choosing a name for a BDisplay element. ​
 +++++
  
-=== RadioDisplay ​===+++++RadioDisplay|
  
 RadioDisplay allows to display some value from a list. For example, the display of the coordinate system in the Diagnostics window of the 1366M4 profile is done by using a RadioDisplay element. This allows the user to select some coordinate system (which is not labeled G54/G55/etc within the software, but rather 1, 2, 3, etc), and then display the selected choice as some sort of a user-facing text string (thus, for example, displaying a software "​2",​ which would not be useful to the user without an external reference sheet, as "​G55"​). This is useful to "​translate"​ machine settings or error codes into a text string that the user can easily read: RadioDisplay allows to display some value from a list. For example, the display of the coordinate system in the Diagnostics window of the 1366M4 profile is done by using a RadioDisplay element. This allows the user to select some coordinate system (which is not labeled G54/G55/etc within the software, but rather 1, 2, 3, etc), and then display the selected choice as some sort of a user-facing text string (thus, for example, displaying a software "​2",​ which would not be useful to the user without an external reference sheet, as "​G55"​). This is useful to "​translate"​ machine settings or error codes into a text string that the user can easily read:
Line 139: Line 220:
   * **action** is set to "​cnc-gvariable-toggle-8225"​. Here, when the RadioDisplay element is clicked, the action is triggered and the global variable is toggled between 0 and 1.   * **action** is set to "​cnc-gvariable-toggle-8225"​. Here, when the RadioDisplay element is clicked, the action is triggered and the global variable is toggled between 0 and 1.
   * **format** is set to "​Rectangle;​Area"​. This corresponds to the 0/1 toggle for the global variable, when the RadioDisplay is clicked, the visual display element also switches - however, it is important to note that it is the **action** and not the **format** which determines what actually happens to the program when the click occurs.  ​   * **format** is set to "​Rectangle;​Area"​. This corresponds to the 0/1 toggle for the global variable, when the RadioDisplay is clicked, the visual display element also switches - however, it is important to note that it is the **action** and not the **format** which determines what actually happens to the program when the click occurs.  ​
 +++++
  
-=== Radio2Display ​===+++++ Radio2Display ​|
  
 Radio2Display allows for a more granular display configuration than the simpler RadioDisplay. Similar to RadioDisplay,​ Radio2Display transforms some system values into a user-facing string from a list of options which are specified beforehand. For example, the step size values for the jog buttons on the main screen of the 1366M4 profile use Radio2Display elements: Radio2Display allows for a more granular display configuration than the simpler RadioDisplay. Similar to RadioDisplay,​ Radio2Display transforms some system values into a user-facing string from a list of options which are specified beforehand. For example, the step size values for the jog buttons on the main screen of the 1366M4 profile use Radio2Display elements:
Line 171: Line 253:
 The example in RadioDisplay code can also be used to assign actions to Radio2Display if type="​radio2-display"​. The example in RadioDisplay code can also be used to assign actions to Radio2Display if type="​radio2-display"​.
  
-=== KDisplay ​===+++++ 
 + 
 +++++ KDisplay ​|
  
 KDisplay is similar to BDisplay, as it allows to display some dynamic changing variable/​number and to register when it is clicked on the software screen (after which the user can enter a new value). It is different from BDisplay in that it is geared towards keyboard/​mouse combos (rather than touchscreen setups) and does not bring up a full popup screen, and because it does not allow for actions to be executed after the new value has been inputted. As such, it is typically used on simple value changes which do not cause direct machine actions immediately after. ​ KDisplay is similar to BDisplay, as it allows to display some dynamic changing variable/​number and to register when it is clicked on the software screen (after which the user can enter a new value). It is different from BDisplay in that it is geared towards keyboard/​mouse combos (rather than touchscreen setups) and does not bring up a full popup screen, and because it does not allow for actions to be executed after the new value has been inputted. As such, it is typically used on simple value changes which do not cause direct machine actions immediately after. ​
Line 195: Line 279:
   * **name** displays the global variable that will be used in this field (in this example, it's global variable #7525 for the gantry alignment procedure)   * **name** displays the global variable that will be used in this field (in this example, it's global variable #7525 for the gantry alignment procedure)
   * **deviation** specifies the minimum value by which the parameter (global variable used in this case) should change for the change to be visually represented on the screen. This cutoff allows to disregard some small changes. ​   * **deviation** specifies the minimum value by which the parameter (global variable used in this case) should change for the change to be visually represented on the screen. This cutoff allows to disregard some small changes. ​
 +++++
  
-=== KSpinBox ​===+++++ KSpinBox ​|
  
 KSpinBox shows a certain value with an arrow on either side, allowing the user to change the value upon pressing (or pressing and holding) the arrow buttons. The PWM outputs section of the Diagnostics window is done using KSpinBoxes: KSpinBox shows a certain value with an arrow on either side, allowing the user to change the value upon pressing (or pressing and holding) the arrow buttons. The PWM outputs section of the Diagnostics window is done using KSpinBoxes:
Line 224: Line 309:
   * **number** specifies the particular hardware port that the on-screen element will be monitoring. Here, it is the number of the PWM output, as specified in the address. It is counted from 0, not from 1, so PWM output 1's number is 0, PWM Output 2 is number 1, etc.   * **number** specifies the particular hardware port that the on-screen element will be monitoring. Here, it is the number of the PWM output, as specified in the address. It is counted from 0, not from 1, so PWM output 1's number is 0, PWM Output 2 is number 1, etc.
   * **type** is set to "​kspinbox"​   * **type** is set to "​kspinbox"​
 +++++
  
-=== KSpinBox2 ​===+++++ KSpinBox2 ​|
  
-KSpinBox2 allows the user to add an element similar to a regular KSpinBox, displaying a value between two arrows, which also allows the user to click on the current value and change it using a popup screen in addition to changing the value by pressing the respective arrows. This element is used, for example, on the main screen of myCNC software'​s 1366M4 profile to change overspeed, jog overspeed, and spindle speed. Below is an example of such a screen element when the value in the jog overspeed box has been clicked, bringing up a popup screen:+KSpinBox2 allows the user to add an element similar to a regular KSpinBox, displaying a value between two arrows, which also allows the user to click on the current value and change it using a popup screen in addition to changing the value by pressing the respective arrows. This element is used, for example, on the main screen of myCNC software'​s 1366M4 profile to change overspeed, jog overspeed, and spindle speed (safe range for overspeed values is 5 to 150% on the ET6, ET7 and ET10 controllers). Below is an example of such a screen element when the value in the jog overspeed box has been clicked, bringing up a popup screen:
  
 {{:​mycnc:​screen-config-011-kspinbox2-jog-overspeed.png}} {{:​mycnc:​screen-config-011-kspinbox2-jog-overspeed.png}}
Line 257: Line 343:
   * **orientation** can be set to be horizontal or vertical   * **orientation** can be set to be horizontal or vertical
   * the message can be listed in different languages, the system will automatically display the correct message depending on the user language settings for myCNC   * the message can be listed in different languages, the system will automatically display the correct message depending on the user language settings for myCNC
 +++++
  
-=== LED Display ​===+++++ LED Display ​|
  
 LED Display allows the user to display an LED element on the screen. This light can be on or off, and each LED element can have a different colour set for its ON configuration. This is useful to show the state of system items which have a binary state (on or off), such as input ports which can be viewed from the Diagnostics page: LED Display allows the user to display an LED element on the screen. This light can be on or off, and each LED element can have a different colour set for its ON configuration. This is useful to show the state of system items which have a binary state (on or off), such as input ports which can be viewed from the Diagnostics page:
Line 281: Line 368:
   * **number** specifies the particular hardware port in the specified hardware section (inputs in this example) that will be monitored. Here, the state of port 0 will be monitored. ​   * **number** specifies the particular hardware port in the specified hardware section (inputs in this example) that will be monitored. Here, the state of port 0 will be monitored. ​
   * **type** is set to "​led"​   * **type** is set to "​led"​
 +++++
  
-=== SVG Display ​===+++++ SVG Display ​|
  
 SVG Display allows to display a set of images that will be changing depending on the user input (cycling through the available images). This allows for more granular control than an LED Display element which can only show two states of a system. SVG Display allows to display a set of images that will be changing depending on the user input (cycling through the available images). This allows for more granular control than an LED Display element which can only show two states of a system.
Line 303: Line 391:
   * **K** is the coefficient by which the value will be multiplied by before it is used by the element   * **K** is the coefficient by which the value will be multiplied by before it is used by the element
   * **min** and **max** values specify the bounds for the values which are used. Anything lower than the min value is assumed to be equal to min (displays the first image on the list), everything higher than the max value is assumed to be equal to max (displays the last image on the list). ​   * **min** and **max** values specify the bounds for the values which are used. Anything lower than the min value is assumed to be equal to min (displays the first image on the list), everything higher than the max value is assumed to be equal to max (displays the last image on the list). ​
 +++++
  
-=== Myitems Widget ​===+++++ Myitems Widget ​|
  
 The Myitems widget allows the user to create a section or a window within the main myCNC screen which can later be filled with buttons/​display elements/​etc. The Myitems widget will serve as a container which can easily be moved on the screen, opened and closed without having to write additional code for the buttons which are inside the widget if simple changes to the widget size/​location are required. Most window elements are done using a myitems widget, for example, the oil change section of the window in the User Settings: ​ The Myitems widget allows the user to create a section or a window within the main myCNC screen which can later be filled with buttons/​display elements/​etc. The Myitems widget will serve as a container which can easily be moved on the screen, opened and closed without having to write additional code for the buttons which are inside the widget if simple changes to the widget size/​location are required. Most window elements are done using a myitems widget, for example, the oil change section of the window in the User Settings: ​
Line 323: Line 412:
   * 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.   * 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 ​cornersand 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"​ <code c>  <​gitem ​ where="​user-widget"​ name="​oil-change-frame"​
Line 336: Line 436:
   * **basewidth** and **baseheight** are specified to serve as reference width and height during the window resizing process. The system will look at the basewidth/​baseheight,​ and compare that with the actual current width and height of the on-screen widget element. This will allow to position other elements (which are inside the widget) correctly, according to the difference between the default (base) and the actual width and height of the program window. ​   * **basewidth** and **baseheight** are specified to serve as reference width and height during the window resizing process. The system will look at the basewidth/​baseheight,​ and compare that with the actual current width and height of the on-screen widget element. This will allow to position other elements (which are inside the widget) correctly, according to the difference between the default (base) and the actual width and height of the program window. ​
  
-=== Button ​===+++++ 
 + 
 +++++ 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|
  
 A PushButton screen item can be used on myCNC screen to serve as as a button which will trigger some command when pressed. For example, the refresh button can be seen on the main screen of the myCNC software: A PushButton screen item can be used on myCNC screen to serve as as a button which will trigger some command when pressed. For example, the refresh button can be seen on the main screen of the myCNC software:
Line 364: Line 492:
     * **both** - there are separate actions (";"​ semicolon separated) for **pressed** and **released** events     * **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.   * **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.
 +++++
  
-=== XButton ​===+++++ XButton ​|
  
 XButton is a Push button (similar to a typical button described above) with a built-in light indicator. The light is typically used to show the current state of some CNC controller input, output pin, or CNC global variable register value. Effectively,​ this combines the Button and LED Display elements, for example, in the M03 button in the 1366M4 profile. XButton is a Push button (similar to a typical button described above) with a built-in light indicator. The light is typically used to show the current state of some CNC controller input, output pin, or CNC global variable register value. Effectively,​ this combines the Button and LED Display elements, for example, in the M03 button in the 1366M4 profile.
Line 376: Line 506:
 <gitem where="​x-mill" ​ <gitem where="​x-mill" ​
  ​xattr="​3;​3;​16;​16;​led;​red;​round" ​  ​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" ​  ​position="​720;​10"​ width="​70"​ height="​70" ​
  ​image="​M/​button-m03"​ action="​plc-run:​M03/#​5524" ​  ​image="​M/​button-m03"​ action="​plc-run:​M03/#​5524" ​
Line 406: Line 536:
       * "​number"​ - defines the pin number than the light is attached to. A number can be assigned directly, for example \\ number="​0"​ for pin #0 \\ number="​15"​ for ipn #15 \\ or through pin definition file used in Hardware PLC - "​pins.h"​. In this case sign "#"​ and the pin name defined in "​pins.h"​ should be instead of pin number. For example \\ **number="#​OUTPUT_SPINDLE"​** \\ and "​pins.h should contain this name definition, for example <code C>#​define OUTPUT_SPINDLE 7</​code>​       * "​number"​ - defines the pin number than the light is attached to. A number can be assigned directly, for example \\ number="​0"​ for pin #0 \\ number="​15"​ for ipn #15 \\ or through pin definition file used in Hardware PLC - "​pins.h"​. In this case sign "#"​ and the pin name defined in "​pins.h"​ should be instead of pin number. For example \\ **number="#​OUTPUT_SPINDLE"​** \\ and "​pins.h should contain this name definition, for example <code C>#​define OUTPUT_SPINDLE 7</​code>​
  
-=== GLView ​===+Another example of an xbutton realized with a **ref** value for reference to switch (toggle) a variable between two states: 
 + 
 +<​code><​gitem where="​x-reserv"​ position="​85;​5"​ width="​80"​ height="​80"​  
 + image="​rect/​normal"​  
 + ​image-hovered="​rect/​hovered"​ 
 + ​action="​cnc-gvariable-switch-5701" ​  
 + ​xattr="​0;​0;​80;​80;​led;​red;​round"​ name="​display-cnc-gvariable-5701"​ data="​---;​1;​16"​ ref="​16"​ tooltip="​Sheet/​tube cutting"​ images="​mode-sheet;​mode-tube"​ 
 + ​type="​xbutton"/></​code>​ 
 + 
 +  * **data** specifies which values the switch is occuring (the cnc-gvariable-switch-5701 action in this case) 
 +  * **ref** specifies the reference value to monitor for 
 +++++ 
 + 
 +++++ GLView (3D Visualization)|
  
 GLView allows to display a 3D visualization window which will show a visualization of the imported program (such as the window on the main screen of myCNC software'​s 1366M4 profile). ​ GLView allows to display a 3D visualization window which will show a visualization of the imported program (such as the window on the main screen of myCNC software'​s 1366M4 profile). ​
Line 429: Line 572:
   * **ColorT0, T1, etc** describe the visualization colours for different tools in the G-code   * **ColorT0, T1, etc** describe the visualization colours for different tools in the G-code
   * **HColorT0, T1, etc** describes the highlight colour for the selected tool   * **HColorT0, T1, etc** describes the highlight colour for the selected tool
 +++++
  
-=== NCView ​===+++++ NCView ​(2D Visualization)|
  
 {{:​mycnc:​screen-config-018-2d.png}} {{:​mycnc:​screen-config-018-2d.png}}
Line 452: Line 596:
   * **ColorT0, T1, etc** signify the tool colours in the visualization (light blue in this case)   * **ColorT0, T1, etc** signify the tool colours in the visualization (light blue in this case)
   * **HColor** signifies the highlight colour for each tool (colour of the tool visualization when selected - yellow in this case)   * **HColor** signifies the highlight colour for each tool (colour of the tool visualization when selected - yellow in this case)
 +++++
  
-=== X-log and Logview ​===+++++ X-log and Logview ​|
  
 Logview is the log window tab at the bottom of the main screen of myCNC software (within the x-log widget). It contains information on program start and end times, error messages, etc.  Logview is the log window tab at the bottom of the main screen of myCNC software (within the x-log widget). It contains information on program start and end times, error messages, etc. 
Line 485: Line 630:
   * **where** points out that the status bar is inserted into the x-log widget, same as the Logview element.   * **where** points out that the status bar is inserted into the x-log widget, same as the Logview element.
   * **name** and **type** are set to "​statusbar"​   * **name** and **type** are set to "​statusbar"​
- +++++ 
-=== NCList ​===+++++ NCList ​(G-code list) |
  
 The NCList widget is used to display the G-code commands window to the user, as can be seen in the G-code tab on the main screen of the 1366M4 profile, as well as the nesting, rotation and Run From Here buttons: ​ The NCList widget is used to display the G-code commands window to the user, as can be seen in the G-code tab on the main screen of the 1366M4 profile, as well as the nesting, rotation and Run From Here buttons: ​
Line 503: Line 648:
   * **type="​frame"​** allows to draw a frame border around the NCList window. ​   * **type="​frame"​** allows to draw a frame border around the NCList window. ​
   * **hide-list** serves as an option to hide the x-log and x-mill windows when the NCList window is active (as they are all situated in the same area). The **exclusive** flag signifies that only the NCList widget will be up on the screen if it is selected, thus allowing to not interfere with x-log and x-mill windows (the same setting is present in both other respective windows).   * **hide-list** serves as an option to hide the x-log and x-mill windows when the NCList window is active (as they are all situated in the same area). The **exclusive** flag signifies that only the NCList widget will be up on the screen if it is selected, thus allowing to not interfere with x-log and x-mill windows (the same setting is present in both other respective windows).
 +++++
  
-=== CentringView ​===+++++ Myscope (graphs and plots) | 
 + 
 +The ''​myscope''​ screen element allows the user to display time graphs of information received by the myCNC application. The graphs will look similar to the following image: 
 + 
 +{{:​mycnc:​screen-config-032-myscope-plot.png}} 
 + 
 +Sample code to add a ''​myscope''​ element to the myCNC screen:  
 + 
 +<​code>​ <gitem where="​xp"​ name="​x-graph"​ position="​90;​90"​  
 + width="​680"​ height="​360"​ basewidth="​680"​ baseheight="​360"​ hidden="​yes"​ 
 + ​type="​frame"​ border-color="##​b-border"​ border-width="​2"​ border-radius="​10"​  
 + ​bgColor="##​b-main" ​ /> 
 + 
 + 
 +<gitem where="​x-graph"​ position="​10;​10"​ width="​660"​ height="​165"​  
 + ​name="​myscope1"​ type="​myscope"​ yrange="​0;​4095"​ K="​1"​ 
 + ​source="​adc0;​adc1"​ sampling="​50"​ /></​code>​  
 + 
 +  * **where** indicated into which screen element the myscope graph will be inserted (in this example, it will be inserted into a border called ''​x-graph''​).  
 +  * **position** indicates the XY position within the element into which it is inserted 
 +  * **width** and **height** indicate the size of the graph 
 +  * **name** should be a unique name  
 +  * **type** should be set to ''​myscope''​ 
 +  * **yrange** will specify the Y-axis range of the graph  
 +  * **K** will specify the coefficient by which the necessary information will be multiplied by before being displayed 
 +  * **source** is the name of the port or the variable which will be monitored. A list of possible sources is provided below. 
 +  * **sampling** specifies the rate at which the information will be retrieved (in this example, the graph will be updated every 50 milliseconds) 
 + 
 +^ Source ^ Description ^ 
 +| adc0 | ADC #0. ''​adc0''​ through ''​adc7''​ are available | 
 +| pwm0 | PWM #0. ''​pwm0''​ through ''​pwm7''​ are available | 
 +| multidev-adc0 | ADC #0 of the slave controller (if multiple devices are used). multidev-adc0 through multidev-adc7 are available |  
 +| speed-xyz | Movement speed of the machine | 
 +| speed-abc | Rotation movement speed of the machine |  
 +| thc-control | THC system speed | 
 +| thc-reference | THC Reference voltage | 
 +| thc-sensor | THC Arc Voltage |  
 +| data-counter | Reserved for future implementation |  
 +| time-counter | Reserved for future implementation | 
 +| cnc-gvariable- | Monitor a myCNC [[mycnc:​global_variables|global variable]]. The variable should be included after the dash, such as in ''​cnc-gvariable-7010''​ | 
 + 
 + 
 +++++ 
 + 
 +++++CentringView|
  
 CentringView consists of the probe tools which allow to center the machine tool with regards to some obstacles. The window is brought up by clicking the Probe Sensor Window button: CentringView consists of the probe tools which allow to center the machine tool with regards to some obstacles. The window is brought up by clicking the Probe Sensor Window button:
Line 524: Line 714:
   * **action** specifies the command which will be perform when the button is pressed (in this case, the button toggles the visibility of the x-centring widget (found in the x-centring.xml file)   * **action** specifies the command which will be perform when the button is pressed (in this case, the button toggles the visibility of the x-centring widget (found in the x-centring.xml file)
   * type is set to "​button"​   * type is set to "​button"​
 +++++
  
-=== Rotation2View ​===+++++Rotation2View|
  
 Rotation2View is the window which allows to rotate the program part by some degree. It is brought up by clicking the Rotate button in the G-code tab on the main screen of myCNC software: Rotation2View is the window which allows to rotate the program part by some degree. It is brought up by clicking the Rotate button in the G-code tab on the main screen of myCNC software:
Line 546: Line 737:
   * **action** specifies that pressing this button will toggle the x-rotate window visibility   * **action** specifies that pressing this button will toggle the x-rotate window visibility
   * **type** is set to "​button"​   * **type** is set to "​button"​
 +
 +Sample code for the rotation2view element:
 +
 +<gitem where="​rotateborder" ​
 + ​position="​5;​5" ​
 + ​width="​1346"​ height="​703" ​
 + ​basewidth="​1346"​ baseheight="​703"​ table-rotation="​0"​
 + ​type="​rotation2view"​ name="​rotation2view"​ bgColor="##​b-main"​ ></​gitem>​
 +
 +  * **position** describes the XY location within the **where** element
 +  * **width** and **height** describe the element'​s parameters in pixels
 +  * **table-rotation** sets the orientation of the table. //-90// and //90// are the typical values to rotate the orientation
 +  * **type** is set to //​rotation2view//​
 +++++
  
 ==== MyCNC Actions ==== ==== MyCNC Actions ====
Line 551: Line 756:
 All button-like screen components (button, xbutton, bdisplay, kspinbox2) run a **Handler** procedure when pressed or released event is activated by a mouse click or a touch screen tap. The Handler is defined in the "​action"​ attribute of an XML configuration item.  All button-like screen components (button, xbutton, bdisplay, kspinbox2) run a **Handler** procedure when pressed or released event is activated by a mouse click or a touch screen tap. The Handler is defined in the "​action"​ attribute of an XML configuration item. 
  
-List of actions ​is presented below:+++++ List of general ​actions: ​|
  
 ^ Action Name ^ Description ^ ^ Action Name ^ Description ^
Line 565: Line 770:
 | toggle-item:​ | This is a general toggle action command for any item (item name is specified after the colon). Item list can be found [[mycnc:​item_list|here]]. | | toggle-item:​ | This is a general toggle action command for any item (item name is specified after the colon). Item list can be found [[mycnc:​item_list|here]]. |
 | laser-marker- | Special purpose action reserved for laser marker machines. This action perform a test run in anticipation of the actual cutting process. | | laser-marker- | Special purpose action reserved for laser marker machines. This action perform a test run in anticipation of the actual cutting process. |
 +++++ 
  
-===Items===+++++Items|
  
 Items are a subset of actions, and are written in the following form - item:​item-name (such as //​item:​motion-rapid-speed-xy//​). Items are different from actions in that items effectively describe a value that can be changed by some input (similar to Global Variables which store a value). In this way, there can exist both an action with some name, and an item with that same name, which are separate from one another (one will describe an action that will be taken, and the other will describe a value that will be changed by that action). ​ Items are a subset of actions, and are written in the following form - item:​item-name (such as //​item:​motion-rapid-speed-xy//​). Items are different from actions in that items effectively describe a value that can be changed by some input (similar to Global Variables which store a value). In this way, there can exist both an action with some name, and an item with that same name, which are separate from one another (one will describe an action that will be taken, and the other will describe a value that will be changed by that action). ​
Line 575: Line 781:
  
 A list of commonly used items can be found in the [[mycnc:​item_list|Item List]]. ​ A list of commonly used items can be found in the [[mycnc:​item_list|Item List]]. ​
 +++++
  
-=== Player actions ​===+++++ Player actions|
  
 ^ Action Name ^ Description ^ ^ Action Name ^ Description ^
Line 603: Line 810:
 | mdi-open | Opens the Manual Data Input window | | mdi-open | Opens the Manual Data Input window |
  
 +++++
  
-=== Jog actions ​===+++++ Jog actions ​|
  
 ^ Action Name ^ Description ^ ^ Action Name ^ Description ^
Line 613: Line 821:
 | jog-0-minus-1-plus | Two-axes Jog, X- Y+ | | jog-0-minus-1-plus | Two-axes Jog, X- Y+ |
 | jog-0-minus-1-minus | Two-axes Jog, X- Y- | | jog-0-minus-1-minus | Two-axes Jog, X- Y- |
-| jog-overspeed-inc \\ jog-overspeed-dec | Increment/​Decrement Jog Overspeed value (%) - the default jog speed is set to be 100%. | +| jog-overspeed-inc \\ jog-overspeed-dec | Increment/​Decrement Jog Overspeed value (%) - the default jog speed is set to be 100%. Safe range between 5% and 150%. | 
-| jog-overspeed-set: ​ | Set given Jog Overspeed value (%). The bounds for overspeed can be set in Settings > Config > Motion |+| jog-overspeed-set: ​ | Set given Jog Overspeed value (%). Safe range between 5% and 150%. The bounds for overspeed can be set in Settings > Config > Motion | 
 +++++
  
- +++++ Motion Settings Actions ​|
-=== Motion Settings Actions===+
  
 ^ Action Name ^ Description ^ ^ Action Name ^ Description ^
Line 632: Line 840:
 | spindle-overspeed-inc \\ spindle-overspeed-dec \\ spindle-overspeed | Increase/​decrease/​set Spindle Speed (S) | | spindle-overspeed-inc \\ spindle-overspeed-dec \\ spindle-overspeed | Increase/​decrease/​set Spindle Speed (S) |
  
-=== Built-in Editor Actions ​===+++++ 
 + 
 +++++ Built-in Editor Actions ​|
  
 ^ Action Name ^ Description ^ ^ Action Name ^ Description ^
Line 650: Line 860:
 | editor-save-as | Save File As | | editor-save-as | Save File As |
 | editor-save | Save the editor file | | editor-save | Save the editor file |
 +++++
  
-=== File Manipulation Actions ​===+++++ File Manipulation Actions ​|
  
 ^ Action Name ^ Description ^ ^ Action Name ^ Description ^
Line 662: Line 873:
 | image-import | Import an image into myCNC | | image-import | Import an image into myCNC |
  
 +++++
  
-=== Visualization Actions ​===+++++ Visualization Actions ​|
  
 ^ Action Name ^ Description ^ ^ Action Name ^ Description ^
Line 675: Line 887:
 | 3dview-custom:​ | 3D Visualization:​ show Custom view, defined by Alpha, Beta, and Gamma angles for the rotation matrix ​ | | 3dview-custom:​ | 3D Visualization:​ show Custom view, defined by Alpha, Beta, and Gamma angles for the rotation matrix ​ |
  
 +++++
  
-=== Widget Manipulations Actions ​===+++++ Widget Manipulations Actions ​|
 These actions allow to display widgets on the screen which are then used to change certain machine values/​navigate to different menus/etc. They are displayed either as popup windows on the main screen, or full windows which require navigation to return back to the main screen. These actions allow to display widgets on the screen which are then used to change certain machine values/​navigate to different menus/etc. They are displayed either as popup windows on the main screen, or full windows which require navigation to return back to the main screen.
  
Line 702: Line 915:
 | mywidget: | Older version of the syntax for mywidget commands (still functional, but no longer developed further). The name of the widget would be set after the colon, and then, after a doubleslash,​ the show/​hide/​toggle command would be inserted. This has been largely replaced by the mywidget-toggle,​ mywidget-show and mywidget-hide syntax. | | mywidget: | Older version of the syntax for mywidget commands (still functional, but no longer developed further). The name of the widget would be set after the colon, and then, after a doubleslash,​ the show/​hide/​toggle command would be inserted. This has been largely replaced by the mywidget-toggle,​ mywidget-show and mywidget-hide syntax. |
  
 +++++
  
- +++++ Application Actions ​|
-=== Application Actions ​===+
  
 ^ Action Name ^ Description ^ ^ Action Name ^ Description ^
Line 710: Line 923:
 | cnc-config-save | Save myCNC configuration files to disk | | cnc-config-save | Save myCNC configuration files to disk |
  
 +++++
  
-=== Hardware Manipulation actions ​===+++++ Hardware Manipulation actions ​|
  
 ^ Action Name ^ Description ^ ^ Action Name ^ Description ^
Line 742: Line 956:
 | toggle-button-mist | Toggles the mist state on/off | | toggle-button-mist | Toggles the mist state on/off |
 | <​del>​toggle-button-cv-mode</​del>​ | Obsolete. Used for constant velocity mode toggle. | | <​del>​toggle-button-cv-mode</​del>​ | Obsolete. Used for constant velocity mode toggle. |
 +++++
  
-=== PLC Actions ​===+++++ PLC Actions ​|
  
  
Line 757: Line 972:
 | cnc-gvariable-toggle | Toggles a global variable (writes 0 or 1 into the global variable, depending on the previous value) | | cnc-gvariable-toggle | Toggles a global variable (writes 0 or 1 into the global variable, depending on the previous value) |
 | cnc-gvariable-clear | Clears the value of a global variable | | cnc-gvariable-clear | Clears the value of a global variable |
 +++++
  
-=== Job Actions ​===+++++ Job Actions ​|
  
 ^ Action Name ^ Description ^ ^ Action Name ^ Description ^
Line 775: Line 991:
 | mode-show-workarea | Shows a box around the program visualization which will denote the work area (useful to see the minimum material dimensions necessary to fit the entire program file in) | | mode-show-workarea | Shows a box around the program visualization which will denote the work area (useful to see the minimum material dimensions necessary to fit the entire program file in) |
  
 +++++
  
-=== OS/System Actions ​===+++++ OS/System Actions ​|
  
 ^ Action Name ^ Description ^ ^ Action Name ^ Description ^
Line 784: Line 1001:
 | application-minimize | Minimize MyCNC Application | | application-minimize | Minimize MyCNC Application |
  
 +++++
  
-=== CNC Variables manupulation Actions ​===+++++ CNC Variables manupulation Actions ​|
  
 ^ Action Name ^ Description ^ ^ Action Name ^ Description ^
Line 799: Line 1017:
 | item: | See [[mycnc:​item_list|Common Item List]] for more information. | | 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 | | myitem-value-inc,​ myitem-value-dec | Increement/​Decrement XML item value by name |
  
-=== HMI  Actions ​===+++++ 
 + 
 +++++ HMI  Actions ​|
  
 ^ Action Name ^ Description ^ ^ Action Name ^ Description ^
Line 820: Line 1040:
 | run-from-here | **Run From Here** command - start job from the selected line | | run-from-here | **Run From Here** command - start job from the selected line |
  
 +++++
  
 ==== MyCNC screen configuration examples ==== ==== MyCNC screen configuration examples ====
 The examples for the screen configuration can be found here: [[mycnc:​mycnc_screen_configuration:​screen_configuration_examples|Screen configuration examples]] The examples for the screen configuration can be found here: [[mycnc:​mycnc_screen_configuration:​screen_configuration_examples|Screen configuration examples]]
  
mycnc/mycnc_screen_configuration.1575404225.txt.gz · Last modified: 2019/12/03 15:17 by ivan