mycnc:mycnc_screen_configuration
Differences
This shows you the differences between two versions of the page.
Both sides previous revisionPrevious revisionNext revision | Previous revisionNext revisionBoth sides next revision | ||
mycnc:mycnc_screen_configuration [2019/12/19 12:38] – ivan | mycnc:mycnc_screen_configuration [2021/05/03 14:48] – ivan | ||
---|---|---|---|
Line 1: | Line 1: | ||
- | ===== MyCNC Screen Configuration ====== | + | ===== Screen |
- | Examples | + | //The default preset GUI for myCNC profiles is described in the following manual: [[mycnc: |
+ | |||
+ | 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 | ||
+ | |||
+ | Video tutorial for screen editing: | ||
+ | |||
+ | {{youtube> | ||
+ | |||
+ | ==== 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 '' | ||
+ | |||
+ | {{: | ||
+ | |||
+ | 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: | ||
+ | |||
+ | {{: | ||
+ | |||
+ | 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' | ||
+ | |||
+ | {{: | ||
+ | |||
+ | 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: | ||
+ | |||
+ | {{: | ||
+ | |||
+ | These files are named according to the different elements they put up on the screen ('' | ||
+ | |||
+ | In general, the order the files are loaded into myCNC (including .xml configuration files and your settings) is explained here: | ||
+ | |||
+ | {{youtube> | ||
==== MyCNC GUI elements ==== | ==== MyCNC GUI elements ==== | ||
+ | |||
+ | 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/ | ||
+ | | **KSpinBox2** | Changing value - changed by pressing the arrows to increase/ | ||
+ | | **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) | | ||
+ | | **timeview** | Time (clock) display | | ||
+ | |||
+ | The following table outlines the parameters that define the on-screen elements within myCNC: | ||
+ | |||
+ | ^ Parameter ^ Example ^ Use ^ | ||
+ | | **type** | type=" | ||
+ | | **skin** | skin=" | ||
+ | | **where** | where=" | ||
+ | | **position** | position=" | ||
+ | | **width** | width=" | ||
+ | | **height** | height=" | ||
+ | | **labelWidth** | labelWidth=" | ||
+ | | **displayWidth** | displayWidth=" | ||
+ | | **labelFgColor** | labelFgColor="## | ||
+ | | **labelBgColor** | labelBgColor="## | ||
+ | | **labelFontSize** | labelFontSize=" | ||
+ | | **labelFontStyle** | labelFontStyle=" | ||
+ | | **message** | < | ||
+ | | **name** | name=" | ||
+ | | **bgColor** | bgColor="## | ||
+ | | **fgColor** | fgColor="## | ||
+ | | **fontStyle** | fontStyle=" | ||
+ | | **format** | format=" | ||
+ | | **displayAlignment** | displayAlignment=" | ||
+ | | **fontFamily** | fontFamily=" | ||
+ | | **deviation** | deviation=" | ||
+ | | **action** | action=" | ||
+ | | **orientation** | orientation=" | ||
++++Label| | ++++Label| | ||
Line 234: | Line 320: | ||
++++ 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' | + | 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' |
{{: | {{: | ||
Line 333: | Line 419: | ||
* 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 | + | |
+ | ++++ | ||
+ | |||
+ | ++++ Border | | ||
+ | |||
+ | Note that while the myitems | ||
+ | |||
+ | As mentioned, an example | ||
+ | |||
+ | {{: | ||
+ | |||
+ | Sample border code is available here: | ||
<code c> < | <code c> < | ||
Line 347: | Line 444: | ||
++++ | ++++ | ||
+ | |||
+ | ++++ 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: | ||
+ | |||
+ | {{: | ||
+ | |||
+ | The background of the widget consists of a diagram of the machine. This diagram is embedded using the '' | ||
+ | |||
+ | Example code: | ||
+ | |||
+ | < | ||
+ | skin=" | ||
+ | position=" | ||
+ | |||
+ | * **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 '' | ||
+ | * **skin** is set to the image path within the art/ | ||
+ | * **position** specifies the position in the element within which the item is located | ||
+ | * **width** and **height** specify the size | ||
+ | |||
+ | ++++ | ||
++++Button| | ++++Button| | ||
Line 361: | Line 484: | ||
| | ||
</ | </ | ||
+ | |||
+ | A text element can serve as a button as well as an icon, with the following code being an example of such a layout: | ||
+ | |||
+ | <code XML>< | ||
+ | | ||
+ | | ||
+ | | ||
+ | |||
+ | The button in the case of the example above will look the following way: | ||
+ | |||
+ | {{: | ||
+ | |||
+ | In here, the overlay element is the '' | ||
Line 369: | Line 505: | ||
* **height** - button height in pixels | * **height** - button height in pixels | ||
* **type** - type definition of the item (should be type=" | * **type** - type definition of the item (should be type=" | ||
+ | * **title** - text element overlay on the button | ||
* **image** - a image (icon) file for the button in the SVG format | * **image** - a image (icon) file for the button in the SVG format | ||
* **action** - action for the button (which procedure will be executed if the button is pressed) | * **action** - action for the button (which procedure will be executed if the button is pressed) | ||
Line 376: | Line 513: | ||
* **both** - there are separate actions (";" | * **both** - there are separate actions (";" | ||
* **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 " | ||
++++ | ++++ | ||
Line 389: | Line 527: | ||
<gitem where=" | <gitem where=" | ||
| | ||
- | | + | |
| | ||
| | ||
Line 418: | Line 556: | ||
* " | * " | ||
* " | * " | ||
+ | |||
+ | Another example of an xbutton realized with a **ref** value for reference to switch (toggle) a variable between two states: | ||
+ | |||
+ | < | ||
+ | | ||
+ | | ||
+ | | ||
+ | | ||
+ | | ||
+ | |||
+ | * **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 | | + | ++++ GLView |
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' | 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' | ||
Line 445: | Line 595: | ||
++++ | ++++ | ||
- | ++++ NCView | | + | ++++ NCView |
{{: | {{: | ||
Line 502: | Line 652: | ||
* **name** and **type** are set to " | * **name** and **type** are set to " | ||
++++ | ++++ | ||
- | ++++ NCList | | + | ++++ NCList |
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 519: | Line 669: | ||
* **type=" | * **type=" | ||
* **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). | ||
+ | ++++ | ||
+ | |||
+ | ++++ Myscope (graphs and plots) | | ||
+ | |||
+ | The '' | ||
+ | |||
+ | {{: | ||
+ | |||
+ | Sample code to add a '' | ||
+ | |||
+ | < | ||
+ | | ||
+ | | ||
+ | | ||
+ | |||
+ | |||
+ | <gitem where=" | ||
+ | | ||
+ | | ||
+ | |||
+ | * **where** indicated into which screen element the myscope graph will be inserted (in this example, it will be inserted into a border called '' | ||
+ | * **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 '' | ||
+ | * **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. '' | ||
+ | | pwm0 | PWM #0. '' | ||
+ | | 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: | ||
+ | |||
+ | |||
++++ | ++++ | ||
Line 564: | Line 758: | ||
* **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 " | * **type** is set to " | ||
+ | |||
+ | Sample code for the rotation2view element: | ||
+ | |||
+ | <gitem where=" | ||
+ | | ||
+ | | ||
+ | | ||
+ | | ||
+ | |||
+ | * **position** describes the XY location within the **where** element | ||
+ | * **width** and **height** describe the element' | ||
+ | * **table-rotation** sets the orientation of the table. //-90// and //90// are the typical values to rotate the orientation | ||
+ | * **type** is set to // | ||
+ | ++++ | ||
+ | |||
+ | ++++Timeview| | ||
+ | Timeview allows the user to add a clock within their myCNC software, for easy time monitoring (useful when program is in full-screen mode, for example). | ||
+ | |||
+ | Sample XML code: | ||
+ | |||
+ | <code XML> | ||
+ | <gitem where=" | ||
+ | height=" | ||
+ | </ | ||
+ | |||
+ | The following image provides an example of the '' | ||
+ | |||
+ | {{: | ||
+ | |||
+ | //NOTE: The timeview functionality is a remnant of older builds of myCNC software, and does not support font and background colour selection.// | ||
+ | |||
++++ | ++++ | ||
Line 570: | Line 795: | ||
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 " | 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 " | ||
- | ++++ List of actions: | | + | ++++ List of general |
^ Action Name ^ Description ^ | ^ Action Name ^ Description ^ | ||
Line 635: | Line 860: | ||
| 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/ | + | | jog-overspeed-inc \\ jog-overspeed-dec | Increment/ |
- | | jog-overspeed-set: | + | | jog-overspeed-set: |
++++ | ++++ | ||
Line 831: | Line 1056: | ||
| item: | See [[mycnc: | | item: | See [[mycnc: | ||
- | | 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-inc, | ||
Line 855: | Line 1080: | ||
++++ | ++++ | ||
+ | |||
+ | ====Fonts==== | ||
+ | |||
+ | For the default profiles to align the text properly, Google' | ||
==== MyCNC screen configuration examples ==== | ==== MyCNC screen configuration examples ==== | ||
The examples for the screen configuration can be found here: [[mycnc: | The examples for the screen configuration can be found here: [[mycnc: | ||
mycnc/mycnc_screen_configuration.txt · Last modified: 2024/07/16 09:49 by ivan