### Live Demo: Basic Usage Example

Source: https://github.com/rdkcentral/lightning/blob/master/docs/Animations/index.md

A complete Lightning application example demonstrating how to initialize and start a continuous animation on an image element. This example animates 'scaleX', 'x', and 'y' properties.

```javascript
class BasicUsageExample extends lng.Application {
    static _template() {
        return {
            LilLightning:{ 
                x: 275, y: 275, src: '/Lightning/img/LngDocs_LilLightningFlying.png'
            }
        }
    }
        
    _init(){
        this._lilLightningAnimation = this.tag('LilLightning').animation({
            duration: 6,
            repeat: -1,
            stopMethod: 'immediate',
            actions:[
                {p: 'scaleX', v: { 0: {v: 1, s: 1}, 0.5: {v: -1, s: 1}, 1: {v: 1, s: 1}}},
                {p: 'x', v: {0: 50, 0.25: 250, 0.5: 500, 0.75: 450, 1: 50}},
                {p: 'y', v: {0: 50, 0.25: 250, 0.5: 50, 0.75: 100, 1: 50 }}
            ]
        });
        this._lilLightningAnimation.start();
    }
}

const App = new BasicUsageExample({stage: {w: window.innerWidth, h: window.innerHeight, useImageWorker: false}});
document.body.appendChild(App.stage.getCanvas());
```

--------------------------------

### Call Transition Start Method

Source: https://github.com/rdkcentral/lightning/blob/master/docs/Transitions/Methods.md

Initiate a transition for a specific property using the `.transition(<property>).start(<targetValue>)` method. This example starts the 'x' transition to a target value of 100.

```javascript
_init(){
   this.tag('MyObject').transition('x').start(100);
}
```

--------------------------------

### Live Demo of Transition Methods

Source: https://github.com/rdkcentral/lightning/blob/master/docs/Transitions/Methods.md

Demonstrates various transition control methods (start, stop, pause, play, finish, reset, updateTargetValue) in a live example. Use left/right keys to cycle through methods and observe their effects on the 'LilLightning' element's 'x' transition.

```javascript
class BasicUsageExample extends lng.Application {
    static _template() {
        return {
            Description:{ x: 50, y: 28, text:{ text: 'Press left or right to swap transitions.', fontSize: 22, wordWrap: true, wordWrapWidth: 450, lineHeight: 30 }},
            LilLightning:{ x: 50, y: 100, src: '/Lightning/img/LngDocs_LilLightningRun.png', transitions:{'x': {duration: 5}}}
        }
    }
    
    _init(){
       this._index = 0;
       this._animationTypes = ['start','stop','pause','play','finish','startTargetValue','resetTargetValue','updateTargetValue'];
       this._myTransition = this.tag('LilLightning').transition('x');
    }
    
    _handleLeft(){
        if(this._index &amp;gt; 0){
            this._index --;
            this.setTransitionMethod(this._animationTypes[this._index]);
        }
        console.log('left', this._animationTypes[this._index]);
    }
    
    _handleRight(){
        if(this._index &amp;lt; this._animationTypes.length -1){
           this._index ++;
           this.setTransitionMethod(this._animationTypes[this._index]);
        }
    }
    
    setDescription(v){
        this.tag('Description').patch({text:{ text: 'Current Method(): ${v}'}});
    }
    
    //Set transition type
    setTransitionMethod(v){
        this.setDescription(v);
        switch(v){
            case 'start':
                if(this.tag('LilLightning').x &amp;gt;= 500){
                    this._myTransition.start(50);
                }else{
                    this._myTransition.start(500);
                }
            break;
            case 'stop':
                this._myTransition.stop();
            break;
            case 'pause':
                this._myTransition.pause();
            break;
            case 'play':
                this._myTransition.play();
            break;
            case 'finish':
                this._myTransition.finish();
            break;
            case 'startTargetValue':
                this._myTransition.start(50);
            break;
            case 'resetTargetValue':
                this._myTransition.reset(50, 1);
            break;
            case 'updateTargetValue':
                this._myTransition.updateTargetValue(250);
            break;
        }
    }
       
}

const options = {stage: {w: window.innerWidth, h: window.innerHeight, useImageWorker: false}};
const App = new BasicUsageExample(options);
document.body.appendChild(App.stage.getCanvas());

```

--------------------------------

### Basic Usage Example with Multiple Transitions

Source: https://github.com/rdkcentral/lightning/blob/master/docs/Transitions/index.md

Demonstrates starting and resetting transitions for multiple elements with varying durations and timing functions.

