JP6429953B1 - Integrated system for creating diagrams using a web browser - Google Patents

Abstract

PROBLEM TO BE SOLVED: To create a diagram of a train or bus or to create a track diagram, a diagram using some figure such as a train operation diagram (diagram) or a route table is created and used to improve visibility. . In order to develop a system for producing these on a computer, it was necessary to cooperate with a database, and to have a highly difficult program and a large amount of program syntax for freely controlling figures.
In recent years, there has been a problem that the life cycle of the OS is fast and the developed system does not operate on a new version of the OS.
SOLUTION: Using a script language called SVG and JavaScript, creation and editing can be performed on a Web browser with very little program syntax. In addition, since a web browser is used, any OS that can use a web browser can be used regardless of the type.
[Selection] Figure 7

Description

The present invention uses a SVG, HTML, and JavaScript (registered trademark) (program language for a web browser) , a train or bus diagram, a route table, and a track diagram in a terminal equipped with a web browser that can display transmitted web data. It is a system that creates, edits, transmits, and receives data that uses graphics necessary for train and bus operations.

In recent years, the OS (Operating System) life cycle has been shortened, and a GUI (Graphical User Interface) system specialized for the OS has a drawback that it takes a lot of time to deal with the upgraded OS. . In addition, different types of OS such as Linux, UNIX, or Windows are used as the OS of these systems by railway companies, and the OS-specific system produces data necessary for train operation that uses graphics frequently. For this purpose, advanced technology and a huge program syntax are required, and GUIs corresponding to these different OSs have to be created.
In addition, in order to edit transportation information by a large number of people, a network technology such as an intranet is used, and a technology suitable for it is required.

Japanese Patent No. 45007086

