Quoted from: https://webplatformforembedded.github.io/Lightning/docs/renderEngine/flexbox

Lightning does not contain the bloated HTML CSS toolbox.
Instead, it only contains the useful Flexbox layout methodology.
The Lightning layout engine has some smart performance optimizations.
However, it is still rather CPU-intensive so it is best used for situations in which the flex items do not often change dimensions.

Q: Is there some performance issues if we have a carousel card if it has resized on focus/unfocus?
The point is that the flex is not used on the card itself but rather on the text items included.
Example:
static _template() {
return {
clipping: true,
mount: 0.5,
BackgroundImage: {
mount: 0.5,
x: (w)=> w / 2,
y: (h) => h / 2
},
Overlay: {
mount: 0.5,
x: (w)=> w / 2,
y: (h) => h / 2,
rect: true,
color: color.overlay.overlay_200
},
TextContainer: {
mount: 0.5,
flex: {
direction: 'column',
alignContent: 'center',
justifyContent: 'center',
paddingTop: 20
},
Title: {
flexItem: {
alignSelf: 'center'
},
text: {
fontSize: 32,
fontFace: 'Medium',
textColor: color.button.text,
textAlign: 'center'
}
},
Underline: {
alpha: 0,
flexItem: {
alignSelf: 'center'
},
rect: true,
w: 120,
h: 4
}
}
};
}

Thank you.

When I rollup the project - the folliong circular dependencies are called out -

(!) Circular dependency: node_modules/wpe-lightning/src/tree/Element.mjs -> node_modules/wpe-lightning/src/animation/Transition.mjs -> node_modules/wpe-lightning/src/tree/Element.mjs
(!) Circular dependency: node_modules/wpe-lightning/src/renderer/webgl/shaders/GrayscaleShader.mjs -> node_modules/wpe-lightning/src/renderer/c2d/shaders/GrayscaleShader.mjs -> node_modules/wpe-lightning/src/renderer/webgl/shaders/GrayscaleShader.mjs

Would it be possible to get these cleaned up?

Hello Team!
Is there a way to know when the image texture has been loaded and pass a callback function ?

While developing we faced with viewport issue.

You can see on the gif that the lower one carousel is disappearing.

Is it possible to provide a pre-built and tested version of the lightning-web.js rather requiring it be built as part of the npm ci on the consumer side?

Some benefits would include:

1. faster build times for consumers
2. assurance that the library consumed is the same regardless of environment
3. assurance that the library, code and test all align and are the result of a build process.
   ...

possibly publishing to npm as part of a build would resolve.

Hi Team,

We have tried using Lightning with Typescript framework. It would be great if the library supports it by default

After updating Lightning to the newest version, it starts to show this error:

