[Info/Tuto] Widgetlocker 1.2.9 - 2.0, création de thèmes

[godeke-m]

Widgetlocker 2.0+ : création de thèmes

Information général et Tutoriel complet pour vous guidé dans la création de votre thème.

(La centralisation de thèmes)

Tuto par sliders par encore présent, mais retour des bases de donnés et ressources c'est repartis !

Index: 1).Introduction : 1.1 télécharger un thème. 2).Les outils et bases de donnés. 3).Three-Patch et Nine-Patch : 3.1 Nine-Patch, 3.2 Three-patch. 4) Tutoriel général : 4.1 Tutoriel par slider: 4.1.1. Slider Android, 4.1.2.slider iPhone,...

1. Introduction.

Widgetlocker est une application android, qui consiste à vous offrir un lockscreen/écran de verrouillage personnalisable.

Depuis la dernières mise à jour à l’heure ou j’écrit ses lignes, elle est passé en version 2.0,

Nouvelles fonctionnalité mais surtout support officiel de slider personnalisé.

Il est vrai que la communauté android ,XDA,Frandroid,… n’avais pas attendu et les sliders MODDÉ faisait leur apparition mais via une méthode d’installation requérant,

root et patience… et qui consistait à extraire son apk, le modifié puis le réinstallé.

C’est maintenant beaucoup plus facile !!!!! Le nouvel apport du Three-Patch (Plus d’information dans le chapitre suivant), et les thèmes placé sous un fichier zip, qui n’as qu’a être sur votre SD au bonne endroit pour étre ajouté a vos sliders :)

Ainsi trois méthode s’offre à vous pour installé un thème désormais,

1.1. télécharger un thème

1.via l’application.

Lorsque vous ajouté votre slider, une option obtenir des thèmes apparait, elle vous redirige vers http://widgetlocker....ategory/themes/, la centralisation officielle des thèmes widgetlocker.

