PEBBLE 4 Experiment

[radiosparks]

E X P E R I M E N T A L
Based on untested ideas or techniques and not yet established or finalized.​

I'm starting a new thread on my PEBBLE re-write/refactor. It has been a great quest of mine to play with this software and try out new and different ideas. Most of my effort has been in updating my (1997) Javascript skills. Many changes have been adopted into Westaust55/Wilson original software.

I've placed a live version on my WEB site for all to try out. There is some tracking with Google Analytics.

http://radiosparks.com/PEBBLE/PEBBLE4.html

Some caveats to be aware of:

The APP has been tested only with Firefox DEV 140 and Microsoft Edge 137. Chrome should work.
You might notice some errors displayed in the console window. These are mostly debug messages.

Importing previous versions ( pre 3.1e ) will not display correctly. The file format has changed.

The miscellaneous devices that where hidden under the LDR component are now categorized into groups.

Note: Snap-to-nearest-point that controls how components are placed on the grid has changed dramatically. I haven't finished adjusting all the X and Y offsets for all the components. As a result, you will notice that most components will not align with the grid and/or the protoboards.

I'm not going to explain all my changes applied to this APP. Just be aware that I'm working on more
layout adjustments and that the look of the front end will be changing. (Hint: I really like the fly-out menu of PICAXE Cloud BLOCKLY.)

Hope to pass approval on my changes to a popular application. More to come ... 8)

NOTE: This will be the last layout version I've saved. Small bug: why my grid is offset from the screen capture?


UPDATED rhb.20250621

 

[papaof2]

What's here looks good.

I'll go test it when I don't need the pain relief of two 7.5/325 oxycodone/acetaminophen.

 

[OLDmarty]

Well done RadioSparks, but what happens in vero/stripboard view if the user needs to view the underside to see where tracks are cut??
Or, Is there a board flip function or a transparency option to see through the board to see where tracks need to be cut??

 

[AllyCat]

Hi,

Firstly, there appears to be a common problem that it behaves (slightly) differently with MS Edge and Firefox (I've not tried other browsers yet). For example FF drops the components at its "hand", but Edge drops the components with a significant offset from its "Pointer". Also, FF drops more of the "PCB Specials" (Tinned wire links and spot face cuts, etc.) offset from the 0.1" locking grid holes, and some of these colours have insufficient contrast to the PCB. To answer the above question, these items, (e.g. "CUT" , "X", Large and Small Spot Face Cuts, etc.) can be used to mark where the stripboard copper tracks are to be removed. The "Layers" pull-down menu has options to remove (make invisible) certain components such as ICs, Capacitors and "Notes", and the "Tools" includes a "Flip It" (mirror) function (but it appears to "hide" all the components afterwards).

However, personally I have always preferred to display the two sides of the Board side-by-side, so that they can be printed out for use "on the bench", or to post to the forum. This could be done by dividing a larger board with a few of the "2 row wide vertical strip mask" (in the "CUT" menu), which are still present, but their plain grey no longer matches the more sophisticated background of Pebble 4. Incidentally, I often show 3 views of the PCB; the "tracks" side in the middle (and mirrored) with the small top-side components (and wires) shown on the left-hand side, and the actual visual appearance of the board (e.g. with the PICaxe chip obscuring wires behind) on the right-hand side. It would be "nice" if these masks could have an adjustable size (and matched the background), but as yet I haven't even found how to change the size of the native PCBs !

So, congratulations on a very impressive demonstration, but I'm afraid that at the moment I will continue with Pebble 3.1e (for which I gave quite a lot of "input" at the time, and can "hack in" a few customised .GIF symbols when required).

Cheers, Alan.

 

[radiosparks]

Dear Mr AllyCat,

Here for your perusal is a sample of ALL the One Span Wire Segments. Spent a bit of time updating the drop offsets, might need a tweak or two ... There are a lot of redundant wire segments. Those will be removed in the future.

Don't get too excited I have a solution for your split PCBs. I've been tinkering with floating, rotating and possible scaling of all the protoboards. I've re-read all the PEBBLE forum issues, even reviewed (through ARCHIVE.org) the Ray Wilson original code.

I've removed the FLIP-IT button and code for now, it was causing issues with the dom-drag.js mouse updates.

Man, are your verbose. My CEO was like that, 2 hour meeting for 10 minute project. I don't mind. I'm used to it.


Still haven't figured out why my grid background is offset using html-to-image. Already patched it for an issue with PEBBLE core.

OH! , here is the file to load if you want it for testing in PEBBLE 4 format?

We build on the shoulders of all that came before us! 8)

 

