[Widget] Ontwikkelen van een widget (Mac only)

[tonyisgaaf]

@mods: Misschien moet dit ergens anders staan, maar ik dacht dat het ontwikkelen van widgets maar het beste in APL kon staan

Ik ben in het diepe gedoken van het programmeren van Dashboards (Mac only) Widgets, althans, ik heb alle info ervan opgezocht die ik denk nodig te hebben.

Ideeën
De eerste twee ideeën, ik ben met de eerste begonnen het voorwerk te verrichten:
- Webradio: alle Nederlands webstations te kiezen via één widget (zie hieronder meer)
- SMS: het versturen van een SMS via internet (liefst via eigen provider, zoals in mijn geval bijvoorbeeld Telfort)

SMS
De SMS widget is vrij ingewikkeld, aangezien hiervoor waarschijnlijk meerdere (totaal verschillende) implementaties moeten worden gemaakt voor de verschillende providers. Ik weet überhaupt niet of het mogelijk is, aangezien er gebruik wordt gemaakt van meerdere beveiligingen op de SMS-pagina's van in ieder geval Telfort.

Web radio
De Webradio widget bestaat reeds in meerdere vormen op de widget download pagina, maar ik heb vooral naar de BBC radio widget gekeken. Ik wil graag een Widget met alle Nederlands stations, bijvoorbeeld zoals te vinden op http://webradio.tagvof.nl/. De BBC radio Widget gebruikt alleen de Realplayer plugin, maar zoals je ziet op de laatstgenoemde pagina, worden in Nederland alle soorten plugins gebruikt.

Handige referenties
Even een paar referenties op een rij:
Een testpagina die ik heb gemaakt om te testen welke plugins je hebt geïnstalleerd.
Windows Media Player 9 for MacOSX properties references pagina
Realnetworks Production Guide PDF
Quicktime Internet & Web Documentation
Dashboard Documentation

Voor degenen die wel geïnteresseerd zijn in het maken van een widget: begin met het lezen van de Dashboard Tutorial en daarna de Dashboard Reference. Daarna pak je een widget die je leuk vindt, je pakt m uit en bekijkt de source (hoe dat werkt vind je ook in de Tutorial).

Vraag
Eigenlijk heb ik maar één concrete vraag: zijn er mensen die mee willen helpen in het ontwikkelen van widgets (en de radio widget specifiek)? Ik heb zelf én weinig ervaring met HTML en Javascript én natuurlijk (zoals iedereen hier) weinig tijd.
Ik heb echter wel uitgesproken ideeën over de GUI en de functionaliteit en ik heb ondertussen ook al een (groot) aantal problemen gevonden die opgelost moeten worden.
Als er positieve reacties zijn ga ik hier meer tijd insteken, dan zal ik ook dieper ingaan op het ontwerp van de bovengenoemde widgets.

Reacties
AUB géén widget-requests, het ontwikkelen van één widget is op dit moment (voor mij) al lastig genoeg.
AUB nog géén ideeën spuien over hoe bovengenoemde widgets zouden kúnnen worden gemaakt, dit komt na het inventariseren van de interesse wel.
Graag reacties op bovenstaande vraag, is er interesse in het samen ontwikkelen van widgets?

[Oxi]

Ik ben iig op korte termijn bezig met een weblog te maken en daar hoort natuurlijk een eigen widget bij. Ik heb de documentie al een keer doorgespit en het is best doable.

Er staat overigens bij dat het de bedoeling is het in XHTML 1.0 Strict te maken.

De grootste kunst is niet de widget zelf maken maar het gedeelte dat ook daadwerkelijk de data ophaalt en assimileert. Of in geval van een SMS-widget ook iets nuttigs stuurt.

[dawuss]

Ik heb zelf een widget gebouwd in xhtml + javascript. Dat is heel makkelijk.

Zodra je ook echt gebruik gaat maken met bindings richting cocoa en consorten weet ik niet in hoeverre je daar kennis van moet hebben. Er is echter voldoende documentatie over beschikbaar denk ik zo

[tonyisgaaf]

Ik durf ook niet te beweren dat het moeilijk is, ik heb nu een redelijk idee hoe ik mbv HTML, Javascript en CSS in ieder geval de user interface moet bouwen en de verschillende plugins moet laden. Daarna komt echter pas het probleem: het debuggen en optimaliseren van de code. Ik heb al een aantal fouten ontdekt in de eerder genoemde BBC radio widget die erg irritant zijn. Ook moeten de verschillende plugins op verschillende wijzen aangesproken worden. Daarnaast wil ik niet dat als er geen radio geluisterd wordt, de plugins in het geheugen blijven hangen. Allemaal dingen die ik nog moet oplossen.

