All posts by Gigi

SDL2 Drag and Drop

Hi everyone! It’s been a while since my last SDL2 article (see all SDL2 articles). Today, I’m going to show how you can use the mouse to drag an object across an SDL2 window.

Drag and drop is nowadays a standard feature of any Multiple Document Interface (MDI). Although MDI as a user interface layout has fallen out of fashion in mainstream applications (even GNOME seems to think we don’t need it), it has enabled so many things ranging from windows in operating system GUIs to inventory containers in games.

The source code for this article is available in the SDL2DragDrop folder at the Gigi Labs BitBucket repository.

Note: any & in the code should be just an &. Sorry about that. I’m still waiting for this to be fixed.

Displaying an Empty Window

Let’s start out by displaying an empty window. We can use the code below for this:

#include <SDL2/SDL.h>
 
int main(int argc, char ** argv)
{
    // variables
    
    bool quit = false;
    SDL_Event event;
    
    // init SDL
    
    SDL_Init(SDL_INIT_VIDEO);
    SDL_Window * window = SDL_CreateWindow("SDL2 Drag and Drop",
        SDL_WINDOWPOS_UNDEFINED, SDL_WINDOWPOS_UNDEFINED, 640, 480, 0);
    SDL_Renderer * renderer = SDL_CreateRenderer(window, -1, 0);
    
    // handle events
    
    while (!quit)
    {
        SDL_Delay(10);
        SDL_PollEvent(&amp;event);
    
        switch (event.type)
        {
            case SDL_QUIT:
                quit = true;
                break;
        }
    
        SDL_SetRenderDrawColor(renderer, 242, 242, 242, 255);
        SDL_RenderClear(renderer);
        
        SDL_RenderPresent(renderer);
    }
    
    // cleanup SDL
    
    SDL_DestroyRenderer(renderer);
    SDL_DestroyWindow(window);
    SDL_Quit();
    
    return 0;
}

Most of this should be familiar from “Showing an Empty Window in SDL2“, but there are a few differences:

  • The #include on the first line is different from that of many of my previous SDL2 articles. That’s because I’m now using SDL2 on Linux (see “How to Set Up SDL2 on Linux“).
  • We’re using SDL_RenderClear() to give the window a background colour (as we’ve done in a few earlier articles).
  • We’re using SDL_PollEvent() to check for events all the time (combined with SDL_Delay() to occasionally give the CPU a break). This is also something we’ve done a few times before.

On Linux, assuming my file is called main.cpp, I can compile this from the command-line as follows:

g++ main.cpp -lSDL2 -lSDL2main -o sdl2exe

Just to be super clear (as this has been a point of confusion in earlier articles), I’m using the C++ compiler. We’ll be using a couple of C++ features, so please don’t try to compile this article’s code as-is with a C compiler.

Once this compiles successfully, I can run the executable that was produced as a result:

./sdl2exe

…and I get an empty window:

Adding Rectangles

We’re going to need something we can drag around, so let’s add a couple of rectangles. Again, we’ve done this before (see “SDL2 Bounding Box Collision Detection“), but we’ll improve a little by storing our rectangles in a C++ STL list.

First, add the necessary #include at the top of the file:

#include <list>

With this in place, we can now create a couple of SDL_Rects and put them in a list. The following code goes before the event loop.

    SDL_Rect rect1 = { 288, 208, 100, 100 };
    SDL_Rect rect2 = { 50, 50, 100, 80 };
    
    std::list<SDL_Rect *> rectangles;
    rectangles.push_back(&amp;rect1);
    rectangles.push_back(&amp;rect2);

Towards the end of the event loop, we can add code to draw those rectangles. Since we’re using a list, we can add more rectangles if we want, and this part of the code isn’t going to change. Note that I’m also using a little C++11 shortcut to iterate through the list.

        SDL_SetRenderDrawColor(renderer, 242, 242, 242, 255);
        SDL_RenderClear(renderer);
        
        for (auto const&amp; rect : rectangles)
        {
            SDL_SetRenderDrawColor(renderer, 0, 255, 0, 255);
            SDL_RenderFillRect(renderer, rect);
        }
        
        SDL_RenderPresent(renderer);

