Neues Design für SmartVISU? erste Version im Anhang

[FlorianZ]

Hallo zusammen,

nachdem ich jetzt tagelang meine visu.css  "vergewaltigt" habe, wollt ich euch das Ergebnis mal vorstellen.
Es sind so ziemlich alle Farbverläufe, Rundungen und Schattierungen rausgeflogen.
Bei Interesse könnte ich versuchen (mit Hilfe) da eine Designvorlage zu basteln.

vg
Florian

[Thargor]

Ich hätte Interesse ...

[eppi]

Sieht super aus, hätte ebenfalls interesse...

[herrmannj]

Hi Florian,

sieht sehr gut aus !

Ich weiß nicht ob Du das hier kennst
https://code.google.com/p/smartvisu/wiki/themeroller
.. kann helfen.

Bei der (kommenden) 2.8 dürfte sich das design - handling der prefixe für die icons etwas ändern. Weil die svg sind bräuchte man eigentlich nicht keine (hell|dunkel) directorys mehr - die könnten im css gefärbt werden.

vg
joerg

[FlorianZ]

Hallo Jörg,

den themeroller kannte ich nicht.
Muss ich mich gleich mal damit auseinandersetzen.
Ich habe bei mir alles mit der Browserkonsole gesucht
und in der visu.css überschrieben.
Auf der Grundlage könnte ich ja jetzt ein bestehendes Design
(greenhornet) anpassen. Oder?
Problematisch wird die Anordnung in den Blocks.
Bei mir hab ich das mit verschiedenen tables und divs gelöst.
Wenn das komplette widgets wären, würde man sich viel leichter
mit dem erstellen tun. (Von widgets erstellen habe ich keinen plan!)

vg
Florian

[exot]

Hallo,
Das sieht ja sehr gut aus.
Ich habe smartVisu bereits installiert. Leider bekomme ich es nicht hin, das die Aktoren ( Rollladen) geschaltet werden.
Deshalb habe ich es erst mal auf Eis gelegt und befasse mich nun im Anfangsstadium mit HM Wired.
Interesse besteht aber! 
Danke!
Gruß Michael

[pole23]

Gefällt mir auch sehr gut. Wäre auch am Code interessiert.

[FlorianZ]

So mal ein kurzes update.

Design.css ist in arbeit und nimmt gestallt an.
Werde normalerweise noch diese Woche die erste Version hier posten.
Die erste Version wird erstmal auf mein Layout abgestimmt sein.
Besteht nur Interesse an dem Design oder auch am Layout?

vg
Florian

P.S
Es wird noch ein Name für das Design gesucht

[exot]

Hallo Florian,
Ich habe Interesse an beidem.
Hinsichtlich Namen überlege ich noch.
Grüß Michael

[Ban-ya]

Hallo Florian,
ich habe auch Interresse an Beidem ... 
Gruß Uwe

[herrmannj]

Hallo Jörg,

den themeroller kannte ich nicht.
..
Problematisch wird die Anordnung in den Blocks.
Bei mir hab ich das mit verschiedenen tables und divs gelöst.

vg
Florian

Hi,

der themeroller gehört zu jquery. In dem Link gehts aber speziell darum ein smartVisu Design zu erstellen.

Zu den Divs: irgend jemand hat mal ein block Deisgn gemacht, da war das (glaub ich) so drin.

Ansonsten könntest Du auch auf gridster setzen (das ist die Basis auf der die FTUI Jungs arbeiten). Gridster kannst Du aber auch direkt in das smartVisu Design einbauen und dann die widgets normal benutzen. Dürfte allerdings aufwendiger sein. Aber die FTUI Jungs haben das ja auch nicht mal eben nebenbei gemacht.

vg
joerg

[FlorianZ]

Hi,

Ich habe das jetzt recht simple mit der Anordnung in den Blocks gelöst.

Vorteile:
- keine eigenen divs oder tables mehr notwendig
- schnelle Erstellung auch ohne Erfahrung
- einheitliche Optik

Nachteile:
- sehr starres Layout

Meine Blocks sind vereinfacht in 3 Bereiche aufgeteil:
-block-icon
-block-operation
-block-footer

