[SOLVED] Circlemenu custom background

Begonnen von xavier, 26 Februar 2020, 11:27:14

Vorheriges Thema - Nächstes Thema

xavier

Hi all (sorry for english, my german is really bad ...),

I would like to change the data-background-color of a circlemenu based on the status of another device (I control a shutter, if I activate an AutoShutter dummy switch the background is green, otherwise it is gray, see picture).

I can already do this with an array of states, as visible in the code I attach, but this makes me heavily modify the original code of any shutter (with some custom states such "aclosed", "aopen" and others).


<div data-type="circlemenu" data-direction="right-half" class="cell circlemenu noshade">
<ul>
<li>
<div data-type="symbol"
data-device="MQTT2_Bedroom_Shutter"
data-get="stateCustom"
data-warn="LWT"
data-warn-on="Offline"
data-states='["opening","closing",".*aclosed",".*apct",".*aopen",".*close",".*open","[0-9]","1[0-9]","2[0-9]","3[0-9]","4[0-9]","5[0-9]","6[0-9]","7[0-9]","8[0-9]","9[0-9]","100"]'
data-icons='["oa-fts_shutter_up","oa-fts_shutter_down","oa-fts_shutter_100","oa-fts_shutter_70","oa-fts_shutter_10","oa-fts_shutter_100","oa-fts_shutter_10","oa-fts_shutter_100","oa-fts_shutter_90","oa-fts_shutter_80","oa-fts_shutter_70","oa-fts_shutter_60","oa-fts_shutter_50","oa-fts_shutter_40","oa-fts_shutter_30","oa-fts_shutter_20","oa-fts_shutter_10","oa-fts_shutter_10"]'
data-colors='["#eee","#eee","#eee","#eee","#eee","#eee","#eee","#eee","#eee","#eee","#eee","#eee","#eee","#eee","#eee","#eee","#eee","#eee"]'
data-background-colors='["blue","blue","#32a054","#32a054","#32a054","#AAAAAA","#AAAAAA","#AAAAAA","#AAAAAA","#AAAAAA","#AAAAAA","#AAAAAA","#AAAAAA","#AAAAAA","#AAAAAA","#AAAAAA","#AAAAAA","#AAAAAA"]'
data-background-icon="fa-circle">
</div>
</li>
<li><div data-type="push"
data-device="MQTT2_Bedroom_Shutter"
data-set-on="open"
data-icon="oa-fts_shutter_10"></div></li>
<li><div data-type="push"
data-device="MQTT2_Bedroom_Shutter"
data-set-on="open"
data-set-off="stop"
data-icon="fa-angle-up"></div></li>
<li><div data-type="push"
data-device="MQTT2_Bedroom_Shutter"
data-set-on="pct 5"
data-icon="oa-fts_shutter_70"></div></li>
<li><div data-type="push"
data-device="MQTT2_Bedroom_Shutter"
data-set-on="close"
data-set-off="stop"
data-icon="fa-angle-down"></div></li>
<li><div data-type="push"
data-device="MQTT2_Bedroom_Shutter"
data-set-on="close"
data-icon="oa-fts_shutter_100"></div></li>
</ul>
</div>


I would like that in the single element of the array, instead of the single value #123456 there was a condition similar to "If AutoShutter = on then #32a054 else #AAAAAA". I think to the data-substitution attribute of the widget label.

Can you help me?

Regards,

xavier

xavier

Hi all,

after a few hours of brainstorming I propose my solution.

Entering device:reading data directly into the data-background-colors array is not possible, the values are not updated.

Instead of the array, a single data-background-color entry should be used, to which the device:readings value can be assigned.

Here is my working code:


