Desktop Widget Engine (v0.72)

[littleDave]

Hallo

ich hab mal wieder ein Projekt, welches ich hier veröffentlichen will: Eine ...

http://www.godlikesoft.de/images/ext...ne/DWELogo.jpg
Desktop Widget Engine

Downloads

• hier ist eine Übersicht über alle Versionen
• hier (ca. 1.5 MB) kann die aktuellste Version heruntergeladen werden
• hier könnt ihr weitere Widgets herunterladen und eure eigenen Widgets hochladen
• hier ist jetzt der komplette ChangeLog seit Version 0.1 aufgelistet
• hier sind jetzt die möglichen Startparameter aufgelistet

Was ist eine Widget Engine?

Widget? Was ist das denn? ... Hm, das ist nicht so schnell zu beschreiben. Kurz gesagt: Widgets sind kleine Fenster, die auf dem Desktop sitzen und unterschiedliche Aufgaben übernehmen können. Jedes Widget ist dabei nur eine Ansammlungen von Anweisungen, Bildern oder sonstigen Daten. Diese Daten werden dann von einem Hauptprogramm visualisiert und verarbeiten. Diese Widget-Engine ist dabei dieses Hauptprogramm.

Wie funktioniert das ganze?

Das ist ganz einfach. Im Hauptprogramm klickt ihr einfach auf Widgets und dann auf Add widget. In einem Dialog wählt ihr dann die Widget-Datei aus, die ihr starten wollt. Danach erscheint ein neues Fenster auf dem Bildschirm - fertig: das Widget läuft jetzt.

Screenshots (für größere Version einfach auf das Bild klicken)

Mal ein Paar Widgets auf dem Desktop
http://widgets.godlikesoft.de/progra...p001-small.jpg http://widgets.godlikesoft.de/progra...p002-small.jpg http://widgets.godlikesoft.de/progra...p006-small.jpg
Der Editor
http://widgets.godlikesoft.de/progra...p003-small.jpg http://widgets.godlikesoft.de/progra...p004-small.jpg
Die Widget-Auswahl
http://widgets.godlikesoft.de/progra...p005-small.jpg

Kann ich selbst Widgets erstellen?

Natürlich! Im Hauptprogramm ist ein Widget-Editor dabei, mit dem ihr neue Widgets erstellen und bearbeiten könnt.

Wie erstelle ich eigene Widgets?

Das ist schon nicht so einfach zu beschreiben, da ihr durch die Script-Sprache extrem viel Möglichkeiten habt.
Zuerst wählt ihr im Menü unter Edit den Punkt Create new Widget aus. Dort gibst du die ersten groben Daten zu deinem Widget ein (diese können natürlich später noch geändert werden). Unten müsst ihr noch die Zieldatei eingeben, in dem die Daten gespeichert werden sollen. Danach erscheint der Editor. Der Editor ist ungefähr so aufgebaut wie ihr es von Delphi gewohnt seid. Es gibt einen Form-Designer und einen Code-Editor. Im Formdesigner könnt ihr Komponenten hinzufügen, bearbeiten und löschen. Im Code-Editor bearbeitet ihr die Funktionalität des Widgets. Die Programmiersprache des Widgets ist Pascal, somit könnt ihr wahrscheinlich gleich loslegen. Als Scriptsprache verwende ich (wie könnte es anders sein ), meine Script-Engine. Um alle Funktionen zu beschreiben bräuchte ich jetzt sehr lange - am besten schaut ihr euch bereits mitgelieferten Widgets im Editor an.

Wie veröffentliche ich meine eigenen Widgets

Das ist ganz einfach: sobald ihr euer Widget fertig habt, klickt ihr im Editor auf Datei -> Publish-Datei erstellen.... Nachdem ihr die Publish-Datei gespeichert habt, geht ihr auf Website der Desktop Widget Engine. Dort loggt ihr euch mit eurem Account ein (wenn ihr noch keinen habt, einfach kurz registrieren) und wählt dann rechts unten den Eintrag Publish own widget. Dann wählt ihr die gerade erstellte Publish-Datei aus und wählt noch die Kategorie des Widgets - fertig.

Wichtige Sachen für den Editor

• Events zuweisen:
  Um einer Komponente ein Event zuzuweisen solltet ihr im Object-Inspector den Tab "Events" auswählen. Dort klickst ihr doppelt auf den Namen des Events. Dann wird automatisch alles nötige erstellt. Ihr könnt die Events natürlich auch manuell eintragen, jedoch ist solltet ihr dann genau wissen, welche Parameter wann wo kommen. Wenn eine Event-Funktion falsche Parameter hat, wird das Widget zwar erfolgreich kompiliert, die Event-Funktion wird aber niemals erreicht.