```javascript
class BasicUsageExample extends lng.Application {
    static _template() {
        return {
            FinishLine:{ w: 5, h: 300, colorTop: 0xFFABABAB, colorBottom: 0xFFFFFFFF, rect: true, x: 500, y: 200 },
            LilLightningA:{ x: 50, y: 100, src: '/Lightning/img/LngDocs_LilLightningRun.png'},
            LilLightningB:{ x: 50, y: 200, src: '/Lightning/img/LngDocs_LilLightningRun.png'},
            LilLightningC:{ x: 50, y: 300, src: '/Lightning/img/LngDocs_LilLightningRun.png'}
        }
    }
    
    _handleLeft(){
        this.resetTransitions();
    }
    
    _handleRight(){
        this.startTransitions();
    }
        
    startTransitions(){
        //Face candidates to the right
        this.setCandidatesDirection('right');
        
        //Start transitions
        this.tag('LilLightningA').setSmooth('x', 500);
        this.tag('LilLightningB').setSmooth('x', 500, {duration: 2});
        this.tag('LilLightningC').patch({ smooth:{ x: [500, { duration: 2.5, delay: 1, timingFunction: 'ease-out' } ]}});
    }
    
    resetTransitions(){
        //Face candidates to the left
        this.setCandidatesDirection('left');
        
        //Start transitions
        this.tag('LilLightningA').patch({ smooth:{ x: [50, { duration: 0.5, delay: 0.2, timingFunction: 'ease-in' } ]}});
        this.tag('LilLightningB').patch({ smooth:{ x: [50, { duration: 0.5, delay: 0.4, timingFunction: 'ease-in' } ]}});
        this.tag('LilLightningC').patch({ smooth:{ x: [50, { duration: 0.5, delay: 0.6, timingFunction: 'ease-in' } ]}});
    }
    
    setCandidatesDirection(direction){
        let dir = (direction === 'left')?-1:1;
        this.tag('LilLightningA').scaleX = dir;
        this.tag('LilLightningB').scaleX = dir;
        this.tag('LilLightningC').scaleX = dir;
    }
       
}

const options = {stage: {w: window.innerWidth, h: window.innerHeight, useImageWorker: false}};
const App = new BasicUsageExample(options);
document.body.appendChild(App.stage.getCanvas());
```

--------------------------------

### Live Demo Example

Source: https://github.com/rdkcentral/lightning/blob/master/docs/Transitions/Methods.md

An example demonstrating the usage of various transition methods in a live scenario.

```APIDOC
## Live Demo

The example below shows various methods that can be called on transitions. Press **left** or **right** to swap between the transitions.

```javascript
class BasicUsageExample extends lng.Application {
    static _template() {
        return {
            Description:{ x: 50, y: 28, text:{ text: 'Press left or right to swap transitions.', fontSize: 22, wordWrap: true, wordWrapWidth: 450, lineHeight: 30 }},
            LilLightning:{ x: 50, y: 100, src: '/Lightning/img/LngDocs_LilLightningRun.png', transitions:{'x': {duration: 5}}}
        }
    }
    
    _init(){
       this._index = 0;
       this._animationTypes = ['start','stop','pause','play','finish','startTargetValue','resetTargetValue','updateTargetValue'];
       this._myTransition = this.tag('LilLightning').transition('x');
    }
    
    _handleLeft(){
        if(this._index > 0){
            this._index --;
            this.setTransitionMethod(this._animationTypes[this._index]);
        }
        console.log('left', this._animationTypes[this._index]);
    }
    
    _handleRight(){
        if(this._index < this._animationTypes.length -1){
           this._index ++;
           this.setTransitionMethod(this._animationTypes[this._index]);
        }
    }
    
    setDescription(v){
        this.tag('Description').patch({text:{ text: 'Current Method(): ${v}'}});
    }
    
    //Set transition type
    setTransitionMethod(v){
        this.setDescription(v);
        switch(v){
            case 'start':
                if(this.tag('LilLightning').x >= 500){
                    this._myTransition.start(50);
                }else{
                    this._myTransition.start(500);
                }
            break;
            case 'stop':
                this._myTransition.stop();
            break;
            case 'pause':
                this._myTransition.pause();
            break;
            case 'play':
                this._myTransition.play();
            break;
            case 'finish':
                this._myTransition.finish();
            break;
            case 'startTargetValue':
                this._myTransition.start(50);
            break;
            case 'resetTargetValue':
                this._myTransition.reset(50, 1);
            break;
            case 'updateTargetValue':
                this._myTransition.updateTargetValue(250);
            break;
        }
    }
       
}

const options = {stage: {w: window.innerWidth, h: window.innerHeight, useImageWorker: false}};
const App = new BasicUsageExample(options);
document.body.appendChild(App.stage.getCanvas());
```
```

--------------------------------

### Basic Usage Example with Transition Events

Source: https://github.com/rdkcentral/lightning/blob/master/docs/Transitions/Events.md

This example demonstrates how to attach event listeners to transitions for 'start' and 'finish' events. It updates a message element to reflect the transition's status and target values. Ensure the Lightning framework and necessary components are initialized.

