Differences

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

--- mycnc:mycnc_screen_configuration [2020/02/14 14:00] – ivan
+++ mycnc:mycnc_screen_configuration [2023/07/25 11:26] (current) – ivan
@@ Line 1: / Line 1: @@
 ===== Screen Editing and Configuration ======
+//The default preset GUI for myCNC profiles is described in the following manual: [[mycnc:mycnc_screen|MyCNC Profile Screen Description]]//
 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 for screen editing:
+{{youtube>Nnz82oJOLA4?large}}
 ==== 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 (''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.
+In general, the order the files are loaded into myCNC (including .xml configuration files and your settings) is explained here:
+{{youtube>wtQqAU3KOj4?large}}
 ==== 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/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) |
+| **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:
+^ 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) |
+| **train-list** | train-list="laser-ramp" | A list of widgets/windows that will automatically close (be hidden) when this window is closed |
+| **cnc-password-widget** | action="cnc-password-widget-77/123579/%v" | A locked widget that requires the user to enter a password to open it |
 ++++Label|
@@ Line 256: / Line 325: @@
 ++++ 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 (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:
+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 1 to 125% 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}}
@@ Line 420: / Line 489: @@
  image="button-refresh" action="file-refresh" type="button" />
 </code>
+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><gitem where="ns" title="LOAD" fontFamily="Open Sans" fontSize="18" fontStyle="normal"
+ image-normal="ns3/button-133x40" image-hovered="ns3/button-133x40" action="open" type="button"
+ position="4;340"
+ width="133" height="40" /></code>
+The button in the case of the example above will look the following way:
+{{:mycnc:screen-config-035-text-button.png}}
+In here, the overlay element is the ''title'' line, which will display some text on the user's screen, while the underlying layer is composed of an image (using ''image-normal'' and ''image-hovered''). If so desired, a button with no image layer can be created by simply using the ''title'' element alone.
@@ Line 428: / Line 510: @@
   * **height** - button height in pixels
   * **type** - type definition of the item (should be type="button")
+  * **title** - text element overlay on the button
   * **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)
@@ Line 449: / Line 532: @@
 <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 478: / Line 561: @@
       * "outputs" - the light is "attached" to an output pin
       * "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>
+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
+Similarly, a ''**refx**'' value can be used to switch an LED/xbutton between the OFF and ON states. A code of ''refx="5"'', for instance, will signify that the LED will be ON for values equal to OR HIGHER than 5.
 ++++
@@ Line 668: / Line 767: @@
   * **action** specifies that pressing this button will toggle the x-rotate window visibility
   * **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//
