A virtual breadboard

manuka

Senior Member
Dippy predictably will now assume I've "died & gone to heaven". It's certainly on my wavelength, & no felt tip pens are involved! Egad- even the R colour codes suitably adjust. Expect to see this popping up everywhere to better present layouts (my next SC article in fact)
Stan.
 

Attachments

Last edited:

westaust55

Moderator
On the MFOS website the line:

"Make sure you order DIP package chips for MFOS boards.
No offense SOP packages but
gentlemen prefer chips with longer legs." :)
 

Andrew Cowan

Senior Member
Circuit Wizard can do breadboard simulation, as well as modelling.

The only PIC simulation is via flowcharts, however.

A
 

Dippy

Moderator
Looks pretty. And pretty useful for presentations for schools too.

I bet Stan emails the authors so he can have a virtual felt tip pen :)

That Java Breadboard simulator made my Browser crash (twice) so I won't be trying that again :(
 

manuka

Senior Member
Mmm-I've found arranging LEDs vertically requires rather too much later graphics editing. R sizes need to be selectable too perhaps,as they're too large for tighter packing. Pigtail options would be nice too, as would the ability to rotate DIP ICs 180 degrees. The BB holes are not uniform in brightness either, which restricts copy & pasting.

All manner of later tidying with ones graphics editor is easy enough of course- 08M sample below- but IMHO the program needs further tweaking still. Dippy- RED & BLACK rails added just for you. Stan

UPDATE- just to hand. The author & I have been in touch, & he's kindly considering suggestions. Any further you want to add?
 

Attachments

Last edited:

slimplynth

Senior Member
Westy, did you right click view source ans do some tinkering?

Code:
<html>
<head>
<title></title>
<link REL="STYLESHEET" TYPE="text/css" HREF="css/breadboard.css">
<script language="javascript" src="javascript/imagedata.js"></script>
<script language="javascript" src="javascript/utils.js"></script>
<script language="javascript" src="javascript/debugger.js"></script>
<script language="javascript" src="javascript/minibidomapi.js"></script>
<script language="javascript" src="javascript/dom-drag.js"></script>
<script language="javascript" src="javascript/component.js"></script>
<script language="javascript" src="javascript/breadboard.js"></script>
<script language="javascript" src="javascript/application.js"></script>
</head>
<body bgcolor='#cccccc' onload="init();">
<font size="4" face="Verdana">Drag Comps to BreadBoard, Right
Click Comps To Change Settings (IE6 or FF1.5) <a
	href="http://www.musicfromouterspace.com">Visit MFOS</a></font>
	
<div id="componentPrototypes"> 

<div objectprototype="Resistor" class="resistorDiv" id="Div1"
	style="height:20px;width:108px;left:10px;top:60px;" parttype="Resistor"
	partsbin="true"></div>

<div objectprototype="IC" class="dipPackageOuterDiv" id="Div2"
	style="left:10px;top:100px;height:85px;width:105px;" parttype="IC"
	partsbin="true">
<div class="dipPackageDiv"
	style="height:85px;width:105px;background-image:url(images/dip8.gif);"></div>
</div>

<div objectprototype="LED" class="discretePackageOuterDiv" id="Div5"
	style="left:10px;top:200px;height:32px;width:33px;" parttype="LED"
	partsbin="true">
<div valign="middle" class="discretePackageDiv"
	style="height:32px;width:33px;background-image:url(images/red_led_1.gif);"></div>
</div>

<div objectprototype="Diode" class="discretePackageOuterDiv" id="Div7"
	style="left:10px;top:240px;height:17px;width:84px;" parttype="Diode"
	partsbin="true">
<div valign="middle" class="discretePackageDiv"
	style="height:17px;width:84px;background-image:url(images/1N914_1.gif);"></div>
</div>

<div objectprototype="Capacitor" class="discretePackageOuterDiv" id="Div9"
	style="left:10px;top:265px;height:29px;width:56px;"
	parttype="Capacitor" partsbin="true">
<div class="discretePackageDiv"
	style="height:29px;width:56px;background-image:url(images/cap1.gif);"></div>
</div>

<div objectprototype="Transistor" class="discretePackageOuterDiv" id="Div10"
	style="left:10px;top:300px;height:25px;width:59px;"
	parttype="Transistor" partsbin="true">
