vertical text

windspirit's icon

hey. i was wondering if there is a way to vertically align (or to right-align, that would be nice too) text in a text edit box. I tried making the box really skinny so that there is only room for one letter at a time but it looks really ugly and confusing when you try to edit it. I am trying to label the different columns of a matrix so that the user can rename each column.

running max 5 on an xp sp3

thx

Floating Point's icon

There's a bloke named Nick
Who wrote a brick
super slick
real sick
it'shttp://www.loadbang.net/space/Software/textbrick

windspirit's icon

thats acceptable but is there something that you can edit directly like with text edit?

nick rothwell | project cassiel's icon

You can bash the text in from a coll file (which is what I do in the example patcher); or you could hand-edit the XML file used by pattr.

windspirit's icon

sorry, guess i should have done this earlier, but here's what i'm trying to do with the text. You can click on it and edit it right away, but notice how the letters repeat and spaces dont show up on the top when you click. I could have a dialog box open every time you click a section of the brick but it's a little nicer to just enter it.

(matrixcntrl is probably missing the cell image file so just ignore that part.

Max Patch
Copy patch and select New From Clipboard in Max.

Luke Hall's icon

I had a look inside textbrick jsui and found out what makes it tick. Here's my own less clever version that I've been tinkering with recently. If you hook up a [key] object to it then it'll work like a sideways [textedit] more or less. There's obviously quite a few things that it doesn't do just yet. I haven't set functions for changing colours or interfacing with the pattr system or saving the text contents with the patcher which are all possible. It also doesn't have a cursor which could be a bit annoying but the highlighting should make it a bit clearer. It should help you straight out of the box but if you know a bit of javascript dive right in and make some changes/additions, if you do then please get back to me about it!

lh

// textdraw.js
var rot_sketch = new Sketch(sketch.size[1],sketch.size[0]);
var selected = 0;
var hl = [0.9, 0.9, 0.9, 1];
var bg = [1, 1, 1, 1];

var t_size = 20;
var t_font = "Arial";
var t_halign = "left";
var t_valign = "centre";
var t_dir = 0;

var k_all = [];
var k_text;

var vborder = 8;
var hborder = 8;
var mod = 5;

x = arrayfromargs(jsarguments); // make function append compatable
for (i=1; i
{
for (j=0; j
k_all.push(x[i].charAt(j));
if (i != x.length-1)
k_all.push(" ");
}
k_text = k_all.join("");
draw();

function draw()
{
with (rot_sketch)
{
if (selected == 1)
glclearcolor(hl);
glclear();
if (t_dir == 1)
moveto(screentoworld(vborder,t_size+hborder-mod));
else
moveto(screentoworld(vborder,sketch.size[0]-hborder));
fontsize(t_size);
font(t_font);
textalign(t_halign, t_valign);
text(k_text);
}
var rot_image = new Image(rot_sketch);
rot_image.swapxy();
if (t_dir == 1)
rot_image.flip(0,1);
else
rot_image.flip(1,0);
sketch.copypixels(rot_image);
refresh();
}

function onidleout()
{
selected = 0;
rot_sketch.glclearcolor(bg);
draw();
}

function onidle()
{
rot_sketch.glclearcolor(hl);
draw();
}

function onclick()
{
selected = 1;
}

function msg_int(k_new)
{
if (selected == 1)
{
if (k_new == 13)
{
selected = 0;
rot_sketch.glclearcolor(bg);
}
else if (k_new == 8 ) // stupid forum!
k_all.splice(k_all.length-1,1);
else
k_all.push(String.fromCharCode(k_new));
k_text = k_all.join("");
draw();
}
}

function ondblclick()
{
clear();
}

function clear()
{
k_text = "";
k_all = [];
draw();
}

function direction(x)
{
t_dir = x;
draw();
}

function onresize()
{
rot_sketch = new Sketch(sketch.size[1],sketch.size[0]);
draw();
}

function fontname(x)
{
t_font = x;
draw();
}

function fontsize(x)
{
t_size = x;
draw();
}

function append()
{
x = arrayfromargs(arguments);
for (i=0; i
{
for (j=0; j
k_all.push(x[i].charAt(j));
if (i != x.length-1)
k_all.push(" ");
}
k_text = k_all.join("");
draw();
}
// EOF

Max Patch
Copy patch and select New From Clipboard in Max.

Rio's icon

Hi, I got the following error message:

js: textdraw.js: Javascript ReferenceError: Sketch is not defined, line 0

thanks for your script!

Luke Hall's icon

It needs to be loaded into a [jsui] and not a [js] which might be your problem. If not then it's probably the forum chomping some of it away. It tried to turn the line: "else if (k_new == 8)" into a smiley wearing sunglasses. I've zipped it up and attached it here just in case.

I've been toying with javascript quite a lot recently, it's quite addictive. I'm going to tidy up a few of my scripts and make them available from my website along with a handful of abstractions too. Watch this space.

lh

Rio's icon

thanks, it's the path problem.

By the way, I suggest you to change the script name to something like "VTextDraw" to literally represent what it does.

Double click to clean the content is a bit confusing to me. Since there is no cursor to represent whether the box is in edit mode, a naive user may simply double click try to edit the text, which cleans up the text.

Or use 2 different background alpha color to represent edit/select mode?

thanks again,

Luke Hall's icon

Those are both good ideas. I started a while ago trying to create something a bit like textbrick, then I discovered textbrick and realised I didn't need to carry on. I only restarted when this thread appeared requesting the [key] functionality.

I'll have a look at adding in some kind of cursor as that would make a lot of sense but I don't know how easy it will be. For now I'll implement the different background colours for the highlighted and selected modes. I could always change the delete function to something like shift+click, I don't think that will cause any sort of problems when out of edit mode. What do you think? I'm heading out to work in a bit but I'll make the changes when I get home and post it on this thread.

lh

Luke Hall's icon

Added the select and highlight colours which you can change with messages. Also changed the deleting from double click to shift click. I'll put this up on my website soon so I don't have to keep posting the code to the forum. Any other recommendations then let me know, I'm off to the pub!

lh

// still textdraw.js
var rot_sketch = new Sketch(sketch.size[1],sketch.size[0]);
var selected = 0;
var selcol = [0.9, 0.9, 0.9, 1];
var hlcol = [0.8, 0.8, 0.8, 1];
var bg = [1, 1, 1, 1];

var t_size = 20;
var t_font = "Arial";
var t_halign = "left";
var t_valign = "centre";
var t_dir = 0;

var k_all = [];
var k_text;

var vborder = 8;
var hborder = 8;
var mod = 5;

x = arrayfromargs(jsarguments);
for (i=1; i
{
for (j=0; j
k_all.push(x[i].charAt(j));
if (i != x.length-1)
k_all.push(" ");
}
k_text = k_all.join("");
draw();

function draw()
{
with (rot_sketch)
{
if (selected == 1)
glclearcolor(selcol);
glclear();
if (t_dir == 1)
moveto(screentoworld(vborder,t_size+hborder-mod));
else
moveto(screentoworld(vborder,sketch.size[0]-hborder));
fontsize(t_size);
font(t_font);
textalign(t_halign, t_valign);
text(k_text);
}
var rot_image = new Image(rot_sketch);
rot_image.swapxy();
if (t_dir == 1)
rot_image.flip(0,1);
else
rot_image.flip(1,0);
sketch.copypixels(rot_image);
refresh();
}

function onidleout()
{
selected = 0;
rot_sketch.glclearcolor(bg);
draw();
}

function onidle()
{
rot_sketch.glclearcolor(hlcol);
draw();
}

function onclick(x,y,but,mod,shift)
{
if (shift)
clear();
else
selected = 1;
draw();
}

function msg_int(k_new)
{
if (selected == 1)
{
if (k_new == 13)
{
selected = 0;
rot_sketch.glclearcolor(bg);
}
else if (k_new == 8 )
k_all.splice(k_all.length-1,1);
else
k_all.push(String.fromCharCode(k_new));
k_text = k_all.join("");
draw();
}
}

function clear()
{
k_text = "";
k_all = [];
draw();
}

function direction(x)
{
t_dir = x;
draw();
}

function onresize()
{
rot_sketch = new Sketch(sketch.size[1],sketch.size[0]);
draw();
}

function fontname(x)
{
t_font = x;
draw();
}

function fontsize(x)
{
t_size = x;
draw();
}

function append()
{
x = arrayfromargs(arguments);
for (i=0; i
{
for (j=0; j
k_all.push(x[i].charAt(j));
if (i != x.length-1)
k_all.push(" ");
}
k_text = k_all.join("");
draw();
}

function bg_colour(a, b, c, d)
{
bg = arrayfromargs(arguments);
draw();
}

function sel_colour(a, b, c, d)
{
selcol = arrayfromargs(arguments);
draw();
}

function hl_colour()
{
hlcol = arrayfromargs(arguments);
draw();
}
//EOF

textdraw.maxhelp

Max Patch
Copy patch and select New From Clipboard in Max.

snaper's icon

Is there any chance to re-post the helper?
Can't instert it into max 6

Martin.Jirsak's icon

Hi,

I would also like to ask for re-post the JS file. All for loops seems to be corrupted (the text is not complet).

Thanks a lot!

AudioMatt's icon

There seems to be an entropic force on this forum. That code is totally mangled. You know it wasn't like that when it was posted!