smartVISU: device.dimmer in Verbindung mit Fibaro Dimmer 2 FGD-212

[KraxelHuber]

Ich versuche einen Fibaro Dimmer 2 FGD-212 in smartVISU einzurichten. Dabei würde ich gerne device.dimmer benutzen, aber mir ist die Einrichtung nicht klar. In der entsprechenden html-Datei sieht meine Einbindung wie folgt aus:

Code Auswählen Erweitern

{{ device.dimmer('Dimmer', 'dimmer_wz.sw', 'dimmer_wz.sl', 0, 100, 5) }}

Mir ist jetzt nicht klar, welche Einstellungen ich für die beiden GADs vornehmen muss. Kann hier jemand aushelfen?


Wenn ich den Dimmer nur als Switch definiere, funktioniert die Steuerung über smartVISU:

Code Auswählen Erweitern

{{ basic.switch('Dimmer', 'dimmer_wz.sw') }}

Dabei habe ich das GAD wie folgt in FHEM definiert:

mode: item
device: dimmer_wz
reading: state
converter: OnOff
cmd set: state

[raman]

Deine erste Definition ist nicht ganz richtig, da an 2. Stelle noch der Name des Dimmers mitgegeben wird.

Code Auswählen Erweitern

{{ device.dimmer('Dimmer', 'Name_des_Dimmers', 'dimmer_wz.sw', 'dimmer_wz.sl', 0, 100, 5) }}

[KraxelHuber]

Du hast Recht, habe es hier falsch gepostet. Die eigentliche Frage ist aber, wie ich die GADs in FHEM definieren muss?

[KraxelHuber]

Ich habe eine Lösung gefunden, mit der ich das Licht direkt an- und ausschalten als auch per Slider dimmen kann.

In der entsprechenden HTML Datei habe ich den Dimmer wie folgt definiert:

Code Auswählen Erweitern

{{ device.dimmer('Dimmer', 'dimmer_wz', 'dimmer_wz.sw', 'dimmmer_wz.sl', 0, 100, 5) }}

Die GADs in FHEM habe ich dann wie folgt definiert:

dimmer_wz.sw:

mode: item
device: dimmer_wz
reading: state
converter: OnOff
set cmd: state


dimmer_wz.sl

mode: item
device: dimmer_wz
reading: state
converter: NumDirekct
set cmd: dim

[wthiess]

Hallo!

Frage? Soweit so gut.
Allerdings wenn ich z.B. den Dimmer auf 30% setze und dann auf off (egal ob in Fhem oder smartVisu) schalte bleibt er Dimmer auf 30%. Ich habe nun mit einigen notifys gespielt komm aber nicht ganz zurecht. Es gibt immer einen Hacken.

lg
Wolfgang

Code Auswählen Erweitern

define WZ_Dimmer_on notify ZWave_SWITCH_MULTILEVEL_8:on set ZWave_SWITCH_MULTILEVEL_8 dim 100
define WZ_Dimmer_off notify ZWave_SWITCH_MULTILEVEL_8:off set ZWave_SWITCH_MULTILEVEL_8 dim 0

define WZ_Dimmer_0 notify ZWave_SWITCH_MULTILEVEL_8:dim:0 set ZWave_SWITCH_MULTILEVEL_8 off
define WZ_Dimmer_100 notify ZWave_SWITCH_MULTILEVEL_8:dim:100 set ZWave_SWITCH_MULTILEVEL_8 on



[australien]

Ich habe eine Lösung gefunden, mit der ich das Licht direkt an- und ausschalten als auch per Slider dimmen kann.

In der entsprechenden HTML Datei habe ich den Dimmer wie folgt definiert:

Code Auswählen Erweitern

{{ device.dimmer('Dimmer', 'dimmer_wz', 'dimmer_wz.sw', 'dimmmer_wz.sl', 0, 100, 5) }}

Die GADs in FHEM habe ich dann wie folgt definiert:

dimmer_wz.sw:

mode: item
device: dimmer_wz
reading: state
converter: OnOff
set cmd: state


dimmer_wz.sl

mode: item
device: dimmer_wz
reading: state
converter: NumDirekct
set cmd: dim

Hallo

ich habe gerade mit smartVISU begonnen und komme bei den Dimmer nicht weiter.

habe alles so gemacht wie du es beschrieben hast, leider funktioniert nur der Switch. von einen Slider ist leider nichts zu sehen (siehe screenshot)

