The Customizable Synth

VeNo

What is VeNo?

VeNo started as a pure learning project for C ++ and the understanding of how synths and audio processing work.

The learning project turned into the dream of a new open source synthesizer which offers enough features for newcomers

Compatible

VeNo should run on Windows, macOS and Linux (VST3 Plugin and Standalone).

Downloads

VeNo currently is only available via Source-code @ SourceCode

in the Future, it should be available as Pre-Build

The Customizable Synth

Parameters

The Customizable Synth

Customization

Folder Structure

VeNos files are at the following places:

OS	PATH
Windows	C:\Documents and Settings\`{username}`\Application Data\VeNo\
macOS	~/Library/Application/VeNo/
Linux	~/VeNo

From here we have multiple Sub-Directories and the config file:

editor-config.xml
Layouts
Presets
PROFILES (Only in Profile enabled build)

You can override the Layouts and Presets location via editor-config.xml!

editor-config.xml

The Editor-Config will hold all Configs you can set (most of them are configurable from the UI itself but not all)

To get all available options and explanations for the Config goto: editor-config.xml

GUI-Language

VeNo uses a Custom written GUI-Language to create its Layout that can be overridden via simple Text files

The Folder the Engine is searching the Files is: {OS_PATH}/Layouts. The files all have to end with .gui to be found!

GUI-Lang Docs

To get the documentation from the GUI-Language click here

The Customizable Synth

GUI Markup Language

GUI Markup Language is parsed line by line

It will interpret the GUI on Runtime for every opening don't make the layout to complex

Syntax

Syntax	Meaning
@{0}#{1}	0 is the component 1 is the Name and it's optional
#{0}	0 is the name and not Optional
~	File Information
--	Comment
@import	Import files to avoid code duplication

Available Components

Label
Knob
Slider
Select
Button
Switch
ValueBox
Logo

Imports

to use Imports write: @import {name}

if you want to use import variables you can they are separated by: ; and =

example:

@import Bin::Oscillator;osc=1;isActive

That example line imports the Binary Oscillator File with variable osc with the value "1" and isActive with value " false"

Group & Component Properties

property	value	example
x	x-position based on parent	10
y	y-position based on parent	10
w	width(px or %)	10
h	height(px or %)	10

GROUP

property	value	example
bg	r,g,b,a or key	primaryBG
id	groupID	Group One
header	header name	Group One
position	automatic, fixed(default)	fixed

Components

property	value	example
bind	parameter-bind	master__volume

Color Values

we allow predefined colors that you can set up software wide or instead use custom bgs

primaryBG
secondaryBG
primary
secondary
font
clip
lcdBG
lcd

if an invalid color picked then it will fall back to 255,255,255,255 aka white

if you use custom make sure it's rgb or rgba format range 0-255!

the parser don't allow corrupted rgba values! if you specific an invalid color it will skip the bg and use no color

RED Color RGBA!
custom color: bg: 255,0,0,255

Component Properties (Not Default ones)

Components are registered with Component Factories that know how to implement them all of them are based on BaseComponent

If a Custom Component is needed ask if we can provide it or build it yourself :P

Label

property	value
text	text to show
event	can bind a event for listening

Knob

property	value
label	bottom,top,no,center
label-value	real, show-name

Select

property	value
preset	detune,filter,clip
values	, seperated list of values example: hard,soft,acid

Button

property	value
mode	push or toggle
action	event-listener name (only on push mode)

LCD

property	value
mode	number (1-4)

Switch

property	value
on	Custom On Value
off	Custom Off Value

The Customizable Synth

Bin::Main

This is the Main UI File from VeNo.

~Author: Maurice Grönwoldt (VersusTuneZ)
~Version: 1.0
~Name: MainTheme
~Look: Flat

-- ROOT
w: 1200
h: 700
bg: secondaryBG
position-x: automatic

-- Layout
#Sidebar {
    header: Sidebar
    w: 25%
    h: 100%
    bg: primaryBG
    position-y: automatic
    @import Sidebar
}
#Content {
    position-y: automatic
    w: 75%
    -- MAIN TAB BAR
    #Tab {
        h: 65%
        bg: 0,0,0,30
    }
    #BottomGroup {
        h: 35%
        position-y: automatic
        #Modulators {
            h: 80%
            width: 100%
            header: true
        }
        #Controls {
            h: 20%
            width: 100%
            bg: primaryBG
            position-x: automatic
            @import Footer
        }
    }
}

Bin::Footer

#Pitch  {
    y: 5%
    width: 20%
    height: 90%
    position-x: automatic

    @Label {
        text: Pitch Range
        width: 50%
    }

    @ValueBox#Up {
        y: 12.5%
        bind: pitchbend__up
        height: 75%
        width: 25%
        label: no
        tooltip: false
    }

    @ValueBox#Down {
        y: 12.5%
        bind: pitchbend__down
        height: 75%
        width: 25%
        label: no
        tooltip: false
    }
}

@Label#Tooltip {
    width: 60%
    event: tooltip
}

