Thank you for chiming in, the post you refer to was what lead me to the ui_builder. I was using the dashboard until reading something you wrote about hitting limitations quick. I then decided it would be worth my time to learn more about the ui side and what kind of code it takes. Ultimately I would like a beautiful set of gauges and the ability to make them so on my own.
I used the code you posted in the other thread and played with things until I was able to get it read what I wanted.
// @ts-nocheck
'use strict'
// https://github.com/Mikhus/canvas-gauges
var gauge = new RadialGauge({
renderTo: 'gauge-radial-1',
highlights: [
{ "from": 0, "to": 6000, "color": "rgba(0,255,0)" },
{ "from": 6000, "to": 6500, "color": "rgba(255,255,0)" },
{ "from": 6500, "to": 7000, "color": "rgba(255,0,0)" }
],
width: 300,
height: 300,
units: "RPM",
minValue: 0,
maxValue: 7000,
majorTicks: [0, 1000, 2000, 3000, 4000, 5000, 6000, 7000],
minorTicks: 10,
strokeTicks: true,
colorPlate: "#fff",
borderShadowWidth: 0,
borders: false,
needleType: "arrow",
needleWidth: 2,
needleCircleSize: 7,
needlCircleOuter: true,
needleCircleInner: false,
animationDuration: 1500,
animationRule: "linear",
valueBox: true,
valueInt: 2,
valueDec: 2,
}).draw()
// var gauge = new LinearGauge({
// renderTo: 'gauge-radial-1'
// }).draw()
// Listen for incoming messages from Node-RED
uibuilder.onChange('msg', function (msg) {
// Dump the msg as text to the "msg" html element
const eMsg = $('#msg')
if (eMsg) eMsg.innerHTML = uibuilder.syntaxHighlight(msg)
gauge.value = msg.payload
gauge.update({
title: msg.topic
})
})
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>OBD2 Gauges</title>
<meta name="description" content="Node-RED uibuilder - Canvas Gauges Example">
<link rel="icon" href="./images/node-blue.ico">
<!-- Your own CSS (defaults to loading uibuilders css)-->
<link type="text/css" rel="stylesheet" href="./index.css" media="all">
<!-- #region Supporting Scripts. These MUST be in the right order. Note no leading / - socket.io no longer needed -->
<script defer src="../uibuilder/uibuilder.iife.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/canvas-gauges@2.1.7/gauge.min.js"></script>
<script defer src="./index.js">
/* OPTIONAL: Put your custom code in that */
</script>
<!-- #endregion -->
</head>
<body class="uib">
<h1>OBD2 Gauges</h1>
<div id="more">
<!-- '#more' is used as a parent for dynamic HTML content in examples -->
</div>
<canvas id="gauge-radial-1"></canvas>
<pre id="msg" class="syntax-highlight">CAN is Offline</pre>
</body>
</html>
In using the dev tools I do see an error every second, currently injecting the RPM request every second. So I believe the error lies in the data passed into the ui_builder node. As soon as I stop the RPM request the error counter stops. I try looking at the dev screen to determine where the error lies.
Oh dang, maybe its the vue version, going to update that and see if it makes a difference. But screenshot of the dev screen attached.
Thank you so much for taking the time to help
edit: vue version is up to date - no change to error counter.
