For this example, we should create the graphics first, showing pedestrian crossing from the above position. This picture will be splitted to few parts; some of them will be active on a mouse button click, some (with pictures of the traffic lights) will change apearence during cycle.
The activation is done by clicking to picture, representing the road near the zebra crossing. The function, activated by this, is called "jedeauto" (English: a car is approaching):
<img src="o6e.gif" border="0" onclick="jedeauto()"> |
The left and the right part of the road picture are the same. All of the pictures have the same size. Pictures had been created by use of MS Windows Paintbrush and saved in the GIF format.
Pictures are arranged to a table without borders, to prevent a web-browser to reaarange them in the case of small browser window. There are three pictures horizontally and three vertically.
The table itself has two more lines - in the first and in the last line, the button for a pedestrian is presented:
<input type=button value="Button for pedestrian" onclick="dechodec()"> |
Both activation, either by clicking the "road" picture, or by clicking the button for a pedestrian, starts a traffic light signal sequence. If one sequence has been lunched and another event (mouse click) is presented, the next one is remembered in the memory, in the "a" and "c" variables (from the Czech - "a" for a car, "c" for a pedestrian; the appropriate value for being activated is "ano", anything other means inactive state, so initialization is to "ne", which means "no"):
var c = "ne"; var a = "ne"; |
The values of those variables are reset back to this value ("no"), as soon as cycle ends.
The traffic lights task is the classic sequence task, with predeclared sequence of the next state from any state. Change to the next state can be either after satifying a condition (in this case, sequence can be branched), or after passing some predefined time. In our case, nearly all of the state changes will be after time passing (except the decision, if the one sequence ends, if the next sequence will be pedestrian, or a car sequence). To change a state after defined time, we need to set-up a timer in Javascript - for example, execution of a function "hlavni()" after 3333 miliseconds (3.333 seconds) can be preset by:
setTimeout("hlavni()", 3333);
|
Note, that the Javascript is fully multitask, during this time you can use the web-browser (filling input areas, clicking buttons), or other Javascript commands can be exacuted. We need to chech, that our sequence cannot be executed twice.
One of possible solutions could be a separate Javascript function for each of state, but more common solution is to use a state variable, representing a possition in the sequence diagram. In our case, it can be assigned to "s0" (initial and idle state), c1 to c3, if sequence of green light for pedestrian is being generated, or s1 to s5, if sequence for cars is being generated. Note, that both sequences contains the "all red" signal as the last state, because of this is important not to be made shorter (to allow pedestrians or even cars to leave the crossing), and cannot be executed on the start of the sequence - as a first, because this time differs for cars and pedestrians, and as a second, because on the beginning of the sequence it will take an unnecesery time, makes traffic less fluent.
The determination, which part of program code should be executed, is done by the do-case construction, which look similary, like in a C++ program, starting with the commnd "switch":
switch (state_variable)
{
|
Inside curled brackets, there are individual possible values of the switch variable, each of them in a form like:
case "individual_value": |
On the end of an individual value handling, the "break" command has to be included, to prevent all the rest of commands in the do-case construction being executed:
break; |
This is the so.called serial version of the do-case construction. This is a little cumbersome in compare with the form of paralel do-case construction, used in the Algol programming language. This is possible, that the C++ language authors didn't knew the Algol at this time.
If the "case" is called, than this state ends and next is being called. At the same time, next state value is set and the picture of traffic lights is changed. For example, transiton from the state s3 to s4 looks like:
case "s3":
document.o3.src="o3o.gif";
document.o4.src="o4o.gif";
stav="s4";
setTimeout("hlavni()", 3333);
break;
|
The last "case" event in the sequence should (instead of changing traffic lights signals, because there are the "all red" signal from previous state) set the initial state (s0) and check, if there was an event of car approaching or pedestrian pressing button during the last sequence. Note, that in the presented example, the unnecessary reseting of the red lights is done. This is typical in more complex tasks, that in each of state, mainly when restarting the initial state, most of variables are set to default values. This is generally thought as a good solution to make sequential systems more reliable.
Execution of the whole cycle is then done by the check_a_c() function, which checks, if there was demands during previous cycle, and if there was any, executing the main sequence function, the "hlavni()" function (the name means "main", but in programming language, the "main" resembles wrong assumption - the "hlavni()" function is just the core of sequence, not main program to being executed on start).
Whole example is here. Use View source (in Czech: "Zobrazit zdroj" or "zdrojový kód") to see, how it works.
