• Il semble que vous ne soyez pas membre de ce forum ou un membre récent.
    Sachez que seuls les membres enregistrés et ayant un minimum de 3 messages peuvent télécharger les ressources additionnelles tels les thèmes ou les mods.
    Enregistrez-vous dès à présent!
  • Merci d'utiliser la fonction "RECHERCHE" en haut à droite de la page d'accueil. Quelqu'un a peut être eu la même question que vous et vous aurez une solution plus rapidement ainsi :-)
  • Les nouveaux membres ou ceux disposant de moins de 3 messages sont particulièrement incités à lire la charte du forum qui contient les quelques règles applicables sur ce forum.
    Son non-respect peut entraîner des sanctions pouvant aller jusqu'au bannissement total dans le cas de récidive.
    Merci de noter que ne sont bienvenues ici que les personnes susceptibles de contribuer ici au bien-être et la convivialité au sein de la communauté. Toute personne utilisant ce site et ce forum uniquement pour nuire aux autres est priée de passer son chemin.

TUTO [TUTORIEL] faites votre propre lockscreen !

darkmania

Apprenti de la force obscure
Messages
2 033
Réactions
634
Points
113
Salut tout le monde !

Bon comme vous devez tous le savoir Xiaomi a procédé à pas mal de changement dans notre façon de créer des thèmes pour sa rom MIUI et pour moi la plus importante est la partie LOCKSCREEN.
Comme certain, avant je ne faisais que regarder et utiliser le travail des autres et mis à part le fond écran du lock je n'avais jamais eu le courage de créer ou même modifier un lockscreen.
Ce tutoriel s'adresse donc à tout le monde : les thèmeurs que l'on peut considérer comme "professionels" (je pense à Yuri, myhtch2 ou encore marc22 ^^) ainsi que ceux qui ne pense avoir aucun talent !

Ne vous inquiétez pas, on est tous passé par la même case avant de faire nos propre thèmes : moi par exemple j'ai mis plus d'un mois avant de réussir à créer un lockscreen qui ne plante pas xD !
Bref j'ai donc pensé à vous et je vous ai concocté un p'tit tutoriel sur les lockscreen et principalement sur le fonctionnement du "manifest.xml" !




PARTIE I : Rappel sur le fonctionement d'un thème !

1°- ".xml", ".zip" et ".xml" c'est quoi ce chantier ??!!

Voila ce qu'il vous faut savoir:

a) Un thème possède une extension "theme.mtz" en fait c'est juste un zip dont on a modifié l'extension ! En gros vous avez juste à changer le ".zip" en ".mtz" ou inverse, à savoir que Winrar (logiciel que j'utilise principalement) est tout à fait cappable de modifier et d'explorer un fichier en ".mtz", en effet il suffit d'ouvrir le fichier avec winrar, de faire des "glisser / déposer" ou "copier / coller" des images ou ".xml" modifiés et on a donc plus le problème du changement d'extension (vous laissez le tout en ".mtz" et c'est fini!).

B) Lorsque vous "explorez" un thème vous remarquerez que celui-ci possède des fichiers qui n'ont aucune extension (c'est le cas du fichier "lockscreen")! Dans ce cas il vous suffit d'ajouter l'extension ".zip" et ça fonctionne ;D. Par contre ici vous serez obligé de garder l'extension ".zip" si vous voulez faire des "glisser / déposer" (winrar vous dira que comme il connais pas l'estension il ne peut pas ouvrir le fichier! c'est débile mais c'est comme ça !).

c) Quand vous compressez vos dossier en ".zip" pour par la suite changer ou supprimer l'extension, alors je vous conseille de compresser avec un taux de compression de 0%. La raison ? : eh ben il se troive qu'avec une compression du dossier avec un taux de x%, MIUI refuse tout simplement d'instaler le thème ! Rigolez pas ça m'est déjà arrivé, c'est très rare mais ça existe si si ! En plus avec un taux de 0% il n'y à pas de perte de qualité des images contenues !

d) Pour ce qui est des logiciels, je vous conseille "Winrar" (jamais eu de problème avec les thème !) et 7zip en roue de secours (on sait jamais).

e) Les ".xml" peuvent être directement modifié à partir de l'application "bloc note" (windows) à condition de ne pas faire "enregistrer sous" (sinon le nouveau fichier est auomatiquement renommé avec une extension en ".txt" et non ".xml").




2°- Un thème "Made in MIUI" c'est fait comment ?

Dans le cadre d'un thème créé uniquement pour le lockscreen, on se retrouve toujours avec la même organisation :


Seul les dossier "preview" et "walpaper" ne sont pas nécessaire à la création d'un thème, vous pouvez donc vous passer de ces deux là.




3°- "description.xml" qu'est-ce qu'on met là dedans ?

Ce fichier permet de donner des information sur le thème et de son créateur.
Voici ce qu'il vous faut mettre impérativement dedans (faites un copier/coller et modifiez):


Code:
<?xml version="1.0" encoding="UTF-8"?><MIUI-Theme>
<title>Key lock - Inverted 0.1</title>
<designer>dark.mania</designer>
<author>dark.mania@hotmail.fr</author>
<version>0.1</version>
<uiVersion>1</uiVersion>
</MIUI-Theme>