If we compile and run this now, we get a couple of green rectangles:

Changing Colour on Click

Before we get to actually dragging those rectangles, we need a way to select one when it gets clicked, both in code and visually. For this, we’ll add a selectedRect variable somewhere before the event loop:

SDL_Rect * selectedRect = NULL;

By default, no rectangle is selected, which is why this is set to NULL.

We also need a couple more variables somewhere at the beginning of the program to help us keep track of mouse events:

    bool leftMouseButtonDown = false;
    SDL_Point mousePos;

In the switch statement within the event loop, we can now start adding mouse event handlers. We’ll start with one for SDL_MOUSEMOTION, which keeps track of the mouse coordinates in the mousePos variable we just declared:

            case SDL_MOUSEMOTION:
                mousePos = { event.motion.x, event.motion.y };
                break;

Adding another event handler for SDL_MOUSEBUTTONUP, we clear the leftMouseButtonDown flag and the selected rectangle when the left mouse button is released:

            case SDL_MOUSEBUTTONUP:
                if (leftMouseButtonDown &amp;&amp; event.button.button == SDL_BUTTON_LEFT)
                {
                    leftMouseButtonDown = false;
                    selectedRect = NULL;
                }
                break;

Finally, we add another event handler for SDL_MOUSEBUTTONDOWN, which uses SDL_PointInRect() to identify the rectangle being clicked (if any), and sets it as the selected rectangle:

            case SDL_MOUSEBUTTONDOWN:
                if (!leftMouseButtonDown &amp;&amp; event.button.button == SDL_BUTTON_LEFT)
                {
                    leftMouseButtonDown = true;
                    
                    for (auto rect : rectangles)
                    {
                        if (SDL_PointInRect(&amp;mousePos, rect))
                        {
                            selectedRect = rect;
                            break;
                        }
                    }
                }
                break;

At this point, we can add some conditional logic in the rendering code to draw the selected rectangle (i.e. the one being clicked) in blue instead of green:

        SDL_SetRenderDrawColor(renderer, 242, 242, 242, 255);
        SDL_RenderClear(renderer);
        
        for (auto const&amp; rect : rectangles)
        {
            if (rect == selectedRect)
                SDL_SetRenderDrawColor(renderer, 0, 0, 255, 255);
            else
                SDL_SetRenderDrawColor(renderer, 0, 255, 0, 255);
            
            SDL_RenderFillRect(renderer, rect);
        }
        
        SDL_RenderPresent(renderer);

If we compile and run this now, we find that rectangles become blue when clicked:

Drag and Drop

That might have seemed like a lot of work just to highlight a rectangle when clicked, but in fact we have already implemented much of what we need for drag and drop. To finish the job, we’ll start by adding a new variable near the beginning of the program:

SDL_Point clickOffset;

This clickOffset variable will store the point within the rectangle (relative to the rectangle’s boundary) where you clicked, so that as we move the rectangle by dragging, we can keep that same spot under the mouse pointer.

In fact, when the left mouse button is pressed, we will now store this location so that we can use it later in the code:

            case SDL_MOUSEBUTTONDOWN:
                if (!leftMouseButtonDown &amp;&amp; event.button.button == SDL_BUTTON_LEFT)
                {
                    leftMouseButtonDown = true;
                    
                    for (auto rect : rectangles)
                    {
                        if (SDL_PointInRect(&amp;mousePos, rect))
                        {
                            selectedRect = rect;
                            clickOffset.x = mousePos.x - rect->x;
                            clickOffset.y = mousePos.y - rect->y;
                            
                            break;
                        }
                    }
                }
                break;

