gobo

I try to move a text in jsui. .That it is easy but the problem is that i cannot know how to limit my text to go away from the sides of a jsui.

How can i find the dimension of the text. Now i just approximate this dimension

I will give my patch with jsui. Thanks in advance.

// //////////////////////////////////////////////////////////////////

minute = ( minute < 10 ? "0" : "" ) + minute ;

second = ( second < 10 ? "0" : "" ) + second;

var timeOfDay = ( hour < 12 ) ? "AM" : "PM";

var currentTimeString = hour + ":" + minute + ":" + second + " " + timeOfDay ;

post("width", width, " height", height, "n");

I try to move a text in jsui.  .That it is easy but the problem is that i cannot know how to limit my text to go away from the sides of a jsui. 

How can i find the dimension of  the text. Now i just approximate this dimension

if (x
    else if (x>(width-113)) x = width - 113;
    if (y
    else if (y>height) y = height;

//
sketch.default2d();
var vtask = new Task(taskfun);
var vdate = new Date();
outlets = 4;
var q = 20

vtask.interval = 1000;
vtask.repeat();
draw();

// text position
var xt = -4
var yt = -0.8

var hour = vdate.getHours();
        var minute = vdate.getMinutes();
        var second = vdate.getSeconds();
minute = ( minute < 10 ? "0" : "" ) + minute ;
second = ( second < 10 ? "0" : "" ) + second;
var timeOfDay = ( hour < 12 ) ? "AM" : "PM";
hour = ( hour > 12 ) ? hour - 12 : hour;
hour = ( hour == 0 ) ? 12 : hour;

var currentTimeString = hour + ":" + minute + ":" + second + " " + timeOfDay ;
// post(currentTimeString);
    with (sketch) {
        fontsize(q);
glclear();

        glcolor(0,0,1,0.7);
        moveto(w);

        text(currentTimeString);
         refresh();

function bang()
{
    draw();
    refresh();

function taskfun()
{
    vdate = new Date();
    draw();
    refresh();
}

function onresize(w,h)
{
draw();
refresh();
}
onresize.local = 1; //private 

function onclick(x,y)
{
    ondrag(x,y);
}
onclick.local = 1; //private

var width = box.rect[2] - box.rect[0];
    var height = box.rect[3] - box.rect[1];
 if (x
    else if (x>(width-113)) x = width - 113;
    if (y
    else if (y>height) y = height;
w = sketch.screentoworld(x,y)
outlet(2,y);
    outlet(3,x);

xt = x/width;
    yt =1- y/height;
post("width", width, " height", height, "n");
    notifyclients();
    bang();

finding-how-long-is-my-text

You can use sketch.gettextinfo() to find the size of the string you are writing. Set a variable in your global code then store it when you write the currentTimeString to the screen. It will be an array containg the width and height of the text in pixels which you can then access in your ondrag() function.

var texti = sketch.gettextinfo(currentTimeString);

The problem is that I don't know how to use this " currentTimeString" outside the function, in the global code

//_____________________________________________

// inside the function the the time is update every 1000 ms

// outside the function the time is not update every 1000 ms

// ___________________________________________________________

I think it is because return the function stops working, it doesn't execute any more lines, or maybe because i'm too dumb to understand.

var vtask = new Task(taskfun);
var vdate = new Date();

function ceas ()
{
    var vdate1 = vdate;
    var hour = vdate1.getHours();
            var minute = vdate1.getMinutes();
            var second = vdate1.getSeconds();
    minute = ( minute < 10 ? "0" : "" ) + minute ;
    second = ( second < 10 ? "0" : "" ) + second;
    var timeOfDay = ( hour < 12 ) ? "AM" : "PM";
    hour = ( hour > 12 ) ? hour - 12 : hour;
    hour = ( hour == 0 ) ? 12 : hour;

    var currentTimeString = hour + ":" + minute + ":" + second + " " + timeOfDay ;

post ("long text =  " + texti);
post( "w = " + texti[0]);
post( "h = " + texti[1]);
post();

// inside the function the the time is update every 1000 ms
post ("ceas" + currentTimeString);
post();
return currentTimeString; 

// outside the function the time is not update every 1000 ms
var clock = ceas ();
post ("clock " + clock)

function taskfun()
{
    vdate = new Date();
  ceas();

First you have to declare the variable in the global code otherwise it won't be available in functions other than the one in which it was declared. Then you can set it in your draw() function and query it in your ondrag() function.

// global code
var text_size;

// in draw() function
text_size = sketch.gettextinfo(currentTimeString);

// in ondrag() function
x = Math.max(0,Math.min(width-text_size[0],x));
y = Math.max(0,Math.min(height-text_size[1],y));



Thanks Luke, I try to understand what is wrong what my code but i'm blocked

I insist on this code because i think if i will understand I can use the same technique for other things .

I declared watch like global variable. I want to find that time to be update every second outside the function ceas

Thanks Luke, I try to understand what is wrong what my code but i'm blocked
I insist on this code because i think if i will understand I can use the same technique for other things .

function ceas ()
{
var vdate1 = vdate;
var hour = vdate1.getHours();
var minute = vdate1.getMinutes();
var second = vdate1.getSeconds();
minute = ( minute < 10 ? "0" : "" ) + minute ;
second = ( second < 10 ? "0" : "" ) + second;
var timeOfDay = ( hour < 12 ) ? "AM" : "PM";
hour = ( hour > 12 ) ? hour - 12 : hour;
hour = ( hour == 0 ) ? 12 : hour;

var currentTimeString = hour + ":" + minute + ":" + second + " " + timeOfDay ;
watch = currentTimeString
var texti = sketch.gettextinfo(currentTimeString);

// post ("long text = " + texti);
// post( "w = " + texti[0]);
// post( "h = " + texti[1]);
 // post();

// inside the function the the time is update every 1000 ms
// post ("ceas" + currentTimeString);
// post();
return watch;

// outside the function the time is not update every 1000 ms
var clock = new ceas ;

post ("clock" + watch);
function taskfun()
{
vdate = new Date();

// ___________________________________________________________


I just edited your original code to see if I could show you what I meant. I apologise that my previous example for the ondrag() function wasn't quite right but this seems to work well. I've even added an offset variable to tidy the borders up a bit. You'll notice that variables used in more than one seperate {block} of code are defined globally right at the beginning. I've also tidied a few other things up, or example: you don't need to to set the width and height each time you update, just each time you resize the [jsui]. I hope it helps.

var pos;
var offset = 5;
var text_size = [];
var width = box.rect[2] - box.rect[0];
var height = box.rect[3] - box.rect[1];

var vtask = new Task(taskfun);
vtask.interval = 1000;
vtask.repeat();

function taskfun() {
    vdate = new Date();
    draw();
}

function draw() {
    var hour = vdate.getHours();
    var minute = vdate.getMinutes();
    var second = vdate.getSeconds();
    minute = ( minute < 10 ? "0" : "" ) + minute;
    second = ( second < 10 ? "0" : "" ) + second;
    var timeOfDay = ( hour < 12 ) ? "AM" : "PM";
    hour = ( hour > 12 ) ? hour - 12 : hour;
    hour = ( hour == 0 ) ? 12 : hour;
    var currentTimeString = hour + ":" + minute + ":" + second + " " + timeOfDay ;
    sketch.glclear();
    sketch.moveto(pos);
    sketch.text(currentTimeString);
    text_size = sketch.gettextinfo(currentTimeString);
    refresh();
}

function onresize(w,h) {
    width = box.rect[2] - box.rect[0];
    height = box.rect[3] - box.rect[1];
    draw();
    refresh();
}

function onclick(x,y) {
    ondrag(x,y);
}

function ondrag(x,y) {
    x = Math.max(0,Math.min(width-text_size[0]-offset,x));
    y = Math.max(0+text_size[1],Math.min(height-offset,y));
    pos = sketch.screentoworld(x,y)
    draw();
}


var pos;
var offset = 5;
var text_size = [];
var width = box.rect[2] - box.rect[0];
var height = box.rect[3] - box.rect[1];

var vtask = new Task(taskfun);
vtask.interval = 1000;
vtask.repeat();

function taskfun() {
	vdate = new Date();
	draw();
}

function draw() {
	var hour = vdate.getHours();
	var minute = vdate.getMinutes();
	var second = vdate.getSeconds();
	minute = ( minute < 10 ? "0" : "" ) + minute;
	second = ( second < 10 ? "0" : "" ) + second;
	var timeOfDay = ( hour < 12 ) ? "AM" : "PM";
	hour = ( hour > 12 ) ? hour - 12 : hour;
	hour = ( hour == 0 ) ? 12 : hour;
	var currentTimeString = hour + ":" + minute + ":" + second + " " + timeOfDay ;
	sketch.glclear();
	sketch.moveto(pos);
	sketch.text(currentTimeString);
	text_size = sketch.gettextinfo(currentTimeString);
	refresh();
}

function onresize(w,h) {
	width = box.rect[2] - box.rect[0];
	height = box.rect[3] - box.rect[1];
	draw();
	refresh();
}

function onclick(x,y) {
	ondrag(x,y);
}

function ondrag(x,y) {
	x = Math.max(0,Math.min(width-text_size[0]-offset,x));
	y = Math.max(0+text_size[1],Math.min(height-offset,y));
	pos = sketch.screentoworld(x,y)
	draw();
}


Thank you Luke, work like charm . I will study the code.

http://richardbowles.tripod.com/javascript/section6/lesson6.htm

and I begin to understand how to pass the value

Finding how long is my text