<div data-type="circlemenu" class="cell circlemenu noshade">
<ul>
<li>
<div data-type="symbol"
data-device="MQTT2_3_Office_Blind"
data-get="state"
data-warn="LWT"
data-warn-on="Offline"
data-states='["opening","closing","close","open","[0-9]","1[0-9]","2[0-9]","3[0-9]","4[0-9]","5[0-9]","6[0-9]","7[0-9]","8[0-9]","9[0-9]","100"]'
data-icons='["oa-fts_shutter_up","oa-fts_shutter_down","oa-fts_shutter_100","oa-fts_shutter_10","oa-fts_shutter_100","oa-fts_shutter_90","oa-fts_shutter_80","oa-fts_shutter_70","oa-fts_shutter_60","oa-fts_shutter_50","oa-fts_shutter_40","oa-fts_shutter_30","oa-fts_shutter_20","oa-fts_shutter_10","oa-fts_shutter_10"]'
data-color="#EEEEEE"
data-background-color="MQTT2_3_Office_Blind:bgColor"
data-background-icon="fa-circle">
</div>
</li>
<li><div data-type="push"
data-device="MQTT2_3_Office_Blind"
data-set-on="pct 4"
data-icon="oa-fts_shutter_70"></div></li>
<li><div data-type="push"
data-device="MQTT2_3_Office_Blind"
data-set-on="close"
data-set-off="stop"
data-icon="fa-angle-down"></div></li>
<li><div data-type="push"
data-device="MQTT2_3_Office_Blind"
data-set-on="close"
data-icon="oa-fts_shutter_100"></div></li>
<li><div data-type="push"
data-device="MQTT2_3_Office_Blind"
data-set-on="open"
data-icon="oa-fts_shutter_10"></div></li>
<li><div data-type="push"
data-device="MQTT2_3_Office_Blind"
data-set-on="open"
data-set-off="stop"
data-icon="fa-angle-up"></div></li>
</ul>
</div>


The value of device:readings is then updated by a userReadings added at the end of each device to be controlled.

Here is an example of code that controls a shutter with Tasmota firmware, managed by MQTT2 and created with the FHEM template generator:


