search

wokwi / wokwi-elements

Web Components for Electronics and IoT Parts
https://elements.wokwi.com/
MIT License
185 stars 49 forks source link

Changing size of elements #128

Closed sbp-dev closed 2 years ago

sbp-dev commented 2 years ago

Hi, I'm an embedded developer and just found Wokwi.... thanks for this really impressive piece of work! I am trying to create a web-page with virtual components using wokwi-elements. But I'm a noob when it comes to web development so can't figure out how to change their sizes, e.g. <wokwi-slide-switch> I looked through the code of some of these elements and it seemed like the height, width and viewbox parameters in the svg are mostly hard coded. I'm sure there must be a way to use selectors to change them but not able to figure it out. Any help would be appreciated, thank you!

urish commented 2 years ago

Hi! That sounds interesting, what project are you working on?

There's no out-of-the-box support for resizing the elements, but you can use CSS transforms (or the zoom property) to achieve that. For instance:

<div style="transform: scale(0.5)"> 
  <wokwi-slide-switch></wokwi-slide-switch>
</div>

Here's a complete minimal example

sbp-dev commented 2 years ago

Great, this seems to work!

Hi! That sounds interesting, what project are you working on?

I'm trying to use a physical microcontroller to emulate virtual instruments. So the front-end will be like a a Wokwi project minus the controller board. Hope is to make the setup flexible enough so that any target microcontroller (say STM32 / PSoC) can be wired to it to the emulator board to do virtual experiments.

urish commented 2 years ago

Sounds like an interesting project, similar in a way to what VirtualBreadboard does.

How do you plan to bridge the gap between the physical MCU and the virtual instruments?

sbp-dev commented 2 years ago

Thanks for the ref, didn't know about VirtualBreadboard! Yep, its indeed quite similar.

My idea as of now is to use ESP32 and host the webpage on the chip itself, use C/C++ to handle low latency I/O stuff and use websockets to communicate small packets on-demand with front-end JS. Still very early on implementation, things might change 🙂