Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

 Delphi Discussion :

Rendu des styles sur Android


Sujet :

Delphi

  1. #1
    Membre régulier
    Rendu des styles sur Android
    Salut les devs !

    Je développe actuellement une application Android, et j'ai quelques soucis de rendu. Une image vaut mille mots :


    Autant dire que mes yeux saignent .

    Voici la structure de mon style :


    Et les paramètres du TRectangle permettant de faire la bordure :


    Quelqu'un aurait une idée pour rendre ça propre ?
    Delphi 7 et 10.3.2
    IBExpert et Firebird 2.5

    Fervent partisan de la méthode du canard en plastique .

  2. #2
    Membre éprouvé
    aïe, oui, effectivement c'est moche

    Je n'ai rien pour essayer de mon côté ce soir, mais peux-tu nous dire si ça fait pareil sous Windows ?

  3. #3
    Rédacteur/Modérateur

    Bonjour,

    ma première réaction a été : mais pourquoi diable créer un style pour un bouton , pour les angles arrondis ? Il y a le TCornerButton
    reste donc juste l'épaisseur du trait (ce qui me choque le plus) ou la couleur (encore que l'on puisse utiliser les styles fournis)

    Donc, pour l'essentiel je ne vois pas le pourquoi d'un style particulier, pour le détail au lieu d'utiliser un fond uni (comme le style d'un bouton) utiliser un gradient pour atténuer ce noir devrait faire pas mal de bien (aussi bien pour le fond que pour le contour)
    ici le design du style

    à l'exécution (il est toujours possible de modifier les angles, la couleur et taille de fonte


    à noter que pour le contour, j'ai modifié l'angle de mon gradient ce qui renforce l'impression de l'angle en bas à gauche
    La seule chose absolue dans un monde comme le nôtre, c'est l'humour. » Albert Einstein

    Delphi installés : D3,D7,D2010,XE4,XE7,D10 (Tokyo, Rio, Sidney) et peut être quelques autres
    SGBD : Firebird 2.5, 3, SQLite
    générateurs Etats : FastReport, Rave, QuickReport
    OS : Window Vista, Windows 10, Ubuntu, Androïd

  4. #4
    Membre régulier
    Bien le bonjour Messieurs ! Merci d'accorder du temps à ma demande .

    Pour ma part, je ne suis pas designer, je m'occupe seulement de la partie développement. Actuellement, ce design est provisoire, et pourra être changé par la suite (merci pour les exemples )

    Je n'ai rien pour essayer de mon côté ce soir, mais peux-tu nous dire si ça fait pareil sous Windows ?
    Non, les styles apparaissent correctement sous Windows.

    J'ai peut-être été imprécis dans ma question, je vais donc arranger cela : mon objectif est que ce style (qui est un bouton) rende bien. En image :

    Windows :


    Android :


    J'aimerais simplement avoir le rendu Windows sur Android !

    Ceci dit, le petit trou suivant :


    Parfois il apparaît, parfois pas (je n'ai pas encore trouvé le pourquoi du comment).

    Ce que je n'arrive pas à faire pour l'instant, c'est "lisser" le trait, pour qu'il n'apparaisse pas tout pixellisé.


    En réalité ceci se produit pour les styles que j'ai créé contenant une bordure de TRectangle :

    Un TEdit :


    Un TCheckBox :


    Encore une fois, ces problèmes n'apparaissent pas sous Windows.

    Peut-être que je m'y prends de la mauvaise manière avec mes styles .
    Delphi 7 et 10.3.2
    IBExpert et Firebird 2.5

    Fervent partisan de la méthode du canard en plastique .

  5. #5
    Rédacteur/Modérateur

    Avec un RoundRect pas de "gap" sur mon Android

    RoundRect parce que je me suis trompé en cours de design


    Citation Envoyé par mistercactus Voir le message

    Pour ma part, je ne suis pas designer, je m'occupe seulement de la partie développement.
    Peut-être que je m'y prends de la mauvaise manière avec mes styles .
    De mon point de vue oui. Moi non plus je ne suis pas designer mais cette phrase
    Citation Envoyé par mistercactus Voir le message
    Actuellement, ce design est provisoire, et pourra être changé par la suite
    résume pour moi la situation.

    Si vous créez vos propres styles un designer devra aller dans votre programme pour modifier chacun de ceux que vous avez créé.
    Si vous utilisez un style "standard" au pire il aura à modifier une seule et unique image : cette fameuse image ressource que l'on trouve quand l'on fouille (propriété SourceLookup des TStyleObjects) il y a un papier de Sarina Dupont sur le sujet.

    Cela dit rien n'empêche de fournir plusieurs fichiers styles (ou plusieurs stylebooks) impliquant alors les mêmes manipulations
    La seule chose absolue dans un monde comme le nôtre, c'est l'humour. » Albert Einstein

    Delphi installés : D3,D7,D2010,XE4,XE7,D10 (Tokyo, Rio, Sidney) et peut être quelques autres
    SGBD : Firebird 2.5, 3, SQLite
    générateurs Etats : FastReport, Rave, QuickReport
    OS : Window Vista, Windows 10, Ubuntu, Androïd

  6. #6
    Rédacteur/Modérateur

    Enfin, pour le problème du gap cela ne vient pas du style
    J'ai écrit un petit programme avec en tout et pour tout un rectangle (avec un contour à 5 blanc) et deux boutons pour agrandir/diminuer les angles

    Code :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
     
    unit Unit37;
     
    interface
     
    uses
      System.SysUtils, System.Types, System.UITypes, System.Classes, System.Variants,
      FMX.Types, FMX.Controls, FMX.Forms, FMX.Graphics, FMX.Dialogs,
      FMX.Controls.Presentation, FMX.StdCtrls, FMX.Objects, System.Math;
     
    type
      TForm37 = class(TForm)
        Rectangle1: TRectangle;
        Button1: TButton;
        Button2: TButton;
        procedure Button1Click(Sender: TObject);
        procedure Button2Click(Sender: TObject);
      private
        { Déclarations privées }
      public
        { Déclarations publiques }
      end;
     
    var
      Form37: TForm37;
     
    implementation
     
    {$R *.fmx}
    {$R *.LgXhdpiPh.fmx ANDROID}
     
    procedure TForm37.Button1Click(Sender: TObject);
    var r : Single;
    begin
    r:=Rectangle1.XRadius+1;
    r:=Min(R,Rectangle1.Height/2);
    Rectangle1.XRadius:=R;
    Rectangle1.YRadius:=R;
    end;
     
    procedure TForm37.Button2Click(Sender: TObject);
    var r : Single;
    begin
    r:=Rectangle1.XRadius-1;
    if r<0 then r:=0;
    Rectangle1.XRadius:=R;
    Rectangle1.YRadius:=R;
    end;
     
    end.

    conclusion : le gap apparait/disparait en fonction de la valeur

    à signaler à embarcadero ?
    La seule chose absolue dans un monde comme le nôtre, c'est l'humour. » Albert Einstein

    Delphi installés : D3,D7,D2010,XE4,XE7,D10 (Tokyo, Rio, Sidney) et peut être quelques autres
    SGBD : Firebird 2.5, 3, SQLite
    générateurs Etats : FastReport, Rave, QuickReport
    OS : Window Vista, Windows 10, Ubuntu, Androïd

  7. #7
    Membre régulier
    conclusion : le gap apparait/disparait en fonction de la valeur
    Déjà une chose comprise

    à signaler à embarcadero ?
    ça ne me paraît pas être un comportement normal, donc je dirais oui

    Avec le RoundRect mon problème principal reste présent :


    On voit clairement que la bordure est crénelée. Concrètement, j'aimerais ajouter de l'anti-aliasing pour "lisser" le tout !

    Si vous créez vos propres styles un designer devra aller dans votre programme pour modifier chacun de ceux que vous avez créé.
    En fait, mon collègue (meilleur que moi en design) me fait des maquettes, et je crée les styles correspondants dans Delphi. D'où le fait que ce soit moi qui fasse les styles, et qu'ils ne soient pour l'instant pas très jolis, car je n'ai pas encore reçu les maquettes (d'où le design provisoire) !
    Delphi 7 et 10.3.2
    IBExpert et Firebird 2.5

    Fervent partisan de la méthode du canard en plastique .

  8. #8
    Membre éprouvé
    Citation Envoyé par SergioMaster Voir le message
    à signaler à embarcadero ?
    Clairement oui, avec ton programme zippé en pièce jointe pour reproduire le problème.

  9. #9
    Membre éprouvé
    Citation Envoyé par mistercactus Voir le message
    En fait, mon collègue (meilleur que moi en design) me fait des maquettes, et je crée les styles correspondants dans Delphi. D'où le fait que ce soit moi qui fasse les styles, et qu'ils ne soient pour l'instant pas très jolis, car je n'ai pas encore reçu les maquettes (d'où le design provisoire) !
    Dans ce cas ne t'embêtes pas, file lui de programme du Bitmap Style Designer et/ou les images de base à personnaliser pour qu'il fasse le boulot à ta place.

    Le travail de graphiste aux graphistes, tel est mon crédo (tant que ça ne concerne pas le fait de mettre un toucan sur une photo de ville )

  10. #10
    Membre régulier
    Dans ce cas ne t'embêtes pas, file lui de programme du Bitmap Style Designer et/ou les images de base à personnaliser pour qu'il fasse le boulot à ta place.
    Je vais voir un peu comment ça fonctionne, et mettre ça en place .

    Ceci dit, par curiosité, auriez-vous une idée pour ajouter de l'anticrénelage sur cette bordure ?
    Delphi 7 et 10.3.2
    IBExpert et Firebird 2.5

    Fervent partisan de la méthode du canard en plastique .

  11. #11
    Membre éprouvé
    Citation Envoyé par mistercactus Voir le message
    Ceci dit, par curiosité, auriez-vous une idée pour ajouter de l'anticrénelage sur cette bordure ?
    ça devrait être déjà actif, c'est pour ça que je soupçonne un bogue

  12. #12
    Membre régulier
    Je vais prendre mon mal en patience alors

    L'un de vous a déjà reporté les bugs, ou je m'en occupe ?
    Delphi 7 et 10.3.2
    IBExpert et Firebird 2.5

    Fervent partisan de la méthode du canard en plastique .

  13. #13
    Rédacteur/Modérateur

    Bonjour
    Citation Envoyé par mistercactus Voir le message

    L'un de vous a déjà reporté les bugs, ou je m'en occupe ?
    à toi " l'honneur " je n'ai pas le temps (ou le courage) de le faire. À vérifier si ce n'est pas un bogue connu, il n'y a rien de plus rageant que de se faire renvoyer aux calendes grecques avec un "duplicate case"
    La seule chose absolue dans un monde comme le nôtre, c'est l'humour. » Albert Einstein

    Delphi installés : D3,D7,D2010,XE4,XE7,D10 (Tokyo, Rio, Sidney) et peut être quelques autres
    SGBD : Firebird 2.5, 3, SQLite
    générateurs Etats : FastReport, Rave, QuickReport
    OS : Window Vista, Windows 10, Ubuntu, Androïd

  14. #14
    Membre régulier
    ça marche, je vais aller me jeter aux fauves

    Plus sérieusement, ça me permettra de voir comment ça fonctionne, vu que je ne l'ai encore jamais fait.

    En attendant, problème résolu (en quelque sorte) ! Merci encore
    Delphi 7 et 10.3.2
    IBExpert et Firebird 2.5

    Fervent partisan de la méthode du canard en plastique .

  15. #15
    Rédacteur/Modérateur

    Bonjour,

    comme je lâche pas facilement mon os j'ai fait plusieurs autres essais

    - Tout d'abord j'ai fait quelques recherches et trouvé ceci
    - Suite à la lecture de ce lien j'ai changé la propriété Quality de la forme (je ne connaissais même pas son existence ) constatation cela change un peu (en mieux) la donne mais, encore une fois quelques gaps apparaissent, dans mes tests un seul lorsque la valeur XRadius=YRadius=2)
    - Suite à cette constatation j'ai rajouté un trackbar pour modifier aussi l'épaisseur de bordure ce qui fourni quelques surprises (gap) supplémentaires

    AMHA il y a une histoire d'arrondi quelque part dans le calcul dessin mais je n'irais pas fouiller dans les sources une fois la moelle sucée l'os est moins attirant

    reste que pour moi la démarche serait que le graphiste modifie le style ainsi que l'a indiqué Patrick et que au niveau du dev tu te contentes d'un fichier style déterminé, de plus cela permettra des choses assez difficiles à mettre en place dans un style personnalisé (les effets par exemple)
    La seule chose absolue dans un monde comme le nôtre, c'est l'humour. » Albert Einstein

    Delphi installés : D3,D7,D2010,XE4,XE7,D10 (Tokyo, Rio, Sidney) et peut être quelques autres
    SGBD : Firebird 2.5, 3, SQLite
    générateurs Etats : FastReport, Rave, QuickReport
    OS : Window Vista, Windows 10, Ubuntu, Androïd

  16. #16
    Rédacteur/Modérateur

    Bonjour,

    je reviens sur le sujet avec d'autres idées. Ayant découvert récemment TPath et consort (TPathLabel) mais aussi les composants RadiantShapes voici un autre style qui pourrait bien s'avérer intéressant



    Ici j'ai mis un composant RadientCapsule mais un TPath, si j'avais pu en trouver un identique aurait peut-être fait la même chose.
    Mon idée était que, du fait qu'il s'agit de pathdata, cela forcerait le calcul du dessin (au détriment du temps CPU mais rien n'est parfait.

    et voilà un premier jus

    qui semble confirmer mon idée, un essai sur fond noir et bouton blanc me confirme mon impression (changements de taille ou échelle inclus)

    reste un dernier essai : le changement de taille du contour

    pour les sources voir ici
    La seule chose absolue dans un monde comme le nôtre, c'est l'humour. » Albert Einstein

    Delphi installés : D3,D7,D2010,XE4,XE7,D10 (Tokyo, Rio, Sidney) et peut être quelques autres
    SGBD : Firebird 2.5, 3, SQLite
    générateurs Etats : FastReport, Rave, QuickReport
    OS : Window Vista, Windows 10, Ubuntu, Androïd