Add breadboard element

[urish]

a Solderless breadboard is a matrix of electrical connection points, in a plastic enclosure.

They come in various sizes. The common sizes are:

• Full: 60 rows, 800 points, including positive/negative bus strips
• Half: 30 rows, 400 points, including positive/negative bus strips
• Mini: 17 rows, 170 points, no bus strips

Ideally, our element will support at least these 3 standard configurations, selectable via the "size" attribute. e.g.:

   <wokwi-breadboard size="full"></wokwi-breadboard>

Full breadboard

Half Breadboard

Mini breadboard

[LironHazan]

can I have it?

[ghost]

I was about to request this! Super super handy for just simply messing with connections and creating tidier wiring configurations

[urish]

Thanks for the feedback! It got 2 votes so far, so let's see how it goes

[Akankshagoel-06]

how do we add the breadboard here https://wokwi.com/arduino/projects/313984585996173888 ?

[urish]

There's no breadboard yet :-)

[lzzy12]

We definitely need a breadboard. I tend to not use this platform when I need more number of components in my project just because of the fact that there is no breadboard and use tinkercad where only aurdino is available even though I am instructed to use esp32 primarily in my university

[urish]

Thanks for the feedback, @lzzy12! Which university is that?

The breadboard still has 2 votes, seems like other features are more important for people right now

[lzzy12]

Thanks for the feedback, @lzzy12! Which university is that?

The breadboard still has 2 votes, seems like other features are more important for people right now

Understandable. Especially, Wifi support seems pretty interesting if it works in the future

[urish]

WiFi will probably be usable in a few weeks from now

[lzzy12]

WiFi will probably be usable in a few weeks from now

Does that mean we will be able to run webservers and run standard IOT simulations?
Edit: Sorry for offtopic discussion on this thread.

[DiskDoctor]

Adding breadboard should be pretty straightforward. Is there documentation how to create objects and offer to the group?

[urish]

The graphics is pretty straightforward, but there are some issues that need to be nailed down before it can be integrated into Wokwi:

1. How do we name the pins?
2. Ideally, we'd would want to DIP place parts such as the ATtiny85, the 74HC595 and perhaps even resistors and LEDs directly over the breadboard, without using any wires. But how would we represent that in diagram.json?
3. Having 800+ tightly-packed points may look weird when you are wiring and see all those pins highlight at once. It may also stress the browser. So we may need a different solution for highlighting the breadboard pins.

As for naming the pins: the simulator has a convention that pins which are internally connected share the name, followed by a dot and index. e.g. GND.1, GND.2, GND.3

If we want to follow this convention, and not make a special case for the breadboard, then this is one possibility:

1l.a, 1l.b, 2l.c, 1l.d, 1le
1r.f, 1r.g, 1r.h, 1r.i, 1r.j
etc.
and then for the power busses
pos1.1 ... pos1.60
neg1.1 ... neg1.60
pos2.1 ... pos1.60
neg2.1 ... neg1.60

However, I am not sure how intuitive these names are.

The breadboard has got 3 votes so far. However, people keep asking for it. It's possible that the more experienced users, who are probably the one who vote for features, care more about features that unlock new functionality.

[DiskDoctor]

A minibreadboard is probably plenty. If more are needed, they can add multiples. Here is a reasonable choice? https://www.prayogindia.in/product/170-pin-mini-breadboard/

I think the attraction is "Build Virtual" as you would in real life.

