Neues Design für SmartVISU? erste Version im Anhang

[FlorianZ]

@exot

Könntest du bitte einen neuen thread diesbezüglich öffnen.
Es wäre auch hilfreich wenn du deine Definitionen mit posten könntest.
(html von Smartvisu und die Gads von Fhem)
Am besten auch noch welche Rollos das sind (Homematic, ZWave...)

vg
Florian

[exot]

Moin Florian,
Habe gerade Deine Zip geladen entpackt und eingespielt.
Gafällt mir super!!!!!
Danke für die Arbeit. Ausgezeichnet gefallen mir die Lösungen der Rollläden im Schlafzimmer.
Im Wohnzimmer sind sie leider ohne Funktion. Ich denke aber die werden genau so funktionieren.
Ich erwähne die Rollläden aber nur deshalb weil ich in meiner Konfiguration noch nicht weiter bin.
Alles andere ist genauso toll. Was hast Du bei den Raumtemperaturen für Geräte eingesetzt?

In der Datei index.php auf der obersten smartVISU Ebene sollte noch folgendes ergänzt werden:

ich bin mir hier nicht sicher wo ich einfügen soll:

Code Auswählen Erweitern

<?php
/**
 * -----------------------------------------------------------------------------
 * @package     smartVISU
 * @author      Martin Gleiß
 * @copyright   2012
 * @license     GPL [http://www.gnu.de]
 * -----------------------------------------------------------------------------
 */

/**
 * Version of smartVISU
 */
define ('config_version', '2.7');

// get config-variables 
require_once 'lib/includes.php';
require_once const_path_system.'functions_twig.php';

// init parameters
$request = array_merge($_GET, $_POST);

// detect page and path
if ($request['page'] == '')
$request['page'] = config_index;

if (is_file(const_path."pages/".config_pages."/".$request['page'].".html")
or is_file(const_path."apps/".$request['page'].".html")
or is_file(const_path."pages/smarthome/".$request['page'].".html")
or is_file(const_path."pages/base/".$request['page'].".html")
)
{
// init template engine
require_once const_path.'vendor/Twig/Autoloader.php';
Twig_Autoloader::register();

$loader = new Twig_Loader_Filesystem(const_path.'apps');

if (is_dir(const_path.'pages/'.config_pages))
$loader->addPath(const_path.'pages/'.config_pages);

if (dirname($request['page']) != '.')
$loader->addPath(const_path.'pages/'.config_pages.'/'.dirname($request['page']));

// add dir if is not directly choosen
if (config_driver == 'smarthome.py' and config_pages != 'smarthome' and is_dir(const_path."pages/smarthome"))
$loader->addPath(const_path.'pages/smarthome');

$loader->addPath(const_path.'pages/base');
$loader->addPath(const_path.'widgets');

// init environment
$twig = new Twig_Environment($loader);

if (config_cache)
$twig->setCache(dirname(__FILE__).'/temp');

foreach ($request as $key => $val)
{
if ($key == "page")
$val = basename(str_replace('.', '_', $val));

$twig->addGlobal($key, $val);
}
$twig->addGlobal('pagepath', dirname($request['page']));

if (config_design == 'ice')
{
$twig->addGlobal('icon1', 'icons/bl/');
$twig->addGlobal('icon0', 'icons/sw/');
}
elseif (config_design == 'greenhornet')
{
$twig->addGlobal('icon1', 'icons/gn/');
$twig->addGlobal('icon0', 'icons/ws/');
}
else
{
$twig->addGlobal('icon1', 'icons/or/');
$twig->addGlobal('icon0', 'icons/ws/');
}

foreach (get_defined_constants() as $key => $val)
{
if (substr($key, 0, 6) == 'config')
$twig->addGlobal($key, $val);
}

$twig->addFilter('_', new Twig_Filter_Function('twig_concat'));
$twig->addFilter('round', new Twig_Filter_Function('twig_round'));
$twig->addFilter('bit', new Twig_Filter_Function('twig_bit'));
$twig->addFilter('substr', new Twig_Filter_Function('twig_substr'));
$twig->addFilter('smartdate', new Twig_Filter_Function('twig_smartdate'));

$twig->addFunction('uid', new Twig_Function_Function('twig_uid'));
$twig->addFunction('once', new Twig_Function_Function('twig_once'));
$twig->addFunction('isfile', new Twig_Function_Function('twig_isfile'));
$twig->addFunction('dir', new Twig_Function_Function('twig_dir'));
$twig->addFunction('docu', new Twig_Function_Function('twig_docu'));
$twig->addFunction('lang', new Twig_Function_Function('twig_lang'));
$twig->addFunction('implode', new Twig_Function_Function('twig_implode', array('is_safe' => array('html'))));

// init lexer comments                   
$lexer = new Twig_Lexer($twig, array('tag_comment' => array('/**', '*/')));
$twig->setLexer($lexer);

// load template
try
{
$template = $twig->loadTemplate($request['page'].'.html');
$ret = $template->render(array());

// try to zip the output
if ((strpos($_SERVER['HTTP_ACCEPT_ENCODING'], 'gzip') !== false) && (ini_get('zlib.output_compression') !== false))
{
header("Content-Encoding: gzip");
$ret = "\x1f\x8b\x08\x00\x00\x00\x00\x00".substr(gzcompress($ret, 9), 0, -4).pack("V", crc32($ret)).pack("V", strlen($ret));
}
echo $ret;
}
catch (Exception $e)
{
// header("HTTP/1.0 602 smartVISU Template Error");

echo "<pre>\n";
echo str_repeat(" ", 71)."smartVISU\n";
echo str_repeat(" ", 62).date('H:i, d.m').", v".config_version."\n";
echo str_repeat("-", 80)."\n\n";
echo "Error accoured in twig-template engine!\n\n";
echo "error: <b>".$e->getRawMessage()."</b>\n";
echo "file:  ".$e->getTemplateFile()."\n";
echo "line:  ".$e->getTemplateLine()."\n\n";
echo str_repeat("-", 80)."\n\n";
echo "\n</pre>";
}
}
else
{
header("HTTP/1.0 404 Not Found");

echo "<pre>\n";
echo str_repeat(" ", 71)."smartVISU\n";
echo str_repeat(" ", 62).date('H:i, d.m').", v".config_version."\n";
echo str_repeat("-", 80)."\n\n";
echo "Error loading Page '<b>".$request['page']."</b>' !\n\n";
echo "Check config.php -> 'config_pages' for correct Pages/Project configuration\n";
echo "or try the <a href='index.php'>index</a> page!\n\n";
echo str_repeat("-", 80)."\n\n";
echo "\n</pre>";
}
?>

