Teathered graphic object techniques

[msteffes]

Can anyone explain the techniques involved in the dynamic rerouting of connecting lines between graphic objects. For instance, what one might see in a logic gate program or a diagram making program.

[Alyce Watson]

Nov 3, 2018 9:02:30 GMT -5 msteffes said:

Can anyone explain the techniques involved in the dynamic rerouting of connecting lines between graphic objects. For instance, what one might see in a logic gate program or a diagram making program.

I don't have an answer, but your question gave me an idea for a fun program. Imagine allowing a user to select two from a set of colors, then select a bitwise operation, and the program would display the resulting color.

Rerouting dynamically as you describe could get complicated. Can you share how many logic gates you need, or objects to diagram? How complicated would the routing need to be?

[cundo]

Nov 3, 2018 9:02:30 GMT -5 msteffes said:

Can anyone explain the techniques involved in the dynamic rerouting of connecting lines between graphic objects. For instance, what one might see in a logic gate program or a diagram making program.

Arrays, containing multiple data as: objects ID, x and y positions, and whatever info you need.

[msteffes]

Hi Alyce, Cundo,

The question is rooted in an Idea I had about creating a tool I just could not find in scouring the internet. My pet name for the it is Logicboxes. I have been looking for a simulator that would allow putting together low level electro-mechanical devices for testing of wiring diagrams. Some thing like a ladder logic simulation program but not as monstrous as Simulink yet having the ability to create more relatively complex objects with definable internal logic. Dragging objects with dynamic connection line rerouting would be very cool but I suspected the complexity might be substantial and suck too much creative energy away from the real goal.
I am considering more of a grid system approach to help simplify the connectivity of objects. Custom blocks could have multiple inputs and outputs and there could be a small library of connector blocks.
Cundo is correct, but more along the lines of psuedo data structures would be the cool ticket, but LB does not support this out side of API. Does this all sound like a tall order for LB? ...Probably more of a tall order for me as a backyard programmer ;-)

[Rod]

Start with a very simple example of an object and what you expect it to do. We can build on it from there.

[tsh73]

Draw a picture.
Picture worths thousand words (often).

[msteffes]

2 Door Safety Interlock - 900-4R.pdf (20.14 KB)


Hello all ,

I have attached a drawing that represents a very simple electro-mechanical circuit that the simulator project would handle.  Dragging parts around and keeping them connected would be secondary to finding a solid foundation for building components with customizable internal logic. But lets see how complex the teathering solution would be. Something as simple as a switch firing a relay would be enough to explore the feasibility, and rudements of the project

[Rod]

Ok just so you know we are not ignoring the post. This draws a simplified picture. Next step for me is to build a connections array that will hold the current location and status of each components connections. Then a link array that will hold connection to connection links that will help draw the wires. The wire route will require a little intelligence. Eventually you will be able to click on a component and move it. Of course it will require an editor to build and save these components but proof of concept first.

You will see that each component has a single x,y everything else is an offset. Each time the diagram is drawn the new connection positions will be saved to connections() and the wire links redrawn.

snipped, see below

[Rod]

Ok, this is messy and is just letting me learn about the problem. Now you can click on and drag the components. The components are built once then trapped as bmps. Now on to the connections.

snipped



[Rod]

Now the components can be moved and very simple tethers are attached. They only redraw when the component move stops, that can be changed. But the challenge now is to add some intelligence to the wire link drawing. There needs to be starting delta for each connector the first SC would be x=0 y=-1 the lower SC which has two links programmed would be x=0 y=1. The wire needs to avoid other components. It needs to be grouped with similar path (cabled) wires. It needs to go horizontal or vertical So if folks would like to expand the drawlink sub that would be great. You are starting at x1 y1 and ending at x2 y2. Other component locations are in location() x,y,w,h

Me? I am off to build a new dressing room for my sister in law, may take a while!

