A web-based waveform drawing and display method

Abstract

The present invention relates to the technical field of integrated circuit design, and specifically to a method for drawing and displaying waveforms based on the web, including the following steps: 1. Open a file, parse the file content into waveform data, and encapsulate the waveform data; 2. Preprocess the waveform data, initialize the global instance waveGraph and the canvas; 3. Draw the signal display list, signal grouping, signal bits, signal buses, time scales, toolbars, and shortcut menus respectively; 4. Bind and listen to signal operation events and toolbar events respectively; 5. Render and display, layer-render the added graphic elements, and update the rendering when there is data change. The present invention is based on a web browser, without the need to install a client. The waveforms are drawn through the canvas, and the graphics are composed of pixels, providing good performance on a small surface or a large number of node objects. After drawing, the waveforms also support the export of picture snapshots.

Description

Technical Field

[0001] The present invention relates to the technical field of integrated circuit design, and particularly relates to a method for drawing and displaying waveforms based on the web. Background Art

[0002] Currently, the mainstream way of drawing and displaying waveforms in digital integrated circuits is in the form of client software. The waveform drawing consists of shapes and depends on the underlying C++ library, providing better performance when the number of node objects is small or the surface is large. However, when the number of drawn node objects is too large, there are problems such as slow rendering, lack of dynamic interaction, and monotonous graphical interface styles. The software installation file is relatively large, the installation takes time, and the program operation also depends on the client environment. Usually, this process requires considering many factors and processing tasks, which is very time-consuming and energy-consuming. Therefore, it is necessary to improve the existing drawing and display methods. Summary of the Invention

[0003] The present invention provides a method for drawing and displaying waveforms based on the web to solve the technical problem that waveform drawing in the prior art is very time-consuming and energy-consuming.

[0004] To achieve the above object, the technical solution of the present invention is realized as follows:

[0005] The present invention provides a method for drawing and displaying waveforms based on the web, including the following steps:

[0006] Step S1: Open the VCD waveform file, parse the VCD waveform file and extract waveform data, and encapsulate the extracted waveform data;

[0007] Step S2: Preprocess the encapsulated waveform data, initialize the waveform drawing and display system, define the global instance waveGraph, and initialize the Canvas canvas in the Web browser;

[0008] Step S3: Draw each graphic element in the Canvas canvas. The graphic elements include a signal display list, a drawn signal group, a drawn signal bit, a drawn signal bus, a drawn time scale, a drawn toolbar, a drawn shortcut menu, signal annotation, a background, grid lines, and a scroll bar;

[0009] Step S4: Bind and listen to signal operation events and toolbar events in the waveform drawing and display system respectively to complete the event binding of the waveform drawing and display system;

[0010] Step S5: Hierarchically render the already drawn graphic elements in the waveform drawing and display system with event binding, and update the rendering when there is data change.

[0011] Further, the specific steps of the step S1 include:

[0012] Step S11: Open the VCD waveform file and parse the waveform data line by line using regular expressions. The parsing process is as follows: Use regular expressions to extract the header information, variable definitions, and value change information in the VCD file content respectively.

[0013] Step S12: Split the waveform data into two parts and encapsulate them into a signal tree structure list and a signal value hash object respectively.

[0014] Further, the header information in step S11 includes version information and time precision. The version information and time precision are respectively contained within the "version" and "timescale" keywords, and each part is indicated by the "end" keyword at the end.

[0015] The variable definitions in step S11 form a module hierarchy between the "scope" and "upscope" keywords. Different module hierarchies can be formed through the nesting of these two keywords. The variable definitions are indicated by the "enddefinitions" keyword to end the variable definitions.

[0016] When extracting the value change information in step S11 using regular expressions, first judge the character "#" at the beginning of the VCD file content line, and then use regular expressions to extract the name, time, and change value. Calculate and summarize by noun through the hash table structure, and output the converted JSON waveform data.

[0017] Further, step S2 specifically includes the following steps:

[0018] Step S21: Load the JSON waveform data, set the line height of each line of the waveform to a fixed pixel, and establish a mapping relationship between the maximum width of the display area and the maximum time of the signal.

