ForeUI is an easy-to-use UI prototyping tool, designed to create mockup / wireframe / prototypes for any application or website you have in mind.

All posts tagged optimize

ForeUI V3.8: Use ClipArt to Make HTML5 Simulation Smaller and Faster

ForeUI V3.80 is released today.  This version introduces a new approach to optimize your HTML5 simulation, which is extremely useful for people who want to create big, complex prototype with ForeUI.

After actively working on a plot for some time, you may find out that your plot becomes bigger and bigger. Loading and saving the plot file is slow, and it may take several minutes to launch the simulation in web browser. When this happens, we would suggest you to optimize your plot before adding more content into it. Actually, the best practice is to understand how to avoid unnecessarily increase your plot size, and keep your plot small and neat at the beginning. We have a document to introduce all currently known tricks for this topic.

Before version 3.8, those tricks focus on avoiding duplicated or useless content in your plot. Since this new version, we have a new approach, which is to reduce the number of DOM objects that need to be loaded by the web browser, hence directly make your HTML5 simulation smaller and faster. Consider such an example: on the page you have a chart created with basic shape elements, such as rectangle, arrow line, text box etc., and you have two buttons to navigate between pages. Actually only these two buttons have their behavior defined, and other elements are just shapes or text, which are completely static. If you use older version of ForeUI to generate HTML5 simulation for it, all those elements will be converted to DOM objects, which have to be loaded by the web browser. If your plot has a lot of shape elements which are actually static during the simulation, loading them as DOM objects is a waste of resource for web browser, and you will see the simulation loading time meaninglessly prolonged.ChartNavI guess you already know what I am going to say, the best way to treat those “static” element is to put them into an image and let them display as a static background, while those buttons that have behavior defined should be kept as they are. So to simulate the page mentioned above, the web browser just need to load 3 DOM objects: the static chart image and two buttons, which will be very fast! Now the question is: how to tell ForeUI to do so?

ClipArt Element

The answer is to use ClipArt element, which is newly included in ForeUI V3.80. This new ClipArt element is not an element that you can directly drag and add into your plot. You will need to select one or more elements and then click the convert_clipart button in the tools panel to wrap it/them as a ClipArt. ClipArt is just like a Group, but it will be output as a static picture in the HTML5 simulation, which means all its members will not be interactive during the simulation. So please make sure not to abuse it, and do not put any element that has (or will have) behavior defined into the ClipArt, otherwise ForeUI will warn you in the behavior editor:

ClipArtError

Wrapping some elements into a ClipArt looks like to put a static picture into your page, but there is difference: you can not modify the content of static picture in ForeUI, but you can edit the members of ClipArt as you wish. What’s more, you can always restore those elements from the ClipArt. This is extremely useful when you need to modify the diagram frequently.

You maybe interested in how good this kind of optimization can be, let’s see some comparisons.

The two plots in the comparison have the same content and behavior, the only difference is the second one converts all static elements into ClipArt elements. The plot files and HTML5 simulations are available in the table, so you can do the test by yourself. Your result may vary a little bit, depends on the hardware and software environment, but you will see the similar result, that the plot use ClipArt can be loaded much faster.

If you have a big plot, try using the methods mentioned in this document to optimize its size. If you are just starting a new plot, please also learn those tricks and keep your plot small. If you just want to create a prototype with less than 20 pages, it should be fine to ignore all these optimizations. However, if you are targeting a prototype with 100+ pages and still want it to be small and fast (it is possible, we have saw people did it), those optimizations are almost mandatory.

ForeUI V2.45: Optimize DHTML Generating and More

2

Hello everyone, ForeUI V2.45 is out today as scheduled.  This version is focusing quality and performance.  Enhancements cover DHTML generating optimization, new id allocate algorithm, popup tool windows management and much more.

DHTML Generating Optimization