Bon j'espère que vous remarquez ce qu'il vous faut modifier ?! ("title", "designer", "author" et "version" le reste vous n'y touchez surtout pas !)




4°- A la racine du fichier "lockscreen" il y a "theme_values.xml", à quoi ça sert ?

Bien alors ce fichier là n'est pas nécessaire du tout, mais il peut vous servir dans le cadre du thème du lock, en fait ce fichier permet de définir ce qui "s'affiche" dans la taskbar du lockscreen !
Vous pouvez donc choisir d'afficher ou non l'icone réseau, la batterie, le logo/écriture opérateur, la date et l'heure :
-Si vous écrivez "true" alors l'élément défini s'affichera (bref ç a sert à rien de défnir l'affichage dans ce cas...).
-Si vous écrivez "false" alors il ne s'affichera pas.

Voici ce qu'il vous faut écrire ("carrier" c'est le logo/écriture opérateur):


Code:
<MIUI_Theme_Values>
<bool name="config_show_status_bar_notification_for_keyguard">false</bool>
<bool name="config_show_status_bar_battery_for_keyguard">false</bool>
<bool name="config_show_status_bar_carrier_for_keyguard">false</bool>
<bool name="config_show_status_bar_status_for_keyguard">false</bool>
<bool name="config_show_status_bar_time_for_keyguard">false</bool>
<bool name="config_show_status_bar_date_for_keyguard">false</bool>
</MIUI_Theme_Values>




5°- "Advance" c'est ici que votre lockscreen est entièrement défini !

Ce dossier peut comporter une infinité d'images : toutes les image que vous voyez sur votre lockscreen proviennent de ce dossier uniquement (mis à part le fond d'écran...).
Si vous devez créer des images avec des effet de transparence ou avec des code couleur défini (rvb, niveau de gris ou couleurs indexées) je vous conseille d'utiliser "GIMP" qui est un éditeur d'image aussi puissant (voir plus) que "PHOTOSHOP"/"CS5" mais complettement gratuit et en un peu plus compliqué (il possède un peut trop de menu et de possibilités ce qui fait que l'on s'y pert facilement les première fois ^^).

Enfin vient le GRAAL du lockscreen le fameux fichier "manifest.xml" sans quoi votre lockscreen ne serait rien ! et c'est de cette partie la que tout dépend, la moindre erreur dans son "code" et vous vous retrouvez avec un lockscreen vide (dans ce cas un clic sur l"écran du tel suffit pour débloquer) ou alors vous pouvez carrément vous retrouver avec un lockscreen "innaccessible" !
Dans le cas du lock innaccessible c'est parce que vous avec défini un déblocage "compréhensible"/"correct" (bref qui bug pas) mais dont la/les limite(s) (de début ou de fin de "slide to unlcok" par exemple) ont été définies en dehors de l'écran du tel ! (si vous avez un tel en 480*800 n'écrivez pas un lock qui vas à 1200 >_<')
Et si par malheur c'est le cas eh bien vous ne pourez pas dutout débloquer votre tel ! Dans ce cas un seule solution : il faut tout réinstaller (rom comprise !), donc je vous conseille vivement d'effectuer un "BACKUP" via "Clock Wrock Mod" avant toute modification du lockscreen !



Maintenant allez voir le deuxième post pour connaitre toutes les modifications que vous pouvez effectuer dans "manifest.xml" et si vous trouvez des fautes d'orthographe dites-le >< !


(pssttt : n'oubliez pas de cliquer sur le bouton vert si ce tutoriel vous à aidé !)
 
Dernière édition:

darkmania

Apprenti de la force obscure
Messages
2 033
Réactions
634
Points
113
PARTIE II : modification de "manifest.xml"

Et voila nous y sommes : la création pure et dure d'un lockscreen !

Je vous préviens tout de suite : cette partie du tutoriel ne demande aucun logiciel autre "block notes", je vous conseille aussi de verrifier l'extension du fichier les premières fois : si vous faites "enregistrer sous" l'extension ".xml" sera remplacée par ".txt" et là le lock ne sera pas pris en compte !

Je suis désolé si ça vas vous paraitre long et peut être aussi brouillon comme tutoriel, mais au moin de cette façon vous êtes certain d'acquérir les bases rapidement avec un peu de sérieux !
Aussi, je suis disponible au cas où vous auriez des problèmes avec vos lockscreen !


Bonne lecture et patience !



1°- On commence par la mise en forme basique et obligatoire du "code" :

Votre "code" doit en effet toujours comporter deux premières ligne indiquant au système que c'est le lock, mais aussi les ligne indiquant la "façon" de débloquer le tel (que l'on nommera "unlocker" pour mieux ce repérer)[on verra cette partie à la fin]!
Si une de ces deux partie manque soit le système garde le lock d'origine soit vous avez droit à un lock "vierge" (un clic sur l'écran suffit pour débloquer) soit vous ne pouvez pas du tout débloquer le tel !

Je vous conseille de ne jamais modifier les deux premières lignes (de toute façon elles n'influe en aucun cas sur la façon dont votre lock sera défini) !

Bon voici le code pour la preimère partie (qui doit toujours se situer tout en haut du code du lockscreen):



Code:
<?xml version="1.0" encoding="utf-8"?>

<Lockscreen version="1" frameRate="25">




2°- Ajouter une image :


a) la base.

Là c'est tout simple , pour une image il vous suffit d'écrire :
Tout ce que se situe entre "<Image" et "/>" peut être positionné dans n'importe quel ordre !

Code:
<Image x="" y="" w="" h="" src="" align="" alpha=""/>

