Construction of Train Traffic Monitoring Systems Using SVG

Keywords: train, track circuit, traffic control, remote monitoring

Hideo Nakata, Ph.D.
Mitsubishi Electric Corporation
Advanced Technology R&D Center
Amagasaki
Hyogo
Japan
Nakata.Hideo@wrc.melco.co.jp
http://www.MitsubishiElectric.co.jp

Biography

Hideo Nakata graduated from the Department of Information Science of Kyoto University in 1987 and completed the M.E. program in Information Science in 1989. He has been a researcher at Mitsubishi Electric Corporation since 1989. His research interests are object-oriented systems, user interfaces and visual programming environments. He holds a Ph.D. in information science, and is a member of ACM, the Institute of Electrical Engineers of Japan (IEEJ) and Information Processing Society of Japan (IPSJ).

Masayo Osaki
Mitsubishi Electric Corporation
Advanced Technology R&D Center
Amagasaki
Hyogo
Japan
Osaki.Masayo@wrc.melco.co.jp
http://www.MitsubishiElectric.co.jp

Biography

Masayo Osaki graduated from the Department of Mathematics of Kobe University in 1991. She has been a researcher at Mitsubishi Electric Corporation since 1991. Her research interests include user interfaces, software development environments and program visualization.

Teruhiko Teraoka, Ph.D.
Mitsubishi Electric Corporation
Advanced Technology R&D Center
Amagasaki
Hyogo
Japan
Teraoka.Teruhiko@wrc.melco.co.jp
http://www.MitsubishiElectric.co.jp

Biography

Teruhiko Teraoka is a research engineer at Mitsubishi Electric Corporation. His research interests include interaction design, information architecture, and intelligent systems. He received a Ph.D. in engineering from Osaka University. He is a member of the ACM, the IEEE Computer Society, and the Information Processing Society of Japan (IPSJ).

Tadashi Yamamura
Mitsubishi Electric Corporation
Transportation Systems Center
Amagasaki
Hyogo
Japan
yamamura@ita.melco.co.jp
http://www.MitsubishiElectric.co.jp

Biography

Tadashi Yamamura graduated from the Department of Information and Computer Sciences of Osaka University in 1994, and completed the M.E. program in Information Science of Nara Institute of Science and Technology in 1996. He has been an engineer at Mitsubishi Electric Corporation since 1996. His main works are development of information systems for train and transportation. He is a member of the Institute of Electrical Engineers of Japan (IEEJ).


Abstract


Graphical train traffic monitoring systems are indispensable for accurate service. Recently, such systems are required not only in central supervision rooms but also in stations, on platforms, and in construction sites for railway tracks. In many cases, various portable terminals that implement web applications are used as clients. SVG technology is effective in train traffic monitoring systems.

The main graphic screens of train traffic monitoring systems show two kinds of diagrams: train tracks and train schedules. The former indicates the actual layout of railway tracks, signals, stations, and so on. On the other hand, the latter consists of lines which correspond to the movements of trains, train numbers for each train line, and horizontal lines which show the positions of stations.

Train track diagrams indicate the current position of trains, the condition of signals, the direction of switches, and so on, using simplified drawings of actual railway tracks and signals. To notify operators of this information, the color of tracks and signals are displayed using SVG, and a train's number is displayed in text that dynamically changes according to supervisory data. This paper shows how to automatically update figures and characters on screens without pushing a renewal button of a web browser. Furthermore, by updating only the changed parts on the screens, the proposed system improves updating speed and reduces perceptible flickers.

Train schedule diagrams are charts that illustrate train movements in actual time depicted along a horizontal axis. The diagrams must indicate thousands of train lines by scrolling. Therefore, we improved scrolling functions and added mechanisms to change the indication of train lines according to the train schedule. When a train schedule diagram is converted into a SVG file, train lines and various marks are subdivided in the shape of lattices, grouped together, labeled, and outputted to a definition sentence (def tag). The function uses the rectangle of SVG which receives mouse events and is able to choose train lines and various marks using the above described labels. It displays them according to the movement of the scroll bar slider or changes in the plan.

