Simple graphics interface in lazarus.

[Creet]

Hello,

At first I should inform that I'm green in programming.

My task is - make program in Lazarus that draws some rectangles or other figures and allows user to interact with them with mouse (drag them to change position, draw straight line by mouse to check distance etc.)

My problem is i simply don't know commands to do that. I am looking for place in internet where I could find command list but without result. Google 'lazarus commands' gives no correct results for me. Unfortunately those: https://www.freepascal.org/docs-html/rtl/graph/index-5.html don't work.

I would be very grateful for showing me place where such commands are listed, great if with explanation.

Best regards,
Creet

[Handoko]

Hello Creet,
Welcome to the forum.

My task is - make program in Lazarus that draws some rectangles or other figures and allows user to interact with them with mouse (drag them to change position, draw straight line by mouse to check distance etc.)

Try these example codes (you can download the source code, modify and run it):

Move shape with mouse by mousemove by furious programming:
http://forum.lazarus.freepascal.org/index.php/topic,43376.msg303582.html#msg303582

Drag and drop shape by Handoko:
http://forum.lazarus.freepascal.org/index.php/topic,38844.msg265130.html#msg265130

Drawing, moving and make connection between shapes by Handoko:
http://forum.lazarus.freepascal.org/index.php/topic,41036.msg284131.html#msg284131

A simple pong game by Handoko:
http://forum.lazarus.freepascal.org/index.php/topic,42439.msg297949.html#msg297949

The example codes above can be bit 'too hard' for beginners. But if you're really eager to learn programming plus you have average level of intelligence, you can understand and do basic graphics programming in weeks.

Unfortunately those: https://www.freepascal.org/docs-html/rtl/graph/index-5.html  don't work.

Please don't learn that. That unit Graph is for old-hardware compatibility only. It is okay if you have 'extra' time to learn it. Beginners should skip it but start with 'better' graphics libraries:
http://wiki.freepascal.org/Graphics_libraries

You may start with TCanvas or TShape or TPaintBox. These 3 graphics tools are relatively easy to learn and required no installation.

If you want a short list of the advantages/disadvantages of the engines, read here:
http://forum.lazarus.freepascal.org/index.php/topic,42439

Do you already have some basic knowledge of Pascal? If not, I recommend you to finish this tutorial first:
http://www.pascal-programming.info/index.php

Honestly, the 11 lessons in the link above are boring. You don't do any animation nor graphics. But all of them are the basic things a Pascal programmer must understand. If you learn it seriously, I guess you can finish them in less than a week.

After that, you should try these video tutorials which will make you better understand how to use Lazarus:
http://wiki.lazarus.freepascal.org/Lazarus_videos

And these are the graphics lesson you're waiting:
http://wiki.freepascal.org/Developing_with_Graphics#Working_with_TCanvas
You should read the topics: Working with TCanvas and Drawing a rectangle. The others are not very important for you now.

Here are the documentation and tutorial for TCanvas:
https://lazarus-ccr.sourceforge.io/docs/lcl/graphics/tcanvas.html
http://wiki.lazarus.freepascal.org/TCanvas

And this is the documentation and tutorial for TShape:
https://lazarus-ccr.sourceforge.io/docs/lcl/extctrls/tshape.html
https://www.youtube.com/watch?v=hNaZTtJkZ0s

And this are for TPaintBox:
https://lazarus-ccr.sourceforge.io/docs/lcl/extctrls/tpaintbox.html
https://www.youtube.com/watch?v=UP7d9HyTGlE

OMG ... lots of materials to read and learn.
Now is weekend, lets start learning!

[Creet]

Thanks for such a complex answer. I have chcecked example programs and only that with 3 rectangles worked. I guess it's because it worked on unit main window, not unit1. After pasting code using unit1 to empty project, it gave me empty form1 window. And three rectangles gave proper workin .exe <- thats what i like.

I know how variables, loops, etc work, but pascal language here is so much different from what i learned in school.

Using pseudocode, thing i want something that looks like this:

begin
 open graphic box(0,0,900,800);
 draw line1(x1,y1,y1,y2);
 draw rectangle(rx1,ry1,rx2,ry2);
 if user.clicks.in (800,0,900,0) then clrscr;
 readln (or just read enter, i guess standard entry commands =/= read enter);
 close graphic box;
