Skip to main content ↑ ↓

Notice

Please note that most of the software linked on this forum is likely to be safe to use. If you are unsure, feel free to ask in the relevant topics, or send a private message to an administrator or moderator. To help curb the problems of false positives, or in the event that you do find actual malware, you can contribute through the article linked here.
Topic: JScript Panel script discussion/help (Read 288690 times) previous topic - next topic
0 Members and 1 Guest are viewing this topic.

Re: JScript Panel script discussion/help

Reply #927 –
Quote from: grimes on
aligment

I made the same typo in my docs and noticed/fixed it some time ago but didn't think to check the samples at the same time. It will be fixed in the next release, thanks.

As for the text reader title, you can insert this directly after var panel = new _panel();

Code: [Select]
panel.draw_header = function (gr, text) {
	gr.WriteText(text, this.fonts.title, this.colours.highlight, LM, 0, this.w - (LM * 2), TM, DWRITE_TEXT_ALIGNMENT_CENTER, DWRITE_PARAGRAPH_ALIGNMENT_CENTER, DWRITE_WORD_WRAPPING_NO_WRAP, DWRITE_TRIMMING_GRANULARITY_CHARACTER);
	gr.DrawLine(LM, TM + 0.5, this.w - LM, TM + 0.5, 1, this.colours.highlight);
}

Re: JScript Panel script discussion/help

Reply #928 –
Quote from: etip on
Quote from: marc2k3 on
As an alternative, knocking up an SVG in plain text and using utils.LoadSVG would probably work.

Thanks for the answer. Would you mind pointing me into a direction that would help me to understand the above ? (got to say, didnt get the whole sentence).
The point is that SVG is a vector graphics format where the graphics are defined using descriptions of (say) a circle at coordinate something, so it should be possible to build an SVG using code, and then load the SVG to create the graphic.
It's your privilege to disagree, but that doesn't make you right and me wrong.

Re: JScript Panel script discussion/help

Reply #929 –
ok, so i've built the SVG file (not using code yet) and here it is :
Code: [Select]
<svg height="300" width="300" viewBox = "0 0 40 40">
 <circle cx="10" cy="10" r="10" fill="black" />
 <circle cx="10" cy="10" r="5" stroke="red" stroke-width="10" stroke-dasharray="calc(25 * 31.42 / 100) 31.42" transform= "rotate(-90) translate (-20)" fill="transparent" />
</svg>
when i try this code on Codepen.io i have the following result :
X
and when i'm loading this SVG file using the recommended method :
Code: [Select]
this.img = utils.LoadSVG(svg_file);
i have this result :
X

if you think i'm doing something wrong please let me know, otherwise, dont bother, took me the whole evening to just do that :) writing the SVG sounds like a mountain to me :)


Re: JScript Panel script discussion/help

Reply #930 –
Seems like calc() is for CSS (cascading style sheets in browsers) so you shouldn't be using it.

I really have no idea about any of it so you really are on your own.

edit: this is the SVG library I'm using.

https://github.com/sammycage/lunasvg

You can check the features/TODO sections of the readme.

Re: JScript Panel script discussion/help

Reply #931 –
Quote from: etip on
ok, so i've built the SVG file (not using code yet) and here it is :
Nice try!

Quote from: marc2k3 on
Seems like calc() is for CSS (cascading style sheets in browsers) so you shouldn't be using it.

...so try this:
Code: [Select]
<svg height="300" width="300" viewBox = "0 0 40 40">
 <circle cx="10" cy="10" r="10" fill="black" />
 <circle cx="10" cy="10" r="5" stroke="red" stroke-width="10" stroke-dasharray="7.855 31.42" transform= "rotate(-90) translate (-20)" fill="transparent" />
</svg>
It's your privilege to disagree, but that doesn't make you right and me wrong.

Re: JScript Panel script discussion/help

Reply #932 –
Ok, i've just done a copy/paste of the SVG without the calc and here is the result :
X

Not there yet but much closer ! thanks.
i'll investigate further tomorrow but yeah, instead of calculating it using SVG, i will calculate it in JS and write the result in the svg file ... i'll start tomorrow.
Thanks !

Re: JScript Panel script discussion/help

Reply #933 –
You don't need to use an SVG file. You could create a string manually...