- x="" Indique la position par rapport à l'axe x
- y="" Indique la position par rapport à l'axe y
- w="" Largeur de l'élément
- h="" Hauteur de l'élément
- src="" Permet de "récupérer" l'image
- align="" Avec au choix center / right / left (si vous ne donnez pas cette information alors le système considèrera automatiquement : align="left" )
- alpha="" Permet de gérer la transparence de l'élément de 0 à 255 (255=100% visible, bref si vous mettez 255 => retirez cette partie bande d'idiot)

w="" et h="" ne servent que si vous désirez étirer/alonger/compresser un élément dans sa largeur/hauteur, personnellement je ne l'utilise jamais pour les images car on peut déjà définir leur dimension avec un logiciel dédié à l'édition d'image comme GIMP !


B) les options supplémentaires.

--Transparence variable dans le temps--
Vous pouvez aussi définir des variation de la transparence pour un temps voulut !

Par contre faites attention à la fin de la première ligne (c'est valable partout !) :
- "<Image ..." on défini un nouveau truc
- "... />" on "termine" la définition
- "... >" on a pas fini de définir
- "<Image/>" on fini la défini laissée en "suspend"

Bon maintenant le code pour cette fameuse transparence variable:

Code:
<AlphaAnimation>
<Alpha a="" time=""/>
<Alpha a="" time=""/>
</AlphaAnimation>

- a="" Permet de gérer la transparence de l'élément de 0 à 255
- time="" Indique à quel temps/moment vous voulez que l'image s'affiche (attention le système compte en milliseconde : 2s = 2000)
- il vous faut enlever le alpha="" dans la première ligne pour que ça fonctionne correctement !
- si vous n'enlevez pas le alpha="" dans la première ligne, alors ce premier alpha correspondra au alpha="255" de l'annimation ! (vous suivez là ?)


maintenant le code dans son ensemble avec un exemple (la définition "image" "encadre" tout ![<Image ... /> ... <Image/>]):


Code:
<Image x="240" y="70" src="batterie.png" align="center">
<AlphaAnimation>
<Alpha a="0" time="0"/>
<Alpha a="175" time="500"/>
<Alpha a="255" time="1000"/>
<Alpha a="175" time="1500"/>
<Alpha a="0" time="2000"/>
</AlphaAnimation>
<Image/>


Ici j'ai défini une image pour la batterie :
- 0 milliseconde (0s) l'image est totalement transparente
- 1000 milliseconde (1s) l'image est opaque à 100%
- 2000 milliseconde (2s) l'image est re-totalement transparente

Ici j'ai mis des valeur intermédiaires : celle-ci permettent de faire une transition "souple" : si vous ne donnez que deux valeur de alpha (0 puis desuite 255) le système ne fera pas de "fondu"/"transition" et il faut avouer que c'est moin joli d'un coup !
D'ailleur comme il est indiqué dans le code, c'est une "animation" qui crée donc une boucle ! Il vous faut donc créer aussi une "descente progressive" avec la aussi une transition jusqu'à alpha="0" (sinon c'est moche ;D).
Par contre si vous désirez créer une annimation de alpha "montante" mais qui reste bloquée à une certaine valeur il vous suffit de définir un alpha avec un temps long (par exemple avec time="20000" => 20s sur le même alpha):

Code:
<AlphaAnimation>
<Alpha a="0" time="0"/>
<Alpha a="175" time="500"/>
<Alpha a="255" time="2000"/>
<Alpha a="255" time="20000"/>
</AlphaAnimation>

Attention je met deux fois alpha="255" car :
1- à 0,5s j'arrive à 175
2- à 2s j'arrive à 255
3- à 20s j'arrive à 255

==> le time="" est un temps pour lequel le système doit "arriver" à la valeur de alpha indiqué ! donc si on veut avoir un alpha constant il faut l'écrire deux fois : un temps que vous considerez de "début" (2s) et un temps de "fin" (20s) [c'est la petite astuce du jour xD].

Bon j'espère que vous avez compris qu'un système informatique est "logique" et donc qu'il applique les mêmes "règles" partout pour n'importe quel type d'indication (donc time / alpha / w / h / x /y etc... ont toujours la même action [sauf si je vous le dis !]).

--position variable dans le temps--
Attention la position est fonction de la position définie à la base du code de l'image (si on avait x="200" et ici x="50" alors on à x="250" ^^)

Code:
<PositionAnimation>
<Position x="" y="" time=""/>
<Position x="" y="" time=""/>
</PositionAnimation>

