A building graphics display method based on SVG technology

Abstract

The present application discloses a building graphics display method based on SVG technology. The present application uses the floor plan of the building as the basic map, and then draws the shape of the area affected by the building equipment in SVG format. The SVG format image overlaps with the floor plan and is associated with the building equipment. The use of SVG technology can accurately locate the area affected by the building equipment on the floor plan, so as to more intuitively present the data between the building equipment and different buildings. The graphics drawn using SVG technology are vector graphics, which will not be deformed or distorted even if zoomed in or out. The shape of the area affected by the building equipment corresponding to the SVG format image is divided into several specific area color blocks. When the operating status data of the building equipment changes, the color displayed by the specific area color block is adjusted to make the building graphics vivid and intuitive. This solves the technical problem that the data of the area affected by the existing building equipment is not intuitive enough, resulting in a lack of intuitiveness when comparing the data of different building equipment.

Description

Technical Field

[0001] The present application relates to the field of graphics technology, and in particular to a building graphics display method based on SVG technology. Background Art

[0002] With the acceleration of urbanization, the number of high-rise residential and office buildings in cities is rapidly expanding. In order to improve the efficiency of building management, the concept of smart buildings was proposed and quickly promoted as an effective method of building management.

[0003] Currently, domestic intelligent building control systems are generally based on the CS architecture. However, in traditional building management (BA) configuration solutions, identifying the scope of building equipment's impact area is not intuitive enough. For example, in lighting, because the lighting area corresponding to each circuit is irregular in plan view (can be any shape), traditional BA configuration solutions can only list the building equipment in the impact area in a table format to achieve monitoring of the building equipment within the impact area. Obviously, presenting data on building equipment's impact area in a table format is not intuitive enough, resulting in a lack of intuitiveness when comparing data from different building equipment. Summary of the Invention

[0004] The present application provides a building graphics display method based on SVG technology, which is used to solve the technical problem that the existing data on the impact area of ​​building equipment presented in the form of a table list is not intuitive enough, resulting in a lack of intuitiveness when comparing data of different building equipment.

[0005] This application provides a building graphics display method based on SVG technology, including:

[0006] Obtain spatial information of each level of the building and location information of building equipment;

[0007] Drawing a floor plan of the building according to the spatial information and the location information of each level;

[0008] According to the shape of the area affected by the building equipment, draw it into an SVG format image using SVG drawing software;

[0009] Based on the same path coordinates, the plan view is used as a base view, overlapped with the SVG format image, and the SVG format image is associated with the building equipment;

[0010] Divide the SVG format image into a plurality of specific area color blocks corresponding to the shape of the area affected by the building equipment;

[0011] According to the operating status data of the building equipment, the colors displayed by the color blocks in the specific areas corresponding to different building equipment are adjusted to display the building graphics.

[0012] This application uses the floor plan of the building as the basic map, and then uses SVG drawing software to draw the shape of the area affected by the building equipment in SVG format. The SVG format image overlaps with the floor plan and is associated with the building equipment. The use of SVG technology can accurately locate the area affected by the building equipment on the floor plan, so as to more intuitively present the data between the building equipment and different buildings. The graphics drawn using SVG technology are vector graphics, which will not be deformed or distorted even if zoomed in or out. Furthermore, the shape of the area affected by the building equipment corresponding to the SVG format image is divided into several specific area color blocks. When the operating status data of the building equipment changes, the color displayed by the specific area color block is adjusted to make the building graphics vivid and intuitive. This solves the technical problem that the existing data on the building equipment impact area presented in the form of a table list is not intuitive enough, resulting in a lack of intuitiveness when comparing data from different building equipment.

[0013] Optionally, drawing a floor plan of a building according to the spatial information and the location information of each level includes:

[0014] Based on CAD software, drawing is performed according to the spatial information and the position information of each level to obtain a drawn graphic;

[0015] Convert the drawn graphics into a floor plan with a preset size format.

[0016] Optionally, drawing an SVG format image using SVG drawing software according to the shape of the area affected by the building equipment includes:

[0017] Obtain an identification map of the area affected by building equipment;

