Skip to content
This repository has been archived by the owner on May 23, 2019. It is now read-only.

Added a new widget: Symbol #234

Open
wants to merge 11 commits into
base: master
Choose a base branch
from
Open

Added a new widget: Symbol #234

wants to merge 11 commits into from

Conversation

hypetsch
Copy link
Contributor

The purpose of the 'symbol' widget is to visualize the current state of an item (in my case e.g. the level at which my CWL is currently operating).
The basic idea: Transform the state value of an item into a graphical visualization.
Therefore it is possible to configure an unlimited number of rules. Each rule consists of

  • an unlimited number of conditions
  • and style settings like
    • Icon
    • Icon Rotation
    • Icon Animation
    • Background Color
    • Background Animation

Here is a sample screenshot:
image

When the selected item state changes, the configured rules are processed from top to bottom until all conditions of a rule match. If so, the configured style properties are applied to the widget.
Additionally to the state of an item, conditions can currently also check current date and time.

Some additional notes:

  • To be able to dynamically change a configured icon, I also had to modify the icon widget.
  • In the current version of the symbol widget the rotation of an icon can be specified in degrees. I think it could make sense to add this as a generic feature for all icons?
  • Some possible enhancements that came into my mind and could be added in the future:
    • Add a configurable command (for each rule) which is sent when clicking.
    • Add more animations.
    • Add more operands for conditions.
    • Add more operators for conditions.
    • Add an optional text for each rule which is shown along with the icon (or instead of the symbol).
    • Show a preview of the configured style in the settings dialog.

I would appreciate your feedback and hope you can find some time to have a look at my first 'real' angular experience :).

@hypetsch
Initial commit for adding symbol widget
ef740f1 
new: added symbol widget and basic configuration
new: allow dynamically changing several widget-icon properties (not only state)
Signed-off-by: Schraffl Peter <p.schraffl@gmx.at>
@hypetsch
added animations, some fixes
b74c6cf 
Signed-off-by: Schraffl Peter <p.schraffl@gmx.at>
@hypetsch
fixed some animations; added timing function; remove forecolor config
2d051bc 
Signed-off-by: Schraffl Peter <p.schraffl@gmx.at>
@hypetsch
switch to angular $interval
a3c1281 
Signed-off-by: Schraffl Peter <p.schraffl@gmx.at>
@hypetsch
Some styling changes for the settings dialog
1cd3c68 
Signed-off-by: Schraffl Peter <p.schraffl@gmx.at>
@hypetsch
remove erroneously added file
2a1df7a 
Signed-off-by: Schraffl Peter <p.schraffl@gmx.at>
@hypetsch
Make icon rotation a numeric value (instead of a class)
fd77beb 
Signed-off-by: Schraffl Peter <p.schraffl@gmx.at>
@hypetsch
fixed blink animation
509efa5
@hypetsch
fix errors in image widget
ada34be 
Signed-off-by: Schraffl Peter <p.schraffl@gmx.at>
@hypetsch
new: initialize timer only if required
b7ed31e 
new: provide format information for time based conditions

Signed-off-by: Schraffl Peter <p.schraffl@gmx.at>
@hypetsch
fix settings style
39d8c9c 
Signed-off-by: Schraffl Peter <p.schraffl@gmx.at>
@hypetsch hypetsch mentioned this pull request Oct 15, 2017
Closed
@ghys
Copy link
Member

ghys commented Oct 15, 2017

Thanks for your work! Really appreciated!
I intend to have it make its way into the HABPanel environment eventually, but need some time to review how it works and (since it could be a new built-in widget) make sure it doesn't confuse new users and really warrant a new addition to the codebase vs. a plug-in.
I'll keep you posted! ;)

@ghys ghys closed this Oct 15, 2017
@ghys ghys reopened this Oct 15, 2017
@ghys
Copy link
Member

ghys commented Oct 17, 2017

I tried it and it's a good start, some early design notes - I haven't reviewed the code in detail:

  1. I'm wondering if your rules system could be added as an optional feature to the dummy widget instead of duplicating the same fundamental purpose (displaying a item's state read-only) in a new widget. Also "Symbol" is maybe a little vague -- you could argue that "dummy" is even worse and you would be right ;) but we have to keep it for retro-compatibility. This would also solve the lack of layout options in your widget (textual display mostly).

  2. In the current version of the symbol widget the rotation of an icon can be specified in degrees. I think it could make sense to add this as a generic feature for all icons?

