Widget #1

Door Toppertje op maandag 17 oktober 2011 21:14 - Reacties (16)
Categorie: -, Views: 3.134

Mijn eerste blog, gelijk maar een (min of meer ;)) inhoudelijke post... Sinds kort ben ik namelijk begonnen met het programmeren van een Widget voor mijn telefoon: een Samsung Wave S8500.

Theorie:
Programmeren doe ik al wat langer, met name voor school, in meerdere talen, waaronder:
C, C++, Pascal en Siemens S7.

Maar nu ik inmiddels al een jaar niet meer op school zit deed ik eigenlijk niks meer met programmeren, tot ongeveer een maandje terug. Het leek me leuk om een widget voor mijn telefoon te maken, echter bleek dit lastiger dan gedacht. HTML, javascript en CSS moeten namelijk gecombineerd worden om alles goed te laten verlopen, maar geen van deze talen kende ik goed.

Toch ben ik eraan begonnen, en wat ik begin, wil ik ook graag afmaken... Anders had ik er net zo goed niet aan hoeven beginnen ;).

Uitvoering:
Als eerst had ik een programma nodig, na wat zoeken bleek dit programma benodigd: Eclipse Helios.

Dit gedownload en geÔnstalleerd en vervolgens Samsung's eigen widget creator erbij in geÔnstalleerd.

Tijd om te beginnen, maarja... waar? Na wat zoekwerk bleek het maken van een widget op deze manier erg te lijken op het maken van een website, daarover zijn er genoeg tutorials te vinden, die maar eens lezen dan... Een hoop leesvoer later dan toch maar beginnen met het daadwerkelijke programmeren.

Eerst heb ik op de volgende manier de verschillende programmeertalen met elkaar gelinkt:

HTML:
1
2
3
4
<head>
    <link rel="stylesheet" type="text/css" href="./css/main.css" />
    <script type="text/javascript" src="./js/main.js"></script> 
</head>


Documenten linken.

Dat was simpel, gewoon kopiŽren en plakken van internet en de bestandsnamen wijzigen... maar zo simpel blijft het natuurlijk niet.

Nu ben in Javascript eerst een 'opmaak-loze' klok gaan programmeren, dit is (achteraf) redelijk simpel:

JavaScript:
1
2
3
4
5
6
7
8
9
10
function klok(){
    tijd = new Date();
        
    document.getElementById('uur').innerHTML = TweeDigits(tijd.getHours());
    document.getElementById('min').innerHTML = TweeDigits(tijd.getMinutes());
        
    
    document.getElementById('datum').innerHTML = (dagNaam[tijd.getDay()])+", "
        +tijd.getDate()+" "+(maandNaam[tijd.getMonth()]);
}


Volledige functie inclusief datum.

Dit was leuk, maar ik wou graag de notatie van uren en minuten altijd met 2 digits laten tonen, dus nog een functie erbij:

JavaScript:
1
2
3
function TweeDigits(digit){
    return digit<10 ? "0"+digit : digit;
}


Functie voor twee digits.

Kijk, nu lijkt het al ingewikkelder... okť, ietsje dan. Wat er in deze functie gebeurd is het volgende: er wordt gecontroleerd of het getal lager is dan 10, want alleen getallen lager dan 10 hebben maar 1 digit. om vervolgens een 0 voor die ene digit te zetten.

Mooi, de klok staat, datum erachter, maar.... hij loopt niet. Maar daar is een oplossing voor, elke seconde updaten dan maar? Tja:

JavaScript:
1
setInterval(klok, 1000);


Kan ook 60000 zijn, dan ontstaat er een interval van een minuut.

De maanden in het jaar, en de dagen in de week heb ik hierna in een array gezet zodat deze makkelijk op te halen zijn:

JavaScript:
1
2
var maandNaam = new Array("Jan", "Feb", "Mar", "Apr", "Mei", "Jun", "Jul", "Aug", "Sep", "Okt", "Nov", "Dec");
var dagNaam = new Array("Zo", "Ma", "Di", "Wo", "Do", "Vr", "Za");


De datumnotatie staat nu ook wat netter.

De klok werkt nu prima, alleen is hij nog wat kaal, hier kwam CSS binnen, voor mij totaal onbekend, maar leek vrij snel redelijk simpel, in HTML had ik al wat Div'jes gemaakt waar de uren, minuten, datum en scheidingslijn in komen:

HTML:
1
2
3
4
5
6
7
8
9
10
<body>
    <table>
        <tr>
        <td width="110" height="200"><div id="uur"></div></td>
        <td width="1" bgcolor="#FFF"> </td>
        <td width="100"><div id="min"></div><div id="datum"></div></td>
        </tr>
        </table>
        <script type="text/javascript">klok();</script>
    </body>


Met behulp van een tabel alles gepositioneerd.

Na een willekeurig lettertype uit te hebben gezocht heb ik redelijk snel een opmaak in elkaar kunnen steken:

Cascading Stylesheet:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
@font-face {
    font-family: 'AGENCYR';
    src: url('../fonts/AGENCYR.ttf') format('truetype');}

body{
font-family: 'AGENCYR';
color: #fff;}

#uur{
    position: absolute;
    left: 0px;
    top: 0px;
        
    font-size: 150px;}

#min{
    position: absolute;
    left: 150px;
    top: 0px;
    
    font-size: 150px;}

#datum{
    position: absolute;
    left: 155px;
    top: 160px;
    
    font-size: 25px;}



Uiteraard zijn Tips, eventuele verbeteringen en opbouwende kritiek welkom!!

UPDATE:
Zonet heb ik een aantel redelijke veranderingen aan de code gedaan, hier een lijstje:
- Code in het engels.
- Gebruik van Tables is eruit.

Maar ook veranderingen aan het visuele gedeelte:
- Datum wordt wat groter weergegeven.
- Icon gemaakt:
http://img841.imageshack.us/img841/6189/widget1.png

Laatste versie:
http://img412.imageshack.us/img412/8840/naamloosnco.png

Download (laatste versie): Klik hier!

Vooruitblik volgende blog:
Toch wil ik wat meer functionaliteit in de klok hebben, hier alvast een paar dingen:
- Internationale versie.
- Klikken op de klok > kleurverandering.