[0018] According to the area shape in the area range identification diagram and the preset size format, a graphic is drawn by Coreldraw and stored as an SVG format image.

[0019] Optionally, based on the same path coordinates, the plan view is used as a base view, overlapped with the SVG format image, and the SVG format image is associated with the building equipment, including:

[0020] Based on the same path coordinates, the plan view is used as a basic view in a BA configuration framework implemented based on a B / S architecture, and is overlapped with the SVG format image;

[0021] The SVG format image is associated with the building equipment.

[0022] Optionally, it also includes:

[0023] The building graphics are uploaded to a server for remote control by users.

[0024] Optionally, the building equipment includes a camera and further includes:

[0025] Configuring a camera icon and identification information for the camera;

[0026] Displaying the camera icon in the SVG format image;

[0027] The camera icon is associated with a camera in the building site.

[0028] Optionally, the camera icon is located in a specific area color block of the SVG format image; the camera in the building site is configured to be in standby mode, and when the specific area color block of the SVG format image changes and is displayed as a fault, the camera is started to capture a real-time video signal, and the camera icon is started to display the real-time video signal transmitted by the corresponding on-site camera; if the real-time video signal is consistent with the set normal state video signal, it is determined that the specific area color block of the SVG format image has changed incorrectly, the color of the specific area color block is restored, and an error record is generated.

[0029] Optionally, the adjusting, based on the operating status data of the building equipment, the colors displayed by the color blocks in specific areas corresponding to different building equipment to display the building graphics, includes:

[0030] Configure the colors displayed by the color blocks in specific areas corresponding to different operating status data of building equipment. BRIEF DESCRIPTION OF THE DRAWINGS

[0031] Figure 1 A flow chart of a building graphics display method based on SVG technology provided in an embodiment of the present application;

[0032] Figure 2 A plan view provided for an embodiment of the present application;

[0033] Figure 3 SVG format images provided in the embodiments of this application;

[0034] Figure 4 This is a rendering of the building graphics provided in an embodiment of the present application. DETAILED DESCRIPTION

[0035] An embodiment of the present application provides a building graphics display method based on SVG technology, which is used to solve the technical problem that the existing data on the impact area of ​​building equipment presented in the form of a table list is not intuitive enough, resulting in a lack of intuitiveness when comparing data of different building equipment.

[0036] In order to make the purpose, features, and advantages of the invention of this application more obvious and easy to understand, the technical solutions in the embodiments of this application will be clearly and completely described below in conjunction with the drawings in the embodiments of this application. Obviously, the embodiments described below are only part of the embodiments of this application, not all of the embodiments. Based on the embodiments in this application, all other embodiments obtained by ordinary technicians in this field without making creative work are within the scope of protection of this application.

[0037] See also Figures 1 to 4 , the embodiment of the present application provides a building graphic display method based on SVG technology, including:

[0038] Step S101: Acquire the spatial information of each level of the building and the location information of the building equipment.

[0039] When constructing a building, it is usually necessary to pre-set and calculate various building data to provide the parameters required for the construction process. Therefore, the spatial information of each level of the building and the location information of building equipment can be obtained from the data of the previous building construction.

[0040] Step S102: Draw a floor plan of the building based on the spatial information and location information of each level.

[0041] It should be noted that the spatial information at each level can specifically include information on different buildings, floors, and rooms. Of course, the drawing order can be first the building, then the entire floor frame, and finally the rooms on each floor. Alternatively, the building, each floor, and the rooms can be drawn simultaneously.

[0042] Step S103: Draw the image in SVG format using SVG drawing software according to the shape of the area affected by the building equipment.

[0043] Conventionally, multiple images are dragged and stacked to form another graphic area. These images are all generic and no specific area shape is pre-drawn. This causes the graphics to distort and become distorted when zoomed in or out. However, this embodiment uses SVG technology, a vector graphic, which prevents the graphics from distorting and becoming distorted when zoomed in or out.

[0044] Step S104: Based on the same path coordinates, the floor plan is used as a base map, overlapped with the SVG format image, and the SVG format image is associated with the building equipment.