[0019] Step S22: Calculate the signal IDs for which the waveform data needs to be loaded according to the screen size.

[0020] Step S23: Asynchronously load data from the signal value hash object according to the signal IDs.

[0021] Step S24: Define the entire waveform drawing and display system as a global instance WaveGraph.

[0022] After the JSON waveform data is loaded, create a new Canvas canvas and execute the WaveGraph.initCanvas function to initialize the entire layer of the Canvas canvas, including the background layer, display list layer, signal main display area, static layer, etc. The background layer is directly initialized to the color configured by the user.

[0023] Further, step S3 specifically includes the following steps:

[0024] Step S31: Draw a signal display list;

[0025] Step S32: Draw signal grouping;

[0026] Step S33: Draw signal bits;

[0027] Step S34: Draw signal buses;

[0028] Step S35: Draw time scales;

[0029] Step S36: Draw toolbars;

[0030] Step S37: Draw shortcut menus.

[0031] Further, the specific steps of the step S31 are as follows:

[0032] Step S311: The user selects to add a signal to the display list, and draws the signal display list according to the hierarchical structure of the signal tree. Its row height is consistent with the height of the signal display area, and each row is aligned;

[0033] Step S312: Add the constructed graphic object to the display list layer, and keep and record the signal IDs displayed on the current screen in the displayed list, and clear the list when exiting the waveform drawing and display system.

[0034] Further, the specific steps of the step S33 are as follows:

[0035] Step S331: Draw signals of type wrie and bit width of the first threshold as signal bits;

[0036] Step S332: Traverse the entire signal list to draw signal bits one by one, add a mouse click interaction event to it, and add the entire signal bit to the signal display layer of the Canvas canvas after drawing.

[0037] Further, the specific steps of the step S34 are as follows:

[0038] Step S341: Draw signals of type bus and bit width greater than the second threshold as signal buses;

[0039] Step S342: Traverse the entire signal display list to draw bus signals one by one, add a mouse click interaction event to it, and add the entire bus signal to the signal display layer of the canvas after drawing.

[0040] Further, the specific steps of the step S4 are as follows:

[0041] Step S41: Bind the context right-click event of the browser and register the corresponding right-click menu processing function;

[0042] Step S42: Bind the scroll bar event of the browser;

[0043] Step S43: Register common function buttons through the command line mode.

[0044] Furthermore, step S5 specifically includes the following steps:

[0045] Step S51: Call the WaveGraph.rander function, add it layer by layer to the global instance waveGraph and render it layer by layer;

[0046] Step S52: When the user clicks the scroll bar, queries signals according to the signal display list and time value, clicks the zoom in or zoom out operation, or the signal tree structure list changes, return to step S3, redraw each graphic element in the Canvas canvas. After the drawing is completed, call the update function of the global instance WaveGraph, clear the old data layer by layer, and then update the changed data.

[0047] Advantages of the present invention:

[0048] 1. The present invention is based on a web browser without installing a client. The waveform is drawn through a canvas, and the graphics are composed of pixels, which can provide better performance on a smaller surface or a larger number of node objects;

[0049] 2. The present invention supports the display of multi-level and multi-type signal grouping of signals, and dynamically adjusts signal grouping, addition, deletion, and dragging. The display styles are rich, and the color, display base, and display icon can be customized. The data sources are diverse, supporting the import and export of VCD files; the drawn waveform also supports the export of picture snapshots. Description of the Drawings

[0050] Figure 1 is the workflow diagram of the present invention;

[0051] Figure 2 is the construction flowchart of the present invention. Detailed Embodiments

[0052] The present invention will be further described in detail below with reference to the accompanying drawings and specific embodiments.

[0053] In the description of the present invention, it should be noted that unless otherwise clearly specified and limited, the terms "installation", "connection", and "connection" should be understood in a broad sense. For example, it can be a fixed connection, a detachable connection, or an integral connection; it can be a mechanical connection or an electrical connection; it can be directly connected, or indirectly connected through an intermediate medium; it can be the communication inside two components. For those of ordinary skill in the art, the specific meanings of the above terms in the present invention can be understood through specific situations.

