Line Drawing

LiveCode is the premier environment for creating multi-platform solutions for all major operating systems - Windows, Mac OS X, Linux, the Web, Server environments and Mobile platforms. Brand new to LiveCode? Welcome!

Moderators: FourthWorld, heatherlaine, Klaus, kevinmiller, robinmiller

Post Reply
saratogacoach
Posts: 87
Joined: Thu Jul 17, 2008 8:42 pm

Line Drawing

Post by saratogacoach » Fri Jun 05, 2009 2:15 pm

Hi,

A RunRev beginner, I am trying to create a diagram drawing project (see posting: http://forums.runrev.com/phpBB2/viewtop ... 4418#14418) that inserts images and text, draws lines, saves to editable file format and re-opens for editing.

For line drawing, I have tried the following code:

Code: Select all

on mouseUp
   set the style of the templateGraphic to "line"
   set the script of the templateGraphic to "on mouseDown" & CR & " grab me" & CR & "end mouseDown"
   global num_of_user_lines
  if num_of_user_lines = empty then 
    put 1 into num_of_user_lines
 end if
 create Graphic ("userline" & num_of_user_lines)
 reset the templateGraphic
 add 1 to num_of_user_lines
  
  choose graphic tool
end mouseUp
Unfortunately, this doesn't work. It doesn't draw a line, and it doesn't allow for dragging using "grab me".

The goal is to give the user a button to draw as many lines as they need to put into a diagram and uniquely name these lines using incrementing (+1) names.

Any help would be appeciated.

Kind Regards,
saratogacoach
LiveCode 4.6.0, Windows 7 Home Premium 64 bit, Core i7 2.80, 8G RAM, ATI Radeon HD5770

bn
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 4163
Joined: Sun Jan 07, 2007 9:12 pm

Post by bn » Fri Jun 05, 2009 3:24 pm

Saratoga,

I posted a little stack on RevOnline it is called connect lines Saratoga, if you search for it you should find it. It shows some basics of connecting images with lines. Have a look at it, take it apart and see what you can do with it.
regards
Bernd

I have looked at your example http://www.elearningprojects.com/Pedigree2.png
I have the feeling that once you get to know Rev better you might want to do the whole project a little bit differenty from now.

saratogacoach
Posts: 87
Joined: Thu Jul 17, 2008 8:42 pm

Post by saratogacoach » Fri Jun 05, 2009 3:49 pm

Hi Bernd,

Thanks for your help. I downloaded your posted example and will try to learn from it.

Regarding the design and implementation: I am sure that it will need to be done differently, once I can better understand RunRev's capabilities. I value your expert suggestions. I am not tied to a specific way and would very much prefer to develop the tool by using what works and what can take advantage of RunRev's impressive capabilities.

Meanwhile, I kept playing with the code, used the dictionary, another forum posting and created a line drawing code:

Code: Select all

on mouseUp
   reset the templateGraphic
   set the style of the templateGraphic to "line"
  global num_of_user_lines 
  if num_of_user_lines = empty then 
    put 1 into num_of_user_lines 
 end if
 //create Graphic ("userline" & num_of_user_lines)
 
 add 1 to num_of_user_lines
  
  choose graphic tool
end mouseUp
This code is not working correctly: (1) once the button that has this code is clicked, there is no way to end line drawing (can't click another button without drawing another line), and (2) since I had to comment out: //create Graphic ("userline" & num_of_user_lines), naming correctly (name +1) is missing.

Even if this will not be the final design, I am "learning by doing." So, I would like, if possible, to fix the code for this line drawing.

Then, I would like to see if I can combine the 3 items created so far (inserting images, inserting text and line drawing) and figure out how a user drawing can be saved in an editable file format (XML?), so that it can be opened from that file and the drawing can be edited/changed/items deleted or added, etc.

I think this saving/opening/selecting for editing code may be a veryy difficult challenge.

Please suggest how I can do this, including any code example for me to work with (helps learning by doing...). :)

Again, thanks.

Kind Regards,
saratogacoach
LiveCode 4.6.0, Windows 7 Home Premium 64 bit, Core i7 2.80, 8G RAM, ATI Radeon HD5770

bn
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 4163
Joined: Sun Jan 07, 2007 9:12 pm

Post by bn » Fri Jun 05, 2009 6:52 pm

Sartoga,

if you look at the code and uncomment the create Graphic part it does work.
It creates a graphic of that name as often as you click into the image.
BUT then you choose the graphic tool and the next click you do a graphic is created but not of the name you think it should. It gets an generic name
You can look at this in the Application Browser that you find in the tool menu or look at it in the inspector. You will find your graphics userline1 to x.

try this it is not what I would do but it creates multiple graphics that you can then resize
Put it into the script of one of your images. Note that I disabled the choose graphic tool part.

Code: Select all

on mouseUp 
   reset the templateGraphic 
   set the style of the templateGraphic to "line" 
   global num_of_user_lines 
   if num_of_user_lines = empty then put 1 into num_of_user_lines 
   set the script of the templategraphic to "on resizecontrol" & cr & "choose browse tool" & cr & "end resizecontrol"
   set the name of the templategraphic to ("userline" & num_of_user_lines) 
   create Graphic ("userline" & num_of_user_lines) 
   set the points of graphic ("userline" & num_of_user_lines) to the loc of  me & return & the bottomleft of me
   select graphic ("userline" & num_of_user_lines)
   choose pointer tool
   add 1 to num_of_user_lines 
   --choose graphic tool 
end mouseUp
regards
Bernd

saratogacoach
Posts: 87
Joined: Thu Jul 17, 2008 8:42 pm

Post by saratogacoach » Fri Jun 05, 2009 7:21 pm

Hi Bernd,

Thanks for sending this code. It is helpfully instructive.

I wish there were a way to retain "choose graphic tool" feature because that feature allows the user more drawing flexibility. The new code line drawing is more constrained within the handles.

In this new code, once the user releases the mouse, the drawn line becomes "static" and can longer be selected for changing (shortening, lengthening, rotating, dragging to where needed on the diagram). So, some code changes would be needed to add this enhanced functionality.

Is there a way to retain the graphic tool, release a specific drawn line and stop the tool after drawing a line, then call it again as needed? Can a line drawn with the graphic tool be named and incremented by +1? And can it be selected for shortening/lengthening/deletion/dragging? Complicated and maybe not possible?

I separately wrote, a short time ago, to you email address connected to the revOnline sample stack: some additional information about the tool's use, etc. (the private messaging in this forum appears to be disabled or I would have written that way).

Thanks for your generous and kind help.

Regards,
saratogacoach
LiveCode 4.6.0, Windows 7 Home Premium 64 bit, Core i7 2.80, 8G RAM, ATI Radeon HD5770

bn
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 4163
Joined: Sun Jan 07, 2007 9:12 pm

Post by bn » Fri Jun 05, 2009 7:38 pm

Saratoga,

these lines of the code select the graphic you just created and choose the pointer tool for changing the graphic:

Code: Select all

select graphic ("userline" & num_of_user_lines) 
   choose pointer tool 
this line of the code makes that once you stop resizing the graphic the browse tool is selected:

Code: Select all

set the script of the templategraphic to "on resizecontrol" & cr & "choose browse tool" & cr & "end resizecontrol"
(actually this was thought to be a feature :))You can change that if you want and the user can edit the graphic as long as the user wants. But then I dont see how to stop editing without chosing the browse tool. And to select the graphic for reediting you could make a locked field with the names of the graphics in it and if you click on that line you start reediting. But then how to tell when to go into browse mode.
lots of problems but it is basically a design decision. What does your user expect, what can he handle, how intuitiv do you want to make this etc.
regards
Bernd