[0045] It should be noted that since the SVG format image and the floor plan are drawn based on the same path coordinates, the relative coordinates of the two remain unchanged, so the SVG format image and the floor plan can be superimposed together. In order to present the actual on-site conditions of the building, it is necessary to associate the SVG format image with the building equipment. For example, a positioning function module is installed in the building equipment, and then the positioning function module in the building equipment is associated with the SVG format image, so that the building graphics can be displayed.

[0046] Step S105: Divide the SVG format image into a number of specific area color blocks corresponding to the shape of the area affected by the building equipment.

[0047] Step S106 : According to the operating status data of the building equipment, the colors displayed by the color blocks in the specific areas corresponding to the different building equipment are adjusted to display the building graphics.

[0048] It should be noted that the SVG format image is divided into several specific area color blocks. When the operating status data of the building equipment changes, the color of the specific area color block is adjusted. The operating status data of the building equipment may include other states such as normal operation, stopped operation and fault.

[0049] For example, for lighting equipment, by collecting the operating status data of the lighting equipment, that is, the switch status, which includes: on, off, and fault, the display rules of the specific area color block corresponding to the lighting equipment are:

[0050] If the lighting device is on, the area block will be green.

[0051] If the lighting device is off, the area block will be gray.

[0052] If the switch status of the lighting device is faulty, the area color block will be displayed in red.

[0053] The impact area of ​​building equipment is related to the equipment itself and the building's internal structure. For example, the impact area of ​​lighting equipment is related to its performance or whether the building's interior space uses transparent materials. For example, the impact area of ​​air conditioning equipment is related to its installation location, air flow direction, and the building's floor plan layout. Generally, the impact area of ​​building equipment is related to the floor plan layout and does not overlap. However, in certain circumstances, overlap is possible (for example, when room partitions are made of transparent glass or air conditioning air flows across multiple areas). In these cases, the specific area color blocks corresponding to different devices may overlap in the SVG image. For example, if specific area color block A corresponds to device A and specific area color block B corresponds to device B, then the overlap between specific area color blocks A and B creates an overlapping area AB. The color block display rules within this overlapping area are configured as follows: when at least one of specific area color blocks A or B is normally on, AB is displayed as normally on; when both specific area color blocks A and B are normally off, overlapping area AB is displayed as normally off. When both specific area color blocks A and B are displayed as faulty, the overlapping area AB is displayed as faulty. If only one of the specific area color blocks is faulty, the overlapping area AB is not displayed as a faulty color. This allows for accurate and intelligent display of the working status of different areas, especially the overlapping area.

[0054] It is understandable that the steps before step S106 include:

[0055] Configure the colors displayed by the color blocks in specific areas corresponding to different operating status data of building equipment.

[0056] In this embodiment, it is necessary to configure colors for specific area color blocks corresponding to different operating status data of building equipment to facilitate subsequent adjustment of the colors displayed by the specific area color blocks. For example, different operating status data of each building equipment can be matched with different colors, and different specific area color blocks can also be configured with different colors. Of course, those skilled in the art can configure colors according to actual circumstances.

[0057] Furthermore, step S102 includes:

[0058] Based on CAD software, the drawn graphics are obtained according to the spatial information and position information of each level.

[0059] Convert the drawn graphics into a floor plan with a preset size format.

[0060] Specifically, if Figure 2 As shown, it is a floor plan of a building, and the preset size format of the floor plan is 1920*1080.

[0061] Furthermore, step S103 includes:

[0062] Obtain an identification map of the area affected by building equipment.

[0063] According to the area shape and preset size format in the area range identification map, the graphics are drawn using CorelDraw and saved as SVG format images.

[0064] It should be noted that if Figure 3 As shown, in order to match the size of the floor plan, it is also necessary to draw according to the preset size format of 19020*1080. After drawing, it is stored as an SVG format image, and the Coreldraw software can automatically generate the area coordinates of each different shape area.

[0065] Furthermore, step S104 includes:

[0066] Based on the same path coordinates, the plan view is used as a basic view in a BA configuration framework implemented based on a B / S architecture and is overlapped with the SVG format image.

[0067] Associate SVG format images with building equipment.