[herrmannj]

schau mal hier, die doku ist gut brauchbar http://docu.smartvisu.de/2.7/index.php?page=basic/widget_basic.slider

Beliebter Fehler: die id falsch (doppelt). Sonst in der browser console nach (js/html) Fehlern suchen. Und (sv) cache löschen !!!

... cache löschen sagte ich - oder ? (ganz wichtig)

[australien]

ich dachte bei device.dimmer ist der slider schon integriert?

[herrmannj]

ja, hab Deinen post nicht genau genug gelesen. Die Antwort bleibt aber gleich nur der doku link ist dann anders http://docu.smartvisu.de/2.7/index.php?page=device/widget_device.dimmer

Wenn Du den slider nicht siehst:

Beliebter Fehler: die id falsch (doppelt). Sonst in der browser console nach (js/html) Fehlern suchen. Und (sv) cache löschen !!!

... cache löschen sagte ich - oder ? (ganz wichtig)

[australien]

kein Problem, ich sage danke für die Hilfe

der Cache ist nun leer und es funktioniert fast, der slider ist leider nur ca 1-2mm! also nicht verschiebbar? egal ob am PC mit IE, edge oder iPhone oder AndroidTablet

die Werte sind 0-100, meine smartVISU ist 2.8

Code Auswählen Erweitern

{{ device.dimmer('dimmer_wz', 'Dimmer', 'dimmer_wz.sw', 'dimmmer_wz.sl', 10, 95, 5) }}

[herrmannj]

dann scheint da was im html nicht zu stimmen ..

[smai]

Zeig mal das den Quellcode der ganzen Seite.

[australien]

der smartVISU Code

Code Auswählen Erweitern


/**
* -----------------------------------------------------------------------------
* @package     smartVISU
* @author      Robert
* @copyright   2018
* @license     GPL [http://www.gnu.de]
* -----------------------------------------------------------------------------
*/


{% extends "rooms.html" %}

{% block content %}

<h1><img class="icon" src='{{ icon0 }}scene_livingroom.svg'/>Wohnzimmer</h1>
<div class="preblock">
</div>
<div class="block">
<div class="set-2" data-role="collapsible-set" data-theme="c" data-content-theme="a" data-mini="true">
<div data-role="collapsible" data-collapsed="false" >
<h3>Licht</h3>
<table width="90%">
<tr>
<td align="left" width="100px">
{{ basic.switch('Christbaum', 'Christbaum.sw', 'light_downlight.svg', 'light_downlight.svg') }}
</td>
<td>Christbaum</td>
</tr>

<tr>
<td align="left" width="100px">
{{ basic.switch('TabletAccu', 'TabletAccu.sw', 'light_wire_system_1.svg', 'light_wire_system_1.svg') }}
</td>
<td>TabletAccu</td>
</tr>

<tr>
<td align="left" width="100px">
{{ device.dimmer('dimmer_wz', 'Dimmer', 'dimmer_wz.sw', 'dimmmer_wz.sl', 10, 95, 5) }}
</td>
<td>DeckenDimmer</td>
</tr>
</table>
</div>
<div data-role="collapsible" data-collapsed="false" >
<h3>Rollo</h3>
<table width="90%">
<tr>
<td align="left" width="100px">
  {{ basic.slider('Fenster_SE', 'Fenster_SE.value', 0, 100, 10, 'vertical') }}
</td>
<td>Fenter Südost</td>
</tr>




</table>
</div>
</div>
</div>


{% endblock %}




der generierte html Code

Code Auswählen Erweitern


<!DOCTYPE html>

<html>
<head>
<title>fronthem [smartVISU]</title>

<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1, maximum-scale=1.3, minimum-scale=1" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta http-equiv="expires" content="0" />

<link rel="icon" href="favicon.png" />
<link rel="icon" href="favicon.ico" type="image/x-icon" />
<link rel="apple-touch-icon" href="favicon.png" />

<link rel="stylesheet" href="vendor/jquery.mobile/jquery.mobile.structure-1.3.2.min.css" />
<script type="text/javascript" src="vendor/jquery/jquery-2.0.3.min.js"></script>


<script type="text/javascript" src="vendor/jquery.mobile/jquery.mobile-1.3.2.min.js"></script>
<script type="text/javascript" src="lib/base/jquery.mobile.slider.js"></script>