define MQTT2_3_Office_Blind MQTT2_DEVICE 3_Office_Blind
setuuid MQTT2_3_Office_Blind 5e5698d4-f33f-2a3c-ee1c-77aa7315ee664513
attr MQTT2_3_Office_Blind userattr ASC_Adv:on,off ASC_Antifreeze:off,soft,hard,am,pm ASC_Antifreeze_Pos:5,10,15,20,25,30,35,40,45,50,55,60,65,70,75,80,85,90,95,100 ASC_AutoAstroModeEvening:REAL,CIVIL,NAUTIC,ASTRONOMIC,HORIZON ASC_AutoAstroModeEveningHorizon:-9,-8,-7,-6,-5,-4,-3,-2,-1,0,1,2,3,4,5,6,7,8,9 ASC_AutoAstroModeMorning:REAL,CIVIL,NAUTIC,ASTRONOMIC,HORIZON ASC_AutoAstroModeMorningHorizon:-9,-8,-7,-6,-5,-4,-3,-2,-1,0,1,2,3,4,5,6,7,8,9 ASC_BlockingTime_afterManual ASC_BlockingTime_beforDayOpen ASC_BlockingTime_beforNightClose ASC_BrightnessSensor ASC_Closed_Pos:0,10,20,30,40,50,60,70,80,90,100 ASC_ComfortOpen_Pos:0,10,20,30,40,50,60,70,80,90,100 ASC_Down:time,astro,brightness,roommate ASC_DriveUpMaxDuration ASC_Drive_Delay ASC_Drive_DelayStart ASC_ExternalTrigger ASC_GuestRoom:on,off ASC_LockOut:soft,hard,off ASC_LockOut_Cmd:inhibit,blocked,protection ASC_Mode_Down:absent,always,off,home ASC_Mode_Up:absent,always,off,home ASC_Open_Pos:0,10,20,30,40,50,60,70,80,90,100 ASC_Partymode:on,off ASC_Pos_Reading ASC_PrivacyDownValue_beforeNightClose ASC_PrivacyDown_Pos ASC_PrivacyUpValue_beforeDayOpen ASC_PrivacyUp_Pos ASC_RainProtection:on,off ASC_Roommate_Device ASC_Roommate_Reading ASC_Self_Defense_AbsentDelay ASC_Self_Defense_Mode:absent,gone,off ASC_Shading_InOutAzimuth ASC_Shading_MinMax_Elevation ASC_Shading_Min_OutsideTemperature ASC_Shading_Mode:absent,always,off,home ASC_Shading_Pos:10,20,30,40,50,60,70,80,90,100 ASC_Shading_StateChange_SunnyCloudy ASC_Shading_WaitingPeriod ASC_Shutter_IdleDetection ASC_ShuttersPlace:window,terrace ASC_Sleep_Pos:0,10,20,30,40,50,60,70,80,90,100 ASC_TempSensor ASC_Time_Down_Early ASC_Time_Down_Late ASC_Time_Up_Early ASC_Time_Up_Late ASC_Time_Up_WE_Holiday ASC_Up:time,astro,brightness,roommate ASC_Ventilate_Pos:10,20,30,40,50,60,70,80,90,100 ASC_Ventilate_Window_Open:on,off ASC_WiggleValue ASC_WindParameters ASC_WindProtection:on,off ASC_WindowRec ASC_WindowRec_PosAfterDayClosed:open,lastManual ASC_WindowRec_subType:twostate,threestate
attr MQTT2_3_Office_Blind ASC 2
attr MQTT2_3_Office_Blind ASC_AutoAstroModeEvening HORIZON
attr MQTT2_3_Office_Blind ASC_AutoAstroModeEveningHorizon -7
attr MQTT2_3_Office_Blind ASC_AutoAstroModeMorning HORIZON
attr MQTT2_3_Office_Blind ASC_AutoAstroModeMorningHorizon -6
attr MQTT2_3_Office_Blind ASC_BrightnessSensor Light_Sensor_S:lux
attr MQTT2_3_Office_Blind ASC_Pos_Reading pct
attr MQTT2_3_Office_Blind ASC_Shading_Min_OutsideTemperature 10.0
attr MQTT2_3_Office_Blind ASC_Shading_Mode always
attr MQTT2_3_Office_Blind ASC_Shading_Pos 10
attr MQTT2_3_Office_Blind ASC_Shading_StateChange_SunnyCloudy 35000:20000
attr MQTT2_3_Office_Blind ASC_Shading_WaitingPeriod 240
attr MQTT2_3_Office_Blind IODev m2s
attr MQTT2_3_Office_Blind cmdIcon open:fts_shutter_up close:fts_shutter_down stop:fts_shutter_manual half:fts_shutter_50
attr MQTT2_3_Office_Blind comment After applying the template set "ShutterOpenDuration1" and "ShutterCloseDuration1" first.\
Use the "set x_configuration" Option. Example: "set x_configuration ShutterOpenDuration1 35"\
Shutter specific commands available: ShutterOpenDuration1, ShutterCloseDuration1, ShutterRelay1, ShutterSetHalfway1, ShutterSetClose1, ShutterInvert1, ShutterMotordelay1, ShutterCalibration1;; you may use this for general setOptions in tasmota also.\
commands may need restart to take effect.\
For calibration, use of more than one shutter device and further information on the available commands see <a href="https://github.com/arendst/Tasmota/wiki/blinds-and-roller-shades">Tasmota wiki</a>.
attr MQTT2_3_Office_Blind devStateIcon opening:fts_shutter_up@red closing:fts_shutter_down@red Online:10px-kreis-gruen Offline:10px-kreis-rot 100:fts_shutter_10 0:fts_shutter_100 9\d.*:fts_shutter_10 8\d.*:fts_shutter_20 7\d.*:fts_shutter_30 6\d.*:fts_shutter_40 5\d.*:fts_shutter_50 4\d.*:fts_shutter_60 3\d.*:fts_shutter_70 2\d.*:fts_shutter_80 1\d.*:fts_shutter_90 \b\d\b.*:fts_shutter_90
attr MQTT2_3_Office_Blind model tasmota_2ch_shutter_invert_0
attr MQTT2_3_Office_Blind readingList tele/3_Office_Blind/LWT:.* LWT\
   stat/3_Office_Blind/RESULT:.* { json2nameValue($EVENT) }\
   stat/3_Office_Blind/POWER1:.* POWER1\
   stat/3_Office_Blind/POWER1:on {{'state' => 'opening'}}\
   stat/3_Office_Blind/POWER2:.* POWER2\
   stat/3_Office_Blind/POWER2:on {{'state' => 'closing'}}\
   stat/3_Office_Blind/SHUTTER1:.* state\
   stat/3_Office_Blind/SHUTTER1:.* pct\
   tele/3_Office_Blind/RESULT:.* { json2nameValue($EVENT) }\
   tele/3_Office_Blind/STATE:.* { json2nameValue($EVENT) }\
   tele/3_Office_Blind/SENSOR:.* { json2nameValue($EVENT) }\
   tele/3_Office_Blind/INFO.:.* { json2nameValue($EVENT) }\
   tele/3_Office_Blind/UPTIME:.* { json2nameValue($EVENT) }\
