Customizing the Template

You have the ability to customize the look and feel of the template. How much customization is available depends on the RPC version of the head unit you are connected with as well as the design of the HMI.

Customizing Template Colors (RPC v5.0+)

You can customize the color scheme of your app using template coloring APIs.

Customizing the Default Layout

You can change the template colors of the initial template layout in the lifecycleConfiguration.

Template Coloring from Above

// Set color schemes
const green = new SDL.rpc.structs.RGBColor().setRed(126).setGreen(188).setBlue(121);
const white = new SDL.rpc.structs.RGBColor().setRed(249).setGreen(251).setBlue(254);
const grey = new SDL.rpc.structs.RGBColor().setRed(186).setGreen(198).setBlue(210);
const darkGrey = new SDL.rpc.structs.RGBColor().setRed(57).setGreen(78).setBlue(96);

const dayColorScheme = new SDL.rpc.structs.TemplateColorScheme();
dayColorScheme.setBackgroundColor(white);
dayColorScheme.setPrimaryColor(green);
dayColorScheme.setSecondaryColor(grey);
lifecycleConfig.setDayColorScheme(dayColorScheme);

const nightColorScheme = new SDL.rpc.structs.TemplateColorScheme();
nightColorScheme.setBackgroundColor(white);
nightColorScheme.setPrimaryColor(green);
nightColorScheme.setSecondaryColor(darkGrey);
lifecycleConfig.setNightColorScheme(nightColorScheme);

Note

You may only change the template coloring once per template; that is, you cannot call changeLayout, SetDisplayLayout or Show for the template you are already on and expect the color scheme to update.

Customizing Future Layouts

You can change the template color scheme when you change layouts. This guide requires SDL JavaScript Suite version 1.2. If using an older version, use SetDisplayLayout (any RPC version) or Show (RPC v6.0+) request.

// Set color schemes
const green = new SDL.rpc.structs.RGBColor().setRed(126).setGreen(188).setBlue(121);
const white = new SDL.rpc.structs.RGBColor().setRed(249).setGreen(251).setBlue(254);
const grey = new SDL.rpc.structs.RGBColor().setRed(186).setGreen(198).setBlue(210);
const darkGrey = new SDL.rpc.structs.RGBColor().setRed(57).setGreen(78).setBlue(96);

const dayColorScheme = new SDL.rpc.structs.TemplateColorScheme();
dayColorScheme.setBackgroundColor(white);
dayColorScheme.setPrimaryColor(green);
dayColorScheme.setSecondaryColor(grey);
lifecycleConfig.setDayColorScheme(dayColorScheme);

const nightColorScheme = new SDL.rpc.structs.TemplateColorScheme();
nightColorScheme.setBackgroundColor(white);
nightColorScheme.setPrimaryColor(green);
nightColorScheme.setSecondaryColor(darkGrey);

const templateConfiguration = new SDL.rpc.structs.TemplateConfiguration()
    .setTemplate(SDL.rpc.enums.PredefinedLayout.GRAPHIC_WITH_TEXT)
    .setDayColorScheme(dayColorScheme)
    .setNightColorScheme(nightColorScheme);

const success = await sdlManager.getScreenManager().changeLayout(templateConfiguration);
if (success) {
    // Color set with template change
} else {
    // Color and template not changed 
}

You can also customize the title and icon of the main menu button that appears on your template layouts. The menu icon must first be uploaded with a specific name through the file manager; see the Uploading Images section for more information on how to upload your image.

const setGlobalProperties = new SDL.rpc.messages.SetGlobalProperties();
setGlobalProperties.setMenuTitle('customTitle');
// The image must be uploaded before referencing the image name here
setGlobalProperties.setMenuIcon(image);
const response = await sdlManager.sendRpc(setGlobalProperties);
if (response.getSuccess()){
    // Success
}

View on GitHub.com

Previous Section Next Section

Customizing the Template

Customizing Template Colors (RPC v5.0+)

Customizing the Default Layout

Note

Customizing Future Layouts

Customizing the Menu Title and Icon