[Chili] Draw a line from button to button over them

[Zigaroula]

Hello,

I am trying to develop a linking interface between different elements using buttons (click on a button, then click on another button to link them together).

In order to give visual feedback to the user, I would like to draw a line between linked buttons, ideally from center to center.

I had two ideas :

1 - Use the DrawScreen function of the widget and draw a line using coordinates. Two problems : First Chili needs to be defined before my widget (lower layer) and thus the lines appear under my chili window ; second, I do not know how to get the global coordinates of my buttons (they are actually in a window which is in a scroll panel which is in a window, and adding all the coords does not seem to give me the right value).

2 - Create a custom Control as child of my scroll panel and use a custom DrawControl to draw lines between linked buttons. I tried to do as stated hereviewtopic.php?t=26858 but did not manage to get the desired results (nothing seems to appear on my screen).
Here is the piece of code I tried to write :

Code: Select all

	local function drawLinks()
		for k, out in pairs(Links) do
			if k == "begin" and out then
				local x1, x2, y1, y2 = 0, 0, 0, 0
				-- UI.Scenario.Output.Begin is the button
				-- UI.Scenario.Begin is the parent window of the button
				x1 = UI.Scenario.Output.Begin.x + UI.Scenario.Begin.x
				y1 = UI.Scenario.Output.Begin.y + UI.Scenario.Begin.y
				-- same
				x2 = UI.Scenario.Input[out].x + UI.Scenario.Levels[out].x
				y2 = UI.Scenario.Input[out].y + UI.Scenario.Levels[out].y
				gl.Vertex(x1, y1)
				gl.Vertex(x2, y2)
			else
				for kk, linked in pairs(out) do
					-- TODO
				end
			end
		end
	end
	UI.Scenario.Links = Chili.Control:New{
		parent = UI.Scenario.ScenarioScrollPanel,
		x = '0%',
		y = '0%',
		width = '100%',
		height = '100%',
		DrawControl = function(obj)
			local x = obj.x
			local y = obj.y
			local w = obj.width
			local h = obj.height
			gl.Color(1, 1, 1, 1)
			gl.PushMatrix()
			gl.Translate(x, y, 0)
			gl.Scale(w, h, 1)
			gl.BeginEnd(GL.LINES, drawLinks)
			gl.PopMatrix()
		end
	}

Do you have any idea on how to do what I'm trying to achieve using one of the aforementioned methods or a third one ?

Thank you in advance !

[Zigaroula]

So, I managed to draw my lines using a custom control, however I do not manage to make this control be over other controls (all of them, including my custom control, are children of the same Scroll Panel). Is there a way to achieve this ?

I'm not sure this will look good but I want to try.

[gajop]

Ordering of controls matters for drawing, try changing it.
PS: Would appreciate it if you also wrote answers to the things you solved yourself.

[Zigaroula]

You're right, here's my solution :

Code: Select all

local drawLinks = function(obj)
		gl.Color(1, 1, 1, 1)
		gl.LineWidth(3)
		gl.BeginEnd(
			GL.LINES,
			function()
				for k, link in pairs(Links) do
					for kk, out in pairs(link) do
						gl.Color(unpack(UI.Scenario.Output[k][kk].chosenColor))
						local x1, y1, x2, y2
						x1 = UI.Scenario.Output[k][kk].x + UI.Scenario.Output[k][kk].tiles[1]/2 + UI.Scenario.Levels[k].x + UI.Scenario.Output[k][kk].width/2
						y1 = UI.Scenario.Output[k][kk].y + UI.Scenario.Output[k][kk].tiles[2]/2 + UI.Scenario.Levels[k].y + UI.Scenario.Output[k][kk].height/2
						x2 = UI.Scenario.Input[out].x + UI.Scenario.Input[out].tiles[1]/2 + UI.Scenario.Levels[out].x + UI.Scenario.Input[out].width/2
						y2 = UI.Scenario.Input[out].y + UI.Scenario.Input[out].tiles[2]/2 + UI.Scenario.Levels[out].y + UI.Scenario.Input[out].height/2
						gl.Vertex(x1, y1)
						gl.Vertex(x2, y2)
					end
				end
			end
		)
	end
	UI.Scenario.Links = Chili.Control:New{
		parent = UI.Scenario.ScenarioScrollPanel,
		x = '0%',
		y = '0%',
		width = '100%',
		height = '100%',
		DrawControl = drawLinks,
		drawcontrolv2 = true
	}

The function basically computes the relative coordinates of the middle of the buttons in the scroll panel using its parents x and y along with the length of the left and top tiles (I didn't look very deep into this, but I got inspired from what I saw in the DrawControl function of buttons, and this seems to be a valid solution) and draws a line between these two points using gl.BeginEnd with GL.LINES.

Changing the order of controls indeed worked but the result is not visually good, so I'll keep it as it was.

Here is a sample of what it looks like :


Thanks for your answer :)

[gajop]

I think what you're doing is very interesting. A node editor is something Spring needs and would be useful for a number of purposes, most important being material/shader creation. Hopefully you'll improve this further, good luck.