Browser language and graphic rendering-based secondary development simulation typesetting interactive interface display method

Abstract

The invention discloses a browser language and graphic rendering-based secondary development simulation typesetting interactive interface display method. The method comprises the following steps of: 1, inputting user data interaction; 2, performing algorithm calculation based on a JAVASCRIPT language, obtaining initial data for processing fidelity through a user data interaction part, and realizing multi-scheme data packet output; 3, based on a browser CANVAS graphic rendering technology, identifying the data packet output in the step 2, performing specific analysis, and identifying and drawing data of a specific scheme; and 4, by using a browser technology, aiming at a data result calculated in the step 2, performing interface assembly around the data in a one-way output mode, and finally combining one, two, three and four to realize the method which can be operated independently by a browser and can be used for simulating data input by a user. And the multi-terminal typesetting result preview can be used for viewing various graph and character results in real time and switching schemes.

Description

Technical Field

[0001] The present invention relates to the technical field of browser plate cutting typesetting result display visualization, and more specifically to a secondary development simulation typesetting interactive interface display method based on browser language and graphic rendering. Background Art

[0002] With the in-depth implementation and promotion of the national factory digital transformation policy, various equipment factories are actively exploring and practicing the construction path of factory digitalization. In this wave of transformation, production pre-planning, as the cornerstone and stepping stone of factory digital transformation, is becoming increasingly important.

[0003] The cutting layout system is embedded in the factory system on the browser side. This innovative measure has brought great convenience to procurement and planning personnel. Before the production cutting operation, they can intuitively understand the production demand, expected output, material utilization rate and the specific effects of various cutting schemes through this system. The data support provided by the system enables planners to make more scientific and reasonable decisions based on real-time and accurate information, thereby effectively optimizing the production process, reducing material waste and improving production efficiency.

[0004] Previously, this field mostly used professional software for typesetting graphic algorithm calculations or used mature systems for graphic calculation typesetting. The current typesetting system needs to be nested in a fixed computer or system for reasons of database, back-end language or software system and data security. Compared with the invention "A steel plate nesting image optimization method for irregular steel" (File No.: CN114611776A, Publication Date: 2022.06.10), this invention uses graphic algorithms to collect data and calculate results. It focuses on the collection of initial states and algorithm optimization methods, but lacks systematic display functions and graphical intuitive display functions. The algorithm also lacks product demand data and calculations of how many plates are needed for the cutting plan.

[0005] In the existing technical solutions, most of them focus on actual production applications. For more complex typesetting, cutting and material procurement systems, in view of the professional functions and data privacy, most of them use computer installation of professional software or use complex page data interaction systems using databases;

[0006] Due to the professional nature and data privacy, most of its functions can only be used on computers in specific locations or factory-specific intranet systems, and certain actual data collection and data support are required to achieve the output of simulated typesetting and cutting results. Due to the above reasons, it cannot be multi-terminal adapted and used without data support. Summary of the invention

[0007] The present invention provides a secondary development simulation typesetting interactive interface display method based on browser language and graphic rendering, in order to solve the technical problems existing in the background technology.

[0008] In order to achieve the above object, the present invention adopts the following technical solutions:

[0009] A secondary development simulation typesetting interactive interface display method based on browser language and graphic rendering, comprising the following steps:

[0010] Step 1: Input of user data interaction;

[0011] Step 2: Perform algorithm calculation based on JAVASCRIPT language, obtain the initial data with processing fidelity through the user data interaction part, and realize the output of multi-scheme data package;

[0012] Step 3: Based on the browser CANVAS graphics rendering technology, identify the data packet output in step 2 for specific analysis, identify the data of the specific solution and draw it;

[0013] Step 4: Use browser technology to assemble an interface around the data results calculated in step 2 in a one-way output mode, and finally combine one, two, three, and four to implement a multi-terminal layout result preview that can be run by a browser alone, simulate data input by the user, and can view a variety of graphic and text results in real time and switch between solutions.

[0014] The step 1: user data interaction input includes: using the browser language to write the data input interface, using the browser language to edit the specific interface in HTML, CSS, and JAVASCRIPT to connect with the user, and completing the display of user simulation data and communication at the logic level.

[0015] Step 2: Perform algorithm calculation based on JAVASCRIPT language, obtain the initial data with processing fidelity through the user data interaction part, and realize the output of multi-scheme data package; including:

[0016] The algorithm is calculated based on the JAVASCRIPT language. It obtains the initial data with processing fidelity through the user data interaction part, adopts the data incremental amplification detection method, and verifies the process data during the data calculation process to ensure the accuracy of the data calculation.