end.

That base is what i don't know how to do. On this i will try to write short training program for Air Traffic Controllers, of course if You wish - I will post it here.

[440bx]

Try these example codes (you can download the source code, modify and run it):

Move shape with mouse by mousemove by furious programming:
http://forum.lazarus.freepascal.org/index.php/topic,43376.msg303582.html#msg303582

Drag and drop shape by Handoko:
http://forum.lazarus.freepascal.org/index.php/topic,38844.msg265130.html#msg265130

Drawing, moving and make connection between shapes by Handoko:
http://forum.lazarus.freepascal.org/index.php/topic,41036.msg284131.html#msg284131

A simple pong game by Handoko:
http://forum.lazarus.freepascal.org/index.php/topic,42439.msg297949.html#msg297949

@Handoko:

Really very nice of you to write these examples and show those who may benefit from them where they can be had.

Your post reminded me of one of my wish list items for the forum software, that is, being able to search for posts that include attachments.  That would be a nice way to find code/examples/techniques people have contributed.  Alas, the forum software doesn't do that and it doesn't seem to be a feature that is going to be added to it anytime soon.

This gave me the idea that, maybe the moderators (and forum users) may entertain the idea of creating one or more library threads that are simply a list of examples one can search/review to find one that is currently of interest.

There is a lot of knowledge that is going into a "black hole" because there is no easy way to locate the example/thread that contains it.

This is just a thought and it likely needs refinement but, it would sure be nice to have a centralized place (repository) of examples contributed by forum users.

Your post made it very clear how nice that would be to have.

Thank you for creating those examples and making them available. 

[Handoko]

Your post reminded me of one of my wish list items for the forum software, that is, being able to search for posts that include attachments.  That would be a nice way to find code/examples/techniques people have contributed.  Alas, the forum software doesn't do that and it doesn't seem to be a feature that is going to be added to it anytime soon.

This gave me the idea that, maybe the moderators (and forum users) may entertain the idea of creating one or more library threads that are simply a list of examples one can search/review to find one that is currently of interest.

+1

That was a really great idea. Lots of useful short demos submitted here for us to study and reuse.

[Ñuño_Martínez]

That Pong game should be in the wiki.

[flowCRANE]

If the user, in addition to moving rectangles, is also supposed to be able to change their size, then my other demo may be useful. It was true that originally it concerned the tool for selecting a fragment of the image, but you can also adapt the code to manipulate virtual rectangles.

The tool allows you to move the frame and stretch it with anchors. With the + and - keys, the size of the anchors increases and decreases. If the frame is too small and the anchors do not fit, some of them are not displayed. All cases of frame stretching are supported, including the change of the type of cursor during stretching.

I add project sources and screenshots to attachments.

[Handoko]

@furious programming

I had always wondered how to do selection marking. And now you show the code! Awesome!

I saved the code and will study it later, I'm a bit busy currently. Thank you for writing the code and sharing it.

[damieiro]

Hello Creet:

Well, i use SDL 2. A different aproach.

Perhaps this link could help you. https://www.freepascal-meets-sdl.net/

Not for newbies (allthough i think it's a easy library).

[Edson]

My library: https://github.com/t-edson/ogEditGraf can be used to create 2D graphic editors, including zoom and pan (rotation is disabled). Múltiple selection and Resizing shapes is internallly implemented, and it's possible to implement connectors too.

[krolikbest]

I really envied good job of furious programming so started immediately writing simple vector-like graphic but still far from satisfactory result. Although it works but the code is not good enough to publish it. However if some questions will appear then with pleasure explain my ideas 
https://www.youtube.com/watch?v=L3BuCcEEawA
 

[Handoko]

I really envied good job of furious programming so started immediately writing simple vector-like graphic but still far from satisfactory result...

https://www.youtube.com/watch?v=L3BuCcEEawA

I do think differently. It looks awesome and you should publish the source code and put it in Lazarus/FPC code examples so others can see the potential of Lazarus and learn from it. It is easier to learn from simple programs projects.
http://wiki.lazarus.freepascal.org/Components_and_Code_examples

[krolikbest]

Simplified code example of what is on my youtube. If someone thinks that this code will be helpful ...