SVG has many advantages over bitmapped graphics: it can be scaled to a desired size, and file size is also small. By using SVG, we propose a particularly effective implementation method for web applications. We will expand our proposed system to control and operate train services interactively on the graphic screen of web browsers.


Table of Contents


1. Introduction
2. Web-based Train Traffic Monitoring Systems
     2.1 Train Traffic Control Systems
     2.2 Web-based Train Traffic Monitoring Systems
3. Train Track Diagrams
     3.1 Automatic Renewal of Web Pages
     3.2 Changing Method of Partial Web Pages
4. Train Schedule Diagrams
     4.1 Scrolling Implementation
     4.2 Improvement of Scrolling Speed
     4.3 Switch to Display the Train Lines
     4.4 Scaling of Train Schedule Diagrams
5. Conclusion
Bibliography

1. Introduction

Graphical train traffic monitoring systems are indispensable for accurate service. Recently, such systems are required not only in central control rooms but also in stations, on platforms, and on construction sites of railway tracks. In many cases, various portable terminals that implement web application are used as clients; SVG technology is effective in train traffic monitoring systems.

This paper describes how to build a train traffic monitoring system using SVG. By converting the output part to screens into the output to SVG files, and adding it to the train traffic control system using a client server model, web-based train traffic supervisory systems can be built easily and efficiently. Furthermore, SVG has many advantages over bitmapped graphics; for example, it can be scaled to a desired size, and file size is also small.

2. Web-based Train Traffic Monitoring Systems

2.1 Train Traffic Control Systems

Train traffic control systems, which manage and control the operation of trains, have been introduced into the main train tracks, including the Shinkansen. Since all trains are operated according to schedules, train traffic control systems control railroad signals, track switches, and so on. In central control rooms, the operators always monitor the trains to keep them on time. Train traffic control systems improve the efficiency of public transportation, add to passenger service, and increase safety [Kitahira] .

The main graphic screens of train traffic control systems show two kinds of diagrams; train tracks and train schedules. Train track diagrams indicate the actual layout of railway tracks, signals, stations, and so on. On the other hand, train schedule diagrams consist of lines that correspond to the movements of trains, train numbers for each train line, and horizontal lines showing the positions of the stations [Izumi] . An example of a train track diagram is shown in Figure 1 , and a train schedule diagram is shown in Figure 2 .

track.png

Figure 1: Train Track Diagram

schedule.png

Figure 2: Train Schedule Diagram

2.2 Web-based Train Traffic Monitoring Systems

As the internet spreads, web-based systems in various industrial fields are also increasing. Train traffic control systems are not an exception. A demand exists to check the operation situation of trains in such places as central control rooms, stations, platforms, construction sites, and so on. In this case, since client terminals are various display terminals and computing platforms, implementation with web applications is effective. SVG technology is effective for train traffic control systems for which graphic screens are essential.

Developing web-based train traffic monitoring systems by constructing such executable modules to be performed on web browsers as Java Applet and Active-X, is time-consuming. It also requires the development of new client programs. Moreover, train traffic monitoring systems must display the operation situation of trains on the screens in color-coded patterns the represent the track lines and signals. If systems are developed using raster images, such as jpeg and gif, it is necessary to update the entire graphic screen to increase the volume of communication. That is one disadvantage. And raster images cannot be scaled another disadvantage. So the systems are implemented using SVG, which is a vector image.

The outline of our proposed web-based train traffic monitoring system is shown in Figure 3 . In existing train traffic control systems, graphic screens, which display various information, use Xwindow. Web-based systems convert the drawing function of Xwindow to an SVG output routine. Web-based train traffic monitoring systems can be built at minimum development cost. Moreover, the features of SVG are enjoyable.

outline.png

Figure 3: Outline of Web-based Train Traffic Monitoring Systems

3. Train Track Diagrams

