myCNC Online Documentation

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:

Here, the Mileage/Oil Change title is a Label. The code for this label would be the following:

<gitem where="oil-change" 
 position="0;0" width="490" height="30" labelWidth="490" 
 type="label" labelFgColor="##f-title" 
 labelBgColor="##b-title" labelFontSize="18" labelFontStyle="bold"  >
 <message>Mileage/Oil Change</message>
 <message_ru>Счетчик смены масла</message_ru>
</gitem>

• where describes the tab that this label element will be inserted into (in this example, it's the oil-change tab)
• position specifies the xy pixel position for the label. This position is specified not within the overall screen, but within the where tab (in this example, the position is specified in reference to the oil-change section).
• width and height are specified in pixels. Since the entire text box will be taken up by the label, the labelWidth is equal to the overall width.
• type assigns a category to the element that this code will display on the page. In this case, it is set to “label”
• labelFgColor specifies the foreground colour of the label. The colour can be typed in directly, in the HTML RGB format, or, as in this case, with the two pound signs in front (##f-title). This specifies to the program to retrieve this colour from Screen > Colors, or, if it is not there, it will be added to the list and can be later chosen from the Screen > Colors tab. Changes will take effect on the next reload (not instant). The following window shows an example of such a Screen > Colors list:

• labelFontSize specifies the font size, labelFontType is set to bold in this case. labelFontFamily can also be specified if a particular font is required (an example of using a labelFontFamily is available in the BDisplay section on this page). If it is not specified, the default font will be used.
• 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 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:

The code for this element will look like this:

<gitem where="oil-change" position="10;40" width="250" displayWidth="90" height="60" labelWidth="160" 
 name="display-cnc-gvariable-6090" K="0.001"
 bgColor="##b-display" fgColor="##f-display" 
 labelFgColor="##f-label" labelFontSize="14" labelFontStyle="normal" 
 fontSize="18" fontStyle="bold" format="%6.3f" type="display" >
            <message>X Trip counter</message>
<message_ru>Счетчик пути по Х</message_ru>
</gitem>

• where descibes the section into which the Display element will be inserted.
• position describes the xy position within that tab
• width and height specify the overall dimensions of the Display element, while displayWidth and labelWidth describe the size of the Display and Label parts (Display being the dynamic changing part and Label being the static text part).
• name specifies the variable name for the displayed element (global variable #6090 is brought up on the screen in this case)
• bgColor and fgColor specify the background and foreground colours of the Display element (or any other element, depending on where they are specified) respectively. As with a Label, these colours can either be set directly, through an HTML RGB code, or by writing out the colour name from Screen > Colors prefaced by two pound signs (##). If no specified colour with that name is found in that list, then the new name will be added to the list and the user will be able to edit it (changes will take effect on the next program reload).
• Similarly, labelFGColor specifies the foreground color of the Label (static text) element (this is set separately from the Display element colour).
• 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.

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:

An example of BDisplay code would be the following:

<gitem where="x-coordinates" position="74;10"  
  width="150" height="34"  displayAlignment="right;bottom"
  fgColor="##f-workpos" format="%8.3f" fontFamily="Open Sans" fontSize="21" 
  type="bdisplay" deviation="0.0005" action="direct-run:G90 G92 X %v"
  name="display-work-pos-axis-0" bgColor="##b-display" 
  displayWidth="150" fontStyle="bold"></gitem>

• fgColor and bgColor specify the colours used for the foreground and the background of the BDisplay element respectively.
• displayAlignment allows to position the displayed element in the right bottom corner of the specified area
• format works in the same way as the Display format
• type is specified to be “bdisplay”
• deviation specifies the minimum change in the value to display a new value for the user. This is done in order to prevent excessive value jumping due to small changes.
• 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 Common Item list and Global Variables list can be used for reference in choosing a name for a BDisplay element.

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:

An example of code for such a RadioDisplay element is presented here:

<gitem fgColor="##f-display" labelFgColor="##f-label" where="coord-sys0" 
labelWidth="80" displayWidth="160" format="---;G54;G55;G56;G57;G58;G59;G59.1;G59.2;G59.3" 
height="40" type="radio-display" name="display-gvariable-5220" 
bgColor="##b-display" fontStyle="bold" orientation="horizontal">
 
<message>Current Num</message>
<message_pl>Aktualny numer</message_pl>
<message_ru>Номер</message_ru>
<message_kr>Current Num</message_kr>
<message_vn>Số hiện tại</message_vn>
<message_es>Actual</message_es>
</gitem>

• Colours are selected the same was as described in the Display and Label sections (foreground/background, label colours, etc)
• format lists the list of all possible user-facing text strings. These are numbered 1, 2, 3, etc, separated by a semicolon.
• type is set to “radio-display”
• name is the system variable which will be used to choose the user-facing text string. The system will read, for example, Global Variable #5220, and see what value (for example, 4) is written in it. Then, if 4 is written in 5220, G57 will be displayed to the user.
• orientation can be set to be horizontal or vertical

NOTE: RadioDisplay and Radio2Display allow for some rudimentary actions to be assigned to the action of clicking the RadioDisplay element. These are limited compared to the Button/XButton/etc elements, however they are still extremely useful:

An example of actions being assigned to the RadioDisplay can be seen in the 1366V profile when creating a per-program z-height map to account for uneven material positioning. The RadioDisplay element switches between “Area” and “Rectangle” depending on the mode chosen to create the probe mesh:

If we look at the code, the RadioDisplay element is actually using the cnc-gvariable-toggle to change between the two modes (0 for Rectangle, 1 for Area):

<gitem where="map-z-view" position="150;5"  
 displayWidth="110" width="110" height="70"  displayAlignment="_center"
 fgColor="##f-display" 
 format="Rectangle;Area" fontFamily="Open Sans" fontSize="20" 
 type="radio-display" deviation="0.5" 
 action="cnc-gvariable-toggle-8255"
 name="display-cnc-gvariable-8255" 
 bgColor="##b-display" fontStyle="bold">
</gitem>

• 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.

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:

Example code for this screen element:

<gitem where="x-jog" position="90;100" width="80" height="40" displayWidth="80" 
 fgColor="##f-display" bgColor="transparent"
 alignment="center" fontSize="14" type="radio2-display" 
 format="0.001=0.001;0.01=0.01;0.1=0.1;1.0=1.0;10=10;∞=88.88=2.3" 
 deviation="0.0005" name="display-gvariable-5522" 
 fontStyle="bold" orientation="vertical" ></gitem>

• bgColor (background colour) can be set to be transparent
• type is set to be radio2-display
• format lists all the available options. For example, when the input is equal to 0.1, the system will display 0.1. And when the input is equal to the jog step of 88.88, the system will recognize this command and set the jog to infinity (infinite step). If another number is added to each component, like in the ∞=88.88=2.3 line, that third number specifies the font size for that particular text element. Here, the infinity sign will be 2.3 times larger than the default of the same font, allowing for the infinity sign to be more clearly visible to the end user.
• deviation specifies the minimum value by which the parameter should change by for the change to be visually represented on the screen
• name indicates the global variable that the system is monitoring (global variable #5522 in this case)

Similar to RadioDisplay, Radio2Display allows for a limited number of actions which can be assigned to the action of pressing or clicking the Radio2Display element:

The example in RadioDisplay code can also be used to assign actions to Radio2Display if type=“radio2-display”.

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.

For example, the gantry alignment correction value can be changed from the Diagnostics window of myCNC software using a KDisplay element:

   <gitem fgColor="##f-display" labelFgColor="##f-label" where="gantry-correction" labelHeight="40" 
   labelWidth="200" displayWidth="90" format="%6.3f" height="40" 
   type="kdisplay" name="display-cnc-gvariable-7525" bgColor="##b-display" 
   fontStyle="bold" orientation="horizontal" deviation="0.001" >
   <message>Gantry Alignment Correction (#7525)</message>
   <message_ru>Коррекция для выравнивания портала (#7525)</message_ru>
   <message_vn>cái dá căn chỉnh điều chỉnh(# 7525)</message_vn>
   <message_es>Corrección de alineamiento Gantry (#7525)</message_es>\
   </gitem>

• Colours are set similarly to the other elements (Display, BDisplay, etc), allowing to change the foreground/background and label colour of the displayed element.
• type is set to “kdisplay”
• 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.

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:

Example of KSpinBox code:

 <gitem fgColor="##f-display" labelFgColor="##f-label" 
  where="pwms" format="%d" labelWidth="80" displayWidth="80" alignment="left" 
  action="hw-pwm-dec;hw-pwm-inc" height="40" address="pwm-outputs" number="0" 
  type="kspinbox" bgColor="##b-display" fontStyle="bold">
  <message>PWM 1</message>
  <message_pl>PWM 1</message_pl>
  <message_cn>PWM的1</message_cn>
  <message_ru>ШИМ1</message_ru>
  <message_kr>PWM 1</message_kr>
  <message_es>PWM 1</message_es>
  </gitem>

• colours are done in a similar manner to Labels, Display, BDisplay elements and others (foreground/background colours, label colours, etc).
• where specifies the location of the displayed element (the PWM section of the screen)
• alignment specifies the positioning of the displayed element
• action specifies the two action that are taken when the user presses on the left and on the right arrow respectively. Here, “hw-pwm-dec” and “hw-pwm-inc” are used to increase and decrease PWM outputs values. The full list of available actions is available on the page below, in the Actions section.
• address specifies the address of the value/item the user is changing (pwm-outputs in this case)
• 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”

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:

Example KSpinBox2 code:

  <gitem fgColor="##f-display" position="880;560" height="60" width="320" 
  where="main" suffix="%" format="%d" K="1." 
  action="jog-overspeed-dec;jog-overspeed-inc" type="kspinbox2" 
  name="display-jog-overspeed" bgColor="black" fontStyle="bold" 
  labelFontSize="14" displayWidth="100" labelWidth="100" orientation="horizontal">
     <message>Jog over speed</message>
     <message_pl>Przekroczenie prędkości przesuwu</message_pl>
     <message_ru>Ручное/Скорость</message_ru>
     <message_vn>Chạy bộ trên tốc độ</message_vn>
     <message_es>Jog over speed</message_es>
  </gitem>

• fgColor specifies the foreground colour, bgColor specifies the background colour of the on-screen element
• position specifies where in the window the element will be inserted, height and width specify the size of the element
• where designates the window tab into which the element is inserted (in this case, main). The position which was previously specified is noted in relation to this window tab, not the entire myCNC window.
• format describes how the value will be presented to the user. %d stands for integer while %f stands for float. K specifies the coefficient by which the value will be multiplied by before displaying it to the user. Here, the coefficient is set to 1 to display the actual value.
• action lists the two actions which take place when the left arrow and the right arrow buttons are pressed respectively. Here, jog-overspeed-dec is assigned to the left arrow button, and jog-overspeed-inc is assigned to the right button.
• type is set to kspinbox2
• name points to the value that will be displayed. This can be a global variable, as seen in the KDisplay and Radio2Display examples above, or it can be an item, as described in the Common Item List. In this example, the value displayed will be the jog-overspeed item.
• fontStyle is set to bold, labelFontSize is set separately, as is displayWidth and labelWidth
• 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

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:

Below is an example of LED display code for an LED element which will display the state of Input #0 (on or off):

<gitem inversion="no" 
  labelFgColor="##f-label" labelAlignment="right;vcenter" 
  where="inputs-0" height="20" address="inputs" 
  shape="round" number="0" type="led">
    <message>IN00</message>
    <message_es>IN00</message_es>
</gitem>

• inversion indicates whether the LED behaviour will be “inverted” - if ON is set to be registered as OFF for visual purposes, and vice versa.
• where specifies the section of the window where the LED element will be located (inputs-0 in this case)
• address specifies the physical controller hardware that the element will receive its information from (“inputs” in this example)
• shape can be set to be round, or left at square by default (if no shape has been specified). An example of a square LED can be seen at the bottom right of the Diagnostics page, to display whether recent changes have been saved to flash memory:

• 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”

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.

Example code:

<gitem where="adc" format="%d" displayWidth="200"
 displayHeight="30"
 name="display-cnc-gvariable-7199"
 imagesfolder="progress/" loop="no" images="vprogress*"
 type="svgdisplay"  min="0" max="4096" K="1" />

• where describes the section in which the element will be inserted
• position describes the location of the element within that section
• imagesfolder specifies the folder from which the displayed images will be taken
• loop allows to loop the value count. For example, if the range is specified from 0 to 100, and the loop is set to =“yes”, then the 101 value will cause the loop to cycle through again, and the system will display it at its lowest point (looping every 100 units).
• images specifies the particular images which will be retrieved from the folder. In this case, any images that start with “volume” are used and are cycled in order.
• type is set to “svgdisplay”
• 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).

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:

Example code:

<gitem  where="oil-change-frame" name="oil-change" bgColor="##b-widget"  type="myitems"
 position="10;10" width="490" height="230" />
 
<include>oil-change.xml</include>

• note that the window (oil-change) is itself inside another widget (oil-change-frame), specified in the where line. Myitem widgets can be inserted into other Myitem widgets, allowing the user to create windows within windows.
• name will specify the name of the myitems widget which can later be used to insert buttons and other display elements into it through the where line for each of these particular elements (therefore things like KDisplay, BDisplay, etc can be inserted into this new window).
• type is set as “myitems”
• position is set in pixels within the window/widget that this new myitems element will be. In this case, it will be 10 pixels lower and 10 pixels to the right from the frame (which is its own separate element in this case). This allows for easy alignment.
• 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 while the myitems screen element from the example above is its own element, it is also embedded into a separate on-screen element called the border. This border is a frame around an element (typically with rounded corners) and it allows for an easy visual separation between different on-screen elements.

As mentioned, an example of a border can be seen around the oil change section in the user settings tab of the X1366M/M4 profiles:

Sample border code is available here:

  <gitem  where="user-widget" name="oil-change-frame"
  bgColor="##b-main" type="frame" border-color="##b-border" 
  border-width="2" border-radius="10"
  position="450;420" width="510" height="250"
  basewidth="510" baseheight="250"/>

• where specifies that the frame will be inserted into the user-widget (the User Settings window is itself a widget on the main screen).
• bgColor and border-color specify the background and border colours respectively
• border-width and border-radius specify the border measurements
• 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.

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 skin parameter.

Example code:

<gitem  where="gantry-border" name="gantry-widget" bgColor="##b-widget"  type="myitems"
skin="gantry/gantry"
position="10;10" width="600" height="400" />

• 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

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:

The code for such a button will look as follows:

 <gitem where="main" 
 position="160;0" width="80" height="80" 
 image="button-refresh" action="file-refresh" type="button" />

A text element can serve as a button as well as an icon, with the following code being an example of such a layout:

<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" />

The button in the case of the example above will look the following way:

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.

Attributes description

• where - parent widget name that the button is placed into (in this example, it is placed in the main window)
• position - X and Y position of the button inside a parent widget (inside “main” in this case)
• width - button width in pixels
• 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)
• event - event type the button is sensitive to. Event can be:
  • pressed - action is executed if the button is pressed
  • released - action is executed if the button is released
  • both - there are separate actions (“;” semicolon separated) for pressed and released events
• skinbase - besides the Image file for each button there is a common skin SVG file for all the buttons. For selected buttons skin file can be redefined with skinbase attribute which specifies the border/mask which the button will be used with. This SVG file will be used as a bottom layer for the button image.
  • A skinbase set equal to “transparent” will remove the border around a button or an on-screen element.

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.

An XButton XML sample code is shown below:

<gitem where="x-mill" 
 xattr="3;3;16;16;led;red;round" 
 address="outputs" number="#OUTPUT_SPINDLE"
 position="720;10" width="70" height="70" 
 image="M/button-m03" action="plc-run:M03/#5524" 
 type="xbutton" />

Attributes description

• where - parent widget name the button placed to (in this case, the x-mill widget)
• position - X and Y position of the button inside a parent widget
• width - button width in pixels
• height - button height in pixels
• type - type definition of the item (should be type=“xbutton”)
• image - a image (icon) file in SVG format for the button
• action - action for the button (which procedure will be executed if event triggered)
• event - event type the button is sensitive to. Event can be
  • pressed - action is executed if the button has been pressed
  • released - action is executed if the button released
  • 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. This SVG file will be used as a bottom layer for the button image.
• xattr - defines light position size and attributes - semicolon separated
  • X,Y position of the led/light inside the button
  • width and height of the led
  • type of light (actually this field is always “led”, reserved for future options)
  • shape of the standard LED light. A standard shape can be “round” and “rect”
• address - defines CNC controller hardware the light attached to
  • “inputs” - the light is “attached” to an input pin
  • “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

    #define OUTPUT_SPINDLE 7

Another example of an xbutton realized with a ref value for reference to switch (toggle) a variable between two states:

<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"/>

• 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 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).

Sample GLView code is shown below:

 <gitem where="xp" name="glview" type="glview" position="80;80" width="910" height="395" 
 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>

• type is set to glview
• name is also set to glview in order to allow other widgets to reference this window
• position, width and height specify the location and dimensions of the visualization window (in pixels)
• singlepath can be set to yes or no. This is only useful on the NCView window (2D visualization program described below)
• 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

NCView is the 2D visualization widget to display an image of the imported G-code file such as the main visualization window in the 1366P profile (as a 3D visualization is unnecessary for a plasma/gas profile which will be doing all the cutting in the XY plane only).

Below is the code used to display an NCView window in the 1366P plasma profile.

<gitem where="xp" name="ncview" type="ncview" position="5;85" width="1010" height="390" 
 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>

• type is set to “ncview”
• position, width and height specify the location and dimensions of the visualization window (in pixels)
• singlepath can be set to yes or no. Typically, it is set to be off, so as to display kerf compensation (if there is any kerf compensation present). If set to on, kerf compensation will not be visible (similar to the window shown during file import when a 2D G-code file is being imported into myCNC).

• 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)

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.

Example code code to insert the log window as it is displayed in the 1366M4 profile is the following:

<gitem where="x-log" position="10;10" 
 width="930" height="160"  name="logview" type="logview"></gitem>

• position describes the location of the logview element withing the x-log widget
• position, width and height specify the parameters of the window within the x-log widget.
• name and type are set to “logview”

This will insert the Logview element into the x-log MyItems widget.

Below the logview window, a status bar can be seen:

This is inserted into the x-log widget separately from logview, through the following code:

<gitem where="x-log" position="10;140" width="930" height="30" fontSize="16"
 fontStyle="normal" name="statusbar" type="statusbar" />

• 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”

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:

Example code to insert the NCList window:

<gitem where="xp" name="x-nclist" position="330;581" 
 width="950" height="180" basewidth="950" baseheight="180" 
 type="frame" border-color="##b-border" border-width="2" border-radius="10" 
 bgColor="##b-main" hide-list="x-log;x-mill" exclusive="yes" />

• 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).

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:

Sample code to add a myscope element to the myCNC screen:

 <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" />

• 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)

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:

The code to insert such a window into the 1366M4 profile, the following code is used:

  <gitem where="x-reserv" 
  position="8;5" width="80" height="80" image="probing/centring-unit" 
  action="mywidget-toggle:x-centring" type="button"/>

Note that this will bring up the x-centring.xml file which describes what is actually inside the CentringView widget. This code merely indicates that the Probe Sensor Window button is to be placed on the main screen, pressing which will, in turn, bring up the CentringView widget screen.

• where is set to “x-reserv”
• image is used for the button to indicate what the button action will be to the user
• 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”

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:

The following window is brought up when clicking the button (window functions described here):

This will bring up the x-rotate.xml file which further describes internals of the window. In order to simply add a button so that the overall window can be brought up, the following code can be used:

  <gitem where="x-nclist" position="10;60" height="55" width="60" 
  image="tabs/rotate-r" action="mywidget-toggle:x-rotate" type="button"></gitem>

• where points to the x-nclist widget (describe above) which inserts this button into it
• position, height and width describe the button parameters within the x-nclist widget
• 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 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:

<gitem where="xp" position="880;0" width="120" 
height="80" type="timeview" fontStyle="bold"></gitem>

The following image provides an example of the timeview displayed in one of the myCNC profiles:

NOTE: The timeview functionality is a remnant of older builds of myCNC software, and does not support font and background colour selection.

<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>

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.

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 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:

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”):

<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" />

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.

<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" />

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.

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 often presented to the user on the myCNC software screen to display relevant information which can then be edited (such as the jog overspeed, spindle speed, etc). The relevant actions for such items would be along the lines of motion-overspeed-inc or motion-overspeed-dec, describing a particular action to perform with this item (value).

Items are typically used in conjunction with some input, as outlined in the Connections configuration dialog which can be found here.

A list of commonly used items can be found in the Item List.

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.

<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>

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.

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 */ }