Node Red Dashboard Template Buttons Big Update

Peter ScargillGeneral14 Comments on Node Red Dashboard Template Buttons Big Update
Custom Node-Red Buttons

Given a Node-Red flow – just an empty one for testing if you like…… add these two template nodes – the first is some CSS and JS which you can use for any buttons on the page – the second depicts test buttons without and with images. Sizes and colours here are just my choice but let’s get into that later.. my gracious thanks to Petslane for a fix to an original issue with high speed button pressing… see the accompanying short video. Near the END of this blog entry you will see that things are coming along nicely. 

<style>

:root {
    --myHighlight:url('');
}

.filled { 
      height: 100% !important;
      padding: 0 !important;
      margin: 0 !important;
  }
  
.filled { 
      height: 100% !important;
      padding: 0 !important;
      margin: 0 !important;
      //background-color: transparent !important;
  }
   
.nr-dashboard-template {
      padding: 0;
      margin: 0;
  }
  
.rounded {
    border-radius: 10px 10px 10px 10px;
    font-size: 18px;
}
 
.highlight {
    background-color: yellow !important;
}

.images {
    background-size: 100% 100%;
    background-repeat: no-repeat; 
    }
    
.highlight-image {
    background-image: var(--myHighlight) !important;
}

</style>

<script>
$('.vibrate').on('click', function() {
  navigator.vibrate(80);
});

$('.touched').on('mousedown', function() {
$(this).addClass('highlight');
setTimeout(() => $(this).removeClass('highlight'), 100);
});
    
$('.touched-image').on('mousedown', function() {
$(this).addClass('highlight-image');
setTimeout(() => $(this).removeClass('highlight-image'), 200);
});
    
</script>

Test Buttons

<md-button class="vibrate filled touched rounded" 
   style="background-color:#aa0000" 
    ng-click="send({payload: 'on'})"> 
    On
</md-button>
 
<button class="not-filled vibrate touched-image images" 
  style="--myHighlight:url('/myicons/frost.png'); 
        background-image: url('/myicons/heat1.png'); 
        border:0; outline:0; color: white; 
        text-transform: uppercase; font-weight: bold; 
        font-size: 80%" 
  ng-click="send({payload: 'on'})"> 
    Auto
</button>

The second part of the above code shows two versions of a button… both will give you MUCH better buttons than the standard ones – they will have tactile feedback and decent colour change or image change on press. I wrote about this a couple of years ago and sadly didn’t document the code and there was a speed problem which is now history… the buttons work a TREAT when you press them, the colour ones changing to yellow (you can of course change that) instantly then back on release to the original colour.

The second, image-based button changes image as needed on pressing. My ONLY current gripe with that second button (which does not use the md-button tpye as I was getting background effects on hover) is that I’ve not yet figured out how to get the font info, border and outline back into the first template which would make the button description less messy, hopefully someone can help. Maybe make a ps-button based on button or something of that order?

I’m now experimenting with Bigtimer, manual override and the Dashboard contributed LED with different colours for on, off, auto (one of two states, auto on and auto off) and it’s all working a treat. Much simpler than using Blynk and of course not requiring an external service (yes, I know you could use a local Blynk server). I’ve also just clicked in my head that of coures you can put far more than just “payload” into the button output and I’m also now outputting “topic”.

Enjoy – Here are two sample images, just randomly picked for testing.

NOW – right now as I could not use md_buttons because of some highlighting issue, I’ve used buttons – but that means each button has some CSS in it like border:0 and outline:0, text etc. I’d really rather have that info in the first template – is it possible to create something based on button – called ps-button which could contain that border and other info without affecting other buttons? Suggestions urgently required please – I can’t get my head around that.


And HERE – VERY PRELIMINARY because it is 3am – and because I can’t yet figure out how to add haptic feedback to the standard Dashboard SWITCH node.. here is the current state of my actual control system… I’ve added an EDIT mode as I found myself acidentally turning things on or off…. get a look at THIS… coming along nicely… I need to change the default title from Node-Red Dashboard to Pete’s dashboard…