[0054] In addition, descriptions such as "first", "second", etc. in the present invention are for descriptive purposes only, and cannot be construed as indicating or implying their relative importance or implicitly specifying the quantity or order of the indicated technical features. Thus, features defined with "first", "second" may explicitly or implicitly include at least one such feature. In the description of the present invention, "a plurality of" means at least two, such as two, three, etc., unless otherwise specifically defined.

[0055] Refer to Figure 1 , the embodiments of the present application provide a web-based waveform drawing and display method, including the following steps:

[0056] Step S1: Open the VCD (value change dump) waveform file, parse the VCD waveform file and extract waveform data, and encapsulate the extracted waveform data;

[0057] Step S2: Preprocess the encapsulated waveform data. The function of the preprocessing is to convert the waveform data into a specified file format, and then initialize the waveform drawing and display system, define the global instance name waveGraph, and initialize the Canvas canvas in the Web browser;

[0058] Step S3: Draw each graphic element in the Canvas canvas. The graphic elements include a signal display list, a drawn signal group, a drawn signal bit, a drawn signal bus, a drawn time scale, a drawn toolbar, a drawn shortcut menu, signal annotation, a background, grid lines, and a scroll bar;

[0059] Step S4: Bind and listen for signal operation events and toolbar events in the waveform drawing and display system respectively to complete the event binding of the waveform drawing and display system;

[0060] Step S5: Hierarchically render the drawn graphic elements in the waveform drawing and display system with event binding completed, and update the rendering when there is a data change.

[0061] In this embodiment, the specific steps of step S1 are as follows:

[0062] Step S11: Open the VCD waveform file and parse the waveform data line by line using regular expressions; the parsing process is as follows: use regular expressions to extract the header information, variable definitions, and value change information in the VCD file content respectively;

[0063] After parsing, its output format is as follows:

[0064] interface ParsedData{

[0065] date: string; / / Time

[0066] version: string; / / Version

[0067] timescale: string; / / Simulation accuracy

[0068] endTime: number; / / Total simulation duration

[0069] scale: string; / / Scaling factor

[0070] dumpvars: string[]; / / dumpvars name values

[0071] signals: { / / Signals

[0072] id: string; / / Signal ID full path

[0073] name: string; / / Signal name

[0074] type: string; / / Signal type

[0075] bits: number; / / Bit width

[0076] refId: string; / / ref name

[0077] module: string; / / Module name

[0078] path: string; / / Signal path

[0079] waves: []; / / Signal change values

[0080] parentId: string; / / Signal parent node

[0081] }[];

[0082] Step S12: Split the waveform data into two parts and encapsulate them into a signal tree structure list and a signal value hash object respectively;

[0083] Its encapsulation format is as follows:

[0084] / / Signal tree structure list

[0085] Interface SignalTreeNode{

[0086] "id": "<signal id>",

[0087] "name":"<signal name>",

[0088] "type":"<wire|bus|group>",

[0089] "bits":"<bit width of signal(integer)>"},

[0090] "children":["<signal records>"],}

[0091] The display area of the waveform plotting and display system includes a signal tree structure list, a signal display list, a signal display area, and a toolbar;

[0092] The signal tree structure list is used to display the hierarchical structure of the signal tree;

[0093] The signal display list is used to display the signals that the user selects to be displayed; the signal display list has two field names and values. When clicking on the value at a certain moment on the time scale, the signal bit value in the display list can be updated;

[0094] The signal display area is used to display the user's signal objects, including signal groups, signal bits, and signal buses;

[0095] The toolbar is used to place the quick buttons for the operation functions related to the user's signal search.

[0096] / / Signal value hash object

[0097] Interface WaveDataMap{

[0098] "<signal id>":[[time,value,fillValue],…],

[0099] }

[0100] In this embodiment, the header information in step S12 includes version information and time precision. The version information and time precision are respectively included within the keywords version and timescale, and each part is indicated by the keyword end;

[0101] The variable definition in step S11 constitutes a module level between the keywords scope and upscope. Different module levels can be formed through the nesting of these two keywords; the variable definition is indicated by the keyword enddefinitions to end the variable definition;

