CN110533746B - Method, device, device and storage medium for generating responsive hotspot view - Google Patents

Abstract

The invention discloses a method for generating a responsive hot spot view of a storage device, comprising: receiving a vector drawing instruction and a device view, wherein the device view is a picture obtained by photographing a device component; and generating a hot spot area delimiting the device view on the device view to obtain the hotspot view with the device view as the background; according to the device component type corresponding to the device view contained in the vector drawing instruction, name the hotspot view according to the predetermined naming rules, and export the hotspot view in SVG format. In the present application, a vector drawing tool is used to obtain a hotspot view with the real image of the device component as the background. When the user zooms the hotspot view, the relative positioning of the hotspot image can be realized to avoid the problem of the positional deviation of the hotspot image. The present application also provides an apparatus, device, and computer-readable storage medium for generating a responsive hotspot view of a storage device, which have the above beneficial effects.

Description

Method, apparatus, device and storage medium for generating responsive hotspot view

technical field

The present invention relates to the field of computer technologies, and in particular, to a method, apparatus, device, and computer-readable storage medium for generating a responsive hotspot view of a storage device.

Background technique

In the storage management software, in order to more intuitively present the key components of the storage device, such as the controller, fan, battery, and various ports, the device view can be presented to the user on the display interface for the user's reference. When the mouse hovers or clicks on the device view of a component, the component can be highlighted by adding a special emphasis style, and a response event can be added to it.

However, in the traditional device view, when the mouse is hovered or clicked, if the entire image is zoomed and zoomed, the hotspot will be offset and confused, making it difficult for the user to accurately select the hotspot area.

SUMMARY OF THE INVENTION

The purpose of the present invention is to provide a method, apparatus, device and computer-readable storage medium for generating a responsive hotspot view of a storage device, which solves the problem that it is difficult for a user to accurately select a hotspot area when the hotspot view of the device is zoomed.

In order to solve the above technical problems, the present invention provides a method for generating a responsive hotspot view of a storage device, including:

receiving a vector drawing instruction and a device view, wherein the device view is a picture obtained by photographing a device component;

generating a line delineating the hotspot area of the device view on the device view to obtain a hotspot view with the device view as a background;

According to the device component type corresponding to the device view included in the vector drawing instruction, the hotspot view is named according to a predetermined naming rule, and the hotspot view in SVG format is exported.

Wherein, the pixel width of the device view is more than 1600px.

Wherein, the generating, on the device view, a line delineating the hotspot area of the device view includes:

An edge line of the device view is identified, and a line encircling the hot spot area is generated along the edge line of the device view.

Wherein, after exporting the hotspot view in SVG format, the method further includes:

Identifying the hotspot view according to the name of the hotspot view;

The identified hotspot view is bound to a corresponding event, as well as the functions of hovering and clicking effects of the hotspot image.

The present application also provides an apparatus for generating a responsive hotspot view of a storage device, including:

an instruction receiving module for receiving vector drawing instructions and a device view, wherein the device view is a picture obtained by photographing a device component;

a view generation module, configured to generate a line delimiting a hotspot area of the device view on the device view, and obtain a hotspot view with the device view as a background;

A naming and exporting module, configured to name the hotspot view according to a predetermined naming rule according to the device component type corresponding to the device view included in the vector drawing instruction, and export the hotspot view in SVG format.

Among them, including:

The pixel width of the device view received by the instruction receiving module is more than 1600px.

Wherein, the view generation module is specifically configured to identify the edge line of the device view, and generate a line delineating the hot spot area along the edge line of the device view.

It also includes a function binding module for identifying the hotspot view according to the name of the hotspot view; binding the identified hotspot view to a corresponding event, as well as the hovering and clicking effects of the hotspot image function.

The present application also provides a device for generating a responsive hotspot view of a storage device, including:

memory for storing computer programs;

The processor is configured to execute the computer program to implement the steps of the method for generating a responsive hotspot view of a storage device according to any one of the above.

The present application also provides a computer-readable storage medium, where a computer program is stored on the computer-readable storage medium, and when the computer program is executed by a processor, realizes the responsive hotspot view of the storage device according to any one of the above The steps of the generation method method.

The method for generating a responsive hotspot view of a storage device provided by the present invention includes: receiving a vector drawing instruction and a device view, wherein the device view is a picture obtained by shooting a device component; line to obtain the hotspot view with the device view as the background; according to the device component type corresponding to the device view contained in the vector drawing instruction, name the hotspot view according to the predetermined naming rules, and export the hotspot view in SVG format.