saratogacoach
Posts: 87
Joined: Thu Jul 17, 2008 8:42 pm

Post by saratogacoach » Fri Jun 05, 2009 8:22 pm

Hi Bernd,

Yes, I understand. This presents a bit of a problem.

I guess it is not possible to give the user the option to use the graphic tool to draw lines, as needed. (This would probably be ideal, but I think there is a problem: can't name and increment name +1, and can't select for editing, deletion. I suspect it cannot be done.)

Yes, the selecting then back to browse seems to be a conflict. Not sure how to resolve. Am a little confused about how to get the line drawing and still have the other necessary features (slecting/dragging/editing). :? I wonder if the select or browse or both features can be removed to separate buttons, giving the user the choice of using one or the other. Problem here is how to identify which line they are choosing to select for editing.

My experience with the student users is that the tool needs to be simple, easy to use, intuitive or the attention span does not remain.

I'll keep thinking on this puzzle.

Kind Regards,
saratogacoach
LiveCode 4.6.0, Windows 7 Home Premium 64 bit, Core i7 2.80, 8G RAM, ATI Radeon HD5770

Dondi
Posts: 18
Joined: Fri Apr 10, 2009 2:40 am

Post by Dondi » Tue Jun 23, 2009 4:21 am

bn wrote: ...
I posted a little stack on RevOnline it is called connect lines Saratoga, if you search for it you should find it. It shows some basics of connecting images with lines. Have a look at it, take it apart and see what you can do with it.
regards
Bernd
...
Hi Bernd, I searched RevOnline for this stack and can not find it. I tried the search using "connect lines", "connect", "lines", "bn", and "Bernd" with no success. Can you provide a link to the stack?

Thanks,

Dondi.

bn
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 4163
Joined: Sun Jan 07, 2007 9:12 pm