[0068] It should be noted that the first step is to upload the floor plan to the BA configuration framework based on the B / S architecture and use it as the basic diagram. The second step includes: based on the same path coordinates as the floor plan, through the SVG component in the SVG format image, configure the SVG path corresponding to the affected area. This SVG format image and the floor plan are the same size and both start from the same coordinates, so the two graphics can be completely overlapped. The path coordinates of the specific area color blocks in the SVG format image are based on the same coordinates as the floor plan, so the relative coordinates are unchanged, so that the specific area color blocks in the SVG format image can be automatically and accurately superimposed to the specified position. The specific area color blocks in the SVG format image are bound to a unique building equipment ID, thereby binding the SVG format image to the building equipment, that is, the association setting.

[0069] Furthermore, this embodiment also includes:

[0070] Upload building graphics to a server for remote user control.

[0071] It should be noted that in order to view the building equipment impact area in other browsers, the building graphics can be uploaded to a server for user remote control, so that users can remotely monitor the building equipment by clicking on locations in different area ranges.

[0072] Furthermore, the building equipment in this embodiment may include a camera and also include:

[0073] Configure the camera icon and identification information for the camera.

[0074] Displays a camera icon in an SVG image.

[0075] Associate the camera icon with a camera in the building scene.

[0076] In order to better monitor building equipment, this embodiment configures camera icons and identification information for cameras in the building, displays the camera icons in SVG format images, and then associates the camera icons with cameras in the building site to monitor other building equipment more accurately and intuitively.

[0077] In order to make monitoring more reasonable and reduce camera working loss, the camera icon is located in the specific area color block of the SVG format image, that is, the camera and the specific area color block are configured and managed with each other; under normal circumstances, the camera in the building site is configured to be in standby mode. When the specific area color block of the SVG format image changes and is displayed as a fault, the camera is started to capture the real-time video signal, and the camera icon is started to display the real-time video signal transmitted by the corresponding on-site camera; if the real-time video signal is consistent with the set normal state video signal, it is determined that the specific area color block of the SVG format image has changed incorrectly, the color of the specific area color block is restored, and an error record is generated. In this case, the camera is associated with the change of the specific area color block, which makes monitoring more reasonable and reduces the situation of false triggering.

[0078] like Figure 4 , which is the final rendering, and the relevant components are described as follows:

[0079] SVG path: irregular area shape, such as Figure 3 .

[0080] Graphic component: Based on the gojs framework, you can upload pictures to the platform system and set the display level, so that you can quickly and easily set the hierarchical position of this component when it is displayed.

[0081] SVG components:

[0082] A. Based on the GoJS framework, configure the SVG path of the specified area shape so that the area shape can be displayed at the corresponding position.

[0083] B. Supports binding devices and protocol points (agreement points refer to the collection points of devices. Our platform can collect the values ​​of device collection points) and configuring logical rules (such as greater than, equal to, less than, greater than or equal to, less than or equal to). When the conditions are met, the color of the area shape will change.

[0084] C. Support changing the default background color, border line color and size.

[0085] D. Built-in remote control function. After binding the device and protocol point, you can remotely control the bound device and protocol point by clicking.

[0086] In this embodiment, the floor plan of the building is used as the basic diagram, and the shape of the area affected by the building equipment is drawn in SVG format through SVG drawing software. The SVG format image overlaps with the floor plan and is associated with the building equipment. The use of SVG technology can accurately locate the area affected by the building equipment on the floor plan, so as to more intuitively present the data between the building equipment and different buildings. The graphics drawn using SVG technology are vector graphics, which will not be deformed or distorted even if zoomed in or out. Furthermore, the shape of the area affected by the building equipment corresponding to the SVG format image is divided into several specific area color blocks. When the operating status data of the building equipment changes, the color displayed by the specific area color block is adjusted to make the building graphics vivid and intuitive. This solves the technical problem that the existing data of the building equipment impact area presented in the form of a table list is not intuitive enough, resulting in a lack of intuitiveness when comparing the data of different building equipment.

[0087] The device embodiments described above are merely illustrative. The units described as separate components may or may not be physically separate, and the components shown as units may or may not be physical units, i.e., they may be located in one location or distributed across multiple network units. Some or all of the modules may be selected based on actual needs to achieve the objectives of the present embodiment. Persons of ordinary skill in the art will be able to understand and implement the present invention without inventive effort.