(Cette centralisation s’appuie elle-même sur un forum de XDA, http://forum.xda-dev...ad.php?t=968613 , Ainsi il vous suffit d’y proposer vos création afin d’espérer la voir apparaitre via l’application)

un « clic/touch » sur le lien et hop cela se télécharge, l’option « utilisé WL par défaut pour cette action » apparait, ainsi peux importe d’où provient le lien du théme, il iras se déposé au bonne endroit de la mémoirez de votre téléphone, cela se fait via la reconnaissance de la fin du nom de fichier, obligatoirement : .wltheme.zip.

2. Via internet.

Soit rien de plus facile, télécharger le zip via un lien depuis internet, si vous avez l’ « action par default » de widgetlocker activé se sera mis dans le bon dossier sous votre SD automatiquement.

Sinon déplacer le fichier ZIP sous votre répertoire mnt/sdcard/data/com.teslacoilsw.widgetlocker/themes/ via un gestionnaire de fichier.

3.autre.

Déposer par USB/wifi/bluetooth… de votre ordinateur ou n’importe quoi, le fichier sous mnt/sdcard/data/com.teslacoilsw.widgetlocker/themes/

2. Les outils et les bases de donnés.

Comme outils, un dossier bien trié et programme graphique supportant le format png et les calques, et Les fichiers png originaux.

(éventuellement le SDK android si vous décidé d'utiliser l'outil fourni avec: draw9patch, expliquer point 3.)

Pour le dossier bien trié, un dossier nommé widgetlocker themes, dans « mes documents » par exemple,dans lequel vous aurez deux dossier un –Generic, l’autre -mes thèmes.

-mes documents-widgetlocker themes-generic-

-mes thèmes

Comme base de donnés nous avons besoins de l’ensemble des thèmes de bases, telecharger ce ZIP joint et l’extraire dans le dossier –generic, précedemment crée.

Vous avez maintenant les fichiers png originaux de chaque type de slider. (attention que tout ses png ont dèjà leur 1pixel de contour de fait ne pas ouvrir dans draw9patch ! si vous désirez utilisé cette méthode je rajouterais bientôt un zip contenant les éléments dans leur taille réel ou bien travaillé à partir de document vide à la bonne résolution – voir chapitre suivant.)

Au commencement de chacun de vos themes, crée un fichier Xxxx.wltheme (Xxxx étant le nom de votre thème)

3. Three-Patch et Nine-Patch.

(Bien à connaitre, mais pas obligatoire – surtout conseillé au personne souhaitant crée un certain nombre de thème - ne concerne pas tout les sliders )

Plusieur méthode existent pour définir/régler les zone étirable, les règles de mise en forme etc…

Ici Widgetlocker utilise un des outils disponible sous android (mais pas seulement sous android)

La méthode je dirais de « Patch », qui consiste a « découper » votre image en plusieurs section, afin de définir la "zone étirable".

Plusieur utilisation différente des Patch existe, widgetlocker utilise le THREE-PATCH, mais noté que le three-patch permet l’utilisation du nine-patch tout en restant un three-patch.

Il suffit de mettre _3 à la fin du nom du fichier ex : iphone_background_3.png et le fichier sera reconnu comme utilisant le three-patch.

(Une incohérence existe entre les deux tutoriel que j’ai trouvé sur le sujet dans le premier traitant du nine-patch il parle de .9.png pour étre reconnu et dans celui sur le Three-patch _3.png,

Alors est-ce que il y à bien un « symbole » (. Ou _) different pour chaque, ou est-ce que l’un des deux est ééronne je ne sais pas,en tou cas sous widgetlocker un fichier nommé avec _ est bien recoonu)

Aussi vous reconnaitrez tout de suite les fichiers auquel cette regle s’applique via leur nom, si_3.png alors il suivra et auras besoin de Three-Patch.

Mais comprendre le nine-patch est la premiére étape.

3.1. La méthode Nine-Patch

Le 9-patch est une technique graphique permettant de découper une image jusqu’en 9 sections : les quatre coins ne sont pas redimensionnés mais les 4 arrêtes sont redimensionnées selon leur axes, et pour finir le milieu est redimensionné selon les deux axes X et Y.

Vu comme ça, on a du mal à comprendre à quoi ça peut servir de tricoter une figure en 9 sections ; mais l’intérêt est d’autant plus grand quand il s’agit de redimensionner un objet sans que son aspect esthétique soit pénalisé.

Prenons l’exemple de cette forme :A

C’est un simple rectangle aux coins arrondis contenant un dégradé, le souci est que si on l’étire on va se retrouver avec une forme des plus bizarres.

On voit que l’étirement ne se fait pas proprement et que les coins ne sont plus si arrondis que ça, donc nous allons utiliser un outil nommé le 9-patch pour résoudre notre petit problème.

Nous allons donc, à l’aide de pixel noir à opacité 100%, définir la zone étirable(1), ses pixels sont à appliquer dans le contour de 1 pixel, de fait pour une image faisant 480/150 pixels, nous aurons besoin en réalité d’une image faisant 480/152 afin de disposer de cette espace vide de 1pixel sur le contour(pour y mettre nos pixel noir).Ceci nous offre notre « zone extensible » Représenter ici par les points rose sur l’image(2).

1. 2.B

Ainsi peux importe la dimension de l’image nous épargnerons le petit droid et les coins (élément à ne pas étirer). Cela permet aussi de définir une zone de « contenu », mais cela ne nous concerne pas ici, mais plutôt les devs.

(Seule information à notre niveau, les pixels noir en haut et à gauche, servent à définir la zone d’en-tête. A droite et dans le bas, à définir la zone de contenu. (À nouveaux cela concerne le devellopement d’application et pas nous pour widgetlocker mais je vous invite à lire l’article en source :),cité à la fin de ce chapitre.))

Exemple du résultat:A,B

Ceci peux ce faire soit -via l’outil dédié du SDK android : Tools/draw9patch.bat, ou tout simplement via votre programme graphique en laissant un espace de un pixel et appliquant vos points noirs. Ses cette dernières que nous choisirons car nos fichiers pngs source contienne déjà un contour d’un pixel.

(Pour utilisé cette méthode démarré d’un nouvelle image à résolution réel, par exemple pour le slider iphone qui fait sur nos fichiers source 101/152 pixels ,à une taille réelle de 99/150 , votre image doit faire cette taille pour être utilisé dans draw9patch)

1.Il suffit de glisser/déposé votre image sur la fléche.

2. Une fois l’élément déplacé, on se retrouve désormais avec un tout autre espace de travail :

L’espace est divisé en 3 parties :

• Gauche : Espace de travail (création des patchs)

• Droite : Espace de visualisation du résultat

• Bas : Espace de configuration

Une petite aide sur ses outils :

• Show lock : Affiche les endroits indisponibles pour travailler avec le 9-patch

• Show patches : Affiche les tracés des patchs

• Show content : Affiche l’espace autorisé pour afficher des données (textes ou autres)

Nous voyons que tout autour de notre image un bandeau de 1px de largeur est ajouté automatiquement, cet espace permet de dessiner notre 9-patch.

Sur la partie Haut et Gauche, nous pourrons designer les parties étirables ; sur le côté Droit et Bas, nous pourrons dessiner l’espace que le contenu pourra utiliser.