In simplified drawings of actual railway tracks and signals, train track diagrams indicate the current position of trains, the condition of signals, the direction of switches, and so on. To notify operators of this information, the color of tracks and signals are displayed using SVG; a train's number is displayed in text that dynamically changes according to supervisory data. This section shows the automatic updating of figures and characters on screens without pushing a web browser renewal button. Furthermore, by updating only the changed parts on web pages, the proposed system improves updating speed by reducing perceptible flickers.

3.1 Automatic Renewal of Web Pages

In a web system using the internet, in many cases communication protocol is restricted to HTTP. Two methods inform servers of changes of data by communication using HTTP: server push and client pull [Musciano] .

  1. Server Push
    This method transmits data from the server side to clients. Notifying clients is possible just as data are changed. However, draw backs exist: the server needs to maintain a connection with clients; special implementation from the server side is necessary; and the web browsers that can be used are limited.
  2. Client Pull
    This method requires data of the server from client sides. Implementation is easy because only a rereading function of the web pages is necessary. But, whether data changes, it is necessary to routinely make inquiries at the server.

Moreover, to automatically update web pages according to the data held by web servers, the following methods exist:

  1. Rereading Web Pages
    This method rereads web pages from web browsers periodically using the refresh attribute of a Meta tag of HTML or script languages. Implementation is easy.
  2. Use of built-in contents
    This method creates executable modules that process communication and renew display; they can be performed on web browsers, such as Java Applet and Active-X. Flexibility is high, but it takes time and effort to develop the modules.

This paper adopts B. Client Pull and i. Rereading of Web Pages, based on ease of implementation, affinity with existing train traffic control systems, and adaptability of web browsers.

3.2 Changing Method of Partial Web Pages

A simple method of updating web pages is rereading the entire web page that users are skimming. However, the following problems must be addressed:

To solve these problems, a method of changing partial web pages that uses the frame and script functions of HTML is proposed. This method does not reread the entire web page shown to the user, but rewrites a small part of the web pages with JavaScript after rereading the web page without the display area. An outline is shown in Figure 4 .

renew_page.png

Figure 4: Renew Web Pages Automatically

Web page Z, which has a frame set consisting of frames X and Y, is prepared. Frame X occupies the entire display, and frame Y does not have a display area. Web page X, which includes all the user's browsing contents, is specified for frame X, and web page Y, which performs the script, is specified for frame Y.

At execution, a user wants to browse web page Z from the web server. Web page Y is reread every fixed time, using the timer performed with the script of web page X ( Figure 4 (1)). Reread web page Y performs the script that rewrites part of web page X ( Figure 4 (2)). The web page, which the user is browsing, is updated automatically, without rereading the entire page. Since web page Y, where only the script was described, is reread, the amount of communication is decreased, and the load can be lessened when the frequency of rereading is increased. Moreover, discontinuation of user operation and screen flicker can be almost eliminated at page renewal.

The creation method of web pages updated automatically is described.

1. Making a fixed web page: Fixed web pages Z and X described above are prepared in advance. Examples are shown below. In the following examples, the web page is automatically updated every 30 seconds (30000 Msec).

Example of Web page Z

<html>
<frameset rows="*" cols="100%,*">
    <frame name="frameX" src="x.html">
    <frame name="frameY" src="y.html">
</frameset>
</html>

Example of Web page X

<html>
<head>
<script language="JavaScript">
<!--
function setSVGAttribute(name, attribute, value) {
    svgDocument = document.sample.getSVGDocument();
    targetObj = svgDocument.getElementById(name);
    if (targetObj != null) {
	targetObj.setAttribute(attribute,value);
    }
}

function reload(){
    clearTimeout(timerId);
    parent.script.location.replace("y.html");
    timerId = setTimeout("reload()", 30000);
}
// -->
</script>
</head>
<body onLoad="timerId=setTimeout('reload()', 30000)">
<embed name="sample" type="image/svg+xml" src="rail.svg" width="100%" height="100%">
</body>
</html>

2. Generation of a SVG file used as the base: The output routine of SVG files was developed based on a screen drawing routine of the existing train traffic control system. Therefore, in this system, the SVG files of the train track diagrams are generated automatically. At generation, this routine adds ID attributes to the figure elements that cooperate with the data. An example of SVG outputted is shown in Figure 5 .