Code Auswählen Erweitern


       <div class="block1">
<div class="ui-bar-b">
Rollo links
</div>
<div class="ui-fixed ui-body-a">
<div class="block-icon">
{{ basic.shifter('shifter1', '', 'Rollo_Schlafzimmer_L', icon0~'fts_window_roof_shutter_00.png', icon0~'fts_window_roof.png', '0', '99') }}
</div>
<div class="block-operation">
     <div data-role="controlgroup" data-type="horizontal">
{{ basic.button('gb7', 'Rollo_Schlafzimmer_L', '', icon0~'fts_window_roof_shutter_10.png', '0', 'midi') }}
{{ basic.button('gb8', 'Rollo_Schlafzimmer_L', 'my', '', '60', 'midi') }}
{{ basic.button('gb9', 'Rollo_Schlafzimmer_L', '', icon0~'fts_window_roof_shutter_100.png', '99', 'midi') }}
                                     </div>
         </div>
<div class="block-footer">
{{ basic.slider('slider3', 'Rollo_Schlafzimmer_L', 0, 99, 1) }}
</div>
</div>
    </div>



In der Design.css ist die Positionierung für diese schon festgelegt zb.:

Code Auswählen Erweitern


.block-operation {
float: left;
width: 195px;
margin-left: 5px;
margin-right: 5px;
height: 112px;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
        align-items: center;
-webkit-justify-content: center;
         justify-content: center;
}


Jetzt sucht man sich nur noch das passende Icon, Schalter oder Controlgroup aus
und kann dies 1:1 in den Block eintragen.

Hier noch ein einfaches Beispiel für eine Lampe:

Code Auswählen Erweitern


<div class="block1">
<div class="ui-bar-b">
Wandleuchte
</div>
<div class="ui-fixed ui-body-a">
<div class="block-icon">
{{ basic.symbol('ws1-1', 'Wandleuchte_Wohnzimmer', '', icon0~'light_wall_1.png', '0') }}
{{ basic.symbol('ws1-2', 'Wandleuchte_Wohnzimmer', '', icon1~'light_wall_1.png', '') }}
</div>
<div class="block-operation">
{{ basic.flip('wzl1', 'Wandleuchte_Wohnzimmer') }}
</div>
<div class="block-footer">
</div>
</div>
    </div>



vg
Florian

[exot]

Hallo Florian,
Danke für Deine Codes.
Im Moment ist noch Sonne satt. Das soll sich aber zum Wochenende ändern.
Dann werde ich sie mal probieren.
Im Moment habe ich aber zwei andere Probleme mit smartVisu.
Hast Du dazu eine Idee?
1. Beispiel Rolladen : smartVisu hoch in Fhem runter. Ich bekomme es nicht hin, dass die Anzeige synchron läuft.
SmartVisu Befehl Rollo hoch/runter wird in Fhem umgekehrt angezeigt.
Ich habe das < basic.shutter > verwendet.
In der linken unteren Ecke ist ein Schalter hoch/runter. was bewirkt der genau. Ist für mich unklar.
Links neben dem Rollo sind 2 Butten hoch/runter. die sind ohne Funktion.

[exot]

Hallo Florian,
Danke für Deine Codes.
Im Moment ist noch Sonne satt. Das soll sich aber zum Wochenende ändern.
Dann werde ich sie mal probieren.
Im Moment habe ich aber zwei andere Probleme mit smartVisu.
Hast Du dazu eine Idee?
1. Beispiel Rolladen : smartVisu hoch in Fhem runter. Ich bekomme es nicht hin, dass die Anzeige synchron läuft.
             ## SmartVisu Befehl Rollo hoch/runter wird in Fhem umgekehrt angezeigt -aber entgegengesetzt!. ##
Ich habe das < basic.shutter > verwendet.
In der linken unteren Ecke ist ein Schalter hoch/runter. was bewirkt der genau. Ist für mich unklar.
Links neben dem Rollo sind 2 Butten hoch/runter. die sind ohne Funktion.
2.        ## Fhem Befehl Rollo hoch/runter wird in smartVisu nicht angezeigt auch nicht entgegengesetzt ##