+++++
+++++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="xp" position="880;0" width="120"
+height="80" type="timeview" fontStyle="bold"></gitem>
+</code>
+The following image provides an example of the ''timeview'' displayed in one of the myCNC profiles:
+{{:mycnc:screen-config-027-timeview.png}}
+//NOTE: The timeview functionality is a remnant of older builds of myCNC software, and does not support font and background colour selection.//
+++++
+++++time-display|
+{{:mycnc:screen-config-047-time-display.png}}
+<code XML><gitem where="map-z-frame" position="10;10"
+ displayWidth="100" width="100" height="25" displayAlignment="_center"
+ fgColor="##f-display" fontFamily="Open Sans" fontSize="20"
+ type="time-display" deviation="0.5"
+ name="display-cnc-gvariable-6120"
+ bgColor="##b-display" fontStyle="bold">
+</gitem>
+<gitem where="map-z-frame" position="10;40"..
+ displayWidth="100" width="100" height="30" displayAlignment="_center"
+ fgColor="##f-display" fontFamily="Open Sans" fontSize="20"
+ type="time-display" deviation="0.5"
+ name="display-cnc-gvariable-6130" bgColor="##b-display" fontStyle="bold">
+</gitem>
+</code>
+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:mycnc_setup:settings_lock|Settings Lock]] option in terms of functionality (as it is typically done to prevent access of important sections of the software/profile), however unlike locking the Configuration dialogs, the password widget allows the user to lock a particular widget right on the main profile screen.
+When the element is clicked/pressed, the passcode window appears:
+{{:mycnc:settings-lock-007.png}}
+A code example of such an element is displayed below. Note how there are two elements - the bdisplay element (for password entry) with a //cnc-password-widget-// action, and a second frame element with an ID (in this case, id="77"):
+ <code XML><gitem where="xp" position="100;100"
+ width="190" displayWidth="190" height="22"  displayAlignment="_center" fgColor="##f-label" format="%d"
+ fontFamily="Open Sans" fontSize="14" type="bdisplay" deviation="0.5" fontStyle="bold" bgColor="##b-main"
+ action="cnc-password-widget-77/123579/%v"  />
+<gitem where="xp" position="100;150"
+ width="300" height="50" basewidth="300" baseheight="50"
+ type="frame" border-color="##b-border" border-width="4" border-radius="0"
+ hidden="1" id="77" name="x-menu-hidden" bgColor="red" /></code>
+In the example above, the password is set to be **123**, and both the UI elements are located in the same "container" (xp). However, the password can also be changed, and the elements can be placed in different frames/myitems widgets (the container UI element must not necessarily be the same). Note how the ID is mentioned in both the //cnc-password-widget// bdisplay element and the //frame// UI element - without this, the two cannot be linked as there is no way for the system to recognize what the //cnc-password-widget// is pointing to.
+++++
+++++ splitview |
+<code XML><gitem where="xp" name="split" bgColor="##b-main" type="splitview".
+      position="0;45" width="1155" height="723" basewidth="1155" baseheight="723" />
+      <gitem where="split" split="5" name="ncview" type="ncview"
+ singlepath="no" bgColor="##b-ncview"
+ ColorT0="white:1" ColorT1="#00DD00:1" ColorT2="#0000DD:1" ColorT3="#DDDD00:1"
+ ColorT4="#00DDDD:1" ColorT5="#00DD00:1" ColorT6="#DD5500:1"
+ HColorT0="transparent:0" HColorT1="#DD0000:3" HColorT2="#0000DD:3"
+ HColorT3="#DDDD00:3"
+ HColorT4="#DD00DD:3" HColorT5="#00DD00:3" HColorT6="#DD5500:3" ></gitem>
+ <gitem where="split" split="-1" width="295" basewidth="295" height="723"
+ baseheight="723" name="split-right"
+ bgColor="##b-main" type="myitems" /></code>
+The ''splitview'' element consists of two sections (each assigned a //split// value, for instance ''split="5"''). This ''split'' parameter sets the proportions of each window. If the ''split'' is negative, then the window is assumed to have a fixed width from the width parameter.
+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 688: / Line 889: @@
 | 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. |
+| 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's gas cutting machine |
+| system-process | This is a command to the OS (rather than an internal myCNC command).
 ++++
@@ Line 722: / Line 926: @@
 | 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-simulate-forward | Simulate the program running forward in a simulation/trial mode. Requires a line event="both" to simulate while pressing the on-screen button (letting go of the button is considered an "event".  |
+| player-simulate-backward | Simulate the program running backward in a simulation/trial mode. |
 | 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) |
@@ Line 739: / Line 945: @@
 | jog-0-minus-1-plus | 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%. Safe range between 5% and 150%. |
+| jog-overspeed-inc \\ jog-overspeed-dec | Increment/Decrement Jog Overspeed value (%) - the default jog speed is set to be 100%. Safe range between 1% and 125%. |
-| 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 |
+| jog-overspeed-set:  | Set given Jog Overspeed value (%). Safe range between 1% and 125%. The bounds for overspeed can be set in Settings > Config > Motion |
 ++++
@@ Line 840: / Line 1046: @@
 | close-application | Close myCNC control software |
 | cnc-config-save | Save myCNC configuration files to disk |
+| system-process | Launch a system process / program by clicking a button within myCNC |
 ++++
@@ Line 889: / 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-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 "1" to it) |
+| cnc-gvariable-vset | Value set (write some value to a variable) |
 | cnc-gvariable-clear | Clears the value of a global variable |
+| cnc-gvariable-clr | Clears the value of a global variable |
 ++++
@@ Line 926: / Line 1136: @@
 | <del>direct-set-cnc-var</del> | Obsolete |
 | <del>cnc-variable:</del> | Obsolete |
