SVG Grafiken Zeichenmodi und Konstanten für Koordinaten/Grössen

  • Die Möglichkeit SVG Grafiken im Skin zu verwendem ist wunderbar, vielen Dank dafür.


    Folgende zwei Änderungen würden die Skinerstellung und -wartung nochmals vereinfachen:


    1. einen Parameter drawModus mittels dessen man bei einem ePixmap Element festlegen kann ob die Grafik, falls sie zu groß, respektiv zu klein für die angegeben Dimensionen ist, abgeschnitten oder gestretcht resp. gestaucht wird.


    Code
    <ePixmap position="800,400" size="150,90" pixmap="mySkin/menu.png" drawMode="normal" />



    (nur ein Teil der Grafik wird gezeichnet falls zu gross, oder nicht der gesamte Bereich wird gefüllt falls zu klein)


    oder



    Code
    <ePixmap position="800,400" size="150,90" pixmap="mySkin/menu.png" drawMode="stretch" />


    (die Grafik wird an die horizontale und vertikale Grösse angepasst)


    2. Konstanten für Koordinaten und Bildgrössen, ähnlich der Definition von Farben am Anfan eines Skins.


    Also an Stelle von:


    Code
    <ePixmap position="800,400" size="150,90" pixmap="mySkin/menu.svg" />


    etwa:


    Code
    <constants>
    <constant name="hPos" value="800" />
    <constant name="vPos" value="400" />
    <constant name="hSize" value="150" />
    <constant name="vSize" value="90" />
    </constants>



    und dann später im Skin:


    Code
    <ePixmap position="hPos,vPos" size="hSize,vSize" pixmap="mySkin/menu.svg" />
  • Danke für den Tipp zu Punkt (1), ich kannte die Option nicht.


    Findest du eine nackte Zahl wirklich unübersichtlicher als einen der Funktion entpsrechenden Namen?


    Vor allem bietet dies die Möglichkeit den Skin sehr schnell global zu verändern. Wenn man z. B. einen bestimmten Button in sämtlichen Screens ein wenig mehr einrücken möchte. Und wenn schliesslich UHD Skin Auflösungen möglich sein werden, kann man auch hier sämtliche Grössen und Position schnell verändern und man braucht praktisch nur einen Skin zu warten.

  • Ich hab die Idee dahinter schon verstanden find es trotzdem umständlich wenn man dann immer irgendwo anders im xml nach den passenden Werten suchen soll :smiling_face:
    Mir ist es egal ist ja auch nicht meine Entscheidung ob es sowas gibt.


    Es gibt keine UHD Skins (auch nicht geben wird) weil die HW (alle bisherigen) das überhaupt nicht kann. :winking_face:

    • Offizieller Beitrag

    Ohne jetzt direkten Bezug auf SVG zu nehmen, denn diese werden beim einlesen immer auf die Größe der zu Grunde liegenden pixmap skaliert habe ich mir mal die Mühe gemacht einige zusätzliche scaling Optionen anzubieten und dabei direkt einige Fehler im ganzen skin-scale-code zu fixen...


    Folgendes wäre mein Vorschlag für alles was auf ePixmap aufbaut:

    • "off" oder "none" : keine skalierung/anpassung
    • "on" oder "aspect" : skalierung unter erhaltung des Seitenverhältnisses, so dass auf jeden Fall alles sichtbar bleibt
    • "center" : zentrieren im UI element ohne Änderung der Größe
    • "width" : Auf die Breite des UI-Elements anpassen, in der Höhe wird dabei ggf. abgeschnitten
    • "height" : Auf die Höhe des UI-elements anpassen, in der Breite wird dabei ggf. abgeschnitten

    Was sich als kaputt herausstellte war wenn man scale="0" angegeben hatte. Da wurde trotzdem skaliert. Diesen Fehler hab ich NICHT behoben um eventuelle Nebeneffekte in exisitierenden skins zu vermeiden.
    Statdessen zeigen 0/1 wie bisher (jedenfalls schon ziemlich lang...) auf "aspect"
    Für Entwickler gibt's natürlich auch entsprechende Optionen, geändert hat sich, dass sich diese nun auch zur Laufzeit sofort auswirken (das war vorher nur der Fall wenn man eine neue pixmap gesetzt hat).:

    Python: bla.py
    """
    Verfügbare SCALE_TYPE_*
     ePixmap.SCALE_TYPE_NONE
     ePixmap.SCALE_TYPE_ASPECT
     ePixmap.SCALE_TYPE_CENTER
     ePixmap.SCALE_TYPE_WIDTH
     ePixmap.SCALE_TYPE_HEIGHT
    Sehr simples Beispiel:
    """
    pixmap.setScale(ePixmap.SCALE_TYPE_CENTER)
  • hallo zusammen,


    die Optionen zum skalieren wären ganz nett. Eventuell noch eine Skalierung ohne erhalt des Seitenverhältnisses.


    Noch ne Frage ob es in Sachen borderset möglich wäre auch .svg images zu nutzen die skaliert anstatt wiederholt werden?

  • Für die borderset´s hab ich auch schon bei Reichi etwas angefragt ,da kommt eventuell mal auch noch ne Veränderung sofern er da was machen kann und die Zeit da ist.
    (schön wäre da nämlich auch ganz ohne Grafiken und nur mit Farb und höhen Angabe wo sich dann die breite selbst bestimmt je nach Screenangabe und das halt ohne eine Grafik)


    Auch kann man bei svg gut mit Farbangaben arbeiten wenn man da ne Einstellung im Image hätte könnte man sogar per Fernbedinung die Farbe der Grafiken ändern . :winking_face:

    2 Mal editiert, zuletzt von zombi ()

  • ja ein .svg editor für e2 wäre ja ganz nett, aber wer ausser uns will vor dem TV sitzen und ständig die farben anpassen. aber bei borders hätte ich schon gerne eine skalierbare grafik. höhenangabe und automatische füllung über die breite ist auch gut, allerdings kann man mit ner grafik das etwas anders darstellen

  • Das mit der reinen Farbe ist als eine weitere Option gedacht ,genauso wie zb. das man da ne svg auch einsetzen könnte usw.
    Daher schrieb ich ja das es in die Richtung borderset schon Überlegungen gibt und auch schon drüber gesprochen wurde ,von anderen Vorschläge hört sich Reichi denke auch gern an und sein Zettel ist da sicherlich schon extrem lang :grinning_squinting_face: .
    Was die Jungs bei DMM dann da alles umsetzen können /wollen oder wann ist dann ne andere Sache .
    Aber was sie bisher so umgesetzt haben ist schon ne Wucht und auch das sie so sehr auf das Thema Skins und Skinmöglichkeiten eingehen zeigt ja das sie da uns Usern echt auch zuhören und vieles machbar machen.

  • Die Umsetzung ist ja schon super mit den scalable v. g. .... Dingern. :thumbs_up:


    Und ein Bild wo man Höhe und Breit frei definieren kann ist nen nettes Feature.
    Nicht direkt für nen speziell, gezaubertes Bild, wer will schon das das Seitenverhältnis vermurksen?


    Aber Grafiken in der Länge und Breite zu verunstalten, oder zu verzaubern wäre das schon interessant.
    Da müsste es nicht ein mal eine Füllen Option geben. So eine Grafik ist ja so einfach zu erstellen, welche dann
    in alle Richtungen gezogen werden kann. Sofern es das System erlaubt.


    Und bye the way, Farben zu verändern, von den System Icons....
    Macht man sicher nicht immer, aber ist ein geiles Feature. Ist mir auch schon durch den Kopf gegangen, so hätte man durchgängige Icons
    für den (materials) Stil. Und vielleicht passt es ja dann auch mit einem selbstgerechten Skin überein?

  • borderset ist der Rahmen um ungeskinnte screens bzw. screens die nicht mit flags="wfNoBorder" angegeben sind (beim Systemdefault ist es dein schön gemachter Streifen oben wo der Titel drin steht :winking_face: )

  • so wie es aussieht ist es jetzt schon bei den bordern so dass die .svg grafik komplett über das element scaliert wird. Hatte jetzt mal in der bsListboxEntry einen border durch ne .svg ersetzt und der selektierte bereich wird übermalt. Muss das mal später bi bsWindow probieren


    bei ner .png funktioniert es wies sollte. Aber ist auch nicht so schlimm mit der scalierten .svg nur der listen eintrag müsste darüber liegen.






    mit .SVG







    mit .PNG


    Einmal editiert, zuletzt von capa ()

  • Und genau da bei den Bordersets könnte man die einzelnen Boxteile mit einer einzigen SVG Datei erstellen wenn man auch SVG Grafiken nicht skalieren könnte, aber dafür einen Offset oder Ausrichtung (left, right, top, bottom) angeben könnte.


    Aber wenn ich Reichi richtig verstanden habe, dann werden diese stets skaliert, die neuen Modi beziehen sich nur auf PNG Dateien.

  • so richtig übers ganze element wird die .svg auch nicht scaliert. bei verwendung einer grafik mit abgerundeten ecken sieht man dass die svg grafik auch wiederholt wird. wie die skalierung da jetzt angewendet wird weiß ich auch nicht. ich habe einen rechteck mit abgerundeten ecken verwendet. die oberen ecken sieht man, die unteren nicht.


    • Offizieller Beitrag

    Im Borderset wird garnix skaliert :).
    Die Grafiken werden 1:1 übernommen und wiederholt bis die nötige breite erreicht wurde.


    Ich weiß auch nicht das wirklich Sinn macht?!
    Ein Horizontales Strecken einer Grafik mit irgendwas abseits eines rechten Winkels führt immer zu einer Veränderung der Kurven/Winkel.
    Man sieht das schön im Zombies Beispiel, die gestreckten Flanken werden beim strecken schlanker.
    Alles kreisförmige wird elliptisch, alle winkel werden beim strecken spitzer, beim stauchen stumpfer.


    Die "unwanted side effects" sind bei SVG die Selben wie bei alle anderen Grafiken nur halt ohne Verlust von Präzision und Schärfe da die eigentliche Grafik erst beim einlesen errechnet und gezeichnet wird.


    Rahmen aus festen Farben sind
    1. Sinvoller und schlüssiger
    2. Einfacher zu implementieren
    3. Verständlicher in ihrem Verhalten.

  • Im Borderset wird garnix skaliert :).
    Die Grafiken werden 1:1 übernommen und wiederholt bis die nötige breite erreicht wurde.


    Wie Du im oberen Beispiel siehst wird die SVG grafik im bsListboxEntry nicht nur in der Breite sondern auch in der Höhe wiederholt. Was sicherlich nicht richtig ist. Eine PNG von 100x1px wird in der Breite wiederholt bis zum erreichen der Breite der Liste, in der Höhe mit 1px aber belassen.