Un simple clic applique votre point noir.

Source:

http://android.cyrilmottier.com/?p=127

http://www.ace-art.f...-12-le-9-patch/

3.2. La méthode Three-patch

Widgetlocker, dans l’adaptation des tailles des sliders n’as pas besoin de 9 section. Nous en utiliseront 3 (quoi que rien n’empêche d’avoir 9 sections, les solutions sont compatibles)

Nine-Patch est l’outil idéal pour les images de boutons (pour exemple le « tap here for info » de la 3éme photo ci-dessus) , ou les coins sont important (ne doivent pas être étiré pour garder un résultat propre) et ou le milieu seulement doit être étirer.

Three-Patch , lui est idéal pour les images dont un « coté » seulement doit s’étendre dans une seule direction et garder toute ses proportions dans les autres.

Aussi il est bien plus facile à utilisé pour nos machine quand il est sous zip, car en nine-patch, le meilleur format est notre très cher APK.

Pour résumé, nous utiliserons une « partie » de l’outil, ou je ne sais comment l’appelé, Nine-Patch, cette norme ce nomme Three-Patch, pour faire simple nous appliqueronts de 1 à 3 points maximum,et ne vous inquiéter pas si vous n’avez pas compris ici, vous comprendrez dans le chapitre – tutoriel par slider.

Comme vous le verrez dans le chaptire suivant dans la base de donnés fournis par WL.teslacoilsw, les images ont déjà le contour d’un pixel de fait pour travaillé celle-ci, vous ne pouvez pas les ouvrir dans draw9patch.bat car cela vous rajouteras (encore) un pixel de contour, donc 2 – pas bon !

Source :

http://widgetlocker....reating-themes/

4.Tutoriel Général.

1.Chaque thème est à mettre sous un dossier sous cette forme Xxxx.wltheme dans le quel vous mettrez tout les éléments png (avec le BON NOM) en vrac.

Par slider vous aurez TOUJOURS un png preview (ex :iphone_preview.png) de 72/72 pixels, « présentant » le slider, ainsi que tout les éléments png propre au slider dans leurs résolution respectives.

2. Un seul thème sous ZIP, peu tout à fait contenir plusieurs sliders, ainsi si vous crées des sliders différent dans la même idée, un iphone style mario, un sense style mario, etc… n’hésitez pas ! mettez le dans le même thème :D.

3. Une fois votre thème terminez, selectionnez le dossier source de votre thème, Xxxxx.wltheme, clic-droit ajouté à l’archive séléctionner ZIP, ne changé rien à la configuration,puis –OK. Voilà votre Xxxx.wltheme.zip apparait à coté de votre dossier.

Déplacer le dans votre dossier. Voilà c’est fini, il ne vous reste plus qu’a l’installé ou le partagé pour cela retour au chapitre 1.1 – télécharger un thème.

4.1. Tuto par slider.

4.1.1. Slider Android

Il y a dans ce slider particulièrement beaucoup à faire, enfin cela dépend si vous faite ce thème pour vous uniquement ou si il s’agit de le proposer à la communauté, dans ce derniers cas il est fort recommandé de TOUT modifié (évidemment car l’on ne sait pas ce donc l’utilisateur auras besoin).

Sinon vous modifier seulement les éléments susceptibles d’apparaitre, par exemple si vous utilisez 2*2 slider avec déverrouiller, son, téléphone, sms.

Vous n’aurez « cas » modifié ses éléments, attention le « bouton » son à trois mode, normal-vibreur-silencieux, ne l’oubliez pas, ensuite les sliders.

-Pour les boutons :

Soit le style par defaut vous convient et vous souhaitez seulement changer la couleur,

et la j’ai mon petit conseil perso :

1.ouvrez simplement le fichier dans votre programme graphique

2.modifier le style de calque(Photoshop),Fx,effect(cela depends du programme) ,rechercher cette fonctionnalité « incrustation de couleur ».

3. Pour les bouton de couleur grise –incrustation de couleur-incrustation, choisir votre couleur,ok.

4.Pour ceux de couleur –incrustation de couleur-teinte, votre couleur,ok.

Soit vous les remplacez simplement par vos créations .

-Pour les sliders :

1. Première chose ici, nous avons un/des(des car gris,gris sombre,orange,vert) éléments three-patch « les fin de slider ».

L'ont reconnais dans leur nom le _3 désignant un three-patch et l'on peux voir la ligne noir ( plusieurs points noir en fait )

La barre noir vous la gardez, mettez la sur un calque séparer, et le slider sur un autre.

Le calque du slider vous le mettez en opacité 50%, vous ouvrez un nouveau calque et vous êtes partis.