Post by bn » Tue Jun 23, 2009 11:53 am

Dondi,

I took that stack off of RevOnline because it was very specific and really to make the point in this discussion.

I have some stacks (basic, instructional stuff) that deal with drawing connecting lines.
Could you tell me what you want and I try to post the most relevant example.

regards
Bernd

Dondi
Posts: 18
Joined: Fri Apr 10, 2009 2:40 am

Post by Dondi » Tue Jun 23, 2009 1:01 pm

Hi Bernd,

I can presently add, move, resize and delete shapes (templateGraphic objects) placed on my "canvas" (an image object)

I would now like to:

1. Draw connecting lines between the shapes
2. Keep the lines attached whenever a connected shape is moved

Can you explain how I might approach coding this in Rev?

Thank you,

Dondi.

Klaus
Posts: 14177
Joined: Sat Apr 08, 2006 8:41 am
Contact:

Post by Klaus » Tue Jun 23, 2009 1:21 pm

Hi Dondi,

1. Something like this (very basic!):

Code: Select all

command connect_shapes shape1,shape2
## where shape 1 and 2 are the names or IDs or whatever 
## of two graphics you want to connect

  set the style of the templateGraphic to "line"
  ## set more props here...
  set the points of the templategraphic to (the loc of grc shape1,the loc of grc shape2)
  create graphic
end connect_shapes
You get the picture...

2. This is a bit more elaborate and will require lots of scripting and is not doable with a simple
"grab me" handler I'm afraid. This will surely exceed the "scriptlimits" (check the docs)

But you could use the new "behaviors" in Rev 3.5 for thist task.
Requires more advanced scripting though, but the basic steps might be:
a. Create one or more necessary behavior(s) with all necessary scripts
b. create your graphics on the fly
c. assign a behavior to your new object(s)


Best

Klaus

bn
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 4163
Joined: Sun Jan 07, 2007 9:12 pm

Post by bn » Tue Jun 23, 2009 1:24 pm

Dondi,

I uploaded a stack "Pedigree Diagram Draft" to RevOnline 3.5.

Make new objects by clicking on the right side template objects and than connect them by alt-clicking on an object and dragging the line to the object you want to connect it to.

Most of the scripts are in the objects.

I leave it for a while posted, since it is not finished I might take it down in the near future, now that everything is polished and shiny in RevOnline...

I uploaded a second stack "Connecting Objects with movable lines" which is similar but a little more cleaned up, sort of a game, but not really.

I hope this is what you are looking for, the style of the connecting lines can easily be changed to straight.

tell me how it works for you.

regards

Bernd

bn
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 4163
Joined: Sun Jan 07, 2007 9:12 pm

Post by bn » Tue Jun 23, 2009 1:46 pm

now they are actually uploaded.
forgot to save the changes in RevOnlin :wink:

regards

Bernd

Dondi
Posts: 18
Joined: Fri Apr 10, 2009 2:40 am

Post by Dondi » Wed Jun 24, 2009 1:58 am

Klaus wrote:Hi Dondi,

1. Something like this (very basic!):

Code: Select all

command connect_shapes shape1,shape2
## where shape 1 and 2 are the names or IDs or whatever 
## of two graphics you want to connect

  set the style of the templateGraphic to "line"
  ## set more props here...
  set the points of the templategraphic to (the loc of grc shape1,the loc of grc shape2)
  create graphic
end connect_shapes
You get the picture...

2. This is a bit more elaborate and will require lots of scripting and is not doable with a simple
"grab me" handler I'm afraid. This will surely exceed the "scriptlimits" (check the docs)

But you could use the new "behaviors" in Rev 3.5 for thist task.
Requires more advanced scripting though, but the basic steps might be:
a. Create one or more necessary behavior(s) with all necessary scripts
b. create your graphics on the fly
c. assign a behavior to your new object(s)

...
Thanks Klaus! Much appreciated. I will follow up after acting on this. Thanks,

Dondi.

Dondi
Posts: 18
Joined: Fri Apr 10, 2009 2:40 am

Post by Dondi » Wed Jun 24, 2009 1:59 am

bn wrote:Dondi,

I uploaded a stack "Pedigree Diagram Draft" to RevOnline 3.5.

Make new objects by clicking on the right side template objects and than connect them by alt-clicking on an object and dragging the line to the object you want to connect it to.

Most of the scripts are in the objects.

I leave it for a while posted, since it is not finished I might take it down in the near future, now that everything is polished and shiny in RevOnline...

I uploaded a second stack "Connecting Objects with movable lines" which is similar but a little more cleaned up, sort of a game, but not really.

I hope this is what you are looking for, the style of the connecting lines can easily be changed to straight.

tell me how it works for you.

regards

Bernd
Thank you very much Bernd! I am downloading now and will follow-up after digesting.

Dondi.

Post Reply