--Image changeante dans le temps--
Ici on peut inclure aussi la position (ce qui nous donne "SourcesPositionAnimation" xD), vous n'êtes pas obligé de l'indiquer biensûr (à la base c'est juste l'image qui change mais ça permet d'avoir des code plus "clair").

Code:
<SourcesAnimation>
<Source x="" y="" src="pic1.png" time=""/>
<Source x="" y="" src="pic2.png" time=""/>
</SourcesAnimation>

--rotation dans le temps--
J'ai jamais essayé mais ça doit fonctionner en radiant je suppose

Code:
<RotationAnimation>
<Rotation angle="" time=""/>
<Rotation angle="" time=""/>
</RotationAnimation>

--modification des dimensions de l'élément dans le temps--
Bon vous l'aurez compris, ici on fait varier w et h dans le temps
On a vraiment beaucoup trop de choses possible sur ce lockscreen xD

Code:
<SizeAnimation>
<Size w="" h="" time=""/>
<Size w="" h="" time=""/>
</SizeAnimation>

--ajouter un "masque" à l'image--
Attention : le masuq ene fonctionne que pour une image actuellement ! (ça sert à rien d'essayer sur du texte ça ne marchera pas ><)
Ce "masque" permet de cacher une partie de l'image, il fonction exactement comme l'image, c'est à dire qu'il peut lui aussi posséder des animations qui lui sont propre (exemple : le masque ce déplace sur la droite et laisse apparaitre l'image !)
Ce masque doit être uniquement noir et transparent (ou blanc à la place de transparent, mais choisissez transparent pour éviter les erreurs !)
- noir : l'image est visible
- transparent : l'image est masquée

Voici le code :

Code:
<Mask x="" y="" src="" align="absolute"/>

- src="" mettez le nom du masque et non pas celui de l'image (je sais que c'est long, mais commencez pas à dormir aussi !!!!)
- align="absolute" absolute indique le fait que cet élément est au dessus de tout les autres (il est vraiment au premier plan), ça marche aussi avec tous les autres truc mais c'est ici qu'il est vraiment important (c'est pour ça que je ne l'ai pas écris avant ^^).

on peut aussi avoir un truc du genre :

Code:
<Mask x="" y="" src="" align="absolute">
<PositionAnimation>
<Position x="" y="" time=""/>
<Position x="" y="" time=""/>
</PositionAnimation>
<Mask/>

--récapitulatif--
Maintenant je vais vous faire un petit récapitlatif du code casiment complet d'une image (le code "Image" englobe toujours tout le reste!)
Format simple :


Code:
<Image x="" y="" w="" h="" src="" align="" alpha=""/>


Format super complet (avec plein de chose inutile xD)[attention des parties de code général on été enlevé comme le alpha, src, w et h, donc ne copiez pas bêtement !]:



Code:
<Image x="" y="" align="">
<AlphaAnimation>
<Alpha a="" time=""/>
<Alpha a="" time=""/>
</AlphaAnimation>
<PositionAnimation>
<Position x="" y="" time=""/>
<Position x="" y="" time=""/>
</PositionAnimation>
<SourcesAnimation>
<Source src="" time=""/>
<Source src="" time=""/>
</SourcesAnimation>
<RotationAnimation>
<Rotation angle="" time=""/>
<Rotation angle="" time=""/>
</RotationAnimation>
<SizeAnimation>
<Size w="" h="" time=""/>
<Size w="" h="" time=""/>
</SizeAnimation>
<Mask x="" y="" src="" align="absolute">
<Mask/>
<Image/>





3°- ajouter du texte

Bon la partie image était longue, mais toutes les informations que vous avez pû lire et aprendre sont aussi valable pour, presque, tous les élément du lockscreen (image / texte / annimation / unlocker / batterie etc...) !

On commence par le code de base d'un texte, celui-ci possède les mêmes arguments (x / y / w / h / Alpha / etc...) ainsi que les "options suplémentaires" (je ne vais pas vous en reparler, regarder juste la partie B) pour les images)[Attention le "masque" n'est valable que pour les images à priori !].


Code:
<Text x="" y="" w="" h"" text="" size="" color="" aplha="" align="" angle=""/>

ou alors :


Code:
<Text x="" y="" w="" h"" text="" size="" color="" aplha="" align="" angle="">
</Text>

Quelque argument de plus :
- src="" Cet argument ne fonctionnera pas car on est dans le contexte "texte" et non pas "image"
- size="" Il vous permet de définir la taille de votre texte (aucune valeur limite, avec au minimum size="15")
- color="" Défini la couleur du texte en indiquant le code couleur
- text="" A votre avis c'est quoi ?! (ici c'est le texte qui doit apparître, exemple : text="je joue au golf dans mes toilettes")

Le code couleur est composé de 6 chifres et lettres et il doit OBLIGATOIREMENT commencer par "#", vous pouvez utiliser la palette de GIMP [logiciel de dessin] pour trouver le couleur qui vous convient [pour les novices : color="#000000" c'est du noir et color="#ffffff" c'est du blanc].

Ici w et h peuvent avoir un certain interet ! Si vous ne voulez pas vous embêter avec ces deux là, vous avez juste à les supprimer (donc le texte poura avoir une longuer et une hauteur non déterminée). Attention car contrairement aux w et h pour l'image (qui redimensionnent l'image) ici w et h détermine la limite d'affichage du texte !!! En bref si vous avez une police de taille size="75" et un h="30" à votre avis que se passe-t-il ?! => réponse : votre texte est litérallement coupé dans sa partie basse (vous verrez le haut du texte mais pas le bas xD!).




4°- Excusez moi, qu'elle heure est-il s'il vous plais ?

Eh oui maintenant je vais vous parler de de l'heure et de la date, celle-ci possède les proprités de l'image ET du texte !
En gros vous pouvez décider d'afficher une image en fonction de pas mal de paramètre (mois / jour / semaine / année / heure / minute / etc ...) [voir mon lockscreen "Bio lock" si vous voulez voir] ou simplement le texte correspondant au mêmes fonctions.
Par contre je n'ai jamais essayé d'ajouter des "options suplémentaires" à la date ou l'heure ! Donc je ne me prononce pas à ce sujet (j'y vois pas d'intérêt : essayez de lire un truc qui bouge ou qui clignote sur un écran de tel ! o_O =>> trop chian donc j'ai mêmepas pris la peine de tester ^^)

a) version texte :
Voici le code de base version simple, uniquement du texte:

Code:
<DateTime x="" y="" w="" h"" format="" size="" color="" aplha="" align="" angle=""/>

Vous avez remarqué : text="" à disparu et a été remplacé par format="" !
C'est donc avec format="" que l'on vas déterminer ce que l'on veut afficher

L'année (lettre et chiffre):
y -> 2011
yy -> 11
yyy -> 2011 [sert à rien]
yyyy -> 2011 [sert à rien]

Le mois (lettre et chiffre):
M -> 9
MM -> 09
MMM -> sept.
MMMM -> septembre

Le jour (lettre):
E -> sam.
EE -> sam. [sert à rien]
EEE -> sam. [sert à rien]
EEEE -> samedi

Le jour (chiffre):
d -> 3
dd -> 03
ddd -> 003 [sert à rien]
dddd -> 0003 [sert à rien]

L'heure (24h):
k -> 15
kk -> 15
kkk -> 015 [sert à rien]
kkkk -> 0015 [sert à rien]

L'heure (12h):
h -> 3
hh -> 03
hhh -> 003 [sert à rien]
hhhh -> 0003 [sert à rien]

La minute :
m -> 8
mm -> 08
mmm -> 008 [sert à rien]
mmmm -> 0008 [sert à rien]

Pour l'heure en 12h:
aa -> am / pm


Quelques exemple:

pour obtenir "sam. 17 déc. 2011 17:02" (en fait c'est l'heure qu'il est pour moi xD) :
format="E d MMM yyyy kk:mm"

pour obtenir "05:02 pm" (12h) :
format="hh:mm aa"

pour obtenir "17/12/11" (sans aucun 0 de trop) :
format="d/M/yy"

B) versio image :
Le code est celui d'une image ! exemple :

Code:
<Image x="150" y="310" src="m.png" srcid="#month" align="center" alpha="175"/>


Bon alors je vais dabord vous parler d'un argument que je n'ai pas cité lorsque que je vous ai parlé des images :
On connais déjà src="" qui permet de récupérer une image en indiquant son nom et son extension...
Eh bien je vais vous parler de srcid="" qui lui permet de faire "varier" le nom de l'image (entre les guillemets il faut indiquer la fonction : mois / semaine / jour / heure / etc...).
Par exemple, pour chaque mois de l'année il faudra créer une image différente mais au lieu d'avoir "janvierpng" / "février.png" / "mars.png" / etc... on va devoir écrire "mois_1.png" / "mois_2.png" / "mois_3.png" / etc... !!!!
En fait la fonction (dans srcid="") permet de définir le type de donné demandée sous forme de nombre et de "l'ajouter" au nom indiqué (dans src="").

Par exemple si j'ai :
src="mois.png" srcid="#month"


Comme on est en décembre et bien c'est comme si le système "ajoutais" "_12" ! Bref il traduit le code en :
src="mois_12.png"

Et ohhh miracle ! C'est bien l'image "mois_12.png" qui correspond à décembre dans nos images !

C'est VOUS qui définissez le nom de l'image : le système ne fera que rajouter une info et vas ensuite chercher l'image correspondant au nom "final" obtenu ! (si vous voulez écrire "m_1.png" au lieu de "mois_1.png" c'est ok ! tant que le "_1" correspond au premier mois)

Bon voici les "onctions" (que vous écrivez dans srcid="") ainsi que le nombre d'images associées :
- #day_of_week => 7 (jours de la semaine)
- #date => 31 (jours dans le mois)
- #month => 12 (mois)
- #year => xx (année)
- #hour => 24 (heure)
- #minute => 60 (minute)

Une précision pour les jours de la semaine : lundi n'est pas "_1" !! Ben dans la "logique" modiale c'est dimache !! donc :
dimache => jour_1
lundi => jour_2
mardi => jour_3
etc...

je vous propose de regarder les 25 premières lignes de ce lien si vous voulez plus de fonctions :
http://pastebin.com/GjTN41hC

Je vais quand même parler encore un peu de la partie horloge :
Vous avez plusieure possibilité de code (même si l'affichage ne change pas !)
La première façon étant en passant par le code <Image.../> et les arguments / fonctions citées au dessus.
Exemple copié du lien cité (format 24h):

Code:
<Image x="-66" y="109" src="time.png" srcid="#hour24/10" />
<Image x="30" y="53" src="time.png" srcid="#hour24%10" />
<Image x="130" y="-5" src="time_dot.png" />
<Image x="195" y="-41" src="time.png" srcid="#minute/10" />
<Image x="292" y="-98" src="time.png" srcid="#minute%10" />

En fait on édite uniquement 10 images, de 0 à 9 ("0" => "time_0.png" / "1" => "time_1.png" / ... / ":" => "time_dot.png") et on récupère c'est images en fonction du besoin.
Mais il faut quand même définir une cinquième ligne de code pour les deux point (":") car ils ne sont pas "compris" pas le système !
En plus pour chaque images il faut définir la position de celle ci (bref des calculs et des test en plus...)

Mais biensûr c'est trop long donc il y a beaucoup plus simple, vous pouvez utiliser le code <Time.../> pour afficher les heures en image !
Exemple du code que j'utilise lorsque je veux utiliser des image (mais c'est uniquement au format 12h, le 24h n'existe pas là):

Code:
<Time x="150" y="190" src="time.png" align="center"/>

J'utilise le code Time mais avec les argument d'une Image !
Bon alors plus haut je disais que les arguments src="" ne sont pas valide pour Text mais pour Time on peut...
Attention ce code donne l'horloge complette, donc ne l'écrivez pas cinq fois de suite !
En fait le principe revient à garder les mêmes images sauf que là les deux points (":" entre heure et minute) sont "compris" par le système !
Et ici les images seront juste collées automatiquement les une à la suite des autres.



Bon je suis désolé pour le temps que ça prend mais au final vous aurez un super tuto ^^
 

darkmania

Apprenti de la force obscure
Messages
2 033
Réactions
634
Points
113
Ok jusqu'a présent je vous ai expliqué tout ce que l'on mettais dans un lockscreen "basique", mais je n'ai pas vraiment parlé du déverrouillage de l'écran à proprement parler !!!

Voici donc voici la troisième partie de mon tuto :




partie III : déverrouillage de l'écran (unlocker).

1- Unlocker ? c'est quoi ça ?

L'unlocker est la partie la plus importante du lockscreen !
En effet sans elle votre lockscreen ne "fonctionnera" pas, du moins vous ne pourrez pas en sortir (à moins de passer par les combinaise de touches physiques).
Bref c'est la partie qui vous permettra de "dire" : il faut appuyer ici pour commencer le déverrouillage et terminer le glissement là pour completter le déverrouillage (et donc autoriser l'accès au téléphone ou au raccourcit que vous y aurrez associé).