[0102] When the value change information in step S11 is advanced by the regular expression, first judge the character # at the beginning of the content line of the VCD file, and then advance the name, time, and change value by the regular expression. Calculate by summarizing nouns through the hash table structure, and output the converted JSON waveform data.

[0103] In this embodiment, step S2 specifically includes the following steps:

[0104] Step S21: Load the JSON waveform data, set the line height of each line of the waveform to 25 px pixels, establish a mapping relationship between the maximum width of the display area and the maximum time of the signal. This value is a type of linear mapping; when the input time is given, return the position value of the mapped screen.

[0105] The specific process of step S21 is as follows: Set the height of each line of the waveform to 25 px pixels, the height of the signal low level 0 is 0 px pixels; the height of the high level 1 is 25 px pixels; the start time value of the waveform corresponds to the leftmost start position of the screen display area; the end time value of the waveform corresponds to the rightmost position of the screen display area; establish a linear mapping relationship according to the time value and the screen width. When a signal time value is input, return the position where the signal is drawn on the screen through linear calculation;

[0106] Step S22: Calculate the signal IDs of the waveform data that need to be loaded according to the screen size;

[0107] Step S23: Asynchronously load data from the signal value hash object according to the signal ID;

[0108] Step S24: Define the entire waveform drawing and display system as a global instance WaveGraph, which manages the entire view. Each view is composed of multiple layers stacked on top of each other. Each layer is regarded as a drawing paper, and multiple signal groups can be drawn inside the layer. The signal groups include single signal bits, bus signals, signal values, text, lines, pictures, icons, symbols, etc.;

[0109] After the JSON waveform data is loaded, create a new Canvas canvas, execute the WaveGraph.initCanvas function to initialize the entire layer, including the background layer, display list layer, signal main display area, static layer, etc.; the background layer is directly initialized to the color configured by the user.

[0110] In this embodiment, step S3 specifically includes the following steps:

[0111] Step S31: Draw the signal display list;

[0112] In this embodiment, step S31 specifically includes the following steps:

[0113] Step S311: The user selects to add a signal to the signal display list, and draws the signal display list according to the signal tree hierarchy. The line height is the same as the height of the signal area, both being 25px, and each line is aligned.

[0114] Step S312: Add the constructed graphic object to the display list layer, and keep and record the signal ID currently displayed on the screen in the displayed list, and clear the list when exiting the waveform drawing display system.

[0115] Step S32: Draw signal grouping.

[0116] When there are many simulated waveforms, the display is rather chaotic. To view the waveforms more conveniently, the waveforms with different functions can be grouped, and the corresponding signals are added to the corresponding groups. Click the "Delete" grouping button to dissolve the grouping. The grouping type is selected as the bus type. It is necessary to deduce the dataWave of the bus bus grouping from the sub-signals, and add a mouse click interaction event to each line.

[0117] Step S33: Draw signal bits.

[0118] In this embodiment, the step S33 specifically includes the following steps:

[0119] Step S331: Draw the signal with the type of wrie and the bit width being the first threshold as a signal bit; linearly map the position on the x-axis of the screen according to time, and determine the position on the y-axis according to value. The height of the low level is 0, the height of the high level is 25px, the length is equal to the next position minus the current position, and the bgFill value is 1 to fill the background; the first threshold is specifically 1.

[0120] Step S332: Traverse the entire signal list to draw signal bits one by one, add a mouse click interaction event to them, and add the entire signal bit to the signal display layer of the Canvas canvas after drawing.

[0121] Step S34: Draw signal buses.

[0122] In this embodiment, the step S34 specifically includes the following steps:

[0123] Step S341: Draw the signal with the type of bus and the bit width greater than the second threshold as a signal bus; linearly map the position on the x-axis of the screen according to time, the height is 25px, the length is equal to the next position minus the current position, and the bgFill value is 1 to fill the background; value is directly displayed as a text label according to the binary configuration, and if there is no value, it is directly represented by X; the second threshold is specifically 1.

