Knob Widget: Add color ranges

[openhab]

Knob Widget: Add color ranges

[ghys]

Looks nice!
Do you intend to fork ng-knob? I don't see it having this feature. For a change this significant we would have to come up with a way to keep forked external dependencies manageable.

I don't necessarily mind the new tab too much but I still tried to limit them because on devices in portrait mode it would wrap to a second line (which is ugly).

[isigmund]

@ghys I have forked ng-knob and added the functionality to color the valueBar and the text according to the value. I will crate a PR after it's completely done. So I was thinking after that pull request to ng-knob has been integrated we can refer to the newer version that has then the ranges functionality. Wouldn't that work ?

Here is how the definition of the ranges does look like in the ng-knob (its almost finished, I am just not done yet to color the tron bar according to the ranges):

[isigmund]

In regards to the additional tab. Technically the ranges belong to the bar, but the bar tab already has a lot of color setting which makes it quite big already. If I add the ranges there we would have even more color settings. That was the reason for me to decide for an additional tab.
Another option would be to use a bootstrap "well" control to display the color and clicking on the well would open the color settings you already use in an additional dialog. This would have the benefit that all other setting dialogs that have color settings would become smaller as well (no scrolling on smaller screens).
Let me know what you thing about this.

[isigmund]

I am done with my changes on ng-knob and issued a PR. Hope this will be merged soon.
If you want to see it in action please visit https://isigmund.github.io/ng-knob/

[ghys]

Cool. I myself needed to fork it to add an "onEnd" callback and it never got merged - see the bower file actually points to my fork. Seems like @RadMie is not working actively on ng-knob anymore.

Since my change is necessary for HABPanel, and my fork is the one used as the bower dependency, if you don't receive a response from upstream I guess you could submit the PR to my repository instead.

[isigmund]

@ghys I was finally able to complete the development for the color ranges of the knob widget. I am ready to create the PR but I first wanted to discuss the settings UI with you to see if you agree.
So first here is how some example knobs looks like with the color ranges:

The settings dialog for the ranges looks like this:

The first checkbox enables or disables the ranges. The second one does control if the text color should match the bar or of if it should just use the text color set on the Misc tab. I was thinking to move the + Button to the bottom of the accordeon since the normal flow is probably to create one range after the other and the button at the bottom prevents he user from having to scroll all time

For each range the accordeon shows this:

I have by purpose added a text field for the color in addition to the color picker. This adds the possibility to set other colors as the webcolorpicker allows. With this its possible to create nice gradients like in the second example above.

Let me know what you think....

Take care
Ingo

[ghys]

Hi @isigmund
Sorry for not responding sooner, I wasn't much available this weekend. 😉
Your PR is looking great! I also had the same idea about the color pickers (allowing a text entry option) actually, so it's something that could even be included in the color picker directive itself and be available everywhere.

I'll take a closer look at it ASAP and it's going to be merged in the next few days.
Thanks!

[isigmund]

Closed with PR #102

[LeDumpier]

Hi @isigmund

Great looking widget thanks.

Would you mind posting the colour values for the blue-to-red temperature widget as per your example?

Many thanks in advance,

Craig

[isigmund]

Hello, I dont think I have the exact values for this anymore, But I used http://www.perbang.dk/rgbgradient/ <http://www.perbang.dk/rgbgradient/> to generate them. On this site you can define a starting and an endcolor, and a number of steps to generate a gradient. I used the HSV inverse (it looked most natural). hope that helped. Take care Ingo

…

On 2. Jun 2017, at 13:05, Ugly Kid Joe ***@***.***> wrote: Hi @isigmund <https://github.com/isigmund> Great looking widget thanks. Would you mind posting the colour values for the blue-to-red temperature widget as per your example? <https://cloud.githubusercontent.com/assets/19993783/26723284/151020aa-4794-11e7-9ff0-50ee8c240234.png> Many thanks in advance, Craig — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#52 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AFoMqvtFgLE2-dBlmTOijWKTJaLAHhh0ks5r_-xwgaJpZM4Kd7YU>.