myCNC Online Documentation

A PushButton screen item can be used on myCNC screen. A typical button definition is shown below

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

Attributes description

• where - parent widget name the button placed to
• position - X and Y position of the button inside a parent widget
• width - button width in pixels
• height - button height in pixels
• type - type definitionof the item (should be type=“button”)
• 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 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.

XButton is a Push Button with built in Light indicator. Light is mostly used to show a current state of CNC controller input, output pin, CNC global variable register value etc.

A XButton XML definition example 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
• position - X and Y position of the button inside a parent widget
• width - button width in pixels
• height - button height in pixels
• type - type definitionof the item (should be type=“button”)
• 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 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 positionm 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 attached to input pin
  • “outputs” - the light attached to output pin
  • “number” - defines pin number the light 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

2D Visualization widget.

• Basic setup.

<gitem where="olicut" name="ncview" type="ncview"
  position="100;100" width="880" height="440" />

• Advanced setup.

<gitem where="olicut" name="ncview" type="ncview"
  position="100;100" width="880" height="440" 
  singlepath="yes"
  bgColor="#00E0E0" 
  ColorT0="gray:1" 
  ColorT1="#D000D0:5" 
  ColorT2="#D05000:5" 
  ColorT3="red:2" 
  ColorT4="green:2" 
  ColorT5="#0000D0:2" />

All button-like screen components (button, xbutton, bdisplay, kspinbox2) runs Handler procedure when “Pressed” or “Released” avent activated by mouse click or touch screen tap. The Handler defined in “action” attribute of xXML configuration item.

List of actions is shown below

Add Rotation Dialog on Main Screen

We need to add buttons for Servo On/Servo Off to 1280M5 profile

Original screen is shown below-

Put our new buttons instead of CV button

1. Find cnc-screen.xml configuration file in 1280M5 profile folder

2. Edit the file (in Midnight commander press F4 on the cnc-screen.xml file)

3. Find in the file section with CV button definition (F7, search “CV”)

Here it is-

<gitem where="magic" position="960;0" width="80" height="80"  
image="CV/CV" action="cnc-gvariable-toggle-5710" 
xattr="60;4;16;16;led;red;round" name="display-gvariable-5710" 
type="xbutton" />

4. Put under this button small popup window which will be a container for two buttons - Servo ON & Servo Off. Add quick-popup-layout section with popup window definition -

<quick-popup-layout>
  <current>popup-servo</current>
  <layout stretch="0" name="popup-servo" wa="80;160;right" orientation="vertical" skin="skin/metal-01">
    <widget stretch="1" spacing="0" name="toolbar-servo" orientation="vertical">myitems</widget>
  </layout>
</quick-popup-layout>        

• Layout for Servo buttons named “popup-servo”, size of layout is 80×160, layout placed to the right side of the button that activates the popup (wa means “Window Attributes”).
• Layout contains a Window named “toolbar-servo”.

5. Fix CV button to show/hide popup-servo -

image=“CV/CV” action=“cnc-gvariable-toggle-5710” image=“motor/servo-driver-wide” action=“mypopup-toggle:popup-servo”

<gitem where="magic" position="960;0" width="80" height="80"  
image="motor/servo-driver-wide" action="mypopup-toggle:popup-servo"
xattr="60;4;16;16;led;red;round" name="display-gvariable-5710" 
type="xbutton" />

6. Save cnc-screen.xml, restart the software and press new button wit Servo driver. Small popup grey colour window will be shown on the right side of the button.

7. Add two buttons definition in the popup window

<gitem where="toolbar-servo" image="motor/motor-start" action="plc-run:M62/3" 
height="80" event="pressed-delay-1000" type="button"/>
<gitem where="toolbar-servo" image="motor/motor-stop" action="plc-run:M63/3" 
height="80" type="button"/>

to prevent accidental servo driver activation add 1 sec delay for start button -

event="pressed-delay-1000"

action function will be started only if the button press and hold for 1 sec (1000 msec). On button will ON relay #3 (M62.plc procedure) Off button will Off relay #3 (M63.plc procedure)

For more complicated configurations special PLC procedure can be written to handle Servo ON/OFF (for example turn On servo power, wait some time and then check servo Fault/Alarm inputs before turn On Servo On)

Result should be like this -

