KR101785845B1 - Device and method for dynamic display controller to provide a plurality of monitoring images - Google Patents

Abstract

According to one embodiment, a tool for creating a centralized monitoring system that provides a dynamic display controller can be provided. A dynamic display controller support device for providing a plurality of monitoring images according to an embodiment may be configured to execute an algorithm for obtaining an intersecting range in multiple selection and to perform operations on a security camera and a UI component Updating a source list, executing an HTML5 canvas-based WYSIWYG editor, updating a project file each time the canvas component is updated, executing a Z-index algorithm for the object on the canvas, Video streaming enabled display components.

Description

TECHNICAL FIELD [0001] The present invention relates to a dynamic display controller supporting method and apparatus for providing a plurality of monitoring images.

Hereinafter, techniques relating to tools for supporting the monitoring system are provided.

There is a lack of a system and a method for a system in which a user can create or edit a display controller for a centralized monitoring system. Also, there is a lack of an apparatus and method for creating a document structure storing a dynamic controller created or edited for a centralized monitoring system.

In the conventional technology, it is not possible to produce and modify through a collaboration for a centralized monitoring system, and it is insufficient to make a dynamic display controller authoring tool capable of "What You See Is What You Get".

What is needed is a device and technique that provides a user with a dynamic display controller with the ability to store, retrieve, modify, and store modified results to the user.

According to one embodiment, a user may provide a system through a server that can create or edit a display controller for a centralized monitoring system.

According to one embodiment, a document structure may be provided to store dynamic controllers created or edited for a centralized monitoring system.

According to one embodiment, a dynamic display component including a source and a screen controller, a dynamic display, a panel, a button, text, and an image can be provided for authoring without limitation to the user.

According to one embodiment, a authoring tool supporting a dynamic display controller capable of WYSIWYG (What You See Is What You Get) can be provided.

According to one embodiment, it is possible to provide a dynamic display controller having a function of storing, retrieving, modifying, and storing modified results to a user.

According to an embodiment, a method of supporting a dynamic display controller for providing a plurality of monitoring images implemented by a server includes: allowing a first user of an external terminal to access the server; Receiving a first user input associated with a screen control item from the first user; And generating a display object in a canvas region in response to receiving the first user input associated with the screen control item and generating a display object from the security camera in response to a second user input associated with the display object received from the second user And setting the display object such that a source image corresponding to the display object is provided from a plurality of source images to be streamed.

Wherein the step of setting the display object further comprises the steps of: creating a display source object, and generating a source image corresponding to the display source object from a plurality of source images streamed from a security camera in response to a second user input associated with the display source object Setting the display source object to select; Creating a display size object in the canvas region and setting the display size object to determine a size of the display cell in response to a second user input associated with the display size object and the display cell, step; And setting the display cell to display the selected source image on the display cell in the designated size in response to a second user input associated with the display cell and the display source object, Step < / RTI >

Wherein the setting of the display cell comprises: generating a plurality of display cells in a grid form at predetermined intervals in the canvas area; And a plurality of display cells, responsive to a second user input associated with the display size object and one of the plurality of display cells, for merging at least two of the plurality of cells with respect to the one display cell, And setting the cells.

A method of supporting a dynamic display controller to provide a plurality of monitoring images, comprising: generating a display size object in the canvas area; And setting the display size object to generate a monitoring image of a size specified in the display size object from the streamed source image, in response to receiving a second user input associated with the display size object.

The step of configuring the display object may include generating n x m display cells in a grid form in the canvas area in response to receiving a first user input associated with the screen control item.

Wherein setting the display object comprises: generating a display size object in the canvas area; and responsive to a second user input associated with the display size object and one of the nxm display cells, Setting the display size object to merge two or more of the nxm display cells with a size corresponding to the display size object to generate a single display cell; Generating a display source object in the canvas region and generating at least one of a height and a width of the single display cell from a source image corresponding to the display source object in response to the display source object and a second user input associated with the single display cell Setting the display source object to generate a monitoring image having a same image ratio as the source image while being matched to one; And providing the monitoring image to at least a portion of the single display cell and setting the single display cell to provide a black image to the remaining portion of the single display cell.

A method of supporting a dynamic display controller for providing a plurality of monitoring images includes receiving a first user input associated with a common control item from the first user; In response to the first user input associated with the common control item, generating at least one of the button, the image, the text, and the panel in the canvas area.

The step of allowing the connection includes: establishing a connection with the external terminal based on HTTP (HyperText Transfer Protocol) through a web browser of the external terminal; And providing a WYSIWYG editor to the external terminal.

A method of supporting a dynamic display controller to provide a plurality of monitoring images, comprising: receiving a first user input associated with a background of the canvas region; Determining at least one of a background image and a background color for a background area around the plurality of cells based on a first user input associated with the background; Providing a background of the canvas area as the determined background color in response to determining the background color; In response to determining the background image, providing the determined background image to the background of the canvas area; And providing the background image overlaid on the background area, which is made up of the background color, in response to the determination of the background color and the background image.

A dynamic display controller support method for providing a plurality of monitoring images includes at least one of creating an object, resizing an object, changing a graphic representation of an object, changing an object position, and merging two or more objects And automatically updating the project file including the objects created in the canvas area in response to the one of the canvas area and storing the updated project file in the server.

A method of supporting a dynamic display controller for providing a plurality of monitoring images includes: designating a Z index for a plurality of objects; Arranging the plurality of objects based on a specified Z index; And providing the plurality of objects to the canvas area in an ordered sequence.

A method of supporting a dynamic display controller for providing a plurality of monitoring images comprises selecting the two or more objects in response to a first user input associated with two or more of the plurality of objects, ; And converting the single object to two or more objects corresponding to the single object in response to a first user input associated with the single object.

A method of supporting a dynamic display controller for providing a plurality of monitoring images includes the steps of: specifying at least one property according to an object type of an object; Responsive to a first user input associated with two or more of the plurality of objects, selecting the two or more objects; And searching for a property commonly designated to the selected two or more objects, and displaying the commonly-designated property.

A method of supporting a dynamic display controller to provide a plurality of monitoring images comprises applying binary operators to binary flags corresponding to properties specified on the selected two or more objects to generate binary combinations combination; And extracting a binary value corresponding to a property common to the selected two or more objects based on the binary combination.

