Add SVG support + basic MidiKeyboard example #141

pdesaulniers · 2019-04-30T00:09:26Z

This PR adds the ability to load and display SVGs in DGL UIs. It also adds an example that demonstrates this feature, along with sendNote.

The loading and rastering is done using NanoSVG. For now, I've added an SVG class, along with a loadFromSVG(const SVG& svg) method in the Image class. Later, there should also be some way to display an SVG as a NanoImage or a Cairo image.

There is something important to consider: right now, SVGs are converted to RGBA arrays. This means that we need to recreate a new image every time we want to change the scale of the image, otherwise it won't look crisp. This is not really compatible with the current 'scaling' feature of DGL, which will make the SVG look blurry after scaling, like a standard image.

As for the MidiKeyboard example, it's a really bare-bones keyboard that sends notes from C4 to C6.

pdesaulniers

I've left a few comments in the PR.

By the way, sorry if this PR is too big. I don't mind splitting it in smaller parts if you want.

pdesaulniers · 2019-04-30T00:13:46Z

dgl/src/Image.cpp

+{
+    DISTRHO_SAFE_ASSERT_RETURN(svg.isValid(),)
+
+    loadFromMemory((const char*)svg.getRGBAData(), svg.getSize(), GL_RGBA);


This is pretty bad, as the RGBA data becomes invalid when the SVG is freed. The caller needs to keep both the SVG and the Image 'alive'.

What should we do instead?

add a parameter to allocate memory. if true, do malloc and copy data.

It seems to me like this would be a pretty wasteful copy. I guess it could be avoided if there was an object that combined both SVG and Image.

pdesaulniers · 2019-04-30T00:14:44Z

examples/MidiKeyboard/MidiKeyboardExamplePlugin.cpp

+    */
+    const char* getDescription() const override
+    {
+        return "Plugin that demonstrates how to make a MIDI keyboard widget using DPF.";


I think this description is a bit clumsy.

pdesaulniers · 2019-04-30T00:30:30Z

examples/MidiKeyboard/KeyboardWidget.hpp

+       Get the key that is under the specified point.
+       Return nullptr if the point is not hovering any key.
+     */
+    PianoKey* tryGetHoveredKey(const Point<int>& point)


This could easily be optimized, but this approach has the benefit of being simple I guess...

pdesaulniers · 2019-04-30T00:32:24Z

examples/MidiKeyboard/Makefile

+
+FILES_UI = \
+	resources/MidiKeyboardResources.cpp \
+	MidiKeyboardExampleUI.cpp


The KeyboardWidget should probably be split into hpp/cpp files.

pdesaulniers · 2019-04-30T00:33:35Z

examples/MidiKeyboard/Makefile

+ifeq ($(HAVE_OPENGL),true)
+TARGETS += lv2_sep
+else
+TARGETS += lv2_dsp


This example doesn't really make any sense without OpenGL support.

pdesaulniers · 2019-04-30T00:38:49Z

examples/MidiKeyboard/MidiKeyboardExampleUI.cpp

+    /**
+       Called when a note is pressed on the piano.
+     */
+    void keyboardKeyPressed(const uint keyIndex) override


I guess there doesn't need to be a separate callback for both 'pressed' and 'released', but I couldn't find a proper name for that callback...

falkTX · 2019-04-30T06:39:50Z

dgl/SVG.hpp

+#ifndef DGL_SVG_HPP_INCLUDED
+#define DGL_SVG_HPP_INCLUDED
+
+#include "src/nanosvg/nanosvg.h"


This include is not really needed

falkTX · 2019-04-30T06:42:09Z

dgl/src/SVG.cpp

+    // nsvgParse modifies the input data, so we must use a temporary buffer
+    const size_t bufferSize = dataSize * 4;
+
+    char tmpBuffer[bufferSize];


this might segfault if stack size becomes too big.
as this is not a RT operation, allocating memory seems safer

falkTX · 2019-04-30T07:01:44Z

examples/MidiKeyboard/MidiKeyboardExampleUI.cpp

+  public:
+    /* constructor */
+    MidiKeyboardExampleUI()
+        : UI(800, 132),


I would put the initial width and height as static vars, and then use them in the constructor.
This way we avoid calling getWidth, as we already know what it is anyway

pdesaulniers · 2019-05-01T03:03:00Z

@falkTX I've polished a few things, and added some way to play the piano using the computer keyboard (very rudimentary for now, will be improved in another PR).

I guess you can start merging the PR piece by piece. At least, the keyboard widget seems to behave as expected, and I'm not aware of any terrible issue in the code.

pdesaulniers · 2019-05-01T03:54:46Z

Hold on, it seems like I broke SVG scaling. I'll need to investigate this tomorrow.

pdesaulniers · 2019-05-01T22:09:54Z

Nevermind, seems like it's working fine. Scaling would make the keyboard bigger than the UI, and the keyboard would end up outside of the UI due to a uint underflow.

falkTX · 2019-07-12T10:17:33Z

After some thought I decided that it is best to place these sorta widgets into a new repo, like DPF-Widgets or similar in name.
So DPF remains small, but we can have the community bring some useful stuff in there.

No time for this now, just letting you know.
I welcome proposals for the repo name :)

pdesaulniers · 2019-07-28T18:10:48Z

Good. Perhaps it would make sense to create a "DISTRHO-Community" organization, and add the repo there.

I guess the repo could contain more than just widgets (utility classes, DSP stuff, etc). In that case, the name "DPF-Widgets" would be too specific.

As for the piano widget: even if it ends up in a different repo, it would still benefit from key-codes support in pugl. I'll try to create a PR for this soon.

…into svg

pdesaulniers · 2019-07-29T19:36:30Z

For demonstration purposes, I have updated the piano widget to use keycodes instead of hard-coded QWERTY notes.

pdesaulniers added 3 commits April 27, 2019 21:49

Initial work on SVG support

fa450e2

Finish basic implementation of SVG support + MidiKeyboard example

23cc7da

Update MidiKeyboard's README

7505c9b

pdesaulniers commented Apr 30, 2019

View reviewed changes

pdesaulniers added 3 commits April 29, 2019 20:49

Avoid constexpr and add leak detector

cc70a9d

Avoid comparison between signed and unsigned integers

9b1867b

Avoid potential memory leak

9308d52

falkTX reviewed Apr 30, 2019

View reviewed changes

pdesaulniers added 6 commits April 30, 2019 20:10

Get rid of bufferSize variable

b901c49

Bring back the comment mentioning the need for a temporary buffer

f82df26

Cleanup

60ab304

Use static vars for UI width/height

54013df

SVG cleanup and subtle UI polish

0b05f45

Allow playing notes using the computer keyboard

a27c8d8

Use regular int for keyboardDeltaWidth

abbc504

pdesaulniers added 5 commits July 29, 2019 14:02

Add keycodes support

d83aaf2

Better documentation for PuglKeyCodes; change keycode acronym to KC

21f3696

Merge branch 'keycodes-support' of https://github.com/pdesaulniers/DPF …

9510c10

…into svg

Update piano widget to use keycodes

2d9b13d

Remove superfluous notes & fix build

6ea0cc3

pdesaulniers added 2 commits July 30, 2019 08:52

Fix comment

5bffb9f

Add some comments

cb5517b

falkTX force-pushed the develop branch from 0ad80dd to ef91e10 Compare August 31, 2022 17:29

falkTX force-pushed the develop branch 12 times, most recently from 4fa52aa to bd702d4 Compare September 9, 2022 19:52

falkTX force-pushed the develop branch from e86463a to 55ab560 Compare December 29, 2022 02:05

falkTX force-pushed the develop branch from 3a5d360 to 5a69a71 Compare January 30, 2023 12:53

falkTX force-pushed the develop branch from 81ffd24 to 5c22ff0 Compare April 22, 2023 16:28

falkTX force-pushed the develop branch from c1bcae1 to 8a085b3 Compare March 23, 2024 21:14

falkTX force-pushed the develop branch 3 times, most recently from 7599a6e to 52c2e78 Compare May 17, 2024 13:39

falkTX force-pushed the develop branch 2 times, most recently from 59cc6ed to 470c5b7 Compare July 14, 2024 11:06

falkTX force-pushed the develop branch 8 times, most recently from 8507aec to 7cd4819 Compare October 6, 2024 17:55

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add SVG support + basic MidiKeyboard example #141

Add SVG support + basic MidiKeyboard example #141

pdesaulniers commented Apr 30, 2019 •

edited

Loading

pdesaulniers left a comment

pdesaulniers Apr 30, 2019

falkTX Apr 30, 2019

pdesaulniers May 3, 2019

pdesaulniers Apr 30, 2019

pdesaulniers Apr 30, 2019

pdesaulniers Apr 30, 2019

pdesaulniers Apr 30, 2019

pdesaulniers Apr 30, 2019

falkTX Apr 30, 2019

falkTX Apr 30, 2019

falkTX Apr 30, 2019

pdesaulniers commented May 1, 2019

pdesaulniers commented May 1, 2019

pdesaulniers commented May 1, 2019 •

edited

Loading

falkTX commented Jul 12, 2019

pdesaulniers commented Jul 28, 2019

pdesaulniers commented Jul 29, 2019

Add SVG support + basic MidiKeyboard example #141

Are you sure you want to change the base?

Add SVG support + basic MidiKeyboard example #141

Conversation

pdesaulniers commented Apr 30, 2019 • edited Loading

pdesaulniers left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

pdesaulniers commented May 1, 2019

pdesaulniers commented May 1, 2019

pdesaulniers commented May 1, 2019 • edited Loading

falkTX commented Jul 12, 2019

pdesaulniers commented Jul 28, 2019

pdesaulniers commented Jul 29, 2019

pdesaulniers commented Apr 30, 2019 •

edited

Loading

pdesaulniers commented May 1, 2019 •

edited

Loading