<polygon id="obj1"  fill="white" stroke="white" stroke-width="1" points="112,212 190,212 190,204 112,204"/>
rail.svg

Figure 5: Example of Train Track Diagram

3. Generation of a hidden web page for renewal of a SVG graphic page: Web page Y, without the display area, updates the SVG graphic page according to the situation. The server of a web-based train traffic monitoring system has to generate this page according to changes in the situation. An example of web page Y is shown below. In the following example, the filled color of the figure element, whose ID is "obj4", is changed to red.

Example of Web page Y

<html>
<head>
<script language="JavaScript"><
!--
function set() {
    parent.frameX.setSVGAttribute("obj4", "fill", "red");
}
// --></script>
</head>
<body onload="set()"/>
</html>

4. Train Schedule Diagrams

With train schedule diagrams, train traffic control systems display operation plans and the actual result of trains. This section shows how to display train schedule diagrams using SVG technology on a web browser through the internet or the intranet.

4.1 Scrolling Implementation

Scrolling, as shown in Figure 2 , is indispensable to display train schedule diagrams. Furthermore, special scrolling is required. To continuously display station names and times, the window on the left-hand side which displays station names is scrolled vertically, and the top window which displays times is scrolled horizontally. Such scrolling is unattainable in scroll functions of SVGViewer.

Such scrolling is implemented using rectangle and mouse event processing of SVG. From window size and the train schedule diagram, the size of the scroll bar slider is calculated, and it is displayed by a rectangle of SVG. Based on the mouse event to this slider, its position is changed, and the diagram is scrolled using a transforming function, which is implemented on JavaScript. The output routine of SVG files, stated in Section 2.2 , outputs this JavaScript additionally.

An example is shown in Figure 6 .

scroll.svg

Figure 6: Scrolling of Train Schedule Diagram

<svg xmlns="http://www.w3.org/2000/svg">
<script type="text/ecmascript">
	# Source Code Abbreviation 
	#   scrolling funcions by JavaScript
	#     function startSlide()       : start of slider move 
	#     function endSlide()         : end of slider move
	#     function doSlide()          : scroll diagram according to slider move
	#     function startArrowButton() : scroll start by button push
</script>

<!-- start of denifition -->
<defs> 

<!-- definition of clip for main area -->
<clipPath id="main_area_clip"><rect x="92" y="92" width="382" height="382"/></clipPath>

<!-- definition of clip for station area -->
<clipPath id="left_area_clip"><rect x="6" y="92" width="80" height="382"/></clipPath>

<!-- definition of clip for time area -->
<clipPath id="top_area_clip"><rect x="92" y="6" width="382" height="80"/></clipPath>

<g id ="subject">
	# Source Code Abbreviation 
	#   subjects of train schedule diagram
	#     (train lines, station names, station lines, time strings, time lines, various marks, and so on)
</g>
</defs>

<!-- background -->
<rect x="0" y="0" width="500" height="500" style="fill:rgb(190,190,190);"/>

<!-- main area -->
<g style="clip-path:url(#main_area_clip)" onmouseup="endSlide()">
<use id="main_area" xlink:href="#subject" x="12" y="12" />
</g>

<!-- station area -->
<g style="clip-path:url(#left_area_clip)">
<use id="left_area" xlink:href="#subject" x="6" y="12" />
</g>

<!-- time area -->
<g style="clip-path:url(#top_area_clip)">
<use id="top_area" xlink:href="#subject" x="12" y="6" />
</g>

<!-- horizontal scroll bar -->
<g onmouseup="endSlide()" onmousemove="doSlide(evt, 0)">
<rect style="fill:rgb(211,211,211);stroke:rgb(0,0,0);stroke-width:1;" x="90" y="480" width="386" height="16"/>
<polygon onmousedown="startArrowButton(0)" style="fill:rgb(255,255,255);stroke:rgb(0,0,0);stroke-width:1;"
	points="90,487 105,480 105,495"/>