[0017] Use the independent calculation method to output the single board nesting cutting calculation and the tail board nesting calculation, then summarize the single board tail calculation results, combine multiple single board cutting and tail board cutting into multiple schemes, and output multiple scheme data packets.

[0018] Step 3: Based on the browser CANVAS graphics rendering technology, identify the data packet output in step 2 for specific analysis, identify the data of the specific solution and draw it; including:

[0019] The data of a specific solution is identified and drawn. During the drawing process, the screen size is obtained through the browser API. According to the different terminal sizes, the data coordinates are converted to a specific proportion. Multiple solutions are loaded and problematic solutions are eliminated to achieve a complete display of the results.

[0020] Step 4: Use browser technology to assemble the interface around the data results calculated in step 2 in a one-way output mode, and finally combine one, two, three, and four to realize a multi-terminal layout result preview that can be run by the browser alone, through user input simulation data, and real-time viewing of various graphics and text results and switching schemes, including:

[0021] Data is displayed in a multi-selection manner. When the user switches plans with the mouse, the data combination is switched through the basic browser events. The graphic display and the final data display are switched using the combination logo. The final combination of one, two, three, and four realizes a multi-terminal typesetting result preview that can be run by the browser alone, through user input of simulated data, and real-time viewing of various graphic and text results and switching plans.

[0022] Compared with the background technology, the present invention has the following beneficial effects:

[0023] The technical solution of the present application is aimed at the problem that the existing plate simulation typesetting software system is inconvenient to use, and its system is highly complex and not suitable for most operating devices and handheld devices. The technical solution of the present application is to develop a simulation typesetting system using the browser language JAVASCRIPT and browser graphics rendering technology. Only a browser is needed to run the simulation typesetting calculation of plate nesting and cutting and the calculation results (including but not limited to the calculation of effective utilization rate, waste rate, tail material utilization rate, tail material fertilizer rate and red line cost) and graphic display. Based on the same matching type of browser language, the technical solution system of the present application can be tried out for interaction and display on multiple terminals (PC, mobile phone, PDA), and due to the particularity of the browser language, it can still be used normally even when the network is disconnected. BRIEF DESCRIPTION OF THE DRAWINGS

[0024] Figure 1 It is a module for inputting basic information of users;

[0025] Figure 2 For data processing procedures;

[0026] Figure 3 Module for graphic layout display;

[0027] Figure 4 and Figure 5 Provide a display module for result feedback; DETAILED DESCRIPTION

[0028] In order to make the purpose, technical solutions and advantages of the present application clearer, the technical solutions in the embodiments of the present application will be described in more detail below in conjunction with the drawings in the preferred embodiments of the present application. In the drawings, the same or similar reference numerals throughout represent the same or similar parts or parts with the same or similar functions. The described embodiments are part of the embodiments of the present application, not all of the embodiments. The embodiments described below with reference to the drawings are exemplary and are intended to be used to explain the present application, and should not be construed as limitations on the present application. Based on the embodiments in the present application, all other embodiments obtained by ordinary technicians in this field without making creative work are within the scope of protection of the present application.

[0029] The following will be combined Figure 1-5 It is worth noting that the following embodiments are only used to explain the present application and do not constitute a limitation on the present application.

[0030] Example

[0031] See also Figure 1-5 , a secondary development simulation typesetting interactive interface display method based on browser language and graphics rendering, comprising the following steps:

[0032] Step 1: User data interactive input; in order to break away from real data collection and database data use, the data input interface is written through the browser language, and the browser language is used to edit the specific interface in HTML, CSS, and JAVASCRIPT to connect with the user, completing the display of user simulated data and logical communication. Due to specific limitations in calculations, to prevent function jams, the browser language is used to perform characteristic data verification and input fool-proofing design, so as to ensure subsequent functions without the need for professional data knowledge, and to achieve multi-terminal adaptation through compatible functions.

[0033] Step 2: Perform algorithm calculation based on JAVASCRIPT language, obtain the initial data of processing fidelity through the user data interaction part, and realize the output of multi-scheme data packet; Perform algorithm calculation based on JAVASCRIPT language, obtain the initial data of processing fidelity through the user data interaction part, due to the problem of JAVASCRIPT calculation data distortion, adopt the data incremental amplification detection method, perform process data verification in the data calculation process, and ensure the accuracy of data calculation. Considering the relationship between demand data and plate material, the technical capsule of this application uses the single plate nesting cutting calculation and the tail plate nesting to calculate independently and calculate the efficiency of fast output to achieve a good user real-time experience, and then perform the result of single plate tail calculation to summarize the data. Because it adopts the separation and independent prosecution case scheme, the single plate multiple cutting and tail plate multiple cutting can be combined into multiple scheme input, and the multi-scheme data packet can be output. At the same time, the subsequent CANVAS or function of the result draws the coordinate calculation of the scheme result. And because it needs to be displayed in multiple directions, the combined mark is used for coordinate processing to reduce the overall coordinate amount and data volume to achieve the ability to adapt to browsers, mobile phones, and PDA devices and quickly complete the calculation.

