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: Making a custom volume bar with JScript? (Read 1347 times) previous topic - next topic
0 Members and 1 Guest are viewing this topic.

Making a custom volume bar with JScript?

Hello!

I found a really neat volume bar online that I would like to add to my layout, but I don't know how to code it, because I barely know any JScript.
Could you, please, help me with coding this?

Re: Making a custom volume bar with JScript?

Reply #1 –
A volume bar script is probably a good one to start learning with, because it is basically a set of simple geometric shapes. The most "complex" part is adjusting the coordinates with the fb.Volume property. But of course you will need to know the basics of JScript, before you even get there. I warmly suggest you take a look at the "Volbar with GdiDrawText" sample doc. When I had just started learning jscript, this was the first script I managed to make sense of, and it has been a turning point for me.
 
I'm late

Re: Making a custom volume bar with JScript?

Reply #2 –
The bar I linked seems a little bit different from the sample, mostly because of the percentage display and the cursor. Do you know how could I add those 2?

Re: Making a custom volume bar with JScript?

Reply #3 –
Quote from: PopandilaRO on
The bar I linked seems a little bit different from the sample, mostly because of the percentage display and the cursor. Do you know how could I add those 2?

Until someone more knowledgeable answers:

- Above mentioned "Volbar with GdiDrawText" has a txt display in dB. It should not be difficult to replace it with a math equation that gives percentages instead and replace "dB" text with "%" I don't know if it's meant to be logarithmic or linear which I'm guessing  would require some conversion.

- about the cursor: in "function on_paint(gr)" section you'd need to add another "gr.FillSolidRect" or "gr.FillGradRect"
function with a fixed or relative width, full height and perhaps starting at pos - whatever width you choose (?). I modified some seekbar samples fiddling until it looked as expected :) .

- at a glance, it might be easier to start with "volume.txt" sample from /samples/complete directory of jscript_panel. Add bar/cursor ("gr.FillSolidRect") and then text. Both in "function on_paint(gr)" section. You'd need to copy or create text related "var" section, for example font, "var g_font = gdi.Font('Segoe UI', 12, 0);".
 

Re: Making a custom volume bar with JScript?

Reply #4 –
For "volume.txt" sample to add a cursor/bar add:
Code: [Select]
volume.c3 = _RGB(255, 255, 255);
after volume.c2.. and
Code: [Select]
gr.FillSolidRect(volume.x + volume.pos(), volume.y, 10, volume.h, volume.c3);
in function on_paint(gr) section
- Only problem is that it  disappears at the end so there should be a solution for that but it's a start  :)

Re: Making a custom volume bar with JScript?

Reply #5 –
Quote from: PopandilaRO on
The bar I linked seems a little bit different from the sample, mostly because of the percentage display and the cursor. Do you know how could I add those 2?


Yes the sample volume bar is not similar to the one you want, I pointed you to that script because I thtink it's an easy one to start learning jscript. Anyway, all the basic functionalities you need are shown in the sample script. The text is displayed by the GdiDrawText function, in the on_paint callback. The displayed text is defined by the variable txt. You can change line 17 to something like
Code: [Select]
let txt = "Volume: " + Math.round(100*vol2pos(volume)) + " %";
to make it similar to the one you posted.

The sample script also shows how the cursor machinery works: basically the on_mouse_move event sets the volume according to the mouse position, triggering the on_volume_changed callback, which in turn triggers a repaint action. Honestly I don't really understand the code in the on_mouse_move function, and the cursor actually doesn't move. If you replace it with this:
Code: [Select]
function on_mouse_move(x, y) {
    if (g_drag) {
        let pos = (x < 0 ? 0 : (x / ww));
        let v = pos2vol(pos);
		if(fb.Volume != v)fb.Volume = v;
    }
}

it works.

Once you understand the logic of the script, you can edit the on_paint function to change the layout to your likes.
I'm late