Then, while the mouse is moving, we update the selected rectangle’s position accordingly:

            case SDL_MOUSEMOTION:
                {
                    mousePos = { event.motion.x, event.motion.y };
                    
                    if (leftMouseButtonDown &amp;&amp; selectedRect != NULL)
                    {
                        selectedRect->x = mousePos.x - clickOffset.x;
                        selectedRect->y = mousePos.y - clickOffset.y;
                    }
                }
                break;

…and that is all that is needed to allow the user to click and drag those rectangles:

Wrapping Up

In this article, we’ve mostly built on concepts covered in earlier articles. By manipulating mouse events, we were able to add interactivity to rectangles. They change colour when clicked, and can be dragged around using the mouse.

There are a few things you’ll notice if you’re diligent enough:

  • If you drag the rectangles around really fast, they lag a little behind the mouse pointer. I’m not really sure how to fix that.
  • There isn’t really a proper z-index implementation, so it looks bizarre when you can drag a rectangle underneath another. This can probably be fixed by changing the order in which the rectangles are rendered, so that the selected one always appears on top of the rest.
  • Using a list is okay for a few items, but if you have a lot of objects in your window, you might want to use a more efficient data structure such as a quadtree.

OData Session at Virtual APIdays Helsinki 2020

With RedisConf2020 done and dusted, my next stop is API Days Helsinki 2020. Like RedisConf, this is a conference that got its plans a little messed up by COVID19. Instead of the originally planned conference, they’re doing a virtual event in June, and (hopefully) a physical one in September.

I’m going to be presenting a session on OData on 2nd June, during the virtual event. If you haven’t heard about it before, you can think of it as something that tried to solve similar problems to what GraphQL did, but much earlier. GraphQL is not OData, as some will be quite willing to point out, and I’ll be explaining some of the tradeoffs between the two.

RedisGraph Session at RedisConf 2020 Takeaway

RedisConf 2020 was originally planned to be held in San Francisco. The sudden spread of the COVID19 pandemic, however, meant that the organisers, like many others, had to take a step back and reconsider whether and how to run this event. In fact, the decision was taken in March for it to be held as a virtual event.

RedisConf 2020 will thus be an online conference taking place on the 12th and 13th of May 2020. The schedule is packed with talks, the first day being breakout sessions, and the second being full of training provided by the folks at Redis Labs.

Among the talks presented on the first day, you’ll find my own A Practical Introduction to RedisGraph, which introduces the relatively new RedisGraph graph database, and demonstrates what you can do with it via practical demonstration.

If you’d like to learn more about RedisGraph, check out also my two articles, First Steps with RedisGraph and Family Tree with RedisGraph, published last November.

The Sorry State of Tourism in Ireland

I first visited Ireland around this time eight years ago, for St. Patrick’s Day 2012. It did not take me long to fall in love with the place. Since then, I have revisited Ireland other times, lived there for about a year and a half, and been around most of the country. As a result, my Irish experience has been a mixture of thrills and disappointments.

Separate hot and cold water taps (when hot water is actually available) is a disease more prevalent in Ireland than the Coronavirus.

When I recently revisited Ireland around the same time that the Coronavirus outbreak started, I once again had mixed feelings. Many things were really nice, but I wasn’t spared any disappointments.

As part of the Sorry State of the Web series, in which I promote good web development practices by illustrating bad ones, I will focus on websites (and other technology services) I came across during my research for this trip. Other things that annoyed me, such as cafes charging you an extra 2 Euros just to toast your sandwich, will be out of scope.

Aran Islands

The Aran Islands may be beautiful, but their website could have been better.

In fact, they did make it better by fixing this problem with ampersand HTML entities showing within the page.

Insecure WiFi at Penneys

Penneys, the chain of department stores that you might otherwise recognise as Primark in the UK, offers free WiFi to their customers.

Unfortunately, given that you need to join the WiFi via an endpoint that does not come with a proper SSL certificate, it is not only useless, but plain risky for customers to use.

Secret Valley Wildlife Park