<polygon onmousedown="startArrowButton(1)" style="fill:rgb(255,255,255);stroke:rgb(0,0,0);stroke-width:1;"
	points="475,487 460,480 460,495"/>
<rect id="slide0" onmousedown="startSlide(0)" style="fill:rgb(255,255,255);stroke:rgb(0,0,0);stroke-width:1;"
	x="108" y="482" width="186" height="12"/>
</g>

<!-- vertical scroll bar ->
<g onmouseup="endSlide()" onmousemove="doSlide(evt, 1)"> 
	# Source Code Abbreviation 
</g>
</svg>

4.2 Improvement of Scrolling Speed

Since a train schedule for 24 hours or three days must be displayed on the screen in a train traffic monitoring system, scrolling is necessary to display tens of thousands of train lines, depending on the case. The method of Section 4.1 cannot smoothly scroll the diagram if too many train lines are displayed. Therefore, we tried to accelerate the scrolling function.

When a train schedule diagram is converted into a SVG file, train lines and various marks are subdivided in the shape of lattices, grouped together, labeled, and outputted to a definition sentence (def tag). The function uses the rectangle of SVG which receives mouse events and is able to choose train lines and various marks using the above described labels. It displays them according to the movement of the slider on the scroll bar. This function is implemented using JavaScript.

Figure 7 indicates that train lines and various marks on the train schedule diagram are outputted to a SVG file. Each block is a subdivided diagram in the size of the domain which can be displayed on the screen. Each area is 2x2 blocks. The upper right area is outputted first, and every area is outputted sequentially. These areas are chosen and displayed according to the movement of the scroll bar slider.

output_subject.png

Figure 7: Output Subject to Improve Scrolling Speed

4.3 Switch to Display the Train Lines

A train traffic monitoring system must select and display the train lines that are required for the operator's surveillance from many lines. If the script function of SVG is used, a function which switches the display of train lines is attainable. A function on the client can switch the display of train lines quicker than the server.

When a train schedule diagram is converted into a SVG file, train lines are classified according to kinds, such as up-train or down-train, plan schedule or result schedule, and grouped together, labeled, and outputted to a definition sentence. The function which switches the display of train lines using these labels is implemented on JavaScript. Figure 8 shows the outline which subdivides and outputs train lines.

output_subject2.png

Figure 8: Output Subject for Switching Train Lines

4.4 Scaling of Train Schedule Diagrams

If a train schedule diagram is expanded using the scaling function of SVGViewer, the scroll bar realized with a rectangle of SVG is not displayed. The scaling function of train schedule diagrams is implemented so that the above-mentioned scroll function won't be affected.

5. Conclusion

By the proposed method, web-based train traffic monitoring systems can be implemented with little extended development, based on existing train traffic control systems. Moreover, SVG has many advantages over bitmapped graphics; for example, it can be scaled to a desired size, and file size is small. By using SVG, we propose a particularly effective implement method for web applications.

As future works, we will expand the proposed system to control and operate train services interactively on a graphic screen of web browsers. More techniques are required to operate interactively the arrangement of trains on web graphic pages. If mouse events of SVG are processed using JavaScript, the exchange of trains is possible by mouse operation to the train lines on web graphic pages. However, such problems as a method of quickly reflecting the results remain to be solved.

Bibliography

[Kitahira]
Recent Train Traffic Control Systems, Masaki Katahira, Shigenobu Yanai, Toshihide Uchimura, Takuya Nagai, Hitachi Review Vol. 48, No. 3, pp.153-160, June 1999
[Izumi]
Train Schedule Diagram Drawing Algorithm considering Interrelationship between Labels, Hirotaka Izumi, Norio Tomii, Computers in Railways VIII(COMPRAIL 2002), WIT Press, pp.489-498, June 2002
[Musciano]
HTML & XHTML: The Definitive Guide, 5th Edition, Chuck Musciano, Bill Kennedy, O'Reilly Media, Inc., August 2002

XHTML rendition created by gcapaper Web Publisher v2.0, © 2001-3 Schema Software Inc.