http: // www. svgopen. org / 2004 / papers / TrainTrafficMonitoringSystems / http: // www. hitachi-systems. com / solution / s006 / smartdia /

  Train and bus diagrams begin with the creation of a diagram called an operation chart, and after the basic diagram is completed, a wide variety of data such as vehicle operation charts and route tables are created. These data are frequently used in order to improve visibility.

  In the conventional GUI, a large amount of program syntax is required to handle drawing of a figure, selection and deletion of a figure, and since it is a raster image such as JPG or PNG, redrawing is required for deleting a figure. When it was necessary, or when enlarging or reducing, it was necessary to redraw by multiplying each coordinate by the magnification of enlargement or reduction. Further, the conventional GUI system requires a high level of technology and a large amount of program syntax to acquire graphics and mouse events.

  Then, for viewing and editing by a large number of people, each terminal periodically inquires whether there is a change in the original system through a network line.

  The system according to the present invention can generate diagram data, route data, operation data, simulator data, HTML and SVG data, JavaScript code, a Web server, a network line connected thereto, and a network line connected thereto, and data from the server. It is composed of a user terminal equipped with a Web browser that can display HTML and SVG and can display SVG (Scalable Vector Graph, SVG and HTML) in HTML format (HyperText Markup Language) and XML (Extensible Markup Language), An array or JSON data is generated from each operation data, and the SVG received and sent by the web browser. Part of the data is converted into SVG from the data with JavaScript, and these are displayed on the Web browser. By incorporating the JavaScript event into the SVG XML element, the figure in the train / bus diagram can be deleted, selected, and expanded. Scale, new drawing can be constructed with a small program syntax, and the storage is transmitted by AJAX (Asynchronous JavaScript + XML) communication technology and stored in a database through a Web server.

  The system of Non-Patent Document 2 uses a Web browser, but does not operate unless a plug-in called Silverlight manufactured by Microsoft Corporation is inserted in the Web browser. A plug-in is an additional application. In this case, Silverlight is added to extend the function of the Web browser, and it runs in the browser. However, the program operation does not depend on the browser, and it is C # or Visual Basic. It operates in the same language as a certain GUI. In C # and Visual Basic, a program requires a high level of syntax for creating a raster image. Therefore, the function of the Web browser itself of the present invention is different from that of the present invention in which SVG is displayed by HTML or JavaScript, created, and edited to cause the system to be created with a small amount of syntax.

  And, by implementing the WebSocket function on the WebScript side of the JavaScript (server push) Web server, and using this, the server and multiple users can always communicate with each other, so that changes can be made by one user. Instead of periodically checking from another user's Web browser when it is performed, the change information transmitted from the Web server can be transmitted to other users without delay.

  In Non-Patent Document 1, although there is an indication of such a server push method, there is no description of a specific technique. The WebSocket technology, which is a specific method of server push that makes this possible, has become possible with Web browsers following the recommendations of the World Wide Web Consortium (W3C), which formulates Web browser standard technologies, in 2014 At that time, it was a fictional or very difficult technology. Therefore, in Non-Patent Document 1, as a result, the browser is periodically updated for communication with the server to update the display of the Web browser to solve the problem. When the Web browser is updated, the screen transition occurs. In the case of AJAX and WebSocket of the present invention, the problem of screen transition does not occur at the time of such backward movement, and therefore differs from the present invention.

  Furthermore, in the present invention, the station information and the train speed type, whether it is up or down, are communicated between the web browser and the web server at the time of streaking. By registering the legality in the data through the web server in advance on the web browser, the train number can be automatically assigned by the web server at the time of stripe drawing.

  In addition, the system provided with the web server and route data receives the code generated by HTML, SVG, and JavaScript on the web server, displays the basic screen on the web browser, and creates a track diagram by using JavaScript. to enable. And the drawn track map is preserve | saved at route data through a Web server by AJAX communication.

  The stored track diagram is linked with the operation management system and the Web server via WebSocket, so that the Web server receives the update information of the switch and train position from the operation management system, and the Web server receives the update signal from the Web server. The Web browser receives this, the Web browser receives it, requests the Web server to provide update information data, and receives the updated array or JSON information from the Web server. The new position of the train, the switch, and the signal can be drawn on the SVG and used to display the status.

  Register the simulated circuit of traffic lights and switchboards in the route data created above from the web browser in the simulator data, and also the acceleration and deceleration performance of the vehicle used in that line section in the simulator diagram, station section The maximum speed and average speed of the vehicle, the speed limit due to curves and other factors, the time required to get on and off at the station time zone are registered in the simulator data, and when the simulator starts, HTML and SVG display on the web browser through the web server, It is possible to verify whether or not the scheduled operation of the train can be secured according to the schedule created as described above.

  Conventionally, Patent Document 1 does not aim to create or edit an image by only displaying an SVG diagram on a Web browser. Non-Patent Document 1 is only used to explain how to update the SVG diagram, the display of the track diagram, and the page on the Web browser. Since this is not a train management system based on it, the diagram and track diagram of this case are created with a web browser, and the information from the train operation management system is displayed on the web browser using the track diagram. Different from the invention.

  According to the present invention, it is possible to produce a creation / editing system on a Web browser for data in which a complex diagram by SVG, a figure such as a route table or a line diagram is used with a small program syntax by using JavaScript. In addition, it is possible to share the edited data in real time with other editing people. In addition, it is possible to display the train operation status in real time on the basis of the track diagram that has been created, and by making route data, whether scheduled operation can be ensured using the diagram and route data. You can verify. These systems can be used regardless of the OS as long as the web browser can be used.

The invention of the present invention is a diagram called operation diagram of FIG. 1, operation chart of FIG. 3, route table of FIG. 2, operation sequence table of FIG. 4, creation and editing of these in FIG. 5, schedule of FIG. The operation verification simulator that uses many of these figures is performed by a Web browser using SVG and JavaScript.
When creating a diagram, a system in which the web server 1 and the diagram data 7, the route data 5, the operation data 6 and the operation data 6 and the network line of FIG. 1 is the time data 10 coordinates in FIG. 8 from the diagram data 7 and the station name 15 from the route data 5 and the coordinate data of the station line 14 from the diagram data 7. HTML and SVG, JavaScript and data array or JSON (Java Script Object Notation) data. 9 is generated and received by the user terminal through the network line. HTML, SVG, and data are generated by using JavaScript to generate an SVG XML element, and the diagram of FIG.

