flandreas / antares

Digital circuit learning platform
49 stars 6 forks source link

Colors not forwarded from circuit to symbol and symbol to circuit #723

Closed fpw closed 4 months ago

fpw commented 5 months ago

I designed the following sub-circuit: grafik

In the symbol editor, the switch colors are not forwarded from the circuit and I can't edit them there either, unlike the LED colors which are forwarded and can be changed: grafik

Furthermore, I assigned special colors to some lines and shapes in the symbol editor, e.g. the rectangles at the top. These are not forwarded to the instancing circuit if I use the circuit with its symbol there: grafik

Finally, I wanted to add a black background rectangle and turn the little lines white, but the color white seems to turn them black (other colors work as expected).

And while text colors in the symbol can be changed, they don't seem to be saved at all.

flandreas commented 5 months ago

Can reproduce, started implementation

flandreas commented 5 months ago

Forward switch color to symbol: Implemented.

Use symbol figure colours in used subcircuit symbol: Up to now, if the subcircuit "Color" property was "From style", the subcircuit symbol applied the colours of the "Figure" style, which is simply black and white in your theme. But it makes sense to apply the colours of the symbol drawing in this case. Implemented.

White lines: This is a misconception. Lines are effectively polylines that can be filled. If you choose "White", white is the background color, and black is the border color. So in your case, you have to choose "Black" if you want a white straight line. But I see how this can be confusing. I was confused myself while reproducing the issue.

Save symbol text color: Implemented

BTW: I've noticed that certain switches in your circuit are too narrow for their internal label, especially the shorter ones like "IF0". I couldn't reproduce that on macOS. Seems like another font metrics issue on Windows. Maybe this is asking for a separate issue.

flandreas commented 5 months ago

Note that when trying out "Forward switch color to symbol", I'm afraid you have to quickly toggle the button's color back and forth, because communication to the symbol drawing is using events.

fpw commented 5 months ago

Wow, thanks for the quick fix - can confirm it's working as expected now! While I don't understand the black / white thing, selecting black did the trick to get white lines.

https://github.com/flandreas/antares/assets/5798899/0290527f-ac7c-4431-8107-b9cd9ca83bd0

Close enough to the original grafik

flandreas commented 5 months ago

Wow, this looks just GREAT! Congratulations for this cool project! And do the calculations run as expected? I mean, does it not only look great, but also ... work?


Maybe Antares should have an image component that stores its data as base64 in the circuit file? For the "digital PDP-8/1" header?

flandreas commented 5 months ago

Regarding the black & white issue:

Screenshot 2024-04-20 at 14 35 02

But you are right: It's confusing.

fpw commented 5 months ago

Wow, this looks just GREAT! Congratulations for this cool project! And do the calculations run as expected? I mean, does it not only look great, but also ... work?

Thanks :-) It's about 95% working, there are some corner cases where the results are incorrect and I'm working on them now. The original machine comes with a lot of maintenance software that diagnoses various issues and tests every instruction, and I'm already at a point where I can run the original diagnostics and it will tell me if something is wrong. That's also how I became aware of the RAM issue where a write with 0 was lost, the diagnostic software noticed that and printed it on the console.

I will post the circuit and a little guide in the discussion section once I'm happy with the result.

Maybe Antares should have an image component that stores its data as base64 in the circuit file? For the "digital PDP-8/1" header?

The most flexible and portable solution in regards to JS compatibility etc. would be SVG files. A lesser known fact about SVG files is that they can contain named areas that cause events on click, e.g. to use them for buttons. And it's also possible to change the included CSS on the fly, e.g. for lighting LEDs. That's the approach I'm using in my online version of this: https://pdp8.app/

The "image" on top is actually an SVG file that the JS code interacts with. You can click the buttons (e.g. Start) and it's tied to the switch internally.

For Antares, I imagine that it would be possible to let the user import an SVG as artwork and then do a simple mapping between SVG IDs and Antares ID, e.g. "Connect #if0 to switch:123". Here's how my code for that looks, it's really simple: https://github.com/fpw/SoCDP8/blob/master/src/client/src/frontend/components/frontpanel/FrontPanel.tsx#L124

But until that, PNGs would of course be cool as well, especially if they could also be used as switch artwork (two images per switch, depending on whether toggled or not).

flandreas commented 5 months ago

I like your suggestions regarding images, also the idea to have buttons with art work images for on and off state. I suspect it would make sense for Antares projects to maintain a central repository of imported images, so that not every button would have to have its own copy of the image.

I've checked out pdp8.app. Cool looking site! Just wanted to inform you that the page didn't load in Safari 17.4.1 on my macOS 14.1.1. It produced the following console log output, and the browser kept displaying a white page saying "Loading...".

Screenshot 2024-04-21 at 16 07 21

I then used Chrome, and that worked.