<div class="transistorDiv"
	style="height:25px;width:59px;background-image:url(images/transistor3_1.gif);"></div>
</div>

<div objectprototype="Wire" class="wireDiv" id="Wire0"
	style="height:8px;width:27px;left:10px;top:330px;" parttype="Wire"
	partsbin="true" initorient="1" initcolor="" initsize="1"></div>
<div class="wireDiv" id="Wire1"
	style="height:8px;width:54px;left:10px;top:345px;" parttype="Wire"
	partsbin="true" initorient="1" initcolor="" initsize="2"></div>
<div class="wireDiv" id="Wire2"
	style="height:8px;width:81px;left:10px;top:360px;" parttype="Wire"
	partsbin="true" initorient="1" initcolor="" initsize="3"></div>
<div class="wireDiv" id="Wire3"
	style="height:8px;width:108px;left:10px;top:375px;" parttype="Wire"
	partsbin="true" initorient="1" initcolor="" initsize="4"></div>
<div class="wireDiv" id="Wire4"
	style="height:8px;width:135px;left:10px;top:390px;" parttype="Wire"
	partsbin="true" initorient="1" initcolor="" initsize="5"></div>
<div class="wireDiv" id="Wire5"
	style="height:81;width:8px;left:10px;top:405px;" parttype="Wire"
	partsbin="true" initorient="2" initcolor="" initsize="3"></div>
<div class="wireDiv" id="Wire6"
	style="height:81;width:8px;left:30px;top:405px;" parttype="Wire"
	partsbin="true" initorient="2" initcolor="" initsize="3"></div>
<div class="wireDiv" id="Wire7"
	style="height:81;width:8px;left:50px;top:405px;" parttype="Wire"
	partsbin="true" initorient="2" initcolor="" initsize="3"></div>
<div class="wireDiv" id="Wire8"
	style="height:54;width:8px;left:70px;top:405px;" parttype="Wire"
	partsbin="true" initorient="2" initcolor="" initsize="2"></div>
<div class="wireDiv" id="Wire9"
	style="height:54;width:8px;left:90px;top:405px;" parttype="Wire"
	partsbin="true" initorient="2" initcolor="" initsize="2"></div>
<div class="wireDiv" id="Wire10"
	style="height:54;width:8px;left:110px;top:405px;" parttype="Wire"
	partsbin="true" initorient="2" initcolor="" initsize="2"></div>

<div objectprototype="Note" class="noteOuterDiv" id="Div22"
	style="left:10px;top:500px;height:26px;width:69px;" parttype="Note"
	partsbin="true">
<div class="noteDiv"
	style="height:26px;width:69px;background-image:url(images/notepad_1.gif);"></div>
</div>

</div> <!-- End of DIV componentPrototypes  -->

<div id="BreadboardDiv" class="breadboardDiv"
	style="position:absolute;left:160px;top:60px;width:700px;height:500px;"></div>

<div id="CreditsDiv" class="creditsDiv">Virtual Breadboard by <a
	target="newwindow" href="http://www.musicfromouterspace.com">Ray
Wilson</a> the most excellent drag-drop script by <a target="newwindow"
	href="http://www.youngpup.net">youngpup</a>. This is a work in
progress.</div>

<form name="dialogwindowsForm">

	<input type="button"
    class="mybutton"
	style="left:5px;top:535px;"
	onclick="displayLoadStoreDialog();" value="Save/Load" />
	
	<input type="button"
    class="mybutton"
	style="left:90px;top:535px;"
	onclick="clearBreadBoard();" value="Clear" />

<div class="contextMenu smalltext" style="left:40px;top:40px;"
	id="saveload_dialog" ignoreclick="true">
<table>
	<tr>
		<td class="smalltext">
		To <b>Save</b>: Copy and paste all text below into a text editor and save it.<br>
		To <b>Load</b>: Paste previously saved text into this text area and click "Load Circuit".</td>
	</tr>
	<tr>
		<td><textarea id="stateDisplay" rows="18" cols="80"></textarea></td>
	</tr>
	<tr>
		<td><input type="button" value="Cancel" onclick="hideAllDialogs();">&nbsp;&nbsp;<input type="button" value="Load Circuit" onclick="loadCircuit();"></td>
	</tr>