[0124] Step S342: Traverse the entire signal list, draw bus signals one by one, add mouse click interaction events to them, and after drawing, add the entire bus signal to the signal display layer of the canvas.

[0125] Step S35: Draw time scales;

[0126] Calculate the current display unit according to the interval of the minimum and maximum values of the mapping relationship; then divide the timeRange into 10 or 100 parts of the current unit, and mark a scale line every 10 parts. Click on the scale line to add a Mark.

[0127] Step S36: Draw a toolbar;

[0128] The toolbar is specifically added to the static layer, and the time range does not need to update this layer; some common buttons are placed on the toolbar such as:

[0129]

Zoom In

[0130]

Zoom Out

[0131]

Fit to Size

[0132]

Start Position

[0133]

End Position

[0134]

Find Forward

[0135]

Find Backward

[0136]

Mark

[0137]

Find Forward Mark

[0138]

Find Backward Mark

[0139]

Export Waveform VCD

[0140]

Export Waveform Diagram

[0141]

Time Interval Search

[0142] Step S37: Draw a shortcut menu.

[0143] When selecting a signal bit and a signal bus, a right - click shortcut menu pops up. The right - click menu supports setting color styles, data formats, signal styles, deleting displays, and clearing displays.

[0144] The selected signal and the value of the treeList update the value at time

[0145] In this embodiment, step S4 specifically includes the following steps:

[0146] Step S41: Bind the right-click event of the browser context and register the corresponding right-click menu processing function;

[0147] Step S42: Bind the scroll bar event of the browser; the event is used to respond to the user's operation behavior. One event is assigned one handler. The handler runs when the user behavior occurs. Such as when the user clicks the mouse, double-clicks, clicks the button on the toolbar, etc.

[0148] Step S43: Register common function buttons in the command line mode, and call the corresponding registration function to trigger the function when clicked.

[0149] In this embodiment, step S5 specifically includes the following steps:

[0150] Step S51: Call the WaveGraph.rander function, add it layer by layer to the global instance waveGraph and render it layer by layer;

[0151] Step S52: When the user clicks the scroll bar, queries the signal according to the signal display list and time value, clicks the zoom in or out operation, or the signal tree structure list changes, return to step S3, redraw each graphic element in the Canvas canvas. After the drawing is completed, call the update function of the global instance WaveGraph, clear the old data layer by layer, and then update the changed data.

[0152] The present invention does not require installing a client based on a web browser. The waveform is drawn through a canvas, and the graphics are composed of pixels, which can provide better performance on a smaller surface or a larger number of node objects. The signals are grouped and displayed in multiple levels and types, and the signals can be dynamically adjusted for grouping, adding, deleting, and dragging. The display styles are rich, and the colors, display bases, and display icons can be customized. The data sources are diverse, supporting the import and export of VCD files; the waveform after drawing also supports the export of picture snapshots.

[0153] As described above, it is only the specific implementation manner of the present invention, but the protection scope of the present invention is not limited thereto. Any person skilled in the art within the technical scope disclosed by the present invention can easily think of changes or substitutions, which should all be covered within the protection scope of the present invention. Moreover, the technical solutions between various embodiments of the present invention can be combined with each other, but it must be based on the ability of those of ordinary skill in the art to implement. When the combination of technical solutions results in contradictions or cannot be implemented, it should be considered that such a combination of technical solutions does not exist and is not within the protection scope required by the present invention. Therefore, the protection scope of the present invention shall be subject to the protection scope of the claims described above.

Claims