Difference between button and xbutton push-button types easy to see if compare “Servo” button that shows/hide popup window and “Servo-On”/“Servo-Off” buttons. Main “Servo” button contains LED display. XButton is simple Push button with added LED display on the top. Led parameters are given in attribute xattr.

xattr="60;4;16;16;led;red;round" name="display-gvariable-5710" 
type="xbutton" />

In xattr programmed start x, y positions of Led inside the button, width and height of Led, defines led type, led colour (red, green, blue, yellow) and led shape (round, square).

Custome defines skin from SVG file is possible too and will be described in other examples.

Attribute name=“display-gvariable-5710” setup LED display to show current state of CNC Global variable #5710 (0 - Led is OFF, 1 or more - LED is ON)

Attributes address=“outputs” number=“3” setup LED display to show current state of output pin #3

To complete this example change led to show output pin #3 to show current servo state and resize the led -

<gitem where="magic" position="960;0" width="80" height="80"  
image="motor/servo-driver-wide" action="mypopup-toggle:popup-servo"
xattr="56;4;20;20;led;green;round" address="outputs" number="3" type="xbutton" />

Just another way to add 2 buttons widget containers with 2 buttons. The same 1280M5 profile

Original screen is shown below-

Put our new buttons instead of CV button

1. Find cnc-screen.xml configuration file in 1280M5 profile folder

2. Edit the file (in Midnight commander press F4 on the cnc-screen.xml file)

3. Find in the file section with CV button definition (F7, search “CV”)

Here it is-

<gitem where="magic" position="960;0" width="80" height="80"  
image="CV/CV" action="cnc-gvariable-toggle-5710" 
xattr="60;4;16;16;led;red;round" name="display-gvariable-5710" 
type="xbutton" />

4. Put under this button small popup window which will be a container for two buttons - Servo ON & Servo Off. Add mywidget item - custom small widget with given attributes -

<gitem where="magic" position="1120;80" height="160" width="80" 
type="myitems" name="toolbar-servo" 
bgColor="#d0d0d0" hidden="1" />

widget name: toolbar-servo

widget size: 80×160 exactly to fit 2 80×80 buttons in

built-in led to show output#0 state

5. Fix CV button to show/hide popup-servo -

image=“CV/CV” action=“cnc-gvariable-toggle-5710” image=“motor/servo-driver” action=“mywidget-toggle:toolbar-servo”

<gitem where="magic" width="80" height="80" position="1120;0" 
image="motor/servo-driver" action="mywidget-toggle:toolbar-servo"
xattr="56;4;20;20;led;green;round" address="outputs" number="0" 
type="xbutton" ></gitem>

6. Save cnc-screen.xml, restart the software and press the new button with Servo driver. Small popup grey colour window will be shown on the right side of the button.

7. Add two buttons definition in the popup window. Definition is very similar to previous example but need to add button position attribute inside widget and button width/height attributes.

<gitem where="toolbar-servo" position="0;0"  width="80" height="80" 
image="motor/motor-start" action="servo-pid-on"  event="pressed-delay-1000" type="button" />
<gitem where="toolbar-servo" position="0;80" width="80" height="80" 
image="motor/motor-stop"  action="servo-pid-off" type="button" />

to prevent accidental servo driver activation add 1 sec delay for start button -

event="pressed-delay-1000"

action function will be started only if the button press and hold for 1 sec (1000 msec). On button will run Servo-Pid-ON procedure Off button will run Servo-Pid-Off procedure

Result should be like this -

We need to add to the main screen a window with 8 led displays and some text labels to show the current state of inputs & outputs. We take 1280M5 profile as a base

Original screen is -

Make the visualisation widget a little narrow and put the new window to the left side from visualization. Find “glview” section in cnc-screen.xml and fix from:

<gitem where="magic" position="0;80" width="880" height="340" 
bgColor="0xff353535" name="glview" type="glview" />

to:

<gitem where="magic" position="160;80" width="820" height="340" 
bgColor="#ff353535" name="glview" type="glview" />
<gitem where="magic" position="0;80" width="160" height="340" 
bgColor="#ffbbbbbb" name="led-panel" type="myitems" />

Result is -

Add 1st line label and leds from laft and right sides:

<gitem inversion="no" where="led-panel" position="5;5" width="20" displayWidth="20" height="20" 
address="outputs" number="11" shape="round" color="green" type="led" />
<gitem inversion="no" where="led-panel" position="25;5" width="130" labelWidth="110" 
displayWidth="20" height="20" labelAlignment="hcenter" labelFontSize="14" 
address="outputs" number="14" shape="round" color="green" type="led">
  <message>Side pillar</message>
  <message_ru>Боковой упор</message_ru>
