Custom Widget: Multi-state Widget

widget
widgetgallery
Tags: #<Tag:0x00007f0146e66498> #<Tag:0x00007f0146e66330>

(Mario) #21

Any chance you can send me the script/custom widget code.?Then I can paste it myself using the custom widget and can change the code myself.

If I am successful I can send it back to you and you can commit?

Just a thought…

But Yes we should make it more confirgurable

  • font size for rows
  • custom labels (like in the selection widget perhaps)
  • size of switch or arrow buttons to allow for good touch experience

(Michael ) #22

Hi!
The widget contains the complete code - just in one line. Make search replace for \n to \n and \t to \t and you can see all.
Looking forward to see your changes!!
Michael


(Mario) #23

Hi Michael, all

Need still to learn… :slight_smile: but looked into it.

I found out that you can actually, when in settings mode, view the code directly already with some sort of highlighting… So no need to wrap the /n /T …

There is a code sections, a settings and a preview section. To start simple I added a new parameter called “item_fontsize” at the end. At the moment I do use the widget “Showvalues_ON” section to display the status of my windows.

So I quickly changed your ON/OFF to my windows sitecode mapping table “OPEN/CLOSED”. THAT works already.

Then I changed your hardcoded font-size: 16px to --> (config.item_fontsize + “px” ). My assumption was that If now go to config the widget and change the value of the fontsize parameter that the font would change. But it doesn’t.

I saved, refreshed the browser, deleted and re-added the widget on the dashboard but could not get this to work.

So a couple of how-to questions on

  • how do I correctly debug new code
  • how do I correctly test new code once saved
  • how do I correctly publish the widget to the dashboard once code changes has happend.
    —> e.g. developer guide but for beginners of openhab/panel :slight_smile:

You are talking to a Windows/Batch/VB/ person and not a linux, pyton, java person… so bear with me pls. Once I do get over this hurdle I will make some more modifications, promise.

cheers
Mario

fontsize

         <div ng-if="(config.item_type=='Showvalues_ON')">
              <div ng-style="{'height': (itemValue(item.name + '_soll')!='N/A') ? '40px' : '4px' }">
                    <button style="width:100%; height: 1em; border: 0; color: white; background: transparent; font-size: (config.item_fontsize + "px" ) " ng-click="">
                      <div ng-style="{'background-color': (itemState(item.name)=='OPEN') ? '#26FF33' : 'transparent' }">
                        {{itemState(item.name).substr(0,6)}}{{config.item_unit.replace("_"," ")}}
                        <div ng-if="(config.item_extension!=NULL)">
                          <div ng-if="itemValue(item.name + config.item_extension)!='N/A'">
                            <div style="color:#606060;"> 
                        		[ {{itemState(item.name+config.item_extension).substr(0,4)}}{{config.item_unit.replace("_"," ")}} ]
                            </div>
                          </div>
                        </div>
                      </div>
                    </button>
              </div>
            </div>
            <div ng-if="(config.item_type=='Showvalues_OFF')">
              <div ng-style="{'height': (itemValue(item.name + '_soll')!='N/A') ? '40px' : '4px' }">
                    <button style="width:100%; height: 1em; border: 0; color: white; background: transparent; font-size: 16px" ng-click="">
                      <div ng-style="{'background-color': (itemState(item.name)=='CLOSED') ? '#26FF33' : 'transparent' }">
                        {{itemState(item.name).substr(0,6)}}{{config.item_unit.replace("_"," ")}}
                        <div ng-if="(config.item_extension!=NULL)">
                          <div ng-if="itemValue(item.name + config.item_extension)!='N/A'">
                            <div style="color:#606060;"> 
                        		[ {{itemState(item.name+config.item_extension).substr(0,4)}}{{config.item_unit.replace("_"," ");}} ]
                            </div>
                          </div>
                        </div>
                      </div>
                    </button>
              </div>
            </div>

(Shorty707) #24

is there a way to use this for venetian blinds (raffstore) by controlling the blind (open/close) and blade position?

like
image


(Michael ) #25

@shorty707 The Widget is creating a table in html - this is far off from the layout you are looking for.

@Mario: I did the debuging main on try on error - so very time consuming. Meanwhile the Development support is better with the editor that does syntax highlighting etc


(Alan Fenwick) #26

Is there a way to tell the widget to have NO icon when doing Windows?


(Ulrich) #27

Hi Michael,
I tried out your Widget, looks great - thank you. It works well with switches. But there is one thing I cannot find: How did you manage to show numbers (in your example, temperatures)? When I create a new widget, the possible item type selections are only “switch, toggle, rollershutter, windows, showvalues_ON, showvalues_OFF”.
What I do wrong?
Regards
Ulrich


(Tim Bates) #28

Is it possible to trim the background window size to better match the list of items shown - before 1st item & after last item? If in your code, I can change font size, spacing, etc. but the background window always stays the same size.


(Constantinos Contis) #29

very nice and simple widget for a noob like me,is there a way to change switch color from green to orange so it can match with my orange tree skin?


(Nick Galfas) #30

this is great for keeping on eye on all my exterior lights, if any is left ON


(Werner Seifert) #31

I have a problem using switch for a group of lamps in this template: clicking on the switch item only OFF commands are sent but the switch item changes the colour to green. Clicking again also OFF is sent to the item and the coulur changes back.
What is going wrong?

Werner