A method of supporting a dynamic display controller for providing a plurality of monitoring images, comprising the steps of: if a property commonly designated to two or more selected objects exists, in response to receiving a first user input associated with the commonly- To the selected two or more objects at the same time.

The dynamic display controller support method for providing a plurality of monitoring images may further include updating the source and action list according to a predetermined document format.

A method of supporting a dynamic display controller for providing a plurality of monitoring images comprises: selecting the two or more objects in response to a first user input associated with two or more of the plurality of objects; Designating a first object selected from the two or more objects as a reference object; And sorting the remaining objects of the two or more selected objects based on the reference object.

A method of supporting a dynamic display controller for providing a plurality of monitoring images, the method further comprising providing a menu area, a tool box area, and a property area in addition to the canvas area, An item for operating the project, an item for modifying the operation, an item for executing the preview operation, and an item for setting the environment, and the toolbox area includes an item for specifying the type of the object to be created Wherein the canvas area is an area in which the created object is disposed, and the property area may include an item for changing a property of the created object and a property of the canvas area.

According to one embodiment, a dynamic display controller support apparatus for providing a plurality of monitoring images includes a communication unit for communicating with an external terminal of a first user; Allowing a connection of the first user of the external terminal to the device via the communication unit and receiving a first user input associated with a screen control item from the first user via the communication unit, Creating a display object in a canvas region in response to receiving a first user input associated with the screen control item and streaming the security object from the security camera in response to a second user input associated with the display object received from the second user And a processing unit configured to set the display object such that a source image corresponding to the display object is provided from a plurality of source images.

According to one embodiment, users can provide authoring tools that allow them to collaborate through a server to create and modify a centralized monitoring system.

According to one embodiment, a list of working sources for security cameras and objects can be updated, and a centralized monitoring system can be modified without recompilation through a document structure that includes a list of operations and methods of the source.

According to one embodiment, a user can easily author a dynamic display via a wiggie editor.

According to one embodiment, a user can use the Wii Wig authoring tool through a web browser without limitation of a platform.

1 is a block diagram illustrating a dynamic display controller support device for providing a plurality of monitoring images according to one embodiment.
FIGS. 2 to 5 are diagrams for explaining a wiggie editor using an HTML5 canvas according to an embodiment.
FIGS. 6 to 8 are views for explaining a process of changing the background of the canvas area according to an embodiment.
FIG. 9 is a diagram for explaining a process of multiple selection of objects and a process of grouping and ungrouping objects according to an embodiment.
10 and 11 are diagrams for explaining a menu interface according to an embodiment.
12 to 14 are views for explaining a display object providing a streamed image from a security camera according to an embodiment.
15 is a flowchart illustrating a dynamic display controller support method for providing a plurality of monitoring images according to an exemplary embodiment.

It is to be understood that the specific structural or functional descriptions of embodiments of the present invention disclosed herein are presented for the purpose of describing embodiments only in accordance with the concepts of the present invention, May be embodied in various forms and are not limited to the embodiments described herein.

Embodiments in accordance with the concepts of the present invention are capable of various modifications and may take various forms, so that the embodiments are illustrated in the drawings and described in detail herein. However, it is not intended to limit the embodiments according to the concepts of the present invention to the specific disclosure forms, but includes changes, equivalents, or alternatives falling within the spirit and scope of the present invention.

The terms first, second, or the like may be used to describe various elements, but the elements should not be limited by the terms. The terms may be named for the purpose of distinguishing one element from another, for example without departing from the scope of the right according to the concept of the present invention, the first element being referred to as the second element, Similarly, the second component may also be referred to as the first component.

It is to be understood that when an element is referred to as being "connected" or "connected" to another element, it may be directly connected or connected to the other element, . On the other hand, when an element is referred to as being "directly connected" or "directly connected" to another element, it should be understood that there are no other elements in between. Expressions that describe the relationship between components, for example, "between" and "immediately" or "directly adjacent to" should be interpreted as well.

The terminology used herein is for the purpose of describing particular embodiments only and is not intended to be limiting of the invention. The singular expressions include plural expressions unless the context clearly dictates otherwise. In this specification, the terms "comprises ", or" having ", and the like, are used to specify one or more of the features, numbers, steps, operations, elements, But do not preclude the presence or addition of steps, operations, elements, parts, or combinations thereof.

Unless defined otherwise, all terms used herein, including technical or scientific terms, have the same meaning as commonly understood by one of ordinary skill in the art to which this invention belongs. Terms such as those defined in commonly used dictionaries are to be interpreted as having a meaning consistent with the meaning of the context in the relevant art and, unless explicitly defined herein, are to be interpreted as ideal or overly formal Do not.

Hereinafter, embodiments will be described in detail with reference to the accompanying drawings. However, the scope of the patent application is not limited or limited by these embodiments. Like reference symbols in the drawings denote like elements.

A dynamic display controller supporting device (hereinafter referred to as a controller supporting device) for providing a plurality of monitoring images described in this specification includes a centralized monitoring system that provides a display controller capable of dynamically displaying a plurality of monitoring images, A combination of software, hardware, and software and hardware.

The controller supporting apparatus according to an embodiment can provide a WYSIWYG (What You See Is What You Get) authoring tool through a web browser. A controller-enabled device can author a project file containing a dynamic display controller. This project file can contain objects for changing the screen size and screen resolution. Controller-enabled devices can create dynamic display objects, including unrestricted sources and screen controllers, dynamic displays, panels, buttons, text, and images. Each object may be unlimited in size, position, or shape of the object. The controller support device according to an exemplary embodiment may automatically update a project file whenever there is a modification of objects that the user has viewed as shown. The controller-supported device can save the project file to the server and can be called from the server for later modification. Hereinafter, the controller supporting apparatus will be described in detail.

1 is a block diagram illustrating a dynamic display controller support apparatus for providing a plurality of monitoring images according to an embodiment of the present invention.

A dynamic display controller support apparatus 100 (hereinafter referred to as a controller support apparatus) for providing a plurality of monitoring images according to an embodiment may include a communication unit 110, a processing unit 120, and a storage unit 130 .

For example, the controller supporting apparatus 100 may be a server that provides a wiggie editor function to an external terminal.

