App Screen 1 (UI + Backend Integration)

If you are familiar with my previous post and app idea then you know what I did before, otherwise just check out my White Board App Idea and also check out the Prototype for White Board.

So after setting all things up such as design & database & API request queries, It was time to elaborate all those in code. So first I did was to write the code for the front-end of each screen and after that it was time to integrate them with back-end and database.

App’s first screen

Here goes the UI of my app’s main screen which comes after successful login or signup.

In here you can that the screen is divided into two parts, one for group chatand other for whiteboard. I actually integrated two screens in one because it becomes messsy when you need to switch between these two. Now we can chat as well as draw on the same screen, no switching required.

For now, I’ll talk about only whiteboard because the chat is another feature so I’ll do that in my next post.

The UI of Whiteboard

Tool Bar

In the whiteboard, there are two sections on the top bar one is Tools and other is Colour Palate. There is also an option for size of a tool.

Basic Tool Bar

There are only four tools available for now.

1. Pencil : We can use this to draw any free hand shape on the whiteboard canvas. By default this tool is selected. We can control its w=size by the size tool.
2. Eraser : This tool is used to erase anything drawn on the canvas. This is fixed in size.
3. Clear : This tool clears the canvas means erase everything drawn on that.

Size tool

4. Size bar : We can use this tool to set size of the pencil tool.

Colour Palate

Below the tool bar there is a colour palate with various colours.

Colour Palate

Using this colour palate we can choose colour for the pencil. By default the first item of colour palate is selected and the colour for pencil is that.

Canvas

This is the space used to draw anything on. It is an HTML5 canvas which supports drawing. The size of canvas is flexible with screen size. But the page is not responsive, so it becomes problem sometimes to draw on small screens such as mobile devices.

In back-end code, I use socket.io to capture each and every event on the canvas and emit that to the server, from where server emits that to all other clients connected.

Whiteboard on different clients

At a time when a user draws something on the canvas, it is visible to another user in real time.

Currently I am not storing this canvas in database so after a user disconnect, all progress lost. Also multiple users can draw at the same time so it becomes a little messy.

So this is it.

What's Next?

Next post is about the second screen UI and backend integration.