mirror of
https://github.com/dyne/FreeJ.git
synced 2026-06-16 12:59:33 +02:00
added a javascript widgetclass and an example application that uses it (both quite unfinished)
This commit is contained in:
Bastiaan vd Berg (buZz)
@@ -0,0 +1,149 @@
|
||||
// OSC controller interface
|
||||
// buZz, Puik. started aug. 2009
|
||||
|
||||
// ment to do :
|
||||
// - widgets
|
||||
// - editing of interface?
|
||||
// - send OSC events on widget change
|
||||
|
||||
// startup with:
|
||||
// # freej -cFj osc_controller_interface.js
|
||||
|
||||
// eee fullscreen res ;)
|
||||
W = 800;
|
||||
H = 480;
|
||||
|
||||
include('widget_class.js');
|
||||
|
||||
set_resolution(W,H);
|
||||
|
||||
MAX_WIDGETS = 10; // unused atm
|
||||
|
||||
widgets = new Array();
|
||||
|
||||
mousestate = 0;
|
||||
plzredraw = 1;
|
||||
|
||||
geo = new GeometryLayer();
|
||||
geo.set_blit("ADD");
|
||||
geo.set_fps();
|
||||
geo.activate(true);
|
||||
geo.color(255,255,255,255);
|
||||
add_layer(geo);
|
||||
|
||||
kbd = new KeyboardController();
|
||||
kbd.activate(true);
|
||||
kbd.pressed_esc = function() { quit(); }
|
||||
register_controller( kbd );
|
||||
|
||||
ms = new MouseController();
|
||||
ms.activate(true);
|
||||
ms.grab(true);
|
||||
ms.button = function(b, s, x, y) {
|
||||
var i;
|
||||
// (button, state, x, y)
|
||||
// echo("mousestate "+mousestate+" b"+b+" s"+s+" x"+x+" y"+y);
|
||||
this.grab(s);
|
||||
|
||||
|
||||
switch (mousestate) {
|
||||
// mousestate 0 = nothing
|
||||
// mousestate 1 = click
|
||||
// mousestate 2 = nothing + just clicked earlier (needs a timer)
|
||||
// mousestate 3 = double click
|
||||
// mousestate 4 = drag (not working right)
|
||||
case 0:
|
||||
if ((s == 1) && (b == 1)) {
|
||||
// left mousebutton pressed
|
||||
mousestate = 1;
|
||||
|
||||
// do widget click change?
|
||||
for (i=0; i<widgets.length; i++) {
|
||||
if (widgets[i].intersects(x,y)) {
|
||||
widgets[i].change(b,mousestate);
|
||||
plzredraw = 1;
|
||||
}
|
||||
}
|
||||
|
||||
} else {
|
||||
mousestate = 0;
|
||||
}
|
||||
break;
|
||||
case 1:
|
||||
if (s == 0) {
|
||||
// button released
|
||||
mousestate = 2;
|
||||
} else {
|
||||
// button held
|
||||
mousestate = 4;
|
||||
}
|
||||
break;
|
||||
case 2:
|
||||
if ((s == 1) && (b == 1)) {
|
||||
// button pressed
|
||||
mousestate = 3;
|
||||
} else {
|
||||
mousestate = 0;
|
||||
}
|
||||
break;
|
||||
case 3:
|
||||
// do widget doubleclick change ?
|
||||
for (i=0; i<widgets.length; i++) {
|
||||
|
||||
if (widgets[i].intersects(x,y)) {
|
||||
widgets[i].change(b,mousestate); // this might need to be swapped with something else ...
|
||||
plzredraw = 1;
|
||||
}
|
||||
}
|
||||
mousestate = 0;
|
||||
break;
|
||||
case 4:
|
||||
// do widget dragchange!
|
||||
for (i=0; i<widgets.length; i++) {
|
||||
|
||||
if (widgets[i].intersects(x,y)) {
|
||||
widgets[i].change(b,mousestate); // yeah, this is not right :D
|
||||
plzredraw = 1;
|
||||
}
|
||||
}
|
||||
mousestate = 0;
|
||||
break;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
ms.motion = function(b, x, y, dx, dy) {
|
||||
|
||||
// dno if i need anything with motion ...
|
||||
|
||||
// (buttonmask, x, y, xrel, yrel)
|
||||
// echo("b"+b+" x"+x+" y"+y+" dx"+dx+" dy"+dy);
|
||||
// geo.pixel(x,y);
|
||||
}
|
||||
|
||||
register_controller( ms );
|
||||
|
||||
// this just sets up a small scene with two toggle buttons on the left, and one bang button on the right
|
||||
|
||||
widgets[0] = new Widget("toggle1",10,10,100,100,2);
|
||||
widgets[0].data = 1;
|
||||
widgets[1] = new Widget("toggle2",200,10,100,100,2);
|
||||
widgets[1].data = 0;
|
||||
widgets[2] = new Widget("bang1",400,10,100,100,1);
|
||||
widgets[2].data = 0;
|
||||
plzredraw = 1;
|
||||
|
||||
var loopbang;
|
||||
loopbang = new TriggerController();
|
||||
register_controller(loopbang);
|
||||
loopbang.frame = function() {
|
||||
|
||||
// mainloops should be like this :P
|
||||
|
||||
if (plzredraw) {
|
||||
for (i=0; i<widgets.length; i++) widgets[i].draw(geo);
|
||||
plzredraw = 0;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -0,0 +1,137 @@
|
||||
// Widget Class for the Geo layer
|
||||
// buZz, Puik. started aug. 2009
|
||||
|
||||
// ment to draw & maintain the widgets for the OSC controller interface
|
||||
// might also end up doing the OSC part
|
||||
|
||||
function Widget(name,x,y,w,h,type) {
|
||||
|
||||
// name (for referencing?)
|
||||
|
||||
this.name = name;
|
||||
|
||||
// x,y = topleft
|
||||
// w,h = size
|
||||
|
||||
this.x = x;
|
||||
this.y = y;
|
||||
this.w = w;
|
||||
this.h = h;
|
||||
|
||||
// type 0 = do nothing, draw nothing
|
||||
// type 1 = bang
|
||||
// type 2 = toggle
|
||||
|
||||
this.type = type;
|
||||
|
||||
// state 0 = off (invisible)
|
||||
// state 1 = on (default)
|
||||
// state 2 = temporary disabled
|
||||
|
||||
this.state = 1;
|
||||
|
||||
this.data = 0;
|
||||
|
||||
}
|
||||
|
||||
Widget.prototype.draw = function(lay) {
|
||||
// draw a widget, make sure to draw it's state!
|
||||
// lay = target geolayer
|
||||
|
||||
switch(this.type) {
|
||||
case 1:
|
||||
// most overkill and ugly button ever
|
||||
// also there is no animation of the pressing atm :S
|
||||
|
||||
// bang
|
||||
lay.color(255,255,255,255);
|
||||
lay.rectangle(this.x,this.y,this.x+this.w,this.y+this.h);
|
||||
|
||||
// topleft
|
||||
lay.line(this.x,this.y,this.x+2,this.y+2);
|
||||
|
||||
// top and left lines
|
||||
lay.line(this.x+2,this.y+2,this.x+2,this.y+this.h-2);
|
||||
lay.line(this.x+2,this.y+2,this.x+this.w-2,this.y+2);
|
||||
lay.line(this.x+1,this.y+1,this.x+1,this.y+this.h-1);
|
||||
lay.line(this.x+1,this.y+1,this.x+this.w-1,this.y+1);
|
||||
|
||||
// switch color on state (E_DOESNOTWORK)
|
||||
if (this.data>0) {
|
||||
lay.color(192,192,192,255);
|
||||
} else {
|
||||
lay.color(255,255,255,255);
|
||||
}
|
||||
|
||||
// bottomleft and topright corners
|
||||
lay.line(this.x+this.w,this.y,this.x+this.w-2,this.y+2);
|
||||
lay.line(this.x,this.y+this.h,this.x+2,this.y+this.h-2);
|
||||
|
||||
// right and bottom lines
|
||||
lay.line(this.x+this.w-2,this.y+2,this.x+this.w-2,this.y+this.h-2);
|
||||
lay.line(this.x+2,this.y+this.h-2,this.x+this.w-2,this.y+this.h-2);
|
||||
lay.line(this.x+this.w-1,this.y+1,this.x+this.w-1,this.y+this.h-1);
|
||||
lay.line(this.x+1,this.y+this.h-1,this.x+this.w-1,this.y+this.h-1);
|
||||
|
||||
// bottomright corner
|
||||
lay.line(0,0,0,255);
|
||||
lay.line(this.x+this.w,this.y+this.h,this.x+this.w-2,this.y+this.h-2);
|
||||
|
||||
// middle
|
||||
lay.color(160,160,160,255);
|
||||
lay.rectangle_fill(this.x+3,this.y+3,this.x+this.w-3,this.y+this.h-3);
|
||||
|
||||
// delivery! one ugly button!
|
||||
|
||||
break;
|
||||
case 2:
|
||||
// toggle
|
||||
lay.color(255,255,255,255);
|
||||
lay.rectangle(this.x,this.y,this.x+this.h,this.y+this.w);
|
||||
if (this.data > 0) {
|
||||
// draw cross
|
||||
lay.color(255,255,255,255);
|
||||
} else {
|
||||
lay.color(0,0,0,255);
|
||||
}
|
||||
// commented lines are for a 'cross' style checkbox, i like the square one better ..
|
||||
|
||||
// lay.line(this.x+2,this.y+2,this.x+this.h-2,this.y+this.w-2);
|
||||
// lay.line(this.x+this.h-2,this.y+2,this.x+2,this.y+this.w-2);
|
||||
lay.rectangle_fill(this.x+2,this.y+2,this.x+this.h-2,this.y+this.w-2);
|
||||
|
||||
break;
|
||||
case 0:
|
||||
default:
|
||||
// do nothing
|
||||
}
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
Widget.prototype.intersects = function(x,y) {
|
||||
// is x,y within this widget?
|
||||
|
||||
if ((x>this.x) && (x<(this.x+this.h) && (y>this.y) && (y<(this.y+this.w) ) ) )
|
||||
return true;
|
||||
return false;
|
||||
|
||||
}
|
||||
|
||||
Widget.prototype.change = function(b,mousestate) {
|
||||
|
||||
switch(this.type) {
|
||||
case 1:
|
||||
this.data = 1;
|
||||
echo ("BANG @ "+this.name);
|
||||
break;
|
||||
case 2:
|
||||
if (this.data>0) { this.data = 0; } else { this.data = 1; }
|
||||
echo ("TOGGLE newdata: "+this.data+" @ "+this.name);
|
||||
break;
|
||||
case 0:
|
||||
default:
|
||||
// do nothing
|
||||
}
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user