The communication unit 110 can communicate with an external terminal of the first user. For example, the communication unit 110 can communicate with an external terminal through wired or wireless communication. An external terminal is an electronic device capable of communicating, and can represent a device that is distinguished from a server. The first user may be a user who accesses the server through an external terminal and uses the wiki wig editor function, and may represent a user authoring the centralized monitoring system. According to one embodiment, the communication unit 110 can establish a connection with an external terminal on the basis of HyperText Transfer Protocol (HTTP) through a web browser of an external terminal, and can communicate with an external terminal under the control of the processing unit 120 You can provide a WYSIWYG editor.

The processing unit 120 may execute an algorithm for retrieving properties common to multiple selected objects. For example, if the user selects a plurality of objects, the processing unit 120 may provide a property common to the selected plurality of objects in the property area. In addition, the processing unit 120 updates the source and action list according to a predetermined document format, so that it is not necessary to recompile the code, and can update the operation source list for the security camera and the UI object (user interface object). A document structure including a list of operations and methods of the source can be defined so that the processing unit 120 does not need to recompile.

When the external terminal is connected to the server through the web browser, the processing unit 120 can execute the canvas-based wigg editor implemented in HTML5 (HyperText Markup Language 5) and provide it to the external terminal. The processing unit 120 may update the project file each time an object in the canvas area is updated. Furthermore, the processing unit 120 may execute a Z index algorithm for objects in the canvas region. In addition, the processing unit 120 may author a display object capable of video streaming from the security camera according to the input of the first user. Here, the processing unit 120 may generate display objects so that the cell merging function and the PIP (Picture In Picture) function are performed in the centralized monitoring system in which the work is completed.

The processing unit 120 permits the first user of the external terminal to access the device 100 (for example, the controller supporting apparatus 100) through the communication unit 110, Receiving a first user input associated with a screen control item from a first user via the first screen control item and generating a display object in a canvas region in response to receiving the first user input associated with the screen control item , And set the display object such that a source image corresponding to the display object is provided from a plurality of source images streamed from the security camera in response to a second user input associated with the display object received from the second user.

The screen control item is an item for authoring a display object, the canvas area is an area in which an object is created, the display object can represent an object that allows a second user to dynamically control the display after authoring is completed, This will be described in detail in FIG. The second user may indicate a user using the centralized monitoring system after authoring is completed. The first user input associated with the screen control item may include an input for a screen control item received from the first user to create a display object for controlling the screen after authoring is complete Etc.). The second user input associated with the display object may indicate an input (e.g., an operation to click on the display object, etc.) to the display object received from the second user after authoring is completed. The security camera may represent a camera that captures an image and provides the captured image through a centralized monitoring system through streaming. The source image may represent an image streamed from a security camera.

Herein, the first user input represents an input by a first user, the second user input may represent an input by a second user, and each input may include a mouse click, a key input, a mouse drag, a drag and drop, And various other types of manipulations. However, the types of the above-described inputs are merely examples, and the present invention is not limited thereto.

The storage unit 130 may store a computer program containing instructions for causing the processing unit 120 to execute the above-described operations. In addition, the storage unit 130 may temporarily or semi-permanently store data for authoring and providing the centralized monitoring system. For example, the storage unit 130 may store a project file or the like, and may update the file according to the control of the processing unit 120.

According to one embodiment, the processing unit 120 of the controller supporting apparatus 100 may designate at least one property according to the object type of the object. The processing unit 120 may select two or more objects in response to a first user input associated with two or more of the plurality of objects. In addition, the processing unit 120 may search for a property commonly designated to two or more selected objects, and may display a commonly-designated property. An algorithm for searching a property commonly designated to two or more objects is shown in Table 1 below, and an algorithm for selecting two or more objects is described in Table 2 below.

Table 1 below shows an algorithm for searching a property common to a plurality of objects selected by the controller support apparatus 100 according to an exemplary embodiment in pseudo code. In the following Table 1, an object can be expressed as a component.

Getting the common properties in the selection
input addedComponents
compute firstBit
set firstComponent to result in 1 left shift firstBit (1 << firstBit)
set propertiesToReturn to properties of firstComponent
for c in componentTypes
if addedComponents has c
set propertiesToReturn to intersection of properties of c and propertiesToReturn
return propertiesToReturn

As shown in Table 1, the processing unit 120 applies a binary operator to binary flags corresponding to the properties specified for two or more selected objects to obtain a binary combination For example, addComponents in Table 1 can be generated. In addition, the processing unit 120 may extract a binary value (e.g., propertiesToReturn in Table 1) corresponding to properties common to two or more objects selected based on the binary combination. The binary flag may represent a binary value uniquely assigned to each property.

For example, processing unit 120 may check the first bit of the binary combination (e.g., firstBit in Table 1) to retrieve properties common to the selected objects. Thereafter, the processing unit 120 may sequentially check whether a binary flag uniquely designated for each property is present for the selected plurality of objects. The processing unit 120 can check which properties the selected objects have within the selection range of the canvas area. Each time the processing unit 120 finds the object type of the selected objects, the processing unit 120 can confirm the properties shared by the selected objects. The processing unit 120 may first determine the shared property as the first object type, and then detect each time another object type is found within the selection range.

The processing unit 120 may detect overlapping properties (e.g., values such as width and height in buttons and images) in the selected objects and adjust the common properties of the selected objects at once. For example, in response to receiving a first user input associated with a commonly-assigned property, the processing unit 120 may compare a commonly-assigned property to a selected two or more objects Can be set collectively. A first user input associated with a commonly assigned property may represent an input of a first user that changes properties common to the selected objects.

Table 2 below may be a pseudo code indicating a process of the controller supporting apparatus 100 selecting a plurality of objects according to one embodiment.

A property is information defining an object, and can represent various information such as background color, height, width, background image, object color, object shape, and the like. For example, the type of an object may be a text object, a button object, a photo object, a video object, and a display object.

addedComponents - binary value which shows the types of components added to the selection.
It? S updated whenever component is added / removed to / from the selection. Initially addedComponents is initialized to the binary flag, which shows that none of the items are added to the selection.

Adding component to the selection:
input componentToAdd, addedComponents
set componentType to component type of the componentToAdd
for c in componentTypes
if c == componentType
set addedComponents to addedComponents | componentTypeBinaryFlag
increment componentTypeCounter to 1
break

Removing component from the selection:
input componentToRemove, addedComponents
set componentType to component type of the componentToRemove
for c in componentTypes
if c == componentType
decrement componentTypeCounter to 1
if componentTypeCounter == 0
set addedComponents to addedComponents & ~ componentTypeBinaryFlag
break