The new control dashboard - no more Blynk

14 thoughts on “Node Red Dashboard Template Buttons Big Update”

  3. Pete, please share a basic demo flow, instead of just the buttons code… i added those code to 2 template nodes (and there are different ones, of course the correct one is the one in the dashboard ui section), connected both outputs to a debug node, and that’s it, seem to work now 🙂

    1. The basic flow has nothing ut the two templates, demonstrating they work… nothing else. I know from other tests that msg.payload works when you press them.

  4. Nice! I was able to take the example On and Off buttons from your earlier postings and wire them to an MQTT publish node to control one of my Tasmota smart plugs. Makes for an interesting compare/contrast with MQTT Dash, which I use on my Android phone and tablets currently. The haptic feedback is a nice touch — pun intended!
    I still need to work on understanding the code, but it beats trying to develop an alternative dashboard from scratch. Thanks to all of you!

  5. NEARY THERE – using a CSS VARIABLE (I’ll document it shortly) a helper (Aidan) and I finally got the highlight image defined in the button…. the only thing left to resolve, given a round button, is the damned default highlight colour around the corners – how to stop or remove that…. ideas please…

  6. So NOW I’m experimenting – backgrounds work.. a crude attempt at images almost works – I need to get the highlighted image out of the style node and have it passed to the style node by the button node. I also have a slightly annoying background highlight on touch which I didn’t put in which needs removing somehow when using images… and yes I know I could make the style node…

    Ideas, Petslane?

    and the button..


    On

  7. line 31: get current background color so I can restore it later
    line 32: set new background color
    line 34: after 200ms, set background color to whatever it was on line 31

    doing 2 clicks:
    – 1 click gets current color (#c0392b)
    – 1 click sets color to yellow
    – 2 click gets current color (yellow) — problem
    – 2 click sets color to yellow
    – 1 click timeouts and sets color back to #c0392b
    – 2 click timeouts and sets color back to yellow — problem

    I suggest you to create class that would set background color to yellow and add and remove that class to button.

    example code, not tested (create highlight class also):
    “`
    $(‘.touched’).on(‘mousedown’, function() {
    $(this).addClass(‘highlight’);
    setTimeout(() => $(this).removeClass(‘highlight’), 200);
    navigator.vibrate(100);
    });
    “`

    ps, mousedown event currently gives you feedback, but mousedown does not always mean click. for example if mousedown was on button and mouse moved outside of button and then button was released, then you get false feedback as there was no click event.

    1. TEST, TEST, TEST, TEST, TEST, TEST, TEST, TEST, TEST, TEST, TEST, TEST, TEST, TEST, TEST, TEST, TEST, TEST, TEST, TEST, TEST, TEST, TEST, TEST, TEST

      Just testing, I suspect this allows XSS
      “`

      alert(‘Hello World!’);

      “`
      or maybe not… but something fishy with `-s

      <= test

      alert(“test”);

    2. Hi Peeter…. Kind of (sometime I’m a little slow at first picking up someon elses ideas)… could you copy the code and maybe paste the modified version in here – or even in an email to me pete at scargill dot org. If it solves the problem – I’ll bin the question and give full credit.

        1. Workin, blog updated, buttons in operatio. Now to check my original blog for the image version of them. Lovely and thank you.

  8. line 31: get current background color so I can restore it later
    line 32: set new background color
    line 34: after 200ms, set background color to whatever it was on line 31

    doing 2 clicks:
    – 1 click gets current color (#c0392b)
    – 1 click sets color to yellow
    – 2 click gets current color (yellow) <- problem
    – 2 click sets color to yellow
    – 1 click timeouts and sets color back to #c0392b
    – 2 click timeouts and sets color back to yellow $(this).removeClass(‘highlight’), 200);
    navigator.vibrate(100);
    });
    “`

    ps, mousedown event currently gives you feedback, but mousedown does not always mean click. for example if mousedown was on button and mouse moved outside of button and then button was released, then you get false feedback as there was no click event.

Comments are closed.