Happens on 3 of my machines. 2.4.0 Stable. The dimmers are working correctly, but dont reflect their state right in Habpanel, some times never reflecting the state and sometimes they will after a refresh
Its a very grunty xeon machine, 16gb ram and a gigabit network and it takes about 30 seconds to load the sliders for 6 dimmers.
Youll see they are all on, and show more than 0% but the slider shows at the far left
Thanks!
That’s custom code with slider-widget? This is a common problem with the sliders, PITA to be honest; they try to initialize their rendering too early, before the dimensions of their container are computed.
If you can and are willing to do that, try fixing the dimensions of the parent div like:
<div style="width: 600px height:300px">
or similar. Not ideal but it should avoid those kinds of issues.
2.5.0 has a fix which might also address this, no guarantees but could be worth a try.
Thanks! Possible to use the 2.5.0 habpanel jar with 2.4.0?
hi @ysc the width and height should be what exactly? the resolution of the mobile device that renders it? even when I set the width and height, it still does it.
What is the 2.5.0 fix? is it possible to recompile 2.4.0 with this fix perhaps?
Hi @dastrix80 sorry for bringing up old thread
Would you minding sharing your widget code for the lights sections with dimmer sliders?
I am a habpanel beginner using matrix theme and have troubles getting the sliders to work as intended.
My implementation has NaN on the slider to the far left and sliders remain at this position although the brightness is above 0%.
Thank you!
Sure
<div class="" ng-app="app" ng-init="collapseDimmers=true">
<div class="section">
<div class="sectionIconContainer">
<div class="" ng-click="collapseDimmers = !collapseDimmers">
<div class="sectionIcon">
<div class="icon on" ng-if="itemValue('gAllDimmers')=='ON'">
<svg viewBox="0 0 48 48">
<use xlink:href="/static/matrix-theme/matrixicons.svg#light_bulb"></use>
</svg>
</div>
</div>
<div class="sectionIcon">
<div class="icon off" ng-if="itemValue('gAllDimmers')=='OFF'">
<svg viewBox="0 0 48 48">
<use xlink:href="/static/matrix-theme/matrixicons.svg#light_bulb"></use>
</svg>
</div>
</div>
<div class="title">Dimmers</div>
</div>
<div class="controls" style="visibility: {{ collapseDimmers ? 'hidden;': 'visible;' }} height: {{ collapseDimmers ? '0px;': 'auto;' }}">
<div class="widget" ng-if="itemValue('LivingRoomSw1')=='OFF'" ng-click="sendCmd('LivingRoomSw1', 'ON')">
<div class="icon off">
<svg viewBox="0 0 48 48">
<use xlink:href="/static/matrix-theme/matrixicons.svg#off"></use>
</svg>
</div>
<div class="name">Living {{itemValue('LivingRoomSw1')}}</div>
</div>
<div class="widget" ng-if="itemValue('LivingRoomSw1')=='ON'" ng-click="sendCmd('LivingRoomSw1', 'OFF')">
<div class="icon on">
<svg viewBox="0 0 48 48">
<use xlink:href="/static/matrix-theme/matrixicons.svg#on"></use>
</svg>
</div>
<div class="name">Living {{itemValue('LivingRoomSw1')}}</div>
</div>
<div class="slider-div" ng-init='LivingRoomDim1={"name": "Living Brightness", "item": "LivingRoomDim1",
"floor" : 0,
"ceil": 100,
"step": 10,
"hidelabel" : "true",
"hidelimits": "true",
}'>
<widget-slider ng-model="LivingRoomDim1" />
</div>
<div class="widget" ng-if="itemValue('KitchenSw1')=='OFF'" ng-click="sendCmd('KitchenSw1', 'ON')">
<div class="icon off">
<svg viewBox="0 0 48 48">
<use xlink:href="/static/matrix-theme/matrixicons.svg#off"></use>
</svg>
</div>
<div class="name">Kitchen {{itemValue('KitchenSw1')}}</div>
</div>
<div class="widget" ng-if="itemValue('KitchenSw1')=='ON'" ng-click="sendCmd('KitchenSw1', 'OFF')">
<div class="icon on">
<svg viewBox="0 0 48 48">
<use xlink:href="/static/matrix-theme/matrixicons.svg#on"></use>
</svg>
</div>
<div class="name">Kitchen {{itemValue('KitchenSw1')}}</div>
</div>
<div class="slider-div" ng-init='KitchenDim1={"name": "Kitchen Brightness", "item": "KitchenDim1",
"floor" : 0,
"ceil": 100,
"step": 10,
"hidelabel" : "true",
"hidelimits": "true"
}'>
<widget-slider ng-model="KitchenDim1" />
</div>
<div class="widget" ng-if="itemValue('KitchenBarSw1')=='OFF'" ng-click="sendCmd('KitchenBarSw1', 'ON')">
<div class="icon off">
<svg viewBox="0 0 48 48">
<use xlink:href="/static/matrix-theme/matrixicons.svg#off"></use>
</svg>
</div>
<div class="name">Island {{itemValue('KitchenBarSw1')}}</div>
</div>
<div class="widget" ng-if="itemValue('KitchenBarSw1')=='ON'" ng-click="sendCmd('KitchenBarSw1', 'OFF')">
<div class="icon on">
<svg viewBox="0 0 48 48">
<use xlink:href="/static/matrix-theme/matrixicons.svg#on"></use>
</svg>
</div>
<div class="name">Island {{itemValue('KitchenBarSw1')}}</div>
</div>
<div class="slider-div" ng-init='KitchenBarDim1={"name": "Kitchen Bar Brightness", "item": "KitchenBarDim1",
"floor" : 0,
"ceil": 100,
"step": 10,
"hidelabel" : "true",
"hidelimits": "true"
}'>
<widget-slider ng-model="KitchenBarDim1" />
</div>
<div class="widget" ng-if="itemValue('DiningRoomSw1')=='OFF'" ng-click="sendCmd('DiningRoomSw1', 'ON')">
<div class="icon off">
<svg viewBox="0 0 48 48">
<use xlink:href="/static/matrix-theme/matrixicons.svg#off"></use>
</svg>
</div>
<div class="name">Dining Room {{itemValue('DiningRoomSw1')}}</div>
</div>
<div class="widget" ng-if="itemValue('DiningRoomSw1')=='ON'" ng-click="sendCmd('DiningRoomSw1', 'OFF')">
<div class="icon on">
<svg viewBox="0 0 48 48">
<use xlink:href="/static/matrix-theme/matrixicons.svg#on"></use>
</svg>
</div>
<div class="name">Dining Room {{itemValue('DiningRoomSw1')}}</div>
</div>
<div class="slider-div" ng-init='DiningRoomDim1={"name": "Dining Room Brightness", "item": "DiningRoomDim1",
"floor" : 0,
"ceil": 100,
"step": 10,
"hidelabel" : "true",
"hidelimits": "true"
}'>
<widget-slider ng-model="DiningRoomDim1" />
</div>
<div class="widget" ng-if="itemValue('FrontRoomSw1')=='OFF'" ng-click="sendCmd('FrontRoomSw1', 'ON')">
<div class="icon off">
<svg viewBox="0 0 48 48">
<use xlink:href="/static/matrix-theme/matrixicons.svg#off"></use>
</svg>
</div>
<div class="name">Front Room {{itemValue('FrontRoomSw1')}}</div>
</div>
<div class="widget" ng-if="itemValue('FrontRoomSw1')=='ON'" ng-click="sendCmd('FrontRoomSw1', 'OFF')">
<div class="icon on">
<svg viewBox="0 0 48 48">
<use xlink:href="/static/matrix-theme/matrixicons.svg#on"></use>
</svg>
</div>
<div class="name">Front Room {{itemValue('FrontRoomSw1')}}</div>
</div>
<div class="slider-div" ng-init='FrontRoomDim1={"name": "Kitchen Bar Brightness", "item": "FrontRoomDim1",
"floor" : 0,
"ceil": 100,
"step": 10,
"hidelabel" : "true",
"hidelimits": "true"
}'>
<widget-slider ng-model="FrontRoomDim1" />
</div>
<div class="widget" ng-if="itemValue('BackEveSw1')=='OFF'" ng-click="sendCmd('BackEveSw1', 'ON')">
<div class="icon off">
<svg viewBox="0 0 48 48">
<use xlink:href="/static/matrix-theme/matrixicons.svg#off"></use>
</svg>
</div>
<div class="name">Back Eave {{itemValue('BackEveSw1')}}</div>
</div>
<div class="widget" ng-if="itemValue('BackEveSw1')=='ON'" ng-click="sendCmd('BackEveSw1', 'OFF')">
<div class="icon on">
<svg viewBox="0 0 48 48">
<use xlink:href="/static/matrix-theme/matrixicons.svg#on"></use>
</svg>
</div>
<div class="name">Back Eave {{itemValue('BackEveSw1')}}</div>
</div>
<div class="slider-div" ng-init='BackEveDim1={"name": "Back Eave Brightness", "item": "BackEveDim1",
"floor" : 0,
"ceil": 100,
"step": 10,
"hidelabel" : "true",
"hidelimits": "true"
}'>
<widget-slider ng-model="BackEveDim1" />
</div>
<div class="widget" ng-if="itemValue('EnsuiteMasterSw1')=='OFF'" ng-click="sendCmd('EnsuiteMasterSw1', 'ON')">
<div class="icon off">
<svg viewBox="0 0 48 48">
<use xlink:href="/static/matrix-theme/matrixicons.svg#off"></use>
</svg>
</div>
<div class="name">Ensuite Ceiling {{itemValue('EnsuiteMasterSw1')}}</div>
</div>
<div class="widget" ng-if="itemValue('EnsuiteMasterSw1')=='ON'" ng-click="sendCmd('EnsuiteMasterSw1', 'OFF')">
<div class="icon on">
<svg viewBox="0 0 48 48">
<use xlink:href="/static/matrix-theme/matrixicons.svg#on"></use>
</svg>
</div>
<div class="name">Ensuite Ceiling {{itemValue('EnsuiteMasterSw1')}}</div>
</div>
<div class="slider-div" ng-init='EnsuiteCeilingDim1={"name": "Ensuite Ceiling", "item": "EnsuiteCeilingDim1",
"floor" : 0,
"ceil": 100,
"step": 10,
"hidelabel" : "true",
"hidelimits": "true"
}'>
<widget-slider ng-model="EnsuiteCeilingDim1" />
</div>
<div class="widget" ng-if="itemValue('VerandahSw1')=='OFF'" ng-click="sendCmd('VerandahSw1', 'ON')">
<div class="icon off">
<svg viewBox="0 0 48 48">
<use xlink:href="/static/matrix-theme/matrixicons.svg#off"></use>
</svg>
</div>
<div class="name">Verandah {{itemValue('VerandahSw1')}}</div>
</div>
<div class="widget" ng-if="itemValue('VerandahSw1')=='ON'" ng-click="sendCmd('VerandahSw1', 'OFF')">
<div class="icon on">
<svg viewBox="0 0 48 48">
<use xlink:href="/static/matrix-theme/matrixicons.svg#on"></use>
</svg>
</div>
<div class="name">Verandah {{itemValue('VerandahSw1')}}</div>
</div>
<div class="slider-div" ng-init='VerandahDim1={"name": "Verandah Downlights", "item": "VerandahDim1",
"floor" : 0,
"ceil": 100,
"step": 10,
"hidelabel" : "true",
"hidelimits": "true"
}'>
<widget-slider ng-model="VerandahDim1" />
</div>
</div>
</div>
</div>