In this application, a vector drawing tool is used to draw a hotspot area on the device view to obtain a hotspot view with the device view as a background picture, wherein the device view is an image obtained by photographing a device component, and the user performs the hotspot view on the hotspot view. When zooming, the relative positioning of the hotspot image can be realized to avoid the problem of the positional deviation of the hotspot image; at the same time, the image captured by the device components is used as the background, which is conducive to the user's identification of the hotspot view and enhances the availability of the hotspot view. Readability, provides convenience for user operations and improves user experience.

The present application also provides an apparatus, device, and computer-readable storage medium for generating a responsive hotspot view of a storage device, which have the above beneficial effects.

Description of drawings

In order to more clearly illustrate the embodiments of the present invention or the technical solutions of the prior art, the following will briefly introduce the accompanying drawings used in the description of the embodiments or the prior art. Obviously, the drawings in the following description are only For some embodiments of the present invention, for those of ordinary skill in the art, other drawings can also be obtained according to these drawings without creative efforts.

1 is a schematic flowchart of a method for generating a responsive hotspot view of a storage device according to an embodiment of the present invention;

2 is a structural block diagram of an apparatus for generating a responsive hotspot view of a storage device according to an embodiment of the present invention;

FIG. 3 is a schematic structural diagram of a device for generating a responsive hotspot view of a storage device according to an embodiment of the present invention.

Detailed ways

The core of the present invention is to provide a method, apparatus, device and computer-readable storage medium for generating a responsive hotspot view of a storage device, which solves the problem of inaccurate positioning after the hotspot view is zoomed.

In order to make those skilled in the art better understand the solution of the present invention, the present invention will be further described in detail below with reference to the accompanying drawings and specific embodiments. Obviously, the described embodiments are only some, but not all, embodiments of the present invention. Based on the embodiments of the present invention, all other embodiments obtained by those of ordinary skill in the art without creative efforts shall fall within the protection scope of the present invention.

As shown in FIG. 1, FIG. 1 is a schematic flowchart of a method for generating a responsive hotspot view of a storage device according to an embodiment of the present invention, and the method may include:

Step S11: Receive vector drawing instructions and device views.

Specifically, when the user draws the hotspot view, after starting the vector drawing tool, the user can directly input the device view. The vector drawing tool can be Adobe Illustrator drawing software or CorelDRAW drawing software.

Wherein, the device view in this embodiment is a picture obtained by photographing a device component, and the device component may specifically be a controller, a fan, a battery, and the like.

It should be noted that the device view in this application may also be a picture drawn by a drawing tool, or even a schematic diagram of a device component. However, in order to reduce the difficulty of drawing when using drawing tools to draw pictures, the sketches or representative symbols of equipment components are often drawn. When users read and identify the equipment components represented by the pictures, the user needs to have relatively high professional knowledge, or If you are very familiar with the symbol diagram, it is difficult to quickly know the device components represented by each picture, which obviously will make it difficult for the user to read and identify the components represented by the picture, and reduce the user experience.

In this embodiment, a picture obtained by using actual device components as a device view is more realistic, and a user can easily identify the components represented by each device view directly according to the comparison device components, which is convenient for user operations.

Considering that subsequent users need to zoom the generated hotspot view, in order to prevent the zoomed hotspot view from being unclear, the device view in this embodiment may further use an image with an image pixel width of more than 1600px. Then, whether the hotspot view generated according to the device view is scaled due to a user operation or on a display screen of different resolutions, it has high definition, which improves the user experience.

Step S2: Generate a line on the device view to delineate the hotspot area of the device view to obtain a hotspot view with the device view as a background.

Specifically, taking the device view as a background image, and drawing a hotspot area on the device view, the hotspot view in SVG format can be generated. When the user zooms in and out of the hotspot view, the size of the device view and the hotspot area also scales synchronously. The positioning of the hotspot view in SVG format on the display screen is relative positioning. As the hotspot view zooms, the position of the pixels covered by the hotspot view on the display screen also changes accordingly, and the positioning of the hotspot view in SVG format is also relative. make a difference.

At present, conventional hotspot views generally use pictures in formats such as JPG, and the positioning method of pictures in this format is absolute positioning through bitmaps. When the user zooms the hotspot view, although the size of the hotspot view displayed to the user changes, the location of the hotspot area of the hotspot view does not change accordingly. If the view is operated, there is a deviation between the hotspot area displayed on the display screen and the hotspot area actually located on the display screen, which causes the user to fail to perform the corresponding function operation based on the hotspot area.

The hotspot view in this application is in SVG format, and its positioning method is relative positioning. When the hotspot view is zoomed, its positioning position can change accordingly, so that the user can accurately match the hotspot view displayed after zooming. The hotspot area is operated to avoid the problem of hotspot offset.