Nochmals besten Dank!
Michael

[FlorianZ]

Moin Moin,

Die Ergänzung in der index.php ist das im Design flat-tiles die Icons als png
in grün gehighlightet werden.

Bitte folgendes :

Code Auswählen Erweitern


elseif (config_design == 'flat-tiles')
{
$twig->addGlobal('icon1', 'icons/gn/');
$twig->addGlobal('icon0', 'icons/ws/');
}


direkt unter:

Code Auswählen Erweitern


elseif (config_design == 'greenhornet')
{
$twig->addGlobal('icon1', 'icons/gn/');
$twig->addGlobal('icon0', 'icons/ws/');
}


einfügen.

Es sollte dann so aussehen:

Code Auswählen Erweitern


if (config_design == 'ice')
{
$twig->addGlobal('icon1', 'icons/bl/');
$twig->addGlobal('icon0', 'icons/sw/');
}
elseif (config_design == 'greenhornet')
{
$twig->addGlobal('icon1', 'icons/gn/');
$twig->addGlobal('icon0', 'icons/ws/');
}
elseif (config_design == 'flat-tiles')
{
$twig->addGlobal('icon1', 'icons/gn/');
$twig->addGlobal('icon0', 'icons/ws/');
}
else
{
$twig->addGlobal('icon1', 'icons/or/');
$twig->addGlobal('icon0', 'icons/ws/');
}


Möchtest du Dachfensterrollos oder normale Rollos anlegen?

vg
Florian

[FlorianZ]

Achja

Die Sensoren sind Z-Wave Multisensoren.

[exot]

Hallo Florian,
Danke für Deine Nachricht.
Ich experimentiere schon den ganzen Vormittag.
Ich benötige nur normale Rollos.
Ich bin mir sicher, dass ich Deinen Vorschlag übernehmen werde.
Wie gesagt gefällt mir sehr gut.
Ich hätte da noch eine Idee. Weiß zwar nicht ob die sinnvoll ist bzw ob sie sich realisieren lässt.
Wenn ein Raum z.B. mehrere Rollläden hat (ich habe keinen R. Tick-nur weiter bin ich noch nicht),
könnte man die alle unter einem Fenster darstellen und beim Cklick auf den Bestimmten wird dann der zugehörige slider/shifter  aktiviert.
Verstehst Du was ich meine.
Gruß Michael

[FlorianZ]

Verstehst Du was ich meine.

Ja ich verstehe. 

Du kannst einen größeren Block nehmen wie zb. <div class="block2"> oder <div class="block3">
und dort statt einen Icon mehrere nebeneinander mit einen table oder div positionieren.
Im footer kannst du dann unter jedes Icon ein Button für ein Popup platzieren.
Im jeweiligen Popup dann die Bedienelemente (slider oder controlgroup) für das Rollo.
Fertig..

Weiß zwar nicht ob die sinnvoll ist

Viele Wege führen nach Rom 

Ich verfolge den Ansatz: 1Device -> 1Block .
Kann aber jeder nach seinem Geschmack anlegen.

vg
Florian

[exot]

Hallo Florian,
Ich habe mir einen Fehler eingebaut und stehe auf der Stelle.
Kannst Du bitte mal sehen ob Du etwas findest?
runter

[exot]

