Seekbar für DUI

Begonnen von mexx, 07. Februar 2023, 11:52:27

Vorheriges Thema - Nächstes Thema

mexx

Grimes hatte mal vor längerer Zeit ein Script für eine Seekbar mit laufenden grünen Balken und einigen Anzeigen in drin geschrieben.
Das Script war für WSH Panel mod.Siehe hier und Anhang:

DT_TOP = 0x00000000;
DT_LEFT = 0x00000000;
DT_CENTER = 0x00000001;
DT_RIGHT = 0x00000002;
DT_VCENTER = 0x00000004;
DT_BOTTOM = 0x00000008;
DT_SINGLELINE = 0x00000020;
DT_NOPREFIX = 0x00000800;

//--------

var g_font = gdi.Font("arial",18,1);
var g_font_rating = gdi.Font("Arial Unicode MS",25,0);
var g_fileinfo = null;

var g_drag = 0;
var g_drag_seek = 0;

var ww, wh, area;

//--------

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

function RGBA(r,g,b,a){
return ((a<<24)|(r<<16)|(g<<8)|(b));
}

//--------

function Separator(x) {
this.left = x;

this.draw = function (gr) {
gr.FillGradRect(this.left-1,0, 1, wh-1, 90, RGB(133,133,133), RGB(0,0,0));
gr.FillGradRect(this.left,0, 1, wh-1, 90, RGB(163,163,163), RGB(163,163,163));
gr.FillGradRect(this.left+1,0, 1, wh-1, 90, RGB(60,59,59), RGB(0,0,0));
}
}

function separatorsDraw(gr) {
for (i in Separators) {
Separators[i].draw(gr);
}
}

//--------

function TimeFmt(t){
var zpad = function(n){
var str = n.toString();
return (str.length<2) ? "0"+str : str;
}

var h = Math.floor(t/3600); t-=h*3600;
var m = Math.floor(t/60); t-=m*60;
var s = Math.floor(t);
if(h>0) return h.toString()+":"+zpad(m)+":"+zpad(s);
return m.toString()+":"+zpad(s);
}

// --- APPLICATION START

function on_paint(gr){
var pos = 0;
var length = fb.PlaybackLength;
var txt;

if(length > 0){
if(g_drag){
pos = area * g_drag_seek;
txt = "Seek " + TimeFmt(g_drag_seek * length) + " / " + TimeFmt(length);
}
else{
pos = area * (fb.PlaybackTime / length);   
var g_titlefmt = fb.TitleFormat("[%album artist% - ][%album% ]['['%date%']' - ]%title% >> $div($mul(100,%playback_time_seconds%),%length_seconds%) '%'");
txt = g_titlefmt.Eval();
}
}

gr.FillGradRect(4, 0, area, wh/2, 270, RGB(90, 90, 90), RGB(0, 0, 0));
gr.FillGradRect(4, wh/2, area, wh/2, 90, RGB(90, 90, 90), RGB(0, 0, 0));
gr.FillGradRect(0, 0, pos, wh/2, 270, RGB(0, 200, 200), RGB(0, 0, 0));
gr.FillGradRect(0,wh/2, pos, wh/2, 90, RGB(0, 200, 200), RGB(0, 0, 0));

gr.FillGradRect(2, 0, 1, wh-1, 90, RGB(163, 163, 163), RGB(163, 163, 163));
gr.FillGradRect(3, 0, 1, wh-1, 90, RGB(60, 59, 59), RGB(0, 0, 0));

separatorsDraw(gr);

gr.FillGradRect(ww-4, 0, 1, wh-1, 90, RGB(133, 133, 133), RGB(0, 0, 0));
gr.FillGradRect(ww-3, 0, 1, wh-1, 90, RGB(163, 163, 163), RGB(163, 163, 163));

gr.DrawRect(0, 0, ww, wh, 4.0, RGB(0,0,0));

gr.GdiDrawText(txt, g_font, RGB(255, 255, 255), 0, 0, ww, wh, DT_CENTER | DT_VCENTER | DT_SINGLELINE | DT_NOPREFIX);

var tfo_rating_a = fb.Titleformat("$if(%rating%,$repeat($char(9733),%rating%),)");
var tfo_rating_b = fb.Titleformat("$if(%rating%,$repeat($char(9734),$sub(5,%rating%)),)");
var txt_rating_a = tfo_rating_a.Eval();
var txt_rating_b = tfo_rating_b.Eval();

gr.GdiDrawText(txt_rating_a, g_font_rating, RGB(0,255,0), ww-120, 0, 110, wh, DT_LEFT | DT_VCENTER | DT_SINGLELINE);
gr.GdiDrawText(txt_rating_b, g_font_rating, RGB(255,0,0), ww-120, 0, 105, wh, DT_RIGHT | DT_VCENTER | DT_SINGLELINE);
}

