HTML5 third bomb: Also cool and cute network topology map

Preface

3D engine room seems to have a ignition, it seems that the light weight of the web 3D is the trend, when the choice of WebGL rather than u3d is really grey often wise choice.

3D Although cool, but in the real enterprise application, the data, the relationship is presented to return to the traditional 2D interface, and HTML5 is the best choice at present. Canvas like HTML5, although it is no longer a new technology, but directly in the browser to draw the network topology diagram of the logical relationship, without the need to install any plug-ins, for many of the newer OSS system is still very attractive.

Recently busy to the customer to toss a complex multi-layered nesting relationship, the final result is still more than a sense of accomplishment.

Requirements Description

First, briefly describe the needs of this customer.

In real-world applications, network topology diagrams may be simple or complex.

For example, a single-layer topology with more nodes:

A little more complicated:

The common scenario in these topology diagrams is that many network nodes need to form a group, which is often referred to as a "network tuple." In general, a mesh tuple has a shape that can be expanded/closed by double-clicking. Such as:

The customer's needs, the biggest difficulty is the need to have five layers of network elements nested, five layers at the same time, the requirements of clear and beautiful. The General group shape has the circle, the rectangle, the parallelogram and so on, no matter what kind of shape, the grouping is more, will produce the esthetic fatigue. For example, I let the designer mm simply put a five-layer nesting picture, it looks like this:

After I showed the figure to the client, the client expressed the hope that the structure would be clearer. That day, the devil is pouring rain, I scratching an afternoon, finally had some inspiration.

Color

How can we make the structural effect clearer? What I think about is color. Color is always the first element in graphic design. If the grouping color is stereotyped, it is not clear that the inclusion relationship is clearly visible. But the color is too many colorful, obviously also does not conform to the telecommunication UI system style. How do you set the color? Layers of nested groupings, layers ... Bite! Have you ever thought of a vegetable?

(Humming Here "if you can peel my heart off one layer at a time ...") 100 times ... ）

This large onion appears to be layered because its color changes from the inside to the outside in a certain regularity: gradients. When it comes to gradients, I think of a game recommended by GF recently, which is about arranging some squares according to the color gradient. (Is it boring?) ）

However, the front-end design, color is a very important link.

In a word, if you want to make the nesting group clearer with a gradient color, try it boldly:

var Group=NewTwaver.Group();Group. SetStyle (' Group.fill.color ', style[3]);Group. SetStyle (' Group.deep ',0);Group. SetStyle (' Group.outline.width ', style[1]);Group. SetStyle (' Group.outline.color ', style[0]);Group. SetStyle (' Group.shape ',' RoundRect ');Group. SetStyle (' Select.style ',' None ');Group. SetStyle (' Vector.outline.pattern ', style[2]);Group. SetStyle (' Label.font ',' 14px ' Microsoft yahei ');Group. SetStyle (' Whole.alpha ',0.8);Group. SetStyle (' group.padding ', -Ten);Group. SetStyle (' Label.position ',' Topright.topleft ');Group. SetName (name);Group. setlocation ( -+ Max*level, -) box.Add(Group);

When the amount of data is larger, see if the grouping is clearer?

More Colors

After this figure was made, to show a few colleagues around, we have said good, but there seems to be some rigid, not vivid. Vivid.. That is to be vivid, so I continue to scratching, and think of some fruits and vegetables:

Natural workmanship, sure enough, or my color is not bright. I also let the designer mm to find a few color value adjusted a bit:

It looks a lot clearer.

Folding Angle

Is it more comfortable to have the feeling of writing the petals stacked? However, the shape of the square group is too rigid and lacks stereoscopic sense. When I saw a folded piece of white paper on the table, I was suddenly inspired.

For the square group to do a corner effect, do not know how the effect. To do this, rewrite the group's drawing and take over the 2d drawing. The group shape will no longer be a rectangle, but a tangent rectangle.

//draw round rect body.varRoundradius=Ten; CTX.Save (); CTX.Beginpath (); CTX.MoveTo (rect.X+Roundradius, rect.y); ctx.LineTo (rect.X+Rect.Width- -, rect.y); ctx.LineTo (rect.X+Rect.width, rect.Y+ -); CTX.LineTo (rect.X+Rect.width, rect.Y+Rect.Height-roundradius); CTX.Quadraticcurveto (rect.X+Rect.width, rect.Y+Rect.Height, rect.X+Rect.Width-roundradius, rect.Y+Rect.height); ctx.LineTo (rect.X+Roundradius, rect.Y+Rect.height); ctx.Quadraticcurveto (rect.X, rect.Y+Rect.Height, rect.X, rect.Y+Rect.Height-roundradius); CTX.LineTo (rect.X, rect.Y+Roundradius); ctx.Quadraticcurveto (rect.X, rect.Y, rect.X+Roundradius, rect.y); ctx.Save (); CTX.Shadowoffsetx= 4; CTX.Shadowoffsety= 4; CTX.Shadowblur= 4; CTX.Shadowcolor="#555555"; CTX.Fill (); CTX.Restore (); CTX.LineWidth=Node.GetStyle (' Group.outline.width '); CTX.Strokestyle=Node.GetStyle (' Group.outline.color '); CTX.Stroke (); At.Restore ();

Stroke to the canvas by drawing a rectangle with rounded corners and cutting off a corner. Look at the effect:

Then by increasing the fillet, chamfer, increase the shadow, set the different border line width, let the grouping further produce "layer progressive" feeling. Now I have the details of the folding corner.

Folding angle here, you need to draw a folded right triangle. The color of the triangle should be the back color of "paper". Here, carefully define the shape of the triangle and fill it out:

//draw Corlor.Ctx.fillstyle=node.getstyle (' Group.outline.color '); Ctx.linewidth=node.getstyle (' Group.outline.width '); ctx.linejoin=' Bevel '; Ctx.beginpath (); Ctx.moveto (rect.x+rect.width- -, rect.y); Ctx.lineto (rect.x+rect.width- at-Ten, rect.y+ --Ten); Ctx.quadraticcurveto (rect.x+rect.width- at, rect.y+ $, rect.x+rect.width- at+Ten, rect.y+ --Ten); Ctx.lineto (Rect.x+rect.width, rect.y+ -); Ctx.closepath (); Ctx.save (); ctx.shadowoffsetx =4; ctx.shadowoffsety =4; Ctx.shadowblur =4; Ctx.shadowcolor ="#777777"; Ctx.fill (); Ctx.restore (); Ctx.strokestyle=node.getstyle (' Group.outline.color '); ctx.Stroke();

The effect is as follows, three-dimensional sense out after, is not vivid a lot?

It is important to note that the shadow of the corner should also be set, and fill to use the same color as the border, increasing the "origami" of the three-dimensional.

Small details

Origami effect has, but the left side slightly open, so use canvas 2d to practice practiced hand, draw a path look:

Ctx.save (); ctx.strokestyle=' #27A3DA '; ctx.linewidth=2; Ctx.beginpath (); Ctx.moveto (rect.x+ to, rect.y+5); Ctx.lineto (rect.x+ -, rect.y+ -); Ctx.beziercurveto (rect.x+ -, rect.y+ -, rect.x+ -, rect.y+ -, rect.x+ +, rect.y+ at); Ctx.lineto (rect.x+ the, rect.y-2); Ctx.beziercurveto (rect.x+ the, rect.y- A, rect.x+ +, rect.y-Ten, rect.x+ +, rect.y-5); Ctx.lineto (rect.x+ in, rect.y-1); Ctx.shadowoffsetx =1; ctx.shadowoffsety =1; Ctx.shadowblur =1; Ctx.shadowcolor ="#aaaaaa"; ctx.Stroke(); Ctx.restore ();

Run it, you guessed it was God horse?

Haha, a small paper clip instantly leap off, feel Meng Meng da! In order to increase the three-dimensional, the paper clip is also to set the shadow, but the offset is not too large, the color is lighter, like this:

With the right color, with corners, shadows, and small paper clips, is this layer of nesting finally clear and beautiful?

Run, drag and drop, because the previous has done a lot of icons, line style, so the overall effect is very good!

Postscript

Before also said, HTML5 's canvas, although it is not a fresh technology, but when the technology itself no longer has barriers, we should pay more attention to the actual application of the business, such as in the picture of the structure of a very complex topology diagram, how to make the graphics more clear, easy to understand, so that the technology really fall into practice. If you have a better solution for this kind of topology diagram, you can also contact me: [Email protected]

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

HTML5 third bomb: Also cool and cute network topology map