Frage zur Konfiguration vom WSH Panel MOD

Begonnen von Spirit_of_the_ocean, 08. April 2009, 22:54:20

Vorheriges Thema - Nächstes Thema

Spirit_of_the_ocean

Hi!
Ich bin gerade dabei die mir vorliegenden Samples durchzuschauen. Ich suche eine Möglichkeit folgendes zu tun:

Den Background schwarz zu malen und darüber eine Art Hintergrundbild zu legen. Darüber sollen dann noch Buttons.
Ich habe mehrere verschiedene Buttons gefunden und weiß, wie man die Position usw. ändert. Allerdings hab ich noch nciht herausgefunden wie ich ein Bild dahinterlegen kann. Geht das überhaupt beides zusammen?

tedgo

#1
Ja, du musst nur in function on_paint das Hintergrundbild angeben, bevor du die Buttons "malst".

z.B.:
gr.FillSolidRect(0,0,window.Width,window.Height,RGB(0,0,0));

var img = gdi.Image("Pfad zum Bild");
gr.DrawImage(img,x,y,w,h,0,0,img.Width,img.Height);

buttonsDraw(gr);


Natürlich muss die RGB-Funktion darüber im Skript vorhanden sein.
Falls noch nicht, dann kopiere folgendes ins Skript (ganz oben, jedenfalls nicht innerhalb on_paint oder einer anderen Funktion):

function RGB(r, g, b) {
   return (0xff000000 | (r << 16) | (g << 8) | (b));
}


(Ich hoffe, ich habe jetzt im schnell hingeschmiertem Code keinen Fehler drin  ::))

EDIT:
sehe gerade in der RGB Funktion macht die Forensoftware aus einer 8 mit einer sachließenden Klammer dahinter ) ein Emoticon...

Spirit_of_the_ocean

#2
Ja aber an welche Stelle vom Code?

Ich hab hier diesen Code(Gibt es hier keine Codebox?)
EDIT: Ja es gibt sie  :top:
function RGB(r,g,b){ return (0xff000000|(r<<16)|(g<<8)|(b)); }

ButtonStates = {
normal: 0,
/* not used here
hover: 1,
down: 2, */
hide: 3
}

function SimpleButton(x, y, w, h, img, func_onClick, state) {
this.state = state ? state : ButtonStates.normal;
this.x = x;
this.y = y;
this.w = w;
this.h = h;
this.img = img ? gdi.Image(img) : null;
this.func_onClick = func_onClick;
   
this.containXY = function (x, y) {
return (this.x <= x) && (x <= this.x + this.w) && (this.y <= y) && (y <= this.y + this.h);
}
   
this.draw = function (gr) {
if (this.state == ButtonStates.hide)
return;
       
this.img && gr.DrawImage(this.img, this.x, this.y, this.w, this.h, 0, 0, this.w, this.h);
}
   
this.onClick = function () {
this.func_onClick && this.func_onClick();
}
}

function drawAllButtons(gr) {
for (var i in $buttons) {
$buttons[i].draw(gr);
}
}

function chooseButton(x, y) {
for (var i in $buttons) {
if ($buttons[i].containXY(x, y) && $buttons[i].state != ButtonStates.hide)
return $buttons[i];
}
   
return null;
}

var PlaybackOrder = {
Default: 0,
RepeatPlaylist: 1,
RepeatTrack: 2,
Random: 3,
ShuffleTracks: 4,
ShuffleAlbums: 5,
ShuffleFolders: 6
}

/* Not used here
var PlaybackOrderText = new Array(
"Default", // = 0
"Repeat (Playlist)",
"Repeat (Track)",
"Random",
"Shuffle (tracks)",
"Shuffle (albums)",
"Shuffle (folders)") */