• Bilder zuweisen:
  Widgets sind meistens mit einer aufwendigeren grafischen Oberfläche ausgestattet. In dieser Widget-Engine geht das natürlich auch. Dafür fügt ihr einfach ein Image hinzu und wählt im Objekt-Inspektor den Eintrag "Graphic" aus. Dort findet ihr einen Eintrag "ImageFile", welcher einen Dialog öffnet. In diesem Dialog wählt ihr das gewünschte Bild aus. Dabei könnt ihr nur Bilder auswählen, die sich in der Wiget-Datei befinden. Um eine Datei hinzuzufügen wählt ihr links den Eintrag Add file to folder.
  ACHTUNG: Bei den Bildern werden nur PNGs, JPEGs, Bitmaps und Gifs unterstützt. Andere Bildtypen funktionieren nicht!

Was ist alles dabei?

Das Hauptpacket besteht nur aus einer analogen Uhr und einer SideBar. Wenn ihr weitere Widgets haben wollt, geht ihr auf die Website der Desktop Widget Engine. Dort könnt ihr viele weitere Widgets herunterladen.

Eigene PlugIns?

Die Funktionalität von Widgets kann man mit Hilfe von PlugIns erweitern. Die Erweiterbarkeit mit Hilfe durch PlugIns ist extrem groß. Um ein PlugIn zu erstellen, solltet ihr vorher die PlugIn-API-Reference herunterladen (der Download-Link befindet sich am Ende dieses Abschnitts). Dort findet ihr einen Pascal-Header sowie eine Hilfe, die euch anhand des mitgelieferten Beispiels erklärt, wie ihr ein PlugIn erstellen könnt und worauf ihr achten müsst. Die PlugIn-API findet ihr hier (ca. 1 MB)

Noch ein paar Hinweise

• Getestet mit Windows XP
• Verwende Komponenten: Sysygy Script Engine, SynEdit, Jedi Component Library, GraphicEx, GR32 (TBitmap32)
• Aktuelle Version: 0.72
• Programmiert mit Delphi 7
• Das Programm erstellt folgende Ordner:
  • Den Ordner "Desktop Widget Engine" in %APPDATA%
• Das Programm erstellt folgende Registry-Einträge:
  • "Desktop Widget Engine" in "HKCU\Software\Microsoft\Windows\CurrentVersion\Ru n\" (nur falls die Einstellung "Autostart" aktiviert wurde)

[littleDave]

Zitat von Sherlock:

Jetzt musst Du nur noch erklären, wie man Widgets internationalisieren kann, und ich leg los mit dem Eindeutschen, bzw. dem korrigieren der einen oder anderen Fehlerchen

Also das mit den Widgets-Übersetzen hatte ich schonmal versucht einzubauen, hat aber, so wie ich das wollte, nur zu Fehlern geführt. Daher hab ich das erstmal nicht weiter gemacht.

Werd mir das für die nächste Version aber vornehmen.

[Dbof]

Ich finde dein Programm echt wunderbar und nutze es auch. Nun kam ich gestern auf ein ähnliches Programm und war davon sinnlich begeistert. Dieses Programm nennt sich Thoosje Sidebar und ist deinem Programm sehr ähnlich, hat aber einige besondere Funktionalitäten, die ich bei deinem vermisse. Am besten schaust du dir das einfach mal an, ist echt schön gemacht.

[Sherlock]

Du weisst ja schon was die andere Sidebar kann...sags doch bitte. Ich komme bei den unübersichtlichen Seiten nicht so ganz zu Potte.

Sherlock

[Dbof]

Na schön, also:

• Die Sidebar lässt sich einfach verschieben, die Gadgets ziehen mit.
• Möglichkeit, der Uhr verschiedene Skins zu verpassen
• 9 verschiedene Skins für Sidebar anwählbar, Möglichkeit zum Selbstgestalten
• Schatten kann zu den jeweiligen Gadgets und zur Sidebar hinzugefügt werden
• Ein- Und Ausblenden der Sidebar mit Gadgets
• Sieht der Vista Sidebar zum Verwechseln ähnlich(finde ich)

Soll jetzt keine Werbung sein, nur zum Vergleich

[Larsi]

Achso ja bei den Icons ist eine License.txt dabei wo drin steht dass du sie frei verwenden darfst ABER ein Verweis auf den Entwickler geben musst. Hast du das?

[olee]

Zitat von Dbof:

• Sieht der Vista Sidebar zum Verwechseln ähnlich(finde ich)

Das soll ja auch so sein

Diese "Thoosje Sidebar" ist speziell als Vista-Sidebar-Ersatz gedacht.
Wenn ich mich nicht irre ist die sogar beim Vistamizer mit drin.

MFG

[littleDave]

Zitat von Dbof:

• Die Sidebar lässt sich einfach verschieben, die Gadgets ziehen mit.
• Möglichkeit, der Uhr verschiedene Skins zu verpassen
• 9 verschiedene Skins für Sidebar anwählbar, Möglichkeit zum Selbstgestalten
• Schatten kann zu den jeweiligen Gadgets und zur Sidebar hinzugefügt werden
• Ein- Und Ausblenden der Sidebar mit Gadgets
• Sieht der Vista Sidebar zum Verwechseln ähnlich(finde ich)

Erstmal danke für diese Liste - da hab ich wieder was zum Abarbeiten

Aber ich möchte mich mal kurz verteidigen: das Programm heißt ja explizit Thoosje Sidebar . Naja, ist aber keine Ausrede - ich werd mal schauen, was ich von der Liste alles einbauen kann. Vorallem die Punkte "die Gadgets ziehen mit" (ich hab mich immer noch nicht überwinden können, das einzubauen ) und "Ein- und Ausblenden" der SideBar mit Gadgets" find ich sehr gut. Die Schatten find ich persönlich noch nicht so wichtig - und zu den Uhrenskins: man kann ja die bereits vorhandene Uhr leicht erweitern .

Zitat von Larsi:

Achso ja bei den Icons ist eine License.txt dabei wo drin steht dass du sie frei verwenden darfst ABER ein Verweis auf den Entwickler geben musst. Hast du das?

Oh, hab ich das was übersehen? Wenn das stimmt, bitte ich das zu entschuldigen, ich werd einen Hinweis im About-Dialg einbauen. Danke Larsi

[littleDave]

Version 0.65 online!

Diesmal hab ich kaum Changes drinnen, es ist also eher eine 0.64a, aber ein paar Sachen sind doch neu:

Ich hab ein paar kleine Fehlerchen in der deutschen Sprachdatei behoben. Außerdem hab ich ein paar kleine Übersetzungen verändert. Zudem war in den Optionen die Einträge in Tab "Themes" zu kurz, die hab ich nun länger gemacht.

Das erste, was beim Start auffallen sollte ist, dass die Widgets beim Start jetzt einfaden und nicht einfach aufpoppen. Ich hoffe, dass das Fading funktioniert - falls nicht bzw. falls ihr es blöd findet, könnt ihr es auch in den Optionen deaktivieren.

Außerdem hab ich mir mal die Thoosje Sidebar angeschaut und muss ehrlich sagen: die ist extrem eingeschränkt: man kann keine neuen Widgets erstellen bzw. bereits vorhandene bearbeiten. Das ist wirklich eine extreme Einschränkung.

Aber ich hab schon einen Punkt von der Liste mit eingebaut: Wenn man jetzt die SideBar woanders positioniert, werden die angedockten Widgets (jetzt endlich) mit verschoben. Das wollt ich eigendlich schon viel früher einbauen, jedoch hab ich mich erst jetzt dazu überwinden können.

(Download sowie ChangeLog im ersten Post)
Grüße
Dave

[Sherlock]

Fade-in funktioniert und sieht schön aus.
SideBar nimmt die Widgets ebenfalls mit, perfekt.

Weiter so!

Ich hab gestern mal probiert ein Widget für den RSS-Feed von heise online zu basteln, aber leider erfolglos. Mein ambitionierteres Projekt, nämlich eine Börsenticker scheint damit in weite Ferne zu rücken
Aber ich probiers heute Abend nochmal, XML ist halt für mich noch relativ neu.

Sherlock

[littleDave]

Zitat von Sherlock:

Fade-in funktioniert und sieht schön aus.
SideBar nimmt die Widgets ebenfalls mit, perfekt.

Danke fürs Testen, hatte schon Angst, dass die SideBar mal wieder nicht funktioniert

Zitat von Sherlock:

Weiter so!

Mach ich

Zitat von Sherlock:

Ich hab gestern mal probiert ein Widget für den RSS-Feed von heise online zu basteln, aber leider erfolglos. Mein ambitionierteres Projekt, nämlich eine Börsenticker scheint damit in weite Ferne zu rücken
Aber ich probiers heute Abend nochmal, XML ist halt für mich noch relativ neu.