This SVG is described in the XML format. By embedding a JavaScript event in this description. For example, in FIG. 20, a blue 11px size “543M” with an inclination of 61 degrees is displayed. “Onmouseover” is a JavaScript event that occurs when the mouse is over the character. For example, When changing the color when the mouse is over, the syntax for changing the color of the character is one line as shown in FIG.

Other mouse events include “onmouseout” that is executed when the mouse is released, and “onclick” that is executed when the mouse is clicked.
When an arbitrary line at 6:20 in FIG. 9 is clicked, the pop-up 20 of FIG. 10 set at 6:20 is displayed because the data of 6:20 is embedded in the XML for drawing the line in advance. When the method is executed , clicking on the line of station information 1 (21) and station information 2 (22) or directly inputting it, going down or up, setting various train speed types 23 and pressing the button, In the form of calling the web browser program language from the web server in the web browser program language of FIG. 11, the time, station information 1 (21), station information 2 (22), up or down, train speed type ( 23) is sent, and the Web server 1 calls the train operation time between stations from the train speed type from the diagram data 7, and calculates the operation time between the station information 1 and the station information 2. Is stored in the memory in the Web browser 4 sends to the Web browser 4 generates a sequence or JSON data allocated to individual ID, as in FIG. 16 in the Web server 1.

  The coordinates of the station line 14 on the horizontal axis and the time line 10 on the vertical axis of the diagram are stored in the memory of the Web browser 4 by arrangement, and the stations in the arrangement or JSON data received in FIG. The departure time is searched from the horizontal and vertical axis arrangements, and the coordinates for creating the stripe 13 are formed and stored in the arrangement. Then, XML of SVG is generated as shown in FIG. 13 from the coordinates stored in the array using the JavaScript syntax of FIG. 12, and the streak 13 is drawn.

  In FIG. 13 of the drawn SVG XML of the streak, a mouse event is incorporated, and the JavaScript set for each is executed when the mouse is moved or clicked as described above. It has become.

  At the time of forming the train time, the Web server 1 makes a setting for giving a train number (a train-specific number such as “315M” used for train operation) that has a law for pre-assignment and saves the data in the data. If so, the train number is entered in the above array or JSON data.

  For example, in the case of regular trains starting and ending at D station, the first two digits start with “10”, and for regular trains starting and ending at E station, starting with “30”, the third digit is going down. When starting with an odd number from "1" and going up to an even number from "2", the first train going up from D station is "102", and going up from E station The first train is given “302”, the second train going up from D station is “104”, the second train going up from E station is given “304”, and the first train going down at the end of D station is given as “304”. Is “101”, the first train at the end of E station is “301”, the second train at the end of D station is “103”, and the second train at the end of E station is “303”. The fourth digit is "M" for trains, "D" for trains, and five digits for high-speed trains with "3" at the beginning and "3102M". is there.

In the system, since the station information 1 and the station information 2 are inputted at the time of the basic setting for the streak creation, first, the first station and the last station are determined by this. Next, with regard to the number of trains, call the train list at the starting and ending stations and types of trains that were set and saved in the memory of the diagram data or web browser, and set the number of trains by going up or down. Count, and the number of the third digit is determined by the following formula: count number × 2 + 2. Similarly, for ordinary trains, the number of counts x 2 + 1 + 2 is the third digit in the following formula. If the calculation results in two digits, the second digit of the train number is moved up. If there is a description to that effect in the train speed type, the alphabet is determined from there and given. If it cannot be determined, a message is sent to the Web browser 4.
Alternatively, after the creation of all the diagrams is completed, the system assigns a train number to each streak one by one from the terminal station and the starting train from the starting train according to the user's instruction, in accordance with the laws.

  Then, the obtained train number is searched in the diagram data and the memory in the web browser 4, and if the same number is not found, the number is incorporated in the array. Send a message.