<script type="text/javascript" src="vendor/plot.highcharts/highcharts.js"></script>
<script type="text/javascript" src="designs/cube.js"></script>
<script type="text/javascript" src="widgets/widget.js"></script>


<script type="text/javascript" src="lib/base/base.js"></script>
<script type="text/javascript" src="lib/base/base.php"></script>
<script type="text/javascript" src="driver/io_domotiga.js"></script>

<link rel="stylesheet" type="text/css" href="designs/cube.min.css" />
<link rel="stylesheet" type="text/css" href="pages/base/base.css" />

<script type="text/javascript" src="pages/MeineWohnung/visu.js"></script>
<link rel="stylesheet" type="text/css" href="pages/MeineWohnung/visu.css" />

</head>


<body>

<script type="text/javascript">
io.init('10.68.0.21', '2121');
activateAutoReconnect();

// Do some actions before page is shown
$(document).on('pagebeforeshow', function () {
fx.init();
repeater.init();
widget.prepare();
// repeater.list();
});

// Run the io and all widgets
$(document).on('pageshow', function () {
io.run(1);
// console.log('[io] run');       
notify.display();
// widget.list();
});

$.mobile.page.prototype.options.domCache = true;
</script>


<div data-role="page" id="room_wohnen" class="base" data-theme="a">
<div data-role="header" data-position="fixed" data-tap-toggle="false">
<div class="ui-left">


<div id="menu" class="menu">

<a id="menu-rooms" class="icon1" href="index.php">
<img class="icon" src="icons/ws/control_building_empty.svg" /></a>

<a id="menu-category" class="icon1" href="index.php?page=category">
<img class="icon" src="icons/ws/time_manual_mode.svg" /></a>

<a id="menu-apps" class="icon1" href="index.php?page=apps">
<img class="icon" src="icons/ws/it_net.svg" /></a>

<a id="menu-system" class="icon1" href="index.php?page=config">
<img class="icon" src="icons/ws/edit_settings.svg" /></a>

</div>
</div>
<div class="ui-right">
<a href="javascript:window.location.href=window.location.href" style="text-decoration:none;color:#fff;">

<span class="smartvisu"><span class="smart">smart</span><span class="visu">VISU</span></span>


<div class="mini">
<span id="miniclock" class="miniclock" data-widget="clock.miniclock" data-repeat="1i">10:36</span>, 11.01, v2.8</div>
</a>
</div>
<div class="signal hide" onClick="$('.ui-page-active .alert').popup('open');"></div>
<div class="alert" data-role="popup" data-overlay-theme="a">
<div data-role="header" data-theme="c"><h1></h1></div>
<p></p>

<div class="control">
<span class="stamp"></span>
<a onClick="notify.remove();" class="ui-mini" data-icon="check" data-iconpos="top" data-role="button" data-inline="true">OK</a>
<a onClick="$('.alert').popup('close');" class="ui-mini" data-icon="delete" data-iconpos="top" data-role="button" data-inline="true">Cancel</a>
</div>
</div>
</div>

<div data-role="content" class="page-bg">
<div class="primary" style="background-image: none;">

<h1><img class="icon" src='icons/ws/scene_livingroom.svg'/>Wohnzimmer</h1>
<div class="preblock">
</div>
<div class="block">
<div class="set-2" data-role="collapsible-set" data-theme="c" data-content-theme="a" data-mini="true">
<div data-role="collapsible" data-collapsed="false" >
<h3>Licht</h3>
<table width="90%">
<tr>
<td align="left" width="100px">

<span id="room_wohnen-Christbaum" data-widget="basic.switch" data-item="Christbaum.sw"
data-val-on="1" data-val-off="0"
data-pic-on="icons/ws/light_downlight.svg" data-pic-off="icons/ws/light_downlight.svg"
class="switch icon">
<a>


<img id="room_wohnen-Christbaum-off" class="icon " src="icons/ws/light_downlight.svg">




<img id="room_wohnen-Christbaum-on" class="icon icon1 hide" src="icons/ws/light_downlight.svg">


</a>
</span>


</td>
<td>Christbaum</td>
</tr>

<tr>
<td align="left" width="100px">

<span id="room_wohnen-TabletAccu" data-widget="basic.switch" data-item="TabletAccu.sw"
data-val-on="1" data-val-off="0"
data-pic-on="icons/ws/light_wire_system_1.svg" data-pic-off="icons/ws/light_wire_system_1.svg"
class="switch icon">
<a>