```javascript
class BasicUsageExample extends lng.Application {
    static _template() {
        return {
            LilLightning: {
                x: 300, y: 300, src: '/Lightning/img/LngDocs_LilLightningFlying.png',
                transitions: {x: {duration: 1}, y: {duration: 1, timingFunction: 'linear'}}
            },
            Message: {
                x: 50, y: 50, text: {fontSize: 32}
            }
        };
    }

    _handleLeft(){
        const subject = this.tag("LilLightning");
        const targetX = subject.getSmooth('x') - 100;
        subject.setSmooth('x', targetX);
    }

    _handleRight(){
        const subject = this.tag("LilLightning");
        const targetX = subject.getSmooth('x') + 100;
        subject.setSmooth('x', targetX);
    }

    _handleUp(){
        const subject = this.tag("LilLightning");
        const targetY = subject.getSmooth('y') - 100;
        subject.setSmooth('y', targetY);
    }

    _handleDown(){
        const subject = this.tag("LilLightning");
        const targetY = subject.getSmooth('y') + 100;
        subject.setSmooth('y', targetY);
    }

    _init(){
        this.tag("LilLightning").transition('x').on('start', () => {
            this.tag("Message").text.text = "Started X transition to " + this.tag("LilLightning").getSmooth('x');
        });
        this.tag("LilLightning").transition('x').on('finish', () => {
            this.tag("Message").text.text = "Finished X transition";
        });
        this.tag("LilLightning").transition('y').on('start', () => {
            this.tag("Message").text.text = "Started Y transition to " + this.tag("LilLightning").getSmooth('y');
        });
        this.tag("LilLightning").transition('y').on('finish', () => {
            this.tag("Message").text.text = "Finished Y transition";
        });
    }

}

const options = {stage: {w: window.innerWidth, h: window.innerHeight, clearColor: 0x00000000, Canvas2D: false, useImageWorker: false}, debug: true}
options.keys = {
    38: "Up",
    40: "Down",
    37: "Left",
    39: "Right",
    13: "Enter",
    9: "Back",
    8: "Back",
    93: "Back",
    174: "Back",
    175: "Menu",
    83: "Search"
};
const App = new BasicUsageExample(options);
document.body.appendChild(App.stage.getCanvas());
```

--------------------------------

### Basic Animation Control Example

Source: https://github.com/rdkcentral/lightning/blob/master/docs/Animations/Methods.md

Demonstrates how to use animation methods like start, stop, pause, and play within a Lightning application. This example controls a "LilLightning" element's animation based on directional key presses.

```javascript
class BasicUsageExample extends lng.Application {
    static _template() {
        return {
            CommandText:{ x: 50, y: 28, text:{ text: '', fontSize: 22 }},
            LilLightning:{
                x: 250, y: 200, src: '/Lightning/img/LngDocs_LilLightningIdle.png'
            }
        }
    }
        
    set commandText(v){
        this.tag('CommandText').patch({ text:{text: 'Animation Command: ${v}'} });
    }
        
    _init(){
        this._myAnimation = this.tag('LilLightning').animation({
            duration: 3, repeat: -1, stopMethod: 'immediate',
            actions: [{ p: 'y', v: { 0: { v: 450, sm: 0 }, 0.5: { v: 100, sm: 1 }, 1: { v: 450, sm: 0 } } }]
        });
        this._myAnimation.start();
        this.commandText = 'start';
    }
    
    _handleLeft(){
        this._myAnimation.start();
        this.commandText = 'start';
    }
    
    _handleRight(){
        this._myAnimation.stop();
        this.commandText = 'stop';
    }
    
    _handleUp(){
        this._myAnimation.pause();
        this.commandText = 'pause';
    }
    
    _handleDown(){
        this._myAnimation.play();
        this.commandText = 'play';
    }
}

const App = new BasicUsageExample({stage: {w: window.innerWidth, h: window.innerHeight, useImageWorker: false}});
document.body.appendChild(App.stage.getCanvas());
```

--------------------------------

### Live Demo: State Events Example

Source: https://github.com/rdkcentral/lightning/blob/master/docs/Components/CompStates/StateChEvents.md

This example demonstrates the $enter and $exit events by switching between two states ('FirstState' and 'SecondState') and updating the UI to show the event details. It requires the Lightning framework.

```javascript
class StateEventsExample extends lng.Application {
    static _template() {
        return {
            Enter: {
                x: 50,
                y: 50,
                text: {
                    fontSize: 20,
                    text: '$enter:'
                }
            },
            Exit: {
                x: 50,
                y: 180,
                text: {
                    fontSize: 20,
                    text: '$exit:'
                }
            }
        }
    }
    
    _init(){
        this._setState('FirstState')
    }
        
    static _states() {
        return [
            class FirstState extends this {
                $enter(event) {
                    this.setMessage('Enter', 'FirstState', event)
                    setTimeout(() => {
                        this._setState('SecondState')
                    }, 3000)
                }
                $exit(event) {
                    this.setMessage('Exit', 'FirstState', event)
                }
            },
            class SecondState extends this {
                $enter(event) {
                    this.setMessage('Enter', 'SecondState', event)
                    setTimeout(() => {
                        this._setState('FirstState')
                    }, 3000)
                }
                $exit(event) {
                    this.setMessage('Exit', 'SecondState', event)
                }
            },
        ]
    }

    setMessage(tag, source, event) {
        this.tag(tag).patch({
            text: {
                text: `$${tag.toLowerCase()} ${source}:\n \n`
                    + JSON.stringify(event)
                    .replace(/[,{}]/g, '\n')
                    .replace(/:/g, ': ')
                    .replace(/"/g, '')
            }
        })
    }
}

const App = new StateEventsExample({stage: {w: window.innerWidth, h: window.innerHeight, useImageWorker: false}});
document.body.appendChild(App.stage.getCanvas());
```

--------------------------------

### Live Demo: Patching X-Position

Source: https://github.com/rdkcentral/lightning/blob/master/docs/Templates/Patching.md

This example demonstrates patching the x-position of an object in response to key presses. It includes the application setup and event handling.