The diagram shown in FIG. 8 by the Web browser 4 includes a station display unit 15 that displays a station by SVG, a time display unit 16 that displays time, a diagram display unit that includes lines 13 and station lines 14, and a time line 10. There is an operation unit 17 having an operation menu. More specifically, as shown in FIG. 14, the time display unit (id = time), the diagram display unit (id = dia), and the station display unit (id = station) are expressed by <div></div> with the div attribute of HTML, respectively. The display time set by the user, for example, from 0 o'clock to 24 o'clock, from 5 o'clock to 2 o'clock in the setting, SVG that displays the time zone, SVG that displays the station name, and streaks are displayed Each of the x-axis displays all the time zones specified by the user, and the y-axis displays all the station names on one SVG. Three SVGs of the same size are created. The station name SVG is arranged in the div tag of the display unit, the station name SVG is arranged in the div tag of the station name display unit, and the SVG for displaying the streak is arranged in the div tag of the diagram display unit.
This div is displayed with an overlapping layer structure by z-index of a style sheet (Cascading Style Sheet).

The enlargement / reduction of the display is performed by the viewbox attribute of SVG (a function that can specify the display range) when the scroll button of the mouse is rotated. For example, in the case of SVG origin coordinates x0, y0, lower right coordinates x1000, y600 as shown in FIG. 15, by specifying the upper left origin of the value for specifying the display range of the display range as x150, y50 and the width and height, When the lower right coordinate is x350, y500, only the graphics in x150, y50, x350, y500 are displayed on the Web browser. In the reduction / enlargement, the station name display unit, the time display unit, and the diagram display unit control the width and height values of the display range of the SVG by the program language for the Web browser .

As for the left / right and up / down movement of the diagram display, the keyboard control key and the right click of the mouse are simultaneously pressed and moved in the moving direction. The moving method is to move the x-coordinate y-coordinate of the upper left origin of the SVG display range of the diagram display unit in accordance with the movement of the mouse.
At this time, the diagram display unit moves freely in both the x-axis and y-axis, but the time display unit moves the display range only in the program language for the web browser for the x-axis, and the station name display unit moves only the y-axis in the diagram display unit. The display range is moved in the program language for the Web browser by the same amount as. Thereby, the effect that the window is divided and displayed can be obtained.

Alternatively, by pressing the arrow button 9 of the operation unit 5 in FIG. 8, the coordinates of the display range of the SVG are moved as described above, and the movement by the scroll bar is not performed. When the diagram display unit moves to the left and right, the control of the value of the program language for the web browser is changed only for the x coordinate with the same coordinate value as the diagram display unit moved in the SVG display range of the time display unit. Move by that. Further, when the diamond display unit is moved up and down, station name display unit may move the diamond display unit by the movement of the display range by SVG y coordinate programming language for the Web browser of the display range of the station name display part, The time display section is linked to enable split display.

  In Japanese Patent Laid-Open No. 2004-228561, the screen is divided and displayed. However, all the SVG screens displayed on the browser are divided, and the more divided, the program syntax increases and the processing becomes complicated. On the other hand, in the present invention, the SVG of the diagram display unit, the station name display unit, and the time display unit is drawn in one piece, and only a syntax for drawing one SVG is required, so the program is simple and the processing is efficiently performed. . Also, since there is no scroll bar in this case and there is no function definition for it, these Patent Documents 1 and this case are completely different.

  Furthermore, streak display and time line display are all performed by the id attribute and the class attribute in the XML element of SVG, and are performed by associating the attribute value of the id and class with the array. Since the section and the station display section are not handled as an aggregate of areas in the SVG, this is also different from Patent Document 1.

