Home‎ > ‎

Drawing Program, Message Paths, the Pass Command

Drawing is easy in LiveCode...also Message Path, Passing Messages. 


1. A Drawing Program Using Lines, etc

We add a graphic “Line” to our card. When you hold down the mouse button and move it, we will add those points to the graphic; adding more lines by connecting those points. Like "connecting the dots" but here we are connecting the points (or connecting the mouse locations)


When you double-click the mouse button, we clear out the points (erase it)


We use a variable "nowDrawing" as a flag with either "True" or "False" in it to turn the 'adding points' on or off. For a more detailed explanation, see the notes below.


The picture below shows a capsule of what you will be doing:



How to create it and the code needed

  a. Start with a new stack

  b. Create a new card

  c. Put a graphic line on the card. (Click on the graphic line tool, then draw a line on your card)

  d. Add the following code to the Card Script:


--------------------------------------------------------------------------------------------------Card Script -------------------------------------------------------------------------

    local nowDrawing


    on mouseDoubleUp

       set the points of graphic "line" to empty

    end mouseDoubleUp


    on mouseDown

       put true into nowDrawing

       set the points of graphic "line" to the points of graphic "line" & cr & the                 mouseLoc

    end mouseDown


    on mouseMove

       if nowDrawing then set the points of graphic "line" to the points of graphic "line" & cr & the mouseLoc

    end mouseMove


    on mouseUp

       put false into nowDrawing

       set the points of graphic "line" to the points of graphic "line" & cr & cr

    end mouseUp


--------------------------------------------------------------------------------------------------Card Script -------------------------------------------------------------------------


Notes:

   In the code above,  "cr" is the abbreviation for "carriage return". It essentially inserts a new line in the code just as if you pressed the "Enter" or "Return" key on your keyboard.

    When the mouse is moving, you need to know if the mouse button is down or not. If it is down, then you want to draw. If it is not being held down, then you do not want to draw. The problem in LiveCode is that you can not have one message handler call another message handler. You can not do the following:


        on mouseMove

            on mouseDown        <==== NO !

                    "draw"

            end mouseDown        <==== NO 

       end mouseMove


So need a marker or flag to set to indicate that the mouseDown key is being pressed.Then the mouseMove just need to check that marker or flag to see if it should draw as the mouse is being moved. It seems complicated but one you understand, it makes sense. 

This occurs a lot in LiveCode so you should get to know and understand using variables with "True" or "False" in them as flags for other handlers to check

    


Questions:

Can you explain?

    1. What is mouseloc?  The following will let you play with it and see the mouse in action
      • (open up the Message Box and put the following command in it - 
        1. put the mouseloc 
        2. press the return/enter key.
        3. now move the mouse a little and press the Return/Enter key again
        4. What are you seeing?
      • add a button on your card and to it add the code - "Put the mouseloc". 
    1. What happens with the command “set the points…”?  (write it with numbers to see what it looks like)



2. Changing Colors, Message Paths, Passing Messages, the Pass command:

Now let us add a button to change the color to red.


We add script to that button:


on mouseUp

   set the textcolor of the graphic "line" to red

end mouseUp


When we run it, we discover that after we click the button “red” the line keeps drawing. What is happening? Why does it not stop?


(Try it yourself to see what happens and better understand the message path discussion below)


To understand what is happening, we need to learn about messages and how they are handled.


When a message is issued, it goes through a path or hierarchy looking for a handler to handle it. First it looks to the button (Control), then any groups on the card, then the card itself, then the stack,... If if finds a handler for that message, it stops there.


This is the full hierarchy:

                                                  

(the "Control" in the diagram refers to any object that can be placed on a card: a button, field, scrollbar, image, graphic, etc)


In our case, the mouse handlers (mouseUp, mouseDown, mouseMove and mouseDouble ) are all on the card. Normally, the following takes place:

    • mouseDown - turns on drawing (set “nowDrawing” to “True”)
    • mouseMove - draws the line (if “nowDrawing” is “True” then add the points, if “False” - do nothing)
    • mouseUp - turns off drawing (set “nowDrawing” to “False”)


We then added the button “Red” (Control) which has the “mouseUp” message handler that sets the color to red. It gets the “mouseUp” message instead of the card since it is in the message path before the card. Now the “mouseUp” handler on the card never gets the message ( and never turns off the drawing mode)


The solution is to add the line “pass mouseUp” which tells LiveCode to pass the message on up to the next mouseUp message handler which is on the card.


So now our code on the button “Red’ looks like this:


on mouseUp

   set the textcolor of the graphic "line" to red

   pass mouseUp

end mouseUp


Now the card  "mouseUp" handler turns off the drawing and it works as expected



3. Challenges: These are listed in order of difficulty

    Change the color of the line (try any one of the following, or all of them - they are in order of difficulty)

      1. Add a button “Red” that changes the color of the line to red, one for black, etc
      2. Add a button “Change” that changes it to another color
      3. Add a button “Random” to change it to a random color
      4. Add a button “New” that leaves the current color but new lines will be a different color (adds a new image)
    1. Add a button to change the thickness of the line by 2 each time clicked
    2. Add another button to make it smaller by 2 when clicked
    3. Add a slider to change it instead of a button
    4. Add a button to add another image and make it a different color


Dragging a Straight Line Inside an Image with Code:
            Here is code to draw a straight line with code inside of an image:

            on mouseUp
                    set the penColor to "green"
                    set the penHeight to 5
                    set the penWidth to 5
                    choose line tool
                    drag from 0,0 to 10,20
                    choose browse tool
            end mouseUp

Comments