PEBBLE - Picaxe Electronic Bread Board Layout Emulator

What I want to post here is what I'm up to with PEBBLE. In March 2024 there was a draft proposal for the File System Access API.
QUOTE "This is a web API that allows read and write access to a user’s local files. It unlocks new capabilities to build powerful web applications, such as text editors or IDEs, image editing tools, improved import/export, all in the frontend."
What it means - you will be able to read and write local files using JavaScript.

While only Chrome and EDGE support this so far, Firefox and other do not, yet! I do have a working example in PEBBLE using Firefox.

Because of the great many changes I've implemented, I've taken the liberty of a major version change.
Below is the NEW look to the user interface (UI). Still have to update the text.

I can select a file and load it in. I can save the file once I have a filename, kinda, well, sorta..the save file button is actually a download button. It will download a breadboard design, but for now it puts it in the "Downloads" directory. It's will not overwrite a file with the same name. It creates a new version of the file by appending _1,_2,_3 etc. to the filename. OK by me, but, if you save a lot there will many files to clean up later.

I'm really trying hard not to throw in a database and port over to PHP. I really want to load and save files using JSON file format. This will most likely make previous versions incompatible to load the saved files. For now I'm leaving it alone.

Teaser warning: I never liked the drop-down to select a breadboard. I don't know what all the boards look like anyway.
SO, coming soon, a pictorial breadboard selector. Little thumbnails of the breadboards to click on.

One bug I've just discovered, I've lost the horizontal scroll bar for the larger boards that bleed off the screen. Probably something in my CSS is blocking.

PEBBLE_open_save_Dialog_20250105.PNG
 
Last edited:
While not perfect, saving your work is now a pleasure. I'm still thinking about how to make life easier when adding breadboards and components. Users shouldn't have to edit JavaScript. After weeks of tinkering I think I'm getting somewhere with PEBBLE.

The NAV bar is evolving and the buttons might be moving around as I decide where to put features. The scroll bars are back, CSS bug.

Coding most times works like this cartoon. 8)

CODE_BUGS.jpg

PEBBLE_sofar_20250107.png
 
Haven't forgotten the project, Today is what I've accomplished. To select a breadboard from an image. Hover over an image displays information about the board. Click an start using the selected board. There is room (on a large screen) to add more boards. ALL the other boards are still in the program. I might add the old drop-down selector to the orange NAV bar.

The more I work with this, the more ideas I have. Will I ever get what I intended to do completed?

I've changed the default size of the Veroboard to 20 x 20, as I found it always too small to start with. The boards I've selected are the one I use the most (common).

Big Idea! Coming soon, "layer control" Building a strip-board can get very crowded, being able to turn-off various layers would allow a better view of the design. Turning NOTES on and OFF works. Not hard to add it to other components such as the wires, semis, passives...today CSS can do some wonderful transforms.

I'm still "tinkin`" about how to make life easier when adding a new component or breadboard (without a database)...it might be awhile.
PEBBLE_breadboard_selector_20250114.jpg
Secret, Shhh!: I use a program to create strip-boards written in Pascal. The author has made it open source:
VeeCAD Stripboard Editor
 
While, I will post a version release, it's not really ready for prime time. I have no contact with the original authors of the program, so, decoding function is tough going. A lot of code has been refactored and replaced. It's taken me a while to get into the flow of the program.

Some of the features working to date: A new LOOK front end (UI). I'm not very good at front end design.

1. Saving and Loading a design. No need to create a file, then cut/paste/save. BIG savings in time.

2. Dynamically sized Notes. Just type a note. Use spaces as needed. A new line just hit [enter]. Pick a pointer direction. Note GIF images have been removed. This has been a bane of mine to to reduce the number of images that are downloaded when starting the program.

3. Resistors have been redesigned in CSS to remove all the HTML <TABLE> layout. The whole program was designed using tables for layout. This is another nightmare to unscramble. Some of the vertical/narrow resistors are now just bent over. Maybe it's a good look.

4. All the table formatting in the popup dialogs will be converted to modern CSS. This is another issue, almost ALL layouts a positioned absolutely. This makes it very hard to switch to a fully responsive design.

I'm trying to maintain a standard screen size ( 1024 X 768 ) pixels. I know, I hear ya, "but I have a big screen" so do I, I like to run a lot of other stuff like FLDIGI, used by Amateur Radio operators on HF, VHF and UHF frequencies and allows for nets with multiple participants sending and receiving messages.