Further, Patent Document 1 tries to control the upstream line and the downstream line on the background screen, the streak screen by the SVG group, but in the control by the group, when it is desired to erase the downstream line, the entire group of the downstream line is controlled. On the other hand, it is not possible to display the down streak when it is desired to display the up streak and the down streak only for the train having the up streak while deleting the down streak.
By controlling the XML element with id and class attributes, the attribute value of the class of the descending train is picked up from the array or JSON data information in the browser memory, and the XML of the class is deleted. Erase the drawing. When you want to display both the up and down streaks of trains with streaks, the present invention, which draws and draws the information from the array in memory or JSON, draws a flexible and flexible system. Is possible.

  When storing the created data, the array (FIG. 16) or JSON is converted into a character string suitable for communication with the Web server 1 by the Web browser 4, and the AJAX technology (Asynchronous JavaScript + XML) is used. If there is an inconsistency that is sent from the Web browser 4 to the Web server 1 through the network line and overlaps or straddles data already existing at the Web server 1, an error message is returned to the browser. If there is no problem, “OK” is returned and registered in the diagram data through the Web server.

  When the completed one is closed and edited again, the Web server 1 calls the data from the diagram data, generates and transmits an HTML, JavaScript, and a diagram data array or JSON data, and the Web browser 4 sends the JavaScript. The SVG XML element is generated from the data received in response to the above command and graphic data such as a diagram and a route table is drawn.

  As shown in FIG. 6, “tr4” is embedded in “id” and “class” in the XML element. This is used as an ID for managing diagram data, and when changing elements (changing colors or deleting figures) in JavaScript, and when editing a streak, clicking on the streak starts from this ID “tr4”. The array or JSON is called, and a time table pop-up 30 is displayed as shown in FIG.

  Among these, “tr4” is an ID used on unique data assigned to each train from the first station to the last station. Further, in operation data, in operation 1, the ID is tr1, tr4, tr6, tr7. If the train time 31 of the pop-up 30 is edited and the time diagram of tr4 is changed when combined and registered in the data and assembled from the operations shown in FIG. 2, compatibility with the timetables tr1 and tr6 before and after may be lost. .

  For example, a train based on the route shown in FIG. 2 and a crew member whose ID is tr1 arrives at Nagoya Station at 1:10, and by turn, a train at tr4 leaves Nagoya Station at 1:15. Arrives at the station at 1:40. It is assumed that tr6 is a vehicle operation that leaves Kozoji Station at 1:45 by turning back tr4.

  When the time of tr4 is edited to set the time to arrive at Nagoya at 1: 8 and arrive at Kozoji Station at 1:50, the train time is independent, so it is valid, but tr1, tr4, The tr6 operational data will not be compatible with each other and will not be established. Similarly, the same thing happens when the departure or end station of tr4 is changed.

As a process in this case, when the time is changed in the pop-up 30, the arrival time of tr1 before tr4 is compared with the departure time of tr4. If the departure time of tr4 is large, it returns true, and if it is small, it returns false. indicate. Further, comparing the tr4 arrival time with the next tr6 departure time, true is returned if the arrival time of tr4 is smaller than the departure time of tr6, and false is returned if it is larger.
For the station, it is verified whether the arrival station of tr1 is the same as the start station of tr4, the start station of tr6 and the end station of tr4 are verified, and if they are not the same, an error is displayed.

  When there are a plurality of users 11 and users 12 in FIG. 7 who perform editing, a WebSocket is installed in each Web browser of the Web server 1, the Web browser 4, the user 11, and the user 12. In the WebSocket, a session ID that is a unique ID is assigned to each user from the Web server 1, and communication between each Web browser and the Web server 1 is held by the session ID.

  When one user 11 sends editing information to the Web server 1 and editing is not consistent, the Web server 1 uses the session ID to send an error message only to the edited user 11 to the Web browser. Reply to If there is no problem such as compatibility, the message is registered in the data and a message notifying all users (Web browser 4, user 11, user 12) of the change is sent from the Web server 1 to the browser of each user by WebSocket. Inform you that there was.

  The browser 4 and the user 12 that have received the change message are individually determined whether or not to update, but when the user 12 decides to update, the Web browser 1 of the user 12 is the Web server 1 by JavaScript of FIG. Calls JavaScript.

  For example, when the user 11 changes the train speed type of the tr4 stripe, if there is no problem in the change, the web server 1 deletes the tr4 stripe and forms a new inter-station time, and deletes the old array or JSON. This command and a command for drawing a new stripe are sent to the user 11, and when the browser 4 chooses to update, the Web server 1 sends the same command to perform processing in each user's Web browser.

