Personnaliser le lockscreen de son iPhone avec Gruppled
Après le succès du dernier tutorial permettant de customiser le lockscreen de son iPhone et suite à de nombreuses demandes, j’ai décidé d’en refaire un avec les dernières avancées en matière de Lockscreen. (ça fait très scientifique tout ça).
La principale différence réside dans la possibilité d’afficher des données sur le lockscreen et non seulement des notifications.
Pour être plus clair, il est donc maintenant possible d’afficher un SMS, un mail ou encore un rendez-vous en entier sur le lockscreen alors qu’auparavant, on ne pouvait afficher uniquement le nombre de SMS ou mails reçus en passant par StatusNotifier.
Avant propos
Avant de se lancer dans la lecture de ce tutorial, assurez-vous que vous êtes capables de vous servir correctement des outils suivants.
- Winterboard : tutoriel ici.
Notez qu’il existe tellement de variantes possibles avec ce thème que je ne vais en expliquer qu’une seule, la plus belle selon moi. Il faudra faire confiance à mes goûts :p
Etape 1 : Installation des packages tiers
Pour commencer, il est nécessaire d’installer quelques paquets tiers disponibles sur Cydia afin d’intégrer l’affichage des données sur le lockscreen.
Lockscreen Info
Lancez Cydia, ajoutez-y la source david.ashman.com/beta et installez Lockscreen Info.

Une fois cela effectué, rendez-vous dans les réglages pour y découvrir une nouvelle catégorie appelée LockInfo. Ne touchez à rien pour le moment.

20 seconds lockscreen
Par défaut, l’écran de l’iPhone s’éteint après 8 secondes sur le lockscreen. Afin d’empêcher l’extinction de l’écran trop vite une fois sur le lockscreen et ainsi passer de 8 à 20 secondes, installez 20 seconds lockscreen via Cydia.
Redémarrez l’iPhone pour appliquer les changements.
Etape 2 : Application du thème
Il est temps de télécharger le thème à cette adresse. Les 3 fichiers intéressants se trouvent dans le dossier LockInfo :
Gruppled Art.theme.zip
Gruppled LockInfo.theme-0.9.5.2.zip
Tea LockBackground.theme.zip
Via SSH, placez ces derniers dans le dossier Library/Themes. Ouvrez ensuite Winterboard pour appliquer les changements. Notez l’ordre dans lequel se trouvent les 3 thèmes dans Winterboard.
Tea LockBackground
Gruppled Art
Gruppled LockInfo
Gruppled Art va appliquer un thème à votre iPhone, sachez que je ne l’ai pas installé dans ce cas mais rien ne vous empêche de le faire.
Voilà ce qu’on obtient après le respring. Pas exactement ce qu’on voudrait, c’est pourquoi il va falloir le configurer et recommencer l’étape 2 par la suite.

Etape 3 : Configuration
De retour sur le Mac. Vous l’aurez remarqué, il n’est pas possible d’ouvrir un fichier .theme directement. Deux choix s’offrent à vous : soit vous enlevez l’extension .theme, soit vous affichez le contenu du paquet” comme ci-dessous.

