Discussion :

[Bernard B]

Bonjour,

J'ai une application pour Delphi 11.3 Android qui utilise le style calypso.
Pour des besoins de vision nocturne, je voudrais pouvoir basculer vers un style à dominante rouge comme présenté sur cette image :


Je voudrais savoir déjà s'il n'y aurait pas juste un effet à appliquer ???

Sinon, je voudrais faire évoluer calypso vers son pendant rouge.
A une époque j'avais vu que tous les composants du style étaient dessinés sur une page (peut être en VCL et pas en FMX) que je saurais facilement recolorer.
Dans le fichier "CalypsoSE_Android.style" il semble y avoir un fichier StyleName = 'Calypso Androidstyle.png' intégré dans le fichier .style.
Ce fichier 'Calypso Androidstyle.png' contient-il tous les dessins des composants et faut-il l'extraire et le decoder ??

Restera ensuite la question de changer de style à la volée mais c'est pour plus tard !!
Merci

[SergioMaster]

En théorie, oui, la solution est de récupérer les pngs (il y en a 3 pour calypso) puis de modifier les couleurs de ceux-ci via un editeur d'image (Gimp, Adobe ...), sauvegarder les images en calypso_rouge puis de faire les changements d'images dans un fichier style.

En théorie, car il faut disposer du fichier .vsf (pas .style ni .fsf). À chercher dans ce forum, je m'étais posé la question du comment obtenir une sauvegarde en .vsf, pour moi il est possible de passer d'un .vsf à un .style, mais l'inverse, je ne sais pas si j'avais conclu.

[SergioMaster]

Bonjour,

je ne sais pas si tu as avancé dans tes essais ?
Je me suis dit que sans parler de récupérer/changer les images, il y avait peut-être une possibilité de changer le fond avec des effets et, de fait, une petite modification dans le style, l'ajout d'un effet sepia sur le "background" change complètement la donne.






Et oui, c'est bien calypso qui est utilisé et pas de bleu !

Pour du rouge, un TFillEffect pourrait suffire


toutefois, je voulais tenter de modifier la gradient plutôt que la couleur "totale" d'où ma tentative (un peu ratée) de l'effet sépia. Comme il y a pléthore d'effets on doit pouvoir trouver l'effet ad hoc, ce qui se rapprocherait un peu : le TInvertEffect pour un truc plutôt rose je te laisse la "joie" de la découverte.

L'avantage de l'ajout d'un effet, il est désactivable facilement au runtime ce n'est pas un chargement de style et en théorie ce serait plus rapide

[SergioMaster]

Pourquoi toucher le style ? C'est la question que je me suis posée ensuite, ajouter un TRectangle de couleur avec une certaine transparence (et un hittest à false) et cela fait l'affaire.

[SergioMaster]

Le fait de ne pas pouvoir obtenir les images me restait un peu en travers de la gorge.
J'ai donc créé une forme vierge.
Ouvert le fichier style avec notepad.
Sélectionné la partie correspondante à l'image

Dans l'IDE, je suis passé en mode voir comme texte et ajouté ce que j'avais sélectionné

Conclusion, il est possible de récupérer les images (reste à savoir si c'est très légal ) mais, sur fond noir (car sur fond blanc c'est plutôt difficile de distinguer)


il n'y a plus qu'à coder quelques lignes (que je ne divulguerai pas tant que je ne suis pas sûr de la légalité) pour sauvegarder les 3 png ensuite utiliser GIMP ou Adobe pour changer cette partie et ...

[ALWEBER]

J'ai travaillé sur le sujet il y a quelques années. Je vais essayer de retrouver ma production. C'est une image dans laquelle tu découpes des parties. De mémoire ans l'EDI il y a moyen d'accéder directement à cette image. en voici un exemple

[ShaiLeTroll]

J'étais persuadé que l'on avait déjà évoqué cela avec SergioMaster mais je rien trouvé de mieux que le sujet [10.4] Apparences (styles), changement au runtime et apparence au contrôle

Pas en style FMX (*.Style) mais style VCL (*.vsf), comme à ton idée, j'avais décline le thème juste sur la dominante de couleur
les styles officiels
Smokey Quartz Kamri - DEV
Amethyst Kamri - PROD
Sapphire Kamri - PROD mais contexte différent

les sytles déclinés en changeant la dominant du couleur de Amethyst qui est bleu, tout l'image décliné en Rose.
Sur la même logique, j'avais décliné un Vert et un Jaune pour différencier sur un même site différent contexte d'utilisation
Cela donnait donc en Rubis Kamri (Rose GL), Emeraude Kamri (Vert Italie), Ambre Kamri (Jaune Morangis)

