How to set Dashboard Slider to send one value on mouse release?

Dashboard
1

Hey, I want to use Dashboard Slider as brightness controller of my lamps but it generates too many messages while sliding and thus my Yeelight Bulbs block themselves for few minutes.

Is there a way to set a Slider so it only sends one message at mouse release? Colour pallet already has this option: send one value when released.

I have also tried a few different ways to throttle this flow but I always end up with the first message instead of the last one. Is there a way to collect all messages and if no new message is sent for a given time send the last from the array?

1 Like
2

The trigger node can send the last message received.
Send null - extend timeout if new input received - send last value of payload.

3

Another option would be to use the Dashboard template to create your own slider and use ng-mouseup to send the message so it will only output on release :grinning::

  <md-content layout="row" layout-padding style="overflow: hidden; padding: 0px;">
    <md-slider-container flex style="padding: 0px; height: 48px">
      <label>My slider</label>
      <md-slider ng-model="msg.payload" min="0" max="100" aria-label="volume" id="volume-slider" class="md-accent" ng-mouseup="send(msg)" md-range></md-slider>
      <md-input-container>
      </md-input-container>
    </md-slider-container>
  </md-content>
4

@dceejay Thank you, I have learned something new and it's my solution for now.
@hugobox It's what I am looking for. Is there an easy way to set style to my dashboard's style? I have tried with different classes but it did not work.

5

The easiest is to manually change the colors in CSS, but I don't know how to point it to the Dashboard theme color yet.

<style>
#slider1 .md-default-theme .md-thumb:after, #slider1 .md-thumb:after{
    background-color: white !important;
    border-color: {{msg.color}} !important;
}
#slider1 .md-focus-thumb, #slider1 .md-track-fill{
    background-color: {{msg.color}};
}
</style>
6

And is there an option to send(msg) on "touchup" or something? ng-touchend?

7

I don't think there's an easy way to get touchend unfortunately.

8

Ok, thank you very much :slight_smile:

9

looks like the md-slider md-discrete mode may do what we want.... will investigate (albeit the look changes slightly) (see Rating/5 section of the demos - https://material.angularjs.org/1.0.0/demo/slider )

10

Not sure how complicated it would be to integrate this slider library in NR Dashboard but it looks very powerful and complete:

https://refreshless.com/nouislider/

11

Great! Please, keep me updated. I am currently using the Trigger and learning JS in the mean time.

12

pushed a version to dashboard master - as 2.10.1-beta
The discrete option does indeed only send on release so hopefully we're in the ballpark.

13

@hugobox - feel free to give the new build your own ui widget capability of v2.10 a go :slight_smile: - https://github.com/node-red/node-red-dashboard/wiki/Creating-New-Dashboard-Widgets

1 Like
14

I have just tested current master and it's not working for me. Changing output settings does not change the behaviour of the slider.
Can I somehow help with debugging it? I have checked the element with inspector and confirmed that md-discreate is there:

<md-slider ng-if="me.item.outs==='end'" md-discrete="" flex="100" min="0" max="10" step="1" ng-model="me.item.value" aria-label="slider" ng-change="me.valueChanged(10)" style="z-index: 1; touch-action: none; min-width: 32px;" ng-attr-md-vertical="{{ (me.item.width < me.item.height) || undefined}}" class="ng-pristine ng-untouched ng-valid ng-scope ng-isolate-scope flex-100 ng-not-empty" role="slider" aria-valuenow="8" aria-valuemin="0" aria-valuemax="10" aria-invalid="false"><div class="md-slider-wrapper" tabindex="0" style="touch-action: pan-y;"><div class="md-slider-content"><div class="md-track-container"><div class="md-track"></div><div class="md-track md-track-fill" style="width: 80%;"></div><div class="md-track-ticks"></div></div><div class="md-thumb-container" style="left: 80%;"><div class="md-thumb"></div><div class="md-focus-thumb"></div><div class="md-focus-ring"></div><div class="md-sign"><span class="md-thumb-text">8</span></div><div class="md-disabled-thumb"></div></div></div></div></md-slider>

EDIT: It's working! Another cashing problem :smiley:
EDIT2: It works both on PC and mobile, I like the popup and you made it so it fits to my dark theme. The only problem is that it sends a message on first click and at the end of dragging so there are 2 messages per one change. This is easy to fix in the flow without any delays so it basically fixed my problem, thank you!

15

Great - glad we got that sorted...
For me (on laptop with a mouse) it only send the one output in release. Maybe the touch library is slightly different ?

16

If I my press down is perfectly on the dot then it sends only one message but it's impossible to do with more steps (I am using over 100). Try starting a drag few steps away from the dot.

Could you also set .md-track-ticks colour to Widget Colour? It changes the colour of the whole track when it's focused:

md-slider.md-default-theme .md-track-ticks, md-slider .md-track-ticks {
    color: rgba(0,0,0,0.87);
}

This is how I remove the first value:

41
Screenshot 2018-10-25 00.33.41.png908Ă—104 7.95 KB

17

Will patch the CSS, thanks.

18

I have discovered some behavior with slider that results in it NOT sending a message when the slider is released. It does affect a PC (W10, latest Chrome) with a mouse but a Android Tablet with Touch screen is not affected.
I noticed that with slider set to send "Only on Release" that some times it would not send the maximum and minimum values. It turned out that this is when the Mouse button is released when the pointer has moved further the the Left (min) or Right (Max) than the bubble on the slider indicator. If you return to the bubble and click it left (or Right for max) of centre then it does send it.
What is annoying that the slider gives the impression this is the new value when it has been sent but has not.
The Android touch screen is much more tolerant, you can drag you finger well beyond the slider limits and the max or min value message is sent.

[{"id":"90ec3b27.be45d8","type":"ui_slider","z":"ea51febe.392e5","name":"Duration Slider","label":"Duration","tooltip":"max  90 minutes","group":"c2749915.2e3758","order":5,"width":0,"height":0,"passthru":false,"outs":"end","topic":"duration","min":0,"max":"90","step":1,"x":120,"y":840,"wires":[["60332e99.fa994","b6a8362a.828de8"]]},{"id":"c2749915.2e3758","type":"ui_group","z":"","name":"Manual Control","tab":"15398257.058b8e","order":1,"disp":true,"width":"6","collapse":false},{"id":"15398257.058b8e","type":"ui_tab","z":"","name":"Irrigation","icon":"fa-tint","order":2}]
19

Yes, is a known issue with touch and sliders.