Optionally, the specific process of drawing the hotspot area on the device view may include:

An edge line of the device view is identified, and a line encircling the hot spot area is generated along the edge line of the device view.

In order for the hotspot area to cover the device view to the greatest extent, you can draw a line along the edge of the device view to form a closed area along the edge of the device view to generate the hotspot view.

Step S3: Name the hotspot view according to a predetermined naming rule according to the device component type corresponding to the device view included in the vector drawing instruction, and export the hotspot view in SVG format.

Specifically, the naming of each hotspot view (expressed as an ID attribute in the exported svg format image), the naming rules must ensure that different component types and identifiers can be distinguished, such as fan-3, which represents the third fan component. That is, devices of the same type can be named with the same phase abbreviation and serial number.

After the hotspot area is drawn, the graphic in the SVG format is exported. Specifically, an SVG database dedicated to storing the hotspot view can be established, and it can be imported when the page of the hotspot view of the storage device needs to be displayed. For details on page introduction of the hotspot view, reference may be made to the following steps S4 and S5.

Step S4: identifying the hotspot view according to the name of the hotspot view;

Step S5: Bind the identified hotspot view to a corresponding event, as well as the functions of hovering and clicking effects of the hotspot image.

Specifically, use js (or svg class library) to obtain the dom element (usually the path element) of the hotspot area, identify the component type and logo according to the element ID and the above naming rules, and bind events accordingly to achieve suspension and click. effect, complete the realization of the hot spot.

For example: (1) Determine the webpage that needs to import graphics, and import svg pictures (ie hotspot views) in the svg class library (such as Snap.svg) according to the specific situation, which is convenient for the programming of svg pictures;

(2) Introduce the above drawn svg image into html, the method is: <embed>, <object> or <iframe>;

(3) Set the size of the svg image through css (absolute positioning), which can be set as a percentage (for example: width is 80%) to achieve the same display ratio under different resolution monitors;

(4) Use js (or svg class library) to obtain the dom element (usually the path element) in the hotspot area, identify the component type and logo according to the element ID and the above naming rules, and bind events accordingly to achieve suspension and click effect, complete the realization of the hot spot.

In this application, the image actually shot of the device components is used as the device view, which is convenient for users to identify the hotspot view when operating the hotspot view, and improves the user experience; and on the basis of the device view, a vector drawing tool is used to draw the hotspot area. , generates a hotspot view in SVG format, avoids the positioning offset problem caused by zooming in the hotspot view, and facilitates users to accurately operate the hotspot area.

The following describes an apparatus for generating a responsive hotspot view of a storage device provided by an embodiment of the present invention. The apparatus for generating a responsive hotspot view of a storage device described below and the method for generating a responsive hotspot view of a storage device described above are mutually compatible. corresponding reference.

2 is a structural block diagram of an apparatus for generating a responsive hotspot view of a storage device according to an embodiment of the present invention. Referring to FIG. 2 , the apparatus for generating a responsive hotspot view of a storage device may include:

an instruction receiving module 100, configured to receive vector drawing instructions and a device view, wherein the device view is a picture obtained by photographing a device component;

A view generation module 200, configured to generate a line delineating a hotspot area of the device view on the device view, to obtain a hotspot view with the device view as a background;

The naming and exporting module 300 is configured to name the hotspot view according to a predetermined naming rule according to the device component type corresponding to the device view included in the vector drawing instruction, and export the hotspot view in SVG format.

Optionally, in another specific embodiment of the present invention, it may further include:

The pixel width of the device view imported by the instruction receiving module 100 is more than 1600px.

Optionally, in another specific embodiment of the present invention, the view generation module 300 is specifically configured to identify an edge line of the device view, and generate a line delineating the hot spot along the edge line of the device view.

Optionally, in another specific embodiment of the present invention, it may further include a function binding module for identifying the hotspot view according to the name of the hotspot view; binding the identified hotspot view to a corresponding event, and The function of hover and click effect of hotspot image.

The apparatus for generating a responsive hotspot view of a storage device in this embodiment is used to implement the foregoing method for generating a responsive hotspot view of a storage device. Therefore, the specific implementation in the apparatus for generating a responsive hotspot view of a storage device can be found in the foregoing section. The embodiment part of the method for generating a responsive hotspot view of a storage device, for example, the instruction receiving module 100, the view generating module 200, and the naming exporting module 300 are respectively used to implement steps S1, S2 and S3 in the above method, and function binding The module is used to implement steps S4 and S5 in the above method. Therefore, reference may be made to the descriptions of the corresponding partial embodiments for specific implementations thereof, which will not be repeated here.