En XE2, en 2015, récupérer l'image était triviale, cela me surprend que cela soit plus difficile aujourd'hui


Est-ce que le *.Style peut être altéré comme le *.vsf ?

Voici ce que cela donnait, je n'ai plus les fichiers de l'époque pour voir mais c'était évidemment l'image des Sprites.

Ce style rose est une simple variation de Amethyst Kamri, uniquement l'image contenu dans le *.vsf

Pense à mettre ton VSF dans SVN ou GIT, et de prévoir un BAT pour effectuer le déploiement sur tous les postes développeurs pouvant compiler le projet

Code bat :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
Copy "StyleItalie.vsf" "C:\Users\Public\Documents\RAD Studio\9.0\Styles\StyleItalie.vsf"
Copy "StyleMorangis.vsf" "C:\Users\Public\Documents\RAD Studio\9.0\Styles\StyleMorangis.vsf"
Copy "StyleGAL.vsf" "C:\Users\Public\Documents\RAD Studio\9.0\Styles\StyleGAL.vsf"

[ShaiLeTroll]

Ah, j'ai retrouvé les styles VCL en *.VSF, je suppose qu'ils ne sont pas compatibles avec FMX
J'ignore comment convertir un *.VSF (PNG) vers *.STYLE (PNG ou Path Vectoriel), je te laisse donc lire Converting a VCL Style to a FireMonkey Style, cela semble extrèmement simple (contrairement la réciproque qui semble pénible voire impossible)

Donc récupère GetIt: Calypso VCL Style – New in 10.3.1
Calypso.vsf
CalypsoLE.vsf
CalypsoSE.vsf
CalypsoSLE.vsf


Il y a dans l'éditeur de D10 Seattle tout ce qu'il faut pour exporter l'image, tu prend GIMP pour changer la teinte et tu importes l'images dans un clone du VSF


Puis convertir un VSF en STYLE se fait facilement par l'éditeur ci-dessus.
La réciproque ne semble pas exister.

[Bernard B]

Merci Sergio de relancer.

J'ai trouvé une solution en ajoutant simplement un rectangle sur le backgroundstyle dans l'éditeur de style. Comme certaines parties de mes composants sont semi-transparentes cela ne fonctionne pas mal.

Mettre le rectangle au dessus de tout le reste avec une transparence j'y ai aussi pensé mais je me suis dit que s'il était au dessus des autres composants, il allait intercepter les clicks et les touchés donc on ne pouvait plus rien faire. Vrai, faux ??

Concernant l'image PNG, dans les fichiers vsf, j'y ai aussi pensé mais il m'avait semblé qu'elle était transcodée en Base64 et je ne l'ai pas extraite pour essayer de la visualiser ou ça n'a pas fonctionné je ne sais plus...

Shail, je vais regarder ce que tu proposes, mais il me faut un peu de temps pour comprendre...

Merci à vous !!

[SergioMaster]

Bonjour,

Donc récupère GetIt: Calypso VCL Style – New in 10.3.1
Calypso.vsf
CalypsoLE.vsf
CalypsoSE.vsf
CalypsoSLE.vsf

Je n'avais pas vu qu'ils existaient en VCL, ce qui simplifie complètement le process !

J'ignore comment convertir un *.VSF (PNG) vers *.STYLE

Si la manipulation est simple, une simple sauvegarde en .style, le process utilisé, lui, n'est pas décrit et c'est dommage car dans ce truc se cache la disparition des couleurs "système", couleurs qui vont ensuite aller s'appliquer un peu partout dans le fichier de style.

Je pense que je vais voir avec la communauté MVP si quelqu'un a une idée de la chose.

[exoseven]

Merci Sergio de relancer.
Mettre le rectangle au dessus de tout le reste avec une transparence j'y ai aussi pensé mais je me suis dit que s'il était au dessus des autres composants, il allait intercepter les clicks et les touchés donc on ne pouvait plus rien faire. Vrai, faux ??

Comme le dit sergio il suffit de mettre la propriété HitTest du rectangle à false pour qu'il ignore les clicks

[Bernard B]

Alors j'ai fait quelques essais.
Je suis parti du style FMX Calypso, j'ai extrait avec le 'concepteur de styles de bitmaps' les 3 images Style.png, style15x.png et style20x.png.
Je les ai modifiées avec un logiciel de traitement d'images pour les changer de couleur.
J'ai supprimé les 3 png d'origine, remis les 3 png modifiées et enregistré le style en mode FMX sous un nouveau nom : CalypsoRouge.style.
Dans une appli de test, j'ai chargé ce style et je n'obtiens que le style windows par défaut.
Dans cette appli si je met le style Calypso FMX il s'applique bien.