@dawuss: wat heb je voor widget gemaakt? Zien zien !

[dawuss]

tonyisgaaf schreef op maandag 27 juni 2005 @ 00:10:
Ik durf ook niet te beweren dat het moeilijk is, ik heb nu een redelijk idee hoe ik mbv HTML, Javascript en CSS in ieder geval de user interface moet bouwen en de verschillende plugins moet laden. Daarna komt echter pas het probleem: het debuggen en optimaliseren van de code. Ik heb al een aantal fouten ontdekt in de eerder genoemde BBC radio widget die erg irritant zijn. Ook moeten de verschillende plugins op verschillende wijzen aangesproken worden. Daarnaast wil ik niet dat als er geen radio geluisterd wordt, de plugins in het geheugen blijven hangen. Allemaal dingen die ik nog moet oplossen.

@dawuss: wat heb je voor widget gemaakt? Zien zien !

Hij ligt momenteel een beetje in de kreukels, maar het was een widget die een agenda in RSS formaat parsede (van een vereniging).

Als ik 'm nog een keer fix zal ik hem wel uploaden

[Hydraulik-Phunk]

Er is al een (Nederlandse) SMS Widget, misschien een beetje overbodig dus ?
Maar een voor webstations is wel handig. (Kheb ideeen, maar ik hou ze maar voor me dan )

Volgens mij stond er een poosje terug het een en ander over Widgets ontwikkelen op macosx.nl, misschien dat je daar nog wat info vandaan kan plukken.

[tonyisgaaf]

Ik was me niet bewust van de Nederlandse SMS-widget, zou je daar een link van kunnen posten? Ben nl. benieuwd naar de implementatie.

Misschien is het toch wel handig om hier ook ruimte te geven voor ideeën, anders bloedt dit topic waarschijnlijk binnen no-time dood.

Mijn ideeën voor de webradio widget:
GUI:front
Controls:
- Play/Stop (geen pauze) met switch (dus op dezelfde plek)
- Previous station
- Next station (geen directe select, komt op de achterkant)
- Volume up/down (misschien optioneel, dit zou ook met het overal volume kunnen, maar het idee is om de widget ook nog een eigen volumecontrol te geven, als relatief volume dus)
- i-button (conform richtlijnen Apple voor het flippen)
Feedback:
- Statusdisplay (met bijv. stationsnaam)
- Volume (optioneel)

GUI:back
Controls:
- Drop-down list stations (voor directe select)
- Bandbreedte selector (optioneel, maar bijvoorbeeld smal<64 en breed>64)
- Done-button
Feedback:
- link naar ontwikkelsite/ online readme

Werkzaamheid:problemen
- Laden/ontladen plugins
- Bij niet luisteren CPU-usage 0% houden
- Volume-control: voor Windows Media Player heb ik dit al wel kunnen vinden, voor Quicktime en Realplayer niet (bij gebruik van de <EMBED> functie). Of bestaat er een widget.volume property? Want die heb ik ook niet kunnen vinden...

Apple-experience
De GUI moet in alle gevallen (dus verschillende type streams/ plugins) hetzelfde blijven, consistentie is dus belangrijk. Foutmeldingen van de plugins (bijvoorbeeld bronbestand niet gevonden) moeten afgevangen worden en in de statusdisplay getoond worden. Ik wil dus wel conform een 'Apple-experience' ontwerpen.

Maar eerst maar even de basics: een GUI, werkende plugins en een logo. Van het eerste en het laatste heb ik al een paar schetsjes gemaakt, van het tweede het ik een testpagina gemaakt. Ik heb echter zo direct een tentamen en donderdag ook nog één, dus het kan even wat stiller van mijn kant blijven. (Of juist niet, prima studieontwijkend gedrag dit).

[tonyisgaaf]

Gelijk maar even een vraag:
Als ik de SRC="url" & FILENAME="url" voor de Windows Media Player verneuk, zodat deze naar een niet bestaande link verwijst, krijg ik deze foutmelding (binnen seconde):


Als ik de SRC="url" & QTSOURCE="url" voor de Quicktime plugin vernaggel, zodat deze naar een niet bestaande link verwijst, krijg ik geen foutmelding, maar freezed het draaiende pijltje:


Als ik de SRC="url" voor de Realplayer plugin verkloot, zodat deze naar een niet bestaande link verwijst, krijg ik deze foutmelding in de statusbar en in het Activity-window:


Zijn dit events en hoe kan ik deze afvangen? Volgens mij eerste en laatste wel, maar QT zegt gewoon helemaal niets...

[The_DoubleU]

Een leuk idee. Heb me nog niet in widgets verdiept dus kan je niet helpen. Maar ff een suggestie voor de radio widget.
Maak het mogelijk dat ik ook radio stations toe voegen kan in de drop down list.
Je kan natuurlijk een leuk default lijstje samenstellen, maar het moet mogelijk zijn om het aan te passen.

[Hydraulik-Phunk]

http://www.apple.com/down...il_messaging/sendsms.html

See for yourself, is iig door een Nederlander ontwikkeld

[tonyisgaaf]

@The_DoubleU:
Het concept van de widgets is volgens mij juist dat de gebruiker geen invloed kan uitoefenen op de inhoud ervan, de inhoud kan dan aangepast worden aan de hand van updates van de widget. Misschien is het wel handig om de radiostations in een online xml file te zetten, zodat deze dynamisch ge-update kunnen worden, maar dat is nu allemaal even van later zorg.
De beste widgets (in mijn ogen) hebben zo weinig mogelijk opties en zijn geheel geoptimaliseerd voor één taak.
Dit is wat Apple erover zegt (terug te vinden in bovengenoemde Dashboard Tutorial 2005-06-04, pag23):

Design your widget to have a discrete functionality. It should require no explanation or configuration. Instead of creating a widget that does three things, try creating three widgets that do one thing each. This makes each task discrete and lets your users choose what is useful for them

@Hydraulik-Phunk:
Ik had ook al even gegoogled op "sms widget" en ook deze gevonden, wat ik alleen bedoel is dat je sms-t via je provider, bij telfort kun je via het web sms-en voor €0,06 per SMS en dat gaat dan via je bestaande rekening. Maar dat is van later zorg, eerst maar eens deze radio-widget fiksen.

Nog ideeën/ toevoegingen voor de radio widget? Button-layout? Apple raadt in de Dashboard Tutorial aan een eigen kleurenschema aan te houden en persé niet een Aqua kloon te bouwen:

1, pag27: Avoid using Aqua controls on your main interface. Aqua controls should only be used for the reverse side of your widget. Instead, design custom controls for your widget's main interface. Ensure that controls look and behave like the objects they're representing. A checkbox should look like a checkbox and buttons should look clickable even though they aren't specifically Aqua controls.

2, pag25: Use color to distinguish your widget. A unique color scheme ensures that when users want to use your widget, it's quickly recognized.

Ik heb ook een tweetal ontwerpjes voor een logo bedacht (met de hand natuurlijk...), het idee is een zendmast, met Nederlands vlaggetje (linker) of Nederlands bolletje (rechts) zoals dat ook bijv. in de iTunes Store wordt gebruikt. Gráág commentaar, want ik ben niet goed in dit logo-ontwerp.


Dat was het voor nu weer even.

[ Voor 3% gewijzigd door tonyisgaaf op 28-06-2005 00:45 ]

[Oxi]

Zorg eerst eens dat je wat werkende code hebt voor je jezelf gaat druk maken over het logo.

[frim]

Ik weett niet hoe goed je cocoa kan programmeren, maar in Mac OS X zit natuurlijk het hele quicktime framework. Ik neem aan dat je dat kunt gebruiken om streams af te luisteren (de nieuwe Quicktime Player is ook alleen maar een frontend hierop), met dat framework kun je dan ook zonder problemen volumeniveau van quicktime streams kunnen aanpassen. Moet je wel enig verstand hebben van cocoa bindings denk ik.

[Hydraulik-Phunk]

Het lijkt me handig om op genre te kunnen zoeken, en dat je iets van een 'last 5 played' hebt oid.

Hoe ga je stations toevoegen ? Zelf, in je code ? Of kan de gebruiker dit zelf ook ?

[tonyisgaaf]

@frim:
Zover ik weet kunnen de .asx en .ram streams alleen maar met respectievelijk Windows Media Player en de Realplayer of hun respectievelijke plugins worden afgespeeld en helaas niet met Quicktime... Daarnaast heb ik nog nooit in Cocoa geprogrammeerd, dus ik heb geen idee hoe dat moet.

