0x01 Project Background

This project is a visual system of robot certificate making. Including certification equipment display and monitoring, quality inspection equipment display and monitoring; It also includes the display and monitoring of AGV robots. The certification equipment is used to make certificates, the quality inspection equipment is used for conformity inspection, and the AGV robot is used for transportation; The AGV robot also needs to monitor power and charging status and travel position.

0 x02 design draft

After receiving the project, everyone is happy and (who knows) getting to work. The first is to design draft, design sister after many negotiations and discussions with customers, delivered a final design version. The design draft is based on 2D application, and it looks like this. The details are as follows:

0x03 Task Decomposition Is implemented

First of all, we decided that the major development idea was to use HTML5 canvas for drawing. Of course, it would be difficult to develop from scratch. Fortunately, the company has a middleware, Twaver.js, which has encapsulated many functions well so as to facilitate our development.

Of course, our development process was simpler because we used a more advanced tool, the visual editing tool. In the following sections, we will introduce both the code implementation and the editor implementation.

First of all, we did the task decomposition for the design drawing:

  • Draw title bar
  • Paint the wall
  • Draw illustrations
  • Drawing equipment robot and so on
  • Chart statistics

Draw title bar

Title bar drawing includes date, color block, title, title background, title underline drawing.

Date of draw

First of all, let’s talk about date drawing. Date drawing is mainly text drawing, which can be completed directly by using The fillText function of Canvas. Related implementation ideas are relatively simple. The little square in the middle is a parallelogram, and the parallelogram can be drawn using paths, so we don’t have to do the code here.

So, how do we do that with our editor? Very simple, editor component library, there is this date component, directly drag over it! Thank you for your hard work!!

It’s actually a little bit more complicated because the date display control has a bunch of parallelograms in the middle of the date and time sections. In fact, the editor implementation is also very simple, is to drag two date display controls, the front one shows the date, the back one shows the time, and then put several parallelograms in the middle. The parallelogram is also a built-in component of the editor, So easy!

Here’s a look at the editor’s batch generation capability. Since there are multiple parallelograms, if you drag them out of the component library on the left each time, you have to adjust the size, offset the Angle, etc., and consider the alignment of the upper and lower edges and equal spacing between multiple parallelograms. If you use batch generation, it is much more convenient. If we first adjust a parallelogram, and then use the batch generation function, to generate multiple such parallelograms, and will be arranged in a certain order, the relevant introduction in this paper is a row of isometric arrangement, batch generation function effect.

For example, page effect: specify a certain number of rows, column number, row spacing, column spacing and other Settings, batch generation effect is shown as follows:

Of course, in the design drawing, there are many parallelograms with different colors, and the color gradually lightens, which still needs to be adjusted one by one. I hope the editors can provide a more efficient solution as soon as possible.

Draw the title

The title section includes a variety of effects, such as arrows, text, text backgrounds, text underlining, and so on. First of all, let’s look at the drawing of arrows, which, if coded by hand, would look like two parallelograms. Just connect the paths of the two parallelograms.

How do you do that using an editor? If you’ve already raised your hand, I’ve got the arrow component in my editor, just drag it over. I should tell you, however, that the editor does not have a ready-made arrow component.

And you don’t have to feel sorry. Although the editor does not have arrow components, it does have a composition feature, the ability to combine basic components to form complex components. As I said, the arrow is actually two parallelograms.

So you can drag a parallelogram and adjust its size. Here are two more special techniques:

  • Drag copy: Hold down the Shift key and drag an existing primitive component to copy an identical primitive.
  • Vertical flip: right click, select vertical flip, you can get a vertical mirror effect.

Combining the original parallelogram with the mirrored parallelogram gives the effect of an arrow. The same goes for the arrow effect on the right. As shown below:

Combined with the previous batch generated effect, you can get the page design effect of the entire arrow area.

In fact, the effect of text is relatively simple, which can be completed with Canvas fillText. The text in the design draft has a shadow effect, so the shadow effect can be added when drawing:

