Getting javascript to control traffic lights

[david77]

When I was teaching 25 years ago, I wrote a program in Turbo Pascal to represent an on-screen microprocessor so that students could see their programs working. I also wrote progs for models for student exercises. Now that I am retired, I would like to get these working on the web. So far I have traffic3.htm at http://homepage.ntlworld.com/stonebanks/traffic3.htm using svg graphics and traffic5.htm at http://homepage.ntlworld.com/stonebanks/traffic5.htm using canvas -see http://homepage.ntlworld.com/stonebanks/modelinfo.htm I have added a button to control the lights - but it doesn't work. I would appreciate any advice persuading javascript to control these lights. Thanks

[justsomeguy]

Check your error console, there are syntax errors in the turn_on and turn_off functions. You have the parameters quoted so that they're strings instead of identifiers. There are some links in my signature about the various error consoles in browsers.

[david77]

Check your error console, there are syntax errors in the turn_on and turn_off functions. You have the parameters quoted so that they're strings instead of identifiers. There are some links in my signature about the various error consoles in browsers.

Thanks but - where is a link to "my signature" and what's an "error console"? I don't know what I am doing. All I want to do is change the fill color of a circle, initially just to get me going, from a button click. I don't care whether I use SVG or Canvas for the graphics. I looked at Raphael - that shows me how to draw a circle but I couldn't see how to define the fill color. I have done a fair amount of javascript programming - my CGT calculator runs to over 1,000 lines of code, but this is my first attempt at graphics. I would put up with it running on only one browser - I'll worry about other browsers once I get something working.

[thescientist]

a signature on a forum is anything that a user can set to display with every post they make. Look at JSG's posts. underneath every post is the same text/links/info. That's his signature. If you read it, you will find what he's talking about. an error console is available in all modern browsers. it's show console logging and and any errors in the javacript code that happen while the page is running. if you're scripts aren't working correctly, this is the first place to look. Basically, if you've done programming, you know about debugging. You need trace the steps of your scripts/applications to make sure they are working right. When there are errors, you want to know about them. For web development, you use the browsers console. So, have the console open while you run your page, and you should see the errors JSG is talking about.

Edited March 8, 2012 by thescientist

[david77]

Thanks - when I have had trouble in the past, I have enabled error reporting in IE and then used the Microsoft debugger - but IE doesn't work with SVG. I have now found the error console in Opera that I have been using - but there is masses if info from pages that have been run. I must find out how to clear it so that I can see new info for my page. Thanks again

[thescientist]

first link looks goodhttps://www.google.com/#hl=en&output=search&sclient=psy-ab&q=clear+out+error+console+opera&oq=clear+out+error+console+opera&aq=f&aqi=&aql=&gs_sm=3&gs_upl=93l4118l0l4404l29l25l0l3l3l0l111l1827l22.3l28l0&gs_l=hp.3...93l4118l0l4404l29l25l0l3l3l0l111l1827l22j3l28l0.llsin&pbx=1&bav=on.2,or.r_gc.r_pw.r_cp.r_qf.,cf.osb&fp=f20844cc91153529&biw=1440&bih=779

[david77]

It looks as tho http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html#interactivity provides the answer to my query.<script><![CDATA[function changeFill(){C=document.getElementById("C")C.setAttributeNS(null,"fill","black")}]]></script><circle id="C" cx="80" cy="100" r="22"fill="grey" onclick="changeFill()"/></svg> Thanks for advice.

[david77]

Thanks for pointing me to the error console. I've never found it before and I wrote my first web pages over 15 years ago. My traffic lights work http://homepage.ntlworld.com/stonebanks/traffic9.svg so now I will try to get the on-screen microprocessor working.

[david77]

If I get my on-screen processor working, can I then get it to access the traffic lights page? I had 2 processors, and 8-bit one based on the Z80 and a 16-bit RSIC processor running ARM's Thumb code. I also had a BASIC interpreter. Any of those could drive any one of half-a-dozen models, so I'd like to keep the pages separate and have an include or uses line somewhere. Can you please tell me how to do it? Thanks

[justsomeguy]

Everything would need to be on one page, but you can define different things with a common API in different Javascript files and then have some way to choose which one the program should use.

[david77]

I had 3 'drivers' (2 processors and a BASIC interpreter) and half a dozen models. Putting that lot in a single file would make it massive. I only one bit of code for each item, so can I have an html page to select which one? So can I link driver1+model1 on one page, driver1+model2 on one page but without modifying the driver1 code? I don't mind a copy and paste to create a page, but I don't want several copies of the same code. Can I do it? cpu1cpu1+digital i/ocpu1+seven segment display... RISC RISC + digital i/oRISK + seven segment display... BASIC interpreterBASIC + model 1BASIC + model 2etc.

[justsomeguy]

So can I link driver1+model1 on one page, driver1+model2 on one page but without modifying the driver1 code?

As long as they are designed to be interchangeable, where they would have a common API or something like that. The code doesn't all need to be in 1 file, you can have one HTML page which links to multiple Javascript files to load all of the code before it starts running. So you can at least split up the various drivers and things in different files and just all load them on the same HTML page.

[david77]

Thanks - that sounds promising