nomainwin
WindowWidth  = 800
WindowHeight = 600
UpperLeftX   = (DisplayWidth-WindowWidth)/2
UpperLeftY   = (DisplayHeight-WindowHeight)/2
open "Tethering" for graphics_nsb as #1
#1 "trapclose quit ; down"
#1 "font courier_new 6"
components=3
links=2
global connectors
connectors=1
dim component$(components)
dim location(components,4) 'x,y,w,h
dim connector(100,4) 'xoff,yoff,comp,conn
dim link(links,2) 'from,to

component$(1)="900-4R,Control,300,100,180,80,X 20,Y 20,* SC,* I1,*NO1,* C1,*NC1,* I2,*NO2,X 30,Y 39,* SC,* I3,*NO3,* C3,*NC3,* I4,*NO4"
component$(2)="M490P,DOOR A,100,200,70,100,X 40,Y 20,* NO,X 10,Y 40,#DPS,X 40,Y 39,* NC,X 40,Y 58,*  C"
component$(3)="M490P,DOOR B,100,320,70,100,X 40,Y 20,* NO,X 10,Y 40,#DPS,X 40,Y 39,* NC,X 40,Y 58,*  C"


link(1,1)=8
link(1,2)=17
link(2,1)=8
link(2,2)=20

for n=1 to components
call drawcomponent n
next
#1 "cls"
for n=1 to components
call drawbmp n
next


#1 "when leftButtonDown [startmove]"
wait

[startmove]
sX = MouseX
sY = MouseY
'find component
found=0
for n=1 to components
   x=location(n,1)
   y=location(n,2)
   w=location(n,3)
   h=location(n,4)
   if sX>x and sX<x+w and sY>y and sY<y+h then
       found=n
       oldx=x
       oldy=y
       xoff=x-sX
       yoff=y-sY
       #1 "when leftButtonDown"
       #1 "when leftButtonMove [move]"
       #1 "when leftButtonUp [stopmove]"
   end if
   if found then exit for
next
wait

[move]
newx=MouseX+xoff
newy=MouseY+yoff
#1 "place ";oldx;" ";oldy;" ; backcolor white ; color white ; boxfilled ";oldx+w;" ";oldy+h
#1 "drawbmp bmp";str$(found);" ";newx;" ";newy
oldx=newx
oldy=newy
wait

[stopmove]
#1 "when leftButtonMove"
#1 "when leftButtonUp"
#1 "when leftButtonDown [startmove]"
location(found,1)=newx
location(found,2)=newy
#1 "cls"
for n=1 to components
call drawbmp n
next
for n=1 to links
   call drawlink n
next
wait

sub drawcomponent n
   s$=component$(n)
   name$=word$(s$,1,",")
   type$=word$(s$,2,",")
   x=val(word$(s$,3,","))
   y=val(word$(s$,4,","))
   w=val(word$(s$,5,","))
   h=val(word$(s$,6,","))
   location(n,1)=x
   location(n,2)=y
   location(n,3)=w
   location(n,4)=h
   #1 "place ";x;" ";y;" ; backcolor lightgray ; boxfilled ";x+w;" ";y+h
   #1 "place ";x+2;" ";y+12;" ;\";name$+" "+type$
   pos=7
   conn=1
   c$=word$(s$,pos,",")
   while c$<>""
       if mid$(c$,1,1)="X" then xo=x+val(mid$(c$,2,3))
       if mid$(c$,1,1)="Y" then yo=y+val(mid$(c$,2,3))
       if mid$(c$,1,1)="#" then #1 "place ";xo+2;" ";yo+12;" ;\";mid$(c$,2,3)
       if mid$(c$,1,1)="*" then
           connector(connectors,1)=xo-x
           connector(connectors,2)=yo-y
           connector(connectors,3)=n
           connector(connectors,4)=conn
           #1 "place ";xo;" ";yo;" ; box ";xo+20;" ";yo+20
           #1 "place ";xo+2;" ";yo+12;" ;\";mid$(c$,2,3)
           xo=xo+19
           conn=conn+1
           connectors=connectors+1 'global connection counter
       end if
       pos=pos+1
       c$=word$(s$,pos,",")
   wend
   #1 "getbmp bmp";str$(n);" ";x;" ";y;" ";w;" ";h
