[live] SVG-Icons

Quote from heifisch

Diese befinden sich im angehängten Zip-File.

Folgendes ist mir aufgefallen:

• Es genügt ein Logo, also logo.svg, denn die beiden bisherigen Varianten haben sich nur hinsichtlich ihrer Abmessungen unterschieden.
  
• Bei 169.svg, 1920.svg, 3840.svg und 7680.svg ist der Text schwarz, bei den anderen formatbezogenen Icons ist er hingegen grau schattiert:
  
  The content cannot be displayed because you do not have authorisation to view this content.
  
  In der kleinen Darstellung erscheint mir ein rein schwarzer Text besser lesbar, sodass der Text am besten wohl einheitlich schwarz sein sollte:
  
  The content cannot be displayed because you do not have authorisation to view this content.
  
  Die Icons sind hier übrigens mit 24x24 konfiguriert.
  
• Mir erscheint der Grünton des active-Icons etwas kalt. Ließe sich er eher dem etwas wärmeren Ton des PNG und auch bezüglich der Helligkeit angleichen, damit der weiße Checkmark deutlicher hervortritt und das Icon besser mit dem Hintergrund harmoniert?
  
  
  The content cannot be displayed because you do not have authorisation to view this content.
  The content cannot be displayed because you do not have authorisation to view this content.
  
  
• Auch beim edit-Icon fände ich einen wärmeren Ocker-Ton freundlicher.
  
  The content cannot be displayed because you do not have authorisation to view this content.
  
  
• In imdb1.svg fehlt bei mir die Schrift.
• Typo: on_downarrow.svg -> one_downarrow.svg
• Typo: icon_smal.svg -> icon_small.svg
• Typo: icon_smal_hovered.svg -> icon_small_hovered.svg
• Das blau für die Ordner- und Dateisymbole empfinde ich als zu dunkel und sollte etwas aufgehellt werden.
• Die Icons mit den Glanzlichtern sind – so schön sie dir auch gelungen sind – als Overlay leider schwerer erkennbar. Deshalb habe ich mich für die rein schwarzen Varianten entschieden.
• Die Strichstärke von icon_overlay_minus.svg muss der von icon_overlay_plus.svg und icon_overlay_cross.svg entsprechen, damit das Ganze ausgewogen aussieht:
  
  The content cannot be displayed because you do not have authorisation to view this content.
• Overlays (also alle icon_overlay_*.svg) dürfen bei gleicher Rahmengröße wie die Hintergrund-Icons nur die halbe Größe haben. Als Hintergrund haben wir bei PNG derzeit 16x16 für die "regulären" Icons (icon_regular_*.svg in den Menüleisten) und 12x12 für die "kleinen" Icons (icon_small_*.svg in den Titelleisten von Fenstern). Damit die Überlagerung in beiden Fällen passt, entspricht das 8x8 zentriert in 16x16 Pixeln.
• Wie ich gesehen habe, verwendest du eine krumme Größe von 21,2 Pixeln auf jeder Achse. Das macht solche Dimensionierungen schwieriger, und auch beim Rastern im Browser wären Zweierpotenzen wohl meist günstiger. Insofern würde ich vorschlagen, alle Icons auf eine Abmessung von 3*2ⁿ, n ≥ 3, oder 2ⁿ, n ≥ 4, umzuskalieren, damit man solche Bruchteile gut hinbekommt und das auch beim Rastern im Browser noch gut aussieht. Eine sinnvolle Abmessung wäre also beispielsweise 24 (oder 48) Pixel. Damit hätten wir bei SVG dann Abmessungen von 12x12 (oder 24x24) zentriert in 24x24 (oder 48x48) Pixeln, damit die Überlagerung sowohl für die "regulären" als auch für die "kleinen" Icons passt. Andernfalls müsste man massiv in den Code und die CSS-Styles eingreifen, um explizit Image-Tags für Hintergrund und Vordergrund zu generieren, die sich dann unabhängig voneinander positionieren und skalieren lassen – ein Aufwand, den ich gerne vermeiden möchte.