[david77]

The latest traffic lights: http://homepage.ntlworld.com/stonebanks/traffic11.svg and cpu http://homepage.ntlworld.com/stonebanks/cpu6.svg I have some of my cpu working but I need a way to read a user's machine-code text input into array mem[].I tried a pop-up window with an input text box, but how do I get the data from the pop-up window to my svg mem[] array? Any suggestions, please?

[justsomeguy]

You can call a function on the parent page from the popup. When you open a popup, code on that popup can refer to the page that opened it as window.opener. If you have a function on that page called save_data, for example, then the popup can call it using window.opener.save_data.

[david77]

I have now got some of my CPU working and I have tried to put it on a page with the traffic lights. However, the CPU is full-size but the traffic lights image is about half-size. They should both be the same size, and they are if viewed separatelyhttp://homepage.ntlworld.com/stonebanks/cpu11.svgand http://homepage.ntlworld.com/stonebanks/traffic12.svg The CPU image is centered wile the traffic lights are on the left. I don't understand that. They should both be the same. If I put two CPUs side by side in a table, the CPUs are both full sizesee http://homepage.ntlworld.com/stonebanks/cpuandcpu.htm Originally, the traffic lights were on the right-hand side of the page with x co-ordinates in the 600 to 1200 range. I have amended the x co-ordinates for traffic12.svg to be in the range 0 to 600, the same as the CPU, but the traffic lghts image is smaller then that of the CPU when put together see http://homepage.ntlworld.com/stonebanks/cpuandtraffic.htm Can anyone please suggest why?

[david77]

I guess there's something wrong with my traffic lights page - it's too small however the two are put together: http://homepage.ntlworld.com/stonebanks/trafficandcpu.htm http://homepage.ntlworld.com/stonebanks/trafficandtraffic.htm

[david77]

It was the first line. I had opened it with viewBox="0 0 1250 710" I have changed that to be the same as the CPU page viewBox="0 0 625 710"

[david77]

Thanks JustSomeGuy for your post #15 about getting data from a popup window to the parent - I've got that working. The two images cpu14.svg and traffic14.svg are embedded in a simple HTML table in cpuandtraffic.htm with links to those at the bottom of www.stonebanks.co.uk I now need a way to get a CPU OUT instruction to change the traffic lights, and for traffic sensors and wait button to be read by a CPU IN instruction. I used a table to get the two images side-by-side. The two images and javascript codes are id="cpu" and id="traffic" I'm hoping that those ids will help to get the two bits talking to each other. I would appreciate any advice please. If I get this working then I will then try getting an assembler working in javascript. Thanks for any help.

Edited March 30, 2012 by david77

[justsomeguy]

Assuming this link works, the information to do that would be located here: http://wiki.svg.org/Inter-Document_Communication

[david77]

I am now trying to get my CPU working on the web - see http://homepage.ntlworld.com/stonebanks/cpu14.svgClick N (new prog) will bring up a page with a bit of machine code. Click on the bottom of that page to paste into memory. M - executes one microcode step, and T (trace) executes a full CPU instruction.I would like S (slow) to call the trace function until stopped by clicking any button except T, S, or G (go - not yet working).function fntrace(){ // this executes one instruction until the microcode is "z"var ch, done=false;ch = fnmcode();if (ch=="z") {done = true;} else {setTimeout("done=fntrace()", 200);}settext("screen3", "done="+done); // just to see what's happening return done; }function fnslow(){goslow=true;var done = false;done = fntrace();if (done) {setTimeout("done=fntrace()", 200);}}Can someone please help?

[justsomeguy]

You should save the return value of setTimeout to a global variable, so that you have a global variable that holds the timer ID for the slow function. When any other button is pressed that should stop it then you can use clearTimeout with the timer ID to stop that from executing again.

[david77]

Thanks for help so far. I've now got the CPU working slowly (although not fully tested). I now want the CPU to control the traffic lights. I have a parent page cpuandtraffic3.htm which is simply: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> <html><head><title>CPU and Traffic Lights</title></head> <frameset cols="50%, 50%"><frame src="cpu14.svg" align="top" name="cpudoc"><frame src="traffic14.svg" align="top" name="trafficdoc"></frameset> </html> My CPU fnlights() code is triggered by onclick on the 'L' button function fnlights() {var lite, attrgoslow=false;var traffic = parent.document.getElementById('trafficdoc');var doc = traffic.document;lite = doc.getElementById("x1red");attr = lite.getAttribute("fill");if (attr == "red") { x1red.setAttribute("fill", "black"); }else { x1red.setAttribute("fill", "red"); }} and I am trying to change the colour of the traffic light<circle id="x1red" cx="175" cy="200" r="10" fill="red"/> Thanks for any advice. I should have added - Opera reports Event thread: clickUncaught exception: TypeError: Cannot convert 'traffic' to objectError thrown at line 780, column 0 in fnlights() in file://localhost/C:/Documents%20and%20Settings/Computer/My%20Documents/SVGexamples/cpu14.svg:var doc = traffic.document;

Edited May 14, 2012 by david77

[justsomeguy]

There may be an issue running that locally, it would probably be good to put it online and test it there.