```javascript
class BasicUsageExample extends lng.Application {
    static _template() {
        return {
            LilLightning:{ x: 100, y: 100, src: '/Lightning/img/LngDocs_LilLightningIdle.png' }
        }
    }
    
    _handleLeft(){
        this.tag('LilLightning').patch({ x: 100 });
    }
     
    _handleRight(){
        this.tag('LilLightning').patch({ x: 400 });
    }
}


const options = {stage: {w: window.innerWidth, h: window.innerHeight, clearColor: 0x00000000, Canvas2D: false, useImageWorker: false}, debug: true}
options.keys = {
    38: "Up",
    40: "Down",
    37: "Left",
    39: "Right",
    13: "Enter",
    9: "Back",
    8: "Back",
    93: "Back",
    174: "Back",
    175: "Menu",
    83: "Search"
};
const App = new BasicUsageExample(options);
document.body.appendChild(App.stage.getCanvas());
```

--------------------------------

### Install Playwright and Run Integration Tests

Source: https://github.com/rdkcentral/lightning/blob/master/README.md

Install Playwright for integration testing, build the project, and then run tests interactively. Ensure project dependencies are installed.

```bash
npx playwright install
npm run build
npm run playwright:interactive
```

--------------------------------

### Basic State Switching Example

Source: https://github.com/rdkcentral/lightning/blob/master/docs/Components/CompStates/SwitchingStates.md

This example visualizes state switching by controlling animations of two cubes. Press left to enter the blue state and right to enter the green state. Ensure the Lightning framework is included and the stage is configured.

```javascript
//Press left or right to switch the states of the blue and green cube.

class BasicUsageExample extends lng.Application {
    static _template() {
        return {
            ExamplanationText:{ x: 50, y: 28, text:{ text: 'Press left for MyBlueState,\n press right for MyGreenState \n', fontSize: 22, wordWrap: true, wordWrapWidth: 450, lineHeight: 30 }},
            MyBlueCube:{
               x: 100, y: 200, w: 100, h: 100, rect: true, color: 0xFF0034DD
            },
            MyGreenCube:{
               x: 400, y: 200, w: 100, h: 100, rect: true, color: 0xFF24DD00
            }
        }
    }
    
    _handleLeft(){
        this._setState('MyBlueState');
    }
    
    _handleRight(){
        this._setState('MyGreenState');
    }
    
    _init(){
        this._blueCubeAnimation = this.tag('MyBlueCube').animation({
            duration: 3, repeat: -1, stopMethod: 'immediate',
            actions: [{ p: 'rotation', v: { 0: { v: 0, sm: 0 }, 1: { v: -Math.PI * 2, sm: 0 } } }]
        });
        this._greenCubeAnimation = this.tag('MyGreenCube').animation({
            duration: 3, repeat: -1, stopMethod: 'immediate',
            actions: [{ p: 'rotation', v: { 0: { v: 0, sm: 0 }, 1: { v: Math.PI * 2, sm: 0 } } }]
        });
    }
        
    static _states(){
        return [
             class MyBlueState extends this{
                $enter(event){
                    this._blueCubeAnimation.play();                    
                }
                $exit(){
                    this._blueCubeAnimation.pause();
                }                            
            },
            class MyGreenState extends this{
                $enter(){
                    this._greenCubeAnimation.play();
                }
                $exit(){
                    this._greenCubeAnimation.pause();
                }
            }
        ];
    }
}

const App = new BasicUsageExample({stage: {w: window.innerWidth, h: window.innerHeight, useImageWorker: false}}); document.body.appendChild(App.stage.getCanvas());
```

--------------------------------

### Basic Lightning Application Setup

Source: https://github.com/rdkcentral/lightning/blob/master/examples/basic-usage/web-src/basic-usage.html

This snippet initializes a Lightning application with basic configuration and renders it to the DOM. It includes the application class definition, template, and event handlers.

```javascript
import lng from '../../../dist/src/lightning.mjs'; //attachInspector(lng) window.onload = function() { class BasicUsageExample extends lng.Application { static _template() { return { Bg: { src: "../../landscape.jpg", scale: 1, }, Primary: { Main: {rect: true, renderToTexture: true, w: 900, h: 900, colorLeft: 0x000000FF, colorRight: 0xFF0000FF }, App: {alpha: 0.5, rect: true, w: 100, h: 100, scale: 1, texture: {type: lng.textures.NoiseTexture, x: 0, y: 0, w: 1000, h: 1000}} }, Overlay: {} } } _handleLeft() { this.tag('Primary').setSmooth('x', this.tag('Primary').getSmooth('x') - 100) } _handleRight() { this.tag('Primary').setSmooth('x', this.tag('Primary').getSmooth('x') + 100) this._setState("Loading"); } _handleUp() { this.tag('Primary').setSmooth('y', this.tag('Primary').getSmooth('y') - 100) } _handleDown() { this.tag('Primary').setSmooth('y', this.tag('Primary').getSmooth('y') + 100) } } const options = {stage: {w: 900, h: 900, clearColor: 0xFF000000, canvas2d: false, useImageWorker: false}, debug: true} const app = new BasicUsageExample(options); document.body.appendChild(app.stage.getCanvas()); }
```

--------------------------------

### Basic Lightning Application Setup