ctx.shadowColor = 'blue'; ctx.shadowBlur = 12; . Ctx.filltext (' Robot certification System ');Copy the code

In the editor, there are not only ready-made text components, but also rich style adjustment capabilities, including fonts, colors, shadow effects, and so on.

Now let’s move on to the underlining of text. Look at the design of the underline is the middle light, dark on both sides of the effect, and is thick in the middle, thin on both sides of the effect. It seems a little difficult to draw on canvas.

Some people want to really not let the design sister cut pictures bai; Well, cutting is possible, but can’t technology solve it?

In fact, it is possible, first of all, the middle of the dark side effect, is actually very easy to achieve, use gradient. In fact, with gradients, if the colors on both sides are close to the background, there will be an effect of fading into the background. The ends are going to look thinner on each side than the middle, but it’s just going to look like this, it’s actually going to be the same thickness, and that’s the visual response. Of course, our visualization is for people to see, and if it looks good, it doesn’t matter what the real thing looks like.

Here is a sample code.

var canvas = document.getElementById('can'); var ctx = canvas.getContext('2d'); ctx.fillStyle = 'blue'; ,0,1000,1000 CTX. FillRect (0); Var GRD = CTX. CreateRadialGradient,5,150,100,50 (150100); grd.addColorStop(0,"red"); GRD. AddColorStop (0.3, "red"); GRD. AddColorStop (1, "rgba (255,0,0,0.1)"); ctx.strokeStyle = grd; ctx.lineWidth = 3; ctx.shadowBlur = 5; CTX. ShadowColor = 'rgba (255,0,0,0.1); ctx.beginPath(); CTX. MoveTo (100100); CTX. LineTo (200100); ctx.stroke();Copy the code

The final display looks like this:

In the editor, we use a similar approach, but instead of a line segment, we use a rectangle, keeping the height of the rectangle small. First in edit, drag in a rectangle, then set its properties so that it does not show borders, and set its fill style to radial gradient.

The final rectangle looks like this:

Then adjust the height of the rectangle, for example, to 1. The result looks like this:

Then is the text background effect, in fact, the background effect and underline implementation has the same idea, but the gradient color transparency to lower a little, since it is the background, can not dominate, otherwise it will affect the text display.

After being edited by the editor, the overall effect of the title is shown below:

Paint the wall

The drawing of the wall consists of two parts, one is the support column and the other is the path of the wall. Both parts are relatively simple. The support column is a rectangular square. The wall itself is a segment path, which can be drawn using the Canvas path function. For example:

CTX. MoveTo (x0, y0); ctx.lineTo(x1,y1); ctx.lineTo(x2,y2); ctx.lineTo(x3,y3); ctx.strokeStyle = 'blue'; ctx.stroke();Copy the code

In the editor, you can directly edit the way to generate the path. One of the auxiliary functions is that when CTRL is pressed, the line can only move horizontally, vertically and 45 degrees diagonally.

Draw illustrations

First take a look at the legend area:

As can be seen from the figure, each legend has a figure on the left, which will be discussed later, and text and underline on the right. Text and underline have been mentioned before, but not here.

The graphics in front allow designers to create a picture. You can also use an editor to do this, and there’s a module in the editor called the metaeditor that makes basic graphics. If we look at the figure in front of the legend, it is actually a circle inside a circle, and then there is a short horizontal line or use the fan drawing attribute of the circle instead of a straight line. Using primitives to edit is very convenient:

  • First drag a circle into the edit area, then set it to show only borders, not padding, and use the shadow blur effect.
  • Drag another circle into the edit area, set it to show no borders, but fill, and use the shadow blur effect. Also set the size to be smaller than the first circle.
  • Drag a line segment (or check the circle to fan) to connect the two circles.

The final edit out of the pixel effect is as follows, below is the enlarged effect

The above edited primitives can be used directly in the scene editing area. This primitive component + text component + underline makes up the effect of a legend.

