Σύνταξη azaleea
Διορθώσεις/συμπληρωματικά στοιχεία rromeodim
Ευχαριστώ πολύ τον rromeodim για τις άπειρες συμβουλές του, σε όλα τα θέματα και τα επίπεδα (όχι μόνο στις Lockscreen) και για την ασταμάτητη βοήθειά του
χωρίς τη συμμετοχή του, το κείμενο αυτό δεν θα υπήρχε 
Το κείμενο που ακολουθεί είναι γνήσιο, δεν έχει γίνει αντιγραφή από πουθενά
Είναι οι γνώσεις που αποκτήσαμε ασχολούμενοι με τα θέματα που τόσο πολύ μας αρέσουν
Σας το προσφέρουμε για να διευρύνετε και εσείς τις γνώσεις σας και την οικειότητα σας στην επεξεργασία των θεμάτων
Αν θελήσετε να το μεταφέρετε αλλού, υπολογίστε τον κόπο μας και απλά δώστε τα ανάλογα credits 
Επειδή μπορούν να υπάρχουν αρκετές ερωτήσεις, ας δούμε πως μπορούμε να διαμορφώσουμε τη Lockscreen μας, σύμφωνα με τις επιθυμίες μας και τις απαιτήσεις μας
Η ανάλυση γίνεται για την 5.0.1, για τις 4.x.x ορισμένες ονομασίες είναι διαφορετικές
Οι Lockscreen οπτικά αποτελούνται από διάφορα μέρη:
ρολόι, πρόγνωση καιρού (εικονίδια, περιγραφή, θερμοκρασίες, επόμενες μέρες), εικονίδιο ξεκλειδώματος, εικονίδια της StatusBar και φόντο. Μπορεί να υπάρχουν όλα τα προαναφερθέντα ή μερικά.
Ως θέματα, οφείλουν να έχουν κάποια αρχεία που ορίζουν τις λειτουργίες τους.
Βασικό αρχείο: html
Πάντα έχουμε ένα αρχείο html το οποίο καθορίζει όλες τις υπόλοιπες παραμέτρους. Οι παράμετροι αυτές μπορεί να ορίζονται ή μέσα στο ίδιο το html ή να υπάρχουν σε άλλους φακέλους του θέματος στους οποίους παραπέμπει το αρχείο html, πχ. για τον καιρό να υπάρχει ο φάκελος weather όποτε θα δούμε μέσα στο html σε κάποια γραμμή αυτό:
<!-- Direct the script to the general folder where the weather icons are located --> <base href="Weather/"/>
Σημαντική σημείωση:
ΠΡΟΣΕΧΟΥΜΕ ΕΞΑΙΡΕΤΙΚΑ: ΤΙΣ ΟΝΟΜΑΣΙΕΣ ΤΩΝ ΕΙΚΟΝΙΔΙΩΝ, ΤΩΝ ΦΑΚΕΛΩΝ και των ΑΡΧΕΙΩΝ. ΤΑ ΠΑΝΤΑ ΕΙΝΑΙ CASE SENSITIVE οπότε προσοχή λοιπόν στα κεφαλαία και τα μικρά.
ΜΕΣΑ ΣΤΟΝ ΚΩΔΙΚΑ ΠΟΥ ΘΑ ΔΟΥΜΕ ΑΡΓΟΤΕΡΑ ΠΡΟΣΕΧΟΥΜΕ ΤΑ ΟΝΟΜΑΤΑ, ΤΑ ΚΟΜΑΤΑ [;], ΤΑ ΚΕΝΑ [ ], ΤΙΣ ΑΝΩ ΚΑΤΩ ΤΕΛΕΙΕΣ [:]
Ας ξεκινήσουμε από τα πιο απλά
LockBackground.png ή Layer.png ή όποιο άλλο όνομα έχει ορίσει ο δημιουργός του θέματος.
Με μέγεθος 640x960px (για τα retina τηλέφωνα κ ipod) είναι μια εικόνα, το φόντο μας
Για τα 3G και 3Gs 320x480px
*Σημείωση για τους χρήστες με 3G και 3Gs, στις παρακάτω περιγραφές, υπολογίστε τις μισές διαστάσεις, δηλ εικονίδιο 40x40px για εσάς πρέπει να είναι 20x20px. Επίσης στις αναφερόμενες ονομασίες αφαιρέστε το @2x (παράδειγμα: Translucent_Base@2x.png -> Translucent_Base.png)
Το όνομα του Wallpaper που στολίζει το θέμα της Lockscreen θα το δούμε έτσι μέσα στο html:
<div id="background"> <img src="LockBackground.png" width="320" height="480" id="UserWall"/> </div> <div id="Layer"><img src="OverlayHD.png" class="stretch"/></img></div>
Εδώ δηλ βλέπουμε ότι το html «ορίζει» σαν background την εικόνα με όνομα LockBackground.png. Θα μπορούσε να λέει οποιοδήποτε όνομα πχ Layer.png ή SBNG.png κλπ κλπ
Επομένως μέσα στο φάκελο του θέματος παρέα με το html υποχρεωτικά υπάρχει και ένα wallpaper με όνομα LockBackground.png γιατί έτσι ορίζεται όπως είδαμε στο παράδειγμα μας από το html.
Αν δεν υπάρχει εικόνα με τέτοιο όνομα για κάποιο λόγο τότε αυτό που θα βλέπουμε εμείς μόλις εγκαταστήσουμε το θέμα θα είναι ένα μαύρο background και ένα ερωτηματικό στη μέση.
Αναφέρω το ερωτηματικό εδώ γιατί πολλοί ερωτάνε ότι βλέπουν ένα τέτοιο σύμβολο. Αυτό λοιπόν σημαίνει ότι λείπει αυτό στο όποιο παραπέμπει η εντολή του html.
Αν εμείς θέλοντας να αλλάξουμε εικόνα βάλουμε μια στη θέση του LockBackground.png και την ονομάσουμε πάνω στη βιασύνη μας Lockbackground.png τότε θα έχουμε ερωτηματικό γιατί το όνομα που δώσαμε δεν είναι ίδιο με το αρχικό (το B το γράψαμε με μικρό b)
Άρα όταν θέλουμε να αλλάξουμε background το μόνο που έχουμε να κάνουμε είναι να βάλουμε την εικόνα της αρεσκείας μας στη θέση της ήδη υπάρχουσας διατηρώντας πάντα το όνομα ακριβώς ίδιο.
Φάκελος UIImages (xxxx.Theme/UIImages)
Μερικές φορές, όχι πάντα, τον συναντάμε μέσα στα θέματα για lockscreen. Αποτελεί όμως βασικό φάκελο για τα κύρια θέματα.
Μέσα στον φάκελο αυτόν συναντάμε τα εικονίδια για : signal, wifi, ποσοστό μπαταρίας κ εικονίδιο μπαταρίας και πολλά πολλά άλλα.
Εδώ συναντάμε και το εικονίδιο που είναι υπεύθυνο για το φόντο της statusbar. Το εικονίδιο που είναι υπεύθυνο για το φόντο της StatusBar λέγεται Translucent_Base@2x.png, και είναι με μέγεθος 640x40px σ αυτό το εικονίδιο μπορούμε να δώσουμε ότι χρώμα θέλουμε έως και διάφανο (transparent)
Ας τα δούμε ένα ένα:
(είναι πολλές ονομασίες γιατί σε κάθε εικονίδιο η ονομασία ξεκινάει υποχρεωτικά με:
ColorOnGrayShadow_
WhiteOnBlackShadow_
WhiteOnBlackEtch_
Ενώ πριν την 5 ήταν με Black και Silver η αρχή του ονόματος)
Carrier signals: Μέγεθος 40x40px (φάκελος παράδειγμα)
ColorOnGrayShadow_0_Bars@2x.png, WhiteOnBlackShadow_0_Bars@2x.png, WhiteOnBlackEtch_0_Bars@2x.png με διαβάθμιση από 0 ως 5 και στις τρεις κατηγορίες
WiFi signals: Μέγεθος 40x40px (φάκελος παράδειγμα)
ColorOnGrayShadow_0_Bars@2x.png, WhiteOnBlackShadow_0_Bars@2x.png, WhiteOnBlackEtch_0_Bars@2x.png με διαβάθμιση από 0 ως 3 και στις τρεις κατηγορίες
Μπαταρία: Μέγεθος 41x42px (φάκελος παράδειγμα)
WhiteOnBlackShadow_BatteryCharging@2x.png, WhiteOnBlackShadow_BatteryCharged@2x.png, WhiteOnBlackEtch_BatteryCharged@2x.png, WhiteOnBlackEtch_BatteryCharging@2x.png, ColorOnGrayShadow_BatteryCharged@2x.png, ColorOnGrayShadow_BatteryCharging@2x.png, WhiteOnBlackShadow_BatteryDrainingBG@2x.png, WhiteOnBlackEtch_BatteryDrainingBG@2x.png, ColorOnGrayShadow_BatteryDrainingBG@2x.png, WhiteOnBlackShadow_BatteryDrainingInsides@2x.png, WhiteOnBlackEtch_BatteryDrainingInsides@2x.png, ColorOnGrayShadow_BatteryDrainingInsides@2x.png, ColorOnGrayShadow_BatteryDrainingInsidesLow@2x.png, WhiteOnBlackEtch_BatteryDrainingInsidesLow@2x.png, WhiteOnBlackShadow_BatteryDrainingInsidesLow@2x.png
*Σημείωση: τα εικονίδια των φακέλων αυτών συνυπάρχουν κανονικά μέσα στον φάκελο, ο διαχωρισμός έγινε για την διευκόλυνση σας, ειδικά στις ονομασίες
**Σημείωση: με την έλευση του zeppelin, τα πράγματα έγιναν πάρα πολύ απλά στην ios 5, έτσι δεν πραγματευόμαστε εδώ τα εικονίδια συμβολισμού του carrier, παρ' όλο που τα βλέπουμε δίπλα δίπλα με τα προαναφερθέντα, εκτός αυτού η θέση του φακέλου τους ποτέ δεν βρίσκεται ανάμεσα στους φακέλους της Lockscreen
Φάκελος Bundles (xxxx.theme/Bundles) και υποφάκελος com.apple.TelephonyUI (xxxx.theme/Bundles/com.apple.TelephonyUI)
Ένας άλλος φάκελος που συναντάμε συχνότατα μέσα σε θέμα για Lockscreen είναι και ο φάκελος Bundles ο οποίος είναι ο βασικότερος φάκελος για ένα κανονικό θέμα που αλλάζει εικονίδια κλπ γιατί απλά περιέχει μέσα σε υποφακέλους όλα τα εικονίδια με τη μορφή την ιδιαίτερη του κάθε θέματος.
Τώρα θα μου πείτε τι δουλειά έχει αυτός ο φάκελος σε ένα θέμα που ασχολείται με lockscreen.
Eχει σχέση γιατί στον φάκελο Bundles θα βρούμε μέσα ένα υποφάκελο με όνομα com.apple.TelephonyUI ο οποίος είναι ο υπεύθυνος φάκελος για τη Slider της lockscreen.
Άρα όταν κάποιος φτιάχνει ένα θέμα για lockscreen θέλει να έχει και τη δικιά του slider και έτσι προσθέτει στο θέμα του και τον αντίστοιχο φάκελο που είπαμε έχει όνομα com.apple.TelephonyUI και βρίσκεται πάντα μέσα στον φάκελο Bundles.
Aν δεν υπάρχει τέτοιος φάκελος στο θέμα για τη lockscreen τότε η Winterboard θα διαβάζει τον αμέσως επόμενο ίδιο φάκελο που θα βρει δηλ λογικά αυτόν του κυρίως θέματος αφού το θέμα πάντα έχει δικιά του slider.
Ονομασίες:
Κουμπί ξεκλειδώματος:bottombarknobgray@2x.png, bottombarknobgreen@2x.png, bottombarknobred@2x.png
Πλαίσιο κίνησης ξεκλειδώματος: WellLock@2x.png, BarBottomLock@2x.png
Εδώ να επισημάνω ότι καλό είναι όταν θέλουμε να αλλάξουμε το κουμπάκι που σέρνουμε να πειράζουμε μόνο το κατάλληλο εικονίδιο διατηρώντας τις διαστάσεις ακριβώς ίδιες και απλά προσθέτουμε μια εικόνα η ότι άλλο μας αρέσει.
Το να πειραματιζόμαστε με αυτό δεν είναι κακό και ούτε παθαίνει τίποτα το τηλ. Απλά κρατάμε ένα backup του κάθε εικονιδίου που πειράζουμε αν θέλουμε να επαναφέρουμε τη slider την αρχική. Πάντως σε γενικές γραμμές δεν φοβόμαστε να παίξουμε με αυτά τα αρχεία.
Φάκελος Weather (xxxx.theme/weather)
Είναι ο φάκελος με τα εικονίδια καιρού, μπορεί να συναντήσουμε και υποφάκελο με ονομασία IconSets ή/και stardock (τους υποφακέλους αυτούς μπορούμε να τους συναντήσουμε και στον φάκελο Private)
Γιατί ορισμένα εικονίδια καιρού είναι με αριθμούς και ορισμένα με περιγραφές;
Εξαρτάται από το html, από που ορίζει να παίρνει πληροφορίες καιρού, το yahoo απαιτεί αρίθμηση ενώ το accuweather περιγραφή
Όποια σετ εικονιδίων κι αν σας αρέσουν, μπορείτε να τα χρησιμοποιήσετε, αρκεί να τα μετονομάσετε σωστά
Μερικές φορές μπορεί να βρούμε και δυο φακέλους με iconsets, όταν χρησιμοποιούνται διαφορετικά εικονίδια για την τρέχουσα μέρα και για τις επόμενες
Αρχείο LockBackground.html
Εδώ δίνονται όλες οι βασικές οδηγίες του θέματος μας, το κείμενο αυτό χωρίζεται σε δύο βασικούς τομείς, αν το επεξεργαστείτε με notepad++ θα δείτε τον πρώτο τομέα ως λευκό και με αρχή .date, .month κοκ, είναι ο τομέας του στυλ και τον δεύτερο τομέα, ως γαλάζιο, είναι το κομμάτι των λειτουργιών, εδώ θα παρατηρήσετε πως αλλάζει η μορφή και οι εντολές αρχίζουν με <
ας πάρουμε για παράδειγμα μια σχετικά εύκολη αλλά όχι τελείως απλή
Ρολόι και καιρός σημερινής μέρας
Ας πάρουμε για οδηγό τη UpSide Right
ακόμη δεν την βάλαμε, άρχισαν τα προβλήματα...
δεν έχω καιρό, γιατί
Ανοίγω το LockBackground.html (κατά προτίμηση με notepad++ (μπορώ και με ifile μέσα από το τηλέφωνο μου, αλλά καλό είναι να το αποφεύγουμε)
και ψάχνω για τον καιρό (ctrl+F) "var locale"
βρίσκω να λέει
<!-- Change weather code below --!> var locale = "XXXXXXX"
edit λοιπόν "GRXX0004" (Αθήνα)
* πως βρίσκω τον κωδικό της πόλης μου ;
πηγαίνω στο weather.yahoo.com και όταν ζητήσω extended forecast (μέσα στο παραθυράκι πρόγνωσης) με ανακατευθύνει σε νέα σελίδα του yahoo, πάνω στο url banner βλέπω τον κωδικό μου
σημείωση, αν δεν δουλέψει ο τύπος GRXXxxxx, τότε από την σελίδα που βρέθηκα στην πόλη μου (πχ για Αθήνα 946738, επίσης πάνω από το url banner) χρησιμοποιώ τον κωδικό εκείνο
τι κατάφερα;
ωραία έχω καιρό, αλλά 41 βαθμούς ; αδύνατο!
άρα η μέτρηση είναι σε Φαρενάιτ
* Αλλαγή μέτρησης από Φαρενάιτ σε Κελσίους
αμέσως κάτω από την τοποθεσία μου ο κώδικας γραφεί
<!-- Swicth to Celsius by changing "false" to "true" below --!> var isCelsius = false
αλλάζω το false σε true
ωραία, έγινε και αυτό, τώρα τα γράμματα του ρολογιού μου φαίνονται λίγο μεγάλα, θέλω να τα μικρύνω
ψάχνω στην αρχή του κώδικα και βλέπω
SPAN#clock {
font-family: Heiti TC;
font-weight:bold;
color: #ffffff;
text-shadow: 0px 0px 8px #fff;
font-size: 40px;
text-align: left;
opacity: 0.9;
font family: η γραμματοσειρά που χρησιμοποιείται
font weight: είναι bold αν μου φαίνονται "χοντρά" μπορώ να τα κάνω normal, αν θέλω παραπάνω επιλογές τότε ορίζω τιμή από 100 (normal) ως 900 (bold)
color #ffffff (απόλυτο λευκό) εδώ μπορώ να αλλάξω το χρώμα σε ότι χρώμα θέλω, φτάνει να ξέρω το όνομα του, για να βρω τις κωδικες ονομασιες των χρωματων παω εδω
αν θέλω να τα αλλάξω, πχ σε κόκκινα τότε γράφω red (και μου δίνει το βασικό κόκκινο) ή αν θέλω απόχρωση τότε βάζω τον κωδικό της πχ #dd1818
text-shadow η «λάμψη» που μπορεί να βγαίνει από κάποιο κείμενο (δεν έχουν όλα), εδώ είναι υπόλευκη, δεν μου αρέσει, θα την αποκρύψω
προσθέτω λοιπόν δυο slashes* μπροστά και γίνεται //text-shadow: 0px 0px 8px #fff;
* όταν θέλω να απενεργοποιήσω μια λειτουργία ή μια εμφάνιση στο στυλ (λευκός τομέας), μπορώ να βάλω τα δυο slashes, αντίστροφα, όταν βλέπω 2 slashes μέσα στον κώδικα, τότε σημαίνει πως το συγκεκριμένο τμήμα αγνοείται, αν θέλω να το ενεργοποιήσω, τα αφαιρώ.
font-size: 40px το αλλάζω σε 20px
text-align: left στοίχιση αριστερά
opacity: 0.9 η διαφάνεια κινείται μεταξύ των τιμών 0.0 (διάφανη) και 1 απόλυτη εμφάνιση, ένας άλλος τρόπος λοιπόν για να κρύψετε κάτι, είναι ν αλλάξετε σ αυτή την ομάδα την διαφάνεια (0.0)
η λειτουργία είναι ενεργή, αλλά δεν είναι ορατή
βλέπω ότι πήγαν λίγο ψηλά... θα το διορθώσω
με τον παραπάνω τρόπο, αλλάζω και τα υπόλοιπα
σημειώστε τις έννοιες
clock = ρολόι
ampm = πμ, μμ
vdate = ημερομηνία (13.3.2012)
vmonth = ο μηνάς (13.3.2012)
vyear = ο χρόνος
παρακάτω, σχετικά με τον καιρό
city = κείμενο της πόλης μας (πως θα εμφανίζεται)
temp = θερμοκρασία (μπορεί να δούμε και hi/low: υψηλότερη, χαμηλότερη)
desc = περιγραφή καιρού (snow, sunny κτλ)
σημείωση: αν αποφασίσετε ότι θέλετε να αποκρύψετε κάποια πληροφορία, τότε στο τέλος της συγκεκριμένης "παραγράφου" προσθέτετε την εντολή display: none; , η συγκεκριμένη πληροφορία θα αποκρυφτεί (μην αμελήσετε το κόμα), πχ
#temp{
position: absolute;top: 380px; left: 218px; width: 90px; height: 481px;
text-align: center;
font-family: Helvetica;
font-size: 19px;
font-weight: 900;
color: #f57001;
text-shadow: 1px 1px 1px #000;
text-transform: uppercase;
display: none;
προσθέτοντας την εντολή στο τέλος θα κρυφτεί η θερμοκρασία. Αν θέλουμε να την εμφανίσουμε πάλι ή σβήνουμε το «display: none;» ή προσθέτουμε «//» δηλ το κάνουμε έτσι “//display: none;”
weatherIcon = το εικονίδιο καιρού μας (για σήμερα)
position: absolute; top: 390px; right: 0px; down: 0px; left: 15px; width: 115px; height: 461px; height:50; width:50; display: absolute;
το height & width ορίζουν το μέγεθος, τα μεταβάλετε όμοια (αφού συνήθως τα εικονίδια καιρού είναι τετράγωνα) με μεγαλύτερες τιμές για να τα μεγαλώσετε και με μικρότερες για να τα μικρύνετε
επίσης για πρώτη φορά συναντούμε θέση εικονιδίου, από την κορυφή 390 px, από αριστερά 15px
θα το μεταφέρω κάτω από το ρολόι, αλλάζω το ύψος σε 40px (θα διορθώσω το επανώτισμα με το AM, σε λίγο όπως και τη θερμοκρασία που έμεινε εκεί κάτω μόνη της)
συνεχίζω στον κώδικα και πλέον μπαίνω στις ουσιαστικές λειτουργίες
εδώ αλλάζω τον τρόπο εμφάνισης των ωρών και των λεπτών μαζί
<!-- Compose the string for display--> var currentTimeString = currentHours + ":" + currentMinutes;παρατηρήστε τα : στη μέση, μπορείτε να τα αλλάξετε ή να τα διαγράψετε
εδώ μπορώ να προσαρμόσω τον τρόπο γραφής της ημερομηνίας, της μέρας και του μήνα
function calendarDate ( )
{
var this_date_name_array = new Array ("00", "01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27" ,"28", "29" ,"30", "31")
var this_weekday_name_array = new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday")
var this_month_name_array = new Array("January","February","March","April","May","Jun","July","August","September","October","November","December")φτάνουμε στο τέλος
η θέση του ρολογιού μου
<table style="position: absolute; top: 25px; left: 15px; width: 320x; height: 461px; z-index: 14;">
<tr align="center" valign="top" border="0" cellpadding="0">
<td height="0" valign="top" margin-left="0">
<span id="clock">
<script language="JavaScript">updateClock(); setInterval('updateClock()', 1000 )</script>
</span>
</td>
</tr>
</table>θα το μεταφέρω αριστερά μαζί με την ημερομηνία, χωρίς αλλαγή στο ύψος, left: 265pxπμ, μμ
<table style="position: absolute; top: 70px; left: -10px; width: 150px; height: 461px;">
<tr align="center" valign="top" border="0" cellpadding="0">
<td height="12" valign="top" margin-left="20" >
<span id="ampm">
<script language="JavaScript">amPm(); setInterval('amPm()', 1000 )</script>
</span>
</td>
</tr>
</table>μετακίνηση top: 50px; left: 215px;
Lock.css
Όλα αυτά που αναφέρω στο τέλος με τις μεταφορές και αλλαγές εικονιδίων καιρού, θερμοκρασίας, ώρας κλπ μπορεί να τα βρούμε και σε ένα αρχείο με όνομα Lock.css ή και αλλιώς αλλά πάντα .css.
Αυτό θα το βρούμε μέσα σε κάποιο φάκελο μέσα χωμένο οπότε αν τους ανοίξουμε όλους θα το εντοπίσουμε αν και το html θα παραπέμπει σε αυτό το αρχείο προκειμένου να διαβάσει τα στοιχεία…
<link rel="stylesheet" href="Resources/Css/Lock.css" type="text/css" media="screen" />
Δηλ εδώ το html μας λέει ότι αν θες να πειράξεις τις θέσεις των στοιχείων της lockscreen θα πας να βρεις το .css αρχείο στη διαδρομή Resources/Css/Lock.css όπου Resources προφανώς είναι φάκελος μέσα στο θέμα μας.
Τα αρχεία .html και .css και .js μπορούμε χωρίς φόβο και πάθος να τους αλλάζουμε τα φώτα γιατί μόνο έτσι θα μάθουμε …με μια προϋπόθεση. Όλα τα πειράματα μας να τα κάνουμε πάνω σε αντίγραφο του widget ώστε αν αυτό που φτιάξαμε δεν μας ικανοποιεί να πετάμε μέσα στο τηλ πάλι το original και ούτε γάτα ούτε ζημιά.
Καλή επιτυχία.
