DrawClient … a C++ experience from hell and likely not the last

If this task has taught me one thing, it is that I want to be a Unity Developer at the end of this course.  For me, C++ is so unwieldy and unmanageable, for even the simple things, like a GUI.

For the last couple of weeks, we have been making a draw client that uses a network to connect to a draw server and create 3 pieces of art without the user seeing what is being created and having no control over what is being created.

Even before my first task, I had to download and include SFML into my Visual Studio Project.  That was a saga in itself but following several online tutorials, I was able to complete that.  I wouldn’t be able to redo it without referring to online tutorials again though.  It is a complicated process with many instructions for modifying the properties of the project.  Certainly not a simple drag and drop process.  This doesn’t even go close to describing the confusion when I was getting compile errors because certain .dll files weren’t where they were needed to be.  I ended up copying and pasting the whole set of SFML .dll files to several points in the project before it could compile for me.

Then there were the problems between working on my version of Visual Studio and the University’s version.  My version required the following command to connect to the network : send_address.sin_addr.s_addr = inet_addr(dest);  Whereas, the Uni’s version required this line of code: InetPtonA(AF_INET, dest, &send_address.sin_addr.s_addr);

So my first task was to try and create a heatmap depicting my mouse movement.  This would be saved off to a file on the close of the program and would reveal the areas that my mouse visited while the program was running.  Createing a window event was easy with SFML as was creating a mouse event that simply captured my mouse position every frame.

I created an Image, and called it heatmap.  I sized it according to the RenderWindow I created.  I then created a Color called “trace” and made it red with an alpha of .1.  This would allow for a stronger intensity of the red to show through in the areas that my mouse frequented.

This section of code would record the making of the heatmap.

if (event.type == sf::Event::MouseMoved)
//trace = heatmap.getPixel(event.mouseMove.x, event.mouseMove.y);
heatmap.setPixel(event.mouseMove.x, event.mouseMove.y, trace);

While, outside of the RenderWindow loop, this piece of code would create the heatmap file:



My interpretation of the brief for the first part of this task was wildly off the mark.  I mistook the concept of a gui that you couldn’t see to being a gui that you couldn’t use.  It made no sense to me at the time and so I had a main function that drew stuff independent of any desire of the user.

When I tried to introduce intent for the user, I ran into many problems.  Creating a GUI in C++ doesn’t seem to be an easy task.  I was able to design simple buttons for all the things I wanted the user to have control over .. Pixel, Line, Box, Circle and Send.  I also created feedback images so that the user would know what button had been pressed.

After setting up all my textures and sprites, and setting up my classes to draw the desired sprites, I couldn’t get the program to compile.  With errors everywhere and time rapidly running out for this task to be completed, I did the “programmerly” thing and used Key Presses and mouse clicks to create the art.

So, with 4 things to make, I attached control to the F1 – F4 keys.  You tap F1 to make a pixel, F2 to make a line, F3 to bake a box and F4 to make a Circle.  After setting the keys, the mouse takes over.  With creating a pixel, it just looks for the left mouse down.  As soon as it has this, it will send to pixel off to the server and create the pixel on the server’s screen.  With all the other drawings, it takes the mouse down for the start of the drawing and then the mouse released for the end of the drawing.  Like the pixel, It grabs the mouse position when the left mouse button is pressed and stores it, it then grabs the mouse position when the button is released and stores that.  It then calculates what information it needs and sends the information to the server and draws it on the server’s screen.

The next part of the task was to send my mouse cursor information off to the server and receive every other connected cursor from the server.   I set up a counter that increments every frame and when it hits the target, will send and receive the information to and from the server.(just realised that I should have set it up as an int, instead of a float to make it run faster.  Guess that is a C# habit coming though with setting up timers)  The idea behind this is not to risk locking the computer up with send and receive requests.

The server sends the cursor information back as an array of cursor information and I capture the information with the following code which draws a circle, sets the fill colour as a random colour and give it 50% alpha.

auto* d = reinterpret_cast<PacketServerCursors*>(buff);
for (int i = 0; i < d->count; ++i)
sf::CircleShape circ(2);
circ.setFillColor(sf::Color(rand() % 255, rand() % 255, rand() % 255, 50));
circ.setPosition(sf::Vector2f(d->cursor[i].m_posX, d->cursor[i].m_posY));

This code then displays the information to the screen:

sf::Sprite cursourInfo(texture.getTexture());

While I am not sure what is happening with my cursor, I am sure that I am sending it as no errors are encountered and the other people connected to the server are sending their cursor information and it is being drawn on my screen.

While I did have some success with this task, it was not a desirable outcome for me.  I really wanted to have a visual GUI what looked reasonable and gave the user feedback, but again, C++ beat me back into submission and it is functional, while not pretty.




Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s