J'en conclu que le style modifié ne fonctionne pas.

[SergioMaster]

Il s'applique, mais tu as dû très certainement oublier d'indiquer les OS dans la partie "entête" du style.
Le mieux serait que tu nous (me) fournisses en pièce jointe ton style que je puisse vérifier (pas facile d'exprimer exactement ce que je veux dire, je n'ai pas encore, loin de là, abordé ce chapitre de mon futur livre sur les styles, encore au stade diverses notes).

je parle de ça


par contre, à l'instant T, je suis incapable de t'indiquer ce qu'il faut y mettre (matin brouillard)

[Bernard B]

Effectivement je n'avais pas renseigné ces champs.

Je viens de le faire, j'ai créé :
CalypsoRougeW.vsf avec la case MobilePlatform =False et PlatformTarget=Windows
CalypsoRougeA.vsf et CalypsoRougeA.style avec la case MobilePlatform = True et PlatformTarget=Android.

Si je rouvre ces styles avec le concepteur de style bitmap je ne retrouve pas ces infos ?
Au niveau fonctionnel pour moi rien de changé.

Sergio j'attends ton livre, mais ça ma parait très compliqué à comprendre puis à vulgariser.

[SergioMaster]

Sergio j'attends ton livre, mais ça ma parait très compliqué à comprendre puis à vulgariser.

Je confirme

J'ai oublié de demander : quelle version de Delphi ? (ça peut jouer)

Merci, je vais faire mes essais

première constatation bizarre, je n'ai pas Android mais default

seconde constatation

untitled.png (surligné) est toujours calypso bleu

[SergioMaster]

Bonjour,

je suis reparti à zéro (maintenant que ShaiLeTroll avait si obligeamment indiqué que le style calypso existait en VCL)
Première étape : après récupération de l'image modifier les couleurs (voir pièce jointe, fait avec Gimp que je ne maitrise pas )
Seconde étape : modifier (ou pas d'ailleurs) le style pour VCL, l'mportant est surtout de sauvegarder en .Style (avec un nom différent de calypso bien sûr )

Le truc, c'est que cela ne s'arrête pas là, il faut ensuite déposer un TStylebook, l'éditer (double click sur le composant) et le modifier (changement de l'image)
et voilou la prime étape

tu remarqueras qu'il s'agit bien d'une prévisualisation Android niveau design.

Cela étant, le travail n'en est qu'à ses balbutiements, il y a des subtilités que j'entr’aperçois sans pour autant mettre le doigt dessus :

1. plateforme (pour l'instant "default")
2. il faut certainement travailler sur les couleurs plus spécifiques, la partie "couleurs système" avant
   
3. spécificités Androïd etc..
4. Autres OS (quoique n'ayant pas de truc à la pomme )

Pour ces deux derniers, il est vrai que désormais la tendance Embarcadero est plutôt de faire un fichier style spécifique à chaque OS plutôt que, comme au début, avoir tous les styles OS dans le même fichier.

Autant de questions qu'il va me falloir débroussailler, donc, non seulement il faut se pencher sur le concepteur de bitmaps et toutes ses options (il y a de nombreuses possibilités de créations de style en fonction de l'OS ce qui complique la donne) mais en plus, ouvrir ensuite le style via une application firemonkey pour changer encore des choses (Embarcadero n'a pas fait dans la simplicité là ! A.M.H.A. il manque un outil concepteur de style Bitmap FMX)

[Bernard B]

Bonjour,

Première étape : après récupération de l'image modifier les couleurs (voir pièce jointe, fait avec Gimp que je ne maitrise pas )
Seconde étape : modifier (ou pas d'ailleurs) le style pour VCL, l'mportant est surtout de sauvegarder en .Style (avec un nom différent de calypso bien sûr )

Ça j'ai fait. C'est la PJ à mon post précédent.
J'ai récupéré les 3 fichiers images pour les 3 résolutions il me semble, j'ai modifié les 3 et les ai mis à la place des images d'origine du style puis enregistrement sous un nouveau nom.

il faut ensuite déposer un TStylebook, l'éditer (double click sur le composant) et le modifier (changement de l'image)

Ça aussi j'ai fait, double click sur le TStylebook, chargement du style en allant chercher le nouveau style et là rien ne se passe ??

Tu parles de le modifier avec changement de l'image ? Qu'entends tu par là ?

Merci