When printing a diagram, the Web browser only supports A4 paper, and it is not suitable for printing a diagram whose A2 or larger paper is deformed or whose horizontal length is 4 meters or more.
Therefore, when printing a diagram, the Web server 1 uses the Apache FOP API to generate an SVG file of the diagram from the data on the Web server 1, temporarily put it in a directory, and convert it to PDF using the API. The temporary SVG file transmitted to the Web browser is deleted. Thereby, the degree of freedom of selection of the printing paper can be increased so that printing can be performed on A3, A2, and A1 deformation paper and roll paper.

  In the railway, a track diagram as shown in FIG. 5 is created, and the position of the switch 48 and the position of the traffic light 47 are described therein. By creating this using SVG and JavaScript, it is possible to save labor in the production of the operation system and verify the produced diamond.

  The Web server 1 generates HTML and JavaScript, an array or JSON data, configures the basic screen of the user, and transmits it to the Web browser 4 of the user. The web browser displays the basic screen from these, and the user specifies the scale of the route map on the basic screen, and selects whether the line 46 is a single line or a double line with one vertical line, or a double line with two vertical lines. After that, components such as a traffic light 47, a curve 49, a home 45, and a switch 48 are input on the Web browser 4 by inputting a distance 44 in units of kilometers from the starting point of the track.

  The arranged parts and distance information are stored as an array in the memory in the Web browser 4 by the array, and when the storage is executed, the array is converted into a character string suitable for communication with the server, and the Web server using the AJAX technology 1 is recorded in the route data 13. If there is no error at this time, “OK” is returned to the Web browser 4. If there is an error, the error content is returned to the Web browser 4.

  When editing this, the Web server 1 makes an inquiry to the route data 13 through the Web browser 4, and HTML, JavaScript, and route part data are arranged or JSON-converted and sent to the Web browser 4, and the Web browser 4 uses JavaScript. Analyze the sequence to construct and display SVG XML. When the data is edited, it is stored in the route data 13 through the Web server 1 using the AJAX technology.

  In the system including the Web server 71 and the operation management system 72 of FIG. 18 and the route data and the terminal provided with the Web browser, the operation management system 72 sends the status of the device and traffic light, the train number and the position thereof to the Web server 71. Based on this, the Web server 71 array or JSON data is generated, and this data, HTML, and JavaScript are sent from the terminal 71 to each Web browser of the terminal 74, and the Web browser analyzes the data by using JavaScript, and the SVG in FIG. Is displayed, and a track diagram, a train position 50, and a track state 51 are displayed.

  At the same time, a WebSocket connection is established between the Web server 71 and the Web browser of the terminal 1 to the terminal 4, and when there is a change in the position of the train, the traffic light, or the switch, the information is transferred to the operation management system 72. Is sent to the web server 71, and a signal indicating that the web server 71 has been updated is sent to each web browser through the web socket. Based on this, the Web browser requests the Web server 71 for new sequence data by calling JavaScript from the Web server using JavaScript, and the Web server 71 is a command for deleting the element before being changed from the information received from the operation management system. A modified array or JSON is generated, and a command for drawing it is transmitted to the Web browser as JavaScript. The browser that received it deletes only the SVG that is no longer needed from the array, draws and displays a new element in SVG, and ends the update.

  Using the route data, the route data signal and the movement of the switch are input to the simulator data 8 by the Web browser 4 via the Web server 1. For example, when the on-site traffic signal “11LB” in FIG. 5 shows a progress indication, the output indication of “13R” always shows a stop indication, and other circuits are not shown as simulated data. sign up.

In addition, performance such as acceleration and deceleration of the train used on the route is registered in the simulator data 8 from the Web browser 4 via the Web server 1.
Next, the passenger boarding / alighting time is measured and counted for several days for each time zone, holiday, and weekday, and registered in the simulator data 8 through the Web server. In the server, the concept of process capability is applied to calculate the average value by summing up the boarding times for each time zone. Next, a standard deviation is calculated, and so-called 3 sigma is calculated by multiplying it by 3.

