UI misalignment in VCV Rack

niektb commented 1 year ago

Hi all! I stumbled across this project recently and it looks really interesting as I've been a user of both VCV and Faust and this seems to combine it really nicely. However, when trying to build some of the examples the elements of the UI seem to be misaligned! I'm not sure if I misconfigured anything but here is a screenshot! (notice also that the modules are placed against each other but there is still a gap)

ohmtech-rdi commented 1 year ago

Hi @niektb !

Yes, the SVG seems to be shrinked in both dimensions. The screw placement is fine though, so I guess it's really about the SVG. I can see also that the font is not the proper one for Drop and LowPass (which is supposed to use the installed ones), see screenshot on how it should look:

Could you please give me some information on which platform you are using? (ie Windows, MacOS or Linux?)
Did anything went smoothly while installing?

Thanks!

niektb commented 1 year ago

Hi @ohmtech-rdi

I'm on Windows 11! Installation went not supersmooth as in I had some troubles with Chocolatey (installation of packages hung after asking for installation confirmation) so I had to redo the process. (I believe I solved that by enabling GlobalConfirmation). Doesn't sound very related to me though. I had to also play around with the environment variables. I use OneDrive to backup My Documents so VCVRack could not find the modules (that were placed in the 'normal' My Documents). So I had to reinstall the VCV libraries after setting the ENV Variable like this: Hope this information helps but feel free to ask for more details! :)

ohmtech-rdi commented 1 year ago

Hi @niektb

I'll need to install Windows 11 in a VM to give it a try :)

In the meantime, could you please send the panel_vcvrack.svg of the drop Sample? It is located in the artifacts folder, so here:

eurorack-blocks/samples/drop/artifacts/panel_vcvrack.svg

I'll check if there are any differences by the one produced on other platforms. If not, then maybe it's something specific to Rack that I would need to investigate.

Thanks!

niektb commented 1 year ago

Hi @ohmtech-rdi

Sure! Here it is: panel_vcvrack You can tell from the font that it's different from your example :)

ohmtech-rdi commented 1 year ago

Hi @niektb

Thanks for the svg!

So looking at the files, it seems that our cairo dependency changed again how to write files, and that must confuse VCV Rack for some reason.

This is the diff of the first line:

< <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="172.8" height="364.251969" viewBox="0 0 172.8 364.251969">
---
> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="172.8pt" height="364.251969pt" viewBox="0 0 172.8 364.251969" version="1.1">

(first line is yours, second line is mine).

So it seems that for some reason already units and version are missing.

I'll investigate that more, but I think I'll have to get rid of cairo (this graphic library dependency is one of the biggest pain point in the project), and that might take some time.

ohmtech-rdi commented 1 year ago

That seems to be it. Looking as the specs, without unit, this is interpreted as pixels, I suspected a 75ppi unit instead of 72ppi (=1pt) and the screenshot you send above, when making the ratio between the right height and the wrong one has the same ration as 75/72.

So it seems, it's because cairo is dropping the unit, while the API specifies explicitly points.

I'll see if I'm missing something here, or a way to force points.

ohmtech-rdi commented 1 year ago

@niektb could you please checkout the wip-force-cairo-pt branch and give erbb configure on the sample drop another go and send again the generated eurorack-blocks/samples/drop/artifacts/panel_vcvrack.svg file?

(please don't hesitate to ask if it's not clear how to do that)

Thanks!

niektb commented 1 year ago

@ohmtech-rdi: here is the new svg! panel_vcvrack It looks much better now in VCV!!

The font still looks different though, the spacing is a bit off. Especially on the A:

ohmtech-rdi commented 1 year ago

@niektb Great! So that's one issue fixed in a portable way.

The other one is related on how freetype and cairo interacts. Not sure why this happens yet. I think it selects the wrong font to start with, hopefully that would be the only issue. I'll investigate that.

ohmtech-rdi commented 1 year ago

@niektb Sorry for the delay

Can you please check if you can see the file D-DIN.otf in your C:\windows\fonts directory?
Could it be also that your filesystem is setup to be case sensitive?

Thanks!

ohmtech-rdi commented 1 year ago

Ok, so I'm really not sure what is going on your side, it seems to work well here. However:

Cairo on windows returns different sort of font metrics than macOS or Linux, it's quite broken, but I was able to make a fix in #505 that almost correct the problem
Cairo can't seem to select the right bold font we use anyway, and I'm not sure why as this is a separate otf file

All in all, this is really broken on Windows, and we would need to get rid of cairo font handling completely.

Also, I should mention there is always the workaround of using a custom image, where you would vectorise your text, and this should work properly.

I still really want to know if there was simply a problem with the font copy, and actually the font are not installed for some reasons @niektb

Thanks!

niektb commented 1 year ago

Hi @ohmtech-rdi : thanks for getting back to me! I cannot find the D-DIN.otf in the directory mentioned! So maybe it's an easy fix? But then again, since the alignment issue is fixed I'm actually already quite happy (the 'wrong' font is a little less pretty but it's acceptable. Just add it to the list of known bugs in case others stumble across it and i'm alright :)

ohmtech-rdi commented 1 year ago

@niektb Thanks for the response! Indeed, if you can't find the font, it's normal that it substitutes it with another one.

The alignment I'm talking about are quite subtle in general. What you had was really improper rendering of font because of pycairo, I don't think that's going to change.

But! If you copy manually the fonts in your fonts folder, I think that would solve the problem.

ohmtech-rdi commented 1 year ago

@niektb The fonts are in:

eurorack-blocks/include/erb/vcvrack/design

Then you need to copy the content of each folder into C:\Windows\Fonts

So typically you would have:

C:\Windows\Fonts\D-DIN-Bold.otf
C:\Windows\Fonts\D-DIN-Italic.otf
C:\Windows\Fonts\D-DIN.otf
C:\Windows\Fonts\D-DINCondensed-Bold.otf
C:\Windows\Fonts\D-DINCondensed.otf
C:\Windows\Fonts\D-DINExp-Bold.otf
C:\Windows\Fonts\D-DINExp-Italic.otf
C:\Windows\Fonts\D-DINExp.otf
...

Could you please try that and tell me if you have now proper panels please? :-)

ohmtech-rdi commented 1 year ago

@niektb FYI https://github.com/ohmtech-rdi/eurorack-blocks/pull/519

We implemented what we said last week:

All in all, this is really broken on Windows, and we would need to get rid of cairo font handling completely.

So we are now using Freetype on all 3 platforms (Windows, macOS and Linux) to achieve consistent looks across platforms. Since the fonts do not need to be copied in your Windows fonts folder, we hope this will work out of the box.

I'll try soon myself on Windows, but if you want to give it a try, this is sitting on the branch panel-freetype

ohmtech-rdi commented 1 year ago

So as far as I have tested, this looks the same on all platforms.

If it still doesn't work on Windows 11, please make a new issue for that problem.

niektb commented 1 year ago

Hey I tried this and it looks amazing! Thank you very much!

ohmtech-rdi / eurorack-blocks

UI misalignment in VCV Rack #481