$buttons = {
PBDefault: new SimpleButton(5, 7, 18, 9, fb.foobarPath + "DarkOne/Buttons/PBDefault.png",
function() {
fb.PlaybackOrder = PlaybackOrder.RepeatTrack;
}
),
   
PBRepeat: new SimpleButton(5, 7, 18, 9, fb.FoobarPath + "DarkOne/Buttons/PBRepeat.png",
function() {
fb.PlaybackOrder = PlaybackOrder.ShuffleTracks;
}
),

PBShuffle: new SimpleButton(5, 7, 18, 9, fb.FoobarPath + "DarkOne/Buttons/PBShuffle.png",
function() {
fb.PlaybackOrder = PlaybackOrder.ShuffleAlbums;
}
),
   
PBRepeatPL: new SimpleButton(5, 7, 18, 9, fb.foobarPath + "DarkOne/Buttons/PBRepeatPL.png",
function() {
fb.PlaybackOrder = PlaybackOrder.RepeatDefault;
}
),
   
PBRandom: new SimpleButton(5, 7, 18, 9, fb.FoobarPath + "DarkOne/Buttons/PBRandom.png",
function() {
fb.PlaybackOrder = PlaybackOrder.Default;
}
),

PBShuffleF: new SimpleButton(5, 7, 18, 9, fb.FoobarPath + "DarkOne/Buttons/PBShuffleF.png",
function() {
fb.PlaybackOrder = PlaybackOrder.Default;
}
),

PBShuffleA: new SimpleButton(5, 7, 18, 9, fb.FoobarPath + "DarkOne/Buttons/PBShuffleA.png",
function() {
fb.PlaybackOrder = PlaybackOrder.Default;
}
)
}

// Playback Order buttons are in this group, order is as PlaybackOrder, do not change
var PBGroup = new Array(
$buttons.PBDefault,
$buttons.PBRepeatPL,
$buttons.PBRepeat,
$buttons.PBRandom,
$buttons.PBShuffle,
$buttons.PBShuffleA,
$buttons.PBShuffleF
);

function on_init() {
on_playback_order_changed(fb.PlaybackOrder);
};

on_init();

var cur_btn = null;
var ww, hh;

// --- APPLICATION START

function on_paint(gr) {
gr.FillGradRect(0,-1,window.Width,window.Height +1, 270,RGB(25,40,51),RGB(38,60,76));
drawAllButtons(gr);
}

function on_mouse_move(x, y) {
cur_btn = chooseButton(x, y);
window.Repaint();
}

function on_mouse_lbtn_up(x, y) {
if (cur_btn) {
cur_btn.onClick();
}
window.Repaint();
}

function on_playback_order_changed(new_order_index) {
for (var i in PBGroup) {
if (i == new_order_index)
PBGroup[i].state = ButtonStates.normal;
else
PBGroup[i].state = ButtonStates.hide;
}

window.Repaint();
}
// --- APPLICATION END


Edit: Okay das hab ich hinbekommen. Wichtig für alle die es lesen: Die Pfadangabe muss so einen Slash haben /

tedgo

#3

function RGB(r,g,b){ return (0xff000000|(r<<16)|(g<<8)|(b)); }

ButtonStates = {
normal: 0,
/* not used here
hover: 1,
down: 2, */
hide: 3
}

function SimpleButton(x, y, w, h, img, func_onClick, state) {
this.state = state ? state : ButtonStates.normal;
this.x = x;
this.y = y;
this.w = w;
this.h = h;
this.img = img ? gdi.Image(img) : null;
this.func_onClick = func_onClick;
   
this.containXY = function (x, y) {
return (this.x <= x) && (x <= this.x + this.w) && (this.y <= y) && (y <= this.y + this.h);
}
   
this.draw = function (gr) {
if (this.state == ButtonStates.hide)
return;
       
this.img && gr.DrawImage(this.img, this.x, this.y, this.w, this.h, 0, 0, this.w, this.h);
}
   
this.onClick = function () {
this.func_onClick && this.func_onClick();
}
}

function drawAllButtons(gr) {
for (var i in $buttons) {
$buttons[i].draw(gr);
}
}

function chooseButton(x, y) {
for (var i in $buttons) {
if ($buttons[i].containXY(x, y) && $buttons[i].state != ButtonStates.hide)
return $buttons[i];
}
   
return null;
}

var PlaybackOrder = {
Default: 0,
RepeatPlaylist: 1,
RepeatTrack: 2,
Random: 3,
ShuffleTracks: 4,
ShuffleAlbums: 5,
ShuffleFolders: 6
}

/* Not used here
var PlaybackOrderText = new Array(
"Default", // = 0
"Repeat (Playlist)",
"Repeat (Track)",
"Random",
"Shuffle (tracks)",
"Shuffle (albums)",
"Shuffle (folders)") */

