A few months ago, h5-Dooring, an open source platform for creating H5 pages, received a lot of enthusiastic feedback and communication. Following the author’s previous planning, we made a visual large-screen editor v6.dooring. Next, THE author will take you to see our program design and technical implementation.

You will reap

  • Visual large screen product design ideas
  • Mainstream visual chart library technology selection
  • Large screen editor design ideas
  • Schema design of large screen visual editor
  • Explore user data autonomy

Before we get there, let’s look at the implementation.

Results the preview

Plan implementation

Visual large screen product design ideas

At present, many enterprises more or less face the problem of “information island”, the data between each system platform cannot be shared, it is difficult to achieve integrated data analysis and real-time presentation.

Compared to traditional manual custom chart and data dashboard, visualization of domestic production platform, can break the custom development of offset, scattered data, through the analysis of the data collecting, cleaning, to intuitive real-time data visualization, the indicators can be all-round, multi-angle, panoramic display, real-time monitoring, dynamic be clear at a glance.

In view of the above requirements, we designed a set of visual large-screen solutions, including the following points:

Above is the basic sketch I designed 4 months ago and will continue to update. Through the above design decomposition, we can basically build a customized large data screen.

Mainstream visual chart library technology selection

Currently, the known mainstream visualization libraries investigated by the author include:

  • Echart is an old open source visual chart library based on JavaScript
  • D3.js is a data-driven visualization library that runs independently in modern browsers without the need for any other framework. It combines powerful visualization components to drive DOM manipulation
  • Antv contains a complete set of visual components
  • Chart.js is an easy-to-use JavaScript Chart library based on HTML5
  • Metrics Graphics’ visualization library, built on top of D3, is optimized for visualization and placement of time series data
  • C3.js makes it easy to generate D3-based charts by wrapping the code needed to construct the entire chart

We can use any of the above libraries to achieve our visual large screen construction requirements, you can choose according to preferences.

Large screen editor design ideas

In the above analysis, we know that a large-screen editor needs an editor core, which mainly includes the following parts:

  • Component library
  • Drag and drop (free drag, guides, autoprompt)
  • Canvas renderer
  • Property editor

As shown below:

We can use any component encapsulation method (React/Vue, etc.) to optimize and design the component model, using h5-Dooring’s visual component design method.

A similar code would look like this:

import { Chart } from '@antv/f2';
import React, { memo, useEffect, useRef } from 'react';

import styles from './index.less';
import { IChartConfig } from './schema';

const XChart = (props:IChartConfig) = > {
  const { data, color, size, paddingTop, title } = props;
  const chartRef = useRef(null);
  useEffect(() = > {
      const chart = new Chart({
        el: chartRef.current || undefined.pixelRatio: window.devicePixelRatio, // Specify the resolution
      });

      // Step 2: Process data
      const dataX = data.map(item= > ({ ...item, value: Number(item.value) }));

      // Step 2: Load the data source
      chart.source(dataX);

      // Step 3: Create the graph syntax and draw the bar chart. The position of the graph is determined by genre and sold properties, genre mapping to the x axis and sold mapping to the Y axis
      chart
        .interval()
        .position('name*value')
        .color('name');

      // Step 4: Render the chart
      chart.render();
  }, [data]);
  return (
    <div className={styles.chartWrap}>
      <div className={styles.chartTitle} style={{ color.fontSize: size.paddingTop}} >
        {title}
      </div>
      <canvas ref={chartRef}></canvas>
    </div>
  );
};

export default memo(XChart);

Copy the code

The above is just a simple example. With the complexity of business requirements, we tend to do more control, such as animation, event, data inject, etc.

Component dragging can be done using existing plug-ins such as Dragable on the market, or smart grid dragging with H5-Dooring. Here I choose free drag to achieve. Have:

  • rc-drag
  • sortablejs
  • react-dnd
  • react-dragable
  • vue-dragable

The specific drag and drop presentation process is as follows:

The specific drag process is:

  1. Use the H5 Dragable API to drag the left component data into the targetBox.
  2. Listen for the drag end event to get the one that the drag event passeddataTo render real visual components
  3. Visual component mount,schemaInject the edit panel, which renders the component property editor
  4. Drag and drop, property modification, update
  5. Preview, release

The component’s schema is referenced to the Dooring DSL design

Autonomous exploration of visualized large screen data

At present, the platform we have implemented can design data sources statically or inject third-party interfaces as follows:

We can call the internal interface to obtain data in real time, which is more commonly used in the visual monitoring platform, in the following ways:

The parameters (Params) edit area allows you to customize interface parameters. The author of the code editor here recommend two, you can choose:

  • react-monaco-editor
  • react-codemirror2

Use one of the above to achieve a mini version of vscode, you can also try.

Auxiliary function

The one-click screenshots function of visual large screen still follows the quick screenshots scheme of H5-Dooring. It is mainly used for large-screen sharing, poster making and other requirements. We can use any of the following components to achieve it:

  • dom-to-image
  • html2canvas

Cancel the redo

To undo the redo function, you can use existing libraries such as react-undo or implement it yourself.

We store each state in an array and use Pointers to undo the redo function. If we want to be more robust, we can design a “state elimination mechanism” that sets the maximum number of states that can be retained and automatically eliminate the previous state (delete, call the higher one). This saves browser memory by avoiding large amounts of state storage in complex operations.

Here we achieve our own ruler and guide line, through dynamic DOM rendering to achieve the dynamic shrinkage of the reference line after scaling, the core of the implementation scheme is as follows:

arr.forEach(el= > {
  let dom = [...Array.from(el.querySelectorAll('.calibrationNumber'))] [0] as HTMLElement;
  if (dom) {
    dom.style.transform = `translate3d(-4px, -8px, 0px) scale(${(multiple + 0.1).toFixed(
      1)},) `; }});Copy the code

Detailed source code can refer to: H5 – Dooring | source reference line design

In the late planning

Recently, our main direction is the development of H5-Dooring editor 2.0 and the upgrade and optimization of visual large screen building platform. We will release the online version of demo later. Welcome to play.

The next great

  • 3D visual component design scheme
  • Design of data visualization monitoring platform
  • Visualization of large screen data governance and real-time data presentation
  • H5-dooring version 2.0 technology sharing

Phase to recommend

13+ FaQs and solutions encountered in the Recovery Node project

How to build building blocks to quickly develop H5 pages?

Handlift an online CSS triangle generator

Front-end efficient development of the necessary JS library comb

Think it works? Like to collect, by the way point like it, your support is my biggest encouragement! Wechat search “interesting talk front-end”, found more interesting H5 games, Webpack, Node, gulp, CSS3, javascript, nodeJS, Canvas data visualization and other front-end knowledge and actual combat.