Hi everyone, I have written a small helper function that makes my work on JSFX user interfaces a little easier. It is nothing extraordinary. The function tracks the mouse position and outputs the result graphically in relation to a vectorized user interface. In other words, a 600x200 GUI can be edited scaled to e.g. 2400x800, with the displayed xywh values referring to the original size. This makes it much easier to draw the user interface. It also creates a scalable grid that makes drawing and placing user interface elements a little easier. gfx_w and gfx_h are displayed as a scaling factor and are colored green if both gfx_w and gfx_h are a multiple of the original size. This guarantees that the aspect ratio of the user interface is maintained. I thought I'd share it with the community. Maybe someone will find it useful.

Code:

desc:gfx_xy
author: ZenoMOD

slider124:4<1,16,1>grid
slider125:.2<0,1,.1>alpha

@init
// call function from @gfx section
function gfx_xy (width, height, grid_size, alpha)
local (scale_x,scale_y,ratio_x,ratio_y,mouse_pos_x,mouse_pos_y,mouse_click,last_cap,mouse_drag,draw_select,
      rect_x,rect_y,rect_w,rect_h,mouse_sel_x,mouse_sel_y,mouse_sel_w,mouse_sel_h,str_w,str_h,ww,hw,x,i)
(
  // calculate scaling factors
  scale_x = gfx_w/width;
  scale_y = gfx_h/height;
  ratio_x = gfx_w/(grid_size+1);
  ratio_y = gfx_h/(grid_size+1);
  mouse_pos_x = mouse_x/scale_x;
  mouse_pos_y = mouse_y/scale_y;
 
  // x padding for line drawing and text
  x = 5*scale_x;
 
  // set font and color
  gfx_setfont(1,"",floor(16*scale_x),'');
  gfx_setfont(2,"",floor(12*scale_x),'');
  gfx_set(1,1,1,.5);

  // draw lines for x and y axis
  gfx_line(x,x,x,gfx_h-x,1);
  gfx_line(x,gfx_h-x,gfx_w-x,gfx_h-x,1);

  gfx_setfont(1);

  // print mouse_y position
  gfx_x = x*2;  gfx_y = x;
  gfx_drawstr(sprintf(#,"Y %.0f",mouse_pos_y));
 
  // print mouse_x position
  gfx_x = 0;  gfx_y = gfx_h-x*2-gfx_texth;
  gfx_drawstr(sprintf(#,"X %.0f",mouse_pos_x),5,gfx_w,gfx_h-x);

  // set w and h print color to green if [width] and [height] scaling factor is equal
  (gfx_w == width*scale_x && gfx_h == height*scale_x) ?
  (
   gfx_set(0,1,0,1);
  ):(
   gfx_set(1,1,1,.5);
  );

  // get scaling factor string width
  str_w = sprintf(#,"W %.4f");
  str_h = sprintf(#,"H %.4f");
  gfx_measurestr(str_w,ww,gfx_texth);
  gfx_measurestr(str_h,hw,gfx_texth);

  // print [width] scaling factor
  gfx_x = gfx_w-x*2-ww;  gfx_y = x;
  gfx_drawstr(sprintf(#,"W %.4f",scale_x),2,gfx_w-x*2,x*gfx_texth);

  // print [height] scaling factor
  gfx_x = gfx_w-x*2-hw;  gfx_y = gfx_h-x*2-gfx_texth;
  gfx_drawstr(sprintf(#,"H %.4f",scale_y),6,gfx_w-x*2,gfx_h-x);

  // draw ratio lines
  gfx_set(1,1,1,alpha);
  i = 1;
  loop(grid_size,
   gfx_line(ratio_x*i,x,ratio_x*i,gfx_h-x,1);
   gfx_line(x,ratio_y*i,gfx_w-x,ratio_y*i,1);
   i += 1;
  );

  // check if mouse button was clicked
  mouse_click = (mouse_cap&1 && !last_cap) ? 1 : 0 ;
  // update last mouse button state
  last_cap = mouse_cap;
  // if mouse was clicked, start dragging
  mouse_click ? mouse_drag = 1;
  // if mouse button is not clicked, stop dragging
  !mouse_cap ? mouse_drag = 0;

  // if a selection is being drawn
  draw_select == 1 ? (
   gfx_set(1,1,1,1);
   // draw selection rectangle
   gfx_rect(
     // determine top left corner of rectangle
     rect_x = (mouse_sel_x <= mouse_sel_w ? mouse_sel_x : mouse_sel_w),
     rect_y = (mouse_sel_y <= mouse_sel_h ? mouse_sel_y : mouse_sel_h),
     // determine width and height of rectangle
     rect_w = (mouse_sel_x <= mouse_sel_w ? mouse_sel_w-mouse_sel_x : mouse_sel_x-mouse_sel_w),
     rect_h = (mouse_sel_y <= mouse_sel_h ? mouse_sel_h-mouse_sel_y : mouse_sel_y-mouse_sel_h),
     0
   );
  );

  // if mouse is dragging
  mouse_drag ? (
   // update bottom right
   mouse_sel_w = mouse_x;
   mouse_sel_h = mouse_y;
   // start drawing selection
   draw_select = 1;
   ):(
   // update top left
   mouse_sel_x = mouse_x;
   mouse_sel_y = mouse_y;
   // stop drawing selection
   draw_select = 0;
  );
 
  // set font size and text alpha
  gfx_setfont(2);
  gfx_a = .7;

  // if rectangle x position is greater than 0, print it
  rect_x > 0 ? (
   gfx_x = rect_x;  gfx_y = rect_y;
   gfx_drawstr(sprintf(#," x %.0f",rect_x/scale_x));
  );
 
  // if  rectangle y position is greater than 0, print it
  rect_y > 0 ? (
   gfx_x = rect_x;  gfx_y = rect_y+gfx_texth;
   gfx_drawstr(sprintf(#," y %.0f",rect_y/scale_y));
  );
 
  // if rectangle width or height is greater than 0, print it
  rect_w > 0 || rect_h > 0 ? (
   gfx_x = rect_x;  gfx_y = rect_y+gfx_texth*2;
   gfx_drawstr(sprintf(#," w %.0f",rect_w/scale_x));
   gfx_x = rect_x;  gfx_y = rect_y+gfx_texth*3;
   gfx_drawstr(sprintf(#," h %.0f",rect_h/scale_y));
  );
);


@gfx 600 200
/* --> put your gfx code here <-- */

// call function at section end
gfx_xy(600,200,slider124,slider125);

 

Last edited: Nov 19, 2023

Fixed some minor flaws in the code. Improved comments. Code is now fully functional JSFX for demoing.

 

I don't think I'd ever be capable of using this tool, but it's just amazing how people can not only make these things, but to make things to make making them easier.
I think it would need a few more levels of "easier" for me to ever use them, but at least I can see how it would help those who can use it !

 

And that's a pity. But I understand it. EEL2 is quite simple, but not very well documented. Especially when it comes to gfx, learning material for beginners is rare and hard to find. I've banged my head against walls several times. The jungle is slowly thinning out. At least at my current level. But I'm sure the next wall isn't far away.

 

Last edited: Nov 21, 2023