Need a little push on my OBD2 project

Good evening all NodRed-ians.
I am at a point where I need just a little push in the right direction from the community. What I have created is a flow to decode, request and interpret CAN communications from a vehicle. The goal here is to create a simple set of gauges with a user definable warning for each of those gauges. That warning would then trigger a GPIO to activate a warning light or relay to control a fan. That is for the end. Right now I have accomplished more than I could imagine. I am by no means a CS person, I am a mechanic with an idea. I am working on loading my flow so that those that are much smarter than I can chime in. All criticisms are welcomed and the more help I can generate here the better the end project will be to share with all. I am using a raspi4 and a usb CAN device. Everything comms wise works.

What i need help with is a way to get my gauges working. I started with UI builder as the examples I found could easily be tweaked for what I needed. I quickly got stuck on why it wont receive the data i am sending it. I am sure its something simple.
The next thing is converting some of the strings into tangible data has proven difficult. I have managed most of the easy ones, the rest needs someone to unlock the hidden gem for me.

This is my flow so far.


Great work and interesting !
I set up your flow to watch what you did.
I had to install node-red-contrib-uibuilder, node-red-contrib-socketcan, node-red-contrib-xterm to be able to visualize it better.

Unfortunately I don't use UI_Builder so I can't go further. However, I could see that you are making requests for a gas engine. Do you have any information about CANid's for electric cars?
Is the CAN device standard, like ODB2 found on Ali----ss?

Just one question, why don't you use node-red-dashboard nodes?
There are also gauges of all kinds.

Your project is very interesting. I will follow the thread with pleasure

I too am interested in this and will be following carefully.

OK, so I can see you are using the Simple Vue template. So firstly, which version of Vue do you have installed? You need vue@2 and bootstrap-vue for that to work. Assuming you got that far ...

Can you share your html and js files? Also, please check in your browsers dev tools console for any errors.

If you share an example string, I'm sure that the big brains in the forum will help :slight_smile:

Oh, also, did you see my recent response to someone about creating vanilla html gauges using the canvas-gauges library?

I started with the dashboard and ran into similar issues. I found a forum post from the gentlemen that built the ui_builder and decided to use that in hopes to gain assistance from current sources.

I will continue to update the readme on Github as time allows. Following the OBD wiki I was able to build the base to work from. The thought was once I got things stable and functioning I would then be able to move this from the bench to real world for in car testing to continue decoding those PIDs not currently found. Using the candump feature you should be able to filter returned data and from there decode and further filter data as needed.

I will add links to the devices used on the Github today as time allows.

Many thanks for the kind words.

1 Like

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'

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,
// 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
        title: msg.topic
<!doctype html>
<html lang="en">


    <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 / - no longer needed  -->
    <script defer src="../uibuilder/uibuilder.iife.min.js"></script>
    <script defer src=""></script>
    <script defer src="./index.js">
        /* OPTIONAL: Put your custom code in that */
    <!-- #endregion -->


<body class="uib">

    <h1>OBD2 Gauges</h1>

    <div id="more">
        <!-- '#more' is used as a parent for dynamic HTML content in examples -->

    <canvas id="gauge-radial-1"></canvas>

    <pre id="msg" class="syntax-highlight">CAN is Offline</pre>



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.

Hi. Actually, you've fallen foul of my development activities!

The error you are getting relates to a function uibuilder.syntaxHighlight that is only available in the v6.1 beta, not in the live v6.0. It is caused by this line in your index.js if (eMsg) eMsg.innerHTML = uibuilder.syntaxHighlight(msg) - if you don't need to show the incoming msg, simply get rid of that line and the line above it. If you do want that display, you need to pick up the syntaxHighlight function that is manually defined in previous templates.

Because that line is failing, the rest of the function is not executing which is why your gauge isn't updating as expected.

The clue is in the console output you shared - it references the line that is failing and you can even click on the link it provides and you will see the exact line of code that is failing.

I apologise for confusing you. I'm trying to focus on getting v6.1 completed and out the door at which point confusion should die down.

Yes sir, i played with that line before bed last night and that was when I decided to post for help. Writing this response I do remember now that you did mentioned v6.1 and this very thing, so no need to apologize.

And ladies and gentlemen we have a functioning and updating gauge.

CAN offline is still on screen, now to dig into why that is not updating. BUT, I will take this small win for the day.


edit: in excitement I posted without saying - removed the 2 lines at mentioned, saved and reloaded page.

1 Like

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.