function on_size(){
ww = window.Width;
wh = window.Height;
area = ww - 4;

Separators = {
one: new Separator((ww-4)/10),
two: new Separator((ww-4)/5),
three: new Separator(3*(ww-4)/10),
four: new Separator(2*(ww-4)/5),
five: new Separator(ww/2),
six: new Separator(3*(ww-4)/5),
seven: new Separator(7*(ww-4)/10),
eight: new Separator(4*(ww-4)/5),
nine: new Separator(9*(ww-4)/10)
}
}

function on_mouse_lbtn_down(x,y){
g_drag = 1;
}

function on_mouse_lbtn_up(x,y){
if(g_drag){
g_drag = 0;
g_drag_seek = x / area;
g_drag_seek = (g_drag_seek<0) ? 0 : (g_drag_seek<1) ? g_drag_seek : 1;
fb.PlaybackTime = fb.PlaybackLength * g_drag_seek;
}
}

function on_mouse_move(x,y){
if(g_drag){
g_drag_seek = x / area;
g_drag_seek = (g_drag_seek<0) ? 0 : (g_drag_seek<1) ? g_drag_seek : 1;
window.Repaint();
}
}

function on_playback_new_track(metadb){
window.Repaint();
}

function on_playback_stop(){
window.Repaint();
}

function on_playback_seek(time){
window.Repaint();
}

function on_playback_time(time){
window.Repaint();
}

// --- APPLICATION END

Script Engine war JScript9. Könnte man dieses Script nicht so modifizieren, dass es bei f2k v2 32/64bit mit JScript Panel funktioniert.

Ich selbst habe dazu einfach zu wenig Ahnung davon.

grimes

Ich kenn mich da auch nicht aus.
Du kannst es aber mal mit dem eingebauten JScript Sample "Seekbar" versuchen. Ist recht einfach gehalten. (rechtsklick) JScript Panel | Configure | Samples

mexx

Zitat von: grimes in 07. Februar 2023, 12:15:43Ich kenn mich da auch nicht aus.

Schade

Zitat von: grimes in 07. Februar 2023, 12:15:43Du kannst es aber mal mit dem eingebauten JScript Sample "Seekbar" versuchen. Ist recht einfach gehalten. (rechtsklick) JScript Panel | Configure | Samples

Das hatte ich schon. Sieht mir einfach zu langweilig und schlicht aus, im Gegensatz zum vorhandenen (s.Anhang)

grimes

Meine Meinung: Die schönste und funktionalste "Seekbar" ist Waveform minibar (mod)

mexx

mmmhhhh, da werd ich mal in Hydrogenaudio versuchen marc2003 zu aktivieren.
Danke für den Tip mit Waveform minibar (mod).

mexx

Ich hab festgestellt, dass sich WSH Panel Mod trotz UIE-Panel in v2 32bit DUI einbinden lässt.
Dadurch funktioniert jetzt mein Script auch bei v2.  :top:

v2 64 bit werd ich dann demnächst dahingehend auch prüfen.

mexx

So, nach vielen Test bekomme ich dieses Script nicht in V2 64bit zum Laufen.

In Hydrogenaudio habe ich angefragt, ob jemand mir helfen könnte, dieses Script (s.o.) so zu modifizieren, dass es in Jscript 3 funktioniert. Leider nie ne Antwort bekommen. Vielleicht ist so ein Problem für die Experten dort zu profan.

Vielleicht kann mir hier doch inzwischen jemand helfen?

Major_Tom

#7
Zwar nur auf 32bit getestet, sollte aber mit JSP3 auf 64bit keinen Unterschied machen:

