The WeatherMaster Dashboard needed to be updated to be a cloud based application and also needed to be updated to look modern and responsive. The Layout design of the dashboard and color theme was already completed I started with it.

Requirements for update

Languages Needed

Creating Dashboard on mobile

Early on it was stated that the dashboard was going to need a different format to be able to be read online. I found a solution that can make the dashboard be split in three different sections
and be able to slide from right to left. This was made by implementing the free mobile touch slider javascript called Swiper. By cutting the dashboard into thirds it was possible to have three “pages” be swiping to the right. This was the best solution as it didn’t have to refresh the page when looking at new information and it still loaded and constantly updated the data while not having to refresh the page. here are some stills of the dashboard on mobile.

Making the dashboard Responsive

The next step once the mobile layout was created was to be able to transition between mobile and desktop layouts. I used Javascript to make the changes between both layouts since it is using a different layout of dashboard overall. I then had to make sure that the tablet and desktop layout is responsive and looks good on all sized of screens. A menu was also added on to be able to go through preferences and different pages. There was also a station list that needed to be put somewhere on the screen so companies can look at different stations.

Additional Themes

Once the application was responsive I created some additional themes that users can use instead of the main theme. This was done using CSS and Javascript to change the look of the dashboard and overview. The backend was implemented by the other software developer so the themes were saved to the individual browser and not the user since multiple users can be using the same account.

January 31, 2019