$buttons = {
PBDefault: new SimpleButton(5, 7, 18, 9, fb.foobarPath + "DarkOne/Buttons/PBDefault.png",
function() {
fb.PlaybackOrder = PlaybackOrder.RepeatTrack;
}
),
   
PBRepeat: new SimpleButton(5, 7, 18, 9, fb.FoobarPath + "DarkOne/Buttons/PBRepeat.png",
function() {
fb.PlaybackOrder = PlaybackOrder.ShuffleTracks;
}
),

PBShuffle: new SimpleButton(5, 7, 18, 9, fb.FoobarPath + "DarkOne/Buttons/PBShuffle.png",
function() {
fb.PlaybackOrder = PlaybackOrder.ShuffleAlbums;
}
),
   
PBRepeatPL: new SimpleButton(5, 7, 18, 9, fb.foobarPath + "DarkOne/Buttons/PBRepeatPL.png",
function() {
fb.PlaybackOrder = PlaybackOrder.RepeatDefault;
}
),
   
PBRandom: new SimpleButton(5, 7, 18, 9, fb.FoobarPath + "DarkOne/Buttons/PBRandom.png",
function() {
fb.PlaybackOrder = PlaybackOrder.Default;
}
),

PBShuffleF: new SimpleButton(5, 7, 18, 9, fb.FoobarPath + "DarkOne/Buttons/PBShuffleF.png",
function() {
fb.PlaybackOrder = PlaybackOrder.Default;
}
),

PBShuffleA: new SimpleButton(5, 7, 18, 9, fb.FoobarPath + "DarkOne/Buttons/PBShuffleA.png",
function() {
fb.PlaybackOrder = PlaybackOrder.Default;
}
)
}

// Playback Order buttons are in this group, order is as PlaybackOrder, do not change
var PBGroup = new Array(
$buttons.PBDefault,
$buttons.PBRepeatPL,
$buttons.PBRepeat,
$buttons.PBRandom,
$buttons.PBShuffle,
$buttons.PBShuffleA,
$buttons.PBShuffleF
);

function on_init() {
on_playback_order_changed(fb.PlaybackOrder);
};

on_init();

var cur_btn = null;
var ww, hh;

// --- APPLICATION START

function on_paint(gr) {
gr.FillSolidRect(o,o,window.Width,window.Height,RGB(0,0,0));

var img = gdi.Image("Pfad zum Bild");
gr.DrawImage(img,x,y,w,h,0,0,img.Width,img.Height);

drawAllButtons(gr);
}

function on_mouse_move(x, y) {
cur_btn = chooseButton(x, y);
window.Repaint();
}

function on_mouse_lbtn_up(x, y) {
if (cur_btn) {
cur_btn.onClick();
}
window.Repaint();
}

function on_playback_order_changed(new_order_index) {
for (var i in PBGroup) {
if (i == new_order_index)
PBGroup[i].state = ButtonStates.normal;
else
PBGroup[i].state = ButtonStates.hide;
}

window.Repaint();
}
// --- APPLICATION END


(schau gleich unter APPLICATION START)

Willst du wirklich das Playback Order Sample benutzen?
Das ist noch eines der ersten Samples, die T.P Wang und ich gemacht haben.
Wenn du normale Playback Control haben willst, rate ich dir eher zu einem der anderen Button Samples...

EDIT2:
Die Pfadangabe kann auch ein Doppel-Backslash haben, also \\
Funktioniert genauso.

Spirit_of_the_ocean

Ja ich würde gerne die Playbackorder mit einem Button umstellen können. Bei einem anderen Buttonsample habe ich nur ein leeres Panel gehabt. Welche würdest du mir denn empfehlen (bitte dann auch Posten oder als .txt anhängen).

tedgo

Ach so.
Dann willst du wahrscheinlich auch noch weitere Buttons hinzufügen, nicht nur die Playback Order.
Dann ist das Sample aber wirklich nicht besonders gut geeignet, denn es hat keine Mousehover-Funktion...
Ein Sample für beide Funktionen (also Playback Order und normale Buttons mit Mousehover-Images) habe ich leider auch gar keines...
Da müsste man zwei miteinander verbinden.