</table>
</div>

<input type="hidden" name="wirecolor" value="#0000FF;">
<div id="wire_dialog" class="contextMenu smalltext" ignoreclick="true">
<table cellpadding="0" cellspacing="2">
	<script language="javascript">
    document.writeln(generateColorChooser());
    </script>
	<tr>
		<td><select id="WIRELENGTH" class="smalltext">
			<option value="1">Span 2</option>
			<option value="2">Span 3</option>
			<option value="3">Span 4</option>
			<option value="4">Span 5</option>
			<option value="5">Span 6</option>
			<option value="6">Span 7</option>
			<option value="7">Span 8</option>
			<option value="8">Span 9</option>
			<option value="9">Span 10</option>
			<option value="10">Span 11</option>
			<option value="11">Span 12</option>
			<option value="12">Span 13</option>
			<option value="13">Span 14</option>
			<option value="14">Span 15</option>
		</select></td>
	</tr>
	<tr>
		<td>
		<table cellpadding="0" cellspacing="0">
			<tr>
				<td><img src='images/horzicon.gif'></td>
				<td><input type="radio" value="1" name="wireorient"
					checked="true"></td>
				<td><img src='images/verticon.gif'></td>
				<td><input type="radio" value="2" name="wireorient"></td>
			</tr>
		</table>
		</td>
	</tr>
	<tr>
		<td><input type="button" style="width:100%;font-size:8pt;"
			value="OK" onclick="applyDialogValues();" /></td>
	</tr>
	<tr>
		<td><input type="button" style="width:100%;font-size:8pt;"
			value="Copy" onclick="copySelected();" /></td>
	</tr>
	<tr>
		<td><input type="button" style="width:100%;font-size:8pt;"
			value="Delete" onclick="deleteSelected();" /></td>
	</tr>
</table>
</div>

<div id="diode_dialog" class="contextMenu smalltext" ignoreclick="true">
<table cellpadding="2" cellspacing="0">
	<tr>
		<td colspan="4"><input type="text" size="10" id="DIODENAME"></td>
	</tr>
	<tr>
		<td align="center"><img src="images/diode_1_icon.gif"></td>
		<td align="center"><img src="images/diode_2_icon.gif"></td>
		<td align="center"><img src="images/diode_3_icon.gif"></td>
		<td align="center"><img src="images/diode_4_icon.gif"></td>
	</tr>
	<tr>
		<td align="center"><input type="radio" name="diodeorient"
			value="1" checked="true"></td>
		<td align="center"><input type="radio" name="diodeorient"
			value="2"></td>
		<td align="center"><input type="radio" name="diodeorient"
			value="3"></td>
		<td align="center"><input type="radio" name="diodeorient"
			value="4"></td>
	</tr>
	<tr>
		<td colspan="4"><input type="button"
			style="width:100%;font-size:8pt;" value="OK"
			onclick="applyDialogValues();" /></td>
	</tr>
	<tr>
		<td colspan="4"><input type="button"
			style="width:100%;font-size:8pt;" value="Copy"
			onclick="copySelected();" /></td>
	</tr>
	<tr>
		<td colspan="4"><input type="button"
			style="width:100%;font-size:8pt;" value="Delete"
			onclick="deleteSelected();" /></td>
	</tr>
</table>
</div>
 

westaust55

Moderator
westy, how are you doing that? That is very impressive!

I downloaded all the relevant files from the MFOS website. There are Images, scripts, etc, added a couple of extra IC's and added the details for those IC's to the relevant scripts. That way I can "play" offline from the internet.

Ray's MFOS website does indicate that all on the website is free for non-commercial use.

Like Manuka, I have emailed Ray yesterday to ascertain his willingness to have a version that does not need people to access the internet and or interest to expand for the PICAXE community (eg larger breadboard, PICAXE chips and some other relevant chips, etc).

I guess a need for some switches, batteries, buzzers, and other items would also be a requisite.


@slimplynth, you need to download a lot more than just having that html script. About 46 files in total

But I will await Ray (of MFOS) response to my email before doing much more at this moment
 
Last edited:

SilentScreamer

Senior Member
Is there any chance a version of this will be posted on the forum once whatever additional development you intend to add has been added?
 