Also ich kann dir ja mal kurz Anhand des "Spiegel Online" - Widgets erklären, wie ich es mache.

Also als erstes Frage ich natürlich den RSS-Feed mit einer wgHTTP-Komponente ab:
wgHTTP1.GetURL('http://www.spiegel.de/schlagzeilen/rss/0,5291,,00.xml'); Im OnDone-Ereigniss lese ich dann den Inhalt aus und lassen ihn mit dem JvSimpleXML parsen:

Delphi-Quellcode:

procedure wgHTTP1Done(Sender: TObject; Content: string; ResponseCode: integer);
var pXML : TJclSimpleXML;
begin                     
  pXML := pXML.Create;
  try
    pXML.LoadFromString(Content); 
    ParseContent(pXML); 
  finally
    pXML.Free;
  end;  
end;

So, jetzt ist die Funktion "ParseContent" nicht der XML-Parser, sondern ich füge den relevanten Inhalt in ein neues XML-Element ein. Zusätzlich berechne ich noch die Texthöhe von jedem Eintrag in der Funktion.

Dafür gehe ich in der "ParseContent" - Routine durch alle Einträge durch:

Delphi-Quellcode:

for i:=0 to Root.Items.Count-1 do
begin
  // Unterelement Nummer "i" abrufen
  Item := Root.Items.Item(i);
  // das sollte eigendlich nie passieren, aber sicher ist sicher
  if Item = nil then
     continue;
  // in dem RSS-Feed werden zuerst ein paar Zusatzinformationen
  // mitgesendet. Diese haben alle einen anderen Namen als "item"
  // Da diese für den Inhalt des Feeds erstmal nicht relevant sind
  // überspringen wir diese Einträge
  if Item.Name <> 'item' then
     continue;

So, wenn jetzt "Item.Name = 'item'" ist, füge ich einen neuen Eintrag in das interne XML-File ein:

Delphi-Quellcode:

newItem := XML.Root.Items.Add('data'); // ein neuer Eintrag
newItem.Items.AddS('msg', Item.Items.ItemNamed('title').Value); // die Überschrift des Feed-Items
newItem.Items.AddS('url', Item.Items.ItemNamed('link').Value);  // der Link des Feed-Items

Jetzt berechne ich die Höhe des zukünftigen Eintrags und füge diesen ebenfalls zu "newItem" hinzu.

Delphi-Quellcode:

Rec := Rect(0, 0, tmpBMP.Width - 11, tmpBMP.Height);
                           
tmpBMP.Font.SetName('MS Sans Serif');  
tmpBMP.Font.SetSize(8); 
// imgLogo, da dies eine "Graphic" - Komponente enthällt.
// für die "Graphic" - Komponente hab ich die DrawText-Methode
// verbessert     
imgLogo.Graphic.DrawText(tmpBMP, newItem.Items.Value('msg', ''), Rec, 
                         DT_LEFT or DT_CALCRECT or DT_WORDBREAK or DT_NOPREFIX,
                         0, 0);  
// jetzt hab ich die Höhe des eintrags und speichere sie in das interne XML-File
height := Rec.Bottom + 7; // noch etwas Pufferabstand: 7 pixel
newItem.Items.AddI('height', height);

So, nun stehen im internen XML-File die Daten, die wirklich wichtig sind. Um genau zu sehen, wie die Sachen gespeichert werden, kannst du am Ende der "ParseContent"-Methode vor dem finally folgendes Einfügen:
ShowMessage(XML.SaveToString); (ACHTUNG: die MessageBox wird sehr lang, zum schließen dann einfach "Enter" drücken)

Jetzt ist noch die OnMeasureItem-Methode der ListBox interessant. Da ich ja in der ParseContent-Methode die Höhe eines Eintrags berechnet habe, kann ich diesen einfach aus dem internen XML-File auslesen:

Delphi-Quellcode:

procedure wgListBox1MeasureItem(Sender: TObject; Target: TBitmap32; Index: integer; var Height: integer);
var Item: TJclSimpleXMLElem;
begin
  // Eintrag Nummer "index" auslesen
  Item := XML.Root.Items.Item(index);
  // Falls dieser Vorhanden ist
  if Item <> nil then
     // Die Höhe aus dem Eintrag "height" zurückgeben
     // 13 ist dabei der Default-Wert, falls "height" nicht vorhanden ist
     Height := Item.Items.IntValue('height', 13);
end;

Du solltest dir noch das OnDraw-Event anschauen, jedoch ist da nicht viel neues dabei.

Ich hoffe, ich konnte dir etwas helfen.