[0034] Step 3: Based on the browser CANVAS graphics rendering technology, identify the data packet output from step 2 for specific analysis, identify the data of the specific solution and draw it; in the drawing process, obtain the screen size through the browser API, and according to the different terminal sizes, use a specific proportion to convert the data coordinates, so that multiple solutions are loaded and the problem solutions are eliminated to achieve a complete display of the results, and the size conversion coordinates are processed to achieve a better look and feel. At the same time, a double-board display effect is used to intuitively display the single-board cutting and tail board display for the cutting effect, so that the layout graphics can be viewed in real time on the computer, mobile phone, and PDA.

[0035] Step 4: Use browser technology to assemble an interface around the data results calculated in step 2 in a one-way output mode. The data is displayed in a multi-selection mode. When the user switches the scheme with the mouse, the data combination is switched through the basic events of the browser. Because step 2 calculates too much data, a combination mark is used to switch the graphic display and the final data display to reduce the impact that may be caused by insufficient browser performance. The final combination of one, two, three and four realizes a typesetting result preview on multiple terminals (computers, mobile phones, PDAs) that can run alone in a browser, input simulation data through users, view multiple graphics and text results in real time, and switch schemes.

[0036] The user basic information entry module, in the interactive function interface opened in the first technical solution, performs real-time input of simulation data. The function is based on the HTMLINPUT tag, which includes the length and width of the plate, the width and height of the cut material, the required quantity, the name of the solution, the red line price, and binds the parameter set Params in a two-way data manner. The smartComputed method is used to prevent users from making mistakes and provide prompts for incorrect input. After calling the validate method to verify the parameter params, the data is sub-packaged into single boards and tail boards and the calculation function is passed.

[0037] After the calculation function gets the data obtained in the previous step, it first calls the single board calculation set singleComput to perform single board related coordinates and data. It calculates the maximum number of single boards that can be cut, the board area, the effective cutting area of ​​the single board, the single board waste area, and the cutting coordinate [X, Y] data point set through the width and height of the provided board and the width and height of the cut. The single board calculation method can use the singleComput recursive call method to start single board cutting and nesting layout, and calculate whether the remaining cutting material can be cut again after switching the direction at a specific size. Second, call the tail material calculation set otherComput. Based on the results of the singleComput single board and the user input of the required number, the tail board calculation method will perform the required number of boards, the number of tail material cuts, the remaining area of ​​tail materials, the total waste area, the utilization rate, the tail material marking, and the [x, y] set calculation. Finally, the totalComput calculation method will call the singleComput and otherComput methods in turn through different solutions, obtain the solution result information body and mark it, and pass it to the initCompare method of the solution display module for solution combination data processing, as well as the initCanvas method of the graphic layout display module.

[0038] The coordinates are calculated with the data of the optimal solution through the data of the previous step. After obtaining the screen and device information through the browser function, the actual data unit is compared to preload the coordinates. After confirming the display, the single board and tail board combination display is performed, and the graphics are initialized through the drawChart method, including canvas initialization initCtx, setting and encapsulating the basic information of the canvas, and providing the basic drawing API, the basic graphics information calculation initDraw method, and the drawing coordinate information [X, Y] is analyzed and calculated. The functional theme is to calculate the cm size and pixel px, adapt the display of boards of different sizes, and provide the maximum horizontal display plan and the vertical display plan. If there is no configuration, initDraw will maximize the display adaptation according to the aspect ratio of the board and the page size of the computer monitor. The single board cutting plan (red background) and the tail material cutting plan (green) are displayed through the normarAndtail method.

[0039] The data after the scheme combination data processing is processed by the scheme display module initCompare method, and the data is calculated and processed by initCompare with the optimal scheme data body and other scheme data sets. The results are displayed in a list of vertically arranged cards through the showResult method. The optimal scheme is labeled with a special label and loaded by default through showFirst, and the default optimal scheme is passed to the graphic layout display module drawChart method for optimal scheme layout rendering. The scheme is switched through the changeSelect scheme to switch the remaining schemes that the user wants to view. The scheme is displayed through showCard, which includes the scheme layout name, the number of required plates, the standard cost, the utilization rate, the total waste area, the number of single boards produced, the single board waste area, the single product red line cost, the remaining area of ​​tail materials, and the remaining area of ​​waste materials for data display. Through the scheme printing module, the results are displayed and printed through printResult. Through the copyCanvas method, the displayed scheme display module will be copied and rearranged, and its textResult method will rearrange the scheme information.