westaust55

Moderator
Virtual breadboard -extending the options

Is there any chance a version of this will be posted on the forum once whatever additional development you intend to add has been added?
It is really a collection of files and scripts, not a single file but zipping may be an option.

The author, Ray Wilson, is doing some mods for manuka (Stan) but in an email to me has given permission for me to modify as I desire. It may be worth seeing how far Ray expands the package for manuka in the first instance to avoid duplication of effort.
I have suggested to Ray that I (maybe others as well ????) would be willing to forward additional graphics and script changes to Ray so he might remain as the focal point.

I have just spent a few minutes and extended the breadboard form 23 to 38 holes horizontally and modified the scripts so that I can place the components in new area.


EDIT:
Updated the attachment with a new copy.
A further tweak added to VBB enable the LED to take up 4 orientations just like the diodes (as sought by Manauka). Do need to clean up the transparent area on the GIF images for the 2 new diode pics but otherwise working
 

Attachments

Last edited:

moxhamj

New Member
westy, you make it sound so easy. That breadboard looks great and would be big enough to build a real circuit. I can think of all sorts of teaching applications, as well as being a way of debugging faults for people on this forum. 'Please post your breadboard layout' In some ways a breadboard layout could become the new schematic. My real breadboard layouts always look very messy so I'm reluctant to post photos, but I'd happily post one of these layouts. And a breadboard recipe is easier to copy than a real schematic.
 

manuka

Senior Member
You're speaking my language too! Ray seems happy for a deserving body of civic minded stout hearted fellows (such as ourselves of course) to run VBB however we want. Furthermore, the ability to run the package off line would suit many school electronic workrooms perfectly, as "oldie but goodie" laptop PCs abound that are not web connected (often deliberately!)

Westy- you have assumed VB guru status with this, so hence how about such tweaks as -
*Various colour LEDs * A "fatter" transistor *Selectable size resistors *180 rotating DIP IC *Push switch * A general 2 terminal "outline" which can be say an LDR/NTC/piezo etc *Electrolytic cap. * R colours following the normal Black first (presently last!) BBROYGBPGW sequence *Ability to even handle a DIP20 (for PICAXE-20 & 20X2 of course).

This VBB looks worthy of an educational SiChip article- email me directly perhaps? Stan
 
Last edited:

westaust55

Moderator
Enchancing the virtual breadboard

Hi manuka,

As I have it running now, it still operates under IE or Mozilla but all the files are onboard the PC or memory stick.

It is a long time (10 years) since I did html scripting, so have to refresh some brain cells as I go, but some tasks are certainly not hard.

I will tackle the easier tasks first - ie will look at creating some PICAXE specific chips from 8 to 20 pins with pin ID's as per the 18 pin I have already posted.

The new breadbaord size I created is about as big as we might want to go to accomodate those with 1280 x 1024 resoloution displays. Could be a task to find screen space to put the component menu at the side for many more items. But extra IC's and LED's under the existing component menus can be done then select an LED colour as one can a wire colour.

Then look into some other options you suggest. Was thinking about adding green and yellow LED's as well today myself :)
Need to think about the script structure to do this neatly.
have to try a different "paint" package to keep the area around the component graphics transparent. MS Paint will not allow this, Paint Shop Pro seemed to work (sometimes) for the PICAXE 18 chip last night.

Hopefully my rainfall sensor/guage and pressure sensors will also arrive shortly which will divert my attention for a while :) :)
 

manuka

Senior Member
OK- I wouldn't panic about larger BBs. The classic 23 column small type is now so popular (& cheap) that it's hard to locate anything else. Of course an 18X fits such a small BB nicely still, & even a 20M/20X2 will "just" be viable. Larger PICAXEs can be handled with 2 BBs end to end I find.

A benefit of this VBB approach could be that it -gasp!-encourages neater wiring. I've been a fanatic for ultra neat BB layouts & shudder with "dogs breakfasts" that many students lash up- often no-go & with all one colour wire too.

If you are running out of VBB menu space then perhaps refine all those 10 wire lengths, orientations & colours into just a few? Any wire option can be made any colour, span or orientation at present anyway- even a single wire option may be enough!

EXTRA request item: * Pigtail resistors (although colour codes may be invisible of course)? Stan.
 