3_Office_Blind:cmnd/3_Office_Blind/POWER:.* POWER
attr MQTT2_3_Office_Blind room 07 Office
attr MQTT2_3_Office_Blind setList close:noArg cmnd/3_Office_Blind/ShutterClose1\
   open:noArg cmnd/3_Office_Blind/ShutterOpen1\
   half:noArg cmnd/3_Office_Blind/ShutterSetHalfway1 50\
   pct:slider,0,1,100 cmnd/3_Office_Blind/ShutterPosition1 $EVTPART1\
   stop:noArg cmnd/3_Office_Blind/ShutterStop1\
   resetClose:noArg cmnd/3_Office_Blind/ShutterSetClose1\
   x_configuration cmnd/3_Office_Blind/$EVTPART1 $EVTPART2
attr MQTT2_3_Office_Blind setStateList open close half stop pct
attr MQTT2_3_Office_Blind stateFormat <a href="http://IPAddress" target="_blank">\
LWT\
</a>\
state
attr MQTT2_3_Office_Blind webCmd :open:close:half:stop:pct
### =============================== ###
attr MQTT2_3_Office_Blind userReadings bgColor {if \
(ReadingsVal("MQTT2_3_Office_Blind","state","") eq "opening") {return "#0088CC"} elsif \
(ReadingsVal("MQTT2_3_Office_Blind","state","") eq "closing") {return "#0088CC"} elsif \
(ReadingsVal ("myASControl","ascEnable","") eq "on") {return "#32A054"} else \
{return "#AAAAAA"}}
### =============================== ###


I then added a notify combined with the AutoShutterControl device, to update in real time the background color of the circlemenu every time the status of the ascEnable variable changes from on to off or vice versa.


define myASControl AutoShuttersControl
attr myASControl ASC_RainProtection on
attr myASControl ASC_rainSensor Weather_HOME:Rain
attr myASControl ASC_tempSensor Weather_HOME:Temp
attr myASControl ASC_twilightDevice myAstro
attr myASControl ASC_windSensor Weather_HOME:Wind_Speed_1min
attr myASControl devStateIcon { AutoShuttersControl_DevStateIcon($name) }
attr myASControl icon fts_shutter_automatic
attr myASControl room 99 Scenes

### =============================== ###
define myASControl_Status_notify notify myASControl setReading MQTT2.* stateCustom 0
attr myASControl_Status_notify room 99 Scenes
### =============================== ###


Maybe it won't be the most elegant solution possible, but I hope you like it.

Regards,

xavier