1. A web-based waveform drawing and display method, characterized in that It includes the following steps: Step S1: Open the VCD waveform file, parse the VCD waveform file and extract the waveform data, and encapsulate the extracted waveform data; Step S2: Preprocess the encapsulated waveform data, initialize the waveform drawing and display system, define the global instance waveGraph, and initialize the Canvas canvas in the Web browser; Step S3: Draw each graphic element in the Canvas canvas; Step S4: Bind and listen to the signal operation event and the toolbar event in the waveform drawing and display system respectively to complete the event binding of the waveform drawing and display system; Step S5: Render the drawn graphic elements in layers in the waveform drawing and display system with event binding completed, and update the rendering when there is data change; The specific steps of step S2 include the following steps: Step S21: Load the converted JSON waveform data, set the line height of each line of the waveform to a fixed pixel, and establish the mapping relationship between the maximum width of the signal display area and the maximum time of the signal; Step S22: Calculate the signal ID for which the waveform data needs to be loaded according to the screen size; Step S23: Asynchronously load data from the signal value hash object according to the signal ID; Step S24: Define the waveform drawing and display system as the global instance WaveGraph; Step S25: After the JSON waveform data is loaded, create a new Canvas canvas, execute the WaveGraph.initCanvas function to initialize the entire layer of the Canvas canvas, including the background layer, the display list layer, the main signal display area, and the static layer; the background layer is directly initialized to the color configured by the user; The specific steps of step S4 include the following steps: Step S41: Bind the context right-click event of the browser and register the corresponding right-click menu processing function; Step S42: Bind the scroll bar event of the browser; Step S43: Register the common function buttons through the command line mode; The specific steps of step S5 include the following steps: Step S51: Call the WaveGraph.rander function, add it to the global instance waveGraph layer by layer and render it in layers; Step S52: When the user clicks the scroll bar, queries the signal according to the signal display list and the time value, clicks the zoom in, zoom out operation, or the signal tree structure list changes, return to step S3, redraw each graphic element in the Canvas canvas, and after the drawing is completed, call the update function of the global instance WaveGraph to clear the old data layer by layer and then update the changed data.

2. The web-based waveform drawing and display method according to claim 1, wherein The specific steps of step S1 include the following steps: Step S11: Open the VCD waveform file and parse the waveform data line by line using regular expressions; the parsing process is: use regular expressions to extract the header information, variable definitions, and value change information in the VCD file content respectively; Step S12: Split the waveform data into two parts and encapsulate them into a signal tree structure list and a signal value hash object respectively.

3. The web-based waveform drawing and display method according to claim 2, wherein The header information in step S11 includes version information and time precision. The version information and time precision are respectively included within the keywords "version" and "timescale", and each part is indicated by the keyword "end" at the end; The variable definitions in step S11 form a module hierarchy between the keywords "scope" and "upscope", and different module hierarchies are formed through the nesting of these two keywords; the variable definitions are indicated by the keyword "enddefinitions" to mark the end of the variable definitions; When the value change information in step S11 is advanced by a regular expression, first judge the character "#" at the beginning of the content line of the VCD file, and then advance the name, time, and changed value with a regular expression, and calculate by summarizing nouns in a hash table structure to output the converted JSON waveform data.

4. The web-based waveform drawing and display method according to claim 1, wherein The specific steps of step S3 are as follows: Step S31, draw a signal display list; Step S32, draw signal grouping; Step S33, draw signal bits; Step S34, draw signal buses; Step S35, draw time scales; Step S36, draw toolbars; Step S37, draw shortcut menus.

5. The web-based waveform drawing and display method according to claim 4, wherein The specific steps of step S31 are as follows: Step S311, the user selects to add a signal to the signal display list, and draw the signal display list according to the hierarchical structure of the signal tree, with its row height consistent with the height of the signal area and aligned in each row; Step S312, add the constructed graphic object to the display list layer, and keep and record the signal IDs currently displayed on the screen in the displayed list, and clear this list when exiting the waveform drawing and display system.

6. The web-based waveform drawing and display method according to claim 4, wherein The specific steps of step S33 are as follows: Step S331, draw signals of type "wrie" and with a bit width of the first threshold as signal bits; Step S332, traverse the entire signal display list, draw signal bits one by one, and add a mouse click interaction event to it. After drawing, add the entire signal bit to the signal display layer of the Canvas canvas.

7. The web-based waveform drawing and display method according to claim 4, characterized in that: The specific steps of step S34 are as follows: Step S341, draw signals of type "bus" and with a bit width greater than the second threshold as signal buses; Step S342, traverse the entire signal list and draw bus signals one by one, and add a mouse click interaction event to it. After drawing, add the entire bus signal to the signal display layer of the canvas.

Images