Last edited:

manuka

Senior Member
Simulators (of which there are many) of course move up quite a few notches, & are usually commercially priced. IMHO this VBB approach perhaps best suits passive "here's how it looks" layout display, & is well targeted for just such needs already.

I speak as an educator here, having endlessly witnessed the youthful (& cultural...) "brain fog" associated with even discrete component circuitry. Many youngsters initially view breadboards as just a sea of holes, & VBB style IN YOUR FACE layouts could help enormously. ( Yes- I pull the back off BBs to show the tracking). For many newbies it's akin to trying to make sense of Morse code or accounting spreadsheets/MPs expenses. Naturally with experience the figures/coding/fiddles jump right out & talk to you, but initially they can bewilder.

The confidence boosting gained from putting together a circuit that works is wonderfully motivational. In contrast, many "Play Station generation" constructors just give up when their clunky layout refuses to play ball... Stan
 
Last edited:

westaust55

Moderator
Expanding the Virtual Breadboard

Further progressed on the Virtual Breadboard package last night for a while.

1. Spent some time to tisy up the breadboard background and a few graphics including originals to remove redundant colour in what should be transparent regions.

2. Expanded the range of DIP IC’s to cover 8, 14, 16, 18 and 20 pin in both general chips and PICAXE specific chips

3. Revised the wire colour sequence so black is at the top/first as per the resistor colour code

4. started on the mechanisms to provide resistors in 3 sizes, as small, med and large to span 3,4 or the existing 5 hole respectively. This will take some time get fully functional as the scripts are used for drawing the resistors and not using images as per the all of the other components.

No 3 threw me as to Manuka request for a while as I thought there was something wrong with the resistors based upon the request:
“* R colours following the normal Black first (presently last!) BBROYGBPGW sequence”. Thought he meant the resistor bands at first but once I realised what manuka was after, done in a flash . . .
 

Attachments

inglewoodpete

Senior Member
I found a polite version:
BBROYGBVGW = Better Be Right Or Your Great Big Venture Goes West
(Black Brown Red Orange Yellow Green Blue Violet Grey White)
 

moxhamj

New Member
That is looking neat. I particularly like the labels on the picaxe pins so you know which pin does what. That adds a lot more meaning to the circuit. Keep us posted - this is looking great!
 

manuka

Senior Member
I know asorted BBROYGBPGW variations (many of them shady), but have long pushed Better Be Right Or Your Great Big Plan Goes Wrong as the most user friendly. Yes-yes- I know it's tame , but ...

Westy - particularly well done sir! Mmm- since 08Ms typically are breadboarded "upside down", pinouts may be inverted if pre assigned. I personally feel just only two R sizes may do- what about everyone else? THOUGHT: Just "2 hole" wide R's would of course suit pigtail layout. The value could be shown with a tag. Stan
 
Last edited:

westaust55

Moderator
Ongoing VBB work

Well, 3 resistor sizes are now encoded. Width also drops slightly with reducing length :D

I can sort out the IC's so they can be flipped 180 degrees and have text upright still :)

Edit, though I might go back and make the width of the greencaps reflect the length as well
 

Attachments

Last edited:

SilentScreamer

Senior Member
Circuit wizard has a good simulation function (see attached pic).
I personally dislike Circuit Wizard, Livewire and the other products New Wave Concepts Offer (I think that is the company name). They are great for my school but I soon gave up with them as they have so many components missing with no apparent way of drawing them yourself and they cost too much (I know when compared to other software such as Proteus its cheap but £35 for each application is a lot for me to pay).

I like the virtual breadboard that westaust is working on as when breadboarding I test it on the breadboard. I would rather do simulation on the schematic, though I prefer just to try it. I've had wires melt the first time I ever breadboarded a circuit I had designed, I now appreciate that wire thickness is important (I knew of it but didn't really believe it mattered at relatively low voltages and currents). The smoke that comes from breadboards is a part of learning to me (shame its always the most expensive circuits that do it :p).
 

Andrew Cowan

Senior Member
I've had wires melt the first time I ever breadboarded a circuit I had designed.
What power supply were you using?!?

I definitely agree with your Circuit Wizard comments. While Circuit wizard is excellent for 99% of school projects, it isn't any good for hobbyists.

