Hi, I used an uibuilder node to show a table on a screen. I am new in html and I like to add some global.vars to the same screen. But that is to difficult for me to combine JavaScript and html.
I like to add something like <div class="timerText">{{msg.timerText}}</div> to the html file to show that variable on screen. But I don't know how to do that. Is there some help?
My css file looks like:
/* Load defaults from `<userDir>/node_modules/node-red-contrib-uibuilder/front-end/uib-brand.min.css`
* This version auto-adjusts for light/dark browser settings but might not be as complete.
*/
@import url("../uibuilder/uib-brand.min.css");
.timerText {
font-size: 100px;
}
/* OR, load the defaults from the older `<userDir>/node_modules/node-red-contrib-uibuilder/front-end/uib-styles.css` */
/* @import url("../uibuilder/uib-styles.css"); */
My html file looks like:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Scorebord</title>
<meta name="description" content="Node-RED UI Builder - VueJS + bootstrap-vue default template" />
<!-- <link rel="icon" href="./images/node-blue.ico" /> -->
<link type="text/css" rel="stylesheet" href="../uibuilder/vendor/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="../uibuilder/vendor/bootstrap-vue/dist/bootstrap-vue.css" />
<!-- Your own CSS -->
<link type="text/css" rel="stylesheet" href="./index.css" media="all" />
</head>
<body>
<h1>Scorebord</h1>
<div id="app" v-cloak>
<b-container id="app_container" class="mt-5">
<div class="mt-5">
<b-table striped hover small :items="items" ></b-table>
</div>
</b-container>
</div>
<!-- These MUST be in the right order. Note no leading / -->
<!-- REQUIRED: Socket.IO is loaded only once for all instances. Without this, you don't get a websocket connection -->
<script src="../uibuilder/vendor/socket.io/socket.io.js"></script>
<!-- Vendor Libraries - Load in the right order, use minified, production versions for speed -->
<script src="../uibuilder/vendor/vue/dist/vue.js"></script>
<!-- dev version with component compiler -->
<!-- <script src="../uibuilder/vendor/vue/dist/vue.min.js"></script> prod version with component compiler -->
<!-- <script src="../uibuilder/vendor/vue/dist/vue.runtime.min.js"></script> prod version without component compiler -->
<script src="../uibuilder/vendor/bootstrap-vue/dist/bootstrap-vue.js"></script>
<!-- Dev version -->
<!-- <script src="../uibuilder/vendor/bootstrap-vue/dist/bootstrap-vue.min.js"></script> Prod version -->
<!-- REQUIRED: Sets up Socket listeners and the msg object -->
<script src="./uibuilderfe.js"></script>
<!-- dev version -->
<!-- <script src="./uibuilderfe.min.js"></script> prod version -->
<!-- OPTIONAL: You probably want this. Put your custom code here -->
<script src="./index.js"></script>
</body>
</html>
my js file looks like:
/* jshint browser: true, esversion: 5, asi: true */
/*globals Vue, uibuilder */
// @ts-nocheck
/*
Copyright (c) 2021 Julian Knight (Totally Information)
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
"use strict";
/** @see https://totallyinformation.github.io/node-red-contrib-uibuilder/#/front-end-library */
// eslint-disable-next-line no-unused-vars
const app = new Vue({
el: "#app",
data() {
return {
items: [] // table data
};
}, // --- End of data --- //
computed: {}, // --- End of computed --- //
methods: {}, // --- End of methods --- //
// Available hooks: beforeCreate,created,beforeMount,mounted,beforeUpdate,updated,beforeDestroy,destroyed, activated,deactivated, errorCaptured
/** Called after the Vue app has been created. A good place to put startup code */
created: function () {
// Example of retrieving data from uibuilder
this.feVersion = uibuilder.get("version");
uibuilder.start();
}, // --- End of created hook --- //
/** Called once all Vue component instances have been loaded and the virtual DOM built */
mounted: function () {
//console.debug('[indexjs:Vue.mounted] app mounted - setting up uibuilder watchers')
// Start up uibuilder
var app = this; // Reference to `this` in case we need it for more complex functions
// If msg changes - msg is updated when a standard msg is received from Node-RED over Socket.IO
uibuilder.onChange("msg", function (msg) {
console.info('[indexjs:uibuilder.onChange] msg received from Node-RED server:', msg)
app.items = msg.payload; // save new table data from node-red in vue data items
});
}, // --- End of mounted hook --- //
}); // --- End of app1 --- //
// EOF