Vous crée le votre, une fois fait vous afficher tout vos calques et enregistrer sous png.

2. attention que si vous ne modifié pas les sliders orange et vert, ils apparaitront.

Vous pouvez les modifiés ou bien enlevez cette effet de changement de couleur en enregistrant le même fichier de slider avant/arrière sous chaque noms des sliders différents.

Et ne pas oublié que les boutons orange ou vert seront en accord avec leurs corresponds slider ainsi que les petit points.

3. Ne pas oubliez qu’ils doivent être en vis-à-vis (slider avant/arrière), de fait le plus simple pour être sur, gardez la largeur d’origine.

4.1.2. Slider iPhone.

...à venir.

Modifié 16 avril 2013 par Mstrl

[Necrophagist]

Salut,

Bon je poste ici car je commence à devenir fou avec cette app.

Impossible de voir le fond de mon slider type iphone même en mettant ce pixel noir en haut comme conseillé chez xda-dev.

J'ai l'icone du slider mais jamais mon background et pourtant j'ai reproduit quasi à l'identique un background présent dans un thème déja fait (qui lui s'affiche sans problème). J'y suis depuis plusieurs heures avec photoshop mais rien à faire. J'abandonne en attendant vos conseils. Merci.

[godeke-m]

Le Tuto va grandement être modifié, et aussi j'ai moi même beaucoup de questions,

n'étant pas si doué que sa en anglais, j'ai du mal à m'expliqué pour les détail avec un membre de teslacoils, mais sa viens ...

Envoie moi ton image par mp ;) je regarde à sa.

J'avais fait un slider sense, sur réplique d'un existant ET fonctionnant, mais (celui dont je suis partit) il n'avais pas la résolution du NOUVEAUX png du slider sense, et était en couleur indexé, et fonctionnais bien en portrait moin en paysage.

Quand je suis partit de celui la donc même résolution, mais sans couleur indexé, il n'as pas fonctionné.

Je suis donc partit du nouveaux slider sense -présent dans l'apk, il ne fait pas partit des GENERIC ( thème de base ) téléchargeable sur le site de widgetlocker... peux être plus tard , mais c'est bon je l'ai maintenant :)

Plus grande résolution, et couleur RVB, chouette :), et la tadam il fonctionne, super en portrait et un peu mieux que celui trouvé en premier, et un peu moins bien que celui de base ( mais même celui de base ne s'affiche pas correctement en paysage...).

J'ai eu le même coup pour un slider rotary.

Aussi surtout ne pas oublier le preview sinon ça ne fonctionneras pas.

J'ai encore deux trois petite chose aussi je vais édité le tuto pour le moment il n'est pas opérationnelle

Modifié 2 mars 2011 par Mstrl

[Necrophagist]

Ok je t'enverrai ça par MP. Merci beaucoup.

Au fait c'est un slider type Iphone.

[yuri]

bien fait ,complet bien jouer +1

[eddymjj]

J'ai voté.

Moi je deviens fou aussi, lol voici un moment que je cherche à me faire le slide du X10 apparu avec la v. 2.1 d'Android et celui de l'Arc. comme ca tout en ayant personnalisé mon lockscreen je retrouverais l'un de ces slides que j'aime bien.

Une aide svp ? merci.

Et je vous propose de regrouper les sliders personnalisés par les marques de mobiles comme SE, Iphone, Sense, ect et de mettre ici vos créations :)

Modifié 4 mars 2011 par EddyMJJ

[Brigo]

la version 1.2.9 ne permet pas les themes... ce n'est que la 2.0 :)

[Necrophagist]

Bon désolé j'ai pas compris comment on envoie un fichier en MP alors je te l'envoie là. Si tu as le temps de jeter un oeil pour que je comprenne ce qui cloche...

Merci beaucoup.

Modifié 6 mars 2011 par Necrophagist

[eddymjj]

Je n'arrive pas. Voici les images d'origine du lock du X10 si quelqu'un arrive svp, merci.

[godeke-m]

@necrophagiste

Je regarde à çà mais demain, la je me connecte vite avec un tit portable et, pas photoshop etc ...

@Eddy MJJ

Je viens de jetté un oeil,

mais une chose, widgetlocker, permet 5 type de slider : Android (lockscreen AOSP), iPhone, sense, motorola, rotary.

Je n'ai pas trouvé de vidéo sur le lockscreen du arc, mais celui du X10 avec tout ses fonctions, pas possible via widgetlocker.

Aussi dans le fichier que tu m'as envoyé il n'y a que les boutons si je ne puis dire, il n'y à pas de slider ? tu pourrais eventuellement skinner un des types possible au "design" SE,