Ich versuche mal eines zusammenzuklöppeln ;)

Spirit_of_the_ocean

Ich hatte da noch eines bei den Samples gefunden. Aber irgendwie hab ichs nicht hinbekommen. Der zeigt jetzt nur Script error an. Wenn ich meine Playlistanzeige fertog hab. Dann werd ich es mal Blanko mit Kommentaren auf deutsch hier hochladen. Dann kann jeder Noob entscheiden, was an Buttons er wo haben will.

tedgo

Also, um dich jetzt nicht allzu lange warten zu lassen, pappe ich dir einfach mal ein Skript aus einer chinesischen Konfiguration an, das berücksichtigt beides: Playback Order und Control Buttons.
Ist sogar eine Animation drin.

Weiß jetzt aber nicht, wie gut das auf deine Bedürfnisse passt, ich kriegs bloß nicht hin, meine eigenen Samples voll funktionsfähig zusammenzuführen...  ::)

Aber ich bleib dran, ich frag mal jemanden, der sich damit auskennt ;)

fbuser

Kleiner Tip: Wenn das WSH Panel einen Script-Error anzeigt, wird in der Console die Zeile angezeigt, wo der Fehler auftritt.

tedgo

Das weiß ich ;).
Es gab aber keinen Skript Error, das Skript war also soweit ok.
Es gab beim zusammenfügen meiner Skripte ein anderes Problem.
Entweder haben die Control Buttons funktioniert oder die Playback Order, aber nicht beides zusammen...

Spirit_of_the_ocean

Zitat von: fbuser in 09. April 2009, 00:13:05
Kleiner Tip: Wenn das WSH Panel einen Script-Error anzeigt, wird in der Console die Zeile angezeigt, wo der Fehler auftritt.

Klasse Tipp  :top:
Einen Fehler hab ich nun ausgemerzt. Jetzt wird dort gemeldet:
'cur_btn' ist undefiniert

tedgo


Spirit_of_the_ocean

Keine Ahnung wieso, aber es waren verschiedene Variablen im Scipt.Klar, dass er dann sagt dass er die Variable nicht kennt.Anscheinend funtkionieren jetzt die einfachen Buttons. Wenn ich den Rest nach Ostern fertiggestellt habe werd ich wie gesagt eine Blankoversion mit genauen Anweisungen hochladen. Für alle User, die eben nicht so bewandert sind, was das Programmieren angeht.

tedgo

@Spirit_of_the_ocean
Freundlicherweise hat mir T.P Wang geholfen, meine beiden Skripte zusammenzufügen (hatte einen kleinen Fehler in meiner Button Class).
Ich häng dir jetzt mal sein Beispielscript an.
Die Button-Funktionen und Plazierungen sind jetzt natürlich willkürlich (ist ja nur ein Test-Skript gewesen) und können jederzeit ausgetauscht werden.
T.P Wang hat aber gleich ausführliche Kommentare ins Skript geschrieben, so sollte es sehr einfach zu handhaben sein.

tedgo

@Spirit_of_the_ocean
Hänge dir mal noch ein Script an, allerdings ohne Playback Order Button (den müsstest du dann per Hand hinzufügen - wie im vorigen Script).
In dem Script sind die Playback Control Buttons und eine Seekbar in einem Panel enthalten.
Wie die Seekbar aussehen soll, musst du in der "Class Seekbar" ab Zeile 186 konfigurieren (ist schon ein Beispiel drin).
Möchtest du statt eine Seekbar zu zeichnen ein Image als Hintergrund für die Seekbar nehmen, musst du in Zeile 260 aus SeekbarBorder.rect SeekbarBorder.image machen (und eben in der "Class Seekbar" ab Zeile 186 dein Bild anpassen).

Das Script hat noch ein kleines Redraw-Problem beim Suchen mit der Seekbar (möglicherweise musst du in den letzten vier Funktionen aus window.RepaintRect() window.Repaint machen), aber es funktioniert wenigstens :)

Es ist mein künftiges Skript für die Kompaktansicht meiner Konfiguration, welches ich gestern mit einem Bekannten - der glücklicherweise mehr von JScript versteht als ich - geschrieben habe.
Ich hoffe, es ist hilfreich für dich :)