From a teaching/learning point of view, users should learn to use a breadboard and duplicate what they see in projects. (It also helps with things like joining wires/grounds/etc

If browser resources are a concern, maybe there is a way to active/deactive pinpoints on the breadboard?

All that being said, only so much can be done at one time. Hopefully you can make quick work of this long list.

[yepher]

You could scale this back so it is a single rail. The user can place as many connection rails as they want and chain them together with wires if they wanted to. I am thinking something like this:

Here is what it would look like with parts on it:

I think for a breadboard (or rail) to work you would need to be able to rotate parts on the canvas.

[urish]

Thanks for the suggestion Chris!

As far as I can tell, people want the breadboard so they can reuse the same design as in real life. So I'm not sure how many users will be happy to connect many rails instead of using an off-the-shelf breadboard part.

I mentioned some of the open questions on this comment. The breadboard is technically possible - it's just unclear what's a good way to represent it in diagram.json.

[DiskDoctor]

No reason we can't have a 1x5 and a 2x10? That should give options.

[djedu28]

For me the solution is only when you finish moving (ondrop) a component (a component that is not a breadboard) to check if the component is above a breadboard, (an approximation by coordinates, knowing that the breadboard is rectangular and fixed in size).
And if it's above the breadboard, then check which track the "legs" of each component are on.

Adding connections in diagram.json orienting yourself by (as in real breadboards)

• Columns = Numbers
• Lines = Letters

Example, the LED below is on H21 and H22

To help avoid placing a 'leg' of the component between two connections, the grids can be mandatory activated by hovering an element/mouse over the breadboard.

And when loading the page, or manually entering the information, the system will accept the information as it is in the diagram.json["connections"] without validating each connection to the breadboard.
(this would mean that, if manually filled in the connection information with the element outside the breadboard, or in a non-logical position with the connections, it will ignore this error and interpret it as if there was an invisible wire connecting the component to the track of the breadboard). [The best thing is that this already happens, so less work to program]

With the logic I described, moving a breadboard under other components will not make the connections in the diagram.json
(Depending on the computational cost, this logic could be implemented as well)

diagram.json

{
  "version": 1,
  "author": "DjEdu28",
  "editor": "wokwi",
  "parts": [
    { "type": "wokwi-arduino-uno", "id": "uno",        "top": 212.91, "left": 0,     "attrs": {} },
    { "type": "wokwi-breadboard",  "id": "breadboard", "top": 0,      "left": 0,     "attrs": {} },
    { "type": "wokwi-led",         "id": "led1",       "top": 48.06,  "left": 46.96, "attrs": { "color": "red" }}
  ],
  "connections": [
    [ "led2:C",    "breadboard:H22",  null,    [ ] ],
    [ "led2:A",    "breadboard:H21"                ],
    [ "uno:13",    "breadboard:J21",  "green", [ ] ],
    [ "uno:GND.1", "breadboard:J22",  "black", [ ] ]  
  ]
}

Complete conceptual example

As I used an automatic translator, I know there must be some errors, so I'll keep my original text (in Portuguese) below

####################

Para mim a solução é somente ao terminar de mover (ondrop) um componente (não protoboard) verificar se o mesmo está acima de uma protoboard, (uma aproximação pelas coordenadas, sabendo que a protoboard é retangular e tamanho fixo).
E caso esteja acima da protoboard, então verifica em qual trilha estão as "pernas" de cada componente.

Adicionando as conexões no diagram.json se orientando por (como nas protoboards reais)
![image](https://user-images.githubusercontent.com/43933482/149549179-e38fc695-428b-4931-8882-d4a678104c14.png)
* Colunas = Números
* Linhas = Letras 

Exemplo, o LED abaixo está em H21 e H22

![image](https://user-images.githubusercontent.com/43933482/149546244-f39a99ff-e0b7-47ba-ad4b-be1f71ac2d6a.png)

Para ajudar a evitar posicionar uma 'perna' do componente entre duas conexões, as grades podem ser obrigatoriamente ativadas ao passar um elemento/mouse sobre a protoboard.

E ao carregar a página, ou inserir manualmente as informações  o sistema vai aceitar as informações do jeito que estão no diagram.json["connections"] sem validar cada conexão com a protoboard.
(isso faria com que se fosse preenchido as informações de conexão com o elemento fora da protoboard, ou em lugar não lógico com as conexões, ele vai ignorar esse erro e interpretar como se tivesse um fio invisível conectando o componente a trilha da protoboard) [ O melhor de tudo é que atualmente já acontece isso, então menos trabalho para programar]

Com a lógica que descrevi, ao mover uma protoboard para baixo de outros componentes não fará as conexões no diagram.json
(Dependendo do custo computacional poderia ser implementado essa lógica também)

# diagram.json
```
{
  "version": 1,
  "author": "DjEdu28",
  "editor": "wokwi",
  "parts": [
    { "type": "wokwi-arduino-uno", "id": "uno",        "top": 212.91, "left": 0,     "attrs": {} },
    { "type": "wokwi-breadboard",  "id": "breadboard", "top": 0,      "left": 0,     "attrs": {} },
    { "type": "wokwi-led",         "id": "led2",       "top": 48.06,  "left": 46.96, "attrs": { "color": "red" }}
  ],
  "connections": [
    [ "led2:C",    "breadboard:H22",  null,    [ ] ],
    [ "led2:A",    "breadboard:H21"                ],
    [ "uno:13",    "breadboard:J21",  "green", [ ] ],
    [ "uno:GND.1", "breadboard:J22",  "black", [ ] ]  
  ]
}
```
Exemplo conceitual completo
![image](https://user-images.githubusercontent.com/43933482/149552098-905de218-9b71-4d44-8a3f-6b038912ebe9.png)

[urish]

Very early prototype (you can't even wire it yet):

[DiskDoctor]

Whoo-hoo!

[urish]

Note: #375 requested half/mini breadboard.

Once we have the breadboard infrastructure in place, mini/half should be trivial to implement.

[tproffen]

Just discovered this project looking for a simulator to teach electronics and the Raspberry Pico - breadboards is what our girls are using, so the plan is to simulate and then build. These are middle schoolers :) So this will get my 14votes/month from now until it is done 🥳

[urish]

Thank you for your support @tproffen !

[ammarsys]

hey i would also like to see this! how do i vote?

[urish]

Voting: https://wokwi.com/features#feature-1413001569

[urish]

Thanks to @AriellaE, the breadboard is now functional: https://wokwi.com/projects/328952970765926995

You still need to manually connect parts to the breadboard pins - placing an LED or a resistor on top of pins won't automatically connect them. But @AriellaE is on it!

[demc]

Does this not work for Raspberry Pi Pico with MicroPython? I can't get it to work!

[urish]

Does this not work for Raspberry Pi Pico with MicroPython? I can't get it to work!

In general, the breadboard is still considered in beta. You can share a link to the project, and we'll try to help.

[demc]

Does this not work for Raspberry Pi Pico with MicroPython? I can't get it to work!

In general, the breadboard is still considered in beta. You can share a link to the project, and we'll try to help.

Wow thanks for the fast reply!

https://wokwi.com/projects/346043917808960084

I can't figure out how to add the component to the palette. Do I need to enable beta mode?

[urish]

I can't figure out how to add the component to the palette. Do I need to enable beta mode?

Right now, the only way is to copy-paste it from a different project, e.g. this one https://wokwi.com/projects/328952970765926995

[demc]

I can't figure out how to add the component to the palette. Do I need to enable beta mode?

Right now, the only way is to copy-paste it from a different project, e.g. this one https://wokwi.com/projects/328952970765926995

Hmm, I copy pasted into my project with no luck:

    { "type": "wokwi-breaboard", "id": "bb1", "top": 0, "left": 0, "attrs": {} },

[tproffen]

When you paste in the line, make sure you have a valid JSON file - I had an extra comma in the wrong place and nothing showed up. Once I fixed it it showed up as expected.

[demc]

When you paste in the line, make sure you have a valid JSON file - I had an extra comma in the wrong place and nothing showed up. Once I fixed it it showed up as expected.
…
On Thu, Oct 20, 2022 at 10:13 AM Derrick McMillen @.> wrote: I can't figure out how to add the component to the palette. Do I need to enable beta mode? Right now, the only way is to copy-paste it from a different project, e.g. this one https://wokwi.com/projects/328952970765926995 Hmm, I copy pasted into my project with no luck: { "type": "wokwi-breaboard", "id": "bb1", "top": 0, "left": 0, "attrs": {} }, — Reply to this email directly, view it on GitHub <#434 (comment)>, or unsubscribe https://github.com/notifications/unsubscribe-auth/AATKEF64BOHWO3EAQL2BVFLWEFHR5ANCNFSM6AAAAAARH6LM7Y . You are receiving this because you were mentioned.Message ID: @.>
-- Dr. Thomas Proffen Facebook: tproffen http://www.facebook.com/tproffen | Twitter: @ThomasProffen https://twitter.com/ThomasProffen | Github: tproffen https://github.com/tproffen | LinkedIn: tproffen https://www.linkedin.com/in/tproffen/ Oak Ridge Computer Science Girls http://www.orcsgirls.org | Facebook: ORCSGirls https://www.facebook.com/orcsgirls | Twitter: @orcsgirls https://twitter.com/orcsgirls | Donate http://orcsgirls.org/donate

Thanks, but I already checked that! The pane will not render if the JSON is invalid. The Pico and other components render but not the breadboard.

[urish]

It should read wokwi-breadboard and not wokwi-breaboard (note the missing d in the middle).

But instead of copying the JSON itself, you can select the part in one project, Ctrl+C, go to the diagram of the other project, Ctrl+V and have the part copied. See here for more details

[demc]

It should read wokwi-breadboard and not wokwi-breaboard (note the missing d in the middle).

But instead of copying the JSON itself, you can select the part in one project, Ctrl+C, go to the diagram of the other project, Ctrl+V and have the part copied. See here for more details

What an obvious mistake... thank you so much. I will make a donation now ;)

[urish]

We have a beta of the breadboard. It works if you manually connect wires from the parts to the breadboard.

What doesn't work yet?

1. When placing an LED or pushbutton on top of the breadboard , it won't attach automatically to the breadboard. You need to manually connect the pins
2. Moving a breadboard does not move the parts placed on it (but you can shift-drag to select the breadboard and the parts on it to move them together)
3. If you add the breadboard after adding some components (e.g. LEDs), then the breadboard will go on top of the older components. One workaround is to manually edit diagram.json and move the wokwi-breadboard to the beginning of the part list.

Should we release what we have now and gradually add the missing features? Or are these show-stoppers and we should first implement them and then release the breadboard?

You can vote with reactions:
🚀 to release what we have right now
👀 to wait until we finish implementing the missing features

and feel free to elaborate in a comment!

[tproffen]

Love the progress :) We are planning to use this for electronics classes. We will wait until the connection to the breadboard is automatic after placing a component. Adds too much confusion for the kids otherwise 😎

[tyeth]

Agreed, could happily work around 2, but 1 and 3 are show-stoppers :)

[urish]

Update: we added most of the missing breadboard functionality - parts now attach automatically to the breadboard, they move together with the breadboard, and when you add a breadboard, it goes behind the other parts.

Still missing: we need to fix an issue with the spacing between the top and bottom part of the breadboard. Also, rotating either the breadboard or parts interferes with the auto attach functionality.

[urish]

The breadboard is now ready for mass consumption!

https://wokwi.com/projects/328952970765926995

I'm keeping this issue open still as we are also working on half-breadboard and mini breadboard for you.

[urish]

Half breadboard: https://wokwi.com/projects/349109488710582866

[urish]

Mini breadboard: https://wokwi.com/projects/349124282187514451

and we're good to go!

[tproffen]

Thank you so much - love it ❤