Theme-Builder für Skins

Hi,

ich habe ein "schlichtes" Thema für den Skin Soppalusikka erstellt.

Da mir das Herumprobieren mit den ARGB Werten eine Theme-Datei zu umständlich war, habe ich mir für diesen Skin einen eigenen einfachen Theme-Builder erstellt.

Und falls bei der Wiedergabeanzeige der Weiße Rahmen stört, muss der Skin gepatch werden.

Anmerkung zur Bedienung :
Das Theme-Builder läuft per Javascript direkt im lokalen Browser. Getestet habe nur per Iceweasel 10.0.12, es sollte aber mit fast jedem aktuellen Browser funktionieren.
Unkomprimierte, lokale Theme Dateien des Skins Soppalusikka können importiert werden. (Parse => Import => Parse).
Der Export kann nur über das Textfeld und die Zwischenablage erfolgen. (Parse => Theme Text auswählen => Strg+C => Editor starten => Strg+V)

Andreas

Edit: Topic aktualisiert

Zitat von fnu

Schön, stehe auf dezente Optik, das Thema müßte ja quasi 1:1 für Elchi passen, oder?

Nein, ein vergleich zwei Theme-Dateien weißt leider doch einige Unterschied auf:

--- soppalusikka.xxx 2013-04-21 12:14:53.593482969 +0200
+++ Elchi.xxx 2013-04-21 12:14:04.705240540 +0200

@@ -8,28 +7,29 @@
 clrButtonRedFg
 clrButtonYellowBg
 clrButtonYellowFg
-clrChannelEpgDuration
+clrChannelDateBg
+clrChannelDateFg
 clrChannelEpgShortText
 clrChannelEpgTimeBg
 clrChannelEpgTimeFg
-clrChannelEpgTitle
+clrChannelEpgTitleBg
+clrChannelEpgTitleFg
 clrChannelNameBg
 clrChannelNameFg
-clrChannelNumberDateBg
-clrChannelNumberDateFg
-clrChannelSymbolActive
-clrChannelSymbolInactive
-clrChannelSymbolRecord
-clrChannelTimeBarBg
-clrChannelTimeBarFg
+clrChannelSymbolOff
+clrChannelSymbolOn
+clrChannelTimebarRest
+clrChannelTimebarSeen
+clrMenuDate
 clrMenuEventDescription
 clrMenuEventShortText
-clrMenuEventSymbolBg
-clrMenuEventSymbolFg
 clrMenuEventTime
 clrMenuEventTitle
+clrMenuEventVpsBg
+clrMenuEventVpsFg
 clrMenuItemCurrentBg
 clrMenuItemCurrentFg
+clrMenuItemNonSelectable
 clrMenuItemSelectable
 clrMenuScrollbarShown
 clrMenuScrollbarTotal
@@ -51,14 +51,18 @@
 clrReplayProgressRest
 clrReplayProgressSeen
 clrReplayProgressSelected
-clrReplaySymbolActive
-clrReplaySymbolInactive
+clrReplaySymbolOff
+clrReplaySymbolOn
 clrReplayTitleBg
 clrReplayTitleFg
 clrReplayTotal
+clrSymbolRecBg
+clrSymbolRecFg
 clrVolumeBarLower
-clrVolumeBarMute
 clrVolumeBarUpper
-clrVolumePromptBg
-clrVolumePromptFg
+clrVolumePrompt
+clrVolumeSymbolMuteBg
+clrVolumeSymbolMuteFg
+clrVolumeSymbolVolumeBg
+clrVolumeSymbolVolumeFg

Zitat von mini73

Unter welcher Lizenz steht der und kann man ihn irgendwo herunterladen? Sonstige Voraussetzungen für den Betrieb?

Der aktuelle Stand des Theme-Builder läuft komplett offline, sprich der Webserver wird nur zum Rollout genutzt. Eine Backend (z.B. php) wird nicht genutzt.
Das ganze steht unter MIT-Lizenz, passend zur verwendeten Javascript-Bibliothek http://raphaeljs.com/

Zitat von mini73

Moin!
Könnte man den auch für andere Skins ausbauen? Da muss man sicherlich dann ein paar Bildchen und Click-Maps usw. hinterlegen, aber machbar wäre das, oder?

Ja die Anpassung an andere Skins ist möglich, ein paar Kenntnisse über den Aufbau des Skins und von Javascript könnten bei der Fehlersuche helfen.
Ach ja, für Skins mit Farb-Gradienten gibt es keine Eingabemöglichkeit, dies müsste erst aufwendig implementiert werden.

Folgende Kurzanleitung meines Workflows, um es für einen weiteren Skin anzupassen. Am aufwendigsten ist noch das Erstellen des SVG-Grafik-Template, der Rest sind nur ein paar Nacharbeiten

* Beigefügtes Paket lokal entpacken
* in Kopf des js/soppalusikka.js ist eine Kurzanleitung enthalten.

* Die Datei soppalusikka.svg dient als Grafik-Template, um alle Elemente im js/soppalusikka.js zu generieren.
+ Das Grafik-Template kann z.B. mit Inkscape bearbeitet werden.
+ Jede der fünf Eingabeseite entspricht einen Layer in der SVG-Graphik
+ jedes Graphikobjekt einer Eingabeseite hat den zugehörigen Theme-Wert als ID-Kennung (Inkscapemenü Objekt > Objekteigenschaften)
+ Erlaubt ist z.B clrButtonRedBg bzw. bei doppelter Nennung clrButtonRedBg-23

<rect
       style="fill:#cc2222;fill-opacity:1;stroke:none"
       id="clrButtonRedBg"
       width="125"
       height="32"

bzw.

<rect
       style="fill:#cc2222;fill-opacity:1;stroke:none"
       id="clrButtonRedBg-23"
       width="125"
       height="32"

* die neue SVG-Datei wird dann per http://readysetraphael.com/ ins Raphael-Javascript konvertieren
+ Bei Verwendung des Konverter Seite werden nur folgende Typen rect, text, path, circle, ellipse unterstützt.
+ Es müssen aus der generierten Daten ein paar Javascript objekte entfernt werden, und ein paar Ersetzungen vorgenommen werden. Siehe Aufbau der js/soppalusikka.js
- Entferne object Paper - var Raphael('rsr', '800', '600');
- Entferne layer objects var layer ...
- Alle Graphik Variablen in ein Sammelobjekt gfx => var clrBackground -> gfx.clrBackground
- Attribut layer mit target ersetzen => parent: 'layer1' -> target: 'layer1'

Folgende Regex halfen mir bei der Nachbearbeitung

sed -e 's/;\nclr.*\.attr/.attr/g'
sed -e 's/var clr/gfx.clr/g'
sed -e 's/parent/target/g'

* das Ergebnis in js/soppalusikka.js ersetzen.
* Und dann Testen, hier empfiehlt sich das Firefox-Plugin Firebug bei der Fehlersuche.

* Optional, aber der Ordnung halber alle soppalusikka.* / js/soppalusikka.js Dateien umbenennen und alle Verweise in soppalusikka.html an den neuen Skin anpassen.

Hi,

Einen Theme Builder gibt es jetzt auch für Skin ST:TNG

Andreas

Anbei ein Theme-Datei für ST:TNG, deren Grundfarbton "Purple" ist.

Hi,

Ich habe noch weitere Theme Builder für die Skins Elchi und VDR:Classic erstellt.

Andreas