Mais pas leur lockscreen dans l'ergonomie et les fonctions.

[Necrophagist]

Ok pas de problème Mstrl et encore merci.

[eddymjj]

A oui voici le slider du x10 Mstrl:

Et aussi ce que j'ai fais avec les boutons du x10 et de l'arc et avec le slider du iphone, mais cela ne fonctionne pas :emo_im_undecided: .

Modifié 6 mars 2011 par EddyMJJ

[godeke-m]

A oui voici le slider du x10 Mstrl:

Et aussi ce que j'ai fais avec les boutons du x10 et de l'arc et avec le slider du iphone, mais cela ne fonctionne pas :emo_im_undecided: .

Il n'y à pas le point noir sur ton slider. au dessus au milieu, voir le chapitre : Nine-patch

[Necrophagist]

Bon, je me suis finalement débrouillé à force d'essais (hmmm je suis acharné quand ça m'énerve). Le pixel noir en haut de l'image, c'est AU PIXEL près héhé. Logique en fait. A l'absolue moitié et ça roule.

Merci tout de même.

[godeke-m]

Content que s'à ai été :)

Tu n'était pas partit du PNG de base ? il suffisait de pas toucher au point noir :)

[Brigo]

Pour info la version 1.2.9 que le dev. donne en apk ne permet pas les themes wltheme

[eddymjj]

J'ai pu trouver le zip l'Arc stylisé iPhone mais je n'arrive pas à le créer/modifier avec le bouton du X10 :rolleyes:

[godeke-m]

@Brigo,

Mauvaise compréhension de ceci : WidgetLocker 1.2.9 is compatible with WidgetLocker 2.0 style internal formats, but contains no other significant changes since 1.2.8.1.

N'ayant pas essayé la 1.2.9. je te crois mais il me semblait que il s’agissait de çà. J' edit :).

Merci.

@EddyMJJ,

Le tuto n'étant vraiment pas complet, le tuto dédié slider iphone arrive, en attendant, je suis vraiment full ( ce qui explique le peu d'avancé du poste).

Dit moi, en gros tu veux un slider type iphone, reprennant le slider du ARC et le bouton du X10 ?

Explique moi clairement, je t'avoue que je n'ai toujours pas réussi à comprendre ce que tu voulais exactement.

[eddymjj]

Oui Mstrl je souhaiterais exactement le même rendu que ce que je t'envois (ArcALT.wltheme.zip) mais avec le bouton du X10 (x10_slider_left.png) que je t'envoi aussi. Je t'envoi aussi le preview (x10_preview).

Je n'y arrive pas :rolleyes:

Merci.

Modifié 7 mars 2011 par EddyMJJ

[godeke-m]

Il y à t-il une raison pour que ton point noir (nine-patch) ne soit pas au milieu mais un peu a gauche sur le slider ? Aussi ton png X10 Slider left, n'as pas, mais vraiment pas la bonne résolution.

Pour toi avoir plus facile part toujours du png de base, (oui ils ne sont plus à DL sur le topic, bientôt, sinon sur le site de widgetlocker). il auras la bonne résolution et le point noir bien placé ensuite tu applique avec un autre calque le slider que tu veux par dessus l'autre, sur le calque de base tu supprime le "bouton" left de base MAIS PAS le point noir, fusionne les calques, terminé.

Mais je te le fait, je t'envoie tout sa, puis jette un coup d'oeil pour voir la différence.

[eddymjj]

Merci, je suis une bille avec les calques. Je regarderais comment tu as fais. Merci

[godeke-m]

@EddyMJJ

Voilà, en pièce attaché, ton dossier, tu n'as plus qu'à zipper et test ;)

Je te met aussi le lien vers le thème iphone de base : iPhone, j'ai l'impression que tu n'est vraiment pas partit de ses images :)

Modifié 7 mars 2011 par Mstrl

[eddymjj]

Oui mais c'était avec le bouton du X10 que je voulais comme indiqué :mad: ...

Modifié 7 mars 2011 par EddyMJJ

[Free_French]

Bonjour,

J'ai installé Widgetlocker sur mon Nexus S.

J'ai installé des widgets (spotify, agenda) et le slider iPhone.

Il y a un truc que je n'arrive pas à faire : mettre le raccourci vers la caméra (je ne peux mettre que vers l'appareil photo).

Je peux aider pour un tuto.

Je ne surveille pas ce fil, prévenez moi sur freefrenchforces@gmail.com.

[ablackswan]

pour ma part ça marche comme toutes autres applications.

après as tu essayé avec desktop visualizer?