GUI System Implementation

Question

I'm going to make a very simple GUI toolkit. The two elements in this toolkit will be a rectangular and a circular button. I've got two questions:

---

#1

Would it be more efficient to have an R-Tree with a bitmask on the circle, a drawing index system, or something else entirely?

By 'drawing index system', I mean 'drawing' the GUI elements on a canvas acting like an input mask(each 'pixel' is either a null pointer or a pointer to a button), updating it whenever the window size changes. Whenever an input event occurs(let's say a hover event), you would:

• Get the cursor position
• Calculate the index of that point on the input canvas(like you would with an image)
• Retrieve a pointer to the respective GUI element from that index.

---

#2

How should elements be implemented? Essentially, how should input be handled once the element is determined? Should I:

• Draw something on the actual framebuffer, then run a callback(if pointer is present) for functionality?

or,

• Start a 'hover' callback, which may or may not decide to draw on the framebuffer.

---

I would like to avoid OOP if at all possible.

---

For anybody who thinks this question is vague, it is asking to show or find the optimal(if there is one) implementation of a simple GUI toolkit in which the only elements are a rectangular and circular button, as stated above.

Essentially, I'm asking this:

Given a set of positions/sizes of arbitrary elements and the cursor position, what is the quickest way to determine which element the cursor is currently intersecting?

Answer 1

In order to create your own GUI kit you have several option available.

1. use a third party library library:

• I recommend GTK.

• And before you ask it is a library for C.

• With this library you can easily create any button .To answer your question you can use this library to raise event and create a handler.

  • For more details on this library visit 1: https://www.gtk.org/download/index.php

2. You cant directly work with hardware by using 'dos.h' and 'graphics.h' builtin library in C:

• Check this website for more information: http://www.programmingsimplified.com/c-press-me-button-game

3. Design your OWN tool kit:

- Detect if cursor is inside circle:

   (a , b) => location on circle's center

   (x, y) => location of cursor

   r => radius of circle

• We know that if (x, y) Is inside circle the distance between (x, y) and (a,b) should be less than the radius(r).

• If it is greater that the radius it is clear that the point (x,y) lies outside circle.

• In short distance between (x, y) and (a, b) <= r then they intersect

To find distance between two points use distance formula. ie sqrt((x-a)^2 + (y-b)^2).

- Detect if cursor is inside rectangle:

(This was very tough, had to refer high school textbooks :-p)

(a, b) => center of rectangle

(p, q) => any one vertex of rectangle

L => length of (a, b) and (p, q)

m1 => slope of L

r => radius of circle enclosing the rectangle

All the above values have to calculated only once, at the time of creating rectangle.

Now values which change with cursor:

(x, y) => position of cursor

dist => distance between (x, y) and (a, b)

m2 => slope of dist

To find slope of (1, 2) and (3, 4) use formula slope(m) = (4-2)/(3-1)

After this find the angle between line L and line dist

o => angle between dist and L

To find angle between two lines with slopes m1 and m2 use formula:

After this using basic trigonometry we know that z = L * cos(o) where z is the distance shown in the diagram.

If z => dist then cursor intersect else it does not.

NOTE: you may be wondering that is a lot of mathematics but it is the easiest way and most of the value have to be calculated only once and there is no requirement of loop so it can be done in O(1) time.