end sub

sub drawbmp n
   x=location(n,1)
   y=location(n,2)
   #1 "drawbmp bmp";str$(n);" ";x;" ";y
end sub

sub drawlink n
   link1=link(n,1)
   link2=link(n,2)
   x1=location(connector(link1,3),1)+connector(link1,1)+10
   y1=location(connector(link1,3),2)+connector(link1,2)+10
   x2=location(connector(link2,3),1)+connector(link2,1)+10
   y2=location(connector(link2,3),2)+connector(link2,2)+10
   'We need much more intelligent line drawing to replace this simple line command
   #1 "color black ; line ";x1;" ";y1;" ";x2;" ";y2

end sub


sub quit handle$
close #1
end
end sub




[Rod]

A bit more intelligence in the tethering but it quickly becomes unstuck. Probably needs to "grow" its way towards the target. But since the OP has not responded I'm leaving it aside for now.


nomainwin
WindowWidth  = 800
WindowHeight = 600
UpperLeftX   = (DisplayWidth-WindowWidth)/2
UpperLeftY   = (DisplayHeight-WindowHeight)/2
open "Graphics" for graphics_nsb as #1
#1 "trapclose quit ; down"
#1 "font courier_new 6"
components=3
links=4
global connectors
connectors=1
dim component$(components)
dim location(components,4) 'x,y,w,h
dim connector(100,6) 'xoff,yoff,xdelta,ydelta,comp,conn
dim link(links,2) 'from,to

component$(1)="900-4R,Control,300,100,180,65,X 20,Y 20,* SC00-1,* I100-1,*NO100-1,* C100-1,*NC100-1,* I200-1,*NO200-1,X 30,Y 39,* SC0001,* I30001,*NO30001,* C30001,*NC30001,* I40001,*NO40001"
component$(2)="M490P,DOOR A,100,200,70,100,X 40,Y 20,* NO0100,X 10,Y 40,#DPS,X 40,Y 39,* NC0100,X 40,Y 58,*  C0100"
component$(3)="M490P,DOOR B,100,320,70,100,X 40,Y 20,* NO0100,X 10,Y 40,#DPS,X 40,Y 39,* NC0100,X 40,Y 58,*  C0100"


link(1,1)=8
link(1,2)=17
link(2,1)=8
link(2,2)=20
link(3,1)=9
link(3,2)=16
link(4,1)=2
link(4,2)=19
link$(1)="red"
link$(2)="red"
link$(3)="blue"
link$(4)="green"

for n=1 to components
call drawcomponent n
next
#1 "cls"
for n=1 to components
call drawbmp n
next
for n=1 to links
   call drawlink n
next
#1 "when leftButtonDown [startmove]"
wait

[startmove]
sX = MouseX
sY = MouseY
'find component
found=0
for n=1 to components
   x=location(n,1)
   y=location(n,2)
   w=location(n,3)
   h=location(n,4)
   if sX>x and sX<x+w and sY>y and sY<y+h then
       found=n
       oldx=x
       oldy=y
       xoff=x-sX
       yoff=y-sY
       #1 "when leftButtonDown"
       #1 "when leftButtonMove [move]"
       #1 "when leftButtonUp [stopmove]"
   end if
   if found then exit for
next
wait

[move]
newx=MouseX+xoff
newy=MouseY+yoff
#1 "place ";oldx;" ";oldy;" ; backcolor white ; color white ; boxfilled ";oldx+w;" ";oldy+h
#1 "drawbmp bmp";str$(found);" ";newx;" ";newy
oldx=newx
oldy=newy
wait

[stopmove]
#1 "when leftButtonMove"
#1 "when leftButtonUp"
#1 "when leftButtonDown [startmove]"
location(found,1)=newx
location(found,2)=newy
#1 "cls"
for n=1 to components
call drawbmp n
next
for n=1 to links
   call drawlink n
next
wait