<img id="room_wohnen-TabletAccu-off" class="icon " src="icons/ws/light_wire_system_1.svg">




<img id="room_wohnen-TabletAccu-on" class="icon icon1 hide" src="icons/ws/light_wire_system_1.svg">


</a>
</span>


</td>
<td>TabletAccu</td>
</tr>

<tr>
<td align="left" width="100px">

<div class="dimmer">

<span id="room_wohnen-dimmer_wzswitch" data-widget="basic.switch" data-item="dimmer_wz.sw"
data-val-on="1" data-val-off="0"
data-pic-on="icons/ws/light_light.svg" data-pic-off="icons/ws/light_light.svg"
class="switch icon">
<a>


<img id="room_wohnen-dimmer_wzswitch-off" class="icon " src="icons/ws/light_light.svg">




<img id="room_wohnen-dimmer_wzswitch-on" class="icon icon1 hide" src="icons/ws/light_light.svg">


</a>
</span>


<p>Dimmer</p>

<input id="room_wohnen-dimmer_wzslider" data-widget="basic.slider" data-item="dimmmer_wz.sl"
type="range" value="0" min="10" max="95" step="5"
orientation="" data-highlight="true" />


</div>


</td>
<td>DeckenDimmer</td>
</tr>
</table>
</div>
<div data-role="collapsible" data-collapsed="false" >
<h3>Rollo</h3>
<table width="90%">
<tr>
<td align="left" width="100px">
 
<input id="room_wohnen-Fenster_SE" data-widget="basic.slider" data-item="Fenster_SE.value"
type="range" value="0" min="0" max="100" step="10"
orientation="vertical" data-highlight="true" />


</td>
<td>Fenter Südost</td>
</tr>




</table>
</div>
</div>
</div>


</div>
<div class="secondary minimum-tablet">


<ul data-role="listview" data-dividertheme="c">

<li data-role="list-divider">Erdgeschoss</li>
<li data-icon="false">
<a href="index.php?page=room_kueche">
<img class="icon"' src='icons/ws/scene_sleeping_alternat.svg'/><h3>Kueche</h3>

<div class="ui-li-aside"></div>
</a>
</li>
<li data-icon="false">
<a href="index.php?page=room_essen">
<img class="icon"' src='icons/ws/scene_sleeping_alternat.svg'/><h3>Esszimmer</h3>

<div class="ui-li-aside"></div>
</a>
</li>
<li data-icon="false">
<a href="index.php?page=room_wohnen">
<img class="icon"' src='icons/ws/scene_sleeping_alternat.svg'/><h3>Wohnzimmer</h3>

<div class="ui-li-aside"></div>
</a>
</li>
<li data-role="list-divider">Obergeschoss</li>
<li data-icon="false">
<a href="index.php?page=room_schlafen">
<img class="icon"' src='icons/ws/scene_sleeping_alternat.svg'/><h3>Schlafzimmer</h3>

<div class="ui-li-aside"></div>
</a>
</li>
<li data-icon="false">
<a href="index.php?page=room_bad">
<img class="icon"' src='icons/ws/scene_sleeping_alternat.svg'/><h3>Bad</h3>

<div class="ui-li-aside"></div>
</a>
</li>
<li data-icon="false">
<a href="index.php?page=room_buben">
<img class="icon"' src='icons/ws/scene_sleeping_alternat.svg'/><h3>Buben</h3>

<div class="ui-li-aside"></div>
</a>
</li>

</ul>

</div>
</div>
</div>


</body>
</html>



[australien]

wenn ich die Table weglasse funktioniert es, komisch?

[smai]

wenn ich die Table weglasse funktioniert es, komisch?

Nein, nicht komisch:
100px sind einfach viel zu schmal für den Dimmer; da passt wie in deinem Screenshot genau der Handle rein.
Das Icon und der Abstand links ergeben schon 68px. Der Handle hat dann 30px - sind zusammen 98px.

Die Breite von Tabellen und Zellen in Pixeln wird übrigens im width-Attribut korrekterweise ohne "px" geschrieben (im Gegensatz zu CSS).
Tables sind in einem responsive Design allgemein nicht zu empfehlen. Erst recht nicht mit den deprecated Attributen width und align, diese sollten per CSS gesetzt werden.

[australien]

Danke smai!
das erklärt natürlich einiges.