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