Creating more complex Menu's within Lightning SDK

Get Help
1

Hi there,

So I’ve recently began to try and learn to use and develop an application using the SDK framework.

I have been following the “Getting Started” section on the docs:

For the completed project:

So to give more context, there is the Main.js component that declares the information that’s displayed / used as an action for the navigation menu in the Tic-Tac-Toe app:

static _template(){
        return {
            Menu:{
                x: 600, y:400,
                type: Menu, items:[
                    {label:'START NEW GAME',action:'start'},
                    {label:'CONTINUE',action:'continue'},
                    {label:'ABOUT',action:'about'},
                    {label:'EXIT', action:'exit'}
                ],
            }
        }
    }

The items are set within Menu.js:

     this.tag("Items").children = v.map((el, idx)=>{
         return {type: Item, action: el.action, label: el.label, y: idx*90}
     })
 }

 get items(){
     return this.tag("Items").children;
 }

And finally, the actual individual item components are created within Item.js:

    static _template(){
        return {
            text:{text:'', fontFace:'regular', fontSize:50},
            logo:{src:''}
        }
    }

    set label(v){
        this.text.text = v;
    }

    set action(v){
        this._action = v;
    }

    get action(){
        return this._action;
    }

So the main question that I have, is if I wanted to use the same logic and structure of a menu

Screenshot 2020-12-04 at 10.52.35
Screenshot 2020-12-04 at 10.52.351244×628 35.7 KB

But instead of the menu items being a text-based list, I want to also include images within the list items.

Is there any examples that could be provided in which this is used / achieved? I’ve tried a few different approaches while using the same logic to feed the Src, X, Y, W & H values from the Main.js along to Item.js but I can never seem to get it to work.

Any help would be highly appreciated! Thanks in advance for reading

2

Hi @Zalgawi , welcome to the forum!

In order to display images in the menu (or anywhere else in your app, for that matter) you should use the
Image texture type: https://rdkcentral.github.io/Lightning/docs/textures/image

Using the getting started App as a reference, you would have to change Item.js to something like:

import { Lightning, Utils } from "@lightningjs/sdk";

export default class Item extends Lightning.Component{

    static _template(){
        return {
            Icon: {
                w: 50,
                h: 50,
            },
            Label: {
                x: 70,
                text:{
                    text:'', fontFace:'pixel', fontSize:50
                }
            }
        }
    }
    
    // will be automatically called
    set label(v){
        this.tag('Label').text.text = v;
    }
    
    // will be automatically called
    set action(v){
        this._action = v;
    }

    set icon(v) {
        this.tag('Icon').src = Utils.asset(v)
    }
    
    // will be automatically called
    get action(){
        return this._action;
    }
}

And then in your main template you would add an icon-key in each of the items of the Menu items array:

[
    {label:'START NEW GAME', action:'start', icon: 'icons/start.png'},
    {label:'CONTINUE',action:'continue', icon: 'icons/continue.png'},
    {label:'ABOUT',action:'about', icon: 'icons/about.png'},
    {label:'EXIT', action:'exit', icon: 'icons/exit.png'}
]

Hope that helps!
-Michiel

3

Hi Michiel,

I really appreciate the support! This has helped me figure it out! I had to also make some tweaks to the menu.js to get it to expect the icons but it’s all working now.

Thank you very much for the help