// ==PREPROCESSOR==
// @import "%fb2k_component_path%helpers.txt"
// ==/PREPROCESSOR==

var g_font = CreateFontString("arial",18,700);
var g_font_rating = CreateFontString("Arial Unicode MS",25,400);
var g_fileinfo = null;

var g_drag = 0;
var g_drag_seek = 0;

var ww, wh, area;

//--------

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

function RGBA(r,g,b,a){
    return ((a<<24)|(r<<16)|(g<<8)|(b));
}

//--------

function Separator(x) {
    this.left = x;
   
    this.draw = function (gr) {
        FillGradientRectangle(gr, this.left-1,0, 1, wh-1, 0, RGB(133,133,133), RGB(0,0,0));
        FillGradientRectangle(gr, this.left,0, 1, wh-1, 0, RGB(163,163,163), RGB(163,163,163));
        FillGradientRectangle(gr, this.left+1,0, 1, wh-1, 0, RGB(60,59,59), RGB(0,0,0));
    }
}

function separatorsDraw(gr) {
    for (i in Separators) {
        Separators[i].draw(gr);
    }
}

//--------

function TimeFmt(t){
    var zpad = function(n){
        var str = n.toString();
        return (str.length<2) ? "0"+str : str;
    }

    var h = Math.floor(t/3600); t-=h*3600;
    var m = Math.floor(t/60); t-=m*60;
    var s = Math.floor(t);
    if(h>0) return h.toString()+":"+zpad(m)+":"+zpad(s);
    return m.toString()+":"+zpad(s);
}

// --- APPLICATION START

function on_paint(gr){
    var pos = 0;
    var length = fb.PlaybackLength;
    var txt;

    if(length > 0){
        if(g_drag){
            pos = area * g_drag_seek;
            txt = "Seek " + TimeFmt(g_drag_seek * length) + " / " + TimeFmt(length);
        }
        else{
            pos = area * (fb.PlaybackTime / length); 
            var g_titlefmt = fb.TitleFormat("[%album artist% - ][%album% ]['['%date%']' - ]%title% >> $div($mul(100,%playback_time_seconds%),%length_seconds%) '%'");
            txt = g_titlefmt.Eval();
        }
    }

    FillGradientRectangle(gr, 4, 0, area, wh/2, 0, RGB(0, 0, 0), RGB(90, 90, 90));
    FillGradientRectangle(gr, 4, wh/2, area, wh/2, 0, RGB(90, 90, 90), RGB(0, 0, 0));
    FillGradientRectangle(gr, 0, 0, pos, wh/2, 0, RGB(0, 0, 0), RGB(0, 200, 200));
    FillGradientRectangle(gr, 0,wh/2, pos, wh/2, 0, RGB(0, 200, 200), RGB(0, 0, 0));

    FillGradientRectangle(gr, 2, 0, 1, wh-1, 0, RGB(163, 163, 163), RGB(163, 163, 163));
    FillGradientRectangle(gr, 3, 0, 1, wh-1, 0, RGB(60, 59, 59), RGB(0, 0, 0));
   
    separatorsDraw(gr);

    FillGradientRectangle(gr, ww-4, 0, 1, wh-1, 1, RGB(133, 133, 133), RGB(0, 0, 0));
    FillGradientRectangle(gr, ww-3, 0, 1, wh-1, 1, RGB(163, 163, 163), RGB(163, 163, 163));

    gr.DrawRectangle(0, 0, ww, wh, 4.0, RGB(0,0,0));

    gr.WriteText(txt, g_font, RGB(255, 255, 255), 0, 0, ww, wh, 2, 2, 0);

    var tfo_rating_a = fb.Titleformat("$if(%rating%,$repeat($char(9733),%rating%),)");
    var tfo_rating_b = fb.Titleformat("$if(%rating%,$repeat($char(9734),$sub(5,%rating%)),)");
    var txt_rating_a = tfo_rating_a.Eval();
    var txt_rating_b = tfo_rating_b.Eval();

    gr.WriteText(txt_rating_a, g_font_rating, RGB(0,255,0), ww-120, 0, 110, wh, 0, 2, 1);
    gr.WriteText(txt_rating_b, g_font_rating, RGB(255,0,0), ww-120, 0, 105, wh, 1, 2, 1);
}