The present application also provides a device for generating a responsive hotspot view of a storage device. As shown in FIG. 3 , FIG. 3 is a schematic structural diagram of a device for generating a responsive hotspot view of a storage device according to an embodiment of the present invention, including:

memory 11 for storing computer programs;

The processor 12 is configured to execute the computer program to implement the steps of the method for generating a responsive hotspot view of a storage device as described in any of the above embodiments.

The present application also provides a computer-readable storage medium, where a computer program is stored on the computer-readable storage medium, and when the computer program is executed by a processor, implements the responsive hotspot of the storage device described in any of the above embodiments The steps of the generation method method of the view.

Specifically, the computer-readable storage medium may be random access memory (RAM), internal memory, read only memory (ROM), electrically programmable ROM, electrically erasable programmable ROM, registers, hard disks, removable disks, CD-ROMs , or any other form of storage medium known in the art.

Professionals may further realize that the units and algorithm steps of each example described in conjunction with the embodiments disclosed herein can be implemented in electronic hardware, computer software, or a combination of the two, in order to clearly illustrate the possibilities of hardware and software. Interchangeability, the above description has generally described the components and steps of each example in terms of functionality. Whether these functions are performed in hardware or software depends on the specific application and design constraints of the technical solution. Skilled artisans may implement the described functionality using different methods for each particular application, but such implementations should not be considered beyond the scope of the present invention.

The various embodiments in this specification are described in a progressive manner, and each embodiment focuses on the differences from other embodiments, and the same or similar parts between the various embodiments may be referred to each other. As for the device disclosed in the embodiment, since it corresponds to the method disclosed in the embodiment, the description is relatively simple, and the relevant part can be referred to the description of the method.

Claims (8)

1. A method for generating a responsive hotspot view of a storage device, comprising: receiving a vector drawing instruction and a device view, wherein the device view is a picture obtained by photographing a device component; generating a line delineating the hotspot area of the device view on the device view to obtain a hotspot view with the device view as a background; Name the hotspot view according to a predetermined naming rule according to the device component type corresponding to the device view included in the vector drawing instruction, and export the hotspot view in SVG format; Identifying the hotspot view according to the name of the hotspot view; Bind the identified hotspot view to a corresponding event, as well as the functions of hovering and clicking effects of the hotspot image; The positioning of the hotspot view in SVG format on the display screen is relative positioning. As the hotspot view is zoomed, the position of the pixels covered by the hotspot view on the display screen also changes accordingly, and the positioning of the hotspot view in SVG format is also relatively generated synchronously. Variety. 2 . The method for generating a responsive hotspot view according to claim 1 , wherein the pixel width of the device view is more than 1600px. 3 . 3 . The method for generating a responsive hotspot view according to claim 1 , wherein the generating, on the device view, a line delimiting the hotspot area of the device view comprises: 3 . An edge line of the device view is identified, and a line encircling the hot spot area is generated along the edge line of the device view. 4. An apparatus for generating a responsive hotspot view of a storage device, comprising: an instruction receiving module for receiving vector drawing instructions and a device view, wherein the device view is a picture obtained by photographing a device component; a view generation module, configured to generate a line delineating a hotspot area of the device view on the device view, and obtain a hotspot view with the device view as a background; A naming and exporting module, configured to name the hotspot view according to a predetermined naming rule according to the device component type corresponding to the device view included in the vector drawing instruction, and export the hotspot view in SVG format; a function binding module, configured to identify the hotspot view according to the name of the hotspot view; bind the identified hotspot view to a corresponding event, as well as the functions of hovering and clicking effects of the hotspot image; The positioning of the hotspot view in SVG format on the display screen is relative positioning. As the hotspot view zooms, the position of the pixels covered by the hotspot view on the display screen also changes accordingly, and the positioning of the hotspot view in SVG format is also relatively generated synchronously. Variety. 5. The device for generating a responsive hotspot view of a storage device according to claim 4, characterized in that, comprising: The pixel width of the device view received by the instruction receiving module is more than 1600px. 6 . The apparatus for generating a responsive hotspot view of a storage device according to claim 4 , wherein the view generating module is specifically configured to identify the edge line of the device view, and generate a line along the edge line of the device view. 7 . Lines delineating the hotspot area. 7. A device for generating a responsive hotspot view of a storage device, comprising: memory for storing computer programs; The processor is configured to execute the computer program to implement the steps of the method for generating a responsive hotspot view of a storage device according to any one of claims 1 to 3. 8. A computer-readable storage medium, wherein a computer program is stored on the computer-readable storage medium, and when the computer program is executed by a processor, the storage device according to any one of claims 1 to 3 is implemented The steps of the generation method of the responsive hotspot view.

Images