search

openhab / org.openhab.ui.habpanel

OUTDATED repo - HABPanel has moved to the openhab-webui repo!
https://github.com/openhab/openhab-webui
Eclipse Public License 1.0
97 stars 92 forks source link

Knob Widget: Add color ranges #52

Closed isigmund closed 7 years ago

isigmund commented 7 years ago

I am working on an enhancement to the knob widget to allow defining ranges and asssign a color to each range. When the value is inside one of the ranges the color of the Knob widget and the color of the vaule changes accordingly. Additionally if the tron style is used the tron arc would show the color ranges as well to indicate where the color change does happen. I took this idea from grafana which has a similar concept.

In HabPanel it would look similar to this: image (taken from my current HabPanel where I use an template widget with an iframe to embedd an grafana chart - really slow thats the reason why I want to replace this with native HabPanel functionality)

To define the ranges (up to 5) I plan to enhance the settings dialog with an additional tab.

Let me know what you think.

Take care Ingo

ghys commented 7 years ago

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 commented 7 years ago

@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): image

isigmund commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

@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: image

The settings dialog for the ranges looks like this: image

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: image

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 commented 7 years ago

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 commented 7 years ago

Closed with PR #102

LeDumpier commented 7 years ago

Hi @isigmund

Great looking widget thanks.

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

image

Many thanks in advance,

Craig

isigmund commented 7 years ago

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 notifications@github.com 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 https://github.com/openhab/org.openhab.ui.habpanel/issues/52#issuecomment-305757117, or mute the thread https://github.com/notifications/unsubscribe-auth/AFoMqvtFgLE2-dBlmTOijWKTJaLAHhh0ks5r_-xwgaJpZM4Kd7YU.