-
|
Inside a custom component, I can differentiate the left and mouse buttons by doing: event.mods:isLeftButtonDown() and event.mods:isRightButtonDown() respectively in the mouseDown method. In the "drag" method, I can use event:getDistanceFromDragStartX(). But it seems to fire at both mouse buttons. Even when I use an if/ else statement to get the left or right mouse button, it still seems to pass on the distance to another method regardless of which button is pressed. So, the question is, is there a way to differentiate the drag distance of the left mouse button from the right mouse button? |
Beta Was this translation helpful? Give feedback.
Replies: 8 comments 22 replies
-
|
Hi @DnaldeT! |
Beta Was this translation helpful? Give feedback.
-
|
Yes, the callback attached to the invisible uiSlider just does a repaint on the component! |
Beta Was this translation helpful? Give feedback.
-
|
So in my case, I would have my actual uiImageSlider at bottom, my uiCustomComponent above it and then another transparent uiImageSlider on top. This transparent uiImageSlider would then call the OnModulatorValueChange of the underlying actual uiImageSlider. |
Beta Was this translation helpful? Give feedback.
-
|
I have now tried the transparent uiImageSlider on top of the uiCustomComponent which is on top of the actual uiImageSlider and it works great!!! |
Beta Was this translation helpful? Give feedback.
-
Great to hear! @DnaldeT and I discovered that you can also create a Slider() object through LookAndFeel that can be triggered by uiSlider, but maybe this is a hack? Next step is to find out how to create Slider() within uiComponent that doesn't need the external uiSlider. I am sure it will be possible. That would mean we could create custom vector Sliders, within uiComponent. Probably easy for someone who knows how to do this, but to me it's pretty confusing right now. |
Beta Was this translation helpful? Give feedback.
-
|
I put my thinking cap on and I don't think it's a hack. L&F is applied to "all" modulators. Since we "override" the L&F in the customComponent for the uiSlider, it gets applied to "all" sliders. But I'm still going over the process of why we don't see the uiSlider in the customComponent without L&F. But we have a nicely rotating png in the uiCustomComponent now, without applying L&F. Wouldn't the process for importing an SVG and do the AffineTransform be the same? |
Beta Was this translation helpful? Give feedback.
-
|
This is how I did it. I use lua to detect whether right or left button clicked and then plot the x,y separately. Maybe there's a better way? In this panel x,y coordinates are limited to the comp:getHeight() and comp:getWidth() with my new friend jlimit()!
Tedjuh distance travelled_1_1_1_2021-02-28_21-38.zip constructor = function()
myMeta={
leftDragDistance = 0,
rightDragDistance = 0,
leftDragDistance = 0,
rightDragDistance = 0,
left={enterX = 0,enterY = 0,leaveX = 0,leaveY = 0},
right={enterX = 0,enterY = 0,leaveX = 0,leaveY = 0},
--engagedButton="left"
}
coords = setmetatable({},{__index=myMeta})
end
mouseDown = function(--[[ CtrlrComponent --]] comp --[[ MouseEvent --]], event)
if event.mods:isLeftButtonDown() then
coords.left.enterX = jlimit(0, comp:getWidth(), event.x)
coords.left.enterY = jlimit(0, comp:getHeight(), event.y)
end
if event.mods:isRightButtonDown() then
coords.right.enterX = jlimit(0, comp:getWidth(), event.x)
coords.right.enterY = jlimit(0, comp:getHeight(), event.y)
end
end
mouseUp = function(--[[ CtrlrComponent --]] comp --[[ MouseEvent --]], event)
if event.mods:isLeftButtonDown() then
coords.left.leaveX = jlimit(0, comp:getWidth(), event.x)
coords.left.leaveY = jlimit(0, comp:getHeight(), event.y)
end
if event.mods:isRightButtonDown() then
coords.right.leaveX = jlimit(0, comp:getWidth(), event.x)
coords.right.leaveY = jlimit(0, comp:getHeight(), event.y)
end
panel:getComponent("myComp"):repaint()
end
mouseDrag = function(--[[ CtrlrComponent --]] comp --[[ MouseEvent --]], event)
if event.mods:isLeftButtonDown() then
coords.leftDragDistance = event:getDistanceFromDragStartX()
panel:getLabel("d"):setText("Left drag distance = " .. event:getDistanceFromDragStartX())
end
if event.mods:isRightButtonDown() then
coords.rightDragDistance = event:getDistanceFromDragStartX()
panel:getLabel("d"):setText("Right drag distance = " .. event:getDistanceFromDragStartX())
end
end
myPaint = function(--[[ CtrlrComponent --]] comp --[[ CtrlrComponent --]], g)
if blockFunction then
return
end
g:fillAll(Colour(0xff99ccff))
local leftColour = 0xff0000ff
local rightColour = 0xffff0000
g:setColour(Colour(leftColour))
myLineL = Line(coords.left.enterX, coords.left.enterY, coords.left.leaveX, coords.left.leaveY)
g:drawLine(myLineL, 2)
g:setColour(Colour(rightColour))
myLineR = Line(coords.right.enterX, coords.right.enterY, coords.right.leaveX, coords.right.leaveY)
g:drawLine(myLineR, 2)
end
|
Beta Was this translation helpful? Give feedback.
-
|
Just for my info, what do you want to achieve? |
Beta Was this translation helpful? Give feedback.
-
@dobo365 Is this a comment on my code? What you are saying sounds exactly like what I did? Setting some type of global variable on mouseDown to determine whether the right button or left button was clicked and then passing this variable to each subsequent mouse function so we can know where to store the mouseUp mouseDrag values in a table (memory) (either left/right coordinates) is admittedly a better idea. (See below) Here is better code, agreed somewhat ' less code', but I was rather offering a strategy than a fully considered optimized solution :) constructor = function()
myMeta={
leftDragDistance = 0,
drag={left = 0,right = 0},
left={enterX = 0,enterY = 0,leaveX = 0,leaveY = 0},
right={enterX = 0,enterY = 0,leaveX = 0,leaveY = 0},
engagedButton="left"
}
coords = setmetatable({},{__index=myMeta})
end
mouseDown = function(--[[ CtrlrComponent --]] comp --[[ MouseEvent --]], event)
if event.mods:isLeftButtonDown() then coords.engagedButton="left" else coords.engagedButton="right" end
coords[coords.engagedButton].enterX = jlimit(0, comp:getWidth(), event.x)
coords[coords.engagedButton].enterY = jlimit(0, comp:getHeight(), event.y)
end
mouseDrag = function(--[[ CtrlrComponent --]] comp --[[ MouseEvent --]], event)
coords.drag[coords.engagedButton]= event:getDistanceFromDragStartX()
panel:getLabel("d"):setText(string.format("tdrag distance = %s",coords.drag[coords.engagedButton]))
end
mouseUp = function(--[[ CtrlrComponent --]] comp --[[ MouseEvent --]], event)
coords[coords.engagedButton].leaveX = jlimit(0, comp:getWidth(), event.x)
coords[coords.engagedButton].leaveY = jlimit(0, comp:getHeight(), event.y)
panel:getComponent("myComp"):repaint()
end
myPaint = function(--[[ CtrlrComponent --]] comp --[[ CtrlrComponent --]], g)
if blockFunction then
return
end
g:fillAll(Colour(0xff99ccff))
local leftColour = 0xff0000ff -- set default to left color
local rightColour = 0xffff0000
g:setColour(Colour(leftColour))
myLineL = Line(coords.left.enterX, coords.left.enterY, coords.left.leaveX, coords.left.leaveY)
g:drawLine(myLineL, 2)
g:setColour(Colour(rightColour))
myLineR = Line(coords.right.enterX, coords.right.enterY, coords.right.leaveX, coords.right.leaveY)
g:drawLine(myLineR, 2)
end
|
Beta Was this translation helpful? Give feedback.
-
|
Lots to go through, thank you all for the valuable input. But first to answer some questions: What am I trying to achieve? A slider consisting of 2 arcs (or pie segments?). The inner arc is the value to control the modulator. The outer arc is to set a minimum or maximum for the inner arc. I got a "sort of" working example but it takes the arcs themselves as mouse focus. To calculate which arc I'm on I do: (cX and cY are centre of X/Y of the component) That results in: F.y.i. totalBlueDragX = (blueMouseDown +(custBlueDragX - blueMouseDown)) - blueMouseDown) / 482 -- to get a value of 0 to whatever. But the way of handling the start/ end angle of the blue arc gets harder when the slider is quite small. So I figured, why not throw the right-mouse button in the mix to control the blue arc?. Easily said, not so easily done. Because in some way, the drag script sends a value on either mouse button no matter how many true or false statements I throw at it from the MouseDown script to prevent the left-mouse from sending a value when dragging the right-mouse button. I even already wrote a mouseDrag method almost exactly the same as yours, Dnaldoog. But the red arc still changes value when dragging the arc. And that is weird because all properties of the red or blue arc are defined in redSomething/ blueSomething. So I really don't get where the red arc gets the value from when dragging the blue arc. And to my knowledge, MouseUp comes "after" the drag. So shouldn't matter, right? "confused look". See example panel. |
Beta Was this translation helpful? Give feedback.
-
|
OK!
|
Beta Was this translation helpful? Give feedback.
-
|
I use a lot of console messages to see what's happening in the code. But I delete or out-comment them when a function or mathematical problem behaves like it's supposed to. Those console messages can slow down CTRLR tremendously. Especially with a drag function when a console command gets fired every 10ms or something. In the drag function of the test1 panel I sent in the last message, there is a "leftButtonDown" and "rightButtonDown" console message. The function acts as it should. But when you add console("tRDX = "..tRDX) after the "rightButtonDown", it still reports a value of 0.00419377593361, which it shouldn't. Investigating the values of tRDX on the blue arc (or right mouse button that shouldn't be sent) further: It seems it's taking the last increment or decrement of the left mouse button as tRDX. Example1 : when dragging the red arc with the left mouse button from 0 - 127 and then use the right mouse button, it results in a value of around 1.0. Example2: when dragging the red arc with the left mouse button from let's say 63 to 64, tRDX returns 0.0083 on the right mouse button. Oh wait, I think I have an idea what's going on. On mouseDrag, the rAnDec and rAn in the custComp method are being calculated/ fired no matter which left or mouse button I use. That's resulting in weird behaviour. Those are outside any if/else statements. tries to find the nearest wall to bang his head at.. Ok, one problem down, lots to go. First I have to rewrite the drag script with the rAn and rAnDec calculations included in the if/ else statements and see how that works out. |
Beta Was this translation helpful? Give feedback.
-
|
I'm following this with great interest. I'll need to do this very soon, and I've been running over in my head how to do it. I've never used a custom component before. Has anyone got any info on how to get into them? |
Beta Was this translation helpful? Give feedback.
-
|
The custom component is a very powerful tool. But you start with a blank canvas and it's up to you to come up with all the code for painting, mouseclicks and so on. Therefore it has quite a steep learning curve but once you get the hang of it, its possibilities are endless. Better to have a thought out plan of what you want to achieve. What I do is write everything down in just plain words (like a story) and try to translate it into the code for the custom component. But then, still, it can get very complicated. |
Beta Was this translation helpful? Give feedback.
-
|
I'm looking at modifying my Jupiter 8 panel to support patch morphing. I will need a knob similar to yours, but with an extra ring, so it would be centre - current value and then morph start and morph end on the 2 outer rings to allow the user to change the morph limits. Min-Max isn't enough because during morph, some controllers may go in the opposite direction. The sliders are easy, because I can just add 2 mini sliders, one on each side, but stacking knobs is a recipe for disaster. |
Beta Was this translation helpful? Give feedback.
-
|
Something like this? |
Beta Was this translation helpful? Give feedback.
-
|
Yeah, kinda, though the outer 2 rings would only have a pointer Something like this, |
Beta Was this translation helpful? Give feedback.
-
|
Totally missed this comment. Really hard to do with such a big as* picture. I read your reply a few times but I'm afraid it isn't possible. I assume we're talking about the Source Mix Knob. That knob mixes the amount of VCO1 and VCO2. It's mixing the "volume" of both sound signals "inside" the synth. And since the knob is controlled with just one sysex message, I'm afraid it is what it is. You don't have any control over the range of volume to be mixed on the VCO's separately. That is, I can't find any sysex for it. And since CTRLR doesn't or won't ever handle audio processing I think it's a no-go. |
Beta Was this translation helpful? Give feedback.
-
|
@DnaldeT I had some fun with your challenge and I built it "my way" but re-using some stuff from you. Please look at the methods under the group "goodweather" Please have a look at my code and re-use! @Godlike-Productions : study my code and the uiCustomComponent I attached the 4 methods to.
As @dnaldoog mentioned, look at the Graphics class in Juce to learn about drawing line, pies (this example), using the path object... |
Beta Was this translation helpful? Give feedback.
-
|
Thank you for looking into it. Interesting how you do the ModOnMouseDown/ Drag script. You can see I do kind of the same thing in the "dropped code" to calculate in which circle you click. But, as I said earlier in this thread, I stepped away from clicking the blue or right angle to control it. Because, while it works ok with a modulator of 300x300 in size, it gets harder to control the blue angle the smaller it gets. The only thing to improve is to avoid the drawing without the highlighted circle after a click. To be honest I didn't look for this and it must be some stupid thing I didn't pay attention to. I resolved that by putting the values of the start/ end angle in a memoryBlock. It avoids the disappearing angle and takes the right angles instead of jumping to the x-mouseDown value. Most noticeable with the Red Angle. If you drag your slider, the Red Angle jumps to the value of the mouseDown. Mine takes the value from the memoryBlock and starts dragging from the right value instead of doing the "sudden" jump. My code "is" recognizing left from right mouse button and dragging though. In the picture you'll see "Red click, Red Drag, Blue Left Half Click, Blue Drag, Blue Right Half Click, Blue Drag. I guess you are right about the "if.. then" statements. And yes I tend to overcomplicate things. Bad habit :). |
Beta Was this translation helpful? Give feedback.
-
|
I forgot to mention that all the manipulation is done only with the left mouse click. Thx for the explanation about the memoryblock, I didn't understand why you were doing that. In a different area, I'm doing the same but with a table containing tables. This, in the philosophy of having 30 mods at different places in your panel. Have a good continuation! |
Beta Was this translation helpful? Give feedback.
-
|
The "Clicking in the correct Zone" is indeed the problem with using small diameters. Just try a component size of 50x50 and you'll see that the mouse-handling is easier by using left/ right Mouse Button than trying to click a very small blue angle. I use MemoryBlock over a table because the "Byte" value is what needs to be sent to the Synth anyway. But yes, tables would work as well. I was a little bit afraid of getting too many global variables so I kept them in a MemoryBlock instead of being a global value. The Idea is to create a uiImageSlider, with this behaviour, that mimics and looks like the slider of my panel. Then only a few sliders will use this method, or make it an option to set them to a custom component with this behavior. So yes, it's going to be custom components on itself, not one custom component with lots of sliders. In a convo with Dnaldoog he showed me I could write my own classes. Maybe I can write my own class and create sliders that way without all the code that is needed now for every custom component. I don't know, this CTRLR thing can go deep, way deep. But first make it work, then on to the next step. |
Beta Was this translation helpful? Give feedback.
-
|
Probably not the right way to do it, too much code and the code could be easier but for now the mouse-handling of the component and how the component deals with the drawing part is "almost" spot-on. Left Mouse Button controls the Red Angle. Right Mouse Button controls the Blue Angle, Click and Drag on the Left Half controls StartAngle, Click and Drag on the Right Half controls EndAngle. Now on to setting the "min-max" angles of the red Angle to the Blue Angle at mouseUp. |
Beta Was this translation helpful? Give feedback.
-
|
The code's got me bamboozled and I haven't looked deeply yet at it all, but this panel seems to work very well! Well done all! |
Beta Was this translation helpful? Give feedback.
-
|
I'll take that as a compliment because I learned a lot going over your panels and the solutions you bring to problems that I encounter in my own panels. We both know going over someone else's code is difficult, but your panels make me wish I didn't drop out of High School or at least paid some attention during the computing/ programming lessons back in the days. But to make reading the code somewhat easier. It's all basically the Juce Slider class recreated with the Graphics class inside a custom component. It's probably a totally unnecessary "exercise" in how to use the uiCustomComponent because, looking at the Juce demo, a Slider of which its start/ end Angle can be set manually already exists but isn't implemented in Ctrlr, yet. Well, not entirely true. My example is a rotary slider whereas Juce only provides ThreeValueHorizontal or ThreeValueVertical. The next step, after I get to set the Start/ EndAngle of the Red Circle to be set to the Min/ Max Value of the Blue Circle, will be importing a picture for the Knob. (I saw in one of your panels how to get it from the resources.) Then to make it work as a "rotatable" sliderKnob which is probably done with "affineTransform". Ok, going over the panel that you posted in this topic, it is indeed done with affineTransform. But the zipfile is missing from the panel you posted. It results in an error message but that's no big deal. I can import my own. And if you ask me, affineTransform is a better way to handle the movement of the knob than a filmstrip to keep the filesize down. |
Beta Was this translation helpful? Give feedback.
-
|
By reading your reply I had some doubts... |
Beta Was this translation helpful? Give feedback.
-
|
I like the way you think. The "two sliders" method crossed my mind, for sure. But I wanted the "blue angle" anyway to give a direct readout of a modulator's min/ max settings. One thing lead to another and here I am now. I think I decided against the "two slider" method because of the "long distance" mouse movements I had to make with a panel that is almost full screen at 1080p. I even considered just adding 2 increment/ decrement buttons inside the component. But yes, the "two slider" method is a lot less hassle. But what's the fun in that ;-). |
Beta Was this translation helpful? Give feedback.
This is how I did it. I use lua to detect whether right or left button clicked and then plot the x,y separately. Maybe there's a better way?
In this panel x,y coordinates are limited to the comp:getHeight() and comp:getWidth() with my new friend jlimit()!
Tedjuh distance travelled_1_1_1_2021-02-28_21-38.zip
constructor = function() myMeta={ leftDragDistance = 0, rightDragDistance = 0, leftDragDistance = 0, rightDragDistance = 0, left={enterX = 0,enterY = 0,leaveX = 0,leaveY = 0}, right={enterX = 0,enterY = 0,leaveX = 0,leaveY = 0}, --engagedButton="left" } coords = setmetatable({},{__index=myMeta}) end