CN103414888A

CN103414888A - Building video graphical display method based on SVG (scalable vector graphics) technology

Info

Publication number: CN103414888A
Application number: CN2013104083846A
Authority: CN
Inventors: 马超
Original assignee: Jiangsu IoT Research and Development Center
Current assignee: Jiangsu IoT Research and Development Center
Priority date: 2013-09-09
Filing date: 2013-09-09
Publication date: 2013-11-27
Anticipated expiration: 2033-09-09
Also published as: CN103414888B

Abstract

The invention provides a building video graphical display method based on an SVG (scalable vector graphics) technology. The method comprises the following steps of drawing a plan and a camera icon of each layer of the building; manufacturing an SVG picture of each layer of the building, and using each camera icon to display the location of a camera in each SVG picture; correlating each camera icon with an IP (internet protocol) address of the corresponding site camera, and providing visiting access data for visiting a camera control center; programming a webpage, and embedding the SVG pictures into the webpage; and enabling a user to click the related camera icon in the corresponding SVG picture in the webpage as needed, and enabling the camera control center to control the corresponding site camera to collect images, and send the images back to display. The building video graphical display method has the advantages that the economy is realized, and map displaying is combined.

Description

Building video and graphic display packing based on the SVG technology

Technical field

The present invention relates to a kind of video monitoring Display Technique, the especially a kind of video and graphic of building based on SVG technology display packing.

Background technology

In recent years, along with the development of urban construction, high buildings and large mansions have been built in various places, and white-collar job site also more and more concentrates in intensive office building, so the building safety of office building has just become an important problem.

The mode mainly addressed this problem is at present used video monitoring system exactly, puts expertise to good use in this field in each large camera manufacturer and system integration commercial city.From the design of camera, to the conversion of Video coding, to last demonstration, unique separately system is arranged.

For the demonstration of video monitoring, mainly contain at present three kinds of forms:

1 traditional camera tree structure, click the real-time shooting picture that this camera all can appear in a camera.

2 video walls demonstrations, this demonstration mainly is used in command centre, uses a rectangular area that a lot of camera picture LED screens are stitched together, and forms video wall, for commanding and leading and inspect.

3 demonstrations based on generalized information system (GIS-Geographic Information System), in map, the user can click certain zone of map and check the camera real-time pictures that this is regional by camera and video deployment.

And above several traditional mode has some problems, traditional camera tree structure picture is too old-fashioned and inflexible, is unfavorable for checking, also is not easy to know the monitoring position of camera; And the display effect of video wall is fine, but there is no combining geographic information.And, based on the demonstration of GIS, although combine geography information, having again good display effect, this function to need enterprise to buy specialty and the GIS software of costliness simultaneously, cost is excessive.

Summary of the invention

The objective of the invention is to overcome the deficiencies in the prior art, a kind of video and graphic of building based on SVG technology display packing is provided, can obtain a kind of comparatively economic and building monitoring image display method that can show in conjunction with map again.The technical solution used in the present invention is:

A kind of video and graphic of building based on SVG technology display packing, comprise the steps:

S1. obtain the plane information and the positional information that is arranged on the camera of each layer of building of each layer of building, utilize graphics software to draw plane graph and the camera icon of each layer of building;

S2. utilize the SVG mapping software according to the plane graph of above-mentioned each layer of building, to make the SVG picture of each layer of building; Use the camera icon in the SVG picture, to show the position of camera; For each camera icon distributes unique ID;

S3. each camera icon is associated with the IP address of corresponding on-the-spot camera, and is provided for accessing the access access data of camera control centre;

S4. write webpage, in webpage, embed above-mentioned SVG picture, and in described SVG picture with above-mentioned camera icon;

S5. the user clicks camera icon relevant in the SVG picture as required in webpage, the access request that carries the on-the-spot camera IP address be associated with this camera icon is sent to camera control centre, camera control centre controls corresponding on-the-spot camera collection image, and passback shows.

Further, the described SVG employing SVGDeveloper of mapping software software.

Further, describedly be used to the access access data of accessing camera control centre, comprise user name, password and port numbers.

Advantage of the present invention: the invention provides building monitoring image display method cheaply a kind of and that can show in conjunction with map again, display effect is good.The user can select the video image that need to monitor intuitively according to illustrated camera position.

The accompanying drawing explanation

Fig. 1 is the plane graph of the floor of use PhotoShop making.

The SVG floor picture of Fig. 2 for using SVGDeveloper to make.

Fig. 3 is the configuration information schematic diagram of camera.

Fig. 4 is the schematic diagram of the webpage that writes.

Fig. 5 is that in webpage clicking, the camera icon ejects camera real-time pictures schematic diagram.

Fig. 6 is method flow diagram of the present invention.

Embodiment

The invention will be further described below in conjunction with concrete drawings and Examples.

