horizontal slider


    Sep 16 2007 | 6:52 pm
    hi
    Trying to modify the vertical jsui slider in max as a horizontal slider. I think i am nearly there but I can't figure out the final math to get the mouse sensitivity to be correct. can anyone see where I am going wrong? Thanks in advance.
    a+ gar
    /*
    a simple slider
    arguments: fgred fggreen fgblue bgred bggreen bgblue linered linegreen lineblue mode
    foreground red (0 - 255), foreground green (0 - 255), foreground blue (0 - 255), background red (0 - 255), background green (0 - 255), background blue (0 - 255), line red (0 - 255), line green (0 - 255), line blue (0 - 255), use knob (1 - ellipse, 2 - triangle)
    */
    sketch.default2d(); var val = 0; var vbrgb = [1.,1.,1.]; var vfrgb = [0.2,0.2,0.2]; var vrgb2 = [0.5,0.5,0.5]; var vmode = 0; var voutline = 1;
    // process arguments if (jsarguments.length>1) vfrgb[0] = jsarguments[1]/255.; if (jsarguments.length>2) vfrgb[1] = jsarguments[2]/255.; if (jsarguments.length>3) vfrgb[2] = jsarguments[3]/255.; if (jsarguments.length>4) vbrgb[0] = jsarguments[4]/255.; if (jsarguments.length>5) vbrgb[1] = jsarguments[5]/255.; if (jsarguments.length>6) vbrgb[2] = jsarguments[6]/255.; if (jsarguments.length>7) vrgb2[0] = jsarguments[7]/255.; if (jsarguments.length>8) vrgb2[1] = jsarguments[8]/255.; if (jsarguments.length>9) vrgb2[2] = jsarguments[9]/255.; if (jsarguments.length>10) vmode = jsarguments[10]; if (jsarguments.length>11) voutline = jsarguments[11];
    draw();
    function draw() { var width = box.rect[2] - box.rect[0]; var height = box.rect[3] - box.rect[1]; var aspect = width/height;
    with (sketch) { //scale everything to box size glmatrixmode("modelview"); glpushmatrix(); glscale(aspect,1,1); glenable("line_smooth");
    // erase background glclearcolor(vbrgb); glclear();
    //draw line //this is the slider background with border glcolor(vrgb2); shapeslice(1,1); moveto(0,0); plane(0.8,0.15); if (voutline) { glcolor(0,0,0); glpolygonmode("front_and_back","line"); plane(0.8,0.15); glpolygonmode("front_and_back","fill"); }
    // draw marker //the slider knob, there are three types, triangle / ellipse / rectangle glcolor(vfrgb); switch (vmode) { case 2: // triangle shapeslice(1,1); moveto(1.6*val-0.8,0.5); //on screen in range -0.8 to 0.8 plane(0.2,0.,0.2,0.1); //triangle if (voutline) { glcolor(0,0,0); glpolygonmode("front_and_back","line"); plane(0.2,0.,0.2,0.1); //triangle glpolygonmode("front_and_back","fill"); } break; case 1: // ellipse shapeslice(40,1); moveto(1.6*val-0.8,0); //on screen in range -0.8 to 0.8 ellipse(0.6,0.05); if (voutline) { glcolor(0,0,0); frameellipse(0.6,0.05); } break; default: // rectangle shapeslice(1,1); //moveto(1.6*val-0.7,0); //on screen in range -0.8 to 0.8 moveto(1.6*val-0.8,0.); //on screen in range -0.8 to 0.8 plane(0.05,0.8); if (voutline) { glcolor(0,0,0); glpolygonmode("front_and_back","line"); plane(0.05,0.8); glpolygonmode("front_and_back","fill"); } } //reset transformation matrix glmatrixmode("modelview"); glpopmatrix(); } }
    function bang() { draw(); refresh(); outlet(0,val); }
    function msg_float(v) { val = Math.min(Math.max(0,v),1); notifyclients(); bang(); }
    function fsaa(v) { sketch.fsaa = v; bang(); }
    function frgb(r,g,b) { vfrgb[0] = r/255.; vfrgb[1] = g/255.; vfrgb[2] = b/255.; draw(); refresh(); }
    function rgb2(r,g,b) { vrgb2[0] = r/255.; vrgb2[1] = g/255.; vrgb2[2] = b/255.; draw(); refresh(); }
    function brgb(r,g,b) { vbrgb[0] = r/255.; vbrgb[1] = g/255.; vbrgb[2] = b/255.; draw(); refresh(); }
    function mode(v) { vmode = v; draw(); refresh(); }
    function outline(v) { voutline = v; draw(); refresh(); }
    function setvalueof(v) { msg_float(v); }
    function getvalueof() { return val; }
    function onclick(x,y,but,cmd,shift,capslock,option,ctrl) { ondrag(x,y,but,cmd,shift,capslock,option,ctrl) } onclick.local = 1; //private. could be left public to permit "synthetic" events
    function ondrag(x,y,but,cmd,shift,capslock,option,ctrl) { var f,a;
    a = sketch.screentoworld(x,y); //detect horizontal movement f = ((a[0] + 0.8) / 2.0) + 0.2;
    //post(f);
    msg_float(f); //set new value with clipping + refresh } ondrag.local = 1; //private. could be left public to permit "synthetic" events
    function onresize(w,h) { draw(); refresh(); } onresize.local = 1; //private

    • Sep 16 2007 | 8:48 pm
      On 16 sept. 07, at 20:52, Garrett Lynch wrote:
      > hi > > Trying to modify the vertical jsui slider in max as a horizontal > slider. I think i am nearly there but I can't figure out the final > math to get the mouse sensitivity to be correct. can anyone see > where I am going wrong? Thanks in advance.
      The x axis is between -aspect and +aspect which depends on the width/ height ratio. So you just have to calculate the aspect and scale your f value to be between 0 and 1:
      function ondrag(x,y,but,cmd,shift,capslock,option,ctrl) { var f,a, height, width, aspect;
      height = box.rect[3] - box.rect[1]; width = box.rect[2] - box.rect[0]; aspect = width/height;
      a = sketch.screentoworld(x,y); //detect horizontal movement f = (a[0] + aspect) / (2*aspect);
      msg_float(f); //set new value with clipping + refresh }
      HTH, ej
    • Sep 17 2007 | 6:34 pm
      Hi
      thanks for this, definitely seems to work better than mine but the slider itself doesn't seem to follow the cursor pixel for pixel at ether end of the slider - does it need some sort of offset??
      a+ gar
      /*
      a simple slider
      arguments: fgred fggreen fgblue bgred bggreen bgblue linered linegreen lineblue mode
      foreground red (0 - 255), foreground green (0 - 255), foreground blue (0 - 255), background red (0 - 255), background green (0 - 255), background blue (0 - 255), line red (0 - 255), line green (0 - 255), line blue (0 - 255), use knob (1 - ellipse, 2 - triangle)
      */
      sketch.default2d(); var val = 0; var vbrgb = [1.,1.,1.]; var vfrgb = [0.2,0.2,0.2]; var vrgb2 = [0.5,0.5,0.5]; var vmode = 0; var voutline = 1;
      // process arguments if (jsarguments.length>1) vfrgb[0] = jsarguments[1]/255.; if (jsarguments.length>2) vfrgb[1] = jsarguments[2]/255.; if (jsarguments.length>3) vfrgb[2] = jsarguments[3]/255.; if (jsarguments.length>4) vbrgb[0] = jsarguments[4]/255.; if (jsarguments.length>5) vbrgb[1] = jsarguments[5]/255.; if (jsarguments.length>6) vbrgb[2] = jsarguments[6]/255.; if (jsarguments.length>7) vrgb2[0] = jsarguments[7]/255.; if (jsarguments.length>8) vrgb2[1] = jsarguments[8]/255.; if (jsarguments.length>9) vrgb2[2] = jsarguments[9]/255.; if (jsarguments.length>10) vmode = jsarguments[10]; if (jsarguments.length>11) voutline = jsarguments[11];
      draw();
      function draw() { var width = box.rect[2] - box.rect[0]; var height = box.rect[3] - box.rect[1]; var aspect = width/height;
      with (sketch) { //scale everything to box size glmatrixmode("modelview"); glpushmatrix(); glscale(aspect,1,1); glenable("line_smooth");
      // erase background glclearcolor(vbrgb); glclear();
      //draw line //this is the slider background with border glcolor(vrgb2); shapeslice(1,1); moveto(0,0); plane(0.8,0.15); if (voutline) { glcolor(0,0,0); glpolygonmode("front_and_back","line"); plane(0.8,0.15); glpolygonmode("front_and_back","fill"); }
      // draw marker //the slider knob, there are three types, triangle / ellipse / rectangle glcolor(vfrgb); switch (vmode) { case 2: // triangle shapeslice(1,1); moveto(1.6*val-0.8,0.5); //on screen in range -0.8 to 0.8 plane(0.2,0.,0.2,0.1); //triangle if (voutline) { glcolor(0,0,0); glpolygonmode("front_and_back","line"); plane(0.2,0.,0.2,0.1); //triangle glpolygonmode("front_and_back","fill"); } break; case 1: // ellipse shapeslice(40,1); moveto(1.6*val-0.8,0); //on screen in range -0.8 to 0.8 ellipse(0.6,0.05); if (voutline) { glcolor(0,0,0); frameellipse(0.6,0.05); } break; default: // rectangle shapeslice(1,1); //moveto(1.6*val-0.7,0); //on screen in range -0.8 to 0.8 moveto(1.6*val-0.8,0.); //on screen in range -0.8 to 0.8 plane(0.05,0.8); if (voutline) { glcolor(0,0,0); glpolygonmode("front_and_back","line"); plane(0.05,0.8); glpolygonmode("front_and_back","fill"); } } //reset transformation matrix glmatrixmode("modelview"); glpopmatrix(); } }
      function bang() { draw(); refresh(); outlet(0,val); }
      function msg_float(v) { val = Math.min(Math.max(0,v),1); notifyclients(); bang(); }
      function fsaa(v) { sketch.fsaa = v; bang(); }
      function frgb(r,g,b) { vfrgb[0] = r/255.; vfrgb[1] = g/255.; vfrgb[2] = b/255.; draw(); refresh(); }
      function rgb2(r,g,b) { vrgb2[0] = r/255.; vrgb2[1] = g/255.; vrgb2[2] = b/255.; draw(); refresh(); }
      function brgb(r,g,b) { vbrgb[0] = r/255.; vbrgb[1] = g/255.; vbrgb[2] = b/255.; draw(); refresh(); }
      function mode(v) { vmode = v; draw(); refresh(); }
      function outline(v) { voutline = v; draw(); refresh(); }
      function setvalueof(v) { msg_float(v); }
      function getvalueof() { return val; }
      function onclick(x,y,but,cmd,shift,capslock,option,ctrl) { ondrag(x,y,but,cmd,shift,capslock,option,ctrl) } onclick.local = 1; //private. could be left public to permit "synthetic" events
      function ondrag(x,y,but,cmd,shift,capslock,option,ctrl) { var f,a, height, width, aspect;
      height = box.rect[3] - box.rect[1]; width = box.rect[2] - box.rect[0]; aspect = width/height;
      a = sketch.screentoworld(x,y);
      //detect horizontal movement f = (a[0] + aspect) / (2*aspect);
      msg_float(f); //set new value with clipping + refresh } ondrag.local = 1; //private. could be left public to permit "synthetic" events
      function onresize(w,h) { draw(); refresh(); } onresize.local = 1; //private
    • Sep 17 2007 | 8:21 pm
      On 17 sept. 07, at 20:34, Garrett Lynch wrote:
      > Hi > > thanks for this, definitely seems to work better than mine but the > slider itself doesn't seem to follow the cursor pixel for pixel at > ether end of the slider - does it need some sort of offset??
      Then it's 80 % of the aspect ;-)
      function ondrag(x,y,but,cmd,shift,capslock,option,ctrl) { var f,a, height, width, aspect;
      height = box.rect[3] - box.rect[1]; width = box.rect[2] - box.rect[0]; aspect = width/height;
      aspect *= 0.8; // 80 % of the aspect
      a = sketch.screentoworld(x,y);
      //detect horizontal movement f = (a[0] + aspect) / (2*aspect);
      msg_float(f); //set new value with clipping + refresh }
      Cheers, ej
    • Sep 17 2007 | 9:08 pm
      that does the trick! :) thanks for your help.
      a+ gar
    • Feb 21 2010 | 10:22 am
      hello, i find this post and i tried to understand how it works.
      I'm not very clear with this part of code
      // process arguments if (jsarguments.length>1) vfrgb[0] = jsarguments[1]/255.; if (jsarguments.length>2) vfrgb[1] = jsarguments[2]/255.; if (jsarguments.length>3) vfrgb[2] = jsarguments[3]/255.; if (jsarguments.length>4) vbrgb[0] = jsarguments[4]/255.; if (jsarguments.length>5) vbrgb[1] = jsarguments[5]/255.; if (jsarguments.length>6) vbrgb[2] = jsarguments[6]/255.; if (jsarguments.length>7) vrgb2[0] = jsarguments[7]/255.; if (jsarguments.length>8) vrgb2[1] = jsarguments[8]/255.; if (jsarguments.length>9) vrgb2[2] = jsarguments[9]/255.; if (jsarguments.length>10) vmode = jsarguments[10]; if (jsarguments.length>11) voutline = jsarguments[11];
      I understood about jsarguments.length at a js but i don't have a clue how it works on a jsui.
      "After supplying a filename after the word js, you can type in additional arguments; these are available to your script’s global code or any function in an array property called jsarguments[]. jsarguments[0] is the filename of your script, jsarguments[1] is the first typed-in argument. jsarguments.length is the number of typed-in arguments plus one. In other words, if there are no typed-in arguments, the value of jsarguments.length will be 1."
      thanks
    • Feb 21 2010 | 4:36 pm
      It works exactly the same. In this case it initialises some variables to set the colour of the object.
      lh
    • Feb 22 2010 | 5:13 am
      you can change the jsarguments jsui via the inspector or with a message: 'jsarguments $1 $2 etc'