WebPlatform.mjs:58 Uncaught DOMException: Failed to execute 'texImage2D' on 'WebGLRenderingContext': Tainted canvases may not be loaded. at WebPlatform.uploadGlTexture (http://localhost:8080/build/bundle.js:46301:16) at WebGLRenderer.uploadTextureSource (http://localhost:8080/build/bundle.js:47787:29) at TextureManager._nativeUploadTextureSource (http://localhost:8080/build/bundle.js:57290:36) at TextureManager.uploadTextureSource (http://localhost:8080/build/bundle.js:57200:36) at TextureSource.setSource (http://localhost:8080/build/bundle.js:57575:26) at TextureSource.processLoadedSource (http://localhost:8080/build/bundle.js:57546:14) at TextureThrottler._processItem (http://localhost:8080/build/bundle.js:57723:20) at TextureThrottler.processSome (http://localhost:8080/build/bundle.js:57714:22) at Stage.drawFrame (http://localhost:8080/build/bundle.js:56065:31) at lp (http://localhost:8080/build/bundle.js:46290:28)

Source:

        View.prototype.removeTag = function(tag) {
            oRemoveTag.apply(this, arguments);
            if (tag) {
                this.view.dhtml().classList.remove(tag);  >>> this.view is undefined <<<
            }
        };

Type Error at runtime:

Uncaught (in promise) TypeError: Cannot read property 'dhtml' of undefined
    at View.removeTag (inspect.js:307)
    at View.setTags (wpe_u.js:3898)
    at View.set (wpe_u.js:4722)
    at View.set (wpe_u.js:3991)
    at defaultSetter (wpe_u.js:380)
    at Function.patchObjectProperty (wpe_u.js:402)
    at View.patch (wpe_u.js:4997)

Hi,

I've experienced some issues with the mount property:

export default class App extends ux.App {
    static _template() {
        return {
            Header: {
                rect: true,
                w: 1920,
                h: 50,
                color: 0xff005500,
                Title: {
                    x: w => w - 50,
                    y: 30,
                    mountX: 1,
                    mountY: 0.5, text: { text: 'Header' }
                }
            }
        }
    }
}

If I have this code, it renders like this:

If I add the same code to the live demo (or in a component within a project), it renders as expected (please notice window.innerWidth, since the demo panel is smaller than 1920!):

class LiveDemo extends lng.Application {
    static _template() {
        return {
            Header: {
                rect: true,
                w: window.innerWidth,
                h: 50,
                color: 0xff005500,
                Title: {
                    x: w => w - 50,
                    y: 30,
                    mountX: 1,
                    mountY: 0.5, text: { text: 'Header' }
                }
            }
        }
    };
}

Thanks!

When the View is clipped, it works: Text and Background are clipped.
As soon as I rotate my View, it looks like the clipping does not work anymore: I see the Text and Background rotated but not clipped.

//$ node --experimental-modules rotate.mjs

import lng from "../../lightning.mjs"

let width = 120;
let height = 120;

class Rotation extends lng.Application {
    static _template() {
        return {
            Screen: {
                w: 800,
                h: 600,
                x: 200,
                y: 200,
                Border: {
                    w: width, h: height, type: lng.components.BorderComponent, colorBorder: 0xFF0000FF
                },
                View: {
                    w: width, h: height,
                    Background: {
                        rect : true,
                        w: width + 100, h: height + 100,
                        x: 30,y: 30,
                        color: 0xFFFF0000
                    },
                    Title: {
                        text: {text: "Hello", fontSize: 100}
                    },
                    rotation: Math.PI,
                    clipping: true
                }
            }
        }
    }
}

import NodePlatform from "../../src/platforms/node/NodePlatform.mjs";

const options = {stage: {w: 800, h: 600, clearColor: 0xFFFFFFFF, platform: NodePlatform}};

options.stage.window = {title: "Image is not stretched, translated in x and y into the view", fullscreen: false};

const app = new Rotation(options);

In NodePlatform, line 69, this.parseImage(buf, cb);=> this does not refers to the right context as the function is executed into an anonymous callback.

BugFix

Index: src/platforms/node/NodePlatform.mjs
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
--- src/platforms/node/NodePlatform.mjs	(revision 3b8d35609b32aed8022d2c8f3acb8370822dd46d)
+++ src/platforms/node/NodePlatform.mjs	(revision )
@@ -55,7 +55,7 @@
                 mod = http;
             }
 