-| <del>cnc-gvariable-dec, cnc-gvariable-inc</del>  | Obsolete |
+| cnc-gvariable-dec, cnc-gvariable-inc  | Increase/decrease a variable by "step" amount (listed in cnc-variables.xml, equal to 1 by default) |
-| <del>cnc-variable-dec, cnc-variable-inc, \\ cnc-variable-change, cnc-variable-toggle, cnc-variable-set, cnc-variable-clear, \\ cnc-variable-vset, cnc-variable-switch</del>  | Obsolete |
+| <del>cnc-variable-change, cnc-variable-toggle, cnc-variable-set, cnc-variable-clear, \\ cnc-variable-vset, cnc-variable-switch</del>  | Obsolete, see ''cnc-gvariable-...'' instead |
 | <del>cnc-vm-variable-dec, cnc-vm-variable-inc</del> | Obsolete |
 | <del>device-variable-dec, device-variable-inc</del> | Obsolete |
@@ Line 959: / Line 1169: @@
 ++++
+=== Actions Examples ===
+++++ system-process |
+<code XML><gitem where="x-menu" position="310;210" width="80" height="80" image="button-all"
+ tooltip="Shut down the computer"
+ action="system-process" lcmdline="hostname -I" stdout-addr="1000" type="button" >
+   <confirm-message>Hostname -I (all addresses for the host)</confirm-message>
+</gitem></code>
+The ''system-process'' action allows to send a command to the OS (in the ''lcmdline'' line). The "response" of the operating system is then recorded into a string variable (svariable) - in this case, svariable #1000, through the use of the ''stdout-addr'' line.
+The example above sends a ''hostname -I'' command, which returns all IP addresses for the host PC.
+<code XML> action="system-process" wcmdline="notepad #filename# </code>
+For the program launch (system-process) command listed above, ''notepad'' is the editor program name. #filename# will be replaced automatically by the system which will use the current G-code file name that is loaded in myCNC. This allows the user to launch an editor from within the myCNC software to edit a G-code file.
+For the example above, make sure to enable the "Automatical reload g-code file" option in //Settings -> G-code settings// in order for the system to automatically reload the changed file in myCNC after it has been saved within the external editor.
+++++
+====Style====
+The stylesheet specifies the fundamentals of the myCNC Graphical User Interface, and can be changed in //Settings > Config > Screen//:
+{{:mycnc:config-011-screen.png}}
+The "x" is the default on all modern myCNC profiles, with the with the x.style customization file located in the profile folder ([[mycnc:mycnc_profiles|MyCNC profiles]]). Editing this file allows for deeper customization of certain on-screen elements that are typically left to their default configuration (such as radio buttons, spinboxes, and other low-level GUI elements).
+//**IMPORTANT NOTE:** The stylesheet should only be changed when strictly necessary as it allows to edit the entire myCNC layout throughout the application.//
+An example of the x.style file is shown below:
+++++ Expand code |
+<code>KFrameWidget
+{
+border: 4px solid ##b-border;
+border-radius: 10px;
+//border-style: outset;
+padding: 0px 0px 0px 0px;
+}
+QHeaderView, QListView, QTreeView, QSpinBox, QTextEdit, QLineEdit
+{
+border: 1px solid ##b-border;
+border-radius: 1px;
+border-style: outset;
+padding: 0px 0px 0px 0px;
+font: bold 14px;
+font-family: "Open Sans";
+}
+QComboBox {
+font: bold 14px;
+font-family: "Open Sans";
+height:24px;
+selection-background-color: rgb(180,180,0);
+selection-color: ##f-widget;
+border: 1px solid ##b-border;
+border-radius: 1px; }
+QLineEdit, QSpinBox
+{
+font-size: bold 16px;
+font-family: "Open Sans";
+height:24px;
+selection-background-color: rgb(180,180,0);
+selection-color: ##f-widget;
+border: 1px solid ##b-border;
+border-radius: 1px;
+}
+StatusBar, SLabel
+{
+font-size: 14px;
+font-family: "Open Sans";
+background: ##b-main;
+color: ##f-widget;
+}
+S2Label
+{
+background: ##b-main;
+color: ##f-widget;
+}
+QHeaderView::section, QScrollBar, QScrollArea, MyTabBar, QHeaderView,
+QListView, QTreeView, KSvgToggleSwitch, QTextEdit, QLineEdit, QSpinBox, QComboBox,
+K45SideSelection, DirViewDialog, DXFImportDialog, HPGLPensWidget, KDxfTech,
+QTableView, MyTabWidget,QTabWidget,
+NWidget, SWidget, QListWidget
+{
+background: ##b-main;
+color: ##f-widget;
+}
+//font-size: 18px;
+//font-family: "Open Sans";
+KWidget
+{
+font: bold 14px;
+font-family: "Open Sans";
+background: ##b-main;
+color: ##f-widget;
+}
+MessageLabel
+{
+font: bold 16px;
+font-family: "Open Sans";
+background: ##b-main;
+color: ##f-widget;
+}
+NCListView
+{
+background: transparent;
+color: blue;
+selection-color:blue;
+selection0background-color: white;
+}
+NCListView::item::selected
+{
+background: blue;
+color: blue;
+}
+QTableView {gridline-color: rgb(255,255,0); }
+QRadioButton
+{
+height:24px; width:24px;
+color: ##f-widget;
+selection-background-color: rgb(180,180,180);
+selection-color: ##f-widget;
+//border: 2px solid ##b-border; border-radius: 12px;
+}
+QRadioButton::indicator { width: 24px; height: 24px;  }
+QSpinBox::up-button {width:24px;height:12px; }
+QSpinBox::down-button {width:24px;height:12px; }
+QComboBox QListView::item:checked { background-color: green; selection-background-color: rgb(180,180,180); }
+QComboBox::item:selected { color:white; background-color: green; selection-background-color: rgb(130,130,0); }
+QTreeView, QComboBox {
+    alternate-background-color: ##grid-color;
+}
+QListView::item:selected,
+QTreeView::item:selected ,
+QTreeView::branch:selected
+{
+  selection-color:white;
+  selection-background-color: rgb(150,150,0);
+}
+QCheckBox {padding: 0px 0px 0px 0px; spacing: 5px; }
+QCheckBox::indicator { width: 18px;height: 18px; }
+QCheckBox::indicator:checked {image:url(:/art/buttons-no-theme/xp/button-check.svg); }
+QCheckBox::indicator:unchecked {image:url(:/art/buttons-no-theme/xp/button-uncheck.svg); }
+QPushButton
+{color: ##button-color; font: bold 14px;
+border-color: ##button-border; border-style:solid; border-width:3px; border-radius: 5px; padding: 0px 0px 0px 0px;}//border-style: outset; }
+QPushButton:pressed {background-color: ##button-pressed-bg; color:##button-pressed-fg; border-style: inset; }
+QPushButton:hover {background-color: ##button-hover-bg; border-style: inset; }
+QTabWidget::pane { color: ##f-widget; background: ##b-main; border-top: 2px solid; border-top-color:rgb(140,140,140); }
+QTabWidget::tab-bar { color: ##f-widget; background: ##b-main;left: 5px; }
+QTabBar::tab  { font: 12px;
+color: ##button-fg;
+background: ##b-main;
+border: 2px solid ##b-border; border-bottom-color: ##b-border; border-top-left-radius: 6px; border-top-right-radius: 6px;min-width: 8ex;padding: 2px; }
+//MyTabBar { font: bold 14px; }
+QTabBar::tab:selected, QTabBar::tab:hover { background: ##button-hover-bg; }
+QTabBar::tab:selected {
+ border-color: ##selected-border;
+ border-bottom-color: ##selected-border; /* same as pane color */ }
+QTabBar::tab:!selected { margin-top: 3px; /* make non-selected tabs look smaller */ }</code>++++
+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's Open Sans is recommended to be installed on your workstation. This font comes pre-installed on our Ubuntu MATE builds, but may need to be installed separately on Windows machines.
 ==== MyCNC screen configuration examples ====
 The examples for the screen configuration can be found here: [[mycnc:mycnc_screen_configuration:screen_configuration_examples|Screen configuration examples]]