[0088] Through the description of the above embodiments, those skilled in the art can clearly understand that each embodiment can be implemented by means of software plus a necessary general hardware platform, or of course, by hardware. Based on this understanding, the essence of the above technical solution or the part that contributes to the existing technology can be embodied in the form of a software product. The computer software product can be stored in a computer-readable storage medium, such as ROM / RAM, a magnetic disk, an optical disk, etc., and includes a number of instructions for enabling a computer device (which can be a personal computer, a server, or a network device, etc.) to execute the methods described in each embodiment or certain parts of the embodiments.

[0089] Finally, it should be noted that the above embodiments are only used to illustrate the technical solutions of the present invention, rather than to limit it. Although the present invention has been described in detail with reference to the aforementioned embodiments, those skilled in the art should understand that they can still modify the technical solutions described in the aforementioned embodiments, or make equivalent replacements for some of the technical features therein. However, these modifications or replacements do not deviate the essence of the corresponding technical solutions from the spirit and scope of the technical solutions of the various embodiments of the present invention.

Claims

1. A building graphics display method based on SVG technology, characterized in that: include: Obtain spatial information of each level of the building and location information of building equipment; Drawing a floor plan of the building according to the spatial information and the location information of each level; According to the shape of the area affected by the building equipment, draw it into an SVG format image using SVG drawing software; Based on the same path coordinates, the plan view is used as a base view, overlapped with the SVG format image, and the SVG format image is associated with the building equipment; Divide the SVG format image into a plurality of specific area color blocks corresponding to the shape of the area affected by the building equipment; Adjusting the colors displayed by color blocks in specific areas corresponding to different building equipment according to the operating status data of the building equipment to display the building graphics; The area affected by the building equipment includes a camera. When a color block in a specific area of ​​the SVG format image changes and indicates a fault, the camera is activated to capture a real-time video signal, and the camera icon is activated to display the real-time video signal transmitted by the corresponding on-site camera. If the real-time video signal is consistent with the set normal state video signal, it is determined that the color block in the specific area of ​​the SVG format image has changed incorrectly, the color of the color block in the specific area is restored, and an error record is generated.

2. The building graphic display method based on SVG technology according to claim 1, characterized in that: Drawing a floor plan of a building according to the spatial information and the location information of each level includes: Based on CAD software, drawing is performed according to the spatial information and the position information of each level to obtain a drawn graphic; Convert the drawn graphics into a floor plan with a preset size format.

3. The building graphic display method based on SVG technology according to claim 2, characterized in that: Drawing an SVG format image using SVG drawing software according to the shape of the area affected by the building equipment includes: Obtain an identification map of the area affected by building equipment; According to the area shape in the area range identification diagram and the preset size format, a graphic is drawn by Coreldraw and stored as an SVG format image.

4. The building graphic display method based on SVG technology according to claim 1, characterized in that: The method of using the plan view as a base view based on the same path coordinates and overlapping the plan view with the SVG format image, and associating the SVG format image with the building equipment includes: Based on the same path coordinates, the plan view is used as a basic view in a BA configuration framework implemented based on a B / S architecture, and is overlapped with the SVG format image; The SVG format image is associated with the building equipment.

5. The building graphic display method based on SVG technology according to claim 1, characterized in that: Also includes: The building graphics are uploaded to a server for remote control by users.

6. The building graphic display method based on SVG technology according to claim 1, characterized in that: Also includes: Configuring a camera icon and identification information for the camera; Displaying the camera icon in the SVG format image; The camera icon is associated with a camera in the building site.

7. The building graphic display method based on SVG technology according to claim 6, characterized in that: The camera icon is located in a specific area color block of the SVG format image; the camera in the building site is configured to be in standby mode.

8. The building graphic display method based on SVG technology according to claim 1, characterized in that: The method of adjusting the colors displayed by color blocks in specific areas corresponding to different building equipment according to the operating status data of the building equipment to display the building graphics previously includes: Configure the colors displayed by the color blocks in specific areas corresponding to different operating status data of building equipment.

Images