Dans cette partie du tuto je vais vous aider à faire un unlocker de type "slide to unlock" (iphone), il vous faudra donc télécharger les images fournies à la fin de ce post (je l'ai ai mis une par une et non dans un zip pour ne pas vous embéter à télécharger 7zip, winrar ou autre).
De cette façon vous pourrez même créer votre lockscreen directement à partir de votre téléphone => miui embarque un explorateur de fichier capable d'effectuer des compression au format .zip (extension que vous renommez en .mtz et le tour est joué !) ainsi qu'un éditeur de texte qui est amplement suffisant pour n'importe quel code !
ps : je code souvant mes lockscren sur mon tel (exemple le code de ubuntu_lock que l'on verra plustard est fais à 70% sur mon tel ! oui oui je suis fou :D 14h de bus pour le ski => je m'enuyais).

Bon alors tout ça c'est beau mais l'unlocker ça ressemble à quoi au niveau du code ?

Tout d'abord le code le plus "basique" possible ressemblerais à ça :
Code:
<Unlocker name="unlocker">
 
<StartPoint x="" y="" w="" h=""/>
 
<EndPoint x="" y="" w="" h=""/>
</Unlocker>

Oui oui 4 lignes de code suffisent amplement pour un déverrouillage, en fait pour ma part c'est celuis que jutilse le plus souvent (avec juste la partie "path" en plus de temps en temps, mais vous verrez son utilisation plus bas).


Mais nous ce qui nous intéresse c'est le code "complet" et il ressemble à ça :
Code:
<Unlocker name="" bounceInitSpeed="" bounceAcceleration="" alwaysShow="" visibility="">
 
<StartPoint x="" y="" w="" h="" normalSound="sound_normal.mp3" pressedSound="sound_normal.mp3">
 
<NormalState>
</NormalState>
</StartPoint>
 
<EndPoint x="" y="" w="" h="" reachedSound="sound_reached.mp3">
 
<Path tolerance="">
 
<Position x="" y="" />
 
<Position x="" y="" />
 
</Path>
 
</EndPoint>
<PressedState>
</PressedState>
<ReachedState>
</ReachedState>
</Unlocker>


Bon j'ai pratiquement tout mis ^^
Pratiquement ? Oui car l'unlocker peut contenir une infinité de lignes de codes !

Maintenant on vas détailler tout ça !


2- Explications, utilité et détails lignes par lignes !


A) <Unlocker/> :

Code:
<Unlocker name="" bounceInitSpeed="" bounceAcceleration="" alwaysShow="" visibility="">


- name=""le nom de votre unlocker
- visibility=""permet de faire varier la visibilité
- bounceInitSpeed=""vitesse initiale du retour à l'origine
- bounceAcceleration=""accélération lors du retour à l'origine
- alwaysShow=""permet d'afficher l'unlocker qu'elle que soient les coditions du lockscreen

Précision:

Je vous conseille de toujours nommer votre unlocker "unlocker" (tiens donc ^^), pour la simple raisnon lorsque vous utiliserez des variables provenant de cet unlocker vous n'aurez pas besoin de chercher sans cesse le nom que vous lui avez donné.
Attention cette astuce ne "fonctionne" que si vous n'avez qu'un seul unlocker, en effet pour chaque unlocker il faudra un nom différent ! Sinon vous pertuberez le lockscreen et il ne saura pas "qui" est "qui" !
Si je vous dit : il y deux darky, l'un est dans sa chambre et l'autre dans les WC, où est darky ? => WTF mais lequel ?! >_< ben voila le locksceen c'est pareil => donc j'amais donner le même nom à deux éléments !!!!!

La visibilité peut être "validé" de différente façon
-true ou false (donc en mode "texte")
-1 ou 0 => vous pouvez donc utiliser des variables, pour établir des fonctions du style "si la musique est visible alors tu dégage" (mouahahahhh que je suis méchant)
Je n'avais pas introduit cette fonction de visibilité mais sachez que vous pouvez l'appliquer à n'importe quel élément, par exemple afficher une image du texte en fonction de telle ou telle chose est possible !