[0040] The actual operation process on the user side is as follows

[0041] Step 1. Open the page, create a new plan and enter a name.

[0042] Step 2. Unlock the fool-proof design and enter the board parameters.

[0043] Step 3. Enter the remaining parameters, then enter the required parameters, and click Generate Plan.

[0044] Step 4. Wait for the algorithm to generate a solution.

[0045] Step 5. The page displays multiple solutions and identifies the best solution. At the same time, the current algorithm layout solution is displayed graphically.

[0046] Step 6. Click on different schemes, and the graphics will show you how to switch between different scheme layouts.

[0047] Step 7. Click Export Plan to generate a PDF file of the selected plan

[0048] Step 8. Repeat steps 1-7 to obtain various cutting plans under different data.

[0049] The above description is only a preferred embodiment of the present invention and is not intended to limit the present invention. Any modifications, equivalent substitutions and improvements made within the spirit and principles of the present invention should be included in the protection scope of the present invention.

Claims

1. A secondary development simulation typesetting interactive interface display method based on browser language and graphic rendering, characterized in that: The following steps are involved: Step 1: Input of user data interaction; Step 2: Perform algorithm calculation based on JAVASCRIPT language, obtain the initial data with processing fidelity through the user data interaction part, and realize the output of multi-scheme data package; Step 3: Based on the browser CANVAS graphics rendering technology, identify the data packet output in step 2 for specific analysis, identify the data of the specific solution and draw it; Step 4: Use browser technology to assemble an interface around the data results calculated in step 2 in a one-way output mode, and finally combine one, two, three, and four to implement a multi-terminal layout result preview that can be run by a browser alone, simulate data input by the user, and can view a variety of graphic and text results in real time and switch between solutions.

2. According to claim 1, a secondary development simulation typesetting interactive interface display method based on browser language and graphic rendering is characterized in that: The step 1: user data interaction input includes: using the browser language to write the data input interface, using the browser language to edit the specific interface in HTML, CSS, and JAVASCRIPT to connect with the user, and completing the display of user simulation data and communication at the logic level.

3. According to claim 1, a secondary development simulation typesetting interactive interface display method based on browser language and graphic rendering is characterized in that: Step 2: Perform algorithm calculation based on JAVASCRIPT language, obtain the initial data with processing fidelity through the user data interaction part, and realize the output of multi-scheme data package; including: The algorithm is calculated based on the JAVASCRIPT language. It obtains the initial data with processing fidelity through the user data interaction part, adopts the data incremental amplification detection method, and verifies the process data during the data calculation process to ensure the accuracy of the data calculation.

4. According to claim 3, a secondary development simulation typesetting interactive interface display method based on browser language and graphic rendering is characterized in that: Use the independent calculation method to output the single board nesting cutting calculation and the tail board nesting calculation, then summarize the single board tail calculation results, combine multiple single board cutting and tail board cutting into multiple schemes, and output multiple scheme data packets.

5. According to the method of secondary development simulation typesetting interactive interface display based on browser language and graphic rendering according to claim 1, it is characterized in that: Step 3: Based on the browser CANVAS graphics rendering technology, identify the data packet output in step 2 for specific analysis, identify the data of the specific solution and draw it; including: The data of a specific solution is identified and drawn. During the drawing process, the screen size is obtained through the browser API. According to the different terminal sizes, the data coordinates are converted to a specific proportion. Multiple solutions are loaded and problematic solutions are eliminated to achieve a complete display of the results.

6. According to the method of secondary development simulation typesetting interactive interface display based on browser language and graphic rendering according to claim 1, it is characterized in that: Step 4: Use browser technology to assemble the interface around the data results calculated in step 2 in a one-way output mode, and finally combine one, two, three, and four to realize a multi-terminal layout result preview that can be run by the browser alone, through user input simulation data, and real-time viewing of various graphics and text results and switching schemes, including: Data is displayed in a multi-selection manner. When the user switches plans with the mouse, the data combination is switched through the basic browser events. The graphic display and the final data display are switched using the combination logo. The final combination of one, two, three, and four realizes a multi-terminal typesetting result preview that can be run by the browser alone, through user input of simulated data, and real-time viewing of various graphic and text results and switching plans.

Images