[KeeZ]

tip(je):

misschien is graven in de source van nederland.fm een oplossing of neem eens contact met hen op, misschien is er daar wat van te maken...

[Verwijderd]

als je wil kan ik me wel verdiepen in het logo voor je. aangezien je zegt daar niet heel handig mee te zijn..

[frim]

tonyisgaaf schreef op dinsdag 28 juni 2005 @ 16:47:
@frim:
Zover ik weet kunnen de .asx en .ram streams alleen maar met respectievelijk Windows Media Player en de Realplayer of hun respectievelijke plugins worden afgespeeld en helaas niet met Quicktime... Daarnaast heb ik nog nooit in Cocoa geprogrammeerd, dus ik heb geen idee hoe dat moet.

Ik had het ook louter over Quicktime, omdat je zelf aangaf dat je de andere twee misschien wel zou kunnen afvangen.
Ik weet niet hoe ver je komt zonder Cocoa. Met cocoa kun je iig nog de andere spelers als applicaties starten en dan via API's aanroepen, dat gaat met javascript niet lukken. Maar ik zou zeggen, bekijk de broncode van de andere spelers eens, vooral deze lijkt erg veel op wat jij aan het doen bent.

[tonyisgaaf]

Kijk, das nou eens een leuk voorbeeld. Deze (Holland Radio widget) is heel simpel maar doeltreffend gemaakt: hij roept een index.html aan bij de start, daar kun je een zender kiezen. Dan wordt er een specifieke zender.html pagina geladen. Als je op het 'flip'-knopje duwt wordt weer index.html geladen.
In de zender.html wordt de background.png, de zenderlogo.png en met <embed> de geluidsstroom geladen (met width en height op 0). Je moet dus al wel alle players (WMP, Real, QT) geïnstalleerd hebben.

Stop ik nu? Nee, want het programma houdt zich niet aan een paar Apple widget conventies die ik wel graag wil gebruiken, maar vooral ook omdat ik deze ervaring wil opdoen.

Tot nu toe heb ik lang lopen nadenken hoe ik een deel van de html code dynamisch kon laten veranderen, maar misschien lukt het ook wel met een hidden frame waarin de speler wordt geladen...

[tonyisgaaf]

Nou, een paar maanden verder heb ik toch de moed opgevat om eens in de DHTML te duiken en een proof-of-concept widget te maken.
Wat lukt allemaal nog niet:
- De knoppen 'indrukken': in Safari gaat alles prima, maar onder Dashboard vertikken de knoppen het enige animatie te laten zien. Ik heb de code van twee verschillende widgets geprobeerd te implementeren, maar heb mag niet baten. Een bijna directe kopie van de Calculator widget knoppen control heeft absoluut geen effect. Onder Safari werkt het echter perfect.
- Preferences opslaan: doet het gewoon simpelweg niet. Is niet heel belangrijk op dit moment, maar het moet gewoon kunnen *&^%#^& ik gebruik gewoon de

code:

widget.setPreferenceForKey(preference, key)

methode, maar dat werkt tot nu toe nog niet.

De widget ziet er über-crappy uit en is vooral bedoelt voor het debuggen van code en het vinden van een oplossing voor het laden/ontladen van een plugin.
Ik denk dat ik mijn uiteindelijke widget wil baseren op het design van de CD/Radio speler van plus/minus zero design uit Japan (voor de kenner ).

Zijn er mensen die even door de code zouden kunnen scannen (en dan met name het knoppen gebeuren met onMouseDown, onMouseUp en onMouseOut). De code is nog niet bedocumenteerd/becommentarieerd, als dat voor je/jullie een vereiste is dan zal ik dat nog wel even doen. Uiteindelijk zal ik dit sowieso doen.

Een deel van de code is trouwens uit de voorbeeldcode van Apple, de BBC Radio widget en het logo dat ik heb gebruikt om de widget te laden is gewoon rechtstreeks gekopieerd uit de NL Radio Widget van Thijs Bergervoet. De widget is dan ook niet bedoelt om te verspreiden, maar dat heb ik door de toevoeging van maar drie radiokanalen ook wel redelijk duidelijk gemaakt.

Dus, daar komttie dan:
De code in een zipfile;
De widget;

Nog even prietpraat ernaast: in de Activity monitor gebruikt de widget met de WMP plugin 7-8 procent, met QT meer richting de 15 procent.

[chem]

In other news: http://forums.applenova.com/showthread.php?t=10937