Source: https://github.com/rdkcentral/lightning/blob/master/examples/mouse-pointer/basic-usage.html

Sets up a basic Lightning application with custom stage and debug options. Ensure the canvas element is appended to the document body.

```javascript
import lng from '../../dist/src/lightning.mjs'; //attachInspector(lng) window.onload = function () {
  const ENABLE_POINTER = true;

  class Card extends lng.Component {
    static _template() {
      return {
        w: 200,
        h: 200,
        rect: true,
        color: 0xffaa7777,
        collision: true,
        Text: {
          text: {
            text: 'Click me!'
          },
          x: 25,
          y: 50,
          rotation: 0.5
        }
      }
    }

    _handleClick(el, { x, y }) {
      console.log(x, y)
      this.animation({
        duration: 0.2,
        actions: [
          {
            p: 'scale',
            v: {
              0: 1.0,
              0.5: 1.1,
              1: 1.0
            }
          }
        ]
      }).start();
    }

    _handleHover() {
      this.setSmooth('color', 0xff77aa77);
    }

    _handleUnhover() {
      this.setSmooth('color', 0xffaa7777);
    }
  }

  class BasicUsageExample extends lng.Application {
    static _template() {
      return {
        Card1: {
          type: Card,
          x: 50,
          y: 50
        },
        Card2: {
          type: Card,
          x: 50 + 200 + 25,
          y: 50
        },
        Card3: {
          type: Card,
          x: 50 + 400 + 50,
          y: 50,
          collision: true,
          alpha: 0.5
        }
      }
    }

    _handleClick() {
      console.log('click on app')
    }
  }

  const options = {
    stage: {
      w: 1080,
      h: 720,
      clearColor: 0xFF000000,
      canvas2d: false,
      useImageWorker: false,
      devicePixelRatio: 2
    },
    debug: true,
    enablePointer: ENABLE_POINTER
  }

  const app = new BasicUsageExample(options);
  document.body.appendChild(app.stage.getCanvas());
}
```

--------------------------------

### Start an Animation

Source: https://github.com/rdkcentral/lightning/blob/master/docs/Animations/index.md

Initiate a previously defined animation using the 'start' method.

```javascript
myAnimation.start();
```

--------------------------------

### Basic Animation Example

Source: https://github.com/rdkcentral/lightning/blob/master/examples/property-bindings/animations.html

This snippet shows how to create and start an animation that loops indefinitely. It animates the 'size' and 'outlineWidth' properties of a component over time.

```javascript
import lng from '../../dist/src/lightning.mjs'; window.onload = function() { class BasicUsageExample extends lng.Application { static _template() { return { rect: true, w: this.bindProp('size'), h: this.bindProp('size', (context) => context.size / 4), color: 0xff554433, shader: {type: lng.shaders.Outline, width: this.bindProp('outlineWidth')}, Text: { shader: null, x: this.bindProp('size', (context) => context.size - 100), y: this.bindProp('size', (context) => context.size / 4 - 50), text: {text: 'Hello'} } } } _init() { this.animation({ repeat: -1, duration: 5, actions: [ {p: 'size', v: {0: 300, 0.5: 600, 1: 300}}, {p: 'outlineWidth', v: {0: 10, 0.5: 3, 1: 10}} ] }).start(); } } const options = {stage: {w: 900, h: 900, clearColor: 0xFF000000, canvas2d: false, useImageWorker: false}, debug: true} const app = new BasicUsageExample(options); document.body.appendChild(app.stage.getCanvas()); }
```

--------------------------------

### Lightning Animation Actions Example

Source: https://github.com/rdkcentral/lightning/blob/master/docs/Animations/Actions.md

Demonstrates animating an element's 'src', 'x', 'y', and 'scale' properties over time using the 'actions' array. This example requires the lng.Application class and a defined template.

```javascript
class BasicUsageExample extends lng.Application {
    static _template() {
        return {
            LilLightning:{
                x: 50, y: 250, src: '/Lightning/img/LngDocs_LilLightningIdle.png'
            }
        }
    }
        
    _init(){
        const lilLightningFlying = this.tag('LilLightning').animation({
            duration: 4, repeat: -1, stopMethod: 'immediate',
            actions: [
                { p: 'src', v: { 0: '/Lightning/img/LngDocs_LilLightningIdle.png', 0.2:  '/Lightning/img/LngDocs_LilLightningRun.png', 0.6:  '/Lightning/img/LngDocs_LilLightningFlying.png'} },
                { p: 'x', v: { 0: {v: 50, se: 0}, 0.2: {v: 50, s: 0}, 0.6: {v: 250, s: 0}, 1: 700 } },
                { p: 'y', v: { 0: {v: 250, se: 0}, 0.2: {v: 250, s: 0}, 0.6: {v: 250, s: 0}, 1: -150 } },
                { p: 'scale', v: { 0: {v: 1, se: 0}, 0.2: {v: 1, s: 0}, 0.6: {v: 1, s: 0}, 1: 0.2 } }
            ]
        });
        lilLightningFlying.start();
    }
}

const App = new BasicUsageExample({stage: {w: window.innerWidth, h: window.innerHeight, useImageWorker: false}});
document.body.appendChild(App.stage.getCanvas());
```

--------------------------------

### Live Demo: State Nesting Example

