Creating a Custom Look and Feel Class

 

Download the project

Introduction: What is Look and Feel?

One common question is how to start creating custom user interfaces (UI) when building a VST plug-in or audio application. This can be a very complicated process, and some experts estimate that creating an interesting UI can be up to 90% of development work!  

In this lesson, we will show you the first step in this process – creating your own Look and Feel class.  Look and Feel (called LNF for short) refers to how JUCE is able to render visual elements to the screen.  These visual elements, such as sliders, text boxes, and menus, are called components. JUCE has a default style in which these components are drawn, and we can use individual component LookAndFeelMethods to customize elements as we see fit.

Core Concepts

This tutorial assumes a basic understanding of C++ and the JUCE Framework.  Here are some concepts to familiarize yourself with to ensure a smooth journey through this tutorial.

Method

First, let’s create a new JUCE project. In this instance, we’ve called this project “LookAndFeelDemo” and created this as a stand alone audio application by selecting “audio” as my template type. You can do this using the audio plug-in template as well, but we’ve done it this way for simplicity.

1. Create new source files

In the Projucer, create a new cpp and header file called “StyleSheet.”  This will be where we will write our custom Look and Feel (LNF) class. Now click “save and open in IDE” to open the project in your IDE.

 

 

2. Create a custom look and feel class

To start writing our custom LNF class, we will first need to inherit from the JUCE class LookAndFeel_V4.  Why V4?  Over the years, JUCE has updated the default look of the framework, and V4 is the latest iteration of this.  Don’t forget to add the JUCE header to your StyleSheet header to access the JUCE library and functions.  Let’s call our class CustomLNF.

#pragma once

#include <JuceHeader.h>


class CustomLNF : public juce::LookAndFeel_V4
{
public:
    // Add methods later!
};

3. Include your custom lnf in your main component

Now we need to change the project’s LookAndFeel to our new CustomLNF.  Let’s include StyleSheet.h in MainComponent.h and create a CustomLNF object called myCustomLNF.

#pragma once

#include "StyleSheet.h"
#include <JuceHeader.h>

class MainComponent  : public juce::Component
{
public:
    //==============================================================================
    MainComponent();
    ~MainComponent() override;

    //==============================================================================
    void paint (juce::Graphics&) override;
    void resized() override;

private:
    CustomLNF myCustomLNF;

    JUCE_DECLARE_NON_COPYABLE_WITH_LEAK_DETECTOR (MainComponent)
};

3. Set the look and feel to your custom lnf object

Now, in the constructor of our MainComponent.cpp, we need to set the look and feel to our custom LNF.  Since setDefaultLookAndFeel() takes a pointer as an argument (remember a pointer is just a memory address), we need to put “&” before our object, which gives the memory address of our LNF.

MainComponent::MainComponent()
{
    juce::LookAndFeel::setDefaultLookAndFeel (&myCustomLNF);
    setSize (600, 400);
}

4. Important!  In the destructor, set the LNF to nullptr.

Under the rules of RAII (Resource Acquisition Is Initialization), we want to ensure we set our LookAndFeel to nullptr in our MainComponent destructor.

MainComponent::~MainComponent()
{
    juce::LookAndFeel::setDefaultLookAndFeel (nullptr);
}

Now we’re ready to start overriding JUCE’s default way of drawing components! In part 2, we will show how to design our own dial.

Privacy Preference Center

Necessary

These cookies are used to record GDPR choices and to provide the minimum necessary functioning of the website for both logged-in and non-logged in users. The third party cookies from Google power the search engine on our site.

wpc_wpc, wp_api_sec, _wpndash, wordpress_logged_in, recognized_logins, G_ENABLED_IDPS, usprivacy, wordpress_sec, wp_api, tk_ai, gdpr[consent_types], wp-settings-time-20, wp-settings-20, gdprprivacy_bar, wordpress_test_cookie, gdpr[allowed_cookies], wp-settings.time-1, last_active_role,
ANID, 1P_JAR, CGIC,DV, SEARCH_SAMESITE

Analytics

Part of our website uses Google cookies to provide site analytics (how our website is used). This helps us to improve our website and create content suitable for all our visitors. You can learn more about how Google uses cookies, and how to manage them at
https://policies.google.com/technologies/types?hl=en-US

_gat_gtag_UA*, _ga, _gid, , CONSENT
__Secure-3PSIDCC, __Secure-3PSID, SIDCC, __Secure-3PAPISID, SSID, SAPISID, APISID, SID, NID, OTZ, COMPASS

Learning Content

We use Dropbox to deliver some of our paid for learning content. This places cookies on our website managed by Dropbox.

jar, locale, __Host-js_csrf, t, lid, last_active_role, bjar

Shopping Cart

These cookies are used to process the payment for paid-for content and to grant access to that content. Our website uses the WooCommerce platform to handle the shopping cart and the PayPal gateway to handle payment processing.

You can find out more about PayPal's cookies (which do not appear on our site) and Privacy Policy by visiting paypal.com/privacy

wp_woocommerce_session, woocommerce_items_in_cart, woocommerce_cart_hash, tk_ai, tk_us, mailchimp_user_mail, mailchimp.cart.current_email

Mailing List Subscriptions

We use a Wordpress plugin to manage our email subscription sign up. We use Mailchimp to handle and manage email to our subscribers, but we don't use their cookies on our site. For more information on MailChimp Cookies, visit https://mailchimp.com/legal/cookies/

et_bloom_optin_optin*, et_bloom_subscribed_to_optin

Marketing and Tracking

_fbp

The Audio Programmer Logo

Connect with the Audio Programmer community and find out about new tutorials, jobs, and events!

You have Successfully Subscribed!