I was amazed when I came across Diptrace - it has so many components! My only use for circuit wizard is for drawing neat circuit diagrams for this forum.

A
 

manuka

Senior Member
Circuit Wizard (& it's mates/rivals) certainly impress, BUT they're -ahem- ~UK £60 (~US$100)! VBB is not only free, but IMHO looks best suited for good old fashioned "here's how it should look" parts layout display.

Westy: I was going to pester you re. another "flip" item (an inverted transistor), but have just realised it's there anyway. It could be fattened up methinks (as unrealistically skinny at present), & a dot over the collector would help-although such lettering/dots are easy enough to add yourself.

It's assumed these gorgeous tweaks are still held locally on your PC, but it may be at the stage when a hosting site upload could be worthwhile? I'm email you directly about this. Stan
 
Last edited:

moxhamj

New Member
There is something great about a program that can be edited easily (well, westy is making it look easy anyway!). And free. I can see advantages in having both a web based program (as the original is), plus the ability to download it to a local machine as a package. Maybe the ability to edit/add items (though there is something to be said for the ultra simple layout of the original where all the components are visible on the screen).

As per Andrew's picture, a battery and a switch could be useful. But would these reside on the board or off the board?

How does one add components to a library? Could you start with a bitmap picture of a component and somehow add that easily? Could there be some sort of connection standard?

Eg, a little PCB 1.2"x1.2" that has 10 SIL pins on it. This object plugs into the stripboard. Then, I take the bitmap of that object, and I can put any bitmap picture on it using photoshop and draw wires to any of the 10 header pins? I'm looking at some real boards around me at the moment that could have components added to a 1.2x1.2" board. Eg a uDrive, a D9 plug, a small battery, a crystal, a push button switch, a 7 segment display. With a generic small module board, and bitmaps captured off the computer screen, I could build all sorts of library objects quickly.

Might need a double breadboard. And the long ones. My real prototyping area has always been two long breadboards one above the other. Would that fit in a 1280 screen size?
 

westaust55

Moderator
Virtual Breadboard continued

The Virtual Breadboard program is predominantly using GIF images for most of the components.
Only the wires and resistors are calculated and drawn on the fly.

Based upon my own ideas and those put forward by Manuka and Dr-Acula, the following constitutes a list of items to add or adjust:
• Various colour LEDs
• A "fatter" transistor - also add TO-220 to the TO-92 outline (covers 1A 7805 etc then as well)
• 180 rotating DIP IC’s
• Switch – 2 terminal pushbutton, 2 terminal toggle, 3 terminal toggle
• Terminal strip in 2,3,4,5 holes
• Electrolytic cap in 2 or 3 sizes, 2/3/4 hole span
• Tantalum cap in 2 sizes, 2/3 hole span.
• a battery – as 4.5V
• a crystal
• a 7 segment display – to add under the IC’s listing
• LDR
• Thermistor
• Piezo buzzer/speaker

The attached diagram gives an idea of what expansion and improvements I have in mind. See how it goes with getting the above done in forthcoming evening (but nothing tonight – its birthday time :) )

Adding a device involves adding gif images to the image folder, adding to the various scripts to incorporate the pull down menus, defaults, pointers to images, etc. This typically involves working on 4 out of the 9 javascript files from the original program package.

For switches, batteries, placement needs to be thought about. Maybe the answer is to have a clear area at the top and bottom of the breadboard where these can be deposited. Will require some thought on placement scheme while I work through other add-ins.

Once I have assembled the program to include the above mentioned features I can put it on Manuka’s website for all to access and send a copy back to the original author.

Batteries and switches will need to be side view as opposed to the top view of other components.

If others here have top view images of LED’s all to the same style and size in various colours, eg Red, Green, yellow and blue PM me or post them here to save me time searching.. Minimum image size as say 22 x 22 pixels, larger okay as I can scale them down
 

Attachments

lbenson

Senior Member
In accordance with Dr. Acula's suggestion, one other item might be desireable--a SIL image of setable width to represent a plug-in module. Many thanks for your impressively speedy enhancements to this valuable-looking tool.
 

moxhamj

New Member
Amazing - that is a wish list for several Christmasses to come! It would certainly cover pretty much all the things I build on breadboards. Oh, and Happy Birthday!
 
Top