Building a drone weather web app Part2: Design, display and the front end

With the api calls done and a mass of functions created to  manage the data I was ready to display it.

Part 1 here.

Bootstrap was always going to be my choice but I wanted something better than the plain vanilla theme, so I headed over to bootswatch and picked up a themed bootstrap source (slate). The good thing about this was I could still easily change it and add my own styles.

The main features I wanted to display on the front page:

• Table with all locations but minimal information, key information only!
• Search location and date/time forecasts.
• Search the best date/time for a location.
• Compare 2 date/times for a location, easily see differences.

Here is a screenshot with further thoughts below.

The landing page

The main page i wanted to be precise and simple. It states the day date and time followed by a table with all my locations with data for: Conditions algorithm, wind speed, temperature and cloud amount.

In the next container is a form where you can display the above table but for forecasted dates, there is also a button to load the tables for all locations on a page.

Up next in a container I have a form with the “best date and time for location” feature. I am proud of this feature because it was one of the harder processes to do without storing data in a database.

Lastly on the landing page I put the compare 2 date and time’s for a location. This was something else that brought great pleasure to me as the creator. It also will be a very popular feature that I will be using a lot.

Fixes!? and whats next?

It’s not the greatest to view on mobile but being built on bootstrap there are many ways to fix that. I will gladly admit im not a UI designer so the dark theme might be off taste but I feel as though the light themes are far too common. Maybe I should however stick to either a flat design or make it shadowed.

Making a bad, avoid location date/time would be neat, but at this point its double dipping. You check the location and date you can drone, not which days you can’t drone.

I will also look at opening it up and making it compatible to put say 7 locations in a config file and have it be centered at locations in other areas. That way other drone flyers can self host for their needs.

But now for something that took 3 nights to build needs to be smoothed out and touched up.