Table 3 below may represent a document structure defined to update the source and action list according to one embodiment without system recompilation.

Document structure is developed as json object, containing list of sources and commands.

{
"server": "<server url> ?,
"port": "<port number>?"
"actions": {
"<action name>": "<action definition>"
}
"Sources": {
"<source name>": "<source URI>"
}
}
Routine to read sources and actions from document conforming to the said document structure:

input dataFile
initialize list of sources
initialize list of commands
for actions in dataFile.actions
add action to list of actions
for source in dataFile.sources
add source to list of sources

The controller support apparatus 100 may provide a document format (see Table 3, described above) for defining a surveillance camera source and an action list of the UI component. The controller support device 100 may store all the sources and actions in the above-described document according to the developed format. While developing a centralized monitoring system that includes a dynamic display controller, the controller support device 100 may provide a system routine that reads the document in a constructed format and updates the source and action list.

FIGS. 2 to 5 are diagrams for explaining a wiggie editor using an HTML5 canvas according to an embodiment.

2 illustrates an example in which a user of the external terminals 291 and 292 uses the wiggie editor 210 in the server through a web browser.

2, the controller supporting apparatus 100 (for example, the server shown in FIG. 2) transmits the wig wig editor 210 to the external terminals 291 and 292 using a web technology including an HTML5 canvas, . The first user of the external terminals 291 and 292 is able to communicate with the external terminals 291 and 292 of various platforms Based PC, a MAC-based PC, a Linux-based PC, and the like) and various types of browsers. The external terminals 291 and 292 can connect to the server via HTTP, for example.

In addition, the controller support apparatus 100 provides a wig wig editor 210 for updating a project file whenever a first user of the external terminals 291 and 292 changes something, for example, every time the object is changed . For example, the controller aiding device 100 may respond to at least one of creating an object, resizing the object, changing the graphic representation of the object, changing the location of the object, and merging two or more objects , The project file including the objects created in the canvas area can be automatically updated and stored in the server. The graphical representation may represent a form in which an object is visualized in a web browser through a screen of an external terminal.

FIG. 3 shows an example of the welcome screen 300 of the wiggie editor.

As shown in FIG. 3, the controller supporting apparatus 100 may provide the welcome screen 300 to an external terminal when the first user loads the initial wig editor. The first user can invoke an existing project or create a new project on the welcome screen. For example, controller support device 100 may invoke an existing project stored in controller assistant device 100 in response to receiving a first user input associated with a "Load UI project" The controller support device 100 may create a new project in response to receiving the first user input associated with the "New UI project"

FIG. 4 illustrates an example of loading a project from the controller supporting apparatus 100. FIG.

4, the controller supporting apparatus 100 receives the first user input (e.g., selecting the corresponding button) associated with the "Load UI Project" button on the welcome screen 300 described above in FIG. The user may reconnect to the list of UI projects 400 in the controller support device 100 and provide the list to the external terminal. 4 shows a list 400 of existing projects stored in a server (e.g., controller-assisted device 100) with a json extension, such as "test_2015_11_09.json "," 1117_test.json " .

5 shows an example of the main screen of the wiggie editor.

Controller support device 100 responds to the receipt of the first user input associated with the "New UI Project" button on welcome screen 300 of Fig. 3,

 The main screen 500 may be provided to the first user by reconnecting to the editor page of the wiggie editor as shown in FIG. At this time, the controller supporting apparatus 100 may provide a main screen 500 including a menu area 510, a tool box area 520, a canvas area 530, and a property area 540 to an external terminal.

The menu area 510 may include the following menu items. For example, the controller support apparatus 100 may include a page item for operating a UI project, an edit item for modifying an operation, an operation for sorting an object, , A view item for executing a preview operation for the authored project, and a setting item for setting the environment of the UI project.

The toolbox area 520 may provide an item for specifying the type of the object to be created. The type of an object may represent various categories that define the object, such as a button object, an image object, a text object, a panel object, a display cell, a display size object, a display source object, According to one embodiment, the controller support apparatus 100 may include a common control item 521 (e.g., a button, an image, a text, a panel, etc.) And screen control items 522 (e.g., items such as "Display", "Screen control", "Source", etc.).

For example, the controller support device 100 may receive a first user input associated with a common control item 521 from a first user, and in response to a first user input associated with the common control item 521, , At least one of an image, text, and a panel in the canvas area 530.

The controller support device 100 may also receive a first user input associated with a screen control item 522 from a first user and may receive a first user input associated with a screen control item 522 To generate a display object in the canvas region 530 in response. A display object is an object for providing a source image streamed from a security camera to a second user, for example, a display cell (e.g., generated in response to an input to a "Display & (E.g., generated in response to an input to a "Screen control" item), and a display source object (e.g., generated in response to an input to a "Source" item). Here, the controller-assisted device 100 may display the display object in response to the second user input associated with the display object received from the second user so that the source image corresponding to the display object is provided from among the plurality of source images streamed from the security camera Can be set.

According to one embodiment, the controller aided device 100 generates a display source object and, in response to a second user input associated with the display source object (e.g., clicking or dragging a display source object) A display source object can be set to select a source image (e.g., a source image mapped to the above-described display source object) corresponding to the display source object from a plurality of source images to be streamed. In addition, the controller aided device 100 may generate a display size object in the canvas area 530 and provide a display size object and a second user input associated with the display cell (e.g., Drag and drop operations, etc.), the display size object can be set to determine the size of the display cell to the size specified for that display size object. In addition, the controller aiding device 100 may generate a display cell in the canvas region 530 and may include a second user input associated with the display cell and the display source object (e.g., sequentially clicking or dragging the display cell and the display source object) And dropping operation), the display cell can be set to display the selected source image on the display cell at a specified size. The generation and utilization of the display object will be described in detail in Figs. 12 to 14 below.