Die von mir genutzten Icons habe ich dir beigefügt. Möchtest du die vorgeschlagenen Änderungen selbst vornehmen oder soll ich es dir abnehmen?

Quote from SHofmann

Die von mir genutzten Icons habe ich dir beigefügt. Möchtest du die vorgeschlagenen Änderungen selbst vornehmen oder soll ich es dir abnehmen?

Ich überarbeite die Icons und versuche es gemäß Deinen Vorgaben umzusetzen.

Die Fehler bei der Schrift sind wohl beim Bereinigen der Icons mit scour entstanden mir aber nicht aufgefallen.
Das nächste Mal schaue ich mir das Ergebnis genauer an.

Oder sollte ich die Metadaten drin lassen?

Quote from SHofmann

Wie ich gesehen habe, verwendest du eine krumme Größe von 21,2 Pixeln auf jeder Achse. Das macht solche Dimensionierungen schwieriger, und auch beim Rastern im Browser wären Zweierpotenzen wohl meist günstiger. Insofern würde ich vorschlagen, alle Icons auf eine Abmessung von 3*2n, n ≥ 3, umzuskalieren, damit man solche Bruchteile gut hinbekommt und das auch beim Rastern im Browser noch gut aussieht. Eine sinnvolle Abmessung wäre also beispielsweise 24 (oder 48) Pixel. Damit hätten wir bei SVG dann Abmessungen von 12x12 (oder 24x24) zentriert in 24x24 (oder 48x48) Pixeln, damit die Überlagerung sowohl für die "regulären" als auch für die "kleinen" Icons passt. Andernfalls müsste man massiv in den Code und die CSS-Styles eingreifen, um explizit Image-Tags für Hintergrund und Vordergrund zu generieren, die sich dann unabhängig voneinander positionieren und skalieren lassen – ein Aufwand, den ich gerne vermeiden möchte.

Mit der Größe, das war mir nicht so klar.
Ich dachte, dass die tatsächlich über css eingestellt wird.

Die krumme Größe rührt daher, dass ich mir über die Größe keine Gedanken gemacht habe und die Seitengröße auf Auswahlgröße gesetzt hatte.
Hier bei mir 21,2 mm bei den runden Teilen.

Wenn ich die Icons jetzt alle noch einmal anfasse, auf welche Größe soll ich die Seitengröße einstellen?
48x48px oder 24x24px

Die rechteckigen, könnte ich ja auf die Größe der alten png-Dateien setzen.

Ich würde 24x24 Pixel nehmen, das skaliert zur Anzeige im Bedarfsfall dann ja eh. Was ebenfalls dafür spricht, ist, dass dies beim Speichern als PNG als Zielgröße verwendet wird. Wenn du PNG aber lieber mit 48x48 haben möchtest, dann nimmst du halt diese Abmessung. Letztlich ist das ja nur wegen der leichteren Ermittlung und Einstellung von solchen Größenverhältnissen.

Quote from heifisch

Oder sollte ich die Metadaten drin lassen?

Abgesehen von der Dateigröße macht das wohl kaum einen Unterschied. Auch dies ist letztlich deine Entscheidung. Wenn man bei der nächsten Bearbeitung die Metadaten wieder drin hat, ist mit der Bereinigung nichts gewonnen und dann könnte man sich die Zeit auch gleich sparen.

Quote from SHofmann

Ich würde 24x24 Pixel nehmen, das skaliert zur Anzeige im Bedarfsfall dann ja eh. Was ebenfalls dafür spricht, ist, dass dies beim Speichern als PNG als Zielgröße verwendet wird. Wenn du PNG aber lieber mit 48x48 haben möchtest, dann nimmst du halt diese Abmessung. Letztlich ist das ja nur wegen der leichteren Ermittlung und Einstellung von solchen Größenverhältnissen.

Ich glaube, hier habe ich etwas missverstanden.
Die Grafiken sollen wohl gar nicht als SVG in Live eingebunden werden?

Natürlich sollen sie das. Die Gedanken zu den Pixeln sind doch nur sekundäre Aspekte.