Das Problem muss ich erst  klären bevor ich weiter mache.
Kannst Du helfen?
Gruß Michael

[FlorianZ]

So die erste Version zum testen ist fertig. 

In der angehängten Datei sind:

-flat-tiles.css
-flat-tiles.min.css
-flat-tiles.js
-flat-tiles.min.js

=> diese bitte in smartVISU/designs kopieren

-index.html
-menu.html
-rooms.html
-rooms_menu.html
-room_schlafzimmer.html
-room_wohnzimmer.html
-visu.css

=> diese sind im Ordner FlorianZ. Bitte nach smartVISU/pages kopieren

Das Design basiert auf Greenhornet und ist bis jetzt nur soweit abgeändert wie es für
mein Layout (Ordner FlorianZ) notwendig ist.
Das Layout ist für eine Auflösung von 1920x1080 optimert.

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

Code Auswählen Erweitern


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


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/');
}


Um in den Räumen oder auf der Indexseite ein neues Device anzulegen kann als Vorlage folgendes verwendet werden:

Code Auswählen Erweitern


<div class="block1">
<div class="ui-bar-b">
Wandleuchte <!-- Kommentar: Hier den Namen eintragen z.b Wandleuchte -->
</div>
<div class="ui-fixed ui-body-a">
<div class="block-icon">
{{ basic.symbol('ws1-1', 'Wandleuchte_Wohnzimmer', '', icon0~'light_wall_1.png', '0') }}
{{ basic.symbol('ws1-2', 'Wandleuchte_Wohnzimmer', '', icon1~'light_wall_1.png', '') }}
<!-- Kommentar: Hier das Icon eintragen z.b basic.symbol , icon.sutter oder <img class="icon" src='{{ icon0 }}temp_temperature.svg'/> -->
</div>
<div class="block-operation">
{{ basic.flip('wzl1', 'Wandleuchte_Wohnzimmer') }}
<!-- Kommentar: Hier die Bedienelemente eintragen z.b basic.flip , basic.button oder basic.button mit einer Contolgroup -->
</div>
<div class="block-footer">
<!-- Kommentar: Hier nach Bedarf slider oder Batterieanzeige usw. eintragen -->
</div>
</div>
          </div>


Es sind 4 Größen der Blocks angelegt:
<div class="block1">
<div class="block2">
<div class="block3">
<div class="block4">

Die Positioniervorlagen (block-icon, block-operation, block-footer) sind derzeit nur mit block1 verwendbar.

So jetzt erstmal viel spaß beim testen...

vg
Florian