The average value is a normal getting-on / off time, plus / minus sigma takes more than that, and minus-3 sigma is the time when getting-on / off ends earlier than the average.
When the simulator is started, the Web server 1 generates HTML format, SVG format, JavaScript, diagram data, train performance data, and boarding / alighting time for each station time zone by array or JSON, and displays FIG. 6 on the Web browser. The train is operated based on the diagram data created as described above, and incremented every second by the JavaScript timer, and the time is displayed in 61. Each train is operated based on a traffic signal that is shown as time based on the diagram data, and each traffic signal and switch are automatically controlled based on the simulation circuit registered above.

The train adds the acceleration as the speed every second, and the deceleration is calculated by subtracting the deceleration from the speed every second and calculating the mileage based on the subtraction. The train position 62 is displayed in a simulated manner.
When a delay occurs in the train on the simulator, 63 is displayed as a delay message to inform that the scheduled operation is not secured.

In addition, the stop time of each train forms a stop time randomly between the above average value plus 3 sigma or minus 3 sigma, but the sum of the arrival time and the randomly formed stop time is The train is delayed on the simulator by setting the time set before the departure time set for the diamond and setting the time set for the time set when the time is exceeded . Then, it is possible to verify whether or not the train can be operated on time.

Example of operation chart Route table example Operation chart example Operation sequence table Example of track diagram Example of diamond verification simulation System configuration diagram of diamond creation Operation chart creation screen on a web browser Example screen 1 for creating a diagram on the operation chart Diagram creation example screen 2 on the operation chart Syntax for invoking JavaScript with JavaScript Syntax for creating XML elements of SVG with JavaScript SVG XML created with the syntax of Figure 12 Screen structure of the operation chart on the web browser Description of SVG's viewBox Example of server generated array Screen during diamond editing Configuration example of operation management system SVG train operation status monitor screen XML when drawing text with SVG JavaScript when deleting SVG elements

Claims (4)

