Eigenes View Thema erstellen

bz7i

Moin,

Ich will für meine Views ein eigenes Thema erstellen. So das die Button nach meinen Wunsch aussehen.

Ich weiß aber überhaupt nicht wie das geht und wo die Sachen abgelegt sind.

Kann mir da jemand einen Denkanstoß geben ?

MontgomeryB

Auch moin!

So erging es mir vor rund 6 Wochen auch.

Mein Tipp:

1. Skizziere kurz die Ergebnisse, die du am Ende der Arbeit sehen möchtest.

2. Spiele evtl. mit vorhanden Views indem du sie in deine Testumgebung importierst.

3. Wenn du dich dann mit dem Tool und der Konfiguration angefreundet hast, stelle hier konkrete Fragen. Da wird dir garantiert geholfen.

Du musst nur ziemlich viel Zeit investieren und Geduld mit dir und deiner Umgebung haben, dann hast du bald ein System, das du nahezu beliebig ausbauen kannst.

Viel Erfolg!

VG

Monti

Gesendet von meinem GT-N7100 mit Tapatalk

bz7i

Hey MontgomeryB,

ich glaub du hast mich falsch verstanden bzw Ich mich nicht richtig ausgedrückt ;)

Im VIS Editor kann man im Eigenschaften Fenster, im Reiter View, ein Thema auswählen.

Diese sind ja schon super. Aber dennoch würde Ich gerne mein eigenes Thema erstellen

MontgomeryB

Aah! Die Themen, wie black-tie, blitzer, cupertino usw. :ugeek:

dann schau mal unter

/opt/iobroker/node_modules/iobroker.web/www/lib/css/themes/jquery-ui

bzw.

/opt/iobroker/iobroker-data/files/web/lib/css/themes/jquery-ui

DeepCore

Ich bin auch seit ein paar Wochen am Basteln von Views. Dabei geht's mir so: :) :( :shock: :lol: :cry: :D

Im Editor gibt es oben rechts den Reiter 'CSS', da kann man auch eine Klasse .vis-view erzeugen, um 'Grundeinstellungen' vorzunehmen, z.Bsp.

.vis-view {
    background-color: limegreen; /* ganz schoen haessliche hintergrundfarbe */
    color: darkviolet; /* auch schlimme textfarbe */
}

Und mit Firefox am besten Firebug installieren, das hilft beim 'Spionieren' der CSS-Styles in einer View :)

Gruß

DeepCore

Bluefox

Theoretisch kannst du es machen. Und es ist relativ einfach.

1. Hier https://jqueryui.com/themeroller/ eigenes Thema erzeugen.

2. Dieses neues Thema runterladen und irgendwo entpacken. Sagen wir nach /tmp/style

3. Alle Bilder aus "/tmp/style/images" ins vis Projekt uploaden. Z.B unter "vis.0/main/style"

4. Die Datei /tmp/style/jquery-ui.theme.css so editieren, dass alle Texte

url("images/

mit

url("/vis.0/main/style/

ersetzt werden.

5. Diese Datei komplett per Copy&Paste ins CSS=>Projekt Lasche kopieren.

Es geht.

Nachteil: editor wird auch in diesem Thema angezeigt.

bz7i

Danke Bluefox,

ich werde es mal Probiern ;)

dtp

Hab das gestern mal ausprobiert. Funktioniert soweit ganz gut. Allerdings wird dabei dann auch das Thema des vis-Editors entsprechend geändert, was ich eigentlich nicht möchte.

Gibt es evtl. eine Möglichkeit, ein eigenes Thema in die Auswahlliste der View-Themen aufzunehmen, so dass man es dort dann unabhängig vom Projekt auswählen kann?

Oder habe ich was falsch gemacht? Hatte den CCS-Code sowohl global als auch nur für das Projekt abgelegt. In beiden Fällen hatte es unmittelbaren Einfluss auf das Editor-Design.

Gruß,

Thorsten

Bluefox

~~@dtp:~~

Gibt es evtl. eine Möglichkeit, ein eigenes Thema in die Auswahlliste der View-Themen aufzunehmen, so dass man es dort dann unabhängig vom Projekt auswählen kann? `
Nein. Dafür muss man web und vis updaten, falls aber Thema gut ist, dann kann ich das machen. Ist die gut? :)

~~@dtp:~~

Oder habe ich was falsch gemacht? Hatte den CCS-Code sowohl global als auch nur für das Projekt abgelegt. In beiden Fällen hatte es unmittelbaren Einfluss auf das Editor-Design. `
Wenn du ganz am Ende mein Post anschaust

http://forum.iobroker.net/viewtopic.php … 549#p33050

dtp

~~@Bluefox:~~

… falls aber Thema gut ist, dann kann ich das machen. Ist die gut? :) `

Klaro. ;) Nee, Spaß beiseite. Ich bin noch am optimieren. Aber ich schicke Dir dann gerne die ZIP-Datei.

~~@Bluefox:~~

Wenn du ganz am Ende mein Post anschaust

http://forum.iobroker.net/viewtopic.php … 549#p33050 `