Das der Text in manchen Icons verschwunden ist, liegt wohl daran, dass ich ihn nicht in einen Pfad umgewandelt habe.
Das resize geht ganz gut per Einzeiler:

mkdir -p resize; find . -maxdepth 1 -name "*.svg" -exec rsvg-convert -f svg -h 24 -o resize/{} {} \;

Allerdings muss man die größeren Grafiken separat behandeln.

Quote from SHofmann

Folgendes ist mir aufgefallen:

• Es genügt ein Logo, also logo.svg, denn die beiden bisherigen Varianten haben sich nur hinsichtlich ihrer Abmessungen unterschieden.
  
• Bei 169.svg, 1920.svg, 3840.svg und 7680.svg ist der Text schwarz, bei den anderen formatbezogenen Icons ist er hingegen grau schattiert:
  
  The content cannot be displayed because you do not have authorisation to view this content.
  
  In der kleinen Darstellung erscheint mir ein rein schwarzer Text besser lesbar, sodass der Text am besten wohl einheitlich schwarz sein sollte:
  
  The content cannot be displayed because you do not have authorisation to view this content.
  
  Die Icons sind hier übrigens mit 24x24 konfiguriert.
  
• Mir erscheint der Grünton des active-Icons etwas kalt. Ließe sich er eher dem etwas wärmeren Ton des PNG und auch bezüglich der Helligkeit angleichen, damit der weiße Checkmark deutlicher hervortritt und das Icon besser mit dem Hintergrund harmoniert?
  
  
  The content cannot be displayed because you do not have authorisation to view this content.
  The content cannot be displayed because you do not have authorisation to view this content.
  
  
• Auch beim edit-Icon fände ich einen wärmeren Ocker-Ton freundlicher.
  
  The content cannot be displayed because you do not have authorisation to view this content.
  
  
• In imdb1.svg fehlt bei mir die Schrift.
• Typo: on_downarrow.svg -> one_downarrow.svg
• Typo: icon_smal.svg -> icon_small.svg
• Typo: icon_smal_hovered.svg -> icon_small_hovered.svg
• Das blau für die Ordner- und Dateisymbole empfinde ich als zu dunkel und sollte etwas aufgehellt werden.
• Die Icons mit den Glanzlichtern sind – so schön sie dir auch gelungen sind – als Overlay leider schwerer erkennbar. Deshalb habe ich mich für die rein schwarzen Varianten entschieden.
• Die Strichstärke von icon_overlay_minus.svg muss der von icon_overlay_plus.svg und icon_overlay_cross.svg entsprechen, damit das Ganze ausgewogen aussieht:
  
  The content cannot be displayed because you do not have authorisation to view this content.
• Overlays (also alle icon_overlay_*.svg) dürfen bei gleicher Rahmengröße wie die Hintergrund-Icons nur die halbe Größe haben. Als Hintergrund haben wir bei PNG derzeit 16x16 für die "regulären" Icons (icon_regular_*.svg in den Menüleisten) und 12x12 für die "kleinen" Icons (icon_small_*.svg in den Titelleisten von Fenstern). Damit die Überlagerung in beiden Fällen passt, entspricht das 8x8 zentriert in 16x16 Pixeln.
• Wie ich gesehen habe, verwendest du eine krumme Größe von 21,2 Pixeln auf jeder Achse. Das macht solche Dimensionierungen schwieriger, und auch beim Rastern im Browser wären Zweierpotenzen wohl meist günstiger. Insofern würde ich vorschlagen, alle Icons auf eine Abmessung von 3*2ⁿ, n ≥ 3, oder 2ⁿ, n ≥ 4, umzuskalieren, damit man solche Bruchteile gut hinbekommt und das auch beim Rastern im Browser noch gut aussieht. Eine sinnvolle Abmessung wäre also beispielsweise 24 (oder 48) Pixel. Damit hätten wir bei SVG dann Abmessungen von 12x12 (oder 24x24) zentriert in 24x24 (oder 48x48) Pixeln, damit die Überlagerung sowohl für die "regulären" als auch für die "kleinen" Icons passt. Andernfalls müsste man massiv in den Code und die CSS-Styles eingreifen, um explizit Image-Tags für Hintergrund und Vordergrund zu generieren, die sich dann unabhängig voneinander positionieren und skalieren lassen – ein Aufwand, den ich gerne vermeiden möchte.