</gitem>

where=“led-panel” - LEDs will be added to window named “led-panel” which was added before

address=“outputs” - Leds will show state of Outputs

<gitem inversion=“no” where=“led-panel” position=“5;5” width=“20” displayWidth=“20” height=“20” address=“outputs” number=“11” shape=“round” color=“green” type=“led” /> - fisrt (left) led is single, no text label assigned

<message_ru>Боковой упор</message_ru> - second (right) led assosiated with text label

position=“5;5” - led is placed to position inside parent widget

Result is -

Add some more LEDs to the widget. Complete code for the widget is -

  <gitem where="magic" position="0;80" width="160" height="340" bgColor="#ffbbbbbb" 
  name="led-panel" type="myitems" />
 
<gitem inversion="no" where="led-panel" position="5;5" width="20" displayWidth="20" 
  height="20" address="outputs" number="11" shape="round" color="green" type="led" />
 
<gitem inversion="no" where="led-panel" position="25;5" width="130" labelWidth="110" 
  displayWidth="20" height="20" address="outputs" number="14" labelAlignment="hcenter" 
  labelFontSize="14" shape="round" color="green" type="led">
  <message>Side pillar</message>
  <message_ru>Боковой упор</message_ru>
</gitem>
 
<gitem inversion="no" where="led-panel" position="5;25" width="20" displayWidth="20" 
  height="20" address="outputs" number="22" shape="round" color="green" type="led" />
 
<gitem inversion="no" where="led-panel" position="25;25" width="130" labelWidth="110" 
  displayWidth="20" height="20" address="outputs" number="23" labelAlignment="hcenter" 
  labelFontSize="14" shape="round" color="green" type="led">
  <message>Rear pillar</message>
  <message_ru>Задний упор</message_ru>
</gitem>
 
<gitem inversion="no" where="led-panel" position="5;45" width="20" displayWidth="20" 
  height="20" address="inputs" number="13" shape="round" color="green" type="led" />
 
<gitem inversion="no" where="led-panel" position="25;45" width="130" labelWidth="110" 
  displayWidth="20" height="20" address="inputs" number="14" labelAlignment="hcenter" 
  labelFontSize="14"shape="round" color="green" type="led">
  <message>Pedal</message>
  <message_ru>Педаль</message_ru>
</gitem>
 
<gitem inversion="no" where="led-panel" position="5;65" width="20" displayWidth="20" 
  height="20" address="outputs" number="10"   shape="round" color="green" type="led" />
 
<gitem inversion="no" where="led-panel" position="25;65" width="130" labelWidth="110" 
displayWidth="20" height="20"   address="outputs" number="15" labelAlignment="hcenter" 
labelFontSize="14" shape="round" color="green" type="led">
  <message>Vacuum</message>
  <message_ru>Присоски</message_ru>
</gitem>

Result is -

For described example machine runs the same g-code on left and right sides of the machine table. To increase a performance operator remove ready parts and install a new blank on one side of the table while the machine cuts new parts on another side.

Global variable #500 contains Current active side machine works (or going to work) with. Variable value-

0 - means machine works (or will start to work) with the left side,

1 - means machine works on the right side.

We add a button to toggle current side. We add on-button indication and add LED displays to show current working side.

Button definition is shown below -

  <gitem where="led-panel" type="xbutton" position="50;90" width="60" height="60" image="left-right" 
  action="direct-run:G90 G10 L186 P500 Q1" />
</code
 
Led displays to the left and right  sides from button - 
<code xml>
<gitem inversion="no" where="led-panel" position="5;90" width="40" height="60" name="display-cnc-gvariable-500" 
shape="square" color="red" type="led" />
<gitem inversion="yes" where="led-panel" position="115;90" width="40" height="60" name="display-cnc-gvariable-500" 
shape="square" color="red" type="led" />

Result is -

To add “Current Side” indication on the button -

change type <del>"button"</del> "xbutton
add xattr="xattr="0;0;60;60;led;green;round"
add name="display-cnc-gvariable-500" to show current state of Variable #500
add image files array - images="--left;--right"

images to show Variable state have the same size as the button itself, so image –left or –right will be drawn on the top of the button image.

