nodejs - 20.5.1
nodered - 4.0.5
uib - 7.0.4
Yes, ive tryed latest example and old one. Also trying different ways to combine old and one.
100% I'm missing something in front.
app.vue
<script setup lang="ts">
import { RouterView } from 'vue-router'
import SidebarMenu from '@/components/SidebarMenu.vue';
</script>
<template>
<div id="root">
<SidebarMenu class="sidebar" />
<RouterView class="router-view" />
</div>
</template>
<style scoped lang="scss">
#root {
display: grid;
grid-template-areas: 'sidebar router-view';
grid-template-columns: auto 1fr;
font-family: sans-serif;
}
.sidebar {
grid-area: 'sidebar';
}
.router-view {
grid-area: 'router-view';
padding: 1rem;
}
</style>
index.js
var app1 = new Vue({
el: '#app',
data: {
isonb: false,
isona: false,
isonc: false,
isond: false,
}, // --- End of data --- //
methods: {
// Called if one of the bulb icons is clicked
myClick: function (returnedData) {
// returnedData.srcId contains the element id, returnedData.event contains the click event object
console.log('Somebody clicked the ' + returnedData.srcId + ' icon!', returnedData)
var out
if (returnedData.srcId === 'a') {
out = this.isona = !this.isona
}
if (returnedData.srcId === 'b') {
out = this.isonb = !this.isonb
}
if (returnedData.srcId === 'c') {
out = this.isonc = !this.isonc
}
if (returnedData.srcId === 'd') {
out = this.isond = !this.isond
}
// Lets tell Node-RED
uibuilder.send({
'topic': returnedData.srcId.toUpperCase(),
'payload': out,
})
}, // -- End of myClick -- //
}, // --- End of methods --- //
// Get things started
mounted: function () {
/** **REQUIRED** Start uibuilder comms with Node-RED */
uibuilder.start()
// msg is updated when a standard msg is received from Node-RED
uibuilder.onChange('msg', function (msg) {
if (msg.payload.hasOwnProperty('A')) {
app1.isona = msg.payload.A
}
if (msg.payload.hasOwnProperty('B')) {
app1.isonb = msg.payload.B
}
if (msg.payload.hasOwnProperty('C')) {
app1.isonc = msg.payload.C
}
if (msg.payload.hasOwnProperty('D')) {
app1.isond = msg.payload.D
}
console.log('incoming msg', app1.isona, app1.isonb, app1.isonc, app1.isond, msg)
})
} // --- End of mounted hook --- //
}) // --- End of app1 --- //
routes.ts
import { RouteRecordRaw } from "vue-router"
import Home from "@/views/Home.vue"
const routes: Array<RouteRecordRaw> = [
{
path: '/',
component: Home,
},
{
path: '/light1',
component: () => import('@/views/Light1.vue'),
},
{
path: '/light2',
component: () => import('@/views/Light2.vue'),
},
{
path: '/vent',
component: () => import('@/views/Vent.vue'),
},
{
path: '/entertainment',
component: () => import('@/views/Entertainment.vue'),
},
]
export default routes
Light1.vue
<script setup lang="ts">
</script>
<template id="bulb-template">
<div id="floorplan" class="light1">
<bulb id="a" :color="isona ? 'red' : 'grey'" :glow="isona" :clickable="false" x="100" y="100" @bulbclicked="myClick"
title="A: This one does not respond to clicks">
<desc>Here we use a component slot to insert some more custom svg</desc>
</bulb>
<bulb id="b" :color="isonb ? 'red' : 'grey'" :glow="isonb" :clickable="true" x="270" y="120" @bulbclicked="myClick"
title="B">
<circle cx="50" cy="50" r="50" />
</bulb>
<bulb id="c" :ison="isonc" :clickable="true" x="650" y="120" @bulbclicked="myClick" title="C"></bulb>
<bulb id="d" :ison="isond" :clickable="true" x="250" y="270" @bulbclicked="myClick"
:title="'D: ' + (isond ? 'ON' : 'off')"></bulb>
</div>
</template>
<style scoped lang="scss">
.example-one {
background-color: #3a3451;
}
.light1 {
position: relative;
background: url("./1fl.svg") no-repeat;
background-size: 100% 100%;
background-color: #3a3451;
background-position: center center;
background-origin: content-box;
padding: 20px;
}
:root {
--warning-intense: hsl(
var(--warning-hue) 100% 50%
);
--failure-intense: hsl(
var(--failure-hue) 100% 50%
);
--surface5: hsl( /* additional background shade */
var(--brand-hue)
calc(100% * var(--surfaces-saturation))
calc(
100% * (var(--surfaces-lightness)
- (var(--surfaces-factor) * .20)
+ (var(--surfaces-factor) * var(--surfaces-bias)))
)
);
}
/* Bulb classes control look, colour and position */
.bulb { /* Default "off" class plus standard style */
z-index: 9999 !important; /* Bulbs HAVE to be in the top z-layer */
cursor: pointer;
position: absolute; /* allows exact positioning within the parent div */
transition: filter 2s ease-in-out 0s;
background-color: rgba(0, 0, 0, 0.001); /* transparent background */
filter: url("#shadow"); /* selects the shadow filter */
}
.bulb path {
fill: grey;
}
.bulb-warn { /* Standard "on" class */
filter: url('#glow'); /* selects the glow filter instead of shadow */
}
.bulb-warn path {
fill: var(--warning-intense);
}
.bulb-fail { /* Alternative "on" class with different colour */
filter: url('#glow');
}
.bulb-fail path {
fill: var(--failure-intense);
}
/* Bulb position classes, change as needed
* Positions are relative to the parent floorplan div
*/
.posn1 {
top: 100px; left: 100px;
}
.posn2 {
top: 120px; left: 270px;
}
.posn3 {
top: 120px; left: 650px;
}
.posn4 {
top: 270px; left: 250px;
}
</style>
main.ts
import { createApp } from 'vue'
import 'the-new-css-reset/css/reset.css'
import App from '@/App.vue'
import router from '@/router/index'
const app = createApp(App)
app.use(router)
app.mount('#app')
structure looks like
this
src
-App.vue
-env.d.ts
-index.css
-index.html
-index.js
-main.ts
src/components
-SidebarMenu.vue
src/router
-index.ts
-routes.ts
src/views
-1fl.svg
-Home.vue
-Light1.vue
-Light2.vue
-Vent.vue
-1fl.svg
