Dynamic Configuration Method of Process Indicator

Abstract

The present invention discloses a dynamic configuration method of a process indicator, comprising: determining and drawing the style of a step bar or a process node of the process indicator, including an icon and a connecting line arranged on the icon; splicing all the step bars or the process nodes; calculating the size of the process indicator according to the style of the step bar or the process node, the number of all the step bars or the process node arrays, and the width and height of the terminal device; setting the process indicator touch monitoring, judging whether the coordinates of the currently touched point are in each step bar or the process node, if not, not processing, if yes, triggering a monitoring event, which is processed by the user according to his own needs, setting the activation node position to the position of the currently clicked step bar or process node, and redrawing the entire process indicator at the same time; the present invention realizes a customizable process indicator that can be processed separately according to the process by dynamically configuring the flow chart style and monitoring the touch event of each step process.

Description

Technical Field

[0001] The invention relates to the technical field of web page development, in particular to a dynamic configuration method of a process indicator. Background Art

[0002] Currently, existing step bars or process indicators all use fixed styles. The aesthetics of the styles are outdated, and the icons and instructions of the steps cannot be fully aligned, which can easily cause trouble to users. Users cannot modify them according to their own designs, and when users need to view specific information under different processes or need to customize different processes, they cannot effectively expand according to their own needs. For example: the user defines the process, placing an order-filling in user information-verifying identity information. If the user needs to set styles for these three processes separately, it will be powerless. At the same time, if the current user is in the process of verifying identity information, he cannot view the specific content of the process of filling in user information. If the user needs to make special treatment for the ordering process separately, it will not be able to meet user needs. Summary of the invention

[0003] In order to solve the problems existing in the prior art, the purpose of the present invention is to provide a dynamic configuration method of a process indicator. The present invention realizes a customizable process indicator that can be processed separately by process by dynamically configuring the flowchart style and monitoring the touch events of each step of the process.

[0004] To achieve the above object, the technical solution adopted by the present invention is: a dynamic configuration method of a process indicator, comprising the following steps:

[0005] Step 1, initializing a process indicator, and determining and drawing a style of a step bar or a process node of the process indicator, wherein the step bar or the process node includes an icon and a connecting line arranged on the icon;

[0006] Step 2: According to the array of all step bars or process nodes passed in by the user, loop through and create more step bars or process nodes, and splice all the step bars or process nodes together;

[0007] Step 3, calculating the size of the process indicator according to the style of the step bar or process node determined in step 1, the number of all step bars or process node arrays passed in in step 2, and the width and height of the terminal device;

[0008] Step 4: Use HTML elements to arrange the icons and connecting lines so that they are centered;

[0009] Step 5: Set the icon of the step bar or process node and whether the connection line is activated or not;

[0010] Step 6. Set the process indicator touch monitoring to determine whether the coordinates of the currently touched point are in each step bar or process node. If not, no processing will be done. If so, a monitoring event will be triggered and the user will handle it according to their own needs. After setting the activation node position to the currently clicked step bar or process node position, the entire process indicator will be redrawn at the same time.

[0011] As a further improvement of the present invention, in step 1, the style of the step bar or process node of the process indicator is determined and drawn as follows:

[0012] Determine whether the user has configured the style of the step bar or process node. If the user has not configured the style, use the default configured style for drawing. If the user has configured the style, replace the default configured style with the user configured style before drawing.

[0013] As a further improvement of the present invention, the icon is an icon name or a picture link.

[0014] As a further improvement of the present invention, the calculation method of the process indicator size is as follows:

[0015] The width of the process indicator is adaptive to the width of the parent element, which is 100% by default; the height of the process indicator is the icon height plus the text height of the process name.

[0016] As a further improvement of the present invention, in step 5, setting the icon of the step bar or process node and the state of whether the connection line is activated or not specifically includes:

[0017] Taking the direction where the process indicator starts as the starting point, setting the current node position as i and the active node position as defaultStep, then:

[0018] If the current node is the first one, hide it directly, and the calculation method is i===0;

[0019] If the current node position i is before the activated node defaultStep, the connection line of the activated state is displayed, and the calculation method is: i-defaultStep === 1||i<=defaultStep+0.5;

[0020] If the current node position is after the activation step, the connection line to be activated is displayed, and the calculation method is: i>defaultStep;

[0021] Starting from the direction where the process indicator ends, let the length of all nodes be length, the current node position be i, and the active node position be defaultStep, then:

[0022] If the current node is the first one, hide it directly, and the calculation method is i == length – 1;

[0023] If the current node position i is before the activated node defaultStep, the connection line of the activated state is displayed, and the calculation method is: i-defaultStep === 1||i<=defaultStep+0.5;

[0024] If the current node position is after the activation step, the connection line to be activated is displayed, and the calculation method is: i>defaultStep.

[0025] The beneficial effects of the present invention are:

[0026] In the present invention, different users can customize the flow indicator style according to their own needs; users can process each flow node individually. BRIEF DESCRIPTION OF THE DRAWINGS

[0027] Figure 1 is a flowchart of an embodiment of the present invention;

[0028] Figure 2 A schematic diagram of the structure of a step bar or a process node in an embodiment of the present invention;

[0029] Figure 3 It is a schematic diagram of the structure after all the step bars or process nodes are spliced ​​together in an embodiment of the present invention;

[0030] Figure 4 A schematic diagram of a structure for determining the size of a process indicator in an embodiment of the present invention;

[0031] Figure 5 This is a schematic diagram of the structure after the process indicator is set to an activated state in an embodiment of the present invention. DETAILED DESCRIPTION

[0032] The embodiments of the present invention are described in detail below with reference to the accompanying drawings.

[0033] Example

[0034] In this embodiment, the abbreviations and key terms are defined as follows:

[0035] step: represents each step or process object, including the following properties:

[0036] icon: represents the icon used by the step, which can be an icon name or a picture link;

[0037] activeIcon: represents the icon used to activate the step, similar to icon;

[0038] name: represents the name of the current step or process object, which is used to display information below the icon;

[0039] activeColor: The color when the step is activated

[0040] lineStyle: The style of the connecting line, solid line||dashed line

[0041] lineColor: The color of the connecting line

[0042] lineActiveColor: The color of the connecting line when it is activated

[0043] active: indicates whether the current step is activated. When activated, the current node uses activeIcon as the node icon;

[0044] steps: an array of objects representing all steps or processes. Later, users can loop through and set step bars or process nodes.

[0045] defaultStep: represents the current step or process node. If defaultStep is set, the defaultStep value is used by default to represent the active node.

[0046] In HTML: div, span, icon, p tags are used to build the view interface.

[0047] like Figure 1 As shown, a dynamic configuration method of a process indicator includes:

[0048] Step 1: First, determine whether the user has configured a style. If the user has not configured a style, use the default configuration for drawing. If the user has configured a style, replace the default configuration style with the user-configured style, and then draw. For example, Figure 2 As shown, according to the array of all step bars or process nodes passed in by the user, more step bars or process nodes are created through looping, and all step bars or process nodes are spliced ​​together, such as Figure 3 As shown; the styles involved in this embodiment include: icon: icon; activeIcon: icon when activated; name: step name; activeColor: color when the step is activated; lineStyle: style of the connecting line, solid line||dashed line; lineColor: color of the connecting line; lineActiveColor: color of the connecting line when activated.

[0049] Step 2: Figure 4 As shown, the process indicator size is calculated based on the configured style and process quantity and the width and height of the terminal device. The specific calculation method is as follows:

[0050] Process indicator width: The default indicator width is adaptive to the width of the parent element, which is 100% by default;

[0051] Process indicator height: icon height + process name text height, which may be multiple lines and automatically adapts dynamically.

[0052] Step 3. Use HTML elements to arrange the icon and the connecting line so that they are centered. Since there is no positioning layout method, there is no need to worry about the misalignment of the name and icon.

[0053] Step 4: Figure 5 As shown, when looping through the steps array to render the corresponding step, set the current state (activated / inactivated) of the connection line of the current step. The setting rules are as follows:

[0054] 1. Left connecting line:

[0055] Known:

[0056] Current node position=>i

[0057] Activate node position=>defaultStep

[0058] So:

[0059] (1) The current node position is the first one, which is hidden directly, and the calculation method is i===0;

[0060] (2) The current node position i is before the activation step defaultStep, and the connection line of the activation state is displayed. The calculation method is: i-defaultStep === 1||i<=defaultStep+0.5;

[0061] (3) If the current node position is after the activation step, the connection line to be activated is displayed, and the calculation method is: i>defaultStep.

[0062] 2. Right connecting line:

[0063] Known:

[0064] All node lengths => length

[0065] Current node position=>i

[0066] Activate node position=>defaultStep

[0067] So:

[0068] (1) The current node position is the first one, so it is hidden directly, and the calculation method is i===length–1; (2) The current node position i is before the activation step defaultStep, and the connection line of the activation state is displayed; the calculation method is: i-defaultStep===1||i<=defaultStep+0.5;

[0069] (3) If the current node position is after the activation step, the connection line to be activated is displayed, and the calculation method is: i>defaultStep.

[0070] Step 5. Set the process indicator touch monitoring to determine whether the coordinates of the currently touched point are in each step. If not, no processing will be done. If so, a monitoring event will be triggered and the user will handle it according to their own needs. After setting the defaultStep to the currently clicked step position, the entire process indicator will be redrawn at the same time.

[0071] After going through the above process, users can freely customize the style according to their own needs, and can also make special treatments for each step of the process.

[0072] In this embodiment, for each step of the process, the user can make special processing according to his or her own needs: most of the process indicators currently on the market only mark the process name or have some simple descriptive information for each step of the process. If the user has the need to make special processing of the process, then it cannot be met. This invention can meet more user needs by monitoring the touch events of the process icon.

[0073] This embodiment solves the problem that existing process indicators on the market cannot be customized in style: the current process indicators on the market can only be defined based on the process name, line color and text font size, but most users have their own needs and need to specially customize the process icon. This invention effectively solves this problem through configuration.

[0074] At the same time, this embodiment solves the problem that the existing process indicator icons and descriptions on the market cannot be completely aligned in the play: many icon step names of the process indicators currently on the market cannot be completely centered, and when there is too much text, other processes will be covered. This invention perfectly solves this problem by using a new html+css layout configuration.

[0075] The above-mentioned embodiments only express the specific implementation of the present invention, and the description thereof is relatively specific and detailed, but it cannot be understood as limiting the scope of the present invention. It should be pointed out that, for ordinary technicians in this field, several variations and improvements can be made without departing from the concept of the present invention, which all belong to the protection scope of the present invention.

Claims

1. A dynamic configuration method for a process indicator, characterized in that: The following steps are involved: Step 1, initializing a process indicator, and determining and drawing a style of a step bar or a process node of the process indicator, wherein the step bar or the process node includes an icon and a connecting line arranged on the icon; Step 2: According to the array of all step bars or process nodes passed in by the user, loop through and create more step bars or process nodes, and splice all the step bars or process nodes together; Step 3, calculating the size of the process indicator according to the style of the step bar or process node determined in step 1, the number of all step bars or process node arrays passed in in step 2, and the width and height of the terminal device; The process indicator size is calculated as follows: The width of the process indicator is adaptive to the width of the parent element, and the default is 100%; the height of the process indicator is the icon height plus the text height of the process name; Step 4: Use HTML elements to arrange the icons and connecting lines so that they are centered; Step 5: Set the icon of the step bar or process node and whether the connection line is activated or not; specifically: Taking the direction where the process indicator starts as the starting point, setting the current node position as i and the active node position as defaultStep, then: If the current node is the first one, hide it directly, and the calculation method is i === 0; If the current node position i is before the activated node defaultStep, the connection line of the activated state is displayed, and the calculation method is: i - defaultStep === 1 || i < = defaultStep + 0.5; If the current node position is after the activation step, the connection line to be activated is displayed, and the calculation method is: i >defaultStep; Starting from the direction where the process indicator ends, let the length of all nodes be length, the current node position be i, and the active node position be defaultStep, then: If the current node is the first one, hide it directly, and the calculation method is i === length – 1; If the current node position i is before the activated node defaultStep, the connection line of the activated state is displayed, and the calculation method is: i - defaultStep === 1 || i < = defaultStep + 0.5; If the current node position is after the activation step, the connection line to be activated is displayed, and the calculation method is: i >defaultStep; Step 6. Set the process indicator touch monitoring to determine whether the coordinates of the currently touched point are in each step bar or process node. If not, no processing will be done. If so, a monitoring event will be triggered and the user will handle it according to their own needs. After setting the activation node position to the currently clicked step bar or process node position, the entire process indicator will be redrawn at the same time.

2. The dynamic configuration method of the process indicator according to claim 1, characterized in that: In step 1, determine the style of the step bar or process node of the process indicator and draw it as follows: Determine whether the user has configured the style of the step bar or process node. If the user has not configured the style, use the default configured style for drawing. If the user has configured the style, replace the default configured style with the user configured style before drawing.

3. The dynamic configuration method of a process indicator according to claim 1 or 2, characterized in that: The icon is an icon name or a picture link.

Images