Annonce

Vous pouvez parler de jailbreak sur ce forum. En revanche, il est interdit d'évoquer tout système permettant de pirater des applications ! Merci de respecter le travail des développeurs.

#1 07-04-2009 00:41:51

minupinu17
RS Power !

[TuTo]Les WIdgets.

Un Widget ?? C'est quoi ?

Un widget est un élément que l'on rajoute sur le springboard et/ou sur le lockscreen. Cela peut être une horloge ou un petit encadré qui donne la météo ou les deux en même temps ou n'importe quel objet de ce type.

Exemple =>     img0001fgp.png

Il en existe des dizaines différents, nous allons les répertorier un peu plus bas wink.

Je vous invite à participer et à poster vos Créations/Découvertes de Widget que je rajouterai dans ce tuto wink

I. Comment incorporer un Widget à mon thème ??

Bien, pour avoir un widget sur son écran, il suffit de créer un fichier HTML

    -Si on veut un widget sur son springboard, on crée un fichier          Wallpaper.html
    -Si on veut un widget sur son lockscreen, on crée un fichier          LockBackground.html

Ces deux fichiers se placent à la racine de votre thème perso et s'activent donc avec WinterBoard

Attention ! Un widget utilise dans 90% des cas des images et donc doit être associé à un dossier du thème (qui contient toutes ces images). Ce dossier doit être placé à la racine du thème et se nommer "Private" (ou dans certains cas rares "Widgets")

Pour rappel, les thèmes se placent par SSH à l'adresse suivante :
/Private/var/stash/Themes.XXXX/

II. Liste des différents widgets pour le springboard

1) Horloge issue du thème iPhone HD (format 12 heures)

Télécharger

Résultat =>   img0042.png

2) Horloge issue du thème iPhone HD (format 24 heures)

Télécharger

Résultat =>   img0041j.png

3) Météo au centre du springboard

Télécharger

Résultat =>   img0043v.png

4) Horloge bandeau avec météo de votre ville

Télécharger

Résultat =>   img0044c.png


Remarque: Comment faire le réglage de la météo :

Dans le dossier Widget => Configs => ouvrez weather-config.js avec Notepad++ et changez ligne 110
var locale = "FRXX0130"
par var locale = "code de votre localité"
et « où est ce qu'on trouve le code de sa localité ??? »
ICI^^
Une fois votre ville choisie, le code est dans la barre d'adresse internet du site.


5) 4 fonds d'écran se succédant toutes les 10 secondes (pour celui-ci, plus d'infos )

Télécharger

Attention ! Pour ce widget, vous devez placer 4 images au choix, au format .png en 320*480 pixels, nommées 1.png à 4.png (écrasez celles déjà présentes) dans le dossier Private fourni. Elles défileront donc les unes à la suite des autres.

III. Liste des différents widgets pour le lockscreen

Vous les trouverez dans le post # 3
1) Première contribution de grog6 pour le lockscreen (horloge perso)

2) Fonds changeants (comme sur le springboard mais pour le lockscreen), par Max <= Attention ! Vous perdrez votre écran de chargement (batterie perso) avec ce HTML.

IV. Association de deux widgets

Un problème que j'ai eu récemment :
    J'avais un Wallpaper.html qui me permettait d'avoir un fond d'écran qui change toutes les 10 sec sur le springboard,
    et un autre qui m'affichait une horloge.
    Et je me suis dit, ça serait sympa d'avoir les deux en même temps ^^
    Alors j'ai essayé de bidouiller pour combiner les deux HTML , RIEN à FAIRE !!!

et j'ai découvert un truc plutôt pas mal.....^^

Pour ceux qui ne le savent pas encore, il est possible de créer à la racine de votre thème un fichier Widget.html qui a exactement les mêmes fonctions que le wallpaper.html et, bien entendu, les deux sont cumulables.