The present invention wishes to obtain a kind of comparatively economic building monitoring image display method that can show in conjunction with map again.The video monitoring system of building, general mainly be arranged on the camera of each floor by each video producer and integrator, and the camera control centre (backstage video server) that connects each camera forms.There are some shortcomings as described in the background art in the display mode of current monitor video.The method that the present invention proposes is mainly based on the graphical display technics of SVG.

SVG scalable vector graphics (Scalable Vector Graphics) is based on extend markup language (XML), be used to describing a kind of graphical format of two-dimension vector graphics.SVG strictly defers to the XML grammer, and carrys out the Description Image content with the descriptive language of text formatting, is therefore a kind of and the irrelevant vector graphics format of image resolution ratio.

SVG has following several advantage:

1. any scaling.User's zoomed image arbitrarily shows, and can not destroy the definition, details etc. of image.

2. text is independent.Word in the SVG image is independent of image, and word retains can be edited and searchable state.Also there will be no the restriction of font, custom system, even without a certain font is installed, also can be seen identical picture while making with them.

3. than small documents.Generally speaking, the SVG file is more much smaller than the file of those GIF and jpeg format, thereby downloads also very fast.

4. superpower display effect.SVG image edge clear always on screen, its definition are applicable to any screen resolving power and print resolving power.

5. super color is controlled.The SVG image provides the palette of 1,600 ten thousand kinds of colors, supports ICC color description file standard, RGB, line X filling, gradual change and masking-out.

6. support DOM fully.DOM (Document Object Model DOM Document Object Model) is a kind of document platform, content, structure or the pattern of the dynamic storage of its permission program or script and upload file.Because SVG supports DOM fully, thereby the SVG document can be come into contacts with by accordant interface standard and extraneous program.Object element in SVG and SVG can be accepted by script the driving of external event fully, and mouse action is for example realized self or to control of other objects, image etc.This is also one of electronic document excellent characteristic that should possess.

7. adopt text to carry out Description Image.Different from traditional picture format is, SVG adopts text to describe the figure of vector quantization, and this makes the SVG image file that good readability can be arranged as html web page.As the user with after tool image output SVG, can be with any word processing TO SVG image, and can see the text codes of Description Image.The people who has grasped the SVG grammer even can only come by the content that a notepad just can be read in image.

The SVG image has advantages of above-mentionedly just, so the video and graphic of the building based on SVG technology display packing of proposing of the present invention, utilized the solution of the SVG picture of floor as the cheapness of carrying out the map demonstration.Specifically comprise the following steps:

Step S1. as shown in Figure 1, at first make the SVG material, the drawing personnel can obtain the plane information of each layer of building and be arranged on the positional information of the camera of each layer of building from developer or property, according to these resources, use plane graph and the camera icon of each layer of Photoshop Software on Drawing building.

Step S2. as shown in Figure 2, then makes the SVG picture: by software engineering librarian use SVGDeveloper software, according to the plane graph of above-mentioned each layer of building, produce the SVG picture of each layer of building; Also must in the SVG picture, show the position of camera with the camera icon, the camera icon just is mapped one by one with field erected camera like this.And in manufacturing process, for each camera icon distributes unique ID;

Step S3. as shown in Figure 3, then each camera icon is associated with the IP address of corresponding on-the-spot camera, specifically the unique ID of camera icon can be associated with the IP address of corresponding on-the-spot camera, the purpose of this step is in use later, and camera control centre can remove to control the on-the-spot camera collection image that this icon is corresponding according to certain camera icon of clicking.In application, after clicking the camera icon in the SVG picture, need to send access request to camera control centre, user name, password and the port numbers that therefore must be provided in advance accessing camera control centre.

Step S4. as shown in Figure 4, need to be utilized by the program personnel js framework of Jquery, and the pop-up window js framework of lhgdialog, writes webpage, in webpage, embeds above-mentioned SVG picture, and in described SVG picture with above-mentioned camera icon; If, while using in addition IE8 and following IE browser, need the SVGView plug-in unit is installed, otherwise the IE browser can't show the SVG picture.

Step S5. as shown in Figure 5, the user clicks camera icon relevant in the SVG picture as required in webpage, the access request that carries the on-the-spot camera IP address be associated with this camera icon is sent to camera control centre, camera control centre controls corresponding on-the-spot camera collection image, and passback shows.

Said method can be made into corresponding software, is installed in a server, reaches realization physically.

Claims

1. the video and graphic of the building based on a SVG technology display packing, is characterized in that, comprises the steps:

2. the video and graphic of the building based on SVG technology display packing as claimed in claim 1, is characterized in that: the described SVG employing SVGDeveloper of mapping software software.

3. the video and graphic of the building based on SVG technology display packing as claimed in claim 1 is characterized in that: describedly be used to the access access data of accessing camera control centre, comprise user name, password and port numbers.