Images for button base, “the left state” and “the right state” are

code for button definition is -

<gitem where="led-panel" position="50;90" width="60" displayWidth="60" height="60" image="left-right" 
type="xbutton" action="direct-run:G90 G10 L186 P500 Q1"
images="--left-right;left--right" name="display-cnc-gvariable-500" xattr="0;0;60;60;led;green;round"/>

Result screen is -

We need to add 2 buttons on GUI main screen to fill up and drain water from plasma cutting machine water table.

Need to add the button to the right from Palnik ON button -

Goto cnc-screen.xml in profile folder, find “Palnik ON” line. Here it is: definition of Palnik ON button and a a text label under it -

<gitem where="ecocut-coordinates" position="80;205" width="60" height="60" 
image="Ecocut/2a;Ecocut/1a" action="cnc-mode-cutting-ignore" type="toggle-switch" />
 
<gitem where="ecocut-coordinates" position="80;265" width="60" height="20" type="label" 
fgColor="white" labelFgColor="white" labelFontFamily="sans-serif" labelFontSize="12" 
fontSize="12" fontStyle="bold" labelAlignment="vcenter;hcenter">
  <message>Test Plasma</message>
  <message_ru>Поджиг</message_ru>
  <message_pl>Palnik ON</message_pl>
</gitem>

where=“ecocut-coordinates” - widget where button & label are placed

position=“80;205” width=“60” height=“60” - position, width and height of the button

We need to add 2 buttons just after it -

<gitem where="ecocut-coordinates" position="150;205" width="60" height="60" image="Ecocut/water-up" 
action="direct-plc:M240/1" type="button" />
<gitem where="ecocut-coordinates" position="145;265" width="70" height="20" type="label" fgColor="white" 
labelFgColor="white" labelFontFamily="sans-serif" labelFontSize="12" fontSize="12" 
fontStyle="bold" labelAlignment="vcenter;hcenter" >
  <message>Water Fill</message>
  <message_pl>Water Fill</message_pl>
</gitem>
 
<gitem where="ecocut-coordinates" position="220;205" width="60" height="60" image="Ecocut/water-down" 
action="direct-plc:M240/0" type="button" />
<gitem where="ecocut-coordinates" position="215;265" width="70" height="20" type="label" fgColor="white" 
labelFgColor="white" labelFontFamily="sans-serif" labelFontSize="12" fontSize="12" fontStyle="bold" 
labelAlignment="vcenter;hcenter" >
  <message>Water Drain</message>
  <message_pl>Water Drain</message_pl>
</gitem>

Result is -

Out pin #13 controls Water Fill, 
Out pin #12 controls Water Drain

Add LEDs display to the buttons -

1. Change type from “button” to “xbutton” 2. Add xatrr attribute to buttons definition with LEDs position, width, height, colour and shape 3. Add to button definition attribute address=“outputs” and number=“12” (or number=“13”) to show output pin state

<gitem where="ecocut-coordinates" position="150;205" width="60" height="60" image="Ecocut/water-up" 
action="direct-plc:M240/1" 
type="xbutton" xattr="4;4;16;16;led;green;round" address="outputs" number="13"/>
<gitem where="ecocut-coordinates" position="220;205" width="60" height="60" image="Ecocut/water-down" 
action="direct-plc:M240/0" 
type="xbutton" xattr="4;4;16;16;led;green;round" address="outputs" number="12" />

Result is -

To control Water Fill/Drain PLC procedure M240 with parameter “1” (to Fill) or “0” (to Drain) is used. PLC procedure M240 is described Here

We will fix 1024G profile. The main screen of the profile is shown below.

Put PLC process display to the top of the empty area next to “THC Speed” display.

To add the display -

