This was relatively a short week, as today is Thursday and Friday is a public holiday. Moreover, yesterday we left the office at noon to have a farewell dinner for one of the interns and we did not return to the office afterwards.
Simply put, the objective this week to enhance the user experience while using the application. There were some obvious changes that need to be done, but some were just features that will make the usage of the application more intuitive and friendly. I worked on the overall look and feel of the site, as well as developing some features for the JointJS schematic editor.
However, before starting with the interface and getting my hands messy with CSS, I worked on implementing some features for the schematic editor. The main feature I worked was to enable the user to use the mouse wheel to zoom in and zoom out. Many tutorials on the internet explains how to get the mouse wheel reading, so it was very straight forward. Now I need to change the JointJS paper scale using paper.scale(zoom, zoom) function, where as “zoom” is a variable with values ranging from 0.5 up to 2. This worked smoothly on the schematic editor. However, I got one problem with this approach. As the paper scale increases or degrees, the size of the paper in pixels does not change. For example, a 100px paper at zoom level equals 1, its size should become 200px at zoom level of 2, but when zooming in the size remains at 100px. In another words, when having a scroll bars, you would expect that when you zoom out you will no longer need the scroll bar as now you can see all the components on the paper. However, the scroll bar will remain at their exact size, as paper.scale() doesn’t affect the paper size in pixels. Therefore, I needed to change the paper size manually after calling paper.scale(). To do that, I simple call
paper.setDimensions(paper_initial_sizezoom,paper_initial_sizezoom);
with same “zoom” value used when calling paper.scale(). paper_initial_size is the size of the paper at zoom level of 1. After that, the paper zooming in and out worked exactly as you would expected to work. Finally, simple modifications and code optimization were made to the schematic editor code.
Next I worked on the application interface. If you are interested to see how did the application look like at the beginning of the week, look no further than this blog I posted a while ago. Although since then many changes has been made to the functionality of the application, yet the interface remained almost untouched. Here is a snapshot of the current interface of the application.
I was required to modify the interface and make it “better”. First important thing was to create CSS style sheet to control the look of the two editors, the code editor and the schematic editor. Since this is not a plain HTML page, but rather an auto-generated page from Wt, some parts of the style sheets got real messy especially that CSS sometimes is confusing by its own!
Eventually the CSS style sheet worked perfectly. Afterwards, instead of using plain CSS, I used Bosstrap theme that witty provides to style everything other than the editors.
0 Comments