Source: https://github.com/rdkcentral/lightning/blob/master/docs/Components/CompStates/NestingStates.md

This example demonstrates state nesting by transitioning between an idle state, a blue cube state, and a nested green cube state within the blue state. Pressing 'right' enters the blue state, and pressing 'right' again enters its nested green state. Pressing 'left' navigates back up the state hierarchy.

```javascript
//Press right to $enter() the blue state.
//Press right again to $enter() its nested state, which is the green cube.

class BasicUsageExample extends lng.Application {
    static _template() {
        return {
            ExamplanationText:{ x: 50, y: 28, w: 590, text:{ text: '', fontSize: 22, wordWrap: true, wordWrapWidth: 590, lineHeight: 30 }},
            MyBlueCube:{ 
               x: 100, y: 200, w: 100, h: 100, rect: true, color: 0xFF0034DD
            },
            MyGreenCube:{
               x: 400, y: 200, w: 100, h: 100, rect: true, color: 0xFF24DD00
            }
        }
    }
    
    _init(){
        this._blueCubeAnimation = this.tag('MyBlueCube').animation({
            duration: 3, repeat: -1, stopMethod: 'immediate',
            actions: [{ p: 'rotation', v: { 0: { v: 0, sm: 0 }, 1: { v: -Math.PI * 2, sm: 0 } } }]
        });
        this._greenCubeAnimation = this.tag('MyGreenCube').animation({
            duration: 3, repeat: -1, stopMethod: 'immediate',
            actions: [{ p: 'rotation', v: { 0: { v: 0, sm: 0 }, 1: { v: Math.PI * 2, sm: 0 } } }]
        });
        this._setState('MyIdleState');
    }
        
    static _states(){
        return [
             class MyBlueState extends this{
                $enter(){
                    this.tag('ExamplanationText').patch({ text:{ text: 'I am in my Blue state now! 
 (Press Left or Right)'}});
                    this._blueCubeAnimation.play();                    
                }
                $exit(){
                    this._blueCubeAnimation.pause();
                }
                _handleLeft(){
                    this._setState('MyIdleState');
                }
                _handleRight(){
                    this._setState('MyBlueState.MyNestedGreenState');
                }
                static _states(){
                    return [
                        class MyNestedGreenState extends MyBlueState{
                            $enter(){
                                this.tag('ExamplanationText').patch({ text:{ text: 'I am in Blue\'s nested Green state now! 
 (Press Left)'}});
                                this._greenCubeAnimation.play();
                            }
                            $exit(){
                                this.tag('ExamplanationText').patch({ text:{ text: 'I am back in my Blue state now, 
but did not $enter(), because I was there all along! 
 (Press Left or Right)'}});
                                this._greenCubeAnimation.pause();
                            }
                            _handleLeft(){
                                this._setState('MyBlueState');
                            }
                        }
                    ]
                }                            
            },
            class MyIdleState extends this{
                $enter(){
                    this.tag('ExamplanationText').patch({ text:{ text: 'I am in my Idle state now! 
 (Press Right)'}});
                    this._blueCubeAnimation.pause();
                    this._greenCubeAnimation.pause();
                }
                _handleRight(){
                    this._setState('MyBlueState');
                }
            }
        ];
    }
}

const App = new BasicUsageExample({stage: {w: window.innerWidth, h: window.innerHeight, useImageWorker: false}});
document.body.appendChild(App.stage.getCanvas());
```

--------------------------------

### Custom Key Mapping Example

Source: https://github.com/rdkcentral/lightning/blob/master/docs/HandlingInput/RemoteControl/KeyHandling.md

Demonstrates how to map a specific key code (e.g., 's' key) to a custom handler method (`_handleSearch`) within a Lightning application. This example also shows how to set up default key mappings for navigation.

```javascript
class BasicUsageExample extends lng.Application {
    static _template() {
        return {
            Message: {text: {text: "Press 's' key to show Search"}}
        }
    }
    
    _handleSearch(){
        this.tag("Message").text.text = "Search";
    }    
}


const options = {stage: {w: window.innerWidth, h: window.innerHeight, useImageWorker: false}}
options.keys = {
    38: "Up",
    40: "Down",
    37: "Left",
    39: "Right",
    13: "Enter",
    83: "Search" // Map s to search
};
const App = new BasicUsageExample(options);
document.body.appendChild(App.stage.getCanvas());
```

--------------------------------

### Host Lightning Project with http-server

Source: https://github.com/rdkcentral/lightning/blob/master/tests/TESTS.md

Serve the Lightning project's root directory using a web server to access test files. Ensure you have http-server installed globally.

```bash
http-server -c-1
```

--------------------------------

### Example Rotation Calculation

Source: https://github.com/rdkcentral/lightning/blob/master/docs/RenderEngine/Shaders/Light3D.md

An example demonstrating how to calculate the radian value for a 33-degree rotation.

```javascript
33 * Math.PI / 180
```

--------------------------------

### Run Unit Tests (vitest)

Source: https://github.com/rdkcentral/lightning/blob/master/README.md

Execute unit tests using vitest. Ensure dependencies are installed before running.

```bash
npm run test
```

--------------------------------

### Start Transition with patch()

Source: https://github.com/rdkcentral/lightning/blob/master/docs/Transitions/index.md

