Skip to content

Commit 1b0c503

Browse files
MintyTreborMintyTrebor
authored
updates for 01.02.07
Added ability to add icons to input and text panels - user can set size an color of icons Fixed non critical js bugs
1 parent 544092c commit 1b0c503

11 files changed

+215
-77
lines changed

‎src/BtnCmdColPickDialogue.vue

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -72,6 +72,9 @@
7272
if(this.colField == "ChartLineColor"){
7373
this.passedObject.OMColor = this.currColor;
7474
}
75+
if(this.colField == "inputIconAboveColor"){
76+
this.passedObject.inputIconAboveColor = this.currColor;
77+
}
7578
this.$emit('exit', true);
7679
this.show = false;
7780
return;
@@ -90,6 +93,9 @@
9093
if(this.colField == "ChartLineColor"){
9194
this.currColor = this.passedObject.OMColor;
9295
}
96+
if(this.colField == "inputIconAboveColor"){
97+
this.currColor = this.passedObject.inputIconAboveColor;
98+
}
9399
}
94100
}
95101
</script>

‎src/BtnCmdDataFunctions.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -151,6 +151,10 @@ export default {
151151
inputControlVals: [],
152152
inputControlRange:[],
153153
inputControlSteps: 1,
154+
inputIconAbove: '',
155+
inputIconAboveSize: 25,
156+
inputIconAboveColor: 'normal',
157+
inputIconAboveColor: '',
154158
bPanelActivated: false,
155159
chartLabel: 'Custom Chart',
156160
chartOMDataArr: [],

‎src/BtnCmdMMPanel.vue

Lines changed: 70 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,59 +1,79 @@
11
<template>
22
<div>
3-
<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%">
3+
<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%">
44
<v-row align="center" style="height: 100%; width: 100%" class="pa-0 ma-0">
5-
<v-card-text v-if="passedObject.panelMMOrientation == 'V'" class="text-center pa-0 ma-0" align="center">
6-
<v-row dense>
7-
<v-col class="d-flex flex-column pa-0 ma-0">
8-
<strong :style="'color: ' + passedObject.panelMMPrefixColor" :class="`text-${passedObject.panelMMTextSize}`">
9-
{{ passedObject.panelMMPrefix }}
10-
</strong>
11-
</v-col>
12-
</v-row>
13-
<v-row v-if="passedObject.panelType == 'mmValue'" dense>
14-
<v-col class="d-flex flex-column pa-0 ma-0">
15-
<span :style="'color: ' + passedObject.panelMMValueColor" :class="`text-${passedObject.panelMMTextSize}`">
16-
{{ matchedMMVal }}
17-
</span>
18-
</v-col>
19-
</v-row>
20-
</v-card-text>
21-
<v-card-text v-else class="text-center pa-0 ma-0">
22-
<v-row dense justify="center" align="center">
23-
<v-col class="d-flex flex-column pa-0 ma-0" justify="center" align="center">
24-
<strong :style="'color: ' + passedObject.panelMMPrefixColor" :class="`text-${passedObject.panelMMTextSize}`" justify="center" align="center">
25-
{{ passedObject.panelMMPrefix }}
26-
</strong>
27-
</v-col>
28-
<v-col v-if="passedObject.panelType == 'mmValue'" class="d-flex flex-column pa-0 ma-0">
29-
<span :style="'color: ' + passedObject.panelMMValueColor" :class="`text-${passedObject.panelMMTextSize}`">
30-
{{ matchedMMVal }}
31-
</span>
32-
</v-col>
33-
</v-row>
34-
</v-card-text>
5+
<v-card-text v-if="passedObject.panelMMOrientation == 'V'" class="text-center pa-0 ma-0" align="center">
6+
<v-row v-if="passedObject.inputIconAbove" justify="center" align="center" class="d-flex pa-0 ma-0">
7+
<v-col cols="12" justify="center">
8+
<v-layout column align-center><span justify="center"><v-icon :size="passedObject.inputIconAboveSize" :color="passedObject.inputIconAboveColor">{{ passedObject.inputIconAbove }}</v-icon></span></v-layout>
9+
</v-col>
10+
</v-row>
11+
<v-row dense>
12+
<v-col class="d-flex flex-column pa-0 ma-0">
13+
<strong :style="'color: ' + passedObject.panelMMPrefixColor" :class="`text-${passedObject.panelMMTextSize}`">
14+
{{ passedObject.panelMMPrefix }}
15+
</strong>
16+
</v-col>
17+
</v-row>
18+
<v-row v-if="passedObject.panelType == 'mmValue'" dense>
19+
<v-col class="d-flex flex-column pa-0 ma-0">
20+
<span :style="'color: ' + passedObject.panelMMValueColor" :class="`text-${passedObject.panelMMTextSize}`">
21+
{{ matchedMMVal }}
22+
</span>
23+
</v-col>
24+
</v-row>
25+
</v-card-text>
26+
<v-card-text v-else class="text-center pa-0 ma-0">
27+
<v-row v-if="passedObject.inputIconAbove" justify="center" align="center" class="d-flex pa-0 ma-0">
28+
<v-col cols="12" justify="center">
29+
<v-layout column align-center><span justify="center"><v-icon :size="passedObject.inputIconAboveSize" :color="passedObject.inputIconAboveColor">{{ passedObject.inputIconAbove }}</v-icon></span></v-layout>
30+
</v-col>
31+
</v-row>
32+
<v-row dense justify="center" align="center">
33+
<v-col class="d-flex flex-column pa-0 ma-0" justify="center" align="center">
34+
<strong :style="'color: ' + passedObject.panelMMPrefixColor" :class="`text-${passedObject.panelMMTextSize}`" justify="center" align="center">
35+
{{ passedObject.panelMMPrefix }}
36+
</strong>
37+
</v-col>
38+
<v-col v-if="passedObject.panelType == 'mmValue'" class="d-flex flex-column pa-0 ma-0">
39+
<span :style="'color: ' + passedObject.panelMMValueColor" :class="`text-${passedObject.panelMMTextSize}`">
40+
{{ matchedMMVal }}
41+
</span>
42+
</v-col>
43+
</v-row>
44+
</v-card-text>
3545
</v-row>
3646
</v-card>
37-
<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%">
47+
<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%">
3848
<v-row align="center" style="height: 100%; width: 100%" class="pa-0 ma-0">
39-
<v-card-text v-if="passedObject.panelMMOrientation == 'V'" class="text-center pa-0 ma-0" align="center">
40-
<v-row v-if="passedObject.panelType == 'mmValue'" dense>
41-
<v-col class="d-flex flex-column pa-0 ma-0">
42-
<span :style="'color: ' + passedObject.panelMMValueColor" :class="`text-${passedObject.panelMMTextSize}`">
43-
{{ matchedMMVal }}
44-
</span>
45-
</v-col>
46-
</v-row>
47-
</v-card-text>
48-
<v-card-text v-else class="text-center pa-0 ma-0">
49-
<v-row dense>
50-
<v-col v-if="passedObject.panelType == 'mmValue'" class="d-flex flex-column pa-0 ma-0">
51-
<span :style="'color: ' + passedObject.panelMMValueColor" :class="`text-${passedObject.panelMMTextSize}`">
52-
{{ matchedMMVal }}
53-
</span>
54-
</v-col>
55-
</v-row>
56-
</v-card-text>
49+
<v-card-text v-if="passedObject.panelMMOrientation == 'V'" class="text-center pa-0 ma-0" align="center">
50+
<v-row v-if="passedObject.inputIconAbove" justify="center" align="center" class="d-flex pa-0 ma-0">
51+
<v-col cols="12" justify="center">
52+
<v-layout column align-center><span justify="center"><v-icon :size="passedObject.inputIconAboveSize" :color="passedObject.inputIconAboveColor">{{ passedObject.inputIconAbove }}</v-icon></span></v-layout>
53+
</v-col>
54+
</v-row>
55+
<v-row v-if="passedObject.panelType == 'mmValue'" dense>
56+
<v-col class="d-flex flex-column pa-0 ma-0">
57+
<span :style="'color: ' + passedObject.panelMMValueColor" :class="`text-${passedObject.panelMMTextSize}`">
58+
{{ matchedMMVal }}
59+
</span>
60+
</v-col>
61+
</v-row>
62+
</v-card-text>
63+
<v-card-text v-else class="text-center pa-0 ma-0">
64+
<v-row v-if="passedObject.inputIconAbove" justify="center" align="center" class="d-flex pa-0 ma-0">
65+
<v-col cols="12" justify="center">
66+
<v-layout column align-center><span justify="center"><v-icon :size="passedObject.inputIconAboveSize" :color="passedObject.inputIconAboveColor">{{ passedObject.inputIconAbove }}</v-icon></span></v-layout>
67+
</v-col>
68+
</v-row>
69+
<v-row dense>
70+
<v-col v-if="passedObject.panelType == 'mmValue'" class="d-flex flex-column pa-0 ma-0">
71+
<span :style="'color: ' + passedObject.panelMMValueColor" :class="`text-${passedObject.panelMMTextSize}`">
72+
{{ matchedMMVal }}
73+
</span>
74+
</v-col>
75+
</v-row>
76+
</v-card-text>
5777
</v-row>
5878
</v-card>
5979
</div>

‎src/BtnCmdMMPanelDialogue.vue

Lines changed: 46 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,35 @@
3131
</v-tooltip>
3232
</v-col>
3333
</v-row>
34+
<v-row dense>
35+
<v-col cols="7">
36+
<v-tooltip bottom>
37+
<template v-slot:activator="{ on, attrs }">
38+
<v-text-field v-bind="attrs" v-on="on" label="Top Icon [mdi-*]" v-model="passedObject.inputIconAbove" placeholder="mdi-"></v-text-field>
39+
</template>
40+
<span>Material design icon name (Format = mdi-[icon name])</span>
41+
</v-tooltip>
42+
</v-col>
43+
<v-col cols="1">
44+
<v-tooltip bottom>
45+
<template v-slot:activator="{ on, attrs }">
46+
<a v-bind="attrs" v-on="on" href="https://pictogrammers.com/library/mdi/" target="_blank">
47+
<v-icon v-if="passedObject.inputIconAbove" class="mr-1 pt-3">{{ passedObject.inputIconAbove }}</v-icon>
48+
<v-icon v-else class="mr-1 pt-3">mdi-cog</v-icon>
49+
</a>
50+
</template>
51+
<span>Click to open Material Design Icons web page</span>
52+
</v-tooltip>
53+
</v-col>
54+
<v-col cols="4">
55+
<v-tooltip bottom>
56+
<template v-slot:activator="{ on, attrs }">
57+
<v-text-field v-bind="attrs" v-on="on" label="Icon Size" v-model="passedObject.inputIconAboveSize" placeholder="25" number></v-text-field>
58+
</template>
59+
<span>Size (num [def=25])</span>
60+
</v-tooltip>
61+
</v-col>
62+
</v-row>
3463
<v-row dense v-if="passedObject.panelType == 'mmValue'" >
3564
<v-col cols="11">
3665
<v-tooltip bottom>
@@ -117,6 +146,22 @@
117146
</v-tooltip>
118147
</v-col>
119148
</v-row>
149+
<v-row v-if="passedObject.inputIconAbove">
150+
<v-col>
151+
<v-row dense><v-col><span style="font-weight: bold">Icon Colour</span></v-col></v-row>
152+
</v-col>
153+
<v-col>
154+
<v-tooltip bottom>
155+
<template v-slot:activator="{ on, attrs }">
156+
<v-row dense>
157+
<v-col align-self="center"><v-icon @click="setColor('inputIconAboveColor')" v-on="on" :color="passedObject.inputIconAboveColor">{{ passedObject.inputIconAbove }}</v-icon></v-col>
158+
<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>
159+
</v-row>
160+
</template>
161+
<span>Click to edit icon colour</span>
162+
</v-tooltip>
163+
</v-col>
164+
</v-row>
120165
<v-row>
121166
<v-col cols="12">
122167
<v-tooltip bottom>
@@ -207,7 +252,7 @@
207252
this.alertReqVal = false;
208253
}
209254
}else if (this.passedObject.panelType != 'mmValue'){
210-
if(this.passedObject.panelMMPrefix) {
255+
if(this.passedObject.panelMMPrefix || this.passedObject.inputIconAbove) {
211256
//req fields met so exit
212257
this.passedObject.panelMMPath = this.tmpModelPath;
213258
this.$emit('exit', true);

‎src/BtnCmdMainPanel.vue

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -421,7 +421,7 @@
421421
<a href="https://www.npmjs.com/package/vuedraggable" target="_blank">vuedraggable</a><br>
422422
Plus re-uses components and code from <strong>DWC</strong>.<br>
423423
<a href="https://github.com/MintyTrebor/BtnCmd/wiki" target="_blank">BtnCmd Wiki</a><br>
424-
<a href="https://materialdesignicons.com/" target="_blank">Material Design Icon Library</a><br>
424+
<a href="https://pictogrammers.com/library/mdi/" target="_blank">Material Design Icon Library</a><br>
425425
</v-alert>
426426
</v-row>
427427
<BtnCmdSettingsDialogue v-if="showEdit" v-model="showEdit" :passedObject="objectToPass" :bMQTT="btnCmd.globalSettings.enableMQTT" :enableSBCC="btnCmd.globalSettings.enableSBCC" :SBCCCombinedJson="tmpSBCCSet"></BtnCmdSettingsDialogue>
@@ -970,9 +970,9 @@ export default {
970970
bSBCCInstalled: false,
971971
showSBCCEdit: false,
972972
tmpSBCCDef: {},
973-
btnCmdVersion: '01.02.06',
973+
btnCmdVersion: '01.02.07',
974974
btnCmd : {
975-
btnCmdVersion: '01.02.06',
975+
btnCmdVersion: '01.02.07',
976976
btnCmdIDUpdateRun: true,
977977
systemSettings: {
978978
lastID: 1,
@@ -1114,6 +1114,9 @@ export default {
11141114
inputControlVals: [],
11151115
inputControlRange:[],
11161116
inputControlSteps: 1,
1117+
inputIconAbove: '',
1118+
inputIconAboveSize: 25,
1119+
inputIconAboveColor: '',
11171120
bPanelActivated: false,
11181121
chartLabel: 'Custom Chart',
11191122
chartOMDataArr: [],

‎src/BtnCmdPanelSettingsDialogue.vue

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
</v-row> -->
1313
<v-card-title>
1414
<v-toolbar dark dense>
15-
<v-toolbar-title>Edit Panel {{isCNCMode}}</v-toolbar-title>
15+
<v-toolbar-title>Add / Edit Panel Type</v-toolbar-title>
1616
<v-spacer></v-spacer>
1717
<v-btn color="blue darken-1" text @click="validateData()">
1818
<span v-if="passedObject.panelType == 'altwebcam' || passedObject.panelType == 'mmValue' || passedObject.panelType == 'txtLabel' || passedObject.panelType == 'vInput' || passedObject.panelType == 'BtnCmdChart'">Click to Enter Settings</span>
@@ -149,9 +149,9 @@
149149
{text: 'Object Model Value', value: 'mmValue', disabled: false, hSize: 100, wSize: 300},
150150
{text: 'Remote Source', value: 'remSrc', disabled: false, hSize: 145, wSize: 500},
151151
{text: 'Speed', value: 'speed', disabled: false, hSize: 230, wSize: 320},
152-
{text: 'Static Text / Label', value: 'txtLabel', disabled: false, hSize: 100, wSize: 300},
153152
{text: 'Status Panel', value: 'status-panel', disabled: this.isCNCMode, hSize: 288, wSize: 534},
154-
{text: 'Temperature Chart', value: 'temperature-chart', disabled: this.isCNCMode, hSize: 240, wSize: 280},
153+
{text: 'Temperature Chart', value: 'temperature-chart', disabled: this.isCNCMode, hSize: 240, wSize: 280},
154+
{text: 'Text / Icon / Blank', value: 'txtLabel', disabled: false, hSize: 100, wSize: 300},
155155
{text: 'Tools', value: 'tools-panel', disabled: false, hSize: 235, wSize: 661},
156156
{text: 'Custom Panel', value: 'custom', disabled: this.createMode, hSize: 250, wSize: 250},
157157

‎src/BtnCmdSettingsDialogue.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -52,12 +52,12 @@
5252
<v-col cols="1">
5353
<v-tooltip bottom>
5454
<template v-slot:activator="{ on, attrs }">
55-
<a v-bind="attrs" v-on="on" href="https://materialdesignicons.com/" target="_blank">
55+
<a v-bind="attrs" v-on="on" href="https://pictogrammers.com/library/mdi/" target="_blank">
5656
<v-icon v-if="passedObject.btnIcon.length>0" class="mr-1 pt-3">{{ passedObject.btnIcon }}</v-icon>
5757
<v-icon v-if="passedObject.btnIcon.length==0" class="mr-1 pt-3">mdi-cog</v-icon>
5858
</a>
5959
</template>
60-
<span>Go To https://materialdesignicons.com</span>
60+
<span>Click to open Material Design Icons web page</span>
6161
</v-tooltip>
6262
</v-col>
6363
</v-row>

‎src/BtnCmdTabSettingsDialogue.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -36,12 +36,12 @@
3636
<v-col cols="1">
3737
<v-tooltip bottom>
3838
<template v-slot:activator="{ on, attrs }">
39-
<a v-bind="attrs" v-on="on" href="https://materialdesignicons.com/" target="_blank">
39+
<a v-bind="attrs" v-on="on" href="https://pictogrammers.com/library/mdi/" target="_blank">
4040
<v-icon v-if="passedObject.icon.length>0" class="mr-1 pt-3">{{ passedObject.icon }}</v-icon>
4141
<v-icon v-if="passedObject.icon.length==0" class="mr-1 pt-3">mdi-cog</v-icon>
4242
</a>
4343
</template>
44-
<span>Go To https://materialdesignicons.com</span>
44+
<span>Click to open Material Design Icons web page</span>
4545
</v-tooltip>
4646
</v-col>
4747
</v-row>

0 commit comments

Comments
 (0)