Differences

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

--- mycnc-screen:1366_series_screen_configuration_examples [2019/10/10 09:40] – ivan
+++ mycnc-screen:1366_series_screen_configuration_examples [2022/03/29 15:53] (current) – ivan
@@ Line 1: / Line 1: @@
 ======1366 Series Screen Configuration Examples=====
+//**NOTE**: The myCNC team recommends utilizing the examples provided in this manual (as well as other manuals in this documentation) as a starting point for your machine setup. When possible (and applicable), it is recommended to keep changes to a mininum. In general, using these examples as the basis for your PLCs/macro commands allows for an easier setup process.//
 The following examples show some of the available settings that were discussed in the [[mycnc:mycnc_screen_configuration|MyCNC Screen Configuration]] manual. As an extremely large variety of possible settings and combinations are available, not every parameter discussed in the main manual is presented in the examples listed below. If any additional information is required, do not hesitate to reach out on the [[http://forum.pv-automation.com/|myCNC Forum]].
@@ Line 183: / Line 185: @@
   * This is followed by similar code for x-log and x-nclist, and outlines the basics of each of the three already existing tabs. First of all, it is necessary to add a fourth chunk of code, which we will call ''x-mapping''.
-<code XML><gitem where="x-bottab" //x-mapping is within the x-bottab screen
+<code XML><gitem where="x-bottab"
- name="x-mapping" position="85;0" //position within the x-bottab screen
+ name="x-mapping" position="85;0"
- width="1040" height="180" basewidth="1040" baseheight="180" //element parameters
+ width="1040" height="180" basewidth="1040" baseheight="180"
  type="frame" border-color="##b-border" border-width="2" border-radius="10"
  bgColor="##b-main" hide-list="x-log;x-mill;x-nclist" exclusive="yes" /></code>
@@ Line 198: / Line 200: @@
   * Next, the button to switch to the Map tab will be added. It is done through the following code:
-<code XML><gitem where="x-bottab" position="5;12" //button also added to x-bottab
+<code XML><gitem where="x-bottab" position="5;12"
- width="80" height="40" skinbase="flat" //skinbase is located in the theme (xp) folder
+ width="80" height="40" skinbase="flat"
- xattr="0;0;80;40;led;red;round" //creates an LED
+ xattr="0;0;80;40;led;red;round"
- images="vbutton-right-led-off;vbutton-right-led-on" address="widget" //assigns LED images
+ images="vbutton-right-led-off;vbutton-right-led-on" address="widget"
- image="mapping-left" //assigns the image for the button
+ image="mapping-left"
- action="mywidget-show:x-mapping" type="xbutton"/> //specifies the result of pressing the button</code>
+ action="mywidget-show:x-mapping" type="xbutton"/> </code>
   * Note that this refers to an **image** that is not used anywhere else in the application, so it is necessary to create it. We can do so by adding a new image with the name ''mapping-left.svg'' to the ''myCNC/art/buttons-no-theme/xp'' folder (if the default xp theme is used). An image with the word "Map" was created and added to that folder in this step using the Inkspace application (any application which can edit and export .svg files will work):
@@ Line 215: / Line 217: @@
   * Next, the frame around the buttons inside the x-mapping tab will be inserted using the following code:
-<code XML><gitem where="x-mapping" //will insert this element inside x-mapping
+<code XML><gitem where="x-mapping"
- name="map-z-frame" position="10;10" //creates a visual border element
+ name="map-z-frame" position="10;10"
  width="360" basewidth="360" height="160" baseheight="160"
  type="frame" border-color="##b-border" border-width="2" border-radius="10"
- bgColor="##b-main"  hidden="no" /> //note that hidden can be expressed both with "no" and "0" </code>
+ bgColor="##b-main"  hidden="no" /> </code>
 The frame will appear in the previously blank Map tab (not filling in the entire tab, as its width and height have only been specified to be 360,160)
@@ Line 228: / Line 230: @@
 <code XML><gitem where="map-z-frame" name="map-z-view" position="5;5"
  width="350" basewidth="350"
- height="150" baseheight="150" //basewidth/height serve as reference values for resizing
+ height="150" baseheight="150"
  type="myitems" /></code>
@@ Line 244: / Line 246: @@
 <gitem where="map-z-view" position="75;5"
  width="70" height="70"
- image="probing/map-z-convert" //the probing folder will be taken from the theme folder (ex: xp)
+ image="probing/map-z-convert"
  action="zmap-apply"
  type="button" />
@@ Line 255: / Line 257: @@
  type="radio-display" deviation="0.5"
  action="cnc-gvariable-toggle-8255"
- name="display-cnc-gvariable-8255" //both the action and the display show the 8255 gvariable
+ name="display-cnc-gvariable-8255"
  bgColor="##b-display" fontStyle="bold">
 </gitem></code>
@@ Line 272: / Line 274: @@
  name="display-cnc-gvariable-8250"
  bgColor="##b-display" fontStyle="bold">
-<message>Segment Length,[mm]</message> //BDisplay shows both a global variable and a label
+<message>Segment Length,[mm]</message>
 </gitem>
@@ Line 305: / Line 307: @@
 From here on, it is possible to continue adding display elements to this tab in the remaining space, by creating subsections similar to the ''map-z-frame'' section created earlier. See more information on the possible screen elements in the [[mycnc:mycnc_screen_configuration|MyCNC Screen Configuration]] manual.
-====Example 3:
+====Example 4: Rotating the visualization and orientation changes within myCNC====
+The orientation changes for your visualization and workflow (by rotating the visualization 90/180/270 degrees, etc) are done in three major ways:
+  * The 2D screen visualization (for example, on plasma/gas profiles)
+  * For your hotkeys (matching the arrow keys to the new visualization that you have rotated by +-90/180/270 degrees), and
+  * Adjusting the movement within the Part Rotation widget.
+Going through these step by step:
+) Head into //Settings -> Config -> Screen//, and then locate and enable the **2D visualization: Rotate** option. 2D visualization: Rotate rotates the file visualization 90 degrees off its original layout, with linear axes that can be displayed in mm or inches. This is done for visualization purposes only, and does not impact the actual measurements of the original file (i.e. you will still move in the positive x-direction in the original G-code file when pressing the X+ button from the main screen's jog tab, etc).
+{{:mycnc-screen:screen-orientation-004-2d-rotate.png}}
+) Hotkeys settings can be found in //Settings -> Config -> Panel/Pendant -> Hotkeys// - in this window you can reassign the actions that are bound to your keyboard's arrow keys to match your desired orientation (for example, switching the default Arrow Up from Y+ to Y-, etc):
+{{:mycnc-screen:screen-orientation-005-hotkeys-rotation.png}}
+) Rotation widget editing is done through the .xml file (x-rotate.xml) which can be found in your profile's main folder (for example, on Ubuntu MATE it will be in //~/.config/myCNC/profiles/X1366P// for the default plasma cutting profile).
+Scroll down to the following section:
+<code><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></code>
+and change the **table-rotation** value. By default it is set to 0, changing it to -90, for example, will rotate the motion setup for the jog buttons in the Rotation tab by -90 degrees:
+{{:mycnc-screen:screen-orientation-006-x-rotate-xml.png}}
+====Example 5: Add a custom client logo to the main myCNC screen====
+This example is similar to Examples 1 and 2 (adding a single element to the main myCNC screen). However, it is geared specifically towards clients wanting to customize myCNC with their logo, and the code provided here can be used without changes, provided the naming scheme for the files and the folders is maintained by the user.
+//WARNING: It is often recommended to create a backup of your profile folder, in case you'd like to revert back to the original profile for any reason.//
+The screen below is what the original screen in this example looks like. We aim to add a small 3x2 logo in the top left corner of the screen (by moving the top strip of buttons to the right to provide some extra space):
+{{:mycnc-screen:screen-config-036-original-screen.png}}
+In this example, we will be using a 120x80 pixel custom logo. If the user does not want to modify the code below, they have to maintain a 3 by 2 width/height ration in their custom logo as well - other sizes may need slight adjustments in the positioning (more on that later).
+) To begin with, navigate to your myCNC profile folder (located in ''home/USERNAME/.config/myCNC/profiles''). In the case of this example, the computer username is "mycnc", so the pathname will be ''home/mycnc/.config/myCNC/profiles/X1366V'', since the X1366V profile is used.
+{{:mycnc-screen:screen-config-037-profiles-folder.png}}
+) Within your profile folder, locate and open the ''cnc-screen.xml'' file in your text editor of choice (Pluma has been used in this example):
+) Next, we will insert the following block of code into an empty line (not between existing <gitem> and </gitem> flags, which are used for the other screen elements):
+<code XML>
+<!--CUSTOM LOGO  -->
+<gitem  where="xp" name="custom-logo" bgColor="##b-widget"  type="myitems"
+skin="logo/custom-logo"
+position="0;0" width="120" height="80" /> </code>
+{{:mycnc-screen:screen-config-038-empty-xml.png}}
+) Next, move every button in the top row of the screen by 120 pixels to the right relative to their old position - this is done by changing the ''position'' attribute (the first value is for the x-position, the second for the y-position). Depending on the profile, the exact code may differ somewhat, but starting from something like this:
+<code XML>
+<gitem where="xp" position="80;0"  width="80" height="80"
+tooltip="Open a G-code file" tooltip_ru="Открыть файл" image="open"
+action="open" type="button"></gitem>
+<gitem where="xp" position="160;0" width="80" height="80"
+tooltip="Open a DXF file" tooltip_ru="Открыть DXF файл" image="dxf-open"
+action="dxf-import" type="button"></gitem>
+<gitem where="xp" position="240;0" width="80" height="80"
+tooltip="Refresh the current file" tooltip_ru="Перезагрузить файл" image="refresh"
+action="file-refresh" type="button"></gitem>
+<gitem where="xp" position="320;0" width="80" height="80"
+tooltip="Fit to window" tooltip_ru="Масштабировать под экран" image="zoom-fit"
+action="fit-to-view" type="button"/>
+<gitem where="xp" position="400;0" width="80" height="80"
+tooltip="Zoom in" tooltip_ru="Приблизить" image="zoom-in"
+action="zoom-in" type="button"/>
+<gitem where="xp" position="480;0" width="80" height="80"
+tooltip="Zoom out" tooltip_ru="Уменьшить" image="zoom-out"
+action="zoom-out" type="button"/>
+<gitem where="xp" position="560;0" width="80" height="80"
+tooltip="Show/hide the program dimensions" tooltip_ru="Показать размеры программы" image="dimension"
+action="mode-show-dimension" type="button"/>
+<gitem where="xp" position="640;0" width="80" height="80"
+tooltip="Show/hide the working area" tooltip_ru="Показать размеры стола" image="zoom-area"
+action="mode-show-workarea" type="button"/>
+<!--
+<gitem where="xp" position="720;0" width="80" height="80"
+image="plasma/AB-cut"
+action="mywidget-toggle:ab-cut-widget" type="button"/>
+-->
+<gitem where="xp" position="720;0" width="80" height="80"
+tooltip="Toggle the VARS widget (variables)" tooltip_ru="Глобальные переменные" image="tabs/vars"
+action="mywidget-toggle:x-varsview" type="button"></gitem>
+<gitem where="xp" position="800;0" width="80" height="80"
+tooltip="Show the on-screen keyboard and MDI interface"
+tooltip_ru="Ввод с экранной клавиатуры" image="keyboard/keyboard"
+action="mdi-open" type="button"></gitem>
+</code>
+to something akin to this:
+<code XML>
+<gitem where="xp" position="200;0"  width="80" height="80"
+tooltip="Open a G-code file" tooltip_ru="Открыть файл" image="open"
+action="open" type="button"></gitem>
+<gitem where="xp" position="280;0" width="80" height="80"
+tooltip="Open a DXF file" tooltip_ru="Открыть DXF файл" image="dxf-open"
+action="dxf-import" type="button"></gitem>
+<gitem where="xp" position="360;0" width="80" height="80"
+tooltip="Refresh the current file" tooltip_ru="Перезагрузить файл" image="refresh"
+action="file-refresh" type="button"></gitem>
+<gitem where="xp" position="440;0" width="80" height="80"
+tooltip="Fit to window" tooltip_ru="Масштабировать под экран" image="zoom-fit"
+action="fit-to-view" type="button"/>
+<gitem where="xp" position="520;0" width="80" height="80"
+tooltip="Zoom in" tooltip_ru="Приблизить" image="zoom-in"
+action="zoom-in" type="button"/>
+<gitem where="xp" position="600;0" width="80" height="80"
+tooltip="Zoom out" tooltip_ru="Уменьшить" image="zoom-out"
+action="zoom-out" type="button"/>
+<gitem where="xp" position="680;0" width="80" height="80"
+tooltip="Show/hide the program dimensions" tooltip_ru="Показать размеры программы" image="dimension"
+action="mode-show-dimension" type="button"/>
+<gitem where="xp" position="760;0" width="80" height="80"
+tooltip="Show/hide the working area" tooltip_ru="Показать размеры стола" image="zoom-area"
+action="mode-show-workarea" type="button"/>
+<!--
+<gitem where="xp" position="720;0" width="80" height="80" image="plasma/AB-cut"
+action="mywidget-toggle:ab-cut-widget" type="button"/>
+-->
+<gitem where="xp" position="840;0" width="80" height="80"
+tooltip="Toggle the VARS widget (variables)" tooltip_ru="Глобальные переменные" image="tabs/vars"
+action="mywidget-toggle:x-varsview" type="button"></gitem>
+<gitem where="xp" position="920;0" width="80" height="80"
+tooltip="Show the on-screen keyboard and MDI interface"
+tooltip_ru="Ввод с экранной клавиатуры" image="keyboard/keyboard"
+action="mdi-open" type="button"></gitem>
+</code>
+Notice how the only change between the two blocks of code is in the ''position='' line, with the x-position being shifted by 120 pixels to the right to accommodate for our new 120x80 custom logo. After you have completed the changes, save the cnc-screen.xml file.
+) Additionally, we have to move the main menu button, which as you can see is absent from the code above. **The exact file you will be editing will depend on your profile.** Scroll down to the bottom of the ''cnc-screen.xml'' file you have open, and check which exact file contains your menu (this will have a name such as ''x-menu.xml'' or ''x-menu-mill.xml'', and differs depending on your profile). After you have confirmed the name of that file, navigate back to the profile folder (''/home/USERNAME/.config/profiles/PROFILENAME''), and open that menu XML file in your text editor.
+In that file (''x-menu-mill.xml'' in case of this example), change the following line from this:
+<code XML> <gitem where="xp" position="0;0" image="menu" height="80" width="80"
+tooltip="Show/hide the main menu" action="mywidget-toggle:x-menu-base" type="button" />
+</code>
+to this:
+<code XML><gitem where="xp" position="120;0" image="menu" height="80" width="80"
+tooltip="Show/hide the main menu" action="mywidget-toggle:x-menu-base" type="button" /></code>
+and save the file. The exact line may look a little different depending on the profile, however if in doubt, search for the words ''image="menu"'' to locate the exact line in question and change the ''position'' value from ''0;0'' to ''120;0''.
+) Next, we need to add our 120x80 px logo to the right folder. Navigate to ''/opt/myCNC/art/buttons-no-theme/xp/logo'', and place your custom 3x2 SVG logo (named ''custom-logo.svg'') into this folder. Note that if the name of the file, the folder, or the size of the logo are different, the above code must be changed to accomodate these differences.
+{{:mycnc-screen:screen-config-040-custom-logo.png}}
+After this is done, reload the myCNC applications. The changes should now take effect:
+{{:mycnc-screen:screen-config-041-final-screen.png}}
+====Editing the fonts in built-in menus using x.style====
+It is possible to edit the fonts and font sizes for built-in menus (like the G-code Open file menu shown below):
+{{:mycnc:screen-config-042-font-file-menu.png}}
+Adjusting the font size for this window can be done using the x.style file in your profile folder. To edit it:
+) Navigate to your profile folder (in this manual, X1366M will be used as an example) and open ''x.style'' in your preferred text editor of choice:
+{{:mycnc:screen-config-043-font-size-1.png}}
+) Locate the //QTreeView// entries that deal with font sizes (there should be one at the beginning of the file) and remove "//QTreeView//" from the line it's currently in (usually located with //QTextEdit// and //QLineEdit// entries).
+//**Note**: on certain profiles (such as the plasma cutting series) you will have to edit the two first instances of QTreeView in the code instead. Do not delete the QTreeView lines that deal with background color://
+{{:mycnc:screen-config-044-font-size-2.png}}
+) Add the following block of code for QTreeView instead:
+<code>QTreeView
+{
+border: 1px solid ##b-border;
+border-radius: 1px;
+border-style: outset;
+padding: 0px 0px 0px 0px;
+font: bold 14px;
+font-family: "Open Sans";
+}</code>
+{{:mycnc:screen-config-045-font-size-3.png}}
+In the code above you can edit the font line to have the font size you need (instead of 14px).
+) Save the x.style file and reload the myCNC application. The changes should now take effect:
+{{:mycnc:screen-config-046-font-size-4.png}}
+Editing the font (instead of the font size) can be done in a similar manner.