Initiate a transition for properties like 'x' and 'color' using the patch method with the smooth property.

```javascript
this.tag('MyObject').patch({ smooth:{ x: 10, color: 0xFFFF0000 }});
```

--------------------------------

### Start Transition with patch() and detailed settings

Source: https://github.com/rdkcentral/lightning/blob/master/docs/Transitions/index.md

Apply transitions with specific duration, delay, and timing functions using the patch method.

```javascript
this.tag('MyObject').patch({ smooth:{ x: [10, 
   {duration: 4, delay: 4, timingFunction: 'linear' }
 ]}});
```

--------------------------------

### Basic Lightning Signals Example

Source: https://github.com/rdkcentral/lightning/blob/master/examples/signals/signals.html

This snippet demonstrates a full example of using signals for communication between components. It includes defining signals in a child component, passing them to a parent, and handling them with various configurations (direct boolean, function, renamed).

```javascript
import lng from '../../../dist/src/lightning.mjs'; //attachInspector(lng) window.onload = function() {
class SubBox extends lng.Component {
  static _template() {
    return {
      w: 50, h: 50, rect: true, color: 0xff33ffff,
    }
  }
  _init() {
    this.signal('passSignal1')
    this.signal('passSignal2')
  }
}
class Box extends lng.Component {
  static _template() {
    return {
      w: 300, h: 300, rect: true, color: 0xffffff00,
      SubBox: {
        type: SubBox,
        passSignals: {
          passSignal1: true,
          passSignal2: 'renamedPassSignal2'
        }
      }
    }
  }
  _init() {
    this.signal('signalHandler1')
    this.signal('signalHandler2')
    this.signal('signalHandler3')
    this.signal('signalHandler4')
  }
}
class BasicUsageExample extends lng.Application {
  static _template(ctx) {
    return {
      w: 900, h: 900,
      Bg: {
        src: "../landscape.jpg", scale: 1,
      },
      Box: {
        type: Box,
        x: w => w / 2,
        y: h => h / 2,
        mount: 0.5,
        signals: {
          signalHandler1: ctx.signalHandler1,
          signalHandler2: () => console.log('signalHandler2'),
          signalHandler3: true,
          signalHandler4: 'renamedSignalHandler4',
          passSignal1: () => console.log('passSignal1'),
          renamedPassSignal2: () => console.log('renamedPassSignal2'),
        }
      }
    }
  }
  signalHandler1(e) {
    console.log('signalHandler1')
  }
  signalHandler3(e) {
    console.log('signalHandler3')
  }
  renamedSignalHandler4(e) {
    console.log('renamedSignalHandler4')
  }
}
const options = {
  stage: {
    w: 900, h: 900, clearColor: 0xFF000000, canvas2d: false, useImageWorker: false
  },
  debug: true
}
const app = new BasicUsageExample(options);
document.body.appendChild(app.stage.getCanvas());
}
```

--------------------------------

### Create Canvas Texture Example

Source: https://github.com/rdkcentral/lightning/blob/master/docs/RenderEngine/Textures/Canvas.md

This example demonstrates how to create a canvas texture by drawing a red rectangle on a canvas. It uses `lng.Tools.getCanvasTexture` to convert the canvas content into a renderable texture.

```javascript
class CanvasTextureExample extends lng.Application {
    static _template() {
        return {
            Example: {
                texture: lng.Tools.getCanvasTexture(CanvasTextureExample._createCanvas)
            }
        }
    }

    static _createCanvas(cb, stage) {
        let canvas = stage.platform.getDrawingCanvas();
        canvas.width = 100;
        canvas.height = 100;
        let ctx = canvas.getContext('2d');
        ctx.imageSmoothingEnabled = true;
        ctx.fillStyle = lng.StageUtils.getRgbaString(0xFFFF0000);
        ctx.fillRect(10, 10, 80, 80)
        cb(null, canvas);
    }
}

const options = {stage: {w: window.innerWidth, h: window.innerHeight, useImageWorker: false}};
const App = new CanvasTextureExample(options);
document.body.appendChild(App.stage.getCanvas());

```

--------------------------------

### Texture Demo Application

Source: https://github.com/rdkcentral/lightning/blob/master/docs/RenderEngine/Textures/Toolbox.md

This example demonstrates the usage of `getRoundRect`, `getShadowRect`, and `getSvgTexture` within a Lightning application template. It sets up a scene with these different textures.

```javascript
class TextureDemo extends lng.Application {
    static _template() {
        return {
            x: 50,
            y: 50,
            RoundRectangle: {
                zIndex: 2,
                texture: lng.Tools.getRoundRect(150, 40, 4, 3, 0xffff00ff, true, 0xff00ffff),
            },
            Shadow: {
                x: 10,
                y: 10,
                zIndex: 1,
                color: 0x66000000,
                texture: lng.Tools.getShadowRect(150, 40, 4, 10, 15),
            },
            Svg: {
                x: 10,
                y: 50,
                zIndex: 0,
                texture: lng.Tools.getSvgTexture(Utils.asset('images/image.svg'), 50, 50),
            }
        }
    }
}

const options = {stage: {w: window.innerWidth, h: window.innerHeight, useImageWorker: false}};
const App = new TextureDemo(options);
document.body.appendChild(App.stage.getCanvas());
```