actually to be honest, I don't see many use cases where rotating icons is really useful (the same goes for the spinning animation which btw is available for backgrounds too and looks really silly 😲 ). The only one I could eventually understand is the icon of a fan but still, this is very anecdotal. Adding options that clutter up the dialog boxes and will almost never be used is rarely a good idea. Maybe you could elaborate why you needed that?

  1. If no rules match the widget remains empty (and there's an error in the console). Again adding the rules to the dummy widget would solve that.

Cheers!

@hypetsch
Copy link
Contributor Author

Thanks for your feedback. I have little time at the moment but i'll try to reply asap.

LuckyMallari pushed a commit to LuckyMallari/org.openhab.ui.habpanel that referenced this pull request Dec 26, 2017
@kubawolanin @ghys
Theming improvements (openhab#187)
4579642 
Complete rewrite of the themes using CSS variables to avoid pre-processing and embedding Bootstrap with each theme.

Fallback for browsers not supporting CSS variables: See http://caniuse.com/#feat=css-variables
Theming is now disabled for those browsers without support.

Add 2 new themes: Madras & Orange Tree.

New additional stylesheet option to complement or override styles defined by the theme - only same origin source allowed by CSP.

Closes openhab#186.
Fixes openhab#189.

List of CSS variables in use and default values:

    /* Basic HABpanel styles */
    --body-bg: #000;
    --body-color: #ccc;
    --primary-color: #0db9f0;
    --box-bg: openhab#234;
    --header-bg: var(--body-bg);
    /* General widget styles */
    --widget-design-bg: #567;
    --widget-text-color: #def;
    --widget-border-radius: 0px;
    --widget-box-shadow: none;
    /* Icon colors */
    --icon-color-filter: invert(60%) sepia(100%) hue-rotate(185deg) saturate(1000%);
    /* Should be aligned with --primary-color */
    --icon-color-off-filter: invert(45%) sepia(80%) hue-rotate(170deg);
    --icon-backdrop-filter: invert(60%) sepia(100%) hue-rotate(165deg) opacity(15%);
    /* Chart widget */
    --chart-stroke: #456;
    --chart-fill: #89a;
    --chart-tooltip: openhab#123;
    /* Color picker widget */
    --colorpicker-border: #3960ff;
    --colorpicker-stroke: #456;
    --colorpicker-fill: #89a;
    /* Image widget */
    --image-border: #456;
    /* Switch widget */
    --switch-off-color: #89a;
    /* Slider widget */
    --slider-pointer-color: openhab#234;
    --slider-pointer-bg-color: #def;
    --slider-ceil-color: #def;
    --slider-bubble-bg-color: openhab#123;
    --slider-bubble-border-color: #456;
    --slider-bubble-color: #aa7;

Also-by: Yannick Schaus <habpanel@schaus.net>
Signed-off-by: Kuba Wolanin <hi@kubawolanin.com>
@ghys
Copy link
Member

ghys commented Dec 27, 2017

@hypetsch are you still interested in refactoring your Symbol widget into the Dummy widget as suggested? If not please make sure you allow maintainers to commit to your PR branch, so that I can help you with that (probably not before next year). Thanks!

@hypetsch
Copy link
Contributor Author

Hi, yes I am still interested in it, but unfortunately do still not have time for it, sorry. Permission should be ok, so you should be able to refactor if you like.
I think the dummy widget would be a good way to go. Honestly I didn't have a look at it when implementing the Symbol Widget - because of its name :-).
Just one note: I understand that it cannot be renamed in the code for backward compatibility reasons, but wouldn't it be possible to just change the name used in the UI?
Thanks for your work and have a happy new year.

@ghys
Copy link
Member

ghys commented Dec 28, 2017

Just one note: I understand that it cannot be renamed in the code for backward compatibility reasons, but wouldn't it be possible to just change the name used in the UI?

That is a possibility, but maybe it's better if the id matches the name. "dummy" could remain an alias to ensure existing dashboards continue working after it's renamed to "value" or whatever name we end up with.

Cheers!

@8666
Copy link

8666 commented May 2, 2019

When will be this available?

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Reviewers
No reviews
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@hypetsch @ghys @8666