Here we go again. In the previous chapters, I have mostly done the management of multiple cloud storage services in the application. For this chapter, I worked on setting up the layout and the displaying of projects on the dashboard interface.
You have already seen a small portion of it in the last chapter, where there is a large view showing the snapshot of a project that the user would open for viewing, and the meta data related to the project, such as name, description, created date and modified date would also be displayed. Now, how would we want to display all of the user projects as nicely as possible? We take a bit of inspiration from Netflix’s interface.
The way Netflix does it is that is that it puts different lists of movies or TV shows of some category into carousels. A carousel would also have left and right controls allowing the user to browse through a particular list of movies and shows. It’s as simple as that.
Here is what I have done, with the carousels:
For now the image above only shows the starred projects and all the projects at once. There would also be other carousels of projects that would be filtered by some meta data, e.g last 4 recently modified projects. The controls of the carousels would remain hidden until the user hovers on of them. The same goes for each project image as well. When the user clicks on one of the projects, they would automatically be brought to the large project view at the top, where they can see and edit all of the meta data related to the project.
My initial implementation for the carousel depends on having the project elements be displayed horizontally in a <div>, such that it overflows and get a scrollbar at the bottom, but I would hide it of course. Clicking on the controls would just manipulate the hidden scrollbar, hence revealing the other projects in the carousel. However, Dr Shawn suggested a better implementation, whereby we could just fix the number of project elements, e.g: 4 in this case. Clicking on the controls would just show the next or previous 4 projects, reusing those same elements instead of adding more HTML elements that would be proportional to the number of projects the user has. I can’t believe I didn’t think of that.
Well, unfortunately that is all for this week’s chapter. The main reason why I’ve only made this much progress this week is because I was fretting a lot on the tiniest details of the user interface. Time would be better well spent to continue working further on the basic functionality of the interface. I still got to display the user’s registered boards, have some procedure for them to register a new board and also the downloading of the firmware. I know my time management is not the best, but I hope to complete all of those functionality within this month. But wait, that’s not it. I would also need to test out the integration with another one of our web applications, i.e the editor to edit the project files. Oh boy.
0 Comments