--------------------------------

### Setup and Run Mocha Tests

Source: https://github.com/rdkcentral/lightning/blob/master/tests/test.html

Configure Mocha for BDD, enable leak checking, and run the tests. The result indicates success (0) or failure (non-zero).

```javascript
mocha.setup('bdd')
mocha.checkLeaks();
mocha.run(function(result) {
  console.log(result === 0 ? 'SUCCESS' : 'FAILURE');
});
```

--------------------------------

### Basic Animation Example in LightningJS

Source: https://github.com/rdkcentral/lightning/blob/master/examples/animation/index.html

This snippet shows how to define a simple animation for an element's 'x' property. Ensure the LightningJS library is imported and the application is initialized correctly.

```javascript
import lng from '../../dist/src/lightning.mjs'; //attachInspector(lng) window.onload = function() { class BasicUsageExample extends lng.Application { static \_template() { return { Bg: { rect: true, w: 1900, h: 1080, color: 0xFF000000 }, Block: { rect: true, w: 200, h: 200, color: 0xFFFFFFFF, x: 0, y: 300 }, } } start() { this.blockAnimation.start() } \_init() { this.blockAnimation = this.tag('Block').animation({ duration: 200 / 100, repeat: 0, stopMethod: 'immediate', // timingFunction: 'cubic-bezier(0.20, 1.00, 0.80, 1.00)', actions: \[ { p: 'x', v: { 0: { v: 0 }, 1: { v: 1900 - 200 } } } \], }) console.log('start'); this.blockAnimation.start(); } } const options = {stage: {w: 1900, h: 1080, clearColor: 0xFF000000, canvas2d: false, useImageWorker: false}, debug: true} const app = new BasicUsageExample(options); document.body.appendChild(app.stage.getCanvas()); }
```

--------------------------------

### Basic Usage Example with Animation

Source: https://github.com/rdkcentral/lightning/blob/master/docs/Animations/ValueSmoothing.md

This JavaScript code demonstrates how to apply a complex animation with multiple control points and smoothing values to an element. Ensure the LightningJS framework is set up.

```javascript
class BasicUsageExample extends lng.Application {
    static _template() {
        return {
            Wrapper: {
                x: 300, y: 300,
                LilLightning:{
                    src: '/Lightning/img/LngDocs_LilLightningIdle.png'
                }
            }
        }
    }
    
    _init() {
        const myAnimation = this.tag('LilLightning').animation({
            duration: 2,
            repeat: -1,
            actions: [
                {
                    p: 'y',
                    v: {
                        0: { v: -200, sm: 0.8, s:0 },
                        0.1 : {v: 0, sm: 0.1, s: 0},
                        0.2 : {v: -120, sm: 0.8, s: 0},
                        0.3 : {v: 0, sm: 0.1, s: 0},
                        0.4 : {v: -60, sm: 0.8, s: 0},
                        0.5 : {v: 0, sm: 0.1, s: 0},
                        0.6 : {v: -30, sm: 0.8, s: 0},
                        0.7 : {v: 0, sm: 0.1, s: 0},
                        0.8 : {v: -10, sm: 0.8, s: 0},
                        0.9 : {v: 0, sm: 0.1, s: 0},
                        1: { v: 0, sm: 0.8 }
                    }
                }
            ]
        });
        myAnimation.start();
    }
}


const App = new BasicUsageExample({stage: {w: window.innerWidth, h: window.innerHeight, useImageWorker: false}});
document.body.appendChild(App.stage.getCanvas());
```

--------------------------------

### Live Demo: Signal Communication

Source: https://github.com/rdkcentral/lightning/blob/master/docs/Communication/Signal.md

This example demonstrates a button component signaling its parent to update a message's visibility and color. It includes the parent `SignalDemo` and the child `ExampleButton` components.

```javascript
class SignalDemo extends lng.Application {
    static _template() {
        return {
            x: 20, y: 20,
            Button: {
                type: ExampleButton,
                buttonText: 'Toggle',
                //indicates the signals that your child component will send
                signals: {
                    toggleText: true,
                }
            },
            Message: {
                y: 80, alpha: 0, text: { text: 'Message' }
            }
        }
    }
    toggleText(alpha, color) {
        this.tag('Message').patch({color, smooth: { alpha }})
    }
    _getFocused() {
        return this.tag('Button')
    }
}

class ExampleButton extends lng.component {
    static _template() {
        return {
            color: 0xffffffff,
            texture: lng.Tools.getRoundRect(200, 40, 4),
            Label: {
                x: 100, y: 22, mount: .5, color: 0xff1f1f1f, text: { fontSize: 20 }
            }
        }
    }
    _init() {
        this.tag('Label').patch({ text: { text: this.buttonText }})
        this.toggle = false
        this.buttonColor = 0xffff00ff
    }
    _handleEnter() {
        this.toggle = !this.toggle
        if(this.toggle) {
            this.buttonColor = this.buttonColor === 0xffff00ff ? 0xff00ffff : 0xffff00ff
        }
        this.signal('toggleText', this.toggle, this.buttonColor)
    }
}

const App = new SignalDemo({stage: {w: window.innerWidth, h: window.innerHeight, useImageWorker: false}});
document.body.appendChild(App.stage.getCanvas());
```