-            mod.get(src, function(res) {
+            mod.get(src, (res) => {
                 if (res.statusCode !== 200) {
                     return cb(new Error("Status code " + res.statusCode + " for " + src));
                 }

There were a couple issues we had while trying to run Lightning on a couple of different platforms that are on older browser engines, like LG WebOS 2 and Playstation 4.

WebGLTexture and createImageBitmap is undefined for PS4. We've had to polyfill createImageBitmap using something like:

if (!('createImageBitmap' in window)) {
  window.createImageBitmap = async function(blob) {
    return new Promise((resolve, reject) => {
      const img = document.createElement('img');
      img.addEventListener('load', function() {
        resolve(this);
      });
      img.src = window.URL.createObjectURL(blob);
    });
  };
}

and we also changed _isNativeTexture to something like:

_isNativeTexture(source) {
  if (Utils.isNode) {
    return source.constructor.name === "WebGLTexture";
  }

  if ('WebGLTexture' in window) {
    return source instanceof WebGLTexture;
  }

  return false;
}

to prevent an exception from occurring.

ImageData was also missing, and we've polyfilled it using this gist that we found.

Note: Web Workers also will not have the polyfills. So the createImageBitmap polyfill above will not work! We also lose things like Map support for older browsers

Otherwise running examples with node v8 --experimental-modules will breaks:

$ node --experimental-modules basic-usage.mjs
 (node:11793) ExperimentalWarning: The ESM module loader is experimental.
/Users/cesalmon/workspace/wtv-lightning/src/renderer/c2d/C2dTextureTintManager.js:1
(function (exports, require, module, __filename, __dirname) { export default class C2dTextureTintManager {

SyntaxError: Unexpected token export

Here is the patch to fix the problem:

Index: src/renderer/c2d/C2dTextureTintManager.js
===================================================================
--- src/renderer/c2d/C2dTextureTintManager.js	(revision 7fdb6962e0c250d478b7219f8dbc4ad73c7b641d)
+++ src/renderer/c2d/C2dTextureTintManager.mjs	(revision )
@@ -1,0 +1,0 @@
Index: src/renderer/c2d/C2dRenderer.mjs
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
--- src/renderer/c2d/C2dRenderer.mjs	(revision 7fdb6962e0c250d478b7219f8dbc4ad73c7b641d)
+++ src/renderer/c2d/C2dRenderer.mjs	(revision )
@@ -5,7 +5,7 @@
 import DefaultShader from "./shaders/DefaultShader.mjs";
 import C2dShader from "./C2dShader.mjs";
 import Renderer from "../Renderer.mjs";
-import TextureTintManager from "./C2dTextureTintManager.js";
+import TextureTintManager from "./C2dTextureTintManager.mjs";
 
 export default class C2dRenderer extends Renderer {

When I run example with 2 bunnies, inside web browser, it looks different in case of node js one. Seems coordinate systems are different. Can you explain the difference?

Node JS

Web

Hi
I am trying to setup lightning sdk to run the examples available in the package.
Also , I created a file src/MyApp.js , index.html, generated a package.json inside src folder(without configuring any parameter) and also index.mjs , as mentioned in the documentation available in github.(Code part remains same as given in documentation https://webplatformforembedded.github.io/Lightning/docs/gettingStarted).

I tried running the command "node --experimental-modules index.mjs" in terminal and i got below error:
$ node --experimental-modules index.mjs
(node:16862) ExperimentalWarning: The ESM module loader is experimental.
Error: Module did not self-register.
at Object.Module._extensions..node (internal/modules/cjs/loader.js:717:18)
at Module.load (internal/modules/cjs/loader.js:598:32)
at tryModuleLoad (internal/modules/cjs/loader.js:537:12)
at Function.Module._load (internal/modules/cjs/loader.js:529:3)
at Module.require (internal/modules/cjs/loader.js:636:17)
at require (internal/modules/cjs/helpers.js:20:18)
at Object. (/home/test/rinee/Lightning/trial/src/node_modules/wpe-webgl/gles2.js:1:75)
at Module._compile (internal/modules/cjs/loader.js:688:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:699:10)
at Module.load (internal/modules/cjs/loader.js:598:32)

Then I tried removing --experimental-modules and that also failed:
$ node index.mjs
/home/test/rinee/Lightning/trial/src/index.mjs:1
(function (exports, require, module, __filename, __dirname) { import lng from "wpe-lightning-node"; ^^^
SyntaxError: Unexpected identifier
at new Script (vm.js:79:7)
at createScript (vm.js:251:10)
at Object.runInThisContext (vm.js:303:10)
at Module._compile (internal/modules/cjs/loader.js:656:28)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:699:10)
at Module.load (internal/modules/cjs/loader.js:598:32)
at tryModuleLoad (internal/modules/cjs/loader.js:537:12)
at Function.Module._load (internal/modules/cjs/loader.js:529:3)
at Function.Module.runMain (internal/modules/cjs/loader.js:741:12)
at startup (internal/bootstrap/node.js:285:19)

Kindly help on this.
I am using node version v10.13.0.

Hi,
On the docs, you state that:

In terms of performance, it runs awesome on WebOS and (modern) Tizen

What do you mean by modern Tizen?
I'm trying the demo on a Samsung Smart TV 2015 (Tizen 2.3) and I get only a black screen.
I get a warning on the console:

Can't use image worker because browser does not have createImageBitmap and Web Worker support

I tried to disable image worker and the warning stopped showing, but the result is the same.

Working fine on my computer browser.

What are the minimum requirements? Or is there some settings I could disable to support older browsers?

Ran across this comment inside of StateMachine.mjs:

static _getStateName(state) {
        const name = state.name;
        const index = name.indexOf('$');
        if (index > 0) {
            // Strip off rollup name suffix.
            return name.substr(0, index);
        }
        return name;
    }

Also does this prevent using minification tools that change method/class names? - if so can you provide documentation on some of these constraints around consuming library?

Text's gets rendered a thicker in transparent background, whereas renders slimmer while with a background. The slimmer font weight rendering is the correct one.

Hi all

I'm trying to create a horizontal menu of tabs which contain text fields with variable length text. I need to position each tab next to each other but to do that I need to know the width of the rendered text once set. Is there a way to retrieve that? I've tried using flex which I believe also requires specifying a width for each flex item.

Cheers
Michael

Hello, how can I get the width of the text element? I can get the correct value only after the text is rendered on the page.

class FlexExample extends lng.Application {
    static _template() {
        return {
            x: 10,
            w: 750,
            y: 10,
            Sample_Wrong:{
                w:(w=>w),
                h:200,
                text:{
                    text:"STRECHED"
                }
            },
            Sample_Expected:{
                y: 50,
                w:750,
                h:200,
                text:{
                    text:"EXPECTED"
                }
            }
        }
     }
}


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

@thiblahute @Ms2ger @basvanmeurs @clopez @kuscsik

@basvanmeurs @thiblahute @Ms2ger @clopez @kuscsik

CORS error while loading images from S3 bucket.

Access to XMLHttpRequest at 'https://s3-eu-west-1.amazonaws.com/xxxxxx.jpg' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

texture load error Image load error https://s3-eu-west-1.amazonaws.com/xxxxxx.jpg onError @ lightning-web.js:3077 (anonymous) @ lightning-web.js:2957 image.onError @ lightning-web.js:13425 error @ lightning-web.js:13153 error @ lightning-web.js:13104 _worker.onmessage @ lightning-web.js:13083

It seems like lightning is caching the resized image texture and not the original so if the same image is loaded again the resizeMode calculation is off. You can recreate the issue here:
https://webplatformforembedded.github.io/Lightning/docs/renderEngine/textures/clipping

class TextureDemo extends lng.Application {
    static _template() {
        return {
            MyTexture: {
                x: 200,
                y: 250,
                texture: {type: lng.textures.ImageTexture, src: '/Lightning/img/LngDocs_LilLightningIdle.png'},
                transitions: {
                    'texture.x': {duration: 4}
                }
            },
            Wrapper: {
                rect: true, w: 200, h: 200, color: 0xFFAAAAAA,
                Contain: {
                    x: w=>w/2, y: h=>h/2, mount: 0.5,
                    texture: {type: lng.textures.ImageTexture, src: '/Lightning/img/LngDocs_LilLightningIdle.png', resizeMode: {type: 'contain', w: 200, h: 200}}
                }
            },
            Cover: {
                x: 200, y: 0,
                texture: {type: lng.textures.ImageTexture, src: '/Lightning/img/LngDocs_LilLightningIdle.png', resizeMode: {type: 'cover', w: 200, h: 200, clipY: 0}}
            }
        }
    };
    
    _init() {
        const myTexture = this.tag("MyTexture");
        myTexture.transition('texture.x').on('finish', () => {
            const current = myTexture.getSmooth('texture.x');
            myTexture.setSmooth('texture.x', current ? 0 : 50);
        })
        myTexture.setSmooth('texture.x', 50); 
        
        // This keeps the image the same as the template
        this.patch({
            Cover: {
                x: 200, y: 0,
                texture: {type: lng.textures.ImageTexture, src: '/Lightning/img/LngDocs_LilLightningIdle.png', resizeMode: {type: 'cover', w: 200, h: 200, clipY: 0}}
            }    
        });        
        
        // This does not appear as the same even though the following patch shouldn't change the image's appearance 
        setTimeout(() => {
            this.patch({
                Cover: {
                    x: 200, y: 0,
                    texture: {type: lng.textures.ImageTexture, src: '/Lightning/img/LngDocs_LilLightningIdle.png', resizeMode: {type: 'cover', w: 200, h: 200, clipY: 0}}
                }    
            }); 
        }, 1000);
    }
}

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

Cool project!

Consider using https://github.com/facebook/yoga for layout. By taking measurements from node-canvas (Cairo), such as measureText , you can let Yoga figure out a flexbox layout using its fast C library.

As of today WPEUIFramework supports fontStyle but it does not have support for fontWeight. We can pass different font weight values for font styles and that works, but the problem arises when we need to use both font style and font weight. Can we add fontWeight support in the framework ?

For the text component,

we have the option of wrapping it by providing wordWrapWidth. But if a single long word is given then, it becomes empty

Eg:

Bigsampleword

Expected

Bigsam...

Actual

Empty

It would much help if we have an option to wrap with letters rather than omitting the complete word

I would like to extract state classes into their own file, but the examples all show the state class being declared on the fly and extending this. Is this a required pattern?

> [email protected] install /Users/cesalmon/workspace/wtv-lightning/node_modules/canvas
> node-pre-gyp install --fallback-to-build

node-pre-gyp WARN Using needle for node-pre-gyp https download 
node-pre-gyp WARN Tried to download(404): https://github.com/node-gfx/node-canvas-prebuilt/releases/download/v2.0.0-alpha.18/canvas-prebuilt-v2.0.0-alpha.18-node-v57-darwin-unknown-x64.tar.gz 
node-pre-gyp WARN Pre-built binaries not found for [email protected] and [email protected] (node-v57 ABI, unknown) (falling back to source compile with node-gyp) 
  SOLINK_MODULE(target) Release/canvas-postbuild.node
  CXX(target) Release/obj.target/canvas/src/backend/Backend.o
  CXX(target) Release/obj.target/canvas/src/backend/ImageBackend.o
  CXX(target) Release/obj.target/canvas/src/backend/PdfBackend.o
  CXX(target) Release/obj.target/canvas/src/backend/SvgBackend.o
  CXX(target) Release/obj.target/canvas/src/Backends.o
  CXX(target) Release/obj.target/canvas/src/Canvas.o
  CXX(target) Release/obj.target/canvas/src/CanvasGradient.o
  CXX(target) Release/obj.target/canvas/src/CanvasPattern.o
  CXX(target) Release/obj.target/canvas/src/CanvasRenderingContext2d.o
  CXX(target) Release/obj.target/canvas/src/closure.o
  CXX(target) Release/obj.target/canvas/src/color.o
  CXX(target) Release/obj.target/canvas/src/Image.o
../src/Image.cc:203:80: error: expected ';' at end of declaration
    unsigned int nBytes = cairo_image_surface_get_stride(surface) * img->height

BugFix

In node-canvas/src/image.cc line 203, add a ';' to the end of the line

I have the fix in hand but I can not create a pull request on node-canvas, dont understand why.

we are using flex layout in our project and the requirement is to focus each item if I click on down arrow.
To focus we are using setIndex()
For list we are using flex :{ direction: 'column }
Expected Behaviour: focus should move to the end of the list
Current Behaviour: list is moving to the focus
Due to this some space is creating at the end of the scroll

Please let me know if there is any solution to fix this issue.

Thanks in advance 👍

Hi Team,
Is there a support for mouse/magic remote available here? I did not find any reference in the documentation.

Hi Team,

How do we anchor for Component to the sibling component?

Eg:

        return {
            w: 1280,
            h: 720,
            Canvas_1: {
                text:{
                    text: "Sample 1"
                }
            },
            Canvas_2:{
                text:{
                    text: "Sample 2"
                }
            }
        };

How do anchor Canvas_2 to Canvas_1?

Is there any method to access sibling properties?

I found that when adding a child using the add() method with an object literal, the ref key seems to be ignored / not updated. When overwriting the childrens array directly, the ref is honoured.

Example to reproduce:

let view = {
   ref: 'Home',
   type: Home,
}
this.tag('Content').add(view)
console.log('get by ref', this.getByRef(view.ref)) // returns undefined
console.log('tag', this.tag(view.ref)) // returns StateMachineRouter

Expected behaviour: this.getByRef(view.ref) to return the StateMachineRouter as well

Hello Team!
Could you explain how can I use external libraries inside App (ex. import redux from 'redux' will give an error)?
And how can I minify and uglify code using 'npm run release-web'?
Because if I use webpack, it creates build, adding: lightning-web.js, and ux.js (like in init.js inside dist/web) and after that, this._setState doesn't work.
Please, share an example.
@thiblahute @Ms2ger @basvanmeurs @clopez @kuscsik

Hello
I have faced render issues when the long text should be displayed
Instead of showing actual text, the black screen is being rendered (wordWrapWidth was predifined).
Is there a way to fix it ?

Currently when I import Lightning as follow in my modules:

import lng from "wpe-lightning";

export default class MyComponent extends lng.Component {";
...

I end up having to include the entire Lightning library in my final bundle due to the way the index.js and src/lightning.mjs modules come together to export the library as a single object.

It would be helpful if I could specify the imports as follows

import Component from "wpe-lightning";

export default class MyComponent extends Component {";
...

which will allow build tools like rollup and WebPack to treeshake unused parts of the framework out of the final bundle.

Additionally the src/lightning.mjs has side effects occurring, exposing modules individually will allow me to bypass the creation of the global reference

if (Utils.isWeb) {
    window.lng = lightning;
}

Since change 701b5f8, the following example is broken with the following error:
return window.FontFace && (fontFace instanceof window.FontFace) && (!isLoaded || (fontFace.status === "loaded"));
^

ReferenceError: window is not defined
at Function._isFontFace (/Users/cesalmon/WebstormProjects/Lightning/dist/lightning-node.js:3678:9)
at TextTextureRenderer._load (/Users/cesalmon/WebstormProjects/Lightning/dist/lightning-node.js:3682:33)
at TextTextureRenderer.draw (/Users/cesalmon/WebstormProjects/Lightning/dist/lightning-node.js:3691:34)
at TextureSource.loader (/Users/cesalmon/WebstormProjects/Lightning/dist/lightning-node.js:4416:32)
at TextureSource.load (/Users/cesalmon/WebstormProjects/Lightning/dist/lightning-node.js:633:35)
at TextureSource.becomesUsed (/Users/cesalmon/WebstormProjects/Lightning/dist/lightning-node.js:587:14)
at TextureSource.incActiveTextureCount (/Users/cesalmon/WebstormProjects/Lightning/dist/lightning-node.js:535:18)
at TextTexture.becomesUsed (/Users/cesalmon/WebstormProjects/Lightning/dist/lightning-node.js:3268:25)
at TextTexture.incWithinBoundsCount (/Users/cesalmon/WebstormProjects/Lightning/dist/lightning-node.js:3254:18)
at View._enableWithinBoundsMargin (/Users/cesalmon/WebstormProjects/Lightning/dist/lightning-node.js:6496:32)

`const lng = require('../../../dist/lightning-node');

let titles = ["Batman", "Inception"];

class TextOpacity extends lng.Application {
static _template() {
return {
Title: {
text: {text: titles[0], fontSize: 100}
}
}
}
}

const options = {stage: {w: 900, h: 900, clearColor: 0xFF000000}};

options.stage.window = {title: "Text Opacity", fullscreen: false};

const app = new TextOpacity(options);`

Per documentation, .fireAncestors is a way to send a signal to a parent component.

However, if a method with the same name exists on the component that is emitting the fireAncestors, that one is called instead (and the method on the parent is not called).

Example to reproduce:

export default class Foo extends lng.Component {

    static _template() {
        return {
            w: 1920,
            h: 1080,
            rect: true,
        }
    }

    _init() {
        this.fireAncestors('$bar')
    }

    $bar() {
        console.log('I get called, but I would expect $bar on my (distant) **parent** component to be called')
    }

}

Hello team,
could you tell me, if there is any deep-link support (in "deep-link" I mean, open specific element inside the application :
1)Application is closed;
2)Open application via some "link" that contain Series/Show id;
3) Open specific element in application e.g :Films -> Show name -> Specific series)?

It means that you don't see the start screen and application open instantly from a specific element.
Or you have some ideas about how to do it with the Lightning framework?

The basic-usage does not work on node.js since commit 41a1c2e

$ node basic-usage.js
initializing GLEW
/Users/cesalmon/WebstormProjects/Lightning/dist/lightning-node.js:10045
throw new Error('Unknown pixelstorei: ' + pname);
^

Error: Unknown pixelstorei: 37445
at Function._getPixelStoreiIndex (/Users/cesalmon/WebstormProjects/Lightning/dist/lightning-node.js:10045:23)
at WebGLState.setPixelStorei (/Users/cesalmon/WebstormProjects/Lightning/dist/lightning-node.js:9756:30)
at WebGLRenderingContext.$pixelStorei [as pixelStorei] (/Users/cesalmon/WebstormProjects/Lightning/dist/lightning-node.js:10152:25)
at WebGLRenderer.uploadTextureSource (/Users/cesalmon/WebstormProjects/Lightning/dist/lightning-node.js:8928:16)
at TextureManager._nativeUploadTextureSource (/Users/cesalmon/WebstormProjects/Lightning/dist/lightning-node.js:10563:36)
at TextureManager.uploadTextureSource (/Users/cesalmon/WebstormProjects/Lightning/dist/lightning-node.js:10476:36)
at TextureSource.setSource (/Users/cesalmon/WebstormProjects/Lightning/dist/lightning-node.js:688:26)
at _cancelCb.loader (/Users/cesalmon/WebstormProjects/Lightning/dist/lightning-node.js:658:26)
at TextureSource.loader (/Users/cesalmon/WebstormProjects/Lightning/dist/lightning-node.js:11924:13)
at TextureSource.load (/Users/cesalmon/WebstormProjects/Lightning/dist/lightning-node.js:644:35)

Hello,

I would like to write tests that generate some components using lighting, and to compare the generated component with the expected one.

So I need the ability to take a screen shot of what is rendered, maybe by using glReadPixels ?

If you have any clues would be great !

Thanks

Hello,

The following code illustrates the problem, which looks like as a regression since lightning.

const lng = require('../../../dist/lightning-node');

let titles = ["Batman", "Inception"];

class TextOpacity extends lng.Application {
    static _template() {
        return {
            Title: {
                text: {text: titles[0], fontSize: 100}
            }
        }
    }
}

const options = {stage: {w: 900, h: 900, clearColor: 0xFF000000}};

options.stage.window = {title: "Text Opacity", fullscreen: false};

const app = new TextOpacity(options);

let i = 0;

setInterval(() => {
    let k = i++ % titles.length;
    let title = titles[k];

    let titleView = app.tag("Title");
    titleView.text = { text: title };
    
    titleView.alpha = k;  // when alpha is equal to 0, the text is not changed
    if (k > 0) {
        console.log(title);
    }
}, 250);

The displayed text should be "Batman" then "Inception", while it stays as "Batman".

Hello Team, could you tell me, does your internal Player component supports Secure Smooth/Dash Streaming using PlayReady/Widevine DRM?

@thiblahute @Ms2ger @basvanmeurs @clopez

thanks

Hello!
I found an issue, when you have a container with some text at layout with flexItem prop,
and container with that text changes state for the first time (page refreshed) and then you enter that state, text is not rendered at all. And it's reproduced 100% every time.

Also I can say that there is no such issue if you remove flexItem prop.

Hello!
To implement carousel i have used List Component.
And now I want to implement pagination on List Component.
For instance, when user is focused on last carousel item, next items should be loaded and added to List Component.

Is such functionality is present on List Component ?
If yes, could you provide an example ?

Hi Team,

I would like to know if z-axis property can be brought in to a lightning component, without using any external library such as three.js .

For the index.html file (is missing the dist directory):

NOTE:
If you don't have a web server installed you could run instant-server from the directory:

sudo npm install -g instant-server
instant -p 8081 ./

Did'n find anything about longpress native events in the docs. Maybe you can recommend some best practices?
Now I having issues, when doing my own event listeners, and I have multiple nested views with _handleEnter method, it worked not very well for now - both enter and long-enter work and I'm still looking for some better options.
Thanks! #

I'm getting the following error. I tried installing the missing packages and still same issue.

/Lightning$ npm i https://github.com/WebPlatformForEmbedded/Lightning-node.git --save

[email protected] install /repos/Lightning/node_modules/canvas
node-gyp rebuild

Package pixman-1 was not found in the pkg-config search path.
Perhaps you should add the directory containing pixman-1.pc' to the PKG_CONFIG_PATH environment variable No package 'pixman-1' found gyp: Call to 'pkg-config pixman-1 --libs' returned exit status 1 while in binding.gyp. while trying to load binding.gyp gyp ERR! configure error gyp ERR! stack Error: gyp` failed with exit code: 1
gyp ERR! stack at ChildProcess.onCpExit (/usr/lib/node_modules/npm/node_modules/node-gyp/lib/configure.js:345:16)
gyp ERR! stack at ChildProcess.emit (events.js:196:13)
gyp ERR! stack at Process.ChildProcess._handle.onexit (internal/child_process.js:256:12)
gyp ERR! System Linux 4.15.0-48-generic
gyp ERR! command "/usr/bin/node" "/usr/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "rebuild"
gyp ERR! cwd /repos/Lightning/node_modules/canvas
gyp ERR! node -v v12.1.0
gyp ERR! node-gyp -v v3.8.0
gyp ERR! not ok
npm WARN [email protected] license should be a valid SPDX license expression

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] install: node-gyp rebuild
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] install script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! /home/lab/.npm/_logs/2019-05-06T22_01_18_937Z-debug.log

I am rendering a list component that is image intensive - I noticed that the image textures do not force a download until the image is very close to on screen.

Example - if I have 21 image textures created in the list, with 7 on screen and the 11th item in the center of the list - leaving 14 offscreen. only 9 images will be retrieved.

This is ok for single item page, but multiple item pages causes lag in image download and render and overall poor ux. is it possible to force offscreen image texture to load to see if this ux can be improved?