mycnc:mycnc_screen_configuration
Differences
This shows you the differences between two versions of the page.
Both sides previous revisionPrevious revisionNext revision | Previous revision | ||
mycnc:mycnc_screen_configuration [2020/03/10 09:10] – ivan | mycnc:mycnc_screen_configuration [2023/07/25 11:26] (current) – ivan | ||
---|---|---|---|
Line 1: | Line 1: | ||
===== Screen Editing and Configuration ====== | ===== Screen Editing and Configuration ====== | ||
+ | |||
+ | //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 for the step-by-step screen configuration of myCNC software are available [[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 for the step-by-step screen configuration of myCNC software are available [[mycnc: | ||
+ | |||
+ | Video tutorial for screen editing: | ||
+ | |||
+ | {{youtube> | ||
==== Getting Started with editing the myCNC screen==== | ==== Getting Started with editing the myCNC screen==== | ||
Line 24: | Line 30: | ||
These files are named according to the different elements they put up on the 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 ==== | ||
Line 52: | Line 62: | ||
| **CentringView** | Centering widget (built-in) | | | **CentringView** | Centering widget (built-in) | | ||
| **Rotation2View** | Full program rotation widget (built-in) | | | **Rotation2View** | Full program rotation widget (built-in) | | ||
+ | | **timeview** | Time (clock) display | | ||
+ | | **time-display** | View a global variable (such as #6120) in a 00:00:00 format | | ||
+ | | **splitview** | An element with two horizontal sections where each section will automatically fill all available space when the other is closed | | ||
The following table outlines the parameters that define the on-screen elements within myCNC: | The following table outlines the parameters that define the on-screen elements within myCNC: | ||
Line 79: | Line 92: | ||
| **action** | action=" | | **action** | action=" | ||
| **orientation** | orientation=" | | **orientation** | orientation=" | ||
+ | | **train-list** | train-list=" | ||
+ | | **cnc-password-widget** | action=" | ||
+ | |||
++++Label| | ++++Label| | ||
Line 309: | Line 325: | ||
++++ 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 473: | Line 489: | ||
| | ||
</ | </ | ||
+ | |||
+ | 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 481: | Line 510: | ||
* **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 531: | Line 561: | ||
* " | * " | ||
* " | * " | ||
+ | |||
+ | 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 | ||
+ | |||
+ | Similarly, a '' | ||
+ | |||
+ | |||
++++ | ++++ | ||
Line 734: | Line 780: | ||
* **table-rotation** sets the orientation of the table. //-90// and //90// are the typical values to rotate the orientation | * **table-rotation** sets the orientation of the table. //-90// and //90// are the typical values to rotate the orientation | ||
* **type** is set to // | * **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.// | ||
+ | |||
+ | ++++ | ||
+ | |||
+ | ++++time-display| | ||
+ | |||
+ | {{: | ||
+ | |||
+ | <code XML>< | ||
+ | | ||
+ | | ||
+ | | ||
+ | | ||
+ | | ||
+ | </ | ||
+ | |||
+ | <gitem where=" | ||
+ | | ||
+ | | ||
+ | | ||
+ | | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | The time-display UI element allows the system to display a global variable (in case of this example, #6120 and #6130 for the working time of ATC Pots #1 and #2) in a 00:00:00 format. | ||
+ | ++++ | ||
+ | |||
+ | |||
+ | ++++ Password widget| | ||
+ | |||
+ | A password widget allows the user to create a hidden locked GUI element that is displayed after entering the correct password. This is similar to the [[mycnc: | ||
+ | |||
+ | When the element is clicked/ | ||
+ | |||
+ | {{: | ||
+ | |||
+ | A code example of such an element is displayed below. Note how there are two elements - the bdisplay element (for password entry) with a // | ||
+ | |||
+ | < | ||
+ | | ||
+ | | ||
+ | | ||
+ | |||
+ | <gitem where=" | ||
+ | | ||
+ | | ||
+ | | ||
+ | |||
+ | In the example above, the password is set to be **123**, and both the UI elements are located in the same " | ||
+ | |||
+ | ++++ | ||
+ | |||
+ | ++++ splitview | | ||
+ | |||
+ | <code XML>< | ||
+ | position=" | ||
+ | |||
+ | < | ||
+ | | ||
+ | ColorT0=" | ||
+ | ColorT4="# | ||
+ | HColorT0=" | ||
+ | | ||
+ | HColorT4="# | ||
+ | |||
+ | <gitem where=" | ||
+ | | ||
+ | | ||
+ | |||
+ | The '' | ||
+ | |||
+ | The main feature of this GUI element is that if one of the windows is hidden, the second one will automatically occupy the entire area. | ||
+ | |||
++++ | ++++ | ||
Line 754: | Line 889: | ||
| toggle-item: | | toggle-item: | ||
| 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. | | ||
+ | | generate-pierce-array | EXPERIMENTAL FEATURE. This action goes through the control program and removes the cutting sections, leaving only the pierce points and idle movements between those points. Commisioned for a client' | ||
+ | | system-process | This is a command to the OS (rather than an internal myCNC command). | ||
+ | |||
++++ | ++++ | ||
Line 788: | Line 926: | ||
| player-back-to-path-confirm | Goes back to path, requires confirmation before the machine goes back to path | | | player-back-to-path-confirm | Goes back to path, requires confirmation before the machine goes back to path | | ||
| player-play-back | Runs the program backwards | | | player-play-back | Runs the program backwards | | ||
+ | | player-simulate-forward | Simulate the program running forward in a simulation/ | ||
+ | | player-simulate-backward | Simulate the program running backward in a simulation/ | ||
| player-nc-tie | Allows to tie a certain position to the reference zero program coordinate position. This allows to move the entire program around the cutting sheet. Useful when, for example, a single part needs to be cut out from a program made up from many different parts at a different location on the working material from that used originally (for example, if the first run was faulty). This calculates the difference of the current selected point and the zero program coordinate, and then interpolates the same difference between the new selected point and the new zero program coordinate, moving the whole program over. | | | player-nc-tie | Allows to tie a certain position to the reference zero program coordinate position. This allows to move the entire program around the cutting sheet. Useful when, for example, a single part needs to be cut out from a program made up from many different parts at a different location on the working material from that used originally (for example, if the first run was faulty). This calculates the difference of the current selected point and the zero program coordinate, and then interpolates the same difference between the new selected point and the new zero program coordinate, moving the whole program over. | | ||
| player-play-step | Run through a single line of code (next line) | | | player-play-step | Run through a single line of code (next line) | | ||
Line 805: | Line 945: | ||
| 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 906: | Line 1046: | ||
| close-application | Close myCNC control software | | | close-application | Close myCNC control software | | ||
| cnc-config-save | Save myCNC configuration files to disk | | | cnc-config-save | Save myCNC configuration files to disk | | ||
+ | | system-process | Launch a system process / program by clicking a button within myCNC | | ||
++++ | ++++ | ||
Line 955: | Line 1096: | ||
| cnc-gvariable-switch | Newer syntax for a global variable switch between values from a data set. Data points will be written separated by a comma, and the next value in the list will be taken on every switch command | | | cnc-gvariable-switch | Newer syntax for a global variable switch between values from a data set. Data points will be written separated by a comma, and the next value in the list will be taken on every switch command | | ||
| 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-set | Set a variable (write a " | ||
+ | | cnc-gvariable-vset | Value set (write some value to a variable) | | ||
| cnc-gvariable-clear | Clears the value of a global variable | | | cnc-gvariable-clear | Clears the value of a global variable | | ||
+ | | cnc-gvariable-clr | Clears the value of a global variable | | ||
++++ | ++++ | ||
Line 992: | Line 1136: | ||
| < | | < | ||
| < | | < | ||
- | | <del>cnc-gvariable-dec, | + | | cnc-gvariable-dec, |
- | | <del>cnc-variable-dec, | + | | < |
| < | | < | ||
| < | | < | ||
Line 1025: | Line 1169: | ||
++++ | ++++ | ||
+ | |||
+ | === Actions Examples === | ||
+ | |||
+ | ++++ system-process | | ||
+ | |||
+ | <code XML>< | ||
+ | | ||
+ | | ||
+ | < | ||
+ | </ | ||
+ | |||
+ | The '' | ||
+ | |||
+ | The example above sends a '' | ||
+ | |||
+ | |||
+ | <code XML> action=" | ||
+ | |||
+ | For the program launch (system-process) command listed above, '' | ||
+ | |||
+ | For the example above, make sure to enable the " | ||
+ | |||
+ | ++++ | ||
+ | |||
+ | ====Style==== | ||
+ | |||
+ | The stylesheet specifies the fundamentals of the myCNC Graphical User Interface, and can be changed in //Settings > Config > Screen//: | ||
+ | |||
+ | {{: | ||
+ | |||
+ | The " | ||
+ | |||
+ | // | ||
+ | |||
+ | An example of the x.style file is shown below: | ||
+ | |||
+ | ++++ Expand code | | ||
+ | < | ||
+ | { | ||
+ | border: 4px solid ## | ||
+ | border-radius: | ||
+ | // | ||
+ | padding: 0px 0px 0px 0px; | ||
+ | } | ||
+ | |||
+ | |||
+ | QHeaderView, | ||
+ | { | ||
+ | border: 1px solid ## | ||
+ | border-radius: | ||
+ | border-style: | ||
+ | padding: 0px 0px 0px 0px; | ||
+ | |||
+ | font: bold 14px; | ||
+ | font-family: | ||
+ | |||
+ | } | ||
+ | |||
+ | QComboBox { | ||
+ | |||
+ | font: bold 14px; | ||
+ | font-family: | ||
+ | height: | ||
+ | selection-background-color: | ||
+ | selection-color: | ||
+ | border: 1px solid ##b-border; | ||
+ | border-radius: | ||
+ | |||
+ | |||
+ | |||
+ | QLineEdit, QSpinBox | ||
+ | { | ||
+ | font-size: bold 16px; | ||
+ | font-family: | ||
+ | height: | ||
+ | selection-background-color: | ||
+ | selection-color: | ||
+ | border: 1px solid ##b-border; | ||
+ | border-radius: | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | StatusBar, SLabel | ||
+ | { | ||
+ | font-size: 14px; | ||
+ | font-family: | ||
+ | background: ## | ||
+ | color: ## | ||
+ | } | ||
+ | |||
+ | S2Label | ||
+ | { | ||
+ | background: ## | ||
+ | color: ## | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | QHeaderView:: | ||
+ | QListView, QTreeView, KSvgToggleSwitch, | ||
+ | K45SideSelection, | ||
+ | QTableView, MyTabWidget, | ||
+ | NWidget, SWidget, QListWidget | ||
+ | { | ||
+ | background: ## | ||
+ | color: ## | ||
+ | } | ||
+ | |||
+ | |||
+ | // | ||
+ | // | ||
+ | |||
+ | KWidget | ||
+ | { | ||
+ | font: bold 14px; | ||
+ | font-family: | ||
+ | |||
+ | background: ## | ||
+ | color: ## | ||
+ | } | ||
+ | |||
+ | MessageLabel | ||
+ | { | ||
+ | font: bold 16px; | ||
+ | font-family: | ||
+ | |||
+ | background: ## | ||
+ | color: ## | ||
+ | } | ||
+ | |||
+ | NCListView | ||
+ | { | ||
+ | background: transparent; | ||
+ | color: blue; | ||
+ | selection-color: | ||
+ | selection0background-color: | ||
+ | } | ||
+ | |||
+ | NCListView:: | ||
+ | { | ||
+ | background: blue; | ||
+ | color: blue; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | QTableView {gridline-color: | ||
+ | |||
+ | QRadioButton | ||
+ | { | ||
+ | height: | ||
+ | color: ## | ||
+ | selection-background-color: | ||
+ | selection-color: | ||
+ | //border: 2px solid ##b-border; border-radius: | ||
+ | } | ||
+ | |||
+ | QRadioButton:: | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | QSpinBox:: | ||
+ | QSpinBox:: | ||
+ | |||
+ | |||
+ | |||
+ | QComboBox QListView:: | ||
+ | QComboBox:: | ||
+ | |||
+ | |||
+ | QTreeView, QComboBox { | ||
+ | alternate-background-color: | ||
+ | } | ||
+ | |||
+ | QListView:: | ||
+ | QTreeView:: | ||
+ | QTreeView:: | ||
+ | { | ||
+ | selection-color: | ||
+ | selection-background-color: | ||
+ | } | ||
+ | |||
+ | |||
+ | QCheckBox {padding: 0px 0px 0px 0px; spacing: 5px; } | ||
+ | QCheckBox:: | ||
+ | QCheckBox:: | ||
+ | QCheckBox:: | ||
+ | |||
+ | QPushButton | ||
+ | {color: ## | ||
+ | border-color: | ||
+ | QPushButton: | ||
+ | QPushButton: | ||
+ | |||
+ | |||
+ | QTabWidget:: | ||
+ | |||
+ | QTabWidget:: | ||
+ | |||
+ | QTabBar:: | ||
+ | color: ## | ||
+ | background: ## | ||
+ | border: 2px solid ##b-border; border-bottom-color: | ||
+ | |||
+ | //MyTabBar { font: bold 14px; } | ||
+ | |||
+ | QTabBar:: | ||
+ | QTabBar:: | ||
+ | | ||
+ | | ||
+ | QTabBar:: | ||
+ | |||
+ | Notice that in the example above, the NCListView (the window that displays the G-code for the loaded control program) has been customized to feature a transparent background. In a similar way, other low-level GUI elements can be edited with custom colours that cannot othewise be accessed via the user-facing settings panel in myCNC Settings > Config > Screen > Colors. | ||
+ | |||
+ | |||
+ | ====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.1583845800.txt.gz · Last modified: 2020/03/10 09:10 by ivan