[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!

[exot]

Hallo,
So ich bedanke mich nochmals für Deine Geduld.
Für heute mache ich den Rechner aus.
Morgen werde ich versuchen die Verbindung mit Fhem zu realisieren.
Ein schönen Abend so wie ein erholsames Wochenende,
wünscht Michael

[FlorianZ]

Kein Problem

Denk dran das du noch die anderen Dateien aus meinen Ordner übernimmst.

-index.html
-menu.html
-rooms.html
-rooms_menu.html

ebenfalls noch einen schönen Abend

vg
Florian

[Ban-ya]

Hallo Florian,
es sieht schon toll aus 
Was mich noch stört, ist die "Unruhe" beim mouseover.
Das liegt an der unterschiedlichen Höhe der Button.
Da muss wohl noch ein wenig an der css geschraubt werden 
Viele Grüße
Uwe

[FlorianZ]

Hallo Uwe,

ja das gleiche Problem hat auch der slider-button noch.
Werde mich morgen mal damit beschäftigen.

vg
Florian

[exot]

Moin Florian,
Danke für Deine Nachricht.
Habe jetzt die angemerkten html Dateien in mein Projek übernommen.
Die < rooms_menu.html > habe ich zwar integriert aber namentlich geändert.
Sie hätte mir sonst Deine Raumaufteilung eingespielt.
Ist doch so ok?
Nun werde ich versuchen die Verbindung mit Fhem zu realisieren.
Dabei ist mir aufgefallen, dass unter den GAD auch Deine aufgelistet sind.

Diese werde ich entfernen ich.
Dazu gleich eine Frage: wenn jetzt Testversionen unter smartVisu geladen werden, tauchen dann deren GADs immer wieder unter Fhem auf?
oder kann man das unterbinden.
Einen schönen Sonntag
wünscht Michael

[FlorianZ]

Guten Morgen.

Ich würde die empfehlen meine Datei rooms_menu.html zu nehmen.
Du kannst ja dann die Raumnamen und Icons anpassen.
In Fhem kannst du natürlich meine gads die geladen werden löschen.

vg
Florian

[exot]

Hallo,
Habe mal gerade beide Dateien verglichen.
Deine sieht ja ganz anders aus.
Kannst Du mir den Grund nennen warum deine Datei zu bevorzugen ist.
Ich würde ja eh alles entfernen und meine Beschriftung bzw Icons einfügen.
Da ich HIER (fhem usw.) noch ganz am Anfang stehe sind die Codes schon etwas verwirrend und meine Datei ist noch übersichtlich.
Gruß Michael

[FlorianZ]

Im Anhang ein jpg.

vg
Florian

[exot]

Danke für Die Erklärung.
Werde dann Deine Datei verwenden.
Gruß Michael

[FlorianZ]

Hallo zusammen,

im Anhang neue Version mit verbesserten mouseover von flat-tiles.

vg
Florian

[exot]

Hallo,

verbesserten mouseover von flat-tiles

Kannst du das bitte etwas erklären?
Danke
Michael

[FlorianZ]

Das verändert nur damit die Buttons nicht mehr "hochspringen" wenn man mit dem Mauszeiger
über sie fährt.

vg
Florian

[exot]

Danke!
Michael

[Ban-ya]

Hallo zusammen,
im Anhang neue Version mit verbesserten mouseover von flat-tiles.
vg
Florian

Danke!
"leider" habe ich eine Woche Urlaub und kann nix testen.
Ich melde mich dann wieder.
Grüße von der Nordseeküste
Uwe

[exot]

Hallo Florian,
Habe gerade Deine neuen *.css eingearbeitet.
Macht sich prima.
Danke
Gruß Michael

[Ban-ya]

Hallo Florian,
Wo Du Dich schon so toll in der css auskennst, könnte man doch die Button links etwas schmaler gestalten?!
Du hast zwar noch einen Temperaturwert drin stehen, aber sie nehmen der rechten Seite viel Platzweg.
So lang sind die Raumnamen ja nicht.
Was meinst Du?
Gruß Uwe

[r26r26]

Hallo Florian,

das Design gefällt mir - echt super. Wäre es möglich, dass du deinen Code-Schnipsel des Sonos Bereichs hier reinstellst? Ich bekomme aktuell die Abbildung des Covers nicht hin. Merci

[stratege-0815]

Hallo zusammen,
Ich habe hier mal ganz grob quer gelesen. Ich möchte ein Design umsetzen, das auf Green hornet basiert und den "blauen Schatten" von Ice. Ggf noch Icons umfärben.
Mir ist jetzt klar das es funktioniert, aber ich habe äußerst wenig html css Kenntnisse.
Wie kann ich hier am besten vorgehen?
Gruß
Jan

[Morgennebel]

CSS und HTML lernen?

Oder jemanden bezahlen, der es bereits kann...

Ciao, -MN

[stratege-0815]

Ähm ja, vielen Dank für die Hilfe.

Es ging mir mehr darum was jetzt wo drin steckt. Ich nehme an das die Struktur mit irgendwelchen Klassen etc. aufgebaut ist.

[CoolTux]

Ich gebe Morgennebel Recht.
Und zu Deiner zweiten Frage hilft es vielleicht wenn Du in die Source schaust. Wenn Du jetzt antwortest aber ich kann doch kein CSS HTML, dann sage ich Dir, dann hilft es auch nicht wenn man Dir sagt wo was drin steht. Da beißt sich dann die Katze in den Schwanz.

Du kannst aber einfach mal reinschauen und versuchen zu verstehen, wenn du denkst du hast was entdeckt kommentiere es aus und schreibe deine gewünschte andere Form da drunter. Das alles natürlich nach dem Du kopiert und umbenannt hast.