Code: [Select]
function create_svg(args) {
    var svg ='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">\n';
    
    //do stuff with args
    svg += ...

    //done
    svg += '</svg>\n';
    return utils.LoadSVG(svg);
}

var img = create_svg(...);

Adding the \n at the end of each line isn't necessary but it would help make it readable if you need to dump it to the console for easy reading.

Re: JScript Panel script discussion/help

Reply #934 –
oh wow that sounds much easier now :)
thanks !

Re: JScript Panel script discussion/help

Reply #935 –
ok so i've tried to generate the SVG text :
Code: [Select]
function create_svg(numbr) {
	numbr[0] = 100; numbr[1] =  25; numbr[2] = 25; numbr[3] = 50; 
	var color = [];
	var radius = 40;
	var offset = 0;
	var circumf = 2 * Math.PI * radius;
	color[1] = "blue"; color[2] = "red"; color[3] = "yellow";
    var svg ='<svg height="500" width="500" >\n';
    for (var i = 1 ; i< numbr.length; i++) {
		var sliceAngle = numbr[i]/numbr[0]*circumf;	
		svg +='<circle r="' + radius + '" cx="100" cy="100" fill="none"\n';
		svg +='stroke="' + color[i] + '"\n';
		svg +='stroke-width="'+radius * 2 +'"\n';
		svg +='stroke-dasharray="'+ sliceAngle + ' ' + circumf + '"\n'
		svg +='stroke-dashoffset="'+offset +'"/>\n'
		offset-=sliceAngle;
	}
    svg += '</svg>\n';
    return utils.LoadSVG(svg);
}
I reset the numbr array for simplicity.
Here is the result :
X
So it works well except the black triangles in the center, i have not idea where they are coming from

Also, the
Code: [Select]
fill="transparency"
that i was using before in the SVG is not recognized. It has to be replaced by
Code: [Select]
fill="none"
. Maybe it's the reason for the black triangles...

Thanks for the help !

Re: JScript Panel script discussion/help

Reply #936 –
I might look at switching the SVG library soon. The developer of Columns UI (musicmusic) is making a fb2k component which provides an alternative SVG rendering backend for components to use. No idea how long this will take - it looks like work only started on it yesterday.

https://github.com/reupen/svg-services/pull/1

 

Re: JScript Panel script discussion/help

Reply #937 –
Sounds promising !
Too bad he's not committing to Text (the other library "Sammycage" didnt either).

Re: JScript Panel script discussion/help

Reply #938 –
Quote from: etip on
So it works well except the black triangles in the center, i have not idea where they are coming from
With all due respect to the writer of the SVG library, I wonder how well debugged it is!
It's your privilege to disagree, but that doesn't make you right and me wrong.

Re: JScript Panel script discussion/help