Ainsi si vous souhaitez avoir deux widgets sur votre springboard, rien de plus simple : Vous en placez un nommé wallpaper.html et le second nommé widget.html.[

sanstitrexzc.jpg

C'est comme ça que j'ai pu avoir mon Wallpaper.html qui fait changer mon fond d'écran toutes les 10 secondes ET mon horloge que j'ai nommée Widget.html.

V. Widget pour la StatusBar

Petite information supplémentaire pour ceux qui ne le savent pas, il est possible de créer un fichier StatusBar.html afin d'avoir, par exemple, une statusbar qui change de couleur toutes les 1 sec ou ce genre de choses ^^


Un grand merci à MaV qui à coup d'insomnies m'a bien aidé smile

Dernière modification par minupinu17 (08-04-2009 16:07:11)

Hors ligne

#2 07-04-2009 00:42:53

minupinu17
RS Power !

Re : [TuTo]Les WIdgets.

Afficher un GIF sur le SpringBoard

Jusque maintenant nous étions tous persuadés que les iPhone/iTouch ne savaient lire que les images au format .png.

Et bien non il est possible d'afficher une image GIF sur le springboard. (Pour ceux qui ne le savent pas une image .gif est une image animée)

exemple: http://www.dailymotion.com/user/minupin … touch_tech

Comment faire cela ?

rien de plus simple : prenez Ce HTML et incorporez le à la racine de votre thème.

Ensuite , (si ce n'est pas déjà fait) vous allez créer, à la racine du thème toujours , un dossier nommé "Private" à l'intérieur duquel vous mettrez l'image GIF de votre choix nommé "image1.gif" (pas de majuscule , pas d'espace)

Réactiver le thème via winterboard et après un respring vous obtiendrez la même chose que sur ma vidéo , mais avec votre image perso wink.

Comment déplacer l'image ?

Ouvrez le fichier wallpaper.html à l'aide de notepad++

Les positionnement de l'image sur le Spring est donné par les coordonnées (en pixel) que je vous ai indiqué par des flèches rouges.

sanstitre1gbm.jpg

Vous n'avez qu'à modifier les coordonnées pour déplacer l'image.


Attention!!!! Cette astuce pourrait permettre de faire des thème super sympa avec, par exemple, des sauts de pages animés , hélas je dis pourrait car je vous déconseille FORTEMENT de ne pas afficher plusieurs GIF sur le Springboard , et oui le touch ne supporte pas trop ça et c'est sujet  de très forts ralentissement voir PLANTAGES. -perso j'en ai mis 5 ça ma couté une restauration , mouaha- N'ayez pas peur avec un , c'est très stable wink

Vous pourrez en faire deux à la limite mais c'est un maxi.

Voila il faudra donc se contenter d'une petite animation qui égaiera votre Spring mais bon , c'est déjà pas mal , et puis même avec une petite icône animé comme ça dans un coin ça rend son thème bien sympa et surtout unique.

Pour ceux qui veulent tester mon super Forum iTouch en haut du spring (hihi) voila le dossier à placer dans
/private/var/stash/Themes.XXXX/
et à activer avec winterboard.

   =>Enjoy'<=

Voila voila en espérant que ce tuto vous aura fait plaisir @bientôt les amis.

Dernière modification par minupinu17 (10-04-2009 12:28:51)

Hors ligne

#3 07-04-2009 00:44:59

minupinu17
RS Power !

Re : [TuTo]Les WIdgets.

Modifier son LOckBackground.html

Horloge perso=>Réalisé par Grog6 grand merci à lui

Raoul nous avait jusqu'alors permis de faire ça, grog6 y a rajouté la possibilité de déplacer la date indépendamment de l'heure ce qui permet de faire des choses assez sympa -voir plus bas- et ça vous permet de voir par la même occasion un widget lockscreen , en l'occurrence ici une horloge perso , qui je l'espère serra bientôt réalisable sans modification de fichiers système. -c'est possible, je boss dessus là-^^

Voila le .html du lockscreen pour pouvoir afficher librement la date et l'heure séparement ou vous voulez !

<html>
<head>

<meta http-equiv="Content-Language" content="fr">

<script language="JavaScript">
//
<!--masque le script pour les navigateurs qui ne supportent pas JavaScript 

function afficheDate()// Notre fonction pour afficher la date
    {
    jours = new Array('Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi'); 
    mois = new Array('Janvier', 'Fevrier', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Aout', 'Septembre', 'Octobre', 'Novembre', 'Decembre');
    date=new Date();
    
    var jour = jours[date.getDay()];
    var moi= mois[date.getMonth()];
    datejour=date.getDate();
    
    
    if (date.getDate()<10) datejour="0"+datejour;
    

    document.getElementById("texteDate").innerHTML="<id>"+jour+" "+datejour+" "+moi;
    setTimeout("afficheDate()", 1000);

        }

function afficheHeure()// Notre fonction pour afficher l'heure
    {
   
    date=new Date();
    heure=date.getHours();
    minute=date.getMinutes();
    
    
    if (heure<10) heure="0"+heure;
    if (minute<10) minute="0"+minute;

    document.getElementById("texteHeure").innerHTML=+heure+":"+minute;
    setTimeout("afficheHeure()", 1000);

        }
 // Fin du script -->
</script>

  <title>Afficher l'heure</title>

</head>
<style>
SPAN#texteDate
{
font-family: Totone; 
text-align: center;
color: #e51313;
font-size: 35px;
}

SPAN#texteHeure
{
font-family: Totone; 
text-align: center;
color: #e51313;
font-size: 80px;
}
</style>

<body onload="afficheDate();afficheHeure();">


<!--DEBUT DATE-->

<table style="position: absolute; top: 20px; left: 5px; width: 320px; height: 461px;" cellspacing="0" cellpadding="0" border="0">
    <tr valign="top"  cellpadding="0">
            <td height="70" valign="top" align="center">
                <span id="texteDate"></span>
            </td>
    </tr>
    <tr>
        <td valign="top">
            <span id="texteHeure"></span>
        </td>
    </tr>
</table>

<!--FIN DATE-->
</body>
</html>

Coller ce code dans le fichier HTML a la place de celui existant


Petite explication pour ceux qui ne maitrisent pas le HTML

Dans le css SPAN#texteDate et SPAN#texteheure, vous définissez les paramètres de vos police pour la date et l'heure

Ensuite pour gérer l'affichage, il faut modifier les paramètres du tableau dans la partie DEBUT DATE

Si vous voulez avoir une idée de la tete qu'a le tableau, modifier border="0" par border="1" !

Ce qui donne ca :

IMG_0002.PNG


Fond Changeant=>Réalisé par Max grand merci à lui

Télécharger

et créer dans le dossier private fournit 2 images du nom de image1.png et image2.png qui seront vos images changeant à intervalle de temps régulier(format png 320*480)


Widget météo et calendrier pour LockScreen=>Réalisé par MaxBordeaux

Téléchargement

Résultat=>
photo041s.png

// The location field should be a relatively machine-legible string
// if using the default, Apple/AccuWeather parser (originally from Leopard's Weather.wdgt)
var locale = "EUR|FR|FR012|PARIS"  //"OCN|AU|VIC|MELBOURNE" //"ASI|PH|RP077|MAKATI" //e.g. 'Defiance, Ohio'|'Moscow, Russia'|'Ledyard, AT'|'London, UK'

Faites attention certains widgets météo ne fonctionnent qu'avec une seule source
par exemple Accuweather et pas Yahoo

Ici la ville est Paris
var locale = "EUR|FR|FR012|PARIS"

Pour accuweather
allez ici http://www.accuweather.com/world-favori … region=eur
cherchez votre ville
récupérez le code de votre ville dans la barre de navigation de votre browser

Dernière modification par minupinu17 (07-04-2009 19:40:15)

Hors ligne

#4 07-04-2009 01:11:44

minupinu17
RS Power !

Re : [TuTo]Les WIdgets.

Réservé

Dernière modification par minupinu17 (07-04-2009 01:16:01)

Hors ligne

#5 07-04-2009 01:16:07

minupinu17
RS Power !

Re : [TuTo]Les WIdgets.

Sur ce je vais me coucher xD
Il manque des widgets de lockscreen que je publierai .... quand j'aurai le temps tongue

hésitez pas à nous faire découvrir vos widgets ici , je les rajouterai au TuTo en vous citant bien sur et toute autre astuce pour le maniement des HTML etc etc.

Bonna notte tutti.

Hors ligne

#6 07-04-2009 07:39:18

Sleepy
Membre

Re : [TuTo]Les WIdgets.

Tu m'épates !
Bravo big_smile

Peut etre que si des gens c'était mon cas roll se demandent comment changer la ville du widget tu pourrais rajouter ça (au 3/4 de la page), comme ça c'est direct sur le topic smile

Dernière modification par Sleepy (07-04-2009 08:30:25)


iPod Touch V2 8Go 3.1.2 Jailbroken
iPod Nano V2 2Go donné à la soeurette

Si vous avez besoin de quelque chose, appelez-moi. Je vous dirai comment vous en passer.

Hors ligne

#7 07-04-2009 08:26:53

Anonyme
Compte Supprimé

Re : [TuTo]Les WIdgets.

Bravo !
Je posterais fans la journée mon widjet d'horloge sûr le lockscreen avec mes fonds d'écrans qui changent.
Pour cumuler des widjets, je peux le faire, contacte moi !

ÉDIT: Pourles gifs ou tu dis qu'au bout de 5 faut restaurer -> PAS VRAI !
si tes gifs sont lourds, c'est normal que ça rame, voir que ça plante.
Si tes gifs sont légers, pas trop de risque

Rajoute ça, car il va y en avoir qui vont en mettre 2 très lourd et ils vont planter !

Dernière modification par Anonyme (07-04-2009 08:30:50)

#8 07-04-2009 09:05:23

Sleepy
Membre

Re : [TuTo]Les WIdgets.

Y a moyen de changer le widget de place sur le spring ?


iPod Touch V2 8Go 3.1.2 Jailbroken
iPod Nano V2 2Go donné à la soeurette

Si vous avez besoin de quelque chose, appelez-moi. Je vous dirai comment vous en passer.

Hors ligne

#9 07-04-2009 09:46:36

maxbordeaux
Membre

Re : [TuTo]Les WIdgets.

Modifier son LOckBackground.html

edit: minupinu a rajouté a son tuto


je vais vous expliquez comme avoir celà


photo042.png

photo041s.png

photo043.png


télécharger : http://www.megaupload.com/?d=9MSQD91D

Les modifications pour votre ville



// The location field should be a relatively machine-legible string
// if using the default, Apple/AccuWeather parser (originally from Leopard's Weather.wdgt)
var locale = "EUR|FR|FR012|PARIS"  //"OCN|AU|VIC|MELBOURNE" //"ASI|PH|RP077|MAKATI" //e.g. 'Defiance, Ohio'|'Moscow, Russia'|'Ledyard, AT'|'London, UK'

Faites attention certains widgets météo ne fonctionnent qu'avec une seule source
par exemple Accuweather et pas Yahoo


ici la ville est Paris
var locale = "EUR|FR|FR012|PARIS"

Pour accuweather
allez ici http://www.accuweather.com/world-favori … region=eur
cherchez votre ville
récupérez le code de votre ville dans la barre de navigation de votre browser
La suite dans la journée

Dernière modification par maxbordeaux (07-04-2009 16:27:29)


iPhone 3GS 32go 3.1.2 jailbreak Iphone 3Gs 16go 3.0.1 jailbreak /Psp custom  5.50,Wii flash 4.1/preloader 0.30, Xbox 360 flash 1.61 PC:Intel Q9550  2.83GHz,Hd4850, Seven Ultimate

Hors ligne

#10 07-04-2009 09:48:27

maxbordeaux
Membre

Re : [TuTo]Les WIdgets.

réservé

Dernière modification par maxbordeaux (07-04-2009 09:48:39)


iPhone 3GS 32go 3.1.2 jailbreak Iphone 3Gs 16go 3.0.1 jailbreak /Psp custom  5.50,Wii flash 4.1/preloader 0.30, Xbox 360 flash 1.61 PC:Intel Q9550  2.83GHz,Hd4850, Seven Ultimate

Hors ligne

#11 07-04-2009 10:43:27

grog6
Membre

Re : [TuTo]Les WIdgets.

Qu'est ce qu'il a mon texte ?! wink

Il etait tard et pas le temps de faire ca dans les détails ! wink


If you want to touch the sky, fuck a duck and try to fly

Hors ligne

#12 07-04-2009 10:44:07

maxbordeaux
Membre

Re : [TuTo]Les WIdgets.

Moi j'en fais pour le lock plûtot


iPhone 3GS 32go 3.1.2 jailbreak Iphone 3Gs 16go 3.0.1 jailbreak /Psp custom  5.50,Wii flash 4.1/preloader 0.30, Xbox 360 flash 1.61 PC:Intel Q9550  2.83GHz,Hd4850, Seven Ultimate

Hors ligne

#13 07-04-2009 11:02:26

minupinu17
RS Power !

Re : [TuTo]Les WIdgets.

Sleepy => Rajouté

Max => Rajouté

Mav => si si y a aussi pour les lockscreen , c'est juste que ça arrive petit à petit wink

Fogn => T'es sur de toi ? , parce que mes GIF faisaient quelques Ko chacun et mon touch s'est complètement bloqué... j'ai peut être juste pas eu de chance remarque , je sais pas.

Sleepy => oui c'est possible de déplacer les widgets , mais c'est quelqu'un qui maitrise mieux le HTML que moi qui va l'expliquer.

Max => si tu parles des Gif pour le dock , oui c'est une bonne idée.

Mav => tu veux que ej t'envois quoi ?

Hors ligne

#14 07-04-2009 11:05:02

Anonyme
Compte Supprimé

Re : [TuTo]Les WIdgets.

Fongn => T'es sur de toi ? , parce que mes GIF faisaient quelques Ko chacun et mon touch s'est complètement bloqué... j'ai peut être juste pas eu de chance remarque , je sais pas.

Pas sur, mais c'est vrai en théorie !

#15 07-04-2009 12:28:24

Sleepy
Membre

Re : [TuTo]Les WIdgets.

Pourquoi tu veux le changer ? Il est pas bien ? ^^

Et est-ce qu'on peut enlever la barre en dessous de la status bar (celle avec l'arrondi au milieu) pour le widget météo ?

img0043v.png

Dernière modification par Sleepy (07-04-2009 12:35:27)


iPod Touch V2 8Go 3.1.2 Jailbroken
iPod Nano V2 2Go donné à la soeurette

Si vous avez besoin de quelque chose, appelez-moi. Je vous dirai comment vous en passer.

Hors ligne

#16 07-04-2009 12:40:46

Sleepy
Membre

Re : [TuTo]Les WIdgets.

Bon sang mais c'est bien sur tongue


iPod Touch V2 8Go 3.1.2 Jailbroken
iPod Nano V2 2Go donné à la soeurette

Si vous avez besoin de quelque chose, appelez-moi. Je vous dirai comment vous en passer.

Hors ligne

#17 07-04-2009 13:04:38

Anonyme
Compte Supprimé

Re : [TuTo]Les WIdgets.

Bon, je fais un truc pour Mav mais je suis coincé :
Commetn basculer le résultat d'un code javascript en 90°, pour le voir en Paysage ?
Ya t'il une commande que je ne connais pas ?
Sinon, je suis coincé Mav !

EDIT: J'avance bien dans mon LockScreen, je vous poste ca cet aprem si j'ai fini !

Dernière modification par Anonyme (07-04-2009 13:31:17)

#18 07-04-2009 14:43:45

Anonyme
Compte Supprimé

Re : [TuTo]Les WIdgets.

Bravo Minuu  tongue !!

#19 07-04-2009 14:57:00

minupinu17
RS Power !

Re : [TuTo]Les WIdgets.

mail envoyé mav

M2o a écrit :

Bravo Minuu  tongue !!

mici smile

Hors ligne

#20 07-04-2009 16:04:05

minupinu17
RS Power !

Re : [TuTo]Les WIdgets.

très sympa

Hors ligne

#21 07-04-2009 16:17:28

maxbordeaux
Membre

Re : [TuTo]Les WIdgets.

oulà sympa oui mais sa bug ou ?


iPhone 3GS 32go 3.1.2 jailbreak Iphone 3Gs 16go 3.0.1 jailbreak /Psp custom  5.50,Wii flash 4.1/preloader 0.30, Xbox 360 flash 1.61 PC:Intel Q9550  2.83GHz,Hd4850, Seven Ultimate

Hors ligne

#22 07-04-2009 16:24:20

maxbordeaux
Membre

Re : [TuTo]Les WIdgets.

post mis a jour pour mon lock


Euh sa bug ou ?
envoi le moi sinon je regarde

Dernière modification par maxbordeaux (07-04-2009 16:24:59)


iPhone 3GS 32go 3.1.2 jailbreak Iphone 3Gs 16go 3.0.1 jailbreak /Psp custom  5.50,Wii flash 4.1/preloader 0.30, Xbox 360 flash 1.61 PC:Intel Q9550  2.83GHz,Hd4850, Seven Ultimate

Hors ligne

#23 07-04-2009 16:36:09

Anonyme
Compte Supprimé

Re : [TuTo]Les WIdgets.

Bah tkt, je m'en occupe, c'est l'ipod qui prend pas mon html je pense !

#24 07-04-2009 19:03:33

Oxymor
Membre

Re : [TuTo]Les WIdgets.

Merci Minu pour ce tuto, c'est vraiment beaucoup plus clair ainsi !

Maxbordeaux, j'ai installé ton widget de LockScreen, nikel, mais quelques petites questions:
- Le format de l'heure est en 12h, que dois-je changer et dans quel fichier ?
- Les infos météo sont en anglais...même question ? wink

Merci d'avance !

Edit: Question subsidiaire, elle est sympa ta police, elle est dispo avec Fontswap ? (je me méfie de cette app, car j'ai déjà eu de gros souci avec les fonts system...)


Aussi, bien que l'image proposé pour le Lockscreen soit superbe (je la garde) j'ai voulu changer pour en mettre une à moi, mais sans succés. J'ai regardé le fichier ConfigureMe.js, j'ai mis "enabled wallpaper" sur True, mais celà ne semble pas fonctionner... hmm

Dernière modification par Oxymor (07-04-2009 19:32:22)

Hors ligne

#25 07-04-2009 19:34:55

jujucool290
Jujucool290

Re : [TuTo]Les WIdgets.

pas très lisible je trouve hmm

Hors ligne

Pied de page des forums