bounceInitSpeed et bounceAcceleration permettent un retour "visible" de votre unlocker dans son état d'origine.
Visible car si vous n'utiliser pas ces deux variables alors
Alors on y viendra plus tard mais votre lockscreen a trois états possibles :
- "normal/origine" => on y a pas encore touché
- "activé/pressé" => on est en train de le toucher (mais on à pas encore atteint le point/surface de déverrouillage)
- "fini" => on est arrivé à l'endroit défini pour terminer le déverrouillage
Vous vous en doutez lorsque l'on arrive à ce troisième état le téléphone se déverouillera si vous lâchez l'unlocker. L'état normal/d'origine quand à lui n'est visible que lorsque l'unlocker est inactif (donc tant qu'il n'est pas sélectionné).
Il ne reste donc q'un seul état où ces variables sont activées.
Au début de ce paragraphe je vous ai dis un retour "visible", car en effet lorsque ces deux variables ne sont pas utilisées et que l'on relâche l'unlocker alors que celui-ci est dans l'état "activé" on obtient un retour direct de l'unlocker dans son état d'origine ! Pour l'oeil ça peut être assez perturbant >_<
Bon alors à quoi ça sert concrêtement ?
bounceInitSpeed permet donc définir la vitesse initiale du retour à l'origine et bounceAcceleration l'accélération que le "mouvement" de retour à l'origine vas prendre au fur et à mesure que l'unlocker revient dans son état d'origine.
En effet plus vous lâcherez l'unlocker loin de son état d'origine, plus celui-ci prendra de la vitesse (si cette deuxième variable est suppérieure à 0 biensûr ^^).
Bon je ne connais pas l'unitée utilisée par ces deux variable mais ça doit être quelque chose dans le style pixel par secondes (px/s).

alawaysShow quand à lui permet de définir l'unlocker comme "disponible" alors qu'un autre unlocker et utilisé.
Par défault si celui-ci n'est pas utilisé il est donc "false" ce qui veux dire que lorsque vous sélectionnez un deuxième unlocker le premier se "désactivera" et sera "invisble" tant que le deuxième ne sera pas relâché !
Alors si votre unlocker ne contient aucune image ce n'est pas grave car à l'oeil on ne verra rien et de toute façon l'unlocker n'est pas multitouch. Par contre si vous utilisez des images dans le votre unlocker alors elle vont disparître à chaque fois que vous touchez un autre unlocker !
alwaysShow est donc la pour "activer" votre unlocker quelque soit la condition dans laquelle est situé votre lockscreen.
Alors pourquoi miui à mis en place cette "désactivation" ? Je pense que ces vpour éviter les "double activation" de lockscreen (je ne sais pas si vous voyez ce que je veux dire)
Bon c'est simple deux réponse possible dans la variable : true ou false

B) Généralité :

Les lignes StartPoint, NormalState, EndPoint, PressedState et ReachedState peuvent toutes contenir d'autres lignes de codes en leur sain !!! Cela vous permettra d'afficher des images selon les différents état de l'unlocker.
Juste si vous n'avez pas bien compris, vous pouvez faire ceci :
Code:
<StartPoint x="" y="" w="" h="" normalSound="sound_normal.mp3" pressedSound="sound_normal.mp3">
 
<Image x="" y="" w="" h="" src=""/>
 
<Text x="" y="" text=""/>
 
</StartPoint>


c) <StartPoint/> :


Code:
<StartPoint x="" y="" w="" h="" normalSound="sound_normal.mp3" pressedSound="sound_normal.mp3">
 
</StartPoint>


- normalSound=""le nom de votre unlocker
- pressedSound=""permet de faire varier la visibilité

Précision:

On commence par se que représente le StartPoint, c'est le point de départ de votre unlocker : la zone sur laquelle il est possible de sélectionner l'unlocker et donc de "l'activer"
Vous pouvez donc régler la position ainsi que les dimensions de votre StartPoint, vous devez voir cette partie comme si vous placiez une image sauf que l'image en question représente la "surface" sur laquelle votre unlocker "part".

Bien ensuite nous avons deux variables qui ne sont pas obligatoires et qui fonctionnent indépendement (vous pouvez donc utiliser l'un sans l'autre): normalSound et pressedSound.
Pour être bref ces deux là sont actif en fonction de l'état de votre unlocker => normalSound lorsque votre celui-ci est dans son état d'origine et pressedSound lorsque il est dans l'état activé.
Comme les images vous devez donc fournir les fichiers que doivent allé chercher ces variables, le format ".mp3" est supporté et il me semble que le ".ogg" le peut aussi ^^


C) <NormalState/>, <PressedState/> et <ReachedState/>:


Code:
<NormalState>
 
</NormalState>
 
 
<PressedState>
</PressedState>
 
<ReachedState>
</ReachedState>

Comme dit dans la sous partie B, vous pouvez mettre des lignes de codes dans l'unlocker.
Ces trois lignes là permettent d'afficher certains éléments selon l'état de l'unlocker, je suppose que vous comprenez l'anglais mais sait-on jamais :
-NormalStateaffiche les éléments contenus lorsque unlocker inactif/origine
-PressedStateaffiche les éléments contenus lorsque unlocker actif/pressé
-ReachedStateaffiche les éléments contenus lorsque unlocker attein zone de déverrouillage

Attention les lignes StartPoint et EndPoint ne son tpas soumis à cet "affiche si", les élément que ces de là contiendrons ne "disparaîtrons" pas !
 