This is an exciting enhancement as it decrease the file number and total file size, thus reduce the time for simulation loading.  How did we do achieve this?  It’s simple and straightforward: we merged the script files and images files for each elements, thus the file number can be decreased and the space for image file headers can be saved.  The effect of this kind of optimization will be quite significant when plot become big and complex.

Here are some testing results against V2.45 and V2.42, which use the “Fwitter.4ui” plot as testing sample.  We exported the plot to DHTML simulation using V2.42 and V2.45 respectively.  The file number and total file size are measured.  We open the native simulation in different web browsers to measure the local loading time, and then upload the DHTML simulations to web server and open the remote simulation in different web browsers to measure the remote loading time.

V2.42 V2.45
Number of DHTML files
676
308
Total size of DHTML files (bytes)
1293111
1095213
V2.42 V2.45
Time to load simulation locally (seconds)
IE 6.0
16
3
Firefox 3.6
~2
<1
Chrome 6.0
~2
<1
Safari 5.0
~2
<1
Opera 6.2
~2
<1
V2.42 V2.45
Time to load simulation from web server (seconds)
IE 6.0
252
43
Firefox 3.6
61
33
Chrome 6.0
59
30
Safari 5.0
60
32
Opera 6.2
180
31

It is not a strict testing, however the result can still give us a rough idea of the effect.  The good news is that the effect will be enlarged as the plot become bigger and more complex.  You may notice that the loading time on IE (and Opera for remote loading) is much longer than that on other browsers.  After optimize the loading performance on IE is improved a lot and the difference is much smaller now.

New Algorithm for Id Allocation

In this version we introduce a new new algorithm for id allocation, I bet you will like it :-)

Before V2.45, if you copy an element with id “Button_1″, and paste into the same plot, the newly pasted element will have an id like “Button_1_1″.  If you repeat the steps several times, you may get an element with a very long id like “Button_1_1_1_1_1_1_1_1_1_1″.  That’s very bad thing as you can not count out how many “1” in the id by first glance, the ids are long and not readable.

Now in V2.45, if you copy and paste an element with id “Button_1″, the newly pasted element will have an id like “Button_2″.  After several repeats, you will get an element with id like “Button_18″, this is much better, isn’t it?

What’s more, the new algorithm will try to keep the additional info in ids.  e.g. if you copy and paste an element with id “CheckBox_Option_1″, you can get the new element with id “CheckBox_Option_2″.  That can help you to understand the new element is similar with the source element.

We are quite excited about the new algorithm as it can significantly reduce the average length of element ids, and make ids more readable.  We should really make it earlier :P

Tool Windows Management

There are some tool windows in ForeUI, such as element selector, page manage window, category manage window etc.  Usually these window will be closed when focus is lost, however you can pin the window to keep it in the screen.  Before V2.45, if a tool window is pinned on screen, it will be placed at top and all popup stuffs like message box, popup menu, element editor etc. will be covered by the tool window.  Now we have enhanced this situation, see comparison below:

Another enhancement is that when minimizing the window of ForeUI, all opened tool windows will be hidden as well, thus you can work on other applications without interference.  When you restore ForeUI window, these tool windows will be restored too.

Avoid Negative Z Value

It is recommended not to use negative Z value, because in web browsers other than IE, the element with negative Z value can not receive any mouse event.  So we make some enhancements to avoid the negative Z value being used.

Now the and buttons on floating tool pane can only reduce the Z value down to zero.  If you are sure you need a negative Z value, you can input it directly, like this

Also the Auto Adjust Z Value feature will not set a negative Z value anymore.

Other Enhancements:

  • Validate path before saving the plot file.
  • Highlight the editable part of id when element id editor window shown up.
  • Allow setting z value for embedded element.

Fixed Bugs:

  • Bug_0236: Double clicking embedded element can not open its editor.
  • Bug_0237: Disabled Spinner element should not be able to spin.
  • Bug_0238: Can not disable Tabs/Vertical Tabs element in simulation.
  • Bug_0239: Button text is not correctly align with icon when icon is on top/bottom of text, and text width is less than icon, and using center alignment.