The Secret Valley Wildlife Park website has a number of issues.

For starters, some of the links at the bottom (i.e. Terms & Conditions, Privacy, and Cookies) don’t work. The cursor doesn’t even turn into a pointer, and if you look at the HTML, it seems they put anchor tags without href attributes.

On the Animals page, images take ages to load because they used huge images in the page without using thumbnails (see also: The Shameful Web of April 2017 (Part 1)). If you’re including large images in a page, always use small versions and link to the larger version.

There also seems to be a problem with HTTPS… we’ll get to that too.

Going on the online booking system (which is what we care about when it comes to HTTPS, since sensitive information is involved), we see that HTTPS looks okay so far. They also used to have a test ticket type that I’m happy to see has been removed. In fact, they recently updated this page with a plea for funds since Coronavirus is messing up their business (understandably).

Unfortunately, when you proceed to the next step and are about to book a ticket, the connection suddenly isn’t secure any more. It’s a small mixed content problem because of an image, but the problem is that it undermines the trust that people have in such websites (when it comes to keeping their sensitive financial data secure), and can potentially have security-related consequences.

So while I sympathise with Secret Valley (and so many others affected by the Coronavirus), it’s also important to keep your data safe. By all means, send them money, but do it using alternative, secure means.

The M50 Toll

If you’re going to be renting a car in Dublin and using it to drive around the country, one of the things you’re going to have to do is pay the toll on the M50 motorway. The M50 uses a barrier-free toll system that can be paid online by 8pm on the next day.

While the close deadline is a little annoying, being able to pay it online is quite convenient… when it works.

In this case, the system just didn’t want to work, although I tried several times. This can happen, but what is a little worrying here is that I don’t think those details about the error (the XML-like thing) should be disclosed to the customer.

Blackrock Castle Observatory

If you like science, then Blackrock Castle Observatory is a great place to visit. They have a lot of interactive exhibits that explain concepts from astronomy and science in general:

Wait… what’s that at the bottom-right, where the arrow is pointing? Let’s take a closer look:

Uh oh… someone didn’t activate Windows! That’s quite embarrassing, and can be seen on several of their exhibits.

Wrap Up

Although Ireland will always have a special place in my heart, it hasn’t spared me any disappointments, both in terms of the service I received in various places as a tourist, but also on websites and other technology-related services.

This article, like others in the same series, is an educational exercise aimed at improving technology standards, especially on the web which so many people come in contact with. The aim is to learn from this and provide a better service, so I hope that nobody is offended, particularly in this difficult time.

Instead, I hope that in such times, when we depend on technology so much more, we can overcome these obvious problems and use technology safely and reliably to reduce the burden of living in a difficult situation as much as possible.

With the Coronavirus currently devastating health, economy, tourism and peace of mind across the world, we need to be safe, help each other, and show empathy because so many people are affected in different ways.

The Sorry State of Buying a Mobile Phone in Malta

A few years ago, I ran the Sorry State of the Web series of articles to promote good web design/development practices by pinpointing shameful ones that should be avoided (an approach inspired by Web Pages That Suck).

Websites today are very different from when Vincent Flanders started Web Pages That Suck. Things like Mystery Meat Navigation are almost gone entirely, as modern websites embrace more minimal designs and are often built on foundations such as Bootstrap or Material Design.

However, after a series of very frustrating experiences today while trying to buy a mobile phone, I am convinced that the state of professionally-built websites has not really improved. Websites may have converged to similar designs that overall are less painful, but the user experience is still miserable because of a lack of professionalism.

As a result, although I would have preferred not to continue this series, I feel there is still value in doing so. In this article, we will focus on websites of companies that sell mobile phones in Malta, where the technology and customer service are both still very medieval.

Sound Machine

Let’s start with Sound Machine. When you first visit this site, you get one of those cookie notices at the bottom-left. That’s pretty normal, especially in the GDPR era.

However, part of this notice sticks around even after you close it. It’s particularly noticeable if you scroll down so that the background is uniformly dark:

This is pretty strange, and probably unintended. But wait… do you notice something in that dark footer area? That’s right — this website was made by none other than Cyberspace Solutions, to which I had dedicated an entire article 3 years ago. I guess this explains a lot.

Another little mistake can be found in their Cookie Policy, where someone has been a little careless with their HTML tags:

But the worst blunder of all is that the Contact form does not even work:

In fact, when you press the Send button, a spinner runs next to it and never stops. There is no indication of the failure, unless you open the Developer Console, which most people obviously will not know how to do.

The result of this is a poor user experience, because (a) the form does not work, (b) there is no indication that anything failed, and, to make matters worse, (c) there is no email address given as an alternative. A customer therefore has no option other than to give them a call or show up in person, which many prefer to avoid for various reasons.

The takeaway from this is that when you build a website, you should always double-check to make sure things look right and that things actually work. Customers aren’t very happy when they don’t.

Direct Vision

Direct Vision has a nice e-commerce website where you can look for products and eventually buy them online. Let’s say I’m interested in the Samsung Galaxy A40… I get a lot of options:

Let’s take a look at the black phone on the left:

Great! It seems to be in stock!

Except that… it isn’t! It turns out that this phone is not available at all in one of their shops, and in the other, it’s only available in a couple of colours (Coral and White). The black one, as it turns out, is not in stock. They need to order it.

So why do they say that it is in stock when it isn’t? The salesgirl tried to give a dumb explanation, and also suggested I go with one of the other colours and get a cover to hide the undesired colour. Naturally, I didn’t buy that (pun intended). It’s truly shameful to waste people’s time in this way.

Tablets and More

Tablets and More is another consumer electronics store. Browsing around, it’s easy to notice a few things out of place. For instance, the thing at the bottom left that fails to load:

…and which, after a few seconds, becomes something else but still fails to explain what it’s supposed to be:

Even the product descriptions seem to be a real mess…

…in what appears to be a copy & paste job from GSM Arena:

What shall we say, then, about the creepy practices of harvesting people’s email addresses via the live chat feature (something that is becoming increasingly common in live chat products nowadays) or of not displaying prices and expecting people to get in touch to find out how much an item costs?

It’s almost as if this store is intentionally doing everything it can to keep customers away.

Phone Box

The minute you land at Phone Box, you can immediately tell that something is wrong:

If a site isn’t being served over HTTPS, then it’s possible for requests to be intercepted by a man in the middle and arbitrary responses served as a result, as Troy Hunt demonstrates in his article about HSTS. This is particularly risky for websites that require you to submit information, and Phone Box does indeed fall in this category:

As I’ve written ad nauseam throughout the Sorry State of the Web series, it is not okay to accept login credentials insecurely over HTTP. While other information being sent insecurely may or may not fall under GDPR and Data Protection laws, I think we would be a lot more comfortable if such details (such as one’s personal address) are not leaked to the world.

At least, this site does not take credit card details, since the only payment method available is cash upon delivery. Let’s hope they don’t decide to accept credit cards as a new feature.

Conclusion

Even from a small sample of websites, we have seen a range of issues going from simple negligent oversights to serious security problems and broken features. In 2020, businesses are still paying a lot of money for web design agencies to do a half-assed job. They probably do not realise how much business they are losing as a result.

How can we make things better? I have a few ideas.

  • Web design agencies: test your website’s functionality and content thoroughly. Get up to speed with the latest security and data protection requirements, as there may be legal repercussions if you don’t.
  • Businesses: choose very carefully who to work with when building a website. Take a look at their past work, and get a second opinion if you don’t feel you can evaluate it. Make it easy for customers to reach you and give them a good service. Otherwise, don’t complain that you are losing business to online marketplaces such as Amazon.
  • Customers: do not buy from businesses that have insecure websites, shady practices, or salespeople who think you’re stupid. Things will only change when they notice that their behaviour is detrimental to their own survival.