CN112698898A - Method and system for generating thermodynamic diagram snapshot of play box terminal - Google Patents
Method and system for generating thermodynamic diagram snapshot of play box terminal Download PDFInfo
- Publication number
- CN112698898A CN112698898A CN202011594980.4A CN202011594980A CN112698898A CN 112698898 A CN112698898 A CN 112698898A CN 202011594980 A CN202011594980 A CN 202011594980A CN 112698898 A CN112698898 A CN 112698898A
- Authority
- CN
- China
- Prior art keywords
- thermodynamic diagram
- terminal
- target
- gps data
- snapshot
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
- 238000010586 diagram Methods 0.000 title claims abstract description 186
- 238000000034 method Methods 0.000 title claims abstract description 47
- 238000006243 chemical reaction Methods 0.000 claims description 7
- 230000003321 amplification Effects 0.000 claims 1
- 238000003199 nucleic acid amplification method Methods 0.000 claims 1
- 230000005540 biological transmission Effects 0.000 description 2
- 208000028257 Joubert syndrome with oculorenal defect Diseases 0.000 description 1
- 239000008186 active pharmaceutical agent Substances 0.000 description 1
- 230000009286 beneficial effect Effects 0.000 description 1
- 230000000694 effects Effects 0.000 description 1
- 230000014509 gene expression Effects 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/451—Execution arrangements for user interfaces
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/50—Information retrieval; Database structures therefor; File system structures therefor of still image data
- G06F16/51—Indexing; Data structures therefor; Storage structures
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/50—Information retrieval; Database structures therefor; File system structures therefor of still image data
- G06F16/53—Querying
- G06F16/532—Query formulation, e.g. graphical querying
Abstract
The invention provides a method and a system for generating a snapshot of a terminal thermodynamic diagram of a play box, wherein the method comprises the steps of receiving a thermodynamic diagram acquisition instruction of a user, and acquiring GPS data of the terminal of the play box corresponding to the thermodynamic diagram acquisition instruction from a cloud server according to the thermodynamic diagram acquisition instruction; generating target thermodynamic diagram view information by map software at the front end according to the GPS data control of the play box terminal; drawing the target thermodynamic diagram view information as a DOM node to canvas in the front end, and then generating and exporting a terminal thermodynamic diagram snapshot of a target playing box in a picture form; the method and the system provided by the invention can automatically generate the thermodynamic diagram snapshot of the target playing box terminal in the picture form, and are convenient, quick and high in definition.
Description
Technical Field
The invention relates to the field of terminal thermodynamic diagrams, in particular to a snapshot generating method and system for a terminal thermodynamic diagram of a play box.
Background
Currently, a playing box terminal (a playing box, which is connected with a cloud server and receives programs and instructions issued by the cloud server, etc.) connected with an LED display screen is placed in a taxi to control the LED display screen to play programs. The GPS module is arranged in the play box terminal, GPS data of the play box terminal (vehicle) can be uploaded to the cloud server in real time, the front-end browser is connected with the cloud server, the GPS data is obtained according to a user instruction, a thermodynamic diagram view is generated in map software at the front end and displayed on a display page at the front end, the thermodynamic diagram view is dynamically changed in real time, when a user wants to process and analyze the thermodynamic diagram view, the thermodynamic diagram picture is obtained in a manual screenshot mode, the operation is troublesome, and especially when the thermodynamic diagram picture needing to be obtained is more, a large amount of time is wasted in manual screenshot.
Disclosure of Invention
In order to solve the above problems, the present invention provides a method and a system for generating a hotmap snapshot of a play box terminal.
The invention provides a method for generating a thermodynamic diagram snapshot of a play box terminal, which is applied to a front-end browser and comprises the following steps: receiving a thermodynamic diagram acquisition instruction of a user, and acquiring playing box terminal GPS data corresponding to the thermodynamic diagram acquisition instruction from a cloud server according to the thermodynamic diagram acquisition instruction, wherein the thermodynamic diagram acquisition instruction comprises a time range set by the user and one or more playing box terminals, and the playing box terminal GPS data comprises playing box terminal position information and the number of times of the playing box terminals appearing at the same position; generating target thermodynamic diagram view information according to map software called by a playing box terminal GPS data control front end; and drawing the target thermodynamic diagram view information as a DOM node to a canvas in the front end, generating and exporting a terminal thermodynamic diagram snapshot of the target playing box in a picture form, and displaying the exported terminal thermodynamic diagram snapshot of the target playing box in the picture form on a display page of the front end.
Further, drawing the target thermodynamic diagram view information as a DOM node to a canvas in the front end to generate a terminal thermodynamic diagram snapshot of the target playing box in a picture form, including: drawing the target thermodynamic diagram view information as a DOM node to the canvas in the front end through a first API (application program interface) of the canvas to generate a terminal thermodynamic diagram snapshot of a target playing box in a picture form; and derive a picture-wise target playbox terminal thermodynamic diagram snapshot from the canvas through the canvas's second API interface.
Further, the first API interface includes an html2canvas interface, the second API interface includes a format conversion interface and a storage interface with a specified format, where the format conversion interface includes a covertotopng interface, a covertotjpeg interface, a covertotgif interface, and a covertotbmp interface, and the storage interface with the specified format is a saveAsPNG interface, a saveAsJPEG interface, a savaesgif interface, and a savaesbmp interface.
Further, the method further comprises: the canvas is set to allow loading of picture resources meeting the cross-domain resource sharing specification, which are target thermodynamic diagram view information, through the useCORS configuration item in the html2canvas interface associated with the canvas.
Further, the method further comprises: before drawing the target thermodynamic diagram view information as a DOM node to canvas in the front end, converting the target thermodynamic diagram view information into a binary format and storing the binary format locally; the canvas drawing the target thermodynamic diagram view information as DOM nodes into the front end includes the canvas drawing the target thermodynamic diagram view information in binary format as DOM nodes into the front end.
Further, before drawing the target thermodynamic diagram view information as a DOM node to the canvas in the front end, the method further comprises the steps of determining the magnification factor according to the proportion of physical pixels and logical pixels on the equipment, and magnifying the canvas according to the magnification factor; and after the canvas is enlarged, reducing the enlarged canvas by cs, wherein the reduction times are equal to the enlargement times.
Further, the method further comprises: before drawing the target thermodynamic diagram view information as a DOM node to the canvas in the front end, setting the format of the element style associated with the target thermodynamic diagram view information to be a preset uniform format.
Further, the method further comprises the step of displaying the thermodynamic diagram snapshot of the target playing box terminal in the form of the exported picture by adopting an img label when the thermodynamic diagram snapshot of the target playing box terminal is displayed on a display page of the front-end browser.
Further, the method further comprises the step of uploading the exported thermodynamic diagram snapshot of the target playing box terminal in the form of the picture to a cloud server for storage.
The invention also provides a system for generating the thermodynamic diagram snapshot of the playing box terminals, which comprises a plurality of playing box terminals, a front-end browser and a back-end cloud server, wherein: the playing box terminal is arranged on the vehicle, connected with the rear-end cloud server and used for controlling an LED display screen on the vehicle, acquiring GPS data of the position as first GPS data in real time and uploading the first GPS data to the rear-end cloud server; the rear-end cloud server is respectively connected with the play box terminal and the rear-end cloud server, and is used for receiving first GPS data uploaded by the play box terminal, performing precision interception processing on the first GPS data, intercepting the first GPS data to preset precision, storing the first GPS data into the thermodynamic diagram counting table, establishing an index for each piece of first GPS data in the thermodynamic diagram counting table according to uploading time and the uploading play box terminal corresponding to the first GPS data, and generating a thermodynamic diagram search index table; after receiving the thermodynamic diagram acquisition instruction, acquiring an index corresponding to the thermodynamic diagram acquisition instruction from a thermodynamic diagram search index table according to the thermodynamic diagram acquisition instruction, and inquiring in a thermodynamic diagram counting table according to the index to acquire a plurality of pieces of second GPS data corresponding to the thermodynamic diagram acquisition instruction; grouping second GPS data, taking the second GPS data with the same position information as a group of data groups, respectively integrating the second GPS data in each group of data groups into a piece of playing box terminal GPS data, wherein the playing box terminal GPS data comprises playing box terminal position information and the number of times of playing box terminals appearing at the same position, and sending the playing box terminal GPS data to a front-end browser; the front-end browser is connected with the back-end cloud server and used for receiving a thermodynamic diagram acquisition instruction of a user and acquiring playing box terminal GPS data corresponding to the thermodynamic diagram acquisition instruction from the cloud server according to the thermodynamic diagram acquisition instruction, wherein the thermodynamic diagram acquisition instruction comprises a time range determined by the user and one or more playing box terminals, and the playing box terminal GPS data comprises playing box terminal position information and the number of times of the playing box terminals appearing at the same position; generating target thermodynamic diagram view information according to map software called by a playing box terminal GPS data control front end; and drawing the target thermodynamic diagram view information as a DOM node to a canvas in the front end, generating and exporting a terminal thermodynamic diagram snapshot of the target playing box in a picture form, and displaying the exported terminal thermodynamic diagram snapshot of the target playing box in the picture form on a front-end display page.
The method and the system for generating the thermodynamic diagram snapshot of the play box terminal have the following beneficial effects: in a front-end browser, target thermodynamic diagram view information generated in map software is automatically generated into a terminal thermodynamic diagram snapshot of a target playing box in a picture form through a canvas, manual capture by a user is not needed, the method is convenient and rapid, and the picture definition of the generated terminal thermodynamic diagram snapshot of the target playing box is clearer compared with the picture definition of the terminal thermodynamic diagram snapshot of the user.
Drawings
In order to more clearly illustrate the embodiments of the present invention or the technical solutions in the prior art, the drawings used in the description of the embodiments or the prior art will be briefly described below, it is obvious that the drawings in the following description are only some embodiments of the present invention, and for those skilled in the art, other drawings can be obtained according to the drawings without creative efforts.
Fig. 1 is a first flowchart illustrating a first step of a method for generating a thermodynamic diagram snapshot of a play box terminal according to an embodiment of the present invention;
fig. 2 is a flowchart illustrating a second step of a method for generating a thermodynamic diagram snapshot of a play box terminal according to an embodiment of the present invention;
fig. 3 is a flowchart illustrating a third step of a snapshot generating method of a hotbox terminal in the embodiment of the present invention;
fig. 4 is a flowchart illustrating a fourth step of a method for generating a thermodynamic diagram snapshot of a play box terminal according to an embodiment of the present invention;
fig. 5 is a schematic structural diagram of a system for generating a thermodynamic diagram snapshot of a play box terminal according to an embodiment of the present invention;
501-a play box terminal, 502-a front-end browser and 503-a back-end cloud server.
Detailed Description
The technical solutions in the embodiments of the present invention will be described clearly and completely with reference to the accompanying drawings in the present invention, and it is obvious that the described embodiments are only a part of the embodiments of the present invention, and not all of the embodiments. All other embodiments, which can be derived by a person skilled in the art from the embodiments given herein without making any creative effort, shall fall within the protection scope of the present invention.
In an embodiment of the present invention, a method for generating a hotmap snapshot of a play box terminal is provided, where the method is applied in a front-end browser, and as shown in fig. 1, the method includes the following steps:
step S101: receiving a thermodynamic diagram acquisition instruction of a user, and acquiring playing box terminal GPS data corresponding to the thermodynamic diagram acquisition instruction from the cloud server according to the thermodynamic diagram acquisition instruction.
The cloud server stores a large amount of GPS data uploaded by the play box terminals, specifically, the play box terminals are arranged on a vehicle and connected with an LED display screen on the vehicle and the cloud server, and the play box terminals are provided with GPS positioning modules, so that the positions of the play box terminals (vehicles) can be monitored in real time, first GPS data are obtained, and the first GPS data are uploaded to the cloud server. The first GPS data uploaded by each play box terminal corresponds to one upload play box terminal and upload time, after the first GPS data are received by the cloud server, the first GPS data are intercepted to preset precision and then stored in the thermodynamic diagram counting table, and an index is established for each piece of first GPS data in the thermodynamic diagram counting table according to the upload time corresponding to the first GPS data and the upload play box terminal, so that a thermodynamic diagram search index table is generated. Further, the preset accuracy may be set by the technician, for example, the decimal point of the first GPS data is cut off by 3 bits, and the decimal point of the first GPS data is rounded off by Mysql and the number after three bits is cut off (conversion is performed when Mysql acquires the first GPS data field in the thermodynamic count table).
In this embodiment, the thermodynamic diagram acquisition instruction of the user includes a time range determined by the user and one or more play box terminals, each play box terminal has a uniquely determined play box terminal ID, and the play box terminal ID can be selected or input by the user in the display page of the front-end browser to determine the play box terminal GPS data of 1 or several play box terminals that the user needs to acquire within the preset time range.
After receiving the thermodynamic diagram acquisition instruction of the user, the front-end browser may send the thermodynamic diagram acquisition instruction to the cloud server, and acquire, from the cloud server, the playing box terminal GPS data corresponding to the thermodynamic diagram acquisition instruction according to the thermodynamic diagram acquisition instruction (a specific acquisition method is described in detail later, and will not be described in detail here). Specifically, the GPS data of the play box terminal includes position information of the play box terminal and the number of times that the play box terminal appears at the same position.
Step S102: and generating target thermodynamic diagram view information according to the map software called by the GPS data control front end of the play box terminal.
Specifically, the map software may generate the target thermodynamic diagram view information according to the position information of the play box terminal in each piece of play box terminal GPS data and the number of times that the play box terminal appears at the same position, where the number of times that the play box terminal appears at the same position represents the weight at the position, and the greater the number of times, the darker the color reflected at the position on the target thermodynamic diagram view. Further, after the cloud server receives the thermodynamic diagram acquisition instruction, the second GPS data corresponding to the thermodynamic diagram acquisition instruction is acquired according to the thermodynamic diagram acquisition instruction, then the second GPS data is grouped and integrated, the second GPS data with the same position information is used as 1 group, and the number of the second GPS data in each 1 group, that is, the number of times that the play box terminal appears at the same position, is counted in a count addition manner. For example, in the same position: from 0 point to 1 point, the play box terminal appears at the position 1 time, namely 1 piece of second GPS data exists, 1 point-2 points, the play box terminal appears at the position 2 times, namely 2 pieces of second GPS data exist, 3 points-4 points, the play box terminal appears at the position 5 times, namely 5 pieces of second GPS data exist, the sum addition is 8 times of data, in the thermodynamic diagram, the same precise dimension is added for multiple times, and the displayed color is darker, and vice versa.
Step S103: and drawing the target thermodynamic diagram view information as a DOM node to a canvas in the front end, and generating and exporting a terminal thermodynamic diagram snapshot of the target playing box in a picture form.
Furthermore, the target thermodynamic diagram view information can be drawn to the canvas in the front end as a DOM node through a first API (application programming interface) of the canvas, and a terminal thermodynamic diagram snapshot of the target playing box in a picture form is generated; specifically, after determining that overlays such as map polylines, circles and polygons are drawn by SVG through the front end, using html2canvas code statements, SVG (Scalable Vector Graphics), which is an open-standard Vector Graphics language, converts SVG into canvas so as to draw the overlays into canvas, wherein the Graphics display can be arbitrarily enlarged without sacrificing image quality, and can be read and modified by a great number of tools. And then, deriving a picture-form target play box terminal thermodynamic diagram snapshot from the canvas through a second API interface of the canvas, wherein the canvas2image code statement is specifically used.
Further, the first API interface mentioned above includes an html2canvas interface, the second API interface includes a format conversion interface and a format specified storage interface, where the format conversion interface includes a convertToPNG interface, a convertToJPEG interface, a convertToGIF interface, and a convertToBMP interface, and the format specified storage interface includes a saveAsPNG interface, a saveAsJPEG interface, a savaesif interface, and a savaesbmp interface.
Step S104: and displaying the thermodynamic diagram snapshot of the exported target playing box terminal in the form of the picture on a display page at the front end.
In the method for generating the snapshot of the thermodynamic diagram of the play box terminal in the embodiment, the target thermodynamic diagram view information generated in the map software is automatically generated into the snapshot of the thermodynamic diagram of the target play box terminal in the form of a picture through the canvas, so that the snapshot is manually captured by a user, and the method is convenient and fast.
In another embodiment of the present invention, as shown in fig. 2, the method for generating a snapshot of a heat map of a play box terminal further includes:
step S105: setting the canvas allows loading of picture resources that meet the cross-domain resource sharing specification through the useCORS configuration item in the html2canvas interface associated with the canvas.
Only if the domain name, protocol and port are the same resource is the same resource. Often a browser will prohibit one resource from directly accessing another resource of a different domain, protocol, or port. In the present embodiment, the picture resource refers to target thermodynamic diagram view information. Since the picture resources are from the map software, the problem of cross-domain exists when the picture resources are accessed, and the canvas is set to allow the picture resources meeting the cross-domain resource sharing specification to be loaded, so that the cross-domain resources can be obtained, and the cross-domain communication is realized.
In this embodiment, step S105 is set before step S103, before the target thermodynamic diagram view information is drawn as a DOM node to a canvas in the front end, and before a target play box terminal thermodynamic diagram snapshot in a picture form is generated and derived, the canvas is configured to allow loading of picture resources meeting the cross-domain resource sharing specification, thereby implementing the picture cross-domain.
In yet another embodiment of the present invention, as shown in fig. 3, the method further comprises:
step S106: and converting the target thermodynamic diagram view information into a binary format and storing the binary format locally. Specifically, in this embodiment, step S106 is set before step S103, and at this time, step S103 is a canvas drawing the target thermodynamic diagram view information in binary format as a DOM node into the front end, and generates and derives a terminal thermodynamic diagram snapshot of the target playing box in the form of a picture.
By the scheme of converting picture resources to Blob, the connection of base64 is converted into a binary picture, and the binary picture is stored in the local without reloading, so that the address of the picture is ensured to come from the local, and the condition that loading fails (namely the condition that the snapshot is incomplete) is avoided when the snapshot (the intercepted target thermodynamic diagram) is converted. Blob is an opaque reference or handle to a large block of data, the name is derived from the SQL database, representing a binary large object, providing an important data exchange mechanism for a large number of JavaScript APIs for binary data. Base64 is one of the most common encoding methods for transmitting 8-Bit byte codes on a network, and Base64 is a method for representing binary data based on 64 printable characters.
In yet another embodiment of the present invention, as shown in fig. 4, before drawing the target thermodynamic diagram view information as a DOM node to the canvas in the front end, the method further comprises
Step S107: and determining the magnification factor according to the proportion of the physical pixel and the logical pixel on the equipment, and magnifying the canvas according to the magnification factor.
Specifically, the ratio of physical pixels to logical pixels on the device, i.e., devilpixelratio, is a device pixel ratio, and its value is equal to device pixel/device independent pixel, i.e., devilpixelratio — DP/DIP, where DP (device pixel) is also called physical pixel, screen pixel, is the smallest physical unit of the display screen, and is the smallest point that we can see on the screen. In this embodiment, the device pixels here are pixels of the front-end display screen. DIP (device-independent pixel), also called density-independent pixel, is an abstract unit that represents a virtual point in a computer and is a logical pixel.
Step S108: and after the canvas is enlarged, reducing the enlarged canvas by cs, wherein the reduction times are equal to the enlargement times.
CSS refers to a cascading style sheet, english full name: a caching Style Sheets is a computer language used to represent file styles such as HTML (an application of standard generalized markup language) or XML (a subset of standard generalized markup language). The CSS can not only statically modify the web page, but also dynamically format elements of the web page in coordination with various scripting languages.
In this embodiment, for a front-end display screen with high resolution, the cs pixels (which are abstract units used by the browser and belong to the device-independent pixels DIP, and what we see is a result of the browser converting the cs pixels into the device pixels) can be aligned with the physical pixels of the front-end display screen through the above steps, so that the definition is improved to a certain extent when a snapshot of a target play box terminal thermodynamic diagram in the form of a picture is subsequently generated.
In yet another embodiment of the present invention, the method further comprises: before drawing the target thermodynamic diagram view information as a DOM node to the canvas in the front end, setting the format of the element style associated with the target thermodynamic diagram view information to be a preset uniform format. Specifically, the element style associated with the target thermodynamic diagram view information is an element style in units of usage%, vw, vh, rem, and the like, and includes styles such as width, height, font size, and position. In this embodiment, the preset uniform format may be a PX format, and the format of the element style associated with the target thermodynamic diagram information is uniformly set to be the PX format, so that an integer calculation value that is clear to the html2canvas interface can be given, and stretching ambiguity caused by decimal rounding can be avoided.
In yet another embodiment of the present invention, the method further comprises: and when the exported thermodynamic diagram snapshot of the target playing box terminal in the picture form is displayed on a display page of the front-end browser, adopting an img label to display the thermodynamic diagram snapshot of the target playing box terminal. In many cases, the derived picture blur is due to the fact that the picture in the original view is displayed in a background manner in css. While background-size does not feed back the specific width and height values of the picture, but represents the type of scaling of the picture by enumerating values such as continain, cover and the like; therefore, the final generated picture in background mode is blurred. The background is changed into the < img > tag mode for presentation, the < img > tag can set the height and width attributes of the picture, the height and width attributes are designated for the picture, and space can be reserved for the picture when a page is loaded, so that the picture definition can be changed to a certain extent, the presentation effect can be optimized by adopting the img tag to present the thermodynamic diagram snapshot of the target playing box terminal, and the definition is improved.
In yet another embodiment of the present invention, the method further includes uploading the exported thermodynamic snapshot of the target play box terminal in the form of a picture to the cloud server. In this embodiment, the exported thermodynamic diagram snapshot of the target playing box terminal in the form of the picture is uploaded to the cloud server for storage, so that other users can also obtain the thermodynamic diagram snapshot of the target playing box terminal.
The invention further provides a system for generating a thermodynamic diagram snapshot of a play box terminal, as shown in fig. 5, the system includes a plurality of play box terminals 501, a front-end browser 502 and a back-end cloud server 503, wherein the play box terminals 501 are arranged on a vehicle, connected with the back-end cloud server 503, and used for controlling an LED display screen on the vehicle, acquiring GPS data of a position where the play box terminals are located in real time as first GPS data, and uploading the first GPS data to the back-end cloud server 503.
The rear-end cloud server 503 is respectively connected with the play box terminal 501 and the rear-end cloud server 503, and is used for receiving the first GPS data uploaded by the play box terminal 501, performing precision interception processing on the first GPS data, intercepting the first GPS data to a preset precision, storing the first GPS data into the thermodynamic diagram counting table, establishing an index for each piece of first GPS data in the thermodynamic diagram counting table according to uploading time corresponding to the first GPS data and the uploading play box terminal, and generating a thermodynamic diagram search index table; after receiving the thermodynamic diagram acquisition instruction, acquiring an index corresponding to the thermodynamic diagram acquisition instruction from a thermodynamic diagram search index table according to the thermodynamic diagram acquisition instruction, and inquiring in a thermodynamic diagram counting table according to the index to acquire a plurality of pieces of second GPS data corresponding to the thermodynamic diagram acquisition instruction; grouping the second GPS data, taking the second GPS data with the same position information as a group of data groups, respectively integrating the second GPS data in each group of data groups into a piece of playing box terminal GPS data, wherein the playing box terminal GPS data comprises playing box terminal position information and the times of the playing box terminal appearing at the same position, and sending the playing box terminal GPS data to the front-end browser 502. The back end cloud server of the system establishes indexes for each piece of GPS data according to the uploading time of the GPS data and the uploading of the playing box terminal after receiving the GPS data uploaded by the playing box terminal, generates an index table, the index table is established by using sql sentences, so that the operations of increasing, deleting, checking, modifying and the like can be realized through the sql sentences, a subsequent front end browser can quickly inquire corresponding data when acquiring related data according to a thermodynamic diagram acquisition instruction of a user, the cloud server also groups inquired second GPS data corresponding to the thermodynamic diagram acquisition instruction, integrates each group of data, integrates the data into one piece of playing box terminal GPS data and then transmits the playing box terminal GPS data to a front end browser, the front end browser can directly utilize the playing box terminal GPS data to generate target thermodynamic diagram information, the data transmission quantity is reduced, the transmission speed between the cloud server and the front end browser is improved, the workload of the front-end browser is reduced, and the speed of generating the heat map snapshot of the play box terminal by the front-end browser is increased.
The front-end browser 502 is connected with the back-end cloud server 503 and is used for receiving a thermodynamic diagram acquisition instruction of a user and acquiring playing box terminal GPS data corresponding to the thermodynamic diagram acquisition instruction from the cloud server according to the thermodynamic diagram acquisition instruction, wherein the thermodynamic diagram acquisition instruction comprises a time range determined by the user and one or more playing box terminals, and the playing box terminal GPS data comprises playing box terminal position information and the number of times of the playing box terminals appearing at the same position; generating target thermodynamic diagram view information according to map software called by a playing box terminal GPS data control front end; and drawing the target thermodynamic diagram view information as a DOM node to a canvas in the front end, generating and exporting a terminal thermodynamic diagram snapshot of the target playing box in a picture form, and displaying the exported terminal thermodynamic diagram snapshot of the target playing box in the picture form on a front-end display page.
According to the method and the system for generating the thermodynamic diagram snapshot of the playing box terminal, the thermodynamic diagram view information of the target generated in the map software is automatically generated into the thermodynamic diagram snapshot of the target playing box terminal in the picture form through the canvas in the front-end browser, manual interception by a user is not needed, and the method and the system are convenient and quick. And setting the canvas to allow loading of picture resources meeting CORS specifications through a useCORS configuration item in the canvas html2canvas interface so as to realize picture cross-domain. The invention further improves the definition by configuring the canvas size, so that the exported thermodynamic diagram snapshot of the target playing box terminal is clearer, and the subsequent analysis and processing work of the user is facilitated.
The terms and expressions used in the specification of the present invention have been set forth for illustrative purposes only and are not meant to be limiting. The terms "first" and "second" used herein in the claims and the description of the present invention are for the purpose of convenience of distinction, have no special meaning, and are not intended to limit the present invention. It will be appreciated by those skilled in the art that changes could be made to the details of the above-described embodiments without departing from the underlying principles thereof. The scope of the invention is, therefore, indicated by the appended claims, in which all terms are intended to be interpreted in their broadest reasonable sense unless otherwise indicated.
Claims (10)
1. A method for generating a thermodynamic diagram snapshot of a play box terminal is applied to a front-end browser and comprises the following steps:
receiving a thermodynamic diagram acquisition instruction of a user, and acquiring playing box terminal GPS data corresponding to the thermodynamic diagram acquisition instruction from a cloud server according to the thermodynamic diagram acquisition instruction, wherein the thermodynamic diagram acquisition instruction comprises a time range set by the user and one or more playing box terminals, and the playing box terminal GPS data comprises playing box terminal position information and the number of times of the playing box terminals appearing at the same position;
generating target thermodynamic diagram view information according to map software called by the GPS data control front end of the play box terminal;
drawing the target thermodynamic diagram view information as a DOM node to canvas in a front end, and then generating and exporting a terminal thermodynamic diagram snapshot of a target playing box in a picture form;
and displaying the thermodynamic diagram snapshot of the exported target playing box terminal in the form of the picture on a display page at the front end.
2. The method for generating a snapshot of a terminal thermodynamic diagram of a playing box according to claim 1, wherein the drawing the target thermodynamic diagram view information as a DOM node to a canvas in a front end to generate and derive a snapshot of a terminal thermodynamic diagram of a target playing box in a picture form comprises:
drawing the target thermodynamic diagram view information as a DOM node to the canvas in the front end through a first API (application program interface) of the canvas to generate a terminal thermodynamic diagram snapshot of a target playing box in a picture form;
and deriving a target playbox terminal thermodynamic diagram snapshot in picture form from the canvas through a second API interface of the canvas.
3. The method for generating a snapshot of thermodynamic diagrams of a play box terminal according to claim 2, wherein the first API interface includes an html2canvas interface, the second API interface includes a format conversion interface and a storage interface with a specified format, wherein the format conversion interface includes a convertToPNG interface, a convertToJPEG interface, a convertToGIF interface and a convertToBMP interface, and the storage interface with the specified format is a saveAsPNG interface, a savaesjpeg interface, a savaesgif interface and a savaesbmp interface.
4. The method for generating a snapshot of a heat map of a terminal of a play box according to claim 1, further comprising: the canvas is set to allow loading of picture resources meeting cross-domain resource sharing specifications through a useCORS configuration item in an html2canvas interface associated with the canvas, and the picture resources are target thermodynamic diagram view information.
5. The method for generating a snapshot of a heat map of a terminal of a play box according to claim 1, further comprising:
before drawing the target thermodynamic diagram view information as a DOM node to canvas in a front end, converting the target thermodynamic diagram view information into a binary format and storing the binary format locally;
the canvas drawing the target thermodynamic diagram view information as a DOM node into a front end comprises:
and drawing the target thermodynamic diagram view information in the binary format as a DOM node to a canvas in the front end.
6. The method for generating a snapshot of a playlist box terminal thermodynamic diagram of claim 1, wherein before drawing the target thermodynamic diagram view information as a DOM node to a canvas in a front end, the method further comprises:
determining a magnification factor according to the proportion of the physical pixel and the logical pixel on the equipment, and magnifying the canvas according to the magnification factor;
and after the canvas is amplified, reducing the amplified canvas by cs, wherein the reduction times are equal to the amplification times.
7. The method for generating a snapshot of a heat map of a terminal of a play box according to claim 1, further comprising:
before drawing the target thermodynamic diagram view information as a DOM node to a canvas in a front end, setting the format of an element style associated with the target thermodynamic diagram view information to be a preset uniform format.
8. The method for generating a snapshot of a heat map of a terminal of a play box according to claim 1, further comprising:
and when the exported thermodynamic diagram snapshot of the target playing box terminal in the picture form is displayed on a display page of a front-end browser, displaying the thermodynamic diagram snapshot of the target playing box terminal by adopting an img label.
9. The method for generating a snapshot of a heat map of a terminal of a play box according to claim 1, further comprising:
uploading the exported thermodynamic diagram snapshot of the target playing box terminal in the form of the picture to a cloud server for storage.
10. The system for generating the thermodynamic diagram snapshot of the playing box terminals is characterized by comprising a plurality of playing box terminals, a front-end browser and a back-end cloud server, wherein:
the playing box terminal is arranged on a vehicle, connected with the rear-end cloud server and used for controlling an LED display screen on the vehicle, acquiring GPS data of the position as first GPS data in real time and uploading the first GPS data to the rear-end cloud server;
the rear-end cloud server is respectively connected with the play box terminal and the rear-end cloud server, and is used for receiving first GPS data uploaded by the play box terminal, performing precision interception processing on the first GPS data, intercepting the first GPS data to preset precision, storing the first GPS data into a thermodynamic diagram counting table, establishing an index for each piece of first GPS data in the thermodynamic diagram counting table according to uploading time corresponding to the first GPS data and the uploading play box terminal, and generating a thermodynamic diagram search index table; after receiving a thermodynamic diagram acquisition instruction, acquiring an index corresponding to the thermodynamic diagram acquisition instruction from the thermodynamic diagram search index table according to the thermodynamic diagram acquisition instruction, and inquiring in the thermodynamic diagram count table according to the index to acquire a plurality of pieces of second GPS data corresponding to the thermodynamic diagram acquisition instruction; grouping the second GPS data, taking the second GPS data with the same position information as a group of data groups, respectively integrating the second GPS data in each group of data groups into a piece of playing box terminal GPS data, wherein the playing box terminal GPS data comprises playing box terminal position information and the number of times that the playing box terminal appears at the same position, and sending the playing box terminal GPS data to the front-end browser;
the front-end browser is connected with the back-end cloud server and used for receiving thermodynamic diagram acquisition instructions of a user and acquiring playing box terminal GPS data corresponding to the thermodynamic diagram acquisition instructions from the cloud server according to the thermodynamic diagram acquisition instructions, the thermodynamic diagram acquisition instructions comprise a time range determined by the user and one or more playing box terminals, and the playing box terminal GPS data comprise playing box terminal position information and the number of times of the playing box terminals appearing at the same position; generating target thermodynamic diagram view information according to map software called by the GPS data control front end of the play box terminal; and drawing the target thermodynamic diagram view information as a DOM node to a canvas in the front end, generating and exporting a terminal thermodynamic diagram snapshot of the target playing box in a picture form, and displaying the exported terminal thermodynamic diagram snapshot of the target playing box in the picture form on a display page of the front end.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202011594980.4A CN112698898A (en) | 2020-12-29 | 2020-12-29 | Method and system for generating thermodynamic diagram snapshot of play box terminal |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202011594980.4A CN112698898A (en) | 2020-12-29 | 2020-12-29 | Method and system for generating thermodynamic diagram snapshot of play box terminal |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN112698898A true CN112698898A (en) | 2021-04-23 |
Family
ID=75511905
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202011594980.4A Pending CN112698898A (en) | 2020-12-29 | 2020-12-29 | Method and system for generating thermodynamic diagram snapshot of play box terminal |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN112698898A (en) |
Citations (9)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US8225197B1 (en) * | 2011-06-22 | 2012-07-17 | Google Inc. | Rendering approximate webpage screenshot client-side |
| US20130085961A1 (en) * | 2011-09-29 | 2013-04-04 | Oracle International Corporation | Enterprise context visualization |
| US20140173413A1 (en) * | 2012-12-18 | 2014-06-19 | Andres Godoy | Method and system to build a representative model for web pages to interact with users |
| CN104834753A (en) * | 2015-05-28 | 2015-08-12 | 百度在线网络技术（北京）有限公司 | Webpage screenshot generating method and device |
| CN105204853A (en) * | 2015-09-14 | 2015-12-30 | 新浪网技术(中国)有限公司 | Canvas drawing method and device of web browser |
| CN106709960A (en) * | 2015-11-17 | 2017-05-24 | 北京国双科技有限公司 | Image storage method, device and system |
| US20180173683A1 (en) * | 2016-12-15 | 2018-06-21 | Sap Se | Graphics display capture system |
| CN109117448A (en) * | 2017-06-26 | 2019-01-01 | 北京京东尚科信息技术有限公司 | Heating power drawing generating method and device |
| CN109783594A (en) * | 2019-01-09 | 2019-05-21 | 成都路行通信息技术有限公司 | A kind of construction method, the apparatus and system of vehicle thermodynamic chart |
-
2020
- 2020-12-29 CN CN202011594980.4A patent/CN112698898A/en active Pending
Patent Citations (9)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US8225197B1 (en) * | 2011-06-22 | 2012-07-17 | Google Inc. | Rendering approximate webpage screenshot client-side |
| US20130085961A1 (en) * | 2011-09-29 | 2013-04-04 | Oracle International Corporation | Enterprise context visualization |
| US20140173413A1 (en) * | 2012-12-18 | 2014-06-19 | Andres Godoy | Method and system to build a representative model for web pages to interact with users |
| CN104834753A (en) * | 2015-05-28 | 2015-08-12 | 百度在线网络技术（北京）有限公司 | Webpage screenshot generating method and device |
| CN105204853A (en) * | 2015-09-14 | 2015-12-30 | 新浪网技术(中国)有限公司 | Canvas drawing method and device of web browser |
| CN106709960A (en) * | 2015-11-17 | 2017-05-24 | 北京国双科技有限公司 | Image storage method, device and system |
| US20180173683A1 (en) * | 2016-12-15 | 2018-06-21 | Sap Se | Graphics display capture system |
| CN109117448A (en) * | 2017-06-26 | 2019-01-01 | 北京京东尚科信息技术有限公司 | Heating power drawing generating method and device |
| CN109783594A (en) * | 2019-01-09 | 2019-05-21 | 成都路行通信息技术有限公司 | A kind of construction method, the apparatus and system of vehicle thermodynamic chart |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN107015948B (en) | Log information formatting method and system | |
| CN107092625B (en) | Data configuration method, data processing method and device | |
| CN111553131B (en) | PSD file analysis method, device, equipment and readable storage medium | |
| CN112102437B (en) | Canvas-based radar map generation method and device, storage medium and terminal | |
| US9117314B2 (en) | Information output apparatus, method, and recording medium for displaying information on a video display | |
| CN101201832A (en) | Method and system for optimizing web page image | |
| CN109472852B (en) | Point cloud image display method and device, equipment and storage medium | |
| CN112686015A (en) | Chart generation method, device, equipment and storage medium | |
| CN110825731A (en) | Data storage method and device, electronic equipment and storage medium | |
| CN109656652B (en) | Webpage chart drawing method, device, computer equipment and storage medium | |
| US10467332B2 (en) | Graphics display capture system | |
| CN111223155A (en) | Image data processing method, image data processing device, computer equipment and storage medium | |
| CN111428452B (en) | Annotation data storage method and device | |
| CN112698898A (en) | Method and system for generating thermodynamic diagram snapshot of play box terminal | |
| CN116245052A (en) | Drawing migration method, device, equipment and storage medium | |
| CN113220381A (en) | Click data display method and device | |
| CN115904152A (en) | HTML 5-based flow chart drawing method, device, equipment and storage medium | |
| CN113763514B (en) | Method, device and system for generating stroke order animation and electronic equipment | |
| CN115238659A (en) | Report data processing method and device | |
| CN110928540A (en) | Page generation method and device | |
| CN115170695A (en) | Method and device for generating chart picture, electronic equipment and storage medium | |
| CN113038184B (en) | Data processing method, device, equipment and storage medium | |
| CN110909098A (en) | Cloud geographic information data analysis method and system | |
| CN111143018A (en) | Front-end image rendering method and device and electronic equipment | |
| CN111338941B (en) | Information processing method and device, electronic equipment and storage medium |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| CB02 | Change of applicant information | ||
| CB02 | Change of applicant information |
Address after: 518000 integrated circuit Industrial Park 101, No. 1089, chaguang Road, Xili street, Shenzhen City, Guangdong Province Applicant after: Carlette (Shenzhen) cloud Technology Co.,Ltd. Address before: Room 3801, block a, block 8, block C, Wanke Yuncheng phase III, Liuxin Fourth Street, Xili community, Nanshan District, Shenzhen City, Guangdong Province (37-39 floors) Applicant before: COLORLIGHT (SHENZHEN) CLOUD TECHNOLOGY Co.,Ltd. Address after: Room 3801, block a, block 8, block C, Wanke Yuncheng phase III, Liuxin Fourth Street, Xili community, Nanshan District, Shenzhen City, Guangdong Province (37-39 floors) Applicant after: Carlette cloud Technology Co.,Ltd. Address before: 518000 integrated circuit Industrial Park 101, No. 1089, chaguang Road, Xili street, Shenzhen City, Guangdong Province Applicant before: Carlette (Shenzhen) cloud Technology Co.,Ltd. |
|
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| RJ01 | Rejection of invention patent application after publication | ||
| RJ01 | Rejection of invention patent application after publication |
Application publication date: 20210423 |