Rollo zu wird übernommen                                    = ok
Rollo hoch fährt nur ca 50%                                  = nicht ok
shifter zeigt % an aber Rollo verändert sich nicht  = nicht ok
my soll 50% fährt aber mehr                                 = nicht ok

Das ist der cod Wohnzimmer:

Code Auswählen Erweitern

* -----------------------------------------------------------------------------
* @package     smartVISU
* @author      Martin Gleiß
* @copyright   2012
* @license     GPL [http://www.gnu.de]
* -----------------------------------------------------------------------------
*/


{% extends "rooms.html" %}

{% block content %}

<div class="block1">
<div class="ui-bar-b">
Rolladen Terrassentuer
</div>
<div class="ui-fixed ui-body-a">
<div class="block-icon">
{{basic.shifter ('shifter3', '', 'Rollo_Wohnzimmer_L', icon0~'fts_shutter_00.png', icon0~'fts_shutter.png', '0', '99') }}
</div>
<div class="block-operation">
     <div data-role="controlgroup" data-type="horizontal">
{{ basic.button('gb1', 'Rollo_Wohnzimmer_L', '', icon0~'fts_shutter_10.png', '0', 'midi') }}
{{ basic.button('gb2', 'Rollo_Wohnzimmer_L', 'my', '', '50', 'midi') }}
{{ basic.button('gb3', 'Rollo_Wohnzimmer_L', '', icon0~'fts_shutter_90.png', '100', 'midi') }}
                    </div>
</div>
<div class="block-footer">
{{ basic.slider('slider3', 'Rollo_Wohnzimmer_L', 0, 100, 1) }}
</div>
</div>
    </div>

{% endblock %}



und das  Raum Menü:

Code Auswählen Erweitern

/**
* -----------------------------------------------------------------------------
* @package     smartVISU
* @author      Martin Gleiß
* @copyright   2012
* @license     GPL [http://www.gnu.de]
* -----------------------------------------------------------------------------
*/


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

<li data-role="list-divider">Erdgeschoss</li>

<li data-icon="false">
<a href="index.php?page=room_entrance">
<img class="icon"' src='{{ icon0 }}scene_corridor.png'/><h3>Eingang</h3>

<div class="ui-li-aside"></div>
</a>
</li>
<li data-icon="false">
<a href="index.php?page=room_cubby">
<img class="icon"' src='{{ icon0 }}scene_cubby.png'/><h3>Therme</h3>

<div class="ui-li-aside"></div>
</a>
</li>
<li data-icon="false">
<a href="index.php?page=room_guesttoilet">
<img class="icon"' src='{{ icon0 }}scene_toilet.png'/><h3>Gästetoilette</h3>

<div class="ui-li-aside"></div>
</a>
</li>
<li data-icon="false">
<a href="index.php?page=room_hall">
<img class="icon"' src='{{ icon0 }}scene_hall.png'/><h3>Diele</h3>

<div class="ui-li-aside"></div>
</a>
</li>
<li data-icon="false">
<a href="index.php?page=room_living">
<img class="icon"' src='{{ icon0 }}scene_livingroom.png'/><h3>Wohnzimmer</h3>

<div class="ui-li-aside"></div>
</a>
</li>
<li data-icon="false">
<a href="index.php?page=room_kitchen">
<img class="icon"' src='{{ icon0 }}scene_cooking_hob.png'/><h3>Kücke</h3>

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



</ul>



Danke Michael

[FlorianZ]

Kannst du bitte noch einen screenshot von deinen Gad-Editor  Rollo_Wohnzimmer_L
in Fhem machen.
Ich tippe dort auf einen Fehler.

[exot]

Hallo Florian,
Es läuft. Zwar erst nur unter smartVisu aber ich bin für mich zufrieden.
Wie bekomme ich jetzt den Ausschnitt mit dem Rolladen auf eine kleinere Größe.
So wie bei Dir.
https://www.dropbox.com/s/5hh64lfwrxqvup5/Screenshot%202015-08-15%2018.37.09.png?dl=0

Wie kann ich einen screenshot einfügen?

Grüß Michael

[FlorianZ]

Super das die Rollos laufen.

wegen der VISU:

1. Geh in smartVISU oben links auf die Zahnräder
2. Bei Pages FlorianZ wählen
3. Bei Design flat-tiles wählen
4. Save
5. Page reload

Mach mal soweit dann sehen wir weiter.
Eventuell musst du noch die Temporären Dateien löschen wenn dein Page-Cache an ist.

wegen Screenshot:

- klick mal auf Erweiterte Optionen
- Datei anhängen

vg
Florian

[exot]

Hallo,
Super das Grün!
Jetzt nur noch die Größe ändern.

[exot]

hat leider nicht geklappt
und jetzt

[FlorianZ]

OK Design hat er übernommen aber nicht meine Pages.

Nimm mal meine visu.css aus dem Ordner FlorianZ und ersetze damit deine visu.css.
Deine visu.css liegt im gleichen Verzeichniss in dem du deine Räume anlegst.
Danach bitte Screenshot

[exot]

geklappt 
Danke!