• find and open to edit “cnc-screen.xml” file in profile folder
• find reference “THC Speed” display -

  <gitem fgColor="cyan" where="w-operate" labelFontStyle="bold" format="%5.1f" K="1." height="30"
  type="display" deviation="0.01" name="display-gvariable-5493" bgColor="transparent" 
  displayWidth="140" labelWidth="100" fontStyle="bold" fontSize="20" orientation="horizontal">
    <message>THC Speed</message>
    <message_ru>Z Слежение</message_ru>
  </gitem></code
    * Add new display (easy way to copy-paste "THC Speed" display and edit it.
    * Remove "name", "K" attributes
    * Add "address" attribute to organize process display - <code>address="plc-proc"

• Change type -

  type="radio-display"

• Edit “format” attribute -

  format="No Cutting=0;Ignition=50;PreHeat=51;Cutting=60"

• Translate text inside format attribute if need local language messages -

  format="Ожиидание=0;Поджиг=50;Подогрев=51;Резка=60

• Edit bgColor, fgColor, fontSize attributes to get nice looking display

A complete code -

<gitem fgColor="cyan" where="w-operate" labelFontStyle="bold" 
type="radio-display" address="plc-proc" format="Ожидание=0;Поджиг=50;Подогрев=51;Резка=60" 
height="30" displayWidth="140" labelWidth="100" bgColor="black"
fontStyle="bold" fontSize="16" orientation="horizontal">
  <message>Proc</message>
  <message_ru>Процесс</message_ru>
</gitem>

Screen result is -

For 3 axes machine we have a button >0< to moves machine to work 0 position. For machines with rotational axes it is convenient to have similar button to move rotational axis A to work 0.

We add this button to the main screen on the left of >0< button. Here is Move To 0 definition -

<gitem type="button"
where="magic" 
image="parking/move-to-0" 
action="direct-run-confirm:M333"  
position="1200;640" width="80" height="80">
 <message-confirm>Move to Work (0,0,Tool Lift) position (macro M333). Are you sure?</message-confirm>
 <message-confirm_ru>Переместить в положение (0,0, Tool Lift) (макро M333)?</message-confirm_ru>
</gitem>

Add on the left Move To A definition -

<gitem type="button" 
where="magic" 
image="parking/move-to-A" 
action="direct-run-confirm:M335" 
position="1120;640" width="80" height="80">
   <message-confirm>Move to A=0 position (macro M335). Are you sure?</message-confirm>
   <message-confirm_ru>Вернуть в А=0 (макро M335)?</message-confirm_ru>
</gitem>

• type=“button” - Button definition
• where=“magic” - Name of Parent Widget
• image=“parking/move-to-A” - Button skin image filename (SVG format, folder relative to /myCNC/art/buttons-no-theme/)
• action=“direct-run-confirm:M335” - What to do if button pressed -
  • direct-run-confirm: - Open Message box to confirm, then
  • run G-code sequence (”;“ is used as separator of g-code blocks)
• position=“1120;640” width=“80” height=“80” - button position on Parent Widget, width and height of button
• <message-confirm>Move to A=0 position (macro M335). Are you sure?</message-confirm> - message to show in Message Box
• <message-confirm_ru>Вернуть в А=0 (макро M335)?</message-confirm_ru> - message to show for Russian language

Screen with Move To A button

Message Box when Move To A button pressed

If button OK pressed on Message Box, g-code line M335 (which is macro actually) will be executed to move A axs to zero.

M335 macro to move A to zero is described here

myCNC software has Centring widget to work with probing sensor and find internal and external centers, edges, corners on parts. Fig. Centring Widget

There is just 1 line to configure Centring Widget in cnc-screen.xml configuration file.

<gitem type="centringview" where="magic" 
bsize="80"
position="0;80" width="880" height="320" 
hidden="1" 
bgColor="#c0c0c0">centringview</gitem>

• type=“centringview” - Centring Widget definition
• where=“magic” - name of Parent Widget
• bsize=“80” - size of buttons
• position=“0;80” width=“880” height=“320” - Position of Centring Widget on the Parent WIdget, width and height of Centring Widget
• hidden=“1” - Centring Widget is hidden on the start of GUI
• bgColor=”#c0c0c0“ - Backgroundcolor of Centring Widget

Centring Widget takes a lot of space on the GUI screen, so it's convenient to have it hidden while normal work and show the widget only when work with Probe sensor. To show/hide Centring Widget usually used on-screen button.

<gitem type="button"
image="probing/centring-unit" action="toggle-widget-centring"
where="magic" 
position="1120;0" width="80" height="80" />

• type=“button” - Button definition
• image=“probing/centring-unit” - image for the button skin (in SVG format, relative to images folder ”/myCNC/art/buttons-no-theme/
• action=“toggle-widget-centring” - Action definition for pressing the button - Show/Hide Centring Widget
• where=“magic” - name of Parent Widget
• position=“1120;0” width=“80” height=“80” - Button position on the Parent Widget, width and height on the button in pixels