Custom Widget : Daikin Wifi Controler

[vletroye (Valéry Letroye)]

Hi,

I have created a custom Widget (for the HABPanel) to control my Daikin Units.
A first draft version is working fine on my OpenHAB (Running on a RPI 4).

It can be used to:

• turn on/off the Unit, change the target temperature,
• display the indoor and outdoor temperatures,
• set a mode Auto, Fan, Dehumifier, Cooling or Heating,
• set a special mode Eco, Powerful or Streamer,
• set the fan speed on Silent, Auto or level 1 to 5,
• set the blade direction on horizontal, vertical or both

I would be glad to have some feedbacks (support on other devices, missing feature, user experience, …)

I have drafted a documentation here:

• The JSON to be imported is here
• And you have to copy this folder and its content (some images and an angularjs controller) under /conf/html/

This is my third Widget but I am still not expert in AngularJS, BootStrap, etc… So, it’s far from great code; any advice on that would be welcome too!

V.

[hmerk (Hans-Jörg Merk)]

Thanks for your nice widget, really like it. I just faced an issu when using it togesther with Matrix-Theme or New-Pride-Theme.
If using one of them, all icons are not visible due to some background color issues.
Any chance you could fix that ?

[vletroye (Valéry Letroye)]

I will have a look next week. I could replace the black of the icons with the grey used in the matrix theme, and the use its green instead of my blue? Would this be ok? Otherwise, post a screenshot to show me exactly the issue…

V.

[matt1 (Skinah)]

Love your work on it, looks great. Well done. I cant use it but apricate what you have done.

The best idea is to not code colours into widgets so we can change them with external CSS, this is how web page design is meant to work. Habpanel has some variables to use for colour if you must.

If it helps, you could test it out with a basic CSS like this one to see what breaks…

New Habpanel look: Plump

I have been making my own Habpanel look and calling it Plump as it will make all your widgets become well rounded. Whilst not finished yet, it may be of interest to others and hopefully people with more skills can help improve it. Needs a little work mainly to improve the size of text and other issues on different sized screens like Mobile vs tablet, but on 16x9 screens it is looking great here. Please post a picture of what yours looks like. I am aiming for a simple to install theme by using a…

[vletroye (Valéry Letroye)]

I didn’t look into your css yet, Skinah, but I have created a version of my icons with a similar grey and green as the matrix theme. These icons can be found here: https://github.com/vletroye/OpenHAB/tree/master/Html/vletroye/images%20-%20Dark%20Bkg

Skinah, I quickly read about changing the color of a .png using css filters… I see we can change quite a lot indeed… but it’s not that easy for css beginners.

[hmerk (Hans-Jörg Merk)]

I experimented a little bit.
Surrounding your widget code with Section and bigDash declarations from Matrix or NewPride theme will give a good result… No need to fuddle around with background settings…

[ryan42 (Ryan Johnston)]

Hi, your widget looks great. I am just having some issues with everything displayed on top of itself. Any ideas? I think I have everything right. The only item I don’t have is humidity but cant see that affecting anything in the widget.

Something that might help is I see this in the browser debug
/static/vletroye/images/daikin_mode_%7B%7Bindex%7D%7D_on.png
/static/vletroye/images/daikin_fan_LEVEL_%7B%7Bindex%7D%7D_off.png 404
/static/vletroye/images/daikin_fan_%7B%7Bindex%7D%7D_on.png
/static/vletroye/images/daikin_fandir_%7B%7Bindex%7D%7D_on.png

Any help would be greatly appreciated.
Cheers

[vletroye (Valéry Letroye)]

I just checked with my HabPanel and

• I have the same errors in the console of Chrome
• But the widget is still displaying fine.

I really have no idea why OpenHab tries to access each image at least once with the name ‘index’ instead of the value of the variable index. Ex.: for daikin_fan_LEVEL, index should be in the range 1 to 5

    <button ng-repeat="index in [1,2,3,4,5]" class="btn btn-xs" title="Fan Speed {{index}}"
            style= "border: none; background: rgba(0,0,0,0); outline:none;" 
            ng-click="sendCmd(config.item_fan, 'LEVEL_'+index);">
      <img ng-if="fanSpeed(itemState(config.item_fan), index)" src="/static/vletroye/images/daikin_fan_LEVEL_{{index}}_on.png"  width="20px" />
      <img ng-if="! fanSpeed(itemState(config.item_fan), index)" src="/static/vletroye/images/daikin_fan_LEVEL_{{index}}_off.png"  width="20px" />
    </button>

Here under, we can see that the browser fetched correctly the images. Do you see that too in Sources tab of your DevTools (Chrome) ?

I am not an expert (I mainly did copy/paste of code found in the community). But it seems that the tag is rendered a first time without/outside the context of “ng-repeat”. In such a case, it’s made explicitely with the url “/static/vletroye/images/daikin_fan_LEVEL_{{index}}_on.png”, without replacement of {{index}} by a value ?!?