#Legato/Porta {
    width: 20%
    y: 5%
    height: 90%
    position-x: automatic

    @Switch {
        bind: mono_legato
        width: 50%
    }
    @Knob {
        bind: portamento
        width: 50%
        height: 100%
        label: no
        tooltip: true
    }
}

Bin::Sidebar

@Logo {
    height: 70
    width: 100%
}

#LCD {
    -- @TODO: Implement LCD Component -> it will listen to the bg :>
    h: 170
    bg: lcdBG
}

#Preset {
    -- @TODO: Implement Preset Component
    header: true
    h: 40
    bg: secondaryBG
}

#Mixer {
    h: 130
    flex: true
    justify-content: space-around
    bg: 0,0,0,70

    -- Implement :for for easier setup
    @import OSCMixer;i=1
    @import OSCMixer;i=2
    @import OSCMixer;i=3
    @import OSCMixer;i=4
}

#Master Volume {
    y-offset: 10
    w: 50%
    h: 170
    x: 25%

    @Knob#Master {
        bind: master__volume
        label: top
        label-value: semi
    }
}

#ModKnobs {
    h: 100
    position-x: automatic
    y-offset: 10
    flex: true
    justify-content: space-around

    -- ?do 4:
    @Knob {
        w: 20%
        bind: mod1
    }
    @Knob {
        w: 20%
        bind: mod2
    }
    @Knob {
        w: 20%
        bind: mod3
    }
    @Knob {
        w: 20%
        bind: mod4
    }
}

Bin::OSCMixer

#OSC{i} {
    w: 20%
    header: true
    position-y: automatic
    @Switch {
        h: 30
        x: 5%
        w: 90%
        bind: osc{i}__active
        on: On
        off: Off
    }
    @Knob#Volume {
        h: 70
        bind: osc{i}__level
        label: bottom
        label-value: semi
    }
}

The Customizable Synth

Bin::WaveEditor

Base WaveEditor UI File

~Author: Maurice Grönwoldt (VersusTuneZ)
~Version: 1.0
~Name: WaveEditor
~Look: Flat

w: 560
h: 320
bg: secondaryBG
position-x: automatic

#EditorSpace {
    width: 450
    @WaveEditor {
        x: 10
        y: 10
        width: 430
        height: 280
        -- WaveEditor is the only Component that will listen to the background property
        background: 255,255,255,40
    }
    #Bar {
        background: primaryBG
        height: 20
        y: 300
        position-x: automatic
        #LabelContainer {
            width: 100
            position-x: automatic
            @Label {
                width: 20
                text: X:
            }
            @Label {
                text-align: centredLeft
                text: 0.0000
            }
        }
        #LabelContainer {
            width: 100
            position-x: automatic
            @Label {
                width: 20
                text: Y:
            }
            @Label {
                text-align: centredLeft
                text: 0.0000
            }
        }
    }
}

#WaveSidebar {
    w: 110
    h: 320
    background: primaryBG

    @WaveThumbnails {
       x: 0
       y: 10
       height: 240
    }

    #Buttons {
        y: 250
        width: 100%
        height: 70

        @Button {
            filled: true
            text: Save
            x: 10
            y: 10
            width: 90
            height: 20
        }
        @Button {
            filled: true
            text: Load
            y: 40
            x: 10
            width: 90
            height: 20
        }
    }
}

The Customizable Synth

Config

The Base-Config file:

<?xml version="1.0" encoding="UTF-8"?>

<PROPERTIES>
    <property key="layoutPath" value="res://Layouts/"/>
    <property key="presetPath" value="res://Presets/"/>
    <property key="sliderMode" value="-1"/>
    <property key="useOpenGL" value="1"/>
    <property key="vsync" value="1"/>
    <color>
        <property key="primaryBG" value="ff1b1b1b"/>
        <property key="secondaryBG" value="ff333333"/>
        <property key="primary" value="ff1f73ff"/>
        <property key="secondary" value="ffff0089"/>
        <property key="font" value="ffffffff"/>
        <property key="clip" value="ffff1744"/>
        <property key="lcdBG" value="ff000000"/>
        <property key="lcd" value="ff0081c2"/>
        <property key="logo" value="ffdcdcdc"/>
        <property key="logoPrimary" value="ffff0089"/>
    </color>
    <editor>
        <property key="scale" value="1"/>
    </editor>
    <gui>
        <property key="main" value="MainGui"/>
        <property key="wave" value="WaveEditor"/>
    </gui>
</PROPERTIES>

ROOT Properties

Slider-Mode

Value	Mode
-1	Rotary Vertical Drag
0	Rotary
1	Rotary Horizontal Drag
2	Rotary Horizontal Vertical Drag

OpenGL

You can toggle the Rendering mode from OpenGL or Software renderer. to change that you can switch the property useOpenGL:

Value	Mode
1	ON
0	OFF

VSync

You can turn VSync on and off (Not always working if OS not supporting this): to change that you can switch the property vsync:

Value	Mode
1	ON
0	OFF

VeNo Synthesizer