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.

Volgende: Widget #1, jQuery. 11-'11 Widget #1, jQuery.

Reacties


Door Tweakers user bdalenoord, maandag 17 oktober 2011 21:53

Ziet er goed uit... is wel een stijl van widgets die mij bevalt, grote tekst zonder overdreven opvallende opmaak...

Ik zag je topic op GoT... Hopelijk wat van geleerd (ik wel namelijk :D) zodat je in het vervolg weer aan wat moeilijkers kan werken!

Overigens wel jammer van de tables in je widget... kan dit niet anders op een Bada-phone?

[Reactie gewijzigd op maandag 17 oktober 2011 21:54]


Door Tweakers user YopY, maandag 17 oktober 2011 22:11

Ik dacht 'Goh, d'r moet vast wel een betere manier zijn om zeropadding te doen in JS, met een sprintfje moet het toch zo klaar zijn?', maar ik had het fout, jouw oplossing is best wel kort als je naar deze alternatieven kijkt :+.

Door Tweakers user Toppertje, maandag 17 oktober 2011 22:14

bdalenoord schreef op maandag 17 oktober 2011 @ 21:53:
Ziet er goed uit... is wel een stijl van widgets die mij bevalt, grote tekst zonder overdreven opvallende opmaak...

Ik zag je topic op GoT... Hopelijk wat van geleerd (ik wel namelijk :D) zodat je in het vervolg weer aan wat moeilijkers kan werken!

Overigens wel jammer van de tables in je widget... kan dit niet anders op een Bada-phone?
Thanks!

Met die tables zou inderdaad misschien wel anders kunnen, dit was voor mij op dit moment de makkelijkste manier ;).
YopY schreef op maandag 17 oktober 2011 @ 22:11:
Ik dacht 'Goh, d'r moet vast wel een betere manier zijn om zeropadding te doen in JS, met een sprintfje moet het toch zo klaar zijn?', maar ik had het fout, jouw oplossing is best wel kort als je naar deze alternatieven kijkt :+.
Daar komt nog bij dat die oplossing ook nog redelijk ingewikkeld is (op mijn huidige niveau) vergeleken met die van mij ;).

Door Tweakers user Sibert, maandag 17 oktober 2011 23:22

Siemens S7 is geen programmeertaal, maar is een reeks PLC's? LAD en STL daarintegen wel :P

[Reactie gewijzigd op maandag 17 oktober 2011 23:23]


Door Tweakers user Peetz0r, dinsdag 18 oktober 2011 00:09

<table> voor layout is fout, niet "minder goed", maar gewoon fout. Lees de specs maar ;)

Enneh, als je css gebruikt, waarom zie ik dan nog width en bgcolor in je html terug?

Het resultaat is zeker erg netjes, maar ik vind het jammer dat je op deze manier msibruik hebt gemaakt van html...

P.S. de widget werkt ook in Opera, maar je fonts doen het dan niet

Door Tweakers user RoadRunner84, dinsdag 18 oktober 2011 09:44

Hoe zit het met taalondersteuning? Kan je niet het date format en de afkortingen van de maanden ergens vandaan plukking .i.p.v. te hardcoden (en dus een NL only te hebben?)

Door Tweakers user kipusoep, dinsdag 18 oktober 2011 10:12

Iehl, code in het Nederlands :/ :X

Door Tweakers user BillsGate, dinsdag 18 oktober 2011 11:27

P.E.T.E.R. schreef op dinsdag 18 oktober 2011 @ 00:09:
<table> voor layout is fout, niet "minder goed", maar gewoon fout. Lees de specs maar ;)

Enneh, als je css gebruikt, waarom zie ik dan nog width en bgcolor in je html terug?

Het resultaat is zeker erg netjes, maar ik vind het jammer dat je op deze manier msibruik hebt gemaakt van html...

P.S. de widget werkt ook in Opera, maar je fonts doen het dan niet
Semantisch heb je helemaal gelijk. Sterker nog, op HTML/CSS-gebied kan ik nog wel meer verbeteringen opnoemen:
- Als je al TD's gebruikt, mogen de properties daarvan ook de CSS in
- Je gebruikt absoluut gepositioneerde divs, terwijl floatende divs met een text-align mijns inziens wat veiliger is.

Maar als je deze widget als leerproject ziet is Toppertje goed op weg!

Door Tweakers user bdalenoord, dinsdag 18 oktober 2011 12:21

