Wazaaa

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:

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:

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:

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:

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:

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:

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:


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:


Laatste versie:


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.

1
2
3
4
5

<div id="uur"></div>
        <div id="center"></div>
        <div id="min"></div><div id="datum"></div>
        
        <script type="text/javascript">klok();</script>

1
2
3
4
5
6
7

#center { 
    width: 3px; 
    height: 200px; 
    position: absolute; 
    left: 120px; 
    background-color: #FFF; 
}