WebFront: Schriftgröße und -familie steuern: Lösungsansatz

Nachtrag: Weiter unten im Thread (http://www.ip-symcon.de/forum/f56/webfront-schriftgroesse-familie-steuern-loesungsansatz-11025/#post91945) steht eine neuere Version zur Verfügung.

Da mich - und andere auch - die ausladende Größe der Bedienelemente des WebFronts gestört haben, habe ich mich mal ans Werk gemacht und eine über die Konsole steuerbare CSS-Erweiterung für das WebFront geschrieben.

Dafür sind am Original-Stylesheet des WebFronts (webfront.css) keine Änderungen nötig, lediglich im <head>-Tag des Startskriptes des WebFronts (webfront.php) muss eine einzige Zeile eingefügt werden:


44: <link rel="stylesheet" type="text/css" href="webfront.css" />
45: <!-- DIE NÄCHSTE ZEILE EINFÜGEN -->
46: <link rel="stylesheet" type="text/css" href="webfront.custom.css.php" />

Wichtig ist dabei nicht, wo genau die Zeile eingefügt wird, sondern nur, dass sie nach der Zeile 44 eingefügt wird. Die Zeilennummern können je nach Version des WebFront auch abweichen - wer suchet, der findet.

Das Ganze sorgt dafür, dass einige der im Original-Stylesheet gesetzten Stilattribute durch das folgenden Stylesheet überschrieben werden können. Dieses zusätzliche Stylesheet (webfront.custom.css.php) befindet sich gezipt im Anhang und muss ins Unterverzeichnis webfront von IP-Symcon kopiert werden.

Nachtrag/Hinweis: Bei jeder Aktualisierung von IPS wird webfront.php überschrieben. Man muss dann die obige Zeile erneut einfügen.

Mit geändertem Startskript und kopiertem Stylesheet funktioniert das Ganze schon mal ‚out-of-the-box‘ mit der Folge, dass plötzlich viel mehr auf den Bildschirm passt (siehe Screenshots).

Dem Forum ist zu entnehmen, dass einige damit schon recht glücklich wären. Wir setzen dem Ganzen aber noch das Sahnehäubchen auf, denn das Stylesheet ist programmierbar.

Dazu muss man lediglich über die Verwaltungskonsole drei Variablen erstellen (Beispiel siehe Screenshot) und deren IDs im Stylesheet eintragen:


7: define ("FONT_USE_IPS_ID", 15055);
8: define ("FONT_SIZE_ID", 27472);
9: define ("FONT_FAMILY_ID", 45191);

Ich hoffe, die Variablen/Konstantennamen sind selbsterklärend. Ich habe die IDs meiner Konfiguration eingesetzt, damit man aus dem obigen Codeschnipsel und dem Screenshot der Verwaltungskonsole schließen kann, wer was macht und wer zu wem gehört.

Ausser in den obigen drei Zeilen sollte niemand, der nicht genau weiß, was er tut, etwas ändern. Passieren kann allerdings nicht mehr als dass das Stylesheet nicht mehr funktioniert (weil PHP-Fehlermeldungen mitten im CSS-Code stehen) und ignoriert wird - dann sieht das WebFront halt aus wie vorher.

Soo …

Da geht natürlich noch viel mehr, aber für meine Bedürfnisse reicht es. Theoretisch kann man das Aussehen des WebFronts so fast beliebig programmgesteuert verändern. Wer dazu Zeit und Muße hat, kann das tun - wie es geht, steht ja im Sourcecode.

Im Sourcecode befindet auch noch ein kleines Beispiel, wie man auf die Eigenarten verschiedener Browser reagieren kann. Und die im Netz so überaus häufig gestellte Frage, wie man denn in CSS mit Variablen arbeiten kann, wird auch gleich mit beantwortet.

Garantieausschluss

Bei mir funktioniert alles ganz wunderbar. Wenn bei anderen wegen anderer Konfiguration, anderer Module etc. unschöne Dinge auf dem Bildschirm passieren, dann ist das Pech. Ich mach da nix.

PS.

Die in der Größe veränderten Symbole sehen - manchmal und nur - im Internet Explorer etwas krakelig/pixelig aus. Andere Browser (Firefox, Safari, Google Chrome, Opera) erledigen das Skalieren ganz anständig.

webfront.custom.css.php.zip (970 Bytes)

Hey super

Danke für die Idee und Doku.
Habs mir schon lange gewünscht, war aber aber ehrlich gesagt zu faul es mir selbst rauszufummeln.

heute abend gleich ausprobieren werd -
bb

Und? Funktioniert’s?

Hi,
Vielen dank - funktioniert erste Sahne :D. Aber leider werden die Grafiken vom loggen nicht skaliert. Alles andere schaut aber gut aus.
Hast du da vielleicht eine Idee? - siehe Bild 1

Und denkst du das es möglich wäre, dies auch auf die Schrift der Statis anzuwenden? siehe Bild 2

PS: Habe eine Kleinigkeit dazu gemacht. Kann ja jeder ohne größeren Aufwand :rolleyes: siehe Bild 3/4
Damit kann man die Variablen im Webfront selber einstellen. Der einfache script-Inhalt der getriggert wird, lautet:

<?
if (strtolower($IPS_SENDER) =="webfront" )
{
	SetValue($IPS_VARIABLE, $IPS_VALUE); /* Wert zuweisen */
	WFC_Reload(56054 /*[WebFront Configurator]*/);
}
?>

Die String-Variable hat das Profil „~TextBox“
Die Integer ein neues eigenes Profil mit Minwert 1 und Maxwert 50
Die Boolean Variable einfach das ~Switch Profil
(PS: Im Bild 3 sieht man übrigens auch eine nicht skalierte Grafik. Die von der Texteingabebox)
.

bildchen2.png

Danke für die erweiterung des Webfronts.

Echt super einfach und super erklärt.

Gruß Jannis

Es gibt eine neue Version von webfront.custom.css.php.

Was ist neu?

Es werden mehr Steuerelemente skaliert. Ob das jetzt alle sind, weiß ich nicht. Auf jeden Fall sind jetzt auch die mit dabei, auf deren Existenz ich von Hinti (danke!) hingewiesen worden bin.

Das es - zumindest unter Laborbedingungen - auch funktioniert und wie es aussieht, das zeigt der angehängte Screenshot.

Neu ist auch, dass jetzt bei vielen Steuerelementen ‚wo-man-was-klicken-kann‘, als Cursor nicht mehr der Textcursor erscheint sondern die Hand. Leider läßt sich das per CSS-Erweiterung nicht 100%ig genau steuern, so dass in wenigen Fällen doch noch der Textcursor erscheint.

Wenn das neue Cursorverhalten stört, der kann das analog zu den anderen Einstellung durch editieren von webfront.custom.css.php und eine in der Verwaltungskonsole zu definierende boolsche Variable abstellen. Dazu ist in webfront.custom.css.php eine neue Konstante definiert:


19: define ("CURSOR_USE_IPS_ID", 54321); // '54321' durch eigene Variablen-ID ersetzen

Die Installation des Updates …

… benötigt drei Schritte:

[ol]
[li]Die alte webfront.custom.css.php sichern (man weiß ja nie und im Zweifelsfall braucht man in Schritt 3 dann wieder die Variblen-IDs).
[/li][li]Die neue webfront.custom.css.php aus dem angehängten ZIP-Archiv ins Unterverzeichnis webfront von IP-Symcon kopieren.
[/li][li]Die Variablen-IDs aus der alten webfront.custom.css.php in die neue übertragen.
[/li][/ol]

Was noch?

Die minimale und maximale Schriftgröße sind in webfront.custom.css.php standardmäßig auf 8 beziehungsweise 24 Pixel begrenzt:


13: define ("MIN_FONT_SIZE", 8);
14: define ("MAX_FONT_SIZE", 24);

Die Schriftgrößen in diesem Bereich habe ich mit mehreren Browsern getestet und das Ergebnis für brauchbar/bedienbar befunden. Wer es noch größer oder kleiner haben will, der kennt ja jetzt die Stelle, wo man diese Beschränkung aufheben kann.

Und wie immer: alles ohne Gewähr!

WebFront-CSS-0.2.png

webfront.custom.css.php-0.2.zip (1.43 KB)

danke klappt prima. Aber beim ein/aus schalten mittels „CURSOR_USE_IPS_ID“ habe ich noch keinen optischen Unterschied feststellen können. Aber egal. Die vorhandenen Grafiken werden super skaliert :smiley:

Nehmen wir mal einen An-/Ausschalter (rechter Rand, rot/grün): normalerweise zeigt WebFront dort einen Pfeilcursor und wenn man über den Text des Schalters geht, einen Textcursor (Caret). Ein Schalter, zwei Cursor - verwirrend. Und der Textcursor ist bei einem Schalter nun völlig deplatziert.

Jetzt wird vollflächig der Handcursor angezeigt.

Hallo jgdsm,

geniale Sache!:cool:

Nachfrage/Idee von mir:
Über $REMOTE_ADDR weiß man doch von welchem Gerät (IP) die Anfrage gekommen ist. Könnte man nicht eine Matrix (IP/Schriftgrößen) erstellen, so dass der Desktop PC anderes „beliefert“ wird als der Touchscreen in der Küche?:confused:

Joachim

Ja jetzt hab ich den Handcursor gesichtet. Genial. danke für das gesamte Feature :slight_smile:

PS: Wäre die Zellenteilung prozentuell auch noch beeinflußbar? Ich habe ein Bild eingefügt und in einer Zeile mal die 3 Zellen gelb markiert und mit 1, 2 und 3 nummeriert. Meistens ist mir nämlich die Textzelle viel zu kurz!

Jedenfalls ist dein Addon ohnehin schon eine Spitzenerweiterung für mein Webfront.

webfrnr123.png

@Hinti

Wenn ich (ich schrieb es schon) überhaupt wüßte, wie ich so ein ‚Ding‘ überhaupt hinkriege (geloggte Variable mit Graphenschalter), könnte ich es ja ausprobieren.

Du weißt das doch … also?

Hier die schnelle Lösung (bei Zeile 54 in webfront.custom.css.php einfügen):


// Feste Einstellung je nach IP-Adresse (Gerät)
if($REMOTE_ADDR == "123.456.789.123")
{
	$css = array
	(
		"font-family" => "Segoe UI", // Schriftfamilie nur für dieses Gerät
		"font-size" => "16" // Schriftgröße nur für dieses Gerät
	);
}

Das überschreibt, was in den Zeilen vorher eingestellt wurde. Das ist ‚quick-and-dirty‘ und eher nicht nach meinem Geschmack, aber es funktioniert.

Hallo jgdsm,

ich selbst benötige die Funktion (derzeit noch) nicht, aber wenn man liest was andere so an Technik benutzen, halte ich das für eine sinnvolle Erweiterung…:wink:

Klasse Geschichte!:slight_smile:

Joachim

Servus jgdsm

wirklich ein super Ding das du da gebastelt hast.
Funktioniert hier astrein.

1000 Dank dafür.
bb

Hallo jgdsm,

hast Du das jetzt schon hinbekommen?

Wäre es nicht sicherer, ein Liste der zulässigen (oder sinnvollen) Schriftarten zur Auswahl zur Verfügung zu stellen?
Welche wären zulässig (oder sinnvoll)? Bestimmt doch nicht alle die auf so einem Rechner installiert sind.

Joachim

Offensichtlich scheint der Leidensdruck bei Herrn Hinti nicht so groß zu sein, dass er mir erklären würde, wie man einen solchen Aufbau von Steuerelementen produziert. Und da ich selbst nicht davon ‚betroffen‘ bin, hält sich mein Schaffensdrang in Grenzen.

[LIST=A]
[li]Kann ich das gar nicht, da eine solche Liste vom Anwender in der Verwaltungskonsole zu erstellen wäre. Ich könnte höchsten - wie bei den Schriftgrößen - die verwendbaren Schriftfamilien einschränken. Und
[/li][li]kann ja nichts passieren oder kaputt gehen. Und
[/li][li]denke ich, dass der Mensch seines eigenen Glückes Schmied ist. Und
[/li][li]rate ich von der Verwendung von Webdings, Windings und Konsorten ab. Schriften aus solchen Familien werden im täglichen Schriftverkehr oft als schwer lesbar empfunden. :wink:
[/li][/LIST]
Jörg

Hi jgdsm,

Tut mir leid, aber du hast mir keine richtige Frage gestellt, sondern ein Rätsel aufgegeben. Da du wiederholt sagtest du hast mir schon gesagt das du etwas sagtest, da habe ich versucht eine Anfrage oder Frage oder was auch immer zu erkennen.

Leider taten sich in meinem Kopf aber auch durch vielfaches durchlesen keine logischen zusammenhänge auf, und eine Frage hat sich erst recht keine ergeben, somit resignierte ich dieses mir aufgetragene Rätsel!

Aufgrund deiner jetzigen Antwort an Joachim sah ich mich gezwungen eine Frage zu finden, da muss doch eine sein… und habe sie nun letztlich auch gefunden, denke ich…

Du weißt nicht wie ich das gemacht habe: Im Webfront eine Variable loggen, so daß dann der Graphenschalter zu sehen ist, im Webfront?

wenn das die Frage ist, bestätige sie kurz, oder stelle mir bitte die Frage auf die du ursprünglich eine Antwort erwartet hattest ohne Sarkasmus, bzw, direkt und einfach. Bitte :slight_smile:

Ich tu mir sehr schwer mit Rätsel - war immer schon so.
Grüße, Jürg (Hinti)

…wäre das nicht allgemein standardwürdig ?

Ich würde dies gerne als Feature request einreichen und könnte mir vorstellen, dass man dieses auf der Ebene der Webfront Webserver Instanz als Steuerung mit einbaut. Zumindest eine Auswahl nach Gross, Mittel, Klein würde sicherlich vielen Fragestellungen zu den verschiedensten Anzeigen schnell und effektiv eliminieren und dem System / User einiges an neuen Möglichkeiten OHNE manuellen Eingriff in die CSS Dateien zu benötigen.

Gruss
B71

Stimme auch für den feature request !!!

Hallo,

nun ist dieser genialer Vorschlag schon ein wenig her, die Lösung für das beschriebene Bedürfnis dahingehend gestern durch diesen Thread geweckt. Nur finde ich keine webfront.php auf meinem System. Hat sicherlich was mit den fortgeschrittenen IPS-Versionen zu tun, in denen das WF anders realisiert wird. Gibt es einen Workaround? Oder muss ich mich qualvoll mit der webfront.css auseinandersetzen? Das möchte ich nach Umständen vermeiden, da durch Update mit Sicherheit alle auf IPS-Default gestellt wird. Möchte auch alles etwas kleiner und damit übersichtlicher gestalten, da ich dann mehr sehen kann.