Ik ben even vijf minuten bezig geweest je widget om te zetten naar een table-loze versie!

Vervang alles tussen je body voor het volgende:

code:
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>



En in je CSS dit even toevoegen:

code:
1
2
3
4
5
6
7
#center { 
    width: 3px; 
    height: 200px; 
    position: absolute; 
    left: 120px; 
    background-color: #FFF; 
}

[Reactie gewijzigd op dinsdag 18 oktober 2011 12:22]


Door Tweakers user Toppertje, dinsdag 18 oktober 2011 16:38

RoadRunner84 schreef op dinsdag 18 oktober 2011 @ 09:44:
Hoe zit het met taalondersteuning? Kan je niet het date format en de afkortingen van de maanden ergens vandaan plukking .i.p.v. te hardcoden (en dus een NL only te hebben?)
Voor mezelf wou ik hem Nederlands hebben, maar ik heb er wel naar gekeken omdat de rest van de wereld misschien wel engels wil hebben, helaas heb ik alleen de dagen van de week kunnen vinden met: time.toDateString(); voor de maanden helaas (nog) niks gevonden.
Is inmiddels in het engels ;).
BillsGate schreef op dinsdag 18 oktober 2011 @ 11:27:
[...]

Maar als je deze widget als leerproject ziet is Toppertje goed op weg!
Inderdaad een leerproject ;) Thanks!
bdalenoord schreef op dinsdag 18 oktober 2011 @ 12:21:
Ik ben even vijf minuten bezig geweest je widget om te zetten naar een table-loze versie!
...
Dankje! Zo kan het dus ook, weer wat geleerd ;).

[Reactie gewijzigd op dinsdag 18 oktober 2011 16:39]


Door Tweakers user bdalenoord, dinsdag 18 oktober 2011 18:30

Toppertje schreef op dinsdag 18 oktober 2011 @ 16:38:
[...]
Dankje! Zo kan het dus ook, weer wat geleerd ;).
Ik zie nu pas dat de twee widgets niet helemaal overeen komen, je eerdere streep tussen de uren en minuten is iets langer... dit kan je bereiken door een negatieve top-margin mee te geven aan #center en dan de height iets groter te maken... om het toch even goed te doen :D

Door Tweakers user Toppertje, dinsdag 18 oktober 2011 18:48

bdalenoord schreef op dinsdag 18 oktober 2011 @ 18:30:
[...]
Ik zie nu pas dat de twee widgets niet helemaal overeen komen, je eerdere streep tussen de uren en minuten is iets langer... dit kan je bereiken door een negatieve top-margin mee te geven aan #center en dan de height iets groter te maken... om het toch even goed te doen :D
Ah oke, wist niet dat dat ook kon ;).

De laatste versie blijft voorlopig qua lay-out zoals hij is. Ik wil nu gaan proberen om met behulp van klikken op de klok de kleur te wijzigen... daarover meer in mn volgende blog ;).

Door Tweakers user bdalenoord, woensdag 19 oktober 2011 10:59

Toppertje schreef op dinsdag 18 oktober 2011 @ 18:48:
[...]


Ah oke, wist niet dat dat ook kon ;).

De laatste versie blijft voorlopig qua lay-out zoals hij is. Ik wil nu gaan proberen om met behulp van klikken op de klok de kleur te wijzigen... daarover meer in mn volgende blog ;).
Dat is misschien met jQuery en een addclass het makkelijkst... Om even een paar steekwoorden voor google bekend te maken! :D Succes!

Door Helle, maandag 19 augustus 2013 09:29

Most suitable boyfnierd speeches, or else toasts. are almost always transported eventually through the entire wedding party and are nonetheless required to be really interesting, amusing and even enlightening together. very best man’s speech

Door life insurance quotes, donderdag 29 augustus 2013 13:26

you people may not believe at all but i can and will tell you that between heaven and earth are things beyond the reach of ordinary man and women.you people do not know what knowledge is and you would not gain any knowledge if its not by some devine revelation.is this the book of the devil maybe but it sure as hell is not for ordinary folks like you people to read, you could not handle it any one of you, before you open the book of the devil you better make sure your in a right pad with GOD Jehova.

Door life insurance quotes, donderdag 5 september 2013 16:04

Of the panoply of website I've pored over this has the most veracity.

Reageren is niet meer mogelijk