Die von mir genutzten Icons habe ich dir beigefügt. Möchtest du die vorgeschlagenen Änderungen selbst vornehmen oder soll ich es dir abnehmen?

Display More

Anbei die Icons mit den gewünschten Änderungen.
Ich hoffe, ich habe alles richtig umgesetzt.

Sollten noch Änderungen erforderlich sein, dann bitte Bescheid geben.

Ich finde, jetzt sieht es richtig gut aus:

16x16 Pixel

32x32 Pixel

Ich finde allerdings, dass der Text in den rechteckigen Anzeigfeldern etwas zu hoch ist. Vielleicht sollte man ihn etwas tiefer setzen, so etwa in der Höhe des Querstrichs einer "2", also etwa von:

… nach:

… oder zumindest innerhalb der weißen Fläche zentrieren. Machst du das oder soll ich das übernehmen?

Das Icon on_dvd.svg scheint die Disk verloren zu haben und nur noch aus dem Loch für die Spindel zu bestehen. Ich habe es aus dem ersten Satz rekonstruiert. Nachdem die SVG-Icons im Git später die Referenz für künftige Änderungen bilden, brauchst du diesbezüglich nicht weiter tätig zu werden.

Könntest du für den Patch Nr. 4 den grünen Haken von oben noch in schwarz als Overlay-Icon erzeugen?

Den aktuellen Stand habe ich für eigene Experimente beigefügt. Schön wäre es, wenn wir irgendwann noch die beiden letzten PNGs loswerden könnten. Vielleicht hilft "Trace Bitmap" diesbezüglich ja weiter?

Hier die Korrekturen.

Die Schrift ist jetzt im weißen Feld zentriert.
Wenn ich sie noch einen Pixel verschieben soll, dann sag Bescheid.

Quote from SHofmann

Vielleicht hilft "Trace Bitmap" diesbezüglich ja weiter?

Was das angeht, sind meiner Erfahrungen mit Online-Diensten, und KI eher schlecht. Erstaunlich, dass das die KI nicht vernünftig kann. Zumindest weiß ich nicht welche.
Ich schaue mir das aber noch mal an.

Für das dunkle Theme, wäre aber die Schrift in Grau besser.

Soll ich für das Theme extra welche machen?

Danke für das Update. "Trace Bitmap" ist eine interne Funktion von Inkscape. Damit könnte man vielleicht etwas schneller ans Ziel gelangen, als wenn man ohne eine daraus generierte Vorlage starten muss.

Quote from heifisch

Soll ich für das Theme extra welche machen?

Das wäre sicherlich eine gute Idee.

Quote from SHofmann

Das wäre sicherlich eine gute Idee.

Anbei die Icons für das dunkle Thema.

Quote from SHofmann

Danke für das Update. "Trace Bitmap" ist eine interne Funktion von Inkscape. Damit könnte man vielleicht etwas schneller ans Ziel gelangen, als wenn man ohne eine daraus generierte Vorlage starten muss.

Aber auch das liefert kein verwertbares Ergebnis. Oder ich mache es falsch...

Aber der Fernseher ist schon fertig

Die Fernbedienung ist schon etwas aufwändiger...

Sehr schön und gut gelungen. Wieder einmal danke!

Fernbedienung ist in Arbeit...

Wow, die sieht aber schick aus!

Wenn du schon eine komplett neue Fernbedienung entwirfst, sollten vielleicht auch gleich ein paar Hotkeys mit drauf. Der VDR erlaubt das Zuweisen folgender Funktionen auf Tasten bzw. Hotkeys:

remote-ir.Up         000000010001000E
remote-ir.Down       0000000100010012
remote-ir.Menu       0000000100010028
remote-ir.Ok         0000000100010010
remote-ir.Back       0000000100010014
remote-ir.Left       000000010001000F
remote-ir.Right      0000000100010011
remote-ir.Red        0000000100010015
remote-ir.Green      0000000100010016
remote-ir.Yellow     0000000100010017
remote-ir.Blue       0000000100010018
remote-ir.0          000000010001000D
remote-ir.1          0000000100010004
remote-ir.2          0000000100010005
remote-ir.3          0000000100010006
remote-ir.4          0000000100010007
remote-ir.5          0000000100010008
remote-ir.6          0000000100010009
remote-ir.7          000000010001000A
remote-ir.8          000000010001000B
remote-ir.9          000000010001000C
remote-ir.Info       0000000100010013
remote-ir.Play/Pause 0000000100010056
remote-ir.Stop       0000000100010036
remote-ir.Record     0000000100010054
remote-ir.FastFwd    0000000100010057
remote-ir.FastRew    0000000100010055
remote-ir.Next       0000000100010031
remote-ir.Prev       0000000100010048
remote-ir.Power      0000000100010002
remote-ir.Channel+   0000000100010024
remote-ir.Channel-   0000000100010025
remote-ir.PrevChannel 0000000100010032
remote-ir.User3      0000000100010032
remote-ir.Volume+    0000000100010026
remote-ir.Volume-    0000000100010027
remote-ir.Mute       0000000100010019
remote-ir.User2      0000000100010039
remote-ir.User1      000000010001001A
remote-ir.Schedule   0000000100010023
remote-ir.Channels   0000000100010003
remote-ir.Timers     000000010001001B
remote-ir.Recordings 0000000100010047
remote-ir.Setup      000000010001001C
remote-ir.Commands   0000000100010022

Falls deine Fernbedienung als Vorlage die Hotkey nicht (alle) unterstützen sollte, hier zum Vergleich einmal das Layout meiner Fernbedienung, auf der ich die meisten VDR-Funktionstasten zuordnen konnte:

Belegt habe ich die weniger offensichtlichen Tasten wie folgt:

• TV/R = Timers
• Schlüssel = Setup
• Opt = Commands
• Doppelpfeil = Channels
• PVR (Gitter) = Recordings

Man könnte neben den Farbtasten auch noch Tasten für User1 bis User4 vorsehen. Auf meiner Fernbedienung habe ich stattdessen ein paar der übriggebliebenen Tasten dafür verwendet:

• TTX = User1 -> Plugin OsdTeletext
• AV = User2 -> Plugin DvbHdDevice
• Del = User3 -> Plugin DvdSwitch

Manche Tasten liefern leider den gleichen Code, sodass der VDR sie nicht unterscheiden kann. Deshalb habe ich bspw. PrevChannel nicht mehr zuordnen können und muss dafür halt die "0" verwenden…

Entscheide bitte selbst, wie viel Aufwand du da reinstecken möchtest.

Sehr schön, was hier alles passiert. Zum Thema Fernbedienung möchte als User nur anmerken, dass die aktuelle FB per Daumen über Handy kaum bis schlecht bedienbar ist. Ich treffe die Tasten schlecht und muss immer den Bildschirm vergrößern. Nachteilig ist auch, dass der TV und die FB untereinander erscheinen und man sich eigentlich nicht durchs Menu bewegen kann, weil man immer erst zur Kontrolle hochscrollen muss. Insofern würde ich als User hier ein schickes Layout lieber gegen eine einfache FB tauschen, die nur aus sinnvoll angeordneten Rechtecken besteht (wie z.B. bei der svdrp-app). Evtl. müsste auch nur die Fläche vergrößert werden, die auf den Klick reagiert.

Top Lösung wäre, die Fernbedienungs-Seite so zu layouten, dass Bild und Bedienung gleichzeitig sichtbar sind. Zumindest im Querformat.

Am PC ist das alles kein Problem, mit der Maus treffe ich alles oder nutze die Tastatur, was auch gut funktioniert