Dernière édition:

desspil

Mitu élevé au distilat de pomme
Messages
2 742
Réactions
754
Points
113
Étant tout nouveau dans le monde Miui et n'y connaissant absolument rien en langage informatique (mais j'arrive à me dÉmerder en bidouilles), penses-tu que je peux m'attaquer à ton tuto ??

Ca me semble bien expliquÉ, je devrais m'en sortir, non ??

En tout cas merci ! ;)
 

darkmania

Apprenti de la force obscure
Messages
2 033
Réactions
634
Points
113
Je pense que si tu lis correctement mon tutoriel tu devrais t'en sortir facilement !

Tu peux utiliser les lockscreen que j'ai fais pour t'aider :
http://forum.miui-fr...ia/page__st__20

Pour ce qui d'un thème complet je te conseille de regarder dans la section thème (surtout les thèmes de Yuri et Myhtchd2 !).

Par ailleurs ci certaines personne sont bloquées (lock qui bug toujours après plusieurs tentative de modification), ont besoin d'aide dans une étape ou tout simplement pour ajouter des informations manquante : je suis là !

J'autorise même que les gens utilisent mes thèmes comme base d'inspiration ou de création, je demande juste à être cité mais je ne veux pas de copie de mes thème avec juste un ou deux trucs modifié (ça reviendrais à s'aproprier mon travail là >_<').

N'ayez pas peur d'envoyer des PM à ceux que vous pensez les plus apte à vous répondre, ici les gens ont un bon esprit d'équipe ^^

édit : Je pense pouvoir finir la deuxième partie du tuto d'ici ce soir !
 

desspil

Mitu élevé au distilat de pomme
Messages
2 742
Réactions
754
Points
113
Je pense que si tu lis correctement mon tutoriel tu devrais t'en sortir facilement !

Tu peux utiliser les lockscreen que j'ai fais pour t'aider :
http://forum.miui-fr...ia/page__st__20

Pour ce qui d'un thème complet je te conseille de regarder dans la section thème (surtout les thèmes de Yuri et Myhtchd2 !).

Par ailleurs ci certaines personne sont bloquées (lock qui bug toujours après plusieurs tentative de modification), ont besoin d'aide dans une étape ou tout simplement pour ajouter des informations manquante : je suis là !

J'autorise même que les gens utilisent mes thèmes comme base d'inspiration ou de création, je demande juste à être cité mais je ne veux pas de copie de mes thème avec juste un ou deux trucs modifié (ça reviendrais à s'aproprier mon travail là >_<').

N'ayez pas peur d'envoyer des PM à ceux que vous pensez les plus apte à vous répondre, ici les gens ont un bon esprit d'équipe ^^

édit : Je pense pouvoir finir la deuxième partie du tuto d'ici ce soir !

Ok merci, je teste ce week-end si j'ai un peu de temps (si ma fille me laisse un peu tranquille lol)
 

darkmania

Apprenti de la force obscure
Messages
2 033
Réactions
634
Points
113
pfiouuu

J'ai posté le DEBUT de la deuxième partie !!
J'ai dû écrire à peine un tier de tout ce qu'il faut dire xD !
Là j'ai les fesse en miette (je suis assis sur un tabouret depuis plus de 2 h >_<') et j'en marre d'écrire donc je me fais un lockscreen que je poste dans 30 mn lol

allé à demain soir pour la suite !
 

Ninho

Au delà du réel
Messages
358
Réactions
70
Points
337
Super le tuto, bonne initiative! J'ai lu en diagonale pour l'instant mais il me semble super bien expliqué!

Bon courage pour la suite ;)
 

darkmania

Apprenti de la force obscure
Messages
2 033
Réactions
634
Points
113
Merci beaucoup Ninho !

Ah oui pour ce qui est des explications : c'est vraiment très long à lire (et à faire) mais normalement si tout le monde le lit avec sérieux, une seule lecture devrait suffire pour obtenir les bases et connaître quelques astuces rapidement !
C'est à la fois le désavantage (longeur) et l'avantage (explication détaillé) d'un tel tuto !

Bonne nuit les gens !
 

desspil

Mitu élevé au distilat de pomme
Messages
2 742
Réactions
754
Points
113
Je sais que je vais passer pour un con, mais tous ces codes, on les tape où ? Dans le bloc note ?
 

darkmania

Apprenti de la force obscure
Messages
2 033
Réactions
634
Points
113
eh eh toi tu n'as pas lu mon tuto sérieusement ^^
oui bien sur avec bloc note tu ouvre le fichier "manifest.xml" (voir le premier post pour connaitre l’agencement des documents), et surtout fait uniquement "enregistrer" et non pas "enregistrer sous" (sinon l'extension devient ".txt" et là ===> bug xD)
 

darkmania

Apprenti de la force obscure
Messages
2 033
Réactions
634
Points
113
Ayé les pampas !

le deuxième post a carrément doublé en longueur xD
Au menu :
3°- Ajouter du texte
4°- Excusez moi, qu'elle heure est-il s'il vous plais ?

Voila voila moi je vais au cinéma me détendre maintenant ! (je vais voir MI 3, quelqu'un l'a déjà vus ? ^^)

A plus !
 

desspil

Mitu élevé au distilat de pomme
Messages
2 742
Réactions
754
Points
113
Ton clavier à fondu ??? ^^

Merci pour ton travail et ton partage.........et bon film (je l'ai pas vu) !
 
Haut