5. Breadboards can now be selected from an image. The drop-down selector is still available for all the breadboards. I've created a spreadsheet of all the constants used in breadboards.js. This will be an array to select a breadboard. Advantage: be able to easy add a new or tweak an old breadboard. That's a project just by itself. Thinking about it and not completed.

6. ICs for now will stay as GIF images. Why? I need to see the handy-dandy pin labels. I have a way to superimpose the labels over a CSS chip. Doesn't look so good right now.

7. WIRES, YIKES! the wires. OMG, so many different ways to place an end on a wire. Can't stand the tiny radio buttons. Does anybody need this?
I've made only simple wires and a few bends. Experimenting with a visual selector for the bent ends
(da BENDS?)
Problem?
How to detect wire ends and how one wants the corner - insulated or bare.
How about curved wires? Too advanced for this method of physical prototypes.
How about a line from Point "A" to Point "B"? Possible, to calculate the wire position, but will really make a very messy looking layout very quickly. Ever seen a pile of spaghetti? Enough said.

I'll keep plodding along ... my best way.
Why did I do this? I like to figure out logic? I know, in one word: Autodidact.
My whole life been virtual, magnetic bits (now, more a charge on a capacitor) and stored in a computer system somewhere. This project should be on GitHub.


PEBBLE_WIRES.PNG
 
Hi,
7. WIRES, YIKES! the wires. OMG, so many different ways to place an end on a wire. Can't stand the tiny radio buttons. Does anybody need this?
Yes, I've certainly used all the "Ends", I think they're the result of allowing three wires across the standard pitch of 0.1 inches. Both insulated and non-insulated ends are needed to allow wires to run "diagonally" (i.e. two sides of a rectangle) without terminating on the Pad/Track at the corner. Normally, I would only run one (non-insulated) "track" between pins, as provided by the "0.1 inch Span Specials", but even with the 3 wires per-pitch, I recall occasionally finding that the wires can obscure the components, or vice versa. As mentioned before, I often print out the Pebble Layouts, so being able to (re-)move or highlight "layers" would not be appropriate.

Personally, I'm often aiming for a "compact" layout, so regularly use vertical resistors (0.1 inch pitch) and CUT the "Veroboard" tracks between the holes (and/or with a through-hole component lead through a Cut hole and soldered to an adjacent track).

Cheers, Alan.
 
radiosparks,

I've only used PEBBLE on stripboard and here are my votes:
  • I use the three offset options "On the line", "1/3 space above left" and "1/3 space below/right", so I vote for all these to be kept as they work in the original.
  • I've never used insulated corners and can't think what I might physically implement bare corners for on stripboard, so no vote for me about this on the assumption that the original insulated corners would be kept.
  • I use the "On the line", "1/3 space above left" and "1/3 space below/right" options to help make it easy to understnand the cicruit from the wire layout. I think that I would try to avoid using either "curved" or "from Point A to Point B" wires because they woule make the layout less clear, so no vote for me on these either on the assumption that the exisiting rectanguar wire paths would be kept.
 
Thinkin' About Wires ... Here's a CAT interface I built years ago. Converted RS-232 to TTL stole power from the serial port (white shrinked diodes). Today I use a FTDI USB chip to do the same (no serial ports on the systems anymore).

IMG_8260_top_640.jpg

IMG_8259_bot_640.jpg

Here is an experimental layout based on prototype circuits I've designed in the past using paper (lots of paper) and pencil (Staedtler mechanical pencil).

I'm thinking to throw out the wire prototypes and going into a canvas layer to draw the wires on the fly. This will take a while, I need to think how to integrate this into the current program. Could have a problem in selecting the components. Now, I didn't write this, it was culled out of GitHub and adapted for this task.

Example:::
WireCanvasDesign.PNG
This is only a thought. Very buggy. You want to try it out? I've added a ZIP.

How it works:
1. Hover over a point, click to set start point.
2. Hover over another point, click to set end point. A line segment is drawn.
(bug: if you click the same point no segment will be drawn)
3. Don't like the position. Click-hold start/end point and DRAG to new position.
4. Don't like the whole line segment. Hover over line segment and right-click, select DELETE.

