JS Painter and itable
Hi all you Maxers,
So I've made a little JS Painter file that darkens the lowest row of an itable. Code is below in case it is useful for you; it is for me.
But: What I'd really like to do is highlight the *column* corresponding to the integer last received in the left inlet (in other words: show me what you are outputting!)
Anyone know if and how I can query this value in a JS Painter file?
Thanks!
John
function paint()
{
var viewsize = mgraphics.size;
var width = viewsize[0];
var height = viewsize[1];
var range = box.getattr("range");
var size = box.getattr("size");
mgraphics.parentpaint();
mgraphics.set_source_rgba(0,0,0,.55);
mgraphics.rectangle(0, height-(height/range), width, height);
mgraphics.fill();
}
Hi John,
Feed in integer in the left inlet, doesn't cause a repaint of the itable. So you should look for another workaround.
-N
Generally I am a big fan of the JS Painter, but I don't think there is a way to do what you want,
You (and I know I would) might try to re-implement the itable in a JSUI so I can have access to all its incoming messages, stored values etc as well as the paint function.
The following is the fastest approach, and probably what I would end up using.
-N
Sorry for the multiple posts,
just forgot, in the patcher I sent above, set the multislider to "ignore click".
Thanks, Nikolas, that's a great solution.
Nice use of bucket as well.
What was in your testtable.js JS Painter file?
it was the paint function from your post!
Glad I could help!
Cheers!
Here is another JS Painter file for the itable that darkens the rows corresponding to MIDI "black keys" assuming 0 = C. Below the .js is a test patcher.
It's functional; but if anyone has any suggestions on how to make it more attractive, please let me know. Depending on the window size, there are 1-pixel errors in the height of the grey bars drawn over the default UI, leading to a not-clean look.
function paint()
{
var viewsize = mgraphics.size;
var width = viewsize[0];
var height = viewsize[1];
var range = box.getattr("range");
var size = box.getattr("size");
var blackKeys = [1,3,6,8,10]
mgraphics.parentpaint();
mgraphics.set_source_rgba(0,0,0,.55);
for (i=0; i
for (j=0; j
if (i % 12 == blackKeys[j]){
mgraphics.rectangle(0, height - (height/range) * (i+1), width, height/range );
mgraphics.fill();
}
}
}
}
Hi John,
this seems to do the trick (just replace it in the code):mgraphics.rectangle(0, Math.round(height - (height/range) * (i+1)), width, Math.round(height/range) );
If you notice, the itable dots, are always "integer" amount of pixels high, and some times they have a 1 pixel space between them (on the Y axis).
This is due to rounding (I think) so I just added the Math.round() to round values to the nearest integer.
-N
Yes, thanks! I guess that mgraphics.rectange() converts floats to ints by truncating, and mgraphics.parentpaint() does so by rounding. Your solution makes them match; perfect! If you have some JS Painter files that you'd be wiling to share, I'd be interested to see them. It's feeling like a very useful part of Max at the moment; and since Trump was just elected president, I'm going to close the blinds, lock myself at home, and hack Max and JS until I can bear to see other humans again.
Hi John,
sorry for the super-late response. To be honest, I don't have any special stuff. Usually, any GUI object i want to specially draw, I do in JSUI from scratch as I mentioned before, so I can have access to any value used.
I use the Js Painter mostly with [textbutton] to show custom icons. If you take a look at my project vStack, you will see various (simple) icons that are made for the JS Painter. The waveform and the sliders, which are more special UI items, are made in JSUI from scratch.
The one thing I do use as a "hack" is using the annotation attribute to pass values to the paint() function when using JS painter.
I'll include 2 examples where I use annotation for different things to check them out!
Hope you find it interesting!
-N
Hi Nikolas,
That's a great hack! I can see the effect in SEMIROUNDEDPANEL. Is there meant to be a visual effect in ANNOTATIONS_EXAMPLE?
John
Sorry about that, the "clipValue" function is one of mine, so you should get an error it doesn't exist.
Replace the whole var scale = (clipValue ......... line (should be the 11th or so line), with the follow two and it should be ok.
var scale = (typeof(annList) == "number" ? annList : annList[0]);
scale = scale < 0.15 ? 015 : (scale > 1.0 ? 1.0 : scale);The visual effect should be that the X at the [textbutton] will "move" forward and backwards.
-N
Thanks looks great!