A présent, ouvrez le fichier config.js (Gruppled LockInfo/Bundles/com.ashman.LockInfo) avec votre éditeur de texte (préférez TextMate ou Smultron à Textedit). Tout ce dont nous avons besoin s’y trouve.
Notez que les lignes affichées dans l’article correspondent à celles affichées dans le fichier config.js, d’où l’intérêt d’utiliser autre chose que TextEdit.
Paramètres généraux
-
// GENERAL SETTINGS
-
-
// Your country code
-
// If it's not in the strings/ folder, please translate strings/en.js and send to gruppler@gmail.com
-
var language = "fr";
-
// NOTE: to change time formats, look in strings/en.js (or whatever language file you're using)
-
-
// Arrange and/or disable (by commenting-out) sections:
-
// To enable a section, remove the "//" at the beginning of the line
-
var sections = [
-
"Clock",
-
"Weather",
-
"Mail",
-
"Calendar",
-
"Calls",
-
// "Voicemail",
-
"SMS",
-
];
-
-
// If "Clock" is enabled in the "sections" list above, this shows the bigger custom clock
-
var useBigClock = true;
-
-
// Display arrows in headers?
-
var displayArrows = true;
-
-
// Draw a monthly calendar as a collapsable subsection of the custom clock
-
var showMonth = true;
-
-
// The day the week will start on; 0(Sun) to 6(Sat)
-
var startDay = 0;
-
-
/*––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/
Dans ce premier bloc, j’édite la langue à la ligne 6 et je mets “fr” pour Français.
A la ligne 11, je choisis ce qui va être affiché ou non sur le lockscreen. Dans ce cas, je ne veux pas afficher la voicemail, donc je mets simplement // devant la ligne “VoiceMail”. Pareil dans l’autre sens, je veux afficher l’horloge donc j’enlève le // devant “Clock”.
Dérouler un widget
-
-
// Collapse or expand main sections by default; comment-out or set to false to expand…
-
// To collapse a section by default, remove the "//" at the beginning of the line
-
var defaultCollapsed = {
-
"Clock":true,
-
"Mail":true,
-
// "Calendar":true,
-
"Calls":true,
-
"Voicemail":true,
-
"SMS":true,
-
"Weather":true,
-
};
-
-
// Enable global collapse/expand by swiping right (or left, if globalHide is false)?
-
var globalCollapse = true;
-
-
// Enable global hide toggling by swiping left (or right, if globalCollapse is false)?
-
var globalHide = true;
-
-
// If globalHide is true and custom clock is enabled, hide the clock too?
-
var hideClock = false;
-
-
// Set to false for instant section collapse/expand, or true for webkit CSS animations
-
var enableAnimations = false;
-
var animationDuration = 450; // Milliseconds
-
-
// Animate the global collapse/expand? (Requires enableAnimations to be true)
-
var animateGlobalCollapse = false;
-
-
// Collapse subsections in sections that are to be collapsed by default (listed above)?
-
var collapseChildren = true;
-
-
// Always expand the first subsection? Note: this overrides collapseChildren;
-
// subsequent sections will be collapsed regardless of main section's default
-
var expandFirst = true;
-
-
// Revert to default collapse/expand settings when a section is empty?
-
var revertCollapsedOnEmpty = true;
-
-
// Hide empty sections?
-
var hideEmptySections = true;
-
-
/*––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/
Cette partie permet de configurer le comportement de chaque mini-widget se trouvant sur le lockscreen (Météo, Calendrier, …). Expand pour dérouler, Collapse pour enrouler.
Voulez-vous qu’il soit déroulé par défaut? Ou alors il n’y a pas assez de place et vous préférez le faire vous-même.
Comme cité plus haut, retirez le commentaire, c’est-à-dire les //, pour qu’un mini-widget ne se déroule pas automatiquement. Dans ce cas, j’ai choisi de ne pas dérouler le calendrier. (ligne 41)
Comportement des widgets
Comment se comporte le widget? Combien de mails ou SMS seront affichés? Tout se trouve dans cette section.
-
// Limit the number of emails to show
-
var mailLimit = 5;
-
// Limit the number of missed calls to show
-
var callLimit = 5;
-
// Limit the number of voicemails to show
-
var voicemailLimit = 5;
-
// Limit the number of SMS messages to show
-
var smsLimit = 3
Le code ci-dessus permet de limiter le nombre d’informations affichées sur le lockscreen. A vous de voir ce qui vous convient le mieux.
La météo
A moins que vous habitiez à Columbus, il est nécessaire de changer votre lieu d’habitation. Vous pouvez afficher plusieurs villes ou une seule.
-
"Brussels, Belgium",
-
];
Si vous habitez dans un coin un peu plus perdu comme moi, faites un tour sur Accuweather.com afin de vérifier si le village est dans la base de données.
J’adapte ensuite le code. Si vous voulez afficher plusieurs villes, il suffit de rajouter des lignes comme ceci.
-
"Bernissart, Belgium",
-
"Brussels, Belgium",
-
];
Contrairement à l’ancien lockscreen, il garde la météo en mémoire et donc inutile d’avoir une connexion internet en permanence pour afficher la météo !
Problèmes?
C’est terminé pour le fichier config.js. Après l’avoir transféré sur l’iPhone, faites un respring (SBSettings ou Winterboard) et voilà ce qu’on obtient.

Deux problèmes apparaissent : il y a 2 horloges et la date n’est pas affichée correctement.
→ Si on veut garder la petite horloge, il suffit de télécharger LockScreen Clock Hide sur Cydia. Il devrait être accessible via une simple recherche, dans le cas contraire, ajoutez le repo add david.ashman.com/apt.
→ Garder uniquement la grande? Retournez dans le fichier config.js et éditez la ligne 12 :
-
// To enable a section, remove the "//" at the beginning of the line
-
var sections = [
-
// "Clock",
-
"Weather",
-
"Mail",
-
"Calendar",
-
"Calls",
-
// "Voicemail",
-
"SMS",
-
];
Ouvrez fr.js qui se trouve dans Gruppled LockInfo/Bundles/com.ashman.LockInfo/strings/.
Retournez les lettres de la ligne 20 :
-
var format_date = "l j F";
Changer le fond d’écran
Si vous souhaitez utiliser votre propre fond d’écran, rendez-vous dans Winterboard, décochez Tea LockBackground.theme et ajoutez votre fond d’écran dans Library/Themes/Gruppled LockInfo sous le nom LockBackground.png (respectez les majuscules)
Résultat final

Maintenant, si vous souhaitez cacher toutes les infos et n’afficher que la date, il suffit de faire un “swipe” vers la gauche (glisser votre doigt) sur le lockscreen.

Autres articles sur le même sujet:




Le Saturday 8 August 2009 à 13:53
Excellent ! Merci
Petite question: ou trouves tu le fond d’écran du dernier screenshot (Terre) ?
Le Saturday 8 August 2009 à 19:57
@Microboum : http://kttns.org/yotm5
Le Saturday 8 August 2009 à 23:45
aprés avoir suivi ton tuto a la lettre !
j’ai pas du tout le même rendu que sur la derniere photo …
j’ai que l’heure avec 1 mail qui apparait , pas de meteo sms …
vraiment decu
Le Saturday 8 August 2009 à 23:54
@colin : tu as des SMS non lus au moins? Pour la météo, tu es bien connecté à internet? Vérifie si tu as bien enlevé les // devant Weather dans les paramètres généraux.
Le Sunday 9 August 2009 à 11:19
Tres bien rédigé ton tuto. Tout fonctionne impeccable ! Merci a toi !
Le Sunday 9 August 2009 à 13:57
Juste 3 petites choses pour rendre ce tutoriel parfait:
//j’édite la langue à la ligne 6 et je mets “fr”//
c’est plutot ligne 5
//j’ai choisi de ne pas dérouler le calendrier. (ligne 41)//
c’est ligne 40
//Retournez dans le fichier config.js et éditez la ligne 12//
…ligne 11
Le Sunday 9 August 2009 à 14:55
J’avais pas vu, mais je suis sur mentionné sur le direct message from Twitter.
Masta classe
Enfin bref, il est temps que je me décide à acheter l’iPhone pour pouvoir profiter de tout cela. \o/
Le Sunday 9 August 2009 à 15:42
@Microboum : Oui, on dirait que TextMate me fait un décalage. Merci
@Pat : haha
Le Monday 10 August 2009 à 14:36
En faite les numéros de lignes peuvent facilement changer suivant la mise en page que le programme fait, sans compter que si pour la météo on rajoute ou on enlève une ville la numérotation ne suit plus…
Faux plutot s’attacher au texte de la ligne qu’aux chiffres…
Le Monday 10 August 2009 à 15:01
Comme le dit GamerXtrem, regardez la ligne que je pointe dans l’article, référez-vous au code présent dans l’article et recherchez ensuite le texte dans votre éditeur de texte.
Le Wednesday 12 August 2009 à 12:29
J’ai fais exactement la procédure du tutoriel de A à Z et j’ai rien qui s’affiche , meme pas l’horloge ni rien
pourrais-tu mettre tes fichiers à toi sur le site ??
Merci d’avance
Le Wednesday 12 August 2009 à 18:52
@Gizmodesbois, fais un screenshot de Winterboard et mets le ici, peut-être qu’il y a un problème dans l’ordre des thèmes
Le Thursday 13 August 2009 à 11:23
J’ai réussi a fixer le problème en fait j’ai laisser le lockinfo activer sur le winterboard ^^ maintenant c’est rentré dans l’ordre , en tout cas un grand grand merci pour ce tutoriel
Bonne journée
Le Friday 14 August 2009 à 23:01
Vraiment très bel article !
Merci d’avoir pris le temps pour bien détailler les étapes,
c’est vraiment génial une fois fait, même si c’est pas évident…
Encore Merci à vous
Le Saturday 15 August 2009 à 16:00
Bonjour
Voila j’ai suivi le tuto et je quand j’active tout, et rien ne s’affiche à part le fond:
http://img412.imageshack.us/i/img0012o.png/
http://img5.imageshack.us/i/img0013v.png/
Le Saturday 15 August 2009 à 20:00
@rzae : Si ça ne fonctionne pas, il faut vérifier que le thème “LockInfo” est bien décoché.
Le Sunday 16 August 2009 à 11:38
RE
OK merci, j’ai réussi à le faire fonctionner!
Merci pour se super tuto!
Le Sunday 16 August 2009 à 23:06
Bonjour à tous
Merci pour cet article.
C’est la personnalisation du lockscreen qui m’a enfin décidé à jailbreaker mon iphone et je suis pourtant possesseur d’un iphone depuis sa première semaine de commercialisation.
Je n’y connaissais donc rien, pas plus en SSH et encore moins au courant de l’existence de Winterboard.
Le résultat est super à l’image du tuto.
Bonne continuation !
Le Wednesday 26 August 2009 à 12:50
Bonjour,
J’ai un souci avec ce paragraphe :
“Via SSH, placez ces derniers dans le dossier Library/Themes. Ouvrez ensuite Winterboard pour appliquer les changements. Notez l’ordre dans lequel se trouvent les 3 thèmes dans Winterboard.”
J’ai installé iPhone Tunnel mais ne sait pas comment placez les dossier que j’ai téléchargé dans Library/Themes et ce via SSH… quelqu’un pourrait m’expliquer comment le faire avec iPhone Tunnel ???
Merci d’avance…
Le Wednesday 26 August 2009 à 16:15
Tony – Je te conseille d’utiliser DiskAid, c’est plus simple. Si pas, il faut absolument revenir à la racine de l’iPhone car quand tu te connectes, tu es dans un autre dossier.
Le Saturday 29 August 2009 à 19:55
Salut,
D’abord, merci pour ce tuto !! Parfait et évite de passer chez Intelliscreen et l’abus financier :-/
2 questions :
1- Quand on a un appel manqué, on a déjà un message de l’iPhone pour dire “XXXX Appel manqué” (message qui vient se poser sur les infos Gruppled…). Comment désactiver ça ?
2- En n’activant que “Gruppled LockInfo” dans Winterboard, on a un LockScreen qui ne possède que le petit cadenas en bas et au milieu. Comment mettre la barre d’activation classique ?
Je ne souhaite pas activer le thème Gruppled (seulement avoir les infos du lockscreen)…
Merci de tes réponses et ton tuto en tout cas !!
Le Sunday 30 August 2009 à 23:47
Une petite astuce qui ravira les flemmards comme moi,
que le SSH rebute, il existe un logiciel qui fonctionne très simplement
pour transférer des fichiers/dossiers sur ou depuis l’iphone :
http://code.google.com/p/iphonebrowser/
Une question subsiste, si j’ai envie de récupérer le “slide to unlock”, comment fais-je ?
Encore merci pour cet excellent tuto !!!!
Le Monday 31 August 2009 à 00:27
Bon… après pas mal de recherche, ma conclusion est la suivante : l’idéal est ici…
http://forum.frenchiphone.com/index.php?topic=41222.0
Tout est paramétrable depuis les paramètres généraux…
Le Monday 31 August 2009 à 10:41
Salut Adrien et Eorl,
pour récupérer le slide, il suffit d’effacer les dossiers com.apple.springboard et com.apple.TelephonyUI se trouvant dans Library/Themes/Gruppled Lockinfo.theme
En ce qui concerne le popup Adrien, il faut te tourner vers popup blocker qui est disponible sur Cydia (mais payant) et qui permet de gérer tout ça.
Le Saturday 5 September 2009 à 15:54
Tout simplement génial.
Très bien expliqué. J’ai réussi du premier coup.
Merci pour votre temps
Le Tuesday 8 September 2009 à 17:06
salut, en fait jarrive pas a télécharger le theme sur mediafire, safari ne peut pas ouvrir la page, j’ai essayé “telecharger le fichier lié” mais ca demare pas,
qqn peut m’aider
Le Tuesday 8 September 2009 à 17:13
c’est juste grupparttheme ke j’arrive pas a telecharger, c’est pas trop grave
merci
Le Friday 16 October 2009 à 12:48
Bonjour,
Merci bcp pour ce tuto c’est vraiment du lourd!!! J’ai tout réussi a mettre comme sur la photo finale mais j’ai encore juste une question:
Lorsque je presse sur calendrier, il fait défiler tous les événement a venir mais via encore un sous dossier. Je m’explique: Je click sur calendrier(4), il s’affiche alors Dimanche 18 octobre (dans 2jours); lundi 19 octobre (dans 3 jours)…etc et je dois encore appuyer sur “dimanche 18 octobre pour voir ce qu’il y a. j’aimerais faire disparaitre ces sous dossier pour avoir juste une ligne par évènement, étant donnée que la date et re-répété après.
Merci
Le Monday 19 October 2009 à 18:44
Salut,
Super tuto, ca donne envi. Dès que j’ai un peu de tps, j’essaye de faire tout ca.
J’ai juste une question qui je crois n’a pas encore été posé : comment tu fais pour avoir le % de batterie restant de l’iphone en haut a droite stp.
Merci de me répondre et encore bravo pour ce tuto.
Le Thursday 22 October 2009 à 11:26
@Nasri8 : Normalement c’est d’origine en 3.0 mais il arrive que ça ne vienne pas. Donc installe SBSettings et dans les extras, tu pourras l’afficher
Le Saturday 24 October 2009 à 16:06
j’ai un petit probleme : j’arrive pa sa telecharger Gruppled Art.theme.zip aider moi please
Le Sunday 25 October 2009 à 19:39
Bonjour,
Merci beaucoup pour ce tuto, le résultat est génial.
Juste un détail, peut-on changer l’image du fonds d’écran et si oui, quel est le fichier à modifier et où se trouve-t-il ?
Merci de votre aide….
Le Sunday 25 October 2009 à 19:41
oh.. honte à moi, je viens de me rendre compte qu’il y avait une explication à ce sujet..
sorry !
Le Wednesday 4 November 2009 à 15:23
Quelqu’un aurait la version non payante de Lock Info ?
Il y a eu une mise a jour et sur la dernière version, c’est trial de 18 jours.
Merci
Le Friday 6 November 2009 à 00:19
Salut a toi,
Excelent tuto deja, ça permet de mettre un peu la main a la patte et voir comment ça fonctionne.
Perso j’aime bcp aussi le design de celui la, le seul truc que j’aimerais faire c’est gardé le systeme et bouton deverrouillé original, j’ai cherché un peu, mais j’arrive pas a voir comment faire.
Voila merci d’avance
Le Friday 6 November 2009 à 00:56
j’ai testé de mettre le “SpringBoard.strings” original qui se trouve dans
- “/System/Library/CoreServices/SpringBoard.app/French.lproj/.”
dans
- “Library\themes\Gruppled LockInfo.theme\Bundles\com.apple.springboard\fr.lproj\”
Mais ça marche pas :/
Je veux pas le système de bouton, je préfère le “swipe” pour déverrouiller.
Le Monday 23 November 2009 à 19:33
merci beaucoup pour ce tuto très bien fait et fort apprécié !

par contre, il me semble que ce mod entraine quelques désagréments qui me semblent avoir été réglés en remettant seulement le “slide to unlock”…
- les commandes pour prendre un appel (le “slide pour décrocher”) n’apparaissaient plus.
- il était impossible, en mode vertical, de régler le volume à partir de l’écran tactile…
tout semble rentré dans l’ordre avec le retour du slide…
bon, ce ne sont quand même que des désagréments bien mineurs en comparaison de la cool attitude de ce lockscreen !!!!
encore merci !!!
Le Sunday 29 November 2009 à 19:20
bonjour,
je te trouve ce theme tres beau et le tuto bien fait j’ai cependant un probleme je n’arrive pas à configurer la meteo de ma ville qui est pourtant referencée dans accu weather (clermont ferrand) quand je respring ce sont toujours les deux villes de depart qui s’affiche alors que je les ai supprimées. Si quelqu’un peut m’aider d’avance merci
Le Wednesday 9 December 2009 à 21:22
Comment faire pour changer le fond d’écran (qu’il soit différent) quand tu fais le swipe ?
Le Monday 18 January 2010 à 15:55
salut cetais pour dire que j’ai fais tous se que tu dis mais je n’ai ni les mail ni le calendrier du bas merci de me dire se quil faut que je fasse
Le Monday 25 January 2010 à 04:09
un tuto pour se connecte en SSH via USB sur PC ?
(
Le Thursday 4 February 2010 à 19:04
Bonjour,
Tout fonctionne bien merci !
J’ai juste un probleme, ma page lockinfo etant assez longue, je ne peux pas faire glisser la page avec l’ascenseur sur la droite jusque la fin de page … elle ne descend que de 3 ou 4 lignes et je voudrais pouvoir aller jusqu’a la fin de ma page …
une solution ?
Merci d’avance
Le Tuesday 9 February 2010 à 16:52
pour jay : diskaid
sinon merci pour le tuto ! marche nickel !!
Le Saturday 6 March 2010 à 04:00
Je sais je suis en retard mais j’ai seulement une petite question avant de l’installer… lorsqu’on double click sur le bouton gomme pour la musique (le bouton play le volume et avance recule) est t’il bien compatible avec ceci
Merci