First click on, hover over a point, snaps to the fixed (calculated for each Breadboard) point.
Dragging a point will step in thirds and can be used to add line segment in between Breadboard points.
(bug: not to accurate, can be off quite a bit (pun). The original Math used floating point then rounded the calculation causing a jitter in the point array layout. This experiment uses a fixed array of points.)

That's All Folks...Give it a try and report your feelings. This is important to me, as I'd like to be headed in the right direction.
 

Attachments

Wire Module UPDATE

I've hit my 63:37 Rule - what it means? 63% of the code has been completed, now bugs to be fixed.

Some bugs in this version:

1. Clicking on the same point creates a vertical wire segment. Hard to select to delete.

2. Now, some might think this is a bug. When selecting an end point on an existing point, the two wire segments connect together. Dragging this point will move two or more wire segments at the same time.
I might go back to an earlier version where all the wire segments are separate elements. Also, I'm thinking of a selector to turn the Snap-to-Point OFF and allow placing the wire segment ends anywhere on the canvas area.

3. End-to-End wire segments connections are not smooth (clunky).

I'm dreaming about a Veroboard helper (don't you love the smell of REAL Veroboard?). I would like to see certain tools in the wire context menu to quickly select, like, cut-track-between holes and cut-out-holes.
(a board flip or transparent view - in the future code.)

What needs to done.?

Figure out HOW to add this code to a working application without clobbering the original code.
e.g. issue: Wire layer clicking needs to be selectable (on/off) to allow Select/Drag/Properties of other components.

Another, save the wire segment array with the other components. This will be the biggest change to the file format. Previous versions of the design file will not be able to be imported. Wire prototypes only contain the start point and the end point would need to be calculated. This could get complex very quickly.

eNuff for today... added a ZIP with the current module to play with.

I think you'll all agree, drawing wires is way FASTER than the PICK/PLACE/DRAG/PROPERTIES Method. You'll see the wire style has been simplified, those wire ends were giving me a headache.

The layout will get very messy fast ...
WireCanvasDesign14y.PNG

I hope I'm not polluting this thread with my posts, after all this is a PICAXE forum and not GitHub.
 

Attachments

Since I've built an unknowable number of projects on breadboards and I have a nice stock of as-yet-unused PICAXE chips and some empty breadboards, I see this as a giver of incentive to work out what should be where on some of those things I haven't yet gotten around to ;-)
 
Wire Drawing Module Update: February 1, 2025

Problem
: Each breadboard has a different calculation for the pointXY array making it difficult to move a design from one BB to another.

Solution: Create a standard array of points and create each breadboard to fit the array.

The point array is calculated only once on program start. The number of points is based on the width and height of the container using a standard grid of 27px by 27px (sound familiar).

All the breadboards shown are created using pure CSS only. How it's done, just Goggle "ONE DIV CSS" and check out what can be done in one div, amazing. This biggest advantage to using CSS is the design can be controlled from JavaScript. There is also a performance gain by not having to load any images.

This code is using a static container size to compare the wire layout across different breadboard styles.
Already in my thoughts, a PCB of the Default Solderless Breadboard that you could switch back and forth without having to re-do the layout.

One layout, MATRIX, is experimental using 0.05 inch steps (has a MATH bug).

defaultBB copy.jpgveroBB copy.jpggridroundBB copy.jpggridsquareBB copy.jpg

Am I having FUN, you bet!, I haven't written this much JavaScript since 1997. I feel like a kid again.

NOTE: No GIFs were harmed or even used in this module.
 

Attachments

JUST A SHORT UPDATE:

February was a down time, Flu, too much snow, some radio projects.

Here is some recent activity:::

1. GONE, constrained off board park areas. Now you can park your components any where you please (Except under the menu on the left), up to the width of your screen. Scroll is infinite, or until you run out of memory space. (I think I might have to limit the scroll).

2. GONE, Gaps or skipped rows and columns. Found it very annoying that I couldn't place parts anywhere. The snap-to-grid overlays all areas visible.

3. (Experimental) Some breadboards are now floating. So, I thinking of making all the breadboards just a plain component prototype, but grid alignment could be a problem. The CSS only protoboards work the best and are scaled perfectly for a 27X27 grid. A lot of the photographed boards are not a true parallel projection and tend to be skewed against the grid. And rounding the drop points causes the grid points to jiggle around on a wide long screen.