The canvas region 530 may represent an area in which the generated object is disposed. The first user of the external terminal can author the UI interface in the canvas area 530 provided by the controller supporting apparatus 100. [

The property area 540 may include an item for changing a property of the created object and a property of the canvas area 530. [

6 to 8 are views for explaining a process of changing the background of the UI interface according to an embodiment of the present invention.

6 shows a process in which the controller supporting apparatus 100 designates a color value of a background color through a text box 641 named "Background color" in the property area 540. 7 illustrates a process in which the controller support apparatus 100 sets a background color in a property area 540 through a palette 741 (for example, a color picker). In FIG. 7, the controller supporting apparatus 100 can determine a background color in a color selected by a first user in a color picker shown.

The controller support device 100 may allow the first user to change the background color of the canvas area 530 or to specify the background image 831. [ For example, the controller support device 100 may receive a first user input associated with the background of the canvas region 530 (e.g., an operation to specify a background color or an operation to specify a background image 831) have. The controller support device 100 may determine at least one of the background image 831 and the background color for the background area around the plurality of cells based on the first user input associated with the background. According to one embodiment, the controller support apparatus 100 may provide the background of the canvas region 530 with the determined background color in response to determination of the background color. According to another embodiment, the controller support apparatus 100 may provide a determined background image 831 in the background of the canvas region 530 in response to a determination that the background image 831 has been determined. In addition, the controller support device 100 may overlay the background image 831 in the background area, which is configured as a background color, in response to determination of the background color and background image 831. [ Therefore, when the background color is first designated and then the background image 831 is inserted, the controller supporting apparatus 100 can display only the embedded image in the first user terminal. The controller support apparatus 100 may provide a canvas region 530 in which the background color is revealed after the designated background image 831 is deleted.

The controller supporting apparatus 100 can perform the following operations to insert an image in the background or change the color. The controller support device 100 may receive input of the keyboard "Esc" button from the first user if the toolbox area is selected. In addition, the controller support device 100 can receive a click on the empty space of the canvas from the first user, and can provide the background property to the first user through the property area. The controller support device 100 may receive a designation for the background color from the first user via the property area 540. [

8 shows an example in which an "X" button is generated when a background image is set.

According to one embodiment, the controller aided device 100 may set the background image 831 based on the first user input. The controller supporting apparatus 100 may receive an image file stored in an external terminal selected by the first user of the external terminal, or linked through an Internet address or the like. When the controller support device 100 receives the click again from the first user for the canvas area 530, the controller support device 100 changes the background image 831 and provides the "X" button to the background image section 841 of the property area . Here, the controller aided device 100 may delete the background image 831 from the canvas area 530 in response to receiving a first user input for the "X" button.

In addition, the controller supporting apparatus 100 can set properties of the created object. For example, the controller-assisted device 100 may provide a first user with a property for the object when the created object is selected, in response to receiving a first user input associated with the property area, You can set properties for this object.

The external terminal selects an object in the canvas area provided by the controller supporting apparatus 100 or selects an item in the tool box area to change the property of the created object based on the operation of the first user, Can be created in the canvas area and then selected. The controller support apparatus 100 provides information related to a property of an object created by a first user or objects created in a canvas region by a first user among objects in a canvas region to a first user through a property region can do.

For example, the controller aiding device 100 may be based on a first user input associated with at least one of the objects in the canvas region (e.g., the first user clicking on an object displayed in the external terminal's web browser) , An object in the canvas area can be selected. If there is no created object in the canvas area, the controller support device 100 displays a first user input (e.g., a display cell, a display size object, and a display object) associated with an item for creating an object in the toolbox area, And manipulation of a first user to click or drag and drop a screen control item to create at least one of the display source objects). For example, the controller support device 100 may provide a first user with an item with the same name as the object type (e.g., a screen control item with a name of display cell for the display cell type). The controller support apparatus 100 can control the external terminal so that the external terminal draws the selected object in the canvas area on the web browser.

In addition, the controller supporting apparatus 100 can provide the property of the selected object to the external terminal through the property area. At this time, the controller support apparatus 100 can provide all the changed items of the object in the property area in real time.

FIG. 9 is a diagram for explaining a process of multiple selection of objects and a process of grouping and ungrouping objects according to an embodiment.

The multiple selection may indicate that the controller support device 100 selects a plurality of objects 911, 912, 913 at one time based on a first user input associated with two or more objects. For example, the controller support apparatus 100 may include a plurality of objects 911, 912, and 913 in the canvas area as first user inputs associated with two or more objects 911, 912, and 913, 912, and 913, which are sequentially clicked, in response to an input that is sequentially clicked with a mouse in a state. In another example, the controller aiding device 100 may be configured to respond to an input to move a cursor while keeping a mouse click for a predetermined time as a first user input associated with two or more objects 911, 912, 913, (911, 912, 913) within a range (e.g., a range of rectangles) 920 that are formed based on the starting point and the ending point of a mouse click.

9, the controller support apparatus 100 may include a first user input associated with two or more of the plurality of objects 911, 912, 913 (e.g., In response to an input that is sequentially clicked), more than one object 911, 912, 913 may be selected. The controller support apparatus 100 may designate the first object 911 among the two or more objects 911, 912, and 913 as a reference object. The controller support apparatus 100 may arrange the remaining objects 912 and 913 of two or more objects selected based on the reference object 911. [ For example, the controller support device 100 may apply a plurality of objects 911, 912, and 913 to a first user by applying a graphical representation, such as a different color, The reference object can be recognized.

The controller support apparatus 100 may provide a common property of the selected objects 911, 912, 913 in the property area. For example, if the selected objects 911, 912, 913 are all buttons, the controller support device 100 may provide all properties of the button object to the property area. If other types of objects are selected together (e.g., a text object, a button object, a photo object, etc.), the controller support device 100 displays the property common to the text object, the button object, and the photo object in the property area Can be provided.

The controller support apparatus 100 may apply operations such as deletion, movement, alignment, or grouping to the multiple selected objects 911, 912, and 913 at a time. The controller support apparatus 100 selects a plurality of objects 911, 912, 913 and then selects a plurality of objects (911, 912, 913) in response to receiving a first user input for a Del key of a keyboard from a first user Can be deleted. The controller support apparatus 100 may move a selected plurality of objects 911, 912, 913 in response to a first user input that clicks and drags a plurality of selected multiple objects 911, 912, 913 . The controller support apparatus 100 can perform an alignment operation based on the initially selected object. As a result, the controller support apparatus 100 can arrange the objects 911, 912, and 913 according to the selected sort type. The sorting operation may be performed, for example, by horizontal alignment that makes horizontal intervals between objects 911, 912, and 913 constant, vertical alignment that makes vertical intervals of objects 911, 912, and 913 constant, 911) and the x-coordinate or y-coordinate of other objects are the same.

9, the controller supporting apparatus 100 is formed on the basis of a start point and an end point of a mouse click in the canvas area in response to an input for moving a cursor while holding a mouse click for a predetermined period of time Objects 911, 912, 913 within a range (e.g., a range of rectangles) 920 can be selected.

According to one embodiment, the controller aiding device 100 may include two or more objects 911, 912, 913 in response to a first user input associated with two or more of the plurality of objects 911, 912, And convert the selected two or more objects 911, 912, 913 into a single object 930. [ For example, the controller support apparatus 100 may group two or more objects 911, 912, 913 by converting two or more objects 911, 912, 913 into a single object 930. The controller support apparatus 100 may select a plurality of objects 911, 912, and 913 in response to a first user input to draw a rectangle or Ctrl + mouse click. With the plurality of objects 911, 912, 913 selected, the controller support device 100 responds to a first user input of a first combination key (e.g., Ctrl + Alt + G) 911, 912, and 913 and provide a graphical representation of the dotted lines around the grouped objects 930. [ As shown in FIG. 9, the controller supporting apparatus 100 may manage the grouped objects 911, 912, and 913 as a single object 930.

The controller support apparatus 100 may convert a single object 930 into two or more objects corresponding to a single object in response to a first user input associated with the single object 930. [ For example, controller assistant device 100 may select a single object 930 in which two or more objects 911, 912, 913 are grouped in response to a first user input associated with a single object 930. The controller support apparatus 100 may release the grouping and remove the graphical representation of the dotted line in response to the first user input of the second combination key (e.g., Ctrl + Alt + U). Thereafter, the controller supporting apparatus 100 may manage two or more ungrouped objects as individual objects.

In addition, the controller aiding device 100 may adjust the size of the object in response to receiving a first user input associated with the object. The controller support device may select a corresponding object when the first user receives a first user input for an object to be resized. The controller support device 100 As shown in FIG. 9, four small rectangular graphic objects may be visualized at the edges of each object for the selected object to provide to the first user. The controller support device 100 may adjust the size of the object in response to a first user input clicking and dragging a small square.

10 and 11 are diagrams for explaining a menu interface according to an embodiment.

The controller support device 100 The centralized monitoring system having the UI interface produced can be stored in the controller supporting apparatus 100 as a JSON format project file, and this file can be called later. Hereinafter, an example of the menu item 510 shown in Figs. 10 and 11 will be described.

FIG. 10 may represent an example of a page item 1010. 10, the controller support apparatus 100 responds to a first user input associated with a "Save" item among page items 1010 for operating a project, and sends a centralized monitoring system having a UI interface to a JSON You can save it as a file. The controller support device 100 Based on the first user input, the name of the project file for the centralized monitoring system having a UI interface can be determined and stored in the controller support device 100 (e.g., a server).

In addition, the controller support device 100 may retrieve a previously stored project file in response to a first user input associated with the "Open" item of the page item 1010, as shown in FIG.

FIG. 11 may show an example of an alignment item 1110. FIG. The controller support apparatus 100 may set the sizes of the plurality of selected objects equal in response to a first user input associated with the "Size alignment" item among the alignment items 1110, The horizontal position of a plurality of selected objects may be set the same in response to an input, the vertical positions of a plurality of selected objects may be set equal in response to a first user input associated with a "Vertical alignment & The horizontal spacing of the plurality of selected objects may be set equally in response to the first user input associated with the vertical interlace alignment item, and the vertical spacing of the plurality of selected objects may be evenly set in response to the first user input associated with the "Vertical interval alignment" item.

input list of objects
sort list by z-index property
for o in objects
draw o on the canvas

Table 4 above may represent a Z index algorithm associated with an object in the canvas region according to an embodiment. The HTML5 canvas may not support Z indexes when drawing objects. According to one embodiment, the Z index may represent a priority in which an object is visualized on the screen. For example, when a part of an object is overlapped, an object having a Z index with a high priority is visualized in an overlapped area, An object with a Z index of priority can be hidden in the overlapping area. The controller support device 100 The algorithm can be executed so that the change can be applied to the display of the external terminal through the Z index function of the object. The algorithm may be as described in Table 4 above. The controller support device 100 Whenever the Z index changes for any object, you can arrange all objects based on the Z index and draw the object by the result. For example, the controller support apparatus 100 may specify a Z index for a plurality of objects, sort a plurality of objects based on a specified Z index, and provide a plurality of objects to the canvas area in an ordered order .

12 to 14 are views for explaining a display object providing a streamed image from a security camera according to an embodiment.

Figure 12 may illustrate an example of display objects. The display object may include a display source object 1230, a display size object 1220, and a display cell 1210 and the like. The controller support device 100 provides a screen control item that allows a first user to create a display source object 1230, a display size object 1220, and a display cell 1210, etc. in the canvas area 530 .

The display source object 1230 may be used by the controller-assisted device 100 to display a source corresponding to the display source object 1230 among a plurality of source images streamed from the security camera in response to a second user input associated with the display source object 1230 And may indicate an object set to select an image. The display size object 1220 may be sized such that the controller support device 100 responds to a second user input associated with the display size object 1220 and the display cell 1210 to size the display cell 1210 to the corresponding display size object 1220. [ To determine the size of the object. The display cell 1210 is configured to cause the controller support device 100 to display the selected source image on the display cell 1210 at a specified size in response to a second user input associated with the display cell 1210 and the display source object 1230 It can represent the set object.

12, the controller supporting apparatus 100 can generate a plurality of display cells 1211, 1212, 1213, 1214, 1215, and 1216 in a grid form at predetermined intervals in the canvas area 530 have. However, the shape and arrangement of the display cells 1211, 1212, 1213, 1214, 1215, and 1216 are not limited to the illustrated ones. In response to a second user input associated with a display cell of one of a display size object 1220 and a plurality of display cells 1211, 1212, 1213, 1214, 1215, 1216, 1212, 1213, 1214, 1215, and 1216 so as to merge at least two of the plurality of cells based on a plurality of display cells 1211, 1212, 1213, 1214, 1215, and 1216. 12, for example, the display cell 1210 can be divided into a total of six cells 1211, 1212, 1213, 1214, 1215, and 1216, and the display size object 1220 is set to a size of 1 x 1 An object set to a size of 2 x 2, an object set to a size of 3 x 2, and the like, and the display source objects 1230 can be shown as being provided as a source image, such as a CCTV and a PC screen .

13 illustrates an example of a display cell size change.

In accordance with one embodiment, the controller aided device 100 may generate a display size object 1321 in the canvas region and, in response to receiving a second user input 1391 associated with the display size object 1321, A display size object 1321 can be set to generate a monitor image of a size specified in the display size object 1321 from the source image. The controller support apparatus 100 may facilitate a first user to easily generate a display size object 1321 that allows a second user to dynamically adjust the size of the source images.

For example, in response to receipt of a first user input associated with a screen control item, the controller support device 100 generates nxm (n and m are each an integer of 1 or more) display cells in the canvas area in a grid form . The controller support device 100 also generates a display size object 1321 in the canvas area and generates a display size object 1321 and a second user input 1392 associated with one of the nxm display cells 1311, (E.g., (1, 1) cell, ((1, 1), (1, 2)) cells of the nxm display cells of a size corresponding to the display size object 1321 on the basis of one display cell 1311 (2,1) cell, (2,1) cell, (2,2) cell) may be merged to set the display size object 1321 to produce a single display cell 1319. [

Specifically, the controller supporting apparatus 100 The size of the display cell is changed in response to the second user input dragging the lower right corner of the display cell or the size of the display cell is changed in response to the second user input 1391 for the display size object 1321 A centralized monitoring system can be authored so that In the latter case, the centralized monitoring system, produced by the controller support device 100, (E.g., 2 x 2 in Figure 13) 1391 (e.g., clicking on a display size object 1321 indicating a particular size) for a display size object 1321, You can choose the size. The size of the display cell can be changed to a selected size, as shown in Fig. As described above, in a centralized monitoring system in which authoring has been completed, the second user is able to access the display source 1321 and the display cell 1311 through a simple second user input to the display size object 1321 and display cell 1311 authored by the first user, The display cell in which the image is displayed can be dynamically adjusted easily and quickly.

Fig. 14 may show an example of connecting a source image to be displayed to a display cell.

The controller support device 100 creates a display source object 1431 in the canvas area and in response to the display source object 1431 and the second user input 1491, 1492 associated with the single display cell 1411, The display source object 1431 is set to generate a monitoring image 1419 having the same image ratio as the source image while matching at least one of the height and the width of the single display cell 1411 from the source image corresponding to the object 1431 . The controller support apparatus 100 may set a single display cell 1419 to provide a monitoring image 1419 to at least a portion of a single display cell 1411 and to provide a black image to the remainder of a single display cell 1419 have. The controller supporting apparatus 100 can maintain the same image ratio of the monitoring image 1419 as the source image, thereby minimizing distortion at the time of enlarging and reducing the image.

For example, the centralized monitoring system authored by the controller support device 100 may include an input 1491 for first selecting a source image from the display source objects 1431 from a second user, Lt; RTI ID = 0.0 &gt; 1492 &lt; / RTI &gt; The centralized monitoring system authored by the controller support device 100 And display the selected source image on the selected display cell 1411. [ In addition, the centralized monitoring system authored by the controller support device 100 may respond to a second user input dragging a display source object 1431 corresponding to any source image into the display cell 1411, And can provide the selected source image to the selected display cell. However, the second user input to the display cell 1411 and the display source object 1431 is not limited to the above-described one. The order of the second user input may be changed, and the input form may be various &Lt; / RTI &gt;

15 is a flowchart illustrating a dynamic display controller support method for providing a plurality of monitoring images according to an exemplary embodiment.

First, in step 1510, the controller supporting apparatus can allow the first user of the external terminal to access the server through the processing unit.

And in step 1520, the controller support device may receive a first user input associated with a screen control item from the first user via the communication portion.

Subsequently, in step 1530, the controller-assisted device generates a display object in the canvas region in response to receiving the first user input associated with the screen control item through the processing unit and generates a display object associated with the display object received from the second user The display object may be set such that a source image corresponding to the display object is provided among the plurality of source images streamed from the security camera in response to the second user input.

However, the operations of the dynamic display controller support method for providing a plurality of monitoring images implemented by the server are not limited to those described above, and the order and details of each operation may be changed according to the design. In addition, the operation of the display controller support method can be performed in combination with the operations of the controller support apparatus of Figs. 1 to 14 described above.

The method according to an embodiment of the present invention may be implemented in the form of a program command that can be executed through various computer means and recorded in a computer-readable medium. The computer-readable medium may include program instructions, data files, data structures, and the like, alone or in combination. The program instructions to be recorded on the medium may be those specially designed and configured for the embodiments or may be available to those skilled in the art of computer software. Examples of computer-readable media include magnetic media such as hard disks, floppy disks and magnetic tape; optical media such as CD-ROMs and DVDs; magnetic media such as floppy disks; Magneto-optical media, and hardware devices specifically configured to store and execute program instructions such as ROM, RAM, flash memory, and the like. Examples of program instructions include machine language code such as those produced by a compiler, as well as high-level language code that can be executed by a computer using an interpreter or the like. The hardware devices described above may be configured to operate as one or more software modules to perform the operations of the embodiments, and vice versa.

While the present invention has been particularly shown and described with reference to exemplary embodiments thereof, it is to be understood that the invention is not limited to the disclosed exemplary embodiments. For example, it is to be understood that the techniques described may be performed in a different order than the described methods, and / or that components of the described systems, structures, devices, circuits, Lt; / RTI &gt; or equivalents, even if it is replaced or replaced.

Therefore, other implementations, other embodiments, and equivalents to the claims are also within the scope of the following claims.

100: Controller supported device
110:
120:
130:

Claims (20)

A method of supporting a dynamic display controller for providing a plurality of monitoring images implemented by a server,
Allowing a first user of the external terminal to access the server;
Receiving a first user input associated with a screen control item for generating at least one of a display cell, a display size object and a display source object from the first user; And
In response to receiving a first user input associated with the screen control item, generating a display object comprising the at least one in a canvas region, wherein the display object received from a second user different from the first user Setting the display object such that a source image corresponding to the display object is provided among a plurality of source images streamed from a security camera in response to an associated second user input
The method comprising the steps of: providing a plurality of monitoring images; The method according to claim 1,
Wherein the setting of the display object comprises:
Setting the display source object to select a source image corresponding to the display source object from a plurality of source images streamed from a security camera in response to a second user input associated with the display source object ;
Creating a display size object in the canvas region and responsive to a second user input associated with the display size object and the display cell to convert the display size object to a size specified in the display size object, ; And
Setting the display cell to display the selected source image on the display cell in the designated size in response to a second user input associated with the display cell and the display source object, step
The method comprising the steps of: providing a plurality of monitoring images;
The method comprising the steps of: providing a plurality of monitoring images; 3. The method of claim 2,
The step of setting the display cell includes:
Generating a plurality of display cells in a grid form at predetermined intervals in the canvas area; And
In response to a second user input associated with the display size object and one of the plurality of display cells, merges at least two of the plurality of cells with respect to the one display cell, &Lt; / RTI &gt;
The method comprising the steps of: providing a plurality of monitoring images; The method according to claim 1,
Creating the display size object in the canvas area; And
Setting the display size object to generate a monitoring image of a size specified in the display size object from the streamed source image in response to receiving a second user input associated with the display size object
The method comprising the steps of: providing a plurality of monitoring images; The method according to claim 1,
Wherein the setting of the display object comprises:
In response to receiving a first user input associated with the screen control item, generating nxm display cells in a grid form in the canvas area
Lt; / RTI &gt;
And n and m are each an integer of 1 or more,
A method of supporting a dynamic display controller to provide a plurality of monitoring images. 6. The method of claim 5,
Wherein the setting of the display object comprises:
In response to a second user input associated with the display size object and one of the nxm display cells, generating a display size object in the canvas area, Setting the display size object to merge two or more display cells of the nxm display cells to a corresponding size to produce a single display cell;
In response to a second user input associated with the display source object and the single display cell, generating a display source object from the source image corresponding to the display source object, Setting the display source object to generate a monitoring image having a same image ratio as the source image while being matched to at least one; And
Setting the single display cell to provide the monitoring image to at least a portion of the single display cell and to provide a black image to the remaining portion of the single display cell
The method comprising the steps of: providing a plurality of monitoring images; The method according to claim 1,
Receiving a first user input associated with a common control item from the first user;
Generating at least one of a button, an image, a text, and a panel in a canvas area in response to a first user input associated with the common control item
The method comprising the steps of: providing a plurality of monitoring images; The method according to claim 1,
The step of allowing the connection comprises:
Establishing a connection with the external terminal based on HTTP (HyperText Transfer Protocol) through a web browser of the external terminal; And
Providing a WYSIWYG editor to the external terminal;
The method comprising the steps of: providing a plurality of monitoring images; The method according to claim 1,
Receiving a first user input associated with a background of the canvas region;
Determining at least one of a background image and a background color for a background area around the plurality of cells based on a first user input associated with the background;
Providing a background of the canvas area as the determined background color in response to determining the background color;
In response to determining the background image, providing the determined background image to the background of the canvas area; And
In response to determining the background color and the background image, overlaying the background image on the background area,
The method comprising the steps of: providing a plurality of monitoring images; The method according to claim 1,
In response to at least one of creating an object, resizing an object, changing a graphic representation of the object, repositioning the object, and merging two or more objects, Automatically updating the project file and storing it in the server
The method comprising the steps of: providing a plurality of monitoring images; The method according to claim 1,
Specifying a Z index for a plurality of objects;
Arranging the plurality of objects based on a specified Z index; And
Providing the plurality of objects to the canvas area in an ordered order
The method comprising the steps of: providing a plurality of monitoring images; The method according to claim 1,
Selecting the two or more objects in response to a first user input associated with two or more of the plurality of objects and converting the selected two or more objects into a single object; And
In response to a first user input associated with a single object, converting the single object into two or more objects corresponding to the single object
The method comprising the steps of: providing a plurality of monitoring images; The method according to claim 1,
Designating at least one property according to an object type of the object;
Responsive to a first user input associated with two or more of the plurality of objects, selecting the two or more objects; And
Searching for a property commonly designated to the selected two or more objects, and displaying the commonly-designated property
The method comprising the steps of: providing a plurality of monitoring images; 14. The method of claim 13,
Generating a binary combination by applying a binary operator to binary flags corresponding to the properties specified for the selected two or more objects; And
Extracting a binary value corresponding to a property common to the selected two or more objects based on the binary combination
The method comprising the steps of: providing a plurality of monitoring images; 14. The method of claim 13,
In response to receiving a first user input associated with the commonly-assigned property, if there is a property commonly designated to the selected two or more objects, collectively assigning the commonly-assigned property to the selected two or more objects collectively Steps to set
The method comprising the steps of: providing a plurality of monitoring images; The method according to claim 1,
Updating the source and action list according to a predetermined document format
The method comprising the steps of: providing a plurality of monitoring images; The method according to claim 1,
Responsive to a first user input associated with two or more of the plurality of objects, selecting the two or more objects;
Designating a first object selected from the two or more objects as a reference object; And
Arranging the remaining objects of the selected two or more objects on the basis of the reference object,
The method comprising the steps of: providing a plurality of monitoring images; The method according to claim 1,
Providing a menu area, a tool box area, and a property area in addition to the canvas area
Further comprising:
Wherein the menu area comprises:
An item for executing an operation for arranging an object, an item for operating a project, an item for modifying an operation, an item for executing a preview operation, and an item for setting environment,
The toolbox area includes:
An item for designating the type of the object to be generated,
Wherein the canvas region comprises:
The area where the created object is placed,
Wherein the property area comprises:
And an item for changing a property of the created object and a property of the canvas area.
A method of supporting a dynamic display controller to provide a plurality of monitoring images. 18. A computer program stored on a medium for executing the method of any one of claims 1 to 18 in combination with hardware. A dynamic display controller support device for providing a plurality of monitoring images,
A communication unit for communicating with an external terminal of the first user;
A screen control for allowing connection of the first user of the external terminal to the device via the communication unit and for generating at least one of a display cell, a display size object and a display source object from the first user via the communication unit; A method comprising: receiving a first user input associated with a screen control item, generating a display object comprising the at least one in a canvas region in response to receiving a first user input associated with the screen control item, The display object being adapted to provide a source image corresponding to the display object from a plurality of source images streamed from a security camera in response to a second user input associated with the display object received from a second user different from the first user, The processing unit
And a display controller for displaying the plurality of monitoring images.

Images