Pimp my WebApp (mit CSS und Stylish)

[ott]

Moin homees,

einige haben mich nach diesem Post
https://community.hom.ee/t/webapp-geraete-und-gruppen-werden-nicht-angezeigt/9047
angeschrieben, wie ich die Farbanpassungen per CSS mache.

Voraussetzung
Hier also eine Anleitung wie ihr die WebApp nach euren Wünschen anpassen könnt.
Dazu benötigt ihr das Addon “Stylish” für Firefox oder Chrome
Stylish für Chrome
Stylish für Firefox
…herunterladen und installieren.

CSS für die WebApp anpassen

1. WebApp aufrufen und einloggen
2. F12 drücken (Entwicklungstools werden angezeigt)
   
   
3. Mit Rechtklick auf der homee Seite das Element anklicken, das man ändern möchte und dann auf “Untersuchen” klicken.
   
   
   
   Rechts springen die Entwicklungstools automatisch zur entsprechenden Code-Zeile.
   Den gelb markierten Eintrag wollen wir anpassen. In diesem Fall wollen wir den WillkommensSpruch komplett löschen.
4. Hier braucht man entweder CSS Wissen, oder man googelt zum Thema “CSS Objekt verstecken”, “CSS Farbe ändern” etc…
5. Um den Satz zu verstecken brauchen wir nun folgenden Code:

.sentence {
display: none;
}

Das display: none; kann einfach zu den anderen Eigenschaften hinzugefügt werden und blendet das Objekt aus.

Diese Änderung ist nur temporär und genau hier kommt das Stylish Addon zum Einsatz:
6. Stylish Symbol anklicken, Punkte anklicken und neues Design erstellen

7. Den CSS Code von oben einfügen, dem Ganzen einen namen geben und speichern.

Fertig, ab sofort wird der Satz immer ausgeblendet.

Advanced Mode
Unter dem Repo github.com/psott/homeeThemes habe ich eine Art MagicMirror Theme komplett erstellt. Das sieht dann so aus:

Einfach die CSS Datei aus dem entsprechenden Theme öffnen und den Textinhalt in Stylish kopieren, speichern, fertig.

Viel Spaß beim modden.
Fragt mich einfach, wenn ihr etwas bestimmtes umsetzen wollt.

Gruß,
Ott

[coffeelover]

Wieder einmal super Arbeit von dir!

[Chris]

ein homee Modul für Glancr wäre echt cool

glancr

wer hat bock auf das Projekt und hat Programmierkenntnisse? Gern PN an mich!

[hblaschka]

@stfnhmplr, @timow - fühlt Ihr Euch angesprochen?

[Baschtl]

Eine freigegebene API wäre viel cooler. Dann hätte man sowas schon lange haben können. Aber hey, wir haben ja jetzt Wetter und eine proprietäre Kamera unterstützung.

[Micha]

ja wichtige Sachen .
Es wird ja angenommen von den Usern,
also war die Entscheidung ja nicht falsch.
Aber ne API wäre schön und so ein Plugin leichter umgesetzt.

[coffeelover]

So sarkastisch Baschtl das geschrieben hat, vielleicht ist das doch etwas, über das ihr nochmal nachdenken @Chris?

[snooze]

Ich würde das auch gerne auf meinem Tablet implementieren.
Allerdings gibt es, soweit ich weiß, weder für Chrome noch für Firefox einen “Fullscreen Modus”
Daher nutze ich den Fully Kiosk Browser.

Weiß jemand ob man das dort ebenfalls implementieren kann?

[coffeelover]

Hallo,

@ott: Habe deine Anleitung gerade umgesetzt. Alles erfolgreich umsetzbar - super Anleitung.
Hinweis: Wer die Veränderung unterwegs nutzen möchte, sollte bei der URL statt der IP eher beginnt mit https://my.hom.ee eintragen.

@snooze: Habe jetzt nicht geprüft, ob Stylish im Browser des Handys / Tablets nutzbar ist.
Allerdings gibt es im Browser den Fullscreen Knopf. Vielleicht kommst du über den Weg an die Bezeichnung der Fullscreen-Ansicht.

[ott]

Danke für die Rückmeldung.

[Chris]

Wie ich es in dem Thread zum Thema Homematic Geräte schon geschildert habe:
Wir haben begrenzte Ressourcen und die sind: Der Tag hat nur 24h und die Biologie des Körpers fordert Schlaf (ja auch der Körper eines Entwicklers). Die andere Ressource heißt Geld, denn das ist das Zeug, wofür die Jungs jeden Morgen in Stuttgart antreten.
Die API ist im Alpha Status und muss getestet werden, es fehlt vor allem an einer Dokumentation ect.
Wenn wir die jetzt für alle zugänglich machen würden, erhalten wir voraussichtlich viele Supportanfragen dazu. Daraus resultiert das die Entwickler- die ja coole Sachen für euch in homee bauen sollen, noch weniger Zeit dafür haben.
Daher geben wir die API erstmal für ausgewählte Projekte raus (wie zum Beispiel Feuersoftware) um zu schauen an welchen Ecken es noch klemmt.
Das ist auch der Grund warum ich um PN gebeten habe und die API nicht einfach hier rein poste.

[coffeelover]

Erst einmal danke für das klare Statement.

Ich bin da nicht tief drin - aber könnte es sinnvoll sein, ähnlich zum Beta-Programm auch für die API einen kleinen Kreis freizuschalten? Ich nehme an, dass eine kleine, ausgewählte Anzahl auch guten Input dazu liefern kann, wo es noch klemmt. (Ich klammere mich mal persönlich aus - ich bin da nicht der richtige)

[coffeelover]

Hi @ott,
kannst du mir zufällig sagen, wie ich die Styles der “Hover-Schaltflächen” verändern kann? Wenn man mit der Maus über zB die Register in der Navigation fährt, färben sich diese weiß. Dieses weiß möchte ich gerne anpassen.
Besten Dank

[ott]

Moin @coffeelover ,
dazu musst du die entsprechende Klasse mit dem “:hover” Zusatz ansprechen.
Diese wird immer nur bei MouseOver Aktionen aktiv.
Bei der Navigation wäre das dann:

.mainMenuBtnWrap:hover {
color:#969696;
background-color:#333333;
box-shadow:inset 6px 0 0 0 #969696
}

Hier entsprechend deiner Vorstellung einfach die Farbcodes anpassen.

Gruß,
Ott