Skip to content

Commit

Permalink
updates for 01.02.07
Browse files Browse the repository at this point in the history 
Added ability to add icons to input and text panels - user can set size an color of icons
Fixed non critical js bugs
  • Loading branch information
@MintyTrebor
MintyTrebor authored Sep 17, 2023
1 parent 544092c commit 1b0c503
Show file tree
Hide file tree
Showing 11 changed files with 215 additions and 77 deletions.
6 changes: 6 additions & 0 deletions src/BtnCmdColPickDialogue.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,6 +72,9 @@
if(this.colField == "ChartLineColor"){
this.passedObject.OMColor = this.currColor;
}
if(this.colField == "inputIconAboveColor"){
this.passedObject.inputIconAboveColor = this.currColor;
}
this.$emit('exit', true);
this.show = false;
return;
Expand All @@ -90,6 +93,9 @@
if(this.colField == "ChartLineColor"){
this.currColor = this.passedObject.OMColor;
}
if(this.colField == "inputIconAboveColor"){
this.currColor = this.passedObject.inputIconAboveColor;
}
}
}
</script>
4 changes: 4 additions & 0 deletions src/BtnCmdDataFunctions.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -151,6 +151,10 @@ export default {
inputControlVals: [],
inputControlRange:[],
inputControlSteps: 1,
inputIconAbove: '',
inputIconAboveSize: 25,
inputIconAboveColor: 'normal',
inputIconAboveColor: '',
bPanelActivated: false,
chartLabel: 'Custom Chart',
chartOMDataArr: [],
Expand Down
120 changes: 70 additions & 50 deletions src/BtnCmdMMPanel.vue
View file
Original file line number Diff line number Diff line change
@@ -1,59 +1,79 @@
<template>
<div>
<v-card v-if="passedObject.panelMMPrefix.length > 0" :key="'mmVal' + passedObject.panelMMPrefix + passedObject.panelID + passedObject.panelHSize + passedObject.panelWSize" :flat="passedObject.borderless" :height="passedObject.panelHSize" :width="passedObject.panelWSize" :color="passedObject.panelColor" style="height: 100%; width: 100%">
<v-card v-if="passedObject.panelMMPrefix" :key="'mmVal' + passedObject.panelMMPrefix + passedObject.panelID + passedObject.panelHSize + passedObject.panelWSize" :flat="passedObject.borderless" :height="passedObject.panelHSize" :width="passedObject.panelWSize" :color="passedObject.panelColor" style="height: 100%; width: 100%">
<v-row align="center" style="height: 100%; width: 100%" class="pa-0 ma-0">
<v-card-text v-if="passedObject.panelMMOrientation == 'V'" class="text-center pa-0 ma-0" align="center">
<v-row dense>
<v-col class="d-flex flex-column pa-0 ma-0">
<strong :style="'color: ' + passedObject.panelMMPrefixColor" :class="`text-${passedObject.panelMMTextSize}`">
{{ passedObject.panelMMPrefix }}
</strong>
</v-col>
</v-row>
<v-row v-if="passedObject.panelType == 'mmValue'" dense>
<v-col class="d-flex flex-column pa-0 ma-0">
<span :style="'color: ' + passedObject.panelMMValueColor" :class="`text-${passedObject.panelMMTextSize}`">
{{ matchedMMVal }}
</span>
</v-col>
</v-row>
</v-card-text>
<v-card-text v-else class="text-center pa-0 ma-0">
<v-row dense justify="center" align="center">
<v-col class="d-flex flex-column pa-0 ma-0" justify="center" align="center">
<strong :style="'color: ' + passedObject.panelMMPrefixColor" :class="`text-${passedObject.panelMMTextSize}`" justify="center" align="center">
{{ passedObject.panelMMPrefix }}
</strong>
</v-col>
<v-col v-if="passedObject.panelType == 'mmValue'" class="d-flex flex-column pa-0 ma-0">
<span :style="'color: ' + passedObject.panelMMValueColor" :class="`text-${passedObject.panelMMTextSize}`">
{{ matchedMMVal }}
</span>
</v-col>
</v-row>
</v-card-text>
<v-card-text v-if="passedObject.panelMMOrientation == 'V'" class="text-center pa-0 ma-0" align="center">
<v-row v-if="passedObject.inputIconAbove" justify="center" align="center" class="d-flex pa-0 ma-0">
<v-col cols="12" justify="center">
<v-layout column align-center><span justify="center"><v-icon :size="passedObject.inputIconAboveSize" :color="passedObject.inputIconAboveColor">{{ passedObject.inputIconAbove }}</v-icon></span></v-layout>
</v-col>
</v-row>
<v-row dense>
<v-col class="d-flex flex-column pa-0 ma-0">
<strong :style="'color: ' + passedObject.panelMMPrefixColor" :class="`text-${passedObject.panelMMTextSize}`">
{{ passedObject.panelMMPrefix }}
</strong>
</v-col>
</v-row>
<v-row v-if="passedObject.panelType == 'mmValue'" dense>
<v-col class="d-flex flex-column pa-0 ma-0">
<span :style="'color: ' + passedObject.panelMMValueColor" :class="`text-${passedObject.panelMMTextSize}`">
{{ matchedMMVal }}
</span>
</v-col>
</v-row>
</v-card-text>
<v-card-text v-else class="text-center pa-0 ma-0">
<v-row v-if="passedObject.inputIconAbove" justify="center" align="center" class="d-flex pa-0 ma-0">
<v-col cols="12" justify="center">
<v-layout column align-center><span justify="center"><v-icon :size="passedObject.inputIconAboveSize" :color="passedObject.inputIconAboveColor">{{ passedObject.inputIconAbove }}</v-icon></span></v-layout>
</v-col>
</v-row>
<v-row dense justify="center" align="center">
<v-col class="d-flex flex-column pa-0 ma-0" justify="center" align="center">
<strong :style="'color: ' + passedObject.panelMMPrefixColor" :class="`text-${passedObject.panelMMTextSize}`" justify="center" align="center">
{{ passedObject.panelMMPrefix }}
</strong>
</v-col>
<v-col v-if="passedObject.panelType == 'mmValue'" class="d-flex flex-column pa-0 ma-0">
<span :style="'color: ' + passedObject.panelMMValueColor" :class="`text-${passedObject.panelMMTextSize}`">
{{ matchedMMVal }}
</span>
</v-col>
</v-row>
</v-card-text>
</v-row>
</v-card>
<v-card v-if="passedObject.panelMMPrefix.length == 0" :key="'mmVal' + passedObject.panelMMPrefix + passedObject.panelID + passedObject.panelHSize + passedObject.panelWSize" :flat="passedObject.borderless" :height="passedObject.panelHSize" :width="passedObject.panelWSize" :color="passedObject.panelColor" style="height: 100%; width: 100%">
<v-card v-else :key="'mmVal' + passedObject.panelMMPrefix + passedObject.panelID + passedObject.panelHSize + passedObject.panelWSize" :flat="passedObject.borderless" :height="passedObject.panelHSize" :width="passedObject.panelWSize" :color="passedObject.panelColor" style="height: 100%; width: 100%">
<v-row align="center" style="height: 100%; width: 100%" class="pa-0 ma-0">
<v-card-text v-if="passedObject.panelMMOrientation == 'V'" class="text-center pa-0 ma-0" align="center">
<v-row v-if="passedObject.panelType == 'mmValue'" dense>
<v-col class="d-flex flex-column pa-0 ma-0">
<span :style="'color: ' + passedObject.panelMMValueColor" :class="`text-${passedObject.panelMMTextSize}`">
{{ matchedMMVal }}
</span>
</v-col>
</v-row>
</v-card-text>
<v-card-text v-else class="text-center pa-0 ma-0">
<v-row dense>
<v-col v-if="passedObject.panelType == 'mmValue'" class="d-flex flex-column pa-0 ma-0">
<span :style="'color: ' + passedObject.panelMMValueColor" :class="`text-${passedObject.panelMMTextSize}`">
{{ matchedMMVal }}
</span>
</v-col>
</v-row>
</v-card-text>
<v-card-text v-if="passedObject.panelMMOrientation == 'V'" class="text-center pa-0 ma-0" align="center">
<v-row v-if="passedObject.inputIconAbove" justify="center" align="center" class="d-flex pa-0 ma-0">
<v-col cols="12" justify="center">
<v-layout column align-center><span justify="center"><v-icon :size="passedObject.inputIconAboveSize" :color="passedObject.inputIconAboveColor">{{ passedObject.inputIconAbove }}</v-icon></span></v-layout>
</v-col>
</v-row>
<v-row v-if="passedObject.panelType == 'mmValue'" dense>
<v-col class="d-flex flex-column pa-0 ma-0">
<span :style="'color: ' + passedObject.panelMMValueColor" :class="`text-${passedObject.panelMMTextSize}`">
{{ matchedMMVal }}
</span>
</v-col>
</v-row>
</v-card-text>
<v-card-text v-else class="text-center pa-0 ma-0">
<v-row v-if="passedObject.inputIconAbove" justify="center" align="center" class="d-flex pa-0 ma-0">
<v-col cols="12" justify="center">
<v-layout column align-center><span justify="center"><v-icon :size="passedObject.inputIconAboveSize" :color="passedObject.inputIconAboveColor">{{ passedObject.inputIconAbove }}</v-icon></span></v-layout>
</v-col>
</v-row>
<v-row dense>
<v-col v-if="passedObject.panelType == 'mmValue'" class="d-flex flex-column pa-0 ma-0">
<span :style="'color: ' + passedObject.panelMMValueColor" :class="`text-${passedObject.panelMMTextSize}`">
{{ matchedMMVal }}
</span>
</v-col>
</v-row>
</v-card-text>
</v-row>
</v-card>
</div>
Expand Down
47 changes: 46 additions & 1 deletion src/BtnCmdMMPanelDialogue.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,35 @@
</v-tooltip>
</v-col>
</v-row>
<v-row dense>
<v-col cols="7">
<v-tooltip bottom>
<template v-slot:activator="{ on, attrs }">
<v-text-field v-bind="attrs" v-on="on" label="Top Icon [mdi-*]" v-model="passedObject.inputIconAbove" placeholder="mdi-"></v-text-field>
</template>
<span>Material design icon name (Format = mdi-[icon name])</span>
</v-tooltip>
</v-col>
<v-col cols="1">
<v-tooltip bottom>
<template v-slot:activator="{ on, attrs }">
<a v-bind="attrs" v-on="on" href="https://pictogrammers.com/library/mdi/" target="_blank">
<v-icon v-if="passedObject.inputIconAbove" class="mr-1 pt-3">{{ passedObject.inputIconAbove }}</v-icon>
<v-icon v-else class="mr-1 pt-3">mdi-cog</v-icon>
</a>
</template>
<span>Click to open Material Design Icons web page</span>
</v-tooltip>
</v-col>
<v-col cols="4">
<v-tooltip bottom>
<template v-slot:activator="{ on, attrs }">
<v-text-field v-bind="attrs" v-on="on" label="Icon Size" v-model="passedObject.inputIconAboveSize" placeholder="25" number></v-text-field>
</template>
<span>Size (num [def=25])</span>
</v-tooltip>
</v-col>
</v-row>
<v-row dense v-if="passedObject.panelType == 'mmValue'" >
<v-col cols="11">
<v-tooltip bottom>
Expand Down Expand Up @@ -117,6 +146,22 @@
</v-tooltip>
</v-col>
</v-row>
<v-row v-if="passedObject.inputIconAbove">
<v-col>
<v-row dense><v-col><span style="font-weight: bold">Icon Colour</span></v-col></v-row>
</v-col>
<v-col>
<v-tooltip bottom>
<template v-slot:activator="{ on, attrs }">
<v-row dense>
<v-col align-self="center"><v-icon @click="setColor('inputIconAboveColor')" v-on="on" :color="passedObject.inputIconAboveColor">{{ passedObject.inputIconAbove }}</v-icon></v-col>
<v-col cols="3" align-self="center"><div align="center" style="cursor:pointer"><v-btn x-small @click="passedObject.inputIconAboveColor = ''">Reset</v-btn></div></v-col>
</v-row>
</template>
<span>Click to edit icon colour</span>
</v-tooltip>
</v-col>
</v-row>
<v-row>
<v-col cols="12">
<v-tooltip bottom>
Expand Down Expand Up @@ -207,7 +252,7 @@
this.alertReqVal = false;
}
}else if (this.passedObject.panelType != 'mmValue'){
if(this.passedObject.panelMMPrefix) {
if(this.passedObject.panelMMPrefix || this.passedObject.inputIconAbove) {
//req fields met so exit
this.passedObject.panelMMPath = this.tmpModelPath;
this.$emit('exit', true);
Expand Down
9 changes: 6 additions & 3 deletions src/BtnCmdMainPanel.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -421,7 +421,7 @@
<a href="https://www.npmjs.com/package/vuedraggable" target="_blank">vuedraggable</a><br>
Plus re-uses components and code from <strong>DWC</strong>.<br>
<a href="https://github.com/MintyTrebor/BtnCmd/wiki" target="_blank">BtnCmd Wiki</a><br>
<a href="https://materialdesignicons.com/" target="_blank">Material Design Icon Library</a><br>
<a href="https://pictogrammers.com/library/mdi/" target="_blank">Material Design Icon Library</a><br>
</v-alert>
</v-row>
<BtnCmdSettingsDialogue v-if="showEdit" v-model="showEdit" :passedObject="objectToPass" :bMQTT="btnCmd.globalSettings.enableMQTT" :enableSBCC="btnCmd.globalSettings.enableSBCC" :SBCCCombinedJson="tmpSBCCSet"></BtnCmdSettingsDialogue>
Expand Down Expand Up @@ -970,9 +970,9 @@ export default {
bSBCCInstalled: false,
showSBCCEdit: false,
tmpSBCCDef: {},
btnCmdVersion: '01.02.06',
btnCmdVersion: '01.02.07',
btnCmd : {
btnCmdVersion: '01.02.06',
btnCmdVersion: '01.02.07',
btnCmdIDUpdateRun: true,
systemSettings: {
lastID: 1,
Expand Down Expand Up @@ -1114,6 +1114,9 @@ export default {
inputControlVals: [],
inputControlRange:[],
inputControlSteps: 1,
inputIconAbove: '',
inputIconAboveSize: 25,
inputIconAboveColor: '',
bPanelActivated: false,
chartLabel: 'Custom Chart',
chartOMDataArr: [],
Expand Down
6 changes: 3 additions & 3 deletions src/BtnCmdPanelSettingsDialogue.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
</v-row> -->
<v-card-title>
<v-toolbar dark dense>
<v-toolbar-title>Edit Panel {{isCNCMode}}</v-toolbar-title>
<v-toolbar-title>Add / Edit Panel Type</v-toolbar-title>
<v-spacer></v-spacer>
<v-btn color="blue darken-1" text @click="validateData()">
<span v-if="passedObject.panelType == 'altwebcam' || passedObject.panelType == 'mmValue' || passedObject.panelType == 'txtLabel' || passedObject.panelType == 'vInput' || passedObject.panelType == 'BtnCmdChart'">Click to Enter Settings</span>
Expand Down Expand Up @@ -149,9 +149,9 @@
{text: 'Object Model Value', value: 'mmValue', disabled: false, hSize: 100, wSize: 300},
{text: 'Remote Source', value: 'remSrc', disabled: false, hSize: 145, wSize: 500},
{text: 'Speed', value: 'speed', disabled: false, hSize: 230, wSize: 320},
{text: 'Static Text / Label', value: 'txtLabel', disabled: false, hSize: 100, wSize: 300},
{text: 'Status Panel', value: 'status-panel', disabled: this.isCNCMode, hSize: 288, wSize: 534},
{text: 'Temperature Chart', value: 'temperature-chart', disabled: this.isCNCMode, hSize: 240, wSize: 280},
{text: 'Temperature Chart', value: 'temperature-chart', disabled: this.isCNCMode, hSize: 240, wSize: 280},
{text: 'Text / Icon / Blank', value: 'txtLabel', disabled: false, hSize: 100, wSize: 300},
{text: 'Tools', value: 'tools-panel', disabled: false, hSize: 235, wSize: 661},
{text: 'Custom Panel', value: 'custom', disabled: this.createMode, hSize: 250, wSize: 250},
Expand Down
4 changes: 2 additions & 2 deletions src/BtnCmdSettingsDialogue.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,12 +52,12 @@
<v-col cols="1">
<v-tooltip bottom>
<template v-slot:activator="{ on, attrs }">
<a v-bind="attrs" v-on="on" href="https://materialdesignicons.com/" target="_blank">
<a v-bind="attrs" v-on="on" href="https://pictogrammers.com/library/mdi/" target="_blank">
<v-icon v-if="passedObject.btnIcon.length>0" class="mr-1 pt-3">{{ passedObject.btnIcon }}</v-icon>
<v-icon v-if="passedObject.btnIcon.length==0" class="mr-1 pt-3">mdi-cog</v-icon>
</a>
</template>
<span>Go To https://materialdesignicons.com</span>
<span>Click to open Material Design Icons web page</span>
</v-tooltip>
</v-col>
</v-row>
Expand Down
4 changes: 2 additions & 2 deletions src/BtnCmdTabSettingsDialogue.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,12 +36,12 @@
<v-col cols="1">
<v-tooltip bottom>
<template v-slot:activator="{ on, attrs }">
<a v-bind="attrs" v-on="on" href="https://materialdesignicons.com/" target="_blank">
<a v-bind="attrs" v-on="on" href="https://pictogrammers.com/library/mdi/" target="_blank">
<v-icon v-if="passedObject.icon.length>0" class="mr-1 pt-3">{{ passedObject.icon }}</v-icon>
<v-icon v-if="passedObject.icon.length==0" class="mr-1 pt-3">mdi-cog</v-icon>
</a>
</template>
<span>Go To https://materialdesignicons.com</span>
<span>Click to open Material Design Icons web page</span>
</v-tooltip>
</v-col>
</v-row>
Expand Down
Loading

0 comments on commit 1b0c503

Please sign in to comment.