4. Haven't done anything with the wires.

5. Refactored a lot of redundant code. Even though code has been removed, I'm adding just a much in new features.

6. NEW PEBBLE Logo design. PEBBLE4.png

DUMMY Layout Big Screen Sample:
PEBBLE_large_layout_DEMO_20250310.jpg
Gets messy real fast ... 8)
 
Exciting NEW News, Hot off the presses!!!

We now have Sexy, curving wire segments. Don't get too excited, I've only just got it to work.

This has introduced more bugs than I can count on one hand, hi!

1. Thick wires. Easy to fix.
2. Wire ends are offset slightly from drop points. Easy to fix.
3. The wire curves only one way. Harder, need to think about it.
4. Can not save wires array. Hard, I can fix it, but it means that the old way to save a design will change drastically. You will not be able to import your saved older designs.
5. Need to change menu layout to add selector for straight or curved wires. This will require another array value to be added to the segment array.
6. LAYERS, have a way to control wire layers.

There is a side effect with my gradient styled wires. The gradient doesn't follow the curve and as a result I get a striped wire look. More bugs to clear...maybe. Problem ... wiring off-board components like the switches. Once I figure our bezier curves end points it will look better.

Oh, the menu is now a fixed position, but can be hidden to make more space to create a design.

PEBBLE_CURVED_WIRES_20250317 copy.jpg

I'm learning new Javascript techniques quickly. I hope, I get this project done before the final exam at the end of the semester. Just joking ... 8)

Glad I can post this here, helps me to organize my thoughts.
 
Last edited:
Oh Bother, said Pooh, a dead end, sort-of.

If my enthusiasm to create dynamically placed wire segments I completely forgot one thing.

(like in The Wrath of Khan) Spock notes of Khan that "He is intelligent, but not experienced. His pattern indicates two dimensional thinking."

Yup, the 3rd dimension, layers. The wireCanvas exists on only one layer. Oh, the wires themselves are drawn in layers and can go over or under one another. All the other prototype components each have an individual layer method.

When I merged the wire module with PEBBLE I originally place the layer just above the breadboard layer. OK, I could place wires all over the place. Then, the issue, hit me in the face. All the wires ran under all the components. Solution!, move the layer higher in the order. WRONG, now I couldn't drag any of the components.

There is a fix for it, it will get a little messy. Users will need to control which layer they are working on by manually turning on or off the layer (e.g. wires under the components and wires over the components). And turn off wire editing all together to work on component placement.

Told-ya, it was going to be messy.

I've also re-read the entire thread, to come to terms, with all the previous issues PEBBLE has had. Recovered the original Ray Wilson Virtual Breadboard code from Archive.org. PEBBLE has become very complex to date.

Well, "Don't Panic", as Douglas Adams once wrote.
 
I think we all consider this project to be in good hands and we'll watch for updates.

Maybe add a BEEP and a popup when selecting/deselecting the wiring layer as a reminder?

Something small and simple? "Abandon hope all ye who enter here" might be a bit extreme...
 
Worked out a solution, but (NORTHERN PIKES song) "She ain't pretty, She just looks that way"

Code is getting messy: had to add another canvas layer for the pretty wires. Why?
Well, the curvy wires are not individual prototypes, but exist in an array drawn on a HTML canvas element.

Another ugly BUG has appeared. (I knew about it, early on, developing the wire module)
Saving a complex array of points will be difficult using the "PEBBLE way" of one record line per prototype element.

Solution chosen, save the data (using the old stand-by) as a JSON file. [used a lot when working with the Shopify API]. When I apply this method you will no longer be able to load old format files from previous PEBBLE versions. This will not happen soon, as I have many other BUGS, like the wire ends not aligning with the calculated drop point array (even though the pointXY and segmentXY array values are the same.

The coding is very fluid and changes minute-by-minute. The wire tool bar might change in function and/or location.

PEBBLE_CURVED_WIRES_20250324.jpg

Ya know, what I miss the most about "WORK". Having a team. I hate talking to myself.
 
It's OK to talk to yourself - you have someone intelligent enough to understand what you're saying.

Just be careful about answering yourself when other people are around.

Maybe use a throat mic and a voice changer on your phone and use its speaker for the "answers"? Then folks won't realize that you are talking to yourself - they'll just think that you spend all day on the phone ;-)
 
Back
Top