Reply #939 –
Quote from: fooball on
With all due respect to the writer of the SVG library, I wonder how well debugged it is!
well, here is the final result, using my library data.
I dont see anymore these black triangles (even though i'm using the same algorithm that led to these triangles), i think there is only a slight issue to close the pie at roughly 359°.
Biggest issue however is the inability to use Text so i cannot integrate labels & percentage in the graph itself.
X

Re: JScript Panel script discussion/help

Reply #940 –
Impressive.
It's your privilege to disagree, but that doesn't make you right and me wrong.

Re: JScript Panel script discussion/help

Reply #941 –
marc2k3, I'm using DrawImage (normal album art and blurred at the background) and Writetext (fb.TitleFormat("%playback_time%")) on the same panel. As I understand for the playback time to be updated every second, I should use
Code: [Select]
function on_playback_time() {window.Repaint();}
The issue I noticed is with playing 24bit/44Hz Flac files only and using Spectrum Analyzer - it somehow freezes every second, so I though it is related to that window.Repaint. When I delete lines for showing album art - there is no freeze. If I leave album art but delete function on_playback_time - no freeze but also playback time is not updating.

Function for albumart:
Code: [Select]
function update_album_art() {
	if (g_img) g_img.Dispose();
	g_img = null;
	g_metadb = fb.IsPlaying ? fb.GetNowPlaying() : fb.GetFocusItem();
	if (g_metadb) {
		g_img = g_metadb.GetAlbumArt(); // omitting the type defaults to front
		if (g_img) {
			blur_img = g_img.Clone();
			blur_img.StackBlur(radius);
		} 
	}
	window.Repaint();
}

Is there a way to do repaint for playback time only or am I getting blurred image in a wrong way?

Re: JScript Panel script discussion/help

Reply #942 –
Use window.RepaintRect with the same x,y,w,h as your WriteText.

https://marc2k3.github.io/jscript-panel/docs/namespaces/window/#windowrepaintrectx-y-w-h

If it's currently the whole panel, fix it to a smaller area just large enough for the playback time.

Re: JScript Panel script discussion/help

Reply #943 –
hey there,
I'm stuck again, and need help !
I'm trying to have a 2 states button (active/inactive) so the
Code: [Select]
var buttons = new _buttons();
buttons.update = function () {
	this.buttons.stop = new _button(100, 0, 35, 35, { char : chars.stop, colour: RGB(255, 250, 250)}, null, function () { console.log("foo");}, 'foo');
	this.buttons.Text = new _button(150, 0, 35, 35, { char : chars.console, colour : RGB(255, 250, 250)}, null, function () { console.log("bar"); }, 'bar');
}
in the "Track info + Seekbar + Buttons.txt" example looks perfect for that as i can play with the "char" element.
Also, i have other buttons in the panel using the "SimpleThemedButton + Tooltip" example (i do prefer the round style of the buttons.
My issue is that i dont really understand how to trigger the function
Code: [Select]
console.log("foo")
Here is the Left mouse button up function that is supposed to manage both buttons type :
Code: [Select]
function on_mouse_lbtn_up(x, y) {
	g_down = false;
	if (buttons.lbtn_up(x, y)) {
		return;
	}
	if (cur_btn) {
		if (cur_btn.func) cur_btn.func();
		cur_btn.changeState(ButtonStates.hover);
		window.Repaint();
	}
}
As you can see, i didnt touch the original "SimpleThemedButton + Tooltip" function but i simply added
Code: [Select]
if (buttons.lbtn_up(x, y)) {
		return;
	}
to follow the example of "Track info + Seekbar + Buttons.txt"

Well, when  i click on the this.buttons.stop, nothing happens.
Am i doing something wrong, is that feasible at all ?

thanks

Re: JScript Panel script discussion/help

Reply #944 –
Are you calling buttons.move(x,y) from on_mouse_move and are tooltips appearing over the buttons? Executing button clicks inside on_mouse_lbtb_up is entirely dependent on that working properly.

Re: JScript Panel script discussion/help

Reply #945 –
well i wasn't and the
Code: [Select]
if (buttons.move(x, y)) {
		return;
	}
in the on_mouse_move(x, y) did the trick.
re the tooltip, it appears randomly for a very short while i'll investigate tonight.

Thanks Marc !!

Re: JScript Panel script discussion/help

Reply #946 –
@etip

I'm currently in the process of migrating my SVG rendering code to use musicmusic's component I mentioned earlier. It has no issues with that pie chart...



But it is about 2.5MB for the 64bit version which I'm testing with. I guess the 32bit version is probably a bit smaller.

Re: JScript Panel script discussion/help

Reply #947 –
sounds good, how do you measure the size ? seems high for a simple pie chart

Edit : can you use : fill="transparent" ?

Re: JScript Panel script discussion/help

Reply #948 –
Yes the fill is transparent. I used this from a earlier post of yours but where fooball had replaced the calc() code with actual values.

Code: [Select]
<svg xmlns="http://www.w3.org/2000/svg" height="300" width="300" viewBox = "0 0 40 40">
 <circle cx="10" cy="10" r="10" fill="black" />
 <circle cx="10" cy="10" r="5" stroke="red" stroke-width="10" stroke-dasharray="7.855 31.42" transform= "rotate(-90) translate (-20)" fill="transparent" />
</svg>

There are some changes:

1) The opening svg tag has to include this...

Code: [Select]
xmlns="http://www.w3.org/2000/svg"

2) width and height arguments are mandatory eg var img = utils.LoadSVG(svg_text, w, h);

Re: JScript Panel script discussion/help

Reply #949 –
yep, looks much better, i think the reason why is that "Transparent" is supported which wasnt the case with previous component.

quick question the new Width and height arguments, are they the 'height="300" width="300" ' from the SVG file ?