Added feature: select-axis buttons if heads < 3

Step/wwwroot/assets/styles/base/buttons.less

@@ -135,6 +135,10 @@ button.square {
     margin: 0 8px;
     padding: 0 4px;
     display: flex;
+    &.collapsed{
+        margin: 0;
+        padding: 0;
+    }
 }
 
 .btn-group {
@@ -168,12 +172,20 @@ button.soft {
     font-size: 14px;
     border-radius: 2px;
 
+
     &.icon{
       display: flex;
       padding: 1px 12px;
       align-items: center;
     }
 
+    &.axes{
+        width: 54px;
+        font-size: 1.8em;
+        display: block;
+        font-weight: 600;
+      }
+
     img {
         width: 18px;
         image-rendering: -webkit-optimize-contrast;

Step/wwwroot/assets/styles/base/head.less

@@ -370,7 +370,11 @@
     flex-flow: row wrap;
     width: 512px;
     height: 230px;
+    overflow-x: hidden;
 }
+.mini{
+    width: 262px;
+  }
 
 .heads-container-lt4 {
     right: -12px;

Step/wwwroot/assets/styles/base/plc-softkeys.less

@@ -404,6 +404,32 @@
     }
 }
 
+#axes-softkeys-container {
+    position: absolute;
+    top: 0;
+    left: 322px;
+    width: 258px;
+    height: 223px;
+    margin: -4px;
+    display: flex;
+    flex-flow: row wrap;
+    overflow: hidden;
+    .empty-space {
+        display: block;
+        width: 54px;
+        height: 48px;
+        margin: 4px;
+        background-color: #4e585e;
+        border-radius: 2px;
+    }
+    div {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        flex-wrap: wrap;
+    }
+}
+
 .jog-menu,
 .auto-menu {
     // width: 100%;

Step/wwwroot/assets/styles/style.css

@@ -394,6 +394,10 @@ button.square:hover {
   padding: 0 4px;
   display: flex;
 }
+.btn-spacer.collapsed {
+  margin: 0;
+  padding: 0;
+}
 .btn-group {
   margin: 0 8px;
   padding: 0;
@@ -429,6 +433,12 @@ button.soft.icon {
   padding: 1px 12px;
   align-items: center;
 }
+button.soft.axes {
+  width: 54px;
+  font-size: 1.8em;
+  display: block;
+  font-weight: 600;
+}
 button.soft img {
   width: 18px;
   image-rendering: -webkit-optimize-contrast;
@@ -1864,6 +1874,31 @@ footer .container button.big:before {
   display: flex;
   flex-wrap: wrap;
 }
+#axes-softkeys-container {
+  position: absolute;
+  top: 0;
+  left: 322px;
+  width: 258px;
+  height: 223px;
+  margin: -4px;
+  display: flex;
+  flex-flow: row wrap;
+  overflow: hidden;
+}
+#axes-softkeys-container .empty-space {
+  display: block;
+  width: 54px;
+  height: 48px;
+  margin: 4px;
+  background-color: #4e585e;
+  border-radius: 2px;
+}
+#axes-softkeys-container div {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-wrap: wrap;
+}
 .jog-menu,
 .auto-menu {
   background-color: #4e585e;
@@ -2544,6 +2579,10 @@ footer .container button.big:before {
   flex-flow: row wrap;
   width: 512px;
   height: 230px;
+  overflow-x: hidden;
+}
+.mini {
+  width: 262px;
 }
 .heads-container-lt4 {
   right: -12px;

Step/wwwroot/src/components/under-the-hood.vue

@@ -15,6 +15,7 @@
       </div>
       <div class="keys-area">
         <nc-soft-keys></nc-soft-keys>
+        <axes-soft-keys v-if="showAxisBtn" v-bind:isDisabled="!showJog"></axes-soft-keys>
         <mheads></mheads>
         <jog-menu v-if="showJog"></jog-menu>
         <auto-menu v-if="showAuto"></auto-menu>
@@ -26,6 +27,7 @@
 import { appModelActions } from "src/store";
 import plcSoftKeys from "src/modules/plc-softkeys.vue";
 import ncSoftKeys from "src/modules/nc-softkeys.vue";
+import axesSoftKeys from "src/modules/axes-softkeys.vue";
 import mheads from "src/modules/mheads.vue";
 import jogMenu from "src/modules/under-the-hood/jog-menu.vue";
 import autoMenu from "src/modules/under-the-hood/auto-menu.vue";
@@ -36,6 +38,7 @@ export default {
   components: {
     plcSoftKeys,
     ncSoftKeys,
+    axesSoftKeys,
     mheads,
     jogMenu,
     autoMenu,
@@ -57,6 +60,13 @@ export default {
       let mdi = this.$store.getters.getNcSoftKeyStatus(2);
       let edit = this.$store.getters.getNcSoftKeyStatus(3);
       return this.isCnReady() && ((auto && auto.value) || (mdi && mdi.value) || (edit && edit.value));
+    },
+    showAxisBtn: function(){
+      let headsnum = this.$store.state.machineInfo.heads.length
+      if(headsnum <= 2)
+        return true
+      else
+        return false;
     }
   },
   methods: {

Step/wwwroot/src/modules/axes-softkeys.vue

@@ -0,0 +1,57 @@
+<template>
+<div id="axes-softkeys-container">
+  <div >
+
+        <button class="soft icon axes"
+                @click="setAxes(a.id)"
+                v-for="a in axes"
+                :key="a.id"
+                :disabled="isDisabled"
+                :class="{active: a.id == selectedAxisId}">{{a.name}}</button>
+
+      <div class="empty-space" v-for="(item,index) in emptySpaces" :key="'Empty_' + index"></div>
+  </div>
+</div>
+</template>
+<script>
+import { Hub } from "src/services/hub";
+export default {
+
+  computed: {
+    axes: function() {
+      return this.$store.state.process.axes;
+    },
+    emptySpaces: function() {
+      let num = this.$store.state.process.axes.length;
+      if(num >= this.maxNumVisible)
+        return 0;
+      else
+        return this.maxNumVisible - num;
+    },
+    selectedAxisId: function() {
+      return this.$store.state.process.selectedAxis;
+    }
+  },
+  methods: {
+    getAxesName() {
+      let id = this.$store.state.process.selectedAxis;
+      for (const k in this.$store.state.process.axes) {
+        let a = this.$store.state.process.axes[k];
+        if (a.id == id) return a.name;
+      }
+      return null;
+    },
+    setAxes(id) {
+      Hub.Current.selectAxis(id);
+    },
+  },
+  props:{
+      isDisabled: { default: true, type: Boolean }
+  },
+  data: function() {
+    return {
+      maxNumVisible: 16
+    };
+  }
+};
+</script>

Step/wwwroot/src/modules/mheads.vue

@@ -1,5 +1,5 @@
 <template>
-<div class="heads-container scrollable_auto" :class="{'heads-container-lt4':(heads.length <=4)}">
+<div class="heads-container scrollable_auto" :class="{'mini':(heads.length <=2) , 'heads-container-lt4':(heads.length <=4)}">
   <head-std :title="h.name" v-for="h in heads" :key="h.id"
             :rpm="getHeadsProperty(h.id).actualSpeed"
             :tool="getHeadsProperty(h.id).mountedTool"
@@ -17,10 +17,7 @@
             :isActive="getHeadsProperty(h.id).isActive"
             @overridePlus="overridePlus(h.id)" @overrideMinus="overrideMinus(h.id)"
             ></head-std>
-   <div class="head-place-holder" v-if="heads.length <4"></div>
-   <div class="head-place-holder" v-if="heads.length <3"></div>
-   <div class="head-place-holder" v-if="heads.length <2"></div>
-   <div class="head-place-holder" v-if="heads.length <1 || (heads.length>4 && heads.length%2)"></div>
+   <div class="head-place-holder" v-if="heads.length <=1 || (heads.length>2 && heads.length%2)"></div>
   <!-- <head-std :percentage="40" :load="55" :tool=1 :rpm=160000 title="head2"  process="1"></head-std>
   <head-std :percentage="100" :load="65" :tool=2 title="head3"  process="1"></head-std>
   <head-std title="head4" :load="100" process="1"></head-std>

Step/wwwroot/src/modules/under-the-hood/jog-menu.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="jog-menu" ref="menu">
-    <button @click="toggleAxes()" :class="{active:showAxesMenu}" :disabled="axes.length == 0" class="soft">{{"jog_menu_axis" | localize("Asse")}} {{getAxesName()}}</button>
-    <div class="btn-spacer">
+    <button v-if="showAxisBtn" @click="toggleAxes()" :class="{active:showAxesMenu}" :disabled="axes.length == 0" class="soft">{{"jog_menu_axis" | localize("Asse")}} {{getAxesName()}}</button>
+    <div class="btn-spacer" :class="{'collapsed': !showAxisBtn }">
       <button @click="ncClick(23)" :disabled="!isKeyActive(23)" :class="{active:isKeySelected(23) , inverted:isReadOnly(23)}" class="soft square"><i class="fa fa-minus"></i></button>
       <button v-if="!machineInfo.isSiemens" @click="ncClick(24)" :disabled="!isKeyActive(24)" :class="{active:isKeySelected(24) , inverted:isReadOnly(24)}" class="soft">{{name(24)}}</button>
       <button @click="ncClick(22)" :disabled="!isKeyActive(22)" :class="{active:isKeySelected(22) , readonly:isReadOnly(22)}" class="soft square"><i class="fa fa-plus"></i></button>
@@ -60,6 +60,13 @@ export default {
       // 180px è la metà della larghezza del contenitore .incr-menu-container configurata da css
       // 50px è la metà della larghezza del bottone Inc comprensivo di margini.
       return (this.$refs.incbutton.offsetLeft - 180 + 50).toString() + "px";
+    },
+    showAxisBtn: function(){
+      let headsnum = this.$store.state.machineInfo.heads.length
+      if(headsnum > 2)
+        return true
+      else
+        return false;
     }
   },