[radiosparks]

TO: AllyCat

Sir, I'm working on it. We are on the same page. A NEW tool that I used long ago called a NIBBLER TOOL. Made an AM tube transmitter chassis with just a drill and nibbler (1970ish). Makes your handshake strong! 8). Just give me some time, I'm not as fast as I used to be.

I still can't figure out the grid issue. Fixed missing components.

Like my Nibbler tool, you now can notch out a protoboard. 8)

 

[papaof2]

Still have my Nibbler tool. Center drawer of the workbench in the basement. Haven't used it in a while but you never know when it ill be useful ;-)

 

[Lotus]

Is there any way to add a new protoboard? - I've got a board that is not in the current list.

 

[radiosparks]

SHORT ANSWER : @Lotus #8
As the current version (PEBBLE 4.1) still runs my server using only JavaScript, adding another component or protoboard by an external user is not possible.

LONG ANSWER :
I’ve been contemplating posting the code on GitHub so others can fork it and manage their own custom versions. However, the code in its current state might not be fully ready.

There are several features I’d like to add, such as a completely visual component selector. I’ve also been toying with the idea of making prototyping boards into placeable components. The major work so far has been consolidating all the component data into one location, rather than having it scattered across the program space (hint: using a database). Another improvement I’d like is persisting the app state of the design, so it isn’t lost if you refresh the page. Saving the design to a file already works. And the Hot-Keys commands need to be setup. This has turned into a deep winter project.

That said, it’s quite possible for me to add your component or protoboard, since requests have been few and far between.
It’s as easy as 1-2-3 ... though Step One is the most difficult, because it requires a properly scaled image to work with.
The scaled image must follow the 27×27 pixel rule.


Note: the red dots represent the calculated component drop points using 27X27 pixels. This allows components to align with the connection points of a PCB pad or strip. Components can also be free-floating, with no snap-to action.

The board shown is not a real photo. It has been rendered completely in CSS.

This is what I'll do [ note to myself ... just writing it down for a future help file ]

Step Two, is to enter the data in the Javascript file: MasterData.js
A Category and Sub-Category is selected [need to expand].
Then a unique ID need to be created and description added.
Example JS array data :

{id: "BB74", src: "permanent_420_breadboard_white.gif", descr: "Permanent Half-Size Breadboard White",
       offsets: {"1": {x: 8, y: 10}, "2": {x: 0, y: 0}, "3": {x: 0, y: 0}, "4": {x: 0, y: 0}}
},

There are already 74 protoboards and 420+ components in the MasterData file. I would like to remove old unused and redundant boards to minimize memory resources used by the data. Oh ya, Don't forget to upload the image to the server. 8)

Step Three, Adjust the component offsets. All components can be rotated in four directions.
Only offset "1" needs to be adjusted for protoboards. Most images are not exactly square.
The offsets control the position of the component on the snap-to grid. The grid is calculated
to be in a fixed position and not adjusted.

Refreshing (CTRL-F5) the browser, the new component will show in the dynamically created menus.

---

Remember! This is a work in progress and is only a hobby for me. There is no time limit as to when things get done.
Anyone could just snarf the page, although some parts of the APP might not function correctly.