Starting to build rack plugs-ins (haven’t touched C++ for 30 years), but I’ve run into some issues creating the pannels in InkScape. I’ve used InkScape in the past, but have since moved on to affinity. However as I’ve seen here in the forum it seams Affinity seams to add tokens to the generated SVG files, I’ve decided to stick with InkScape, and I finally got my Batch-file working (converting text to path).
Anyway, laying out my panel-design I bring in the graphics from the Rack source for the controls (to be removed later) just so I can workout the “size” of things. Using InkScape 1.32 I create a new file with the size 15.24 x 128.5 mm (3HP). I then open one of the files from the Rack source (e.g. “PJ301M.svg” from the folder “res\ComponentLibrary”) and copy-paste it into my own panel, so have an idea of the size of a “port”.
My issue however the scale is all wrong. Eyeballing’ it, it appears I need to grow it’s size to approx +30%. Same issue bringing knobs and so on?
I originally tried to follow the panel tutorial, and quickly ran into scaling issues. Then I noticed that the VCV panels did not seem to follow the tutorial, so I started using those dimensions and all has been good.
I keep the units at pixels, and set width to 15 pixels per hp, and height at constant 380 pixels.
I can open the stock svg control graphics and measure their dimensions in pixels to get the size of the shape I need in my hidden layer, and everything scales beautifully.
Always use whole HP units for panel width (multiples of 15 pixels). Make sure your Viewbox is 1:1. In Inkscape, set your document Properties like this:
Thanks that worked much better. Dave do you use InkScape? and if so do you do any manual/automatic process to remove your hidden layer? I finally got my bat-file process to work. I saw a few here on the forum using powershell (I’m on windows), but could not get their powershell examples to work. This is what I got working:
@set "inkscapepath=C:\Program Files\Inkscape\bin\inkscape.exe"
@set "inputpath=C:\Data\Cpp\InfNoiseRack\res-raw"
@set "outputpath=C:\Data\Cpp\InfNoiseRack\res"
FOR %%A IN (*.svg) DO "%inkscapepath%" %inputpath%\%%A --actions="select-by-element:text;object-to-path" --export-plain-svg --export-filename=%outputpath%\%%A
I use Adobe XD, but I would think any screen design program would work. Since SVG is not the native format, you need to export as SVG (same on every tool besides Inkscape). That makes things easy, because you just hide all the stuff you want to hide, convert all the text to paths and export.
I’ve never use Inkscape, but from what I understand it’s a “drawing” program (like Illustrator), not a screen design program. A good screen design program (Figma, Sketch, XD, etc…) makes the job much easier that using a drawing program (imao).
If you have your document settings in Inkscape set up per the screenshot above, you now have a screen design setup.
I was a drawing and painting major in university. I can’t draw for beans in Inkscape (Illustrator is even worse) - I use other tools for that, but I find Inkscape useful for designing UIs and making assets for various projects. Haven’t used XD (not paying Adobe for stuff anymore). Figma is very nice for UI design – at least at the time I left, it was the standard UI design tool at Microsoft.
Like Figma, XD is free, but in any case “UI design” is a lot closer to panel making that “painting” is. I’ve never heard of anyone using Inkscape for UI/Screen design. But I’m sure someone is!
@Squinky I’ve seen in other posts you suggest Adobe XD, and thanks for the suggestion. But following Dave and Paul’s suggestion I got it working just fine with InkScape. I have a past using InkScape, whereas XD I don’t know, so I better stick with what I know … for now I have “enough” on my plate learning C++ and the VCV framework
Also I need to figure out how to use your drop-down menu, as I am planning on using it for a module
ah, that’s fine - whatever works for you! I hate learning new tools, but I had to learn something to make panels. Ended up trying to learn Illustrator, which was quite difficult and not fun.
Anyway, if you just take a copy of that drop down it should be very easy to use. Just search the code for something that uses it. I’d by happy to help out, if needed.
If course helper.py doesn’t know about it, but it should be easy to add or change.
I’ve got a hamburger menu widget, but not currently using it in a module. It’s really easy - menus work exactly the same as the context menu on the module widget, you just call the same menu builder method on left mouse rather than the right mouse like the module widget does. I can provide a link if you need it.
Thanks, I will reach out if I run into any issues. I will however start with a few more simple devices before I get to use the menu. For now I’ve copyed yoour “PopupMenuParamWidget.h” and “SqUi.h” from your plugin, and added the following in the top (the rest is un-altered):
// By Squinkylabs
// Licensed under GNU GPLv3+
// https://github.com/squinkylabs/SqHarmony/tree/main/src/ctrl
That’s cool. You might find it easier (eventually) to make a license.dist file. That’s what VCV does, and that’s what I used to do. Then you don’t have to put the attribution all over the place.