A system comprising a route data and operation data, a diagram data, a simulator data and a web server, and a diagram creation and integration device comprising a user terminal installed with a network line connected thereto and a web browser connected to the network line The operation management integrated device provided with the operation management system connected to the Web server of this integrated device through a network line displays the data and SVG that the Web server calls from each data from HTML, the program language for the Web browser, and the diagram data. The data necessary for processing is composed of character strings and numerical sequences, and these are transmitted to the Web browser. The Web browser that receives them composes the elements of the SVG from the character strings and numerical sequence data by executing the program language for the Web browser. Produce the composition in the process In the element, the event that can execute a specific method of the programming language for the Web browser when the user operates the mouse on the figure, the time and station name that the figure draws, and the station name are described. A diagram that is an operation chart is drawn, and when the user clicks on an arbitrary time line or an arbitrary station line, the event described in the element of the SVG and the station name or the line indicated by the clicked line are displayed. When the time, station information, and train speed and type are sent to the Web server method over time, the Web server calls the standard operation time according to the train speed and type from the diagram data. and to calculate the time between the station, Web browser to create a string and sequence data based on it Dia create integrated system, characterized in that by the streaks drawing return, to allow the creation of a train of diamond. The diagram creation integrated system according to claim 1, wherein the diagram drawn and displayed in SVG on the Web browser is composed of a time display unit, a station name display unit, and a diagram line display unit according to each hierarchical structure in HTML. In each layer, the SVG of the same size is drawn in the time display section, the station display section is drawn in the station name, and the diagram display section is drawn in the diagram streaks. Each SVG is the height of the SVG. By specifying the width and SVG display position, the SVG function that can be controlled by specifying the display range, which is a function of the SVG, can be used to specify the position and size of the display range by user operation. The designation is applied to the SVG displayed in each layer, and the operation to move the diagram to the y-axis or x-axis by the user's operation The web browser program language is free to move the y-coordinate and x-coordinate of the diagram streak display unit, but in conjunction with the movement, the time display unit is a program for the web browser when the x-coordinate of the diagram display moves. If only the x coordinate value specified in the SVG display range is changed according to the language and the same amount is moved, and the y coordinate of the line display portion of the diagram moves, the program language for the web browser will change the y coordinate of the range where the SVG is displayed. A diagram creation integrated system using a web browser that can display a diagram divided into a station display unit, a time display unit, and a diagram streak display unit by moving only the same value. In the diagram creation integrated system according to claim 1, the web server composes HTML, a program language for the web browser, a character string, and a numerical sequence data, and transmits the data to the web browser of the user terminal. The basic screen is displayed in SVG, and the user specifies the scale on the basic screen, and inputs the distance in kilometer from the starting point of the track for the traffic signal, the platform of the station, the switch, the data of each track of the curve Then, the arranged parts and distance information are stored as an array in the memory in the web browser, and when saving is executed, they are converted into a character string and a number string suitable for communication with the server and transmitted to the web server. Vehicles that are stored in route data through a Web server, and that are further incorporated in this route map to simulate the operation of the switch and the operation of the traffic light, and are used on that route Performance data is input and stored in the simulator data via the web server of the diagram creation integrated device, and the passenger boarding / alighting time is divided into a time zone, a holiday, and a weekday to measure and total several days, and the web server By registering in the simulator data through the server, the server calculates the average value and standard deviation by summing up the boarding and exiting times for each holiday time zone and weekday time zone. Multiply 3 to calculate 3 sigma, save the value obtained by adding or subtracting 3 sigma from the average value as the lower limit, save the value obtained by adding 3 sigma to the average and save the value, and start the simulation. Are HTML and SVG formats, Web browser programming language, diagram data, train performance data, and lower and upper limit values for the time of getting on and off at each station time zone. Generated by the column data, and display returns to the Web browser, to service the train on the basis of the diamond, the programming language of the timer for the Web browser, continue to add to per second, each train on the simulation is based on the diamond data It is operated based on the operation time and the traffic signal shown, and each traffic signal and switch are automatically controlled based on the simulation circuit registered above, and the train accelerates based on the train performance every second. , Deceleration is decelerated every second based on the train performance from the speed, the train distance based on it is calculated and displayed on the SVG, and the train position at a certain time is displayed in a simulated manner, and at each station of each train The time between the minus 3 sigma lower limit value and the plus 3 sigma upper limit value of each station's getting-on / off time at the stop time determined between the arrival time of the timetable setting and the departure time by the timetable setting However, when the sum of the arrival time and the randomly formed stop time is before the departure time of the diamond setting, the departure time of the diamond setting is exceeded, and when it exceeds it, it is over Whether or not the train can be operated on time by informing the train that a delay occurs on the simulator due to the time, and informing that the on-time operation is not secured by displaying a delay message when it occurs Integrated diagram creation system using a web browser that can verify the above. The schedule creation integrated system according to claim 1, wherein the operation management system connected to the Web server transmits the status of the switch and traffic lights, the train number and the position thereof to the Web server, and receives the Web from the received data. The server generates character strings and numeric data, HTML, and a web browser programming language and sends it to each user's web browser. The web browser analyzes the data using the web browser programming language and composes the SVG graphics drawing syntax. A track diagram, train position and track status are displayed. At the same time, a WebSocket connection is established between the web server and the web browser. When there is a change in the train position, traffic light or switch, The information is sent from the operation management system to the Web server, and the WebSocket is updated with a signal from the Web server. The web browser sends a request to the web server for a new character string and numeric data, and the web server deletes the SVG element before being changed from the information received from the operation management system. A command to draw the command to be changed and the changed information by the character string and the numerical sequence data is transmitted to the Web browser as the program language for the Web browser, and the browser that receives it analyzes the character string and the numerical sequence data , and becomes unnecessary. Clear the drawn figures and characters in SVG, or, new SVG to exit the update to the display to draw the figures and characters by, diamonds create an integrated system with a Web browser that can display the status of the line and train.