function on_size(){
    ww = window.Width;
    wh = window.Height;
    area = ww - 4;
   
    Separators = {
        one: new Separator((ww-4)/10),
        two: new Separator((ww-4)/5),
        three: new Separator(3*(ww-4)/10),
        four: new Separator(2*(ww-4)/5),
        five: new Separator(ww/2),
        six: new Separator(3*(ww-4)/5),
        seven: new Separator(7*(ww-4)/10),
        eight: new Separator(4*(ww-4)/5),
        nine: new Separator(9*(ww-4)/10)
    }
}

function on_mouse_lbtn_down(x,y){
    g_drag = 1;
}

function on_mouse_lbtn_up(x,y){
    if(g_drag){
        g_drag = 0;
        g_drag_seek = x / area;
        g_drag_seek = (g_drag_seek<0) ? 0 : (g_drag_seek<1) ? g_drag_seek : 1;
        fb.PlaybackTime = fb.PlaybackLength * g_drag_seek;
    }
}

function on_mouse_move(x,y){
    if(g_drag){
        g_drag_seek = x / area;
        g_drag_seek = (g_drag_seek<0) ? 0 : (g_drag_seek<1) ? g_drag_seek : 1;
        window.Repaint();
    }
}

function on_playback_new_track(metadb){
    window.Repaint();
}

function on_playback_stop(){
    window.Repaint();
}

function on_playback_seek(time){
    window.Repaint();
}

function on_playback_time(time){
    window.Repaint();
}

// --- APPLICATION END

mexx

#8
Jep, lööpt und sieht schon mal gut aus. Danke  :top:

Aber die Rating-Sterne liegen übereinander. (s.Bild) und bei Rating 5 werden nur 4 grüne Sterne angezeigt.

Vielleicht kannst du da noch etwas nachbessern.

Major_Tom

Versuche in dieser Zeile

gr.WriteText(txt_rating_b, g_font_rating, RGB(255,0,0), ww-120, 0, 105, wh, 1, 2, 1);

den Wert 105 durch 140 zu ersetzen - passt dann zumindest bei mir, vlt. musst du etwas mit dem Wert herumspielen, damit es bei dir auch passt

mexx

Ich hatte das gerade selbt probiert und den Wert auf 155 gesetzt. Jetzt funktioniert es. Trotzdem danke für den funktionierenden Tip.  :top:

Allerding bleibt es dabei, das bei Rating 5 nur 4 Sterne angezeigt werden. Da hab ich noch keine Lösung gefunden.

ASopH

Hallo,

für welche JS-Panel-Version ist das Script geschrieben?
Bei mir kommt dieser Fehler:

JScript Panel 3.5.1 (id:332202)
Laufzeitfehler in JavaScript
Das Objekt unterstützt die Eigenschaft oder Methode "draw" nicht
File: <main>
Line: 49, Col: 9

vielen Dank füer Eure Mühe

Major_Tom

#12
Zitat von: mexx in 20. Mai 2024, 13:16:50Ich hatte das gerade selbt probiert und den Wert auf 155 gesetzt. Jetzt funktioniert es. Trotzdem danke für den funktionierenden Tip.  :top:

Allerding bleibt es dabei, das bei Rating 5 nur 4 Sterne angezeigt werden. Da hab ich noch keine Lösung gefunden.

Die Breite von 110 ist zu schmal für den 5. Stern - in der 1. Zeile den Wert auf 140 erhöhen sollte das Problem lösen

Major_Tom

Zitat von: ASopH in 20. Mai 2024, 13:22:11Hallo,

für welche JS-Panel-Version ist das Script geschrieben?
Bei mir kommt dieser Fehler:

JScript Panel 3.5.1 (id:332202)
Laufzeitfehler in JavaScript
Das Objekt unterstützt die Eigenschaft oder Methode "draw" nicht
File: <main>
Line: 49, Col: 9

vielen Dank füer Eure Mühe


3.5.1 - den Fehler kann ich nicht nachvollziehen, da es rund um Zeile 49 weit und breit keinen Draw-Befehl gibt.

Hast du das gesamte Script kopiert?

ASopH

Upps, hatte noch etwas in der Text-Datei mitgespeichert und in das Panel kopiert - mein Fehler, sorry