Chart statistics

First take a look at the contents of the chart area:

You can divide the contents of the chart area into several sections:

  • The parentheses around
  • The circular chart
  • Text (including squares before text, text, underline, etc.)

Bracket drawing

As mentioned earlier in the metaeditor module, parentheses can be made into a metaeditor. It is a combination of several line segments, as shown in the figure below:

Then adjust the color and position of the line segment to achieve the effect in the design drawing:

The above illustration shows the effect of the open parenthesis. For close parentheses, we can use the same idea to create a close parenthesis primitive.

You can also use the left parenthesis directly when editing the scene, and then flip it horizontally to achieve the mirror effect.

The text drawing here is similar to the text drawing of the title, including the box before the text, the text itself and the underline effect of the text, etc. I will not repeat it here.

The next step is to chart. As can be seen from the design draft, the chart is mainly composed of several circles or fan-shaped superposition, belonging to a relatively simple chart.

One idea is to customize it through code. This is a relatively simple diagram, which should be realized by multiple combinations of arc functions. The specific implementation code is not detailed here.

Another way, of course, is to use the function of metaeditor. First, drag out four circles on the page, and then adjust their fill color, size, border color, start and end Angle, etc., to get the following graph:

The fill color can specify a bit gradient, and then add a shadow effect to get the black gradient in the middle.

Then organize these figures in a certain order, you can get the relevant chart, center point alignment function makes it easy to adjust the position.

Some readers might say, well, this is a fixed graph, you can’t do dynamic data, right? In fact, our editor can do this piece of data docking, data can affect the properties of the graph, so as to achieve dynamic effects. However, the part of data docking will be discussed in subsequent articles, which will not be focused on in this paper. The same below.

At this point, the statistical chart part, the production is complete.

Drawing equipment robot

The equipment and robot primitives are relatively complex, as shown below:

It can be seen that primitives have both static picture parts and dynamic drawing.

In the metaeditor, you can group static images and animated elements together. For example, the robot pixel, below is the static image, above is a text number, a small dynamic battery diagram, and a percentage text. Static images are obvious, so let the design girls help.

Let’s see how you can create one using metaeditor.

The first is the part of the line that can be edited using connectives:

We saw that earlier when we talked about drawing parentheses.

Here first edit a shape similar to that of the line segment, then set the line segment display style bit dashed line, adjust the color of the dashed line, etc. :

Next, edit the battery section. The battery can be composed of three rectangles, one of which is unfilled and the other two are filled:

Properly combined together, a battery pattern can be formed:

Text can be edited directly using text controls, which will not be described here.

In the metaeditor, there is a picture control, which can specify an area to display the static picture to the server:

Double-click the control to select the picture:

The final effect is shown below:

Lines, batteries and text are combined to form robot primitives:

Other quality inspection equipment, governing equipment, such as the pixel production process is similar, there is no need to repeat.

0x03 Scenario Generation

The following was said:

  • Draw title bar
  • Paint the wall
  • Draw illustrations
  • Drawing equipment robot and so on
  • Chart statistics

Among them, the title bar and wall are generated in the scene, while the legend equipment robot statistics chart mainly reflects the production of related primitives, which have not been applied to the scene, to be applied to the scene, only need to save the production primitives. And in the scene editing side can be directly used, such as the following part of the saved primitives:

Once you have the associated primitives, just drag and drop them in the scene editor. Below is an edited rendering:

Well, the final effect is still in progress, mainly related pixel optimization and color matching optimization. Of course, the next step is more important, to docking data, to achieve dynamic effect.

If you are interested in the demo, you can email [email protected].

Welcome to the public account “ITman Biao Shu”. Biao Shu, with more than 10 years of development experience, is now the company’s system architect, technical director, technical trainer, career planner. In-depth research in computer graphics, WebGL, front-end visualization. Strong interest in programmer thinking ability training and training, programmer career planning.