sub drawcomponent n
   s$=component$(n)
   name$=word$(s$,1,",")
   type$=word$(s$,2,",")
   x=val(word$(s$,3,","))
   y=val(word$(s$,4,","))
   w=val(word$(s$,5,","))
   h=val(word$(s$,6,","))
   location(n,1)=x
   location(n,2)=y
   location(n,3)=w
   location(n,4)=h
   #1 "place ";x;" ";y;" ; backcolor lightgray ; boxfilled ";x+w;" ";y+h
   #1 "place ";x+2;" ";y+12;" ;\";name$+" "+type$
   pos=7
   conn=1
   c$=word$(s$,pos,",")
   while c$<>""
       if mid$(c$,1,1)="X" then xo=x+val(mid$(c$,2,3))
       if mid$(c$,1,1)="Y" then yo=y+val(mid$(c$,2,3))
       if mid$(c$,1,1)="#" then #1 "place ";xo+2;" ";yo+12;" ;\";mid$(c$,2,3)
       if mid$(c$,1,1)="*" then
           connector(connectors,1)=xo-x
           connector(connectors,2)=yo-y
           connector(connectors,3)=val(mid$(c$,5,2))
           connector(connectors,4)=val(mid$(c$,7,7))
           connector(connectors,5)=n
           connector(connectors,6)=conn
           #1 "place ";xo;" ";yo;" ; box ";xo+20;" ";yo+20
           #1 "place ";xo+2;" ";yo+12;" ;\";mid$(c$,2,3)
           xo=xo+19
           conn=conn+1
           connectors=connectors+1 'global connection counter
       end if
       pos=pos+1
       c$=word$(s$,pos,",")
   wend
   #1 "getbmp bmp";str$(n);" ";x;" ";y;" ";w;" ";h
end sub

sub drawbmp n
   x=location(n,1)
   y=location(n,2)
   #1 "drawbmp bmp";str$(n);" ";x;" ";y
end sub

sub drawlink n
   link1=link(n,1)
   link2=link(n,2)
   x1=location(connector(link1,5),1)+connector(link1,1)
   y1=location(connector(link1,5),2)+connector(link1,2)
   x2=location(connector(link2,5),1)+connector(link2,1)
   y2=location(connector(link2,5),2)+connector(link2,2)
   if connector(link1,3)=0 and connector(link1,4)=1 then x1=x1+10 : y1=y1+20 : ix1=x1 : iy1=y1+20
   if connector(link1,3)=0 and connector(link1,4)=-1 then x1=x1+10 : ix1=x1 : iy1=y1-30
   if connector(link1,3)=1 and connector(link1,4)=0 then x1=x1+20 : y1=y1+10 : ix1=x1+20 : iy1=y1
   if connector(link1,3)=-1 and connector(link1,4)=0 then y1=y1+10 : ix1=x1-20 : iy1=y1
   if connector(link2,3)=0 and connector(link2,4)=1 then x2=x2+10 : y2=y2+20 : ix2=x2 : iy2=y2+20
   if connector(link2,3)=0 and connector(link2,4)=-1 then x2=x2+10 : ix2=x2 : iy2=y2-20
   if connector(link2,3)=1 and connector(link2,4)=0 then x2=x2+20 : y2=y2+10 : ix2=x2+20 :iy2=y2
   if connector(link2,3)=-1 and connector(link2,4)=0 then y2=y2+10 : ix2=x2-20 : iy2=y2
   #1 "color ";link$(n)
   #1 "line ";x1;" ";y1;" ";ix1;" ";iy1
   #1 "line ";x2;" ";y2;" ";ix2;" ";iy2
   if connector(link1,4)=-1 then
   #1 "line ";ix1;" ";iy1;" ";ix2;" ";iy1
   #1 "line ";ix2;" ";iy2;" ";ix2;" ";iy1
   else
   #1 "line ";ix1;" ";iy1;" ";ix1;" ";iy2
   #1 "line ";ix2;" ";iy2;" ";ix1;" ";iy2
   end if

end sub


sub quit handle$
close #1
end
end sub


[tsh73]

Rod, way cool.