trying (still) to make the transition to dashboard 2, found a vue playground and doing different layouts. That's when the world fell apart. I get one layout in the playground and a different one in node red using the same code copied and pasted between the two.
<template>
<v-container>
<v-col style="height: 150px; width: 300px; background-color: grey">
<v-row style="height: 150px; width: 300px">
<v-btn class="OneButton" stacked @click="Power_Off">
<v-icon class="iconBasic" ref="icon1">{{icon1}}</v-icon>
</v-btn>
</v-row>
</v-col>
<v-col style="height: 25px; width: 300px; background-color: grey">
<v-row style="height: 25px; width: 300px">
<v-btn class="a1" stacked @click="Power_Off">Test</v-btn>
<v-btn class="a1" stacked @click="Power_Off">Next</v-btn>
<v-btn class="a1" stacked @click="Power_Off">Text</v-btn>
</v-row>
</v-col>
<v-col style="height: 110px; width: 300px; background-color: grey">
<v-row style="height: 100px; width: 300px">
<v-btn class="a2" stacked @click="Power_Off">
<v-icon class="iconBasic" ref="icon1">{{icon1}}</v-icon>
</v-btn>
<v-btn class="a2" stacked @click="Power_Off">
<v-icon class="iconBasic" ref="icon2">{{icon2}}</v-icon>
</v-btn>
<v-btn class="a2" stacked @click="Power_Off">
<v-icon class="iconBasic" ref="icon3">{{icon3}}</v-icon>
</v-btn>
</v-row>
</v-col>
</v-container>
</template>
<style>
.OneButton {
background-color: black;
height: 80% !important;
width: 90% !important;
margin-top: 8px;
margin-bottom: 8px;
margin-left: 12px;
margin-right: 12px;
font-size: 60px;
color: #d7dbdd;
}
.TwoButton {
background-color: black;
height: 85% !important;
width: 75px !important;
margin-top: 8px;
margin-bottom: 8px;
margin-left: 4px;
margin-right: 4px;
font-size: 60px;
color: #d7dbdd;
}
.ThreeButton {
background-color: black;
height: 80% !important;
width: 75px !important;
margin-top: 6px !important;
margin-bottom: 6px !important;
margin-left: 12px !important;
margin-right: 12px !important;
font-size: 60px;
color: #d7dbdd;
}
.a1 {
background-color: black;
height: 25px !important;
width: 90px !important;
margin-bottom: 1px;
margin-left: 5px;
margin-right: 5px;
font-size: 16px;
color: white;
padding-bottom: 4px;
border-bottom: 2px solid #dd7f00;
}
.a2 {
background-color: black;
height: 100% !important;
width: 90px !important;
margin-top: 4px;
margin-bottom: 2px;
margin-left: 5px;
margin-right: 5px;
font-size: 60px;
color: #d7dbdd;
}
.iconBasic {
font-size: 45px;
}
.container {
display: flex;
width: 100%;
height: 100%;
background-color: #303030;
}
.centerme {
display: flex;
text-align: center;
justify-content: center;
align-items: center;
margin: 4px;
}
.roundme {
border: 2px solid black;
border-radius: 8px;
background-color: #222222;
box-shadow: inset 2px 2px 3px 4px rgba(0, 0, 0, 0.1);
background: rgb(5, 5, 5);
background: linear-gradient(135deg,
rgba(5, 5, 5, 1) 0%,
rgba(42, 42, 42, 1) 100%);
margin: 3px;
}
.roundme2 {
border: 2px solid black;
border-radius: 8px;
background-color: #222222;
box-shadow: inset 2px 2px 3px 4px rgba(0, 0, 0, 0.1);
background: rgb(5, 5, 5);
margin: 3px;
}
.blank {
border: #303030;
border-radius: 8px;
background-color: #303030;
box-shadow: inset 2px 2px 3px 4px #303030;
background: #303030;
background: linear-gradient(135deg, #303030 0%, #303030);
margin: 3px;
}
.b1 {
color: #6689a1;
height: 25px;
margin-bottom: 1px;
font-size: 16px;
padding-bottom: 4px;
border-bottom: 2px solid #dd7f00;
}
.b2 {
height: 100%;
margin-top: 1px;
font-size: 28px;
color: #d7dbdd;
}
.gradient-2 {
background: linear-gradient(135deg,
rgba(5, 5, 5, 1) 0%,
rgba(42, 42, 42, 1) 100%) padding-box,
linear-gradient(to right, #f16f0f, #f43700) border-box;
margin-top: 14px;
border-radius: 20px;
border: 6px solid transparent;
}
.red_color {
color: #ff0000;
}
.grey_color {
color: #444444;
}
.green_color {
color: #008000;
}
.blue_color {
color: #00daf4;
}
.otstatus {
padding-left: 6px;
padding-top: 2px;
font-size: 14px;
}
@keyframes fire {
from {
color: #ff5b33;
}
50% {
color: #ffac33;
}
to {
color: #ff5b33;
}
}
.on_fire {
animation-name: fire;
animation-duration: 2000ms;
animation-iteration-count: infinite;
}
@keyframes water {
from {
color: #add8e6;
}
50% {
color: #0000cd;
}
to {
color: #add8e6;
}
}
.on_water {
animation-name: water;
animation-duration: 2000ms;
animation-iteration-count: infinite;
}
</style>
<script>
export default {
data() {
return {
value: 'OFF',
icon1: 'mdi-bed',
icon2: 'mdi-cog',
icon3: 'mdi-album',
}
},
watch: {
msg: {
deep: true,
handler(newVal) {
if (newVal.payload === 'start') {
this.Power_On()
}
if (newVal.payload === 'stop') {
this.Power_Off()
}
if (newVal.payload === 'next') {
this.Power_Next()
}
},
},
},
methods: {
Power_Off: function () {
this.icon1 = 'mdi-cog'
this.$refs.icon1.$el.style.color = 'green'
this.$refs.icon1.$el.style.textShadow = '0px 0px 10px #BD9608'
this.$refs.icon2.$el.style.color = 'grey'
this.$refs.icon2.$el.style.textShadow = '0px 0px 10px #BD9608'
this.$refs.icon3.$el.style.color = 'grey'
this.$refs.icon3.$el.style.textShadow = '0px 0px 10px #BD9608'
this.send({ topic: 'Power', payload: 'Off' })
},
Power_On: function () {
this.icon1 = 'mdi-bed'
this.$refs.icon1.$el.style.color = 'grey'
this.$refs.icon1.$el.style.textShadow = '0px 0px 10px #BD9608'
this.$refs.icon2.$el.style.color = 'green'
this.$refs.icon2.$el.style.textShadow = '0px 0px 10px #BD9608'
this.$refs.icon3.$el.style.color = 'grey'
this.$refs.icon3.$el.style.textShadow = '0px 0px 10px #BD9608'
this.send({ topic: 'Power', payload: 'On' })
},
Power_Next: function () {
this.$refs.icon1.$el.style.color = 'grey'
this.$refs.icon1.$el.style.textShadow = '0px 0px 10px #BD9608'
this.$refs.icon2.$el.style.color = 'grey'
this.$refs.icon2.$el.style.textShadow = '0px 0px 10px #BD9608'
this.$refs.icon3.$el.style.color = 'green'
this.$refs.icon3.$el.style.textShadow = '0px 0px 10px #BD9608'
this.send({ topic: 'Power', payload: 'Next' })
},
},
}
</script>
is there any logical explanation or is the universe just stacked against me?
Thanks
[edit] top is the playground image, bottom is the node red image
[edit 2] url of playground https://play.vuetifyjs.com/