Ups. Wer (vollständig) lesen kann, ist klar im Vorteil. ;)

Gruß,

Thorsten

dtp

So, hab da mal ein Custom Theme erstellt. Es ist ein modifziertes "UI Darkness" Theme ohne abgerundete Kanten. Bis auf eine farbliche Hinterlegung der Error-Meldungen, habe ich alles auf Grauwerte eingestellt. Auch die Schattenhinterlegungen wurden minimiert. Hab das zip-File mal hier angefügt.

Nennen könnte man es z.B. DARK GRAY SQUARE.

Ein paar Screenshots meiner Views zeige ich später noch.

Gruß,

Thorsten
996_jquery-ui-1.12.1.custom.zip

dtp

Hier dann mal ein paar Screenshots mit dem von mir modifizierten Theme.

tcz

Hallo,

habe mich jetzt auch mal an das Thema eigenes Style über Themeroller gewagt und siehe da es funktioniert wirklich gut! Einziges Problem ist, daß die Ansicht auf meinem PC über den Browser passt, allerdings in der APP anders rüber kommt. Z.B. werden die Farbverläufe (Dunkelblau / Hellblau) auf den Widgets nicht dargestellt. (wie bei den Screenshots von dtp in den Navigationsbuttons zu sehen)

Ich habe bislang rausgefunden, daß diese Funktionalitäten über die zu kopierenden Icons aus dem Themeroller entstehen… Wohin muß ich die packen damit das auch bei der APP ankommt?!

Bin aktuell etwas ratlos?!

Hat da jemand einen Tip für mich?

Danke und Gruß

Torsten

Homoran

Hallo Thorsten,

ich fürchte die kommen nur dann in der App an, wenn du die Themes Bluefox gibt, der diese dann allgemein verfügbar und in der App integrieren muss.

Gruß

Rainer

tcz

Hallo Rainer,

danke für die Rückmeldung!

Aber… Es geht. Hätte ich auch gleich drauf kommen können :idea:

Mit der Vermutung, daß die Icons für diese Verläufe / Schattierungen verantwortlich sind, war ich schon richtig unterwegs.

Ich habe mich dunkel an Diskussionen zu der App erinnert, bezügllich der Projektübertragung bei Resync usw. da wurde nämlich darauf hingewiesen, daß das VIS Projekt über Resync in das Mobilgerät übertragen wird. Damals ging es um Grafiken und Icons...

Also lange Rede kurzer Sinn: Die Icons müssen in das zugehörige VIS Projektverzeichnis kopiert werden zu dem Projekt das den Custom Theme nutzt. Damit findet ein Upload der Custom-Icons auf das Mobilgerät statt und das Custom-Theme wird korrekt angezeigt! :D

Gruß

Torsten

Bluefox

~~@dtp:~~

Hier dann mal ein paar Screenshots mit dem von mir modifizierten Theme.

2016-12-15_22h02_20.png

2016-12-15_22h10_47.png

2016-12-15_22h08_08.png

2016-12-15_22h08_57.png `
Ich habe nicht gefunden, was sich an dieses Thema anders ist, deswegen ist das nicht übernommen.

dtp

Ich habe alles, was im Dark Gray Theme auf Blau stand, gegen dunkle Grauwerte ausgetauscht. Auch die Schraffuren und Radien habe ich vollständig entfernt. Mir haben das Blau und die Schraffur in den Dialog-Fenstern einfach nicht gefallen.

Ansonsten sind die Themes sich sehr ähnlich. Da gebe ich Dir Recht.

Gruß,

Thorsten

dtp

@Bluefox:

Du würdest mir wirklich einen sehr großen Gefallen tun, wenn Du mein "Dark Gray Square"-Theme als weitere Option in die Liste der Themes einbinden würdest. Ich bin noch mal sämtliche Themes durchgegangen, und leider hat mir keines davon so richtig gefallen. Ich mag einfach die dunkelblauen Hintergründe beim Überfahren der Schaltflächen mit der Maus bzw. in den Headern der Dialog-Fenster nicht.

Andererseits führt das Einbinden des Custom Themes als CSS-Codes unter Eigenschaften dazu, dass der komplette Editor den Hintergrund des Themes annimmt, was dann dazu führt, dass gewisse Schaltflächen und Texte nicht mehr lesbar sind.

So macht mir das Arbeiten mit dem vis-Editor und mit vis leider nur bedingt Spaß, zumal auch die ioBroker.vis App etwas sensibel auf die Einstellungen reagiert.

Toll wäre auch die Möglichkeit, ein eigenes Theme einbinden zu können.

Gruß,

Thorsten

NightWatcher

Moin, wäre es nicht grundsätzlich möglich, den Theme Ordner zu durchsuchen, und einfach alle Ordner als Select Option im Admin darzustellen. So könnte man sich auch super easy eigene Custom Themes mit dem Themeroller von jquerui anlegen.

dtp

Darf ich diesen Thread noch mal nach oben holen. Quasi als Reminder. 8-)

Community Forum

NEWS

Eigenes View Thema erstellen

Support us

629

32.4k

81.5k

1.3m