Merge pull request #424 from rdkcentral/release-creation

Release of v2.8.0
rdkcentral · Oct 20, 2022 · 35dc085 · 35dc085
2 parents 7932ee6 + 2e09dd3
commit 35dc085
Show file tree

Hide file tree

Showing 18 changed files with 451 additions and 29 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,14 @@
 # Changelog
 
+## v2.8.0
+
+*20 oct 2022*
+
+- Updated patching.md file (#422)
+- Minor documentation updates (#405)
+- Added support to track vram usage (#395)
+- Added texture compression support (#391)
+
 ## v2.7.1
 
 *19 sep 2022*
@@ -333,3 +342,4 @@
 ### Fixes
 * Fixed text rendering artifacts sometimes appearing on RPI platform (#41)
 
+
diff --git a/docs/RenderEngine/Textures/Toolbox.md b/docs/RenderEngine/Textures/Toolbox.md
@@ -9,7 +9,7 @@ The `lng.Tools` Class contains useful functions for creating some commonly used
 |---|---|
 | Rounded rectangle | `lng.Tools.getRoundRect(w, h, radius, strokeWidth, strokeColor, fill, fillColor)` |
 | Drop-shadow rectangle | `lng.Tools.getShadowRect(w, h, radius = 0, blur = 5, margin = blur * 2)` |
-| SVG rendering | `lng.Tools.createSvg(cb, stage, url, w, h)` |
+| SVG rendering | `lng.Tools.getSvgTexture(url, w, h)` |
 
 
 ## Live Demo
@@ -31,6 +31,12 @@ class TextureDemo extends lng.Application {
                 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),
             }
         }
     }
@@ -39,4 +45,4 @@ class TextureDemo extends lng.Application {
 const options = {stage: {w: window.innerWidth, h: window.innerHeight, useImageWorker: false}};
 const App = new TextureDemo(options);
 document.body.appendChild(App.stage.getCanvas());
-```
+```
diff --git a/docs/Transitions/Methods.md b/docs/Transitions/Methods.md
@@ -26,20 +26,19 @@ To call a transition method, you have to get the correct transition `property` f
 
 ```
 _init(){
-   this.tag('MyObject').transition('x').start();
+   this.tag('MyObject').transition('x').start(100);
 }
 ```
 
 ## Overview
 
 | Name | Description |
 |---|---|
-| `start()` | Start (or restart if already running) the transition |
+| `start(targetValue : number)` | Start a new transition (similar to calling `setSmooth()`) |
 | `stop()` | Stop the transition (at the current value) |
 | `pause()` | Alias for `stop()` |
 | `play()` | Resume the paused transition |
 | `finish()` | Fast-forward the transition (to the target value) |
-| `start(targetValue : number)` | Start a new transition (similar to calling `setSmooth()`) |
 | `reset(targetValue : number, p : number)` | Set the transition at a specific point in time (where p is a value between 0 and 1) |
 | `updateTargetValue(targetValue : number)` | Update the target value while keeping the current progress and value |
 
@@ -124,4 +123,4 @@ class BasicUsageExample extends lng.Application {
 const options = {stage: {w: window.innerWidth, h: window.innerHeight, useImageWorker: false}};
 const App = new BasicUsageExample(options);
 document.body.appendChild(App.stage.getCanvas());
-```
+```
diff --git a/examples/texture-compression/lightning-etc1.pvr b/examples/texture-compression/lightning-etc1.pvr
diff --git a/examples/texture-compression/sampleImage-astc_4x4.ktx b/examples/texture-compression/sampleImage-astc_4x4.ktx
diff --git a/examples/texture-compression/sampleImage-etc1.ktx b/examples/texture-compression/sampleImage-etc1.ktx
diff --git a/examples/texture-compression/sampleImage-pvrtc.ktx b/examples/texture-compression/sampleImage-pvrtc.ktx
diff --git a/examples/texture-compression/sampleImage-s3tc.ktx b/examples/texture-compression/sampleImage-s3tc.ktx
diff --git a/examples/texture-compression/texture-compression.html b/examples/texture-compression/texture-compression.html
@@ -0,0 +1,121 @@
+<!--
+ If not stated otherwise in this file or this component's LICENSE file the
+ following copyright and licenses apply:
+
+ Copyright 2020 Metrological
+
+ Licensed under the Apache License, Version 2.0 (the License);
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+-->
+
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8" />
+    <script src="../../../devtools/lightning-inspect.js"></script>
+</head>
+
+<body style="margin: 0; padding: 0">
+    <script type="module">
+        import lng from '../../../src/lightning.mjs';
+        attachInspector(lng)
+
+        window.onload = function () {
+            const images = [
+                { compression: 'etc1', container: 'pvr', src: 'lightning-etc1.pvr' },
+                { compression: 's3tc', container: 'ktx', src: 'sampleImage-s3tc.ktx' },
+                { compression: 'pvrtc', container: 'ktx', src: 'sampleImage-pvrtc.ktx' },
+                { compression: 'etc1', container: 'ktx', src: 'sampleImage-etc1.ktx' },
+                { compression: 'astc_4x4', container: 'ktx', src: 'sampleImage-astc_4x4.ktx' },
+            ];
+            class BasicUsageExample extends lng.Application {
+                static _template() {
+                    return {
+                        Header: {
+                            rect: true, w: 1920, h: 150, color: 0xff7f8088,
+                            Tx: {
+                                x: 100, y: 50,
+                                text: {
+                                    text: ''
+                                }
+                            }
+                        },
+                        Images: {
+                            x: 50, y: 200, children: []
+                        }
+                    }
+                }
+
+                _init() {
+                    const ext = this.stage.renderer.getCompressedTextureExtensions();
+                    const support = Object.keys(ext).reduce((arr, type) => {
+                        if (!!ext[type]) {
+                            arr.push(type);
+                        }
+                        return arr;
+                    }, [])
+                    this.tag("Tx").text = `supported compression: ${support.join(' | ')}`;
+
+                    this.tag("Images").children = images.map((image, index) => {
+                        return {
+                            type: CompressedImage,
+                            imageSource: image.src,
+                            metadata: image,
+                            x: index % 4 * 370,
+                            y: Math.floor(index / 4) * 370
+                        }
+                    })
+
+                }
+            }
+
+            class CompressedImage extends lng.Component {
+                static _template() {
+                    return {
+                        scale: 0.6,
+                        Holder: {
+                            rect: true, color: 0xff9496a1,
+                            w: 526, h: 580,
+                            Image: {
+                                w: 512, h: 512,
+                                x: 6, y: 56,
+                            },
+                            Metadata: {
+                                x: 10, y: 3, color: 0xff000000,
+                                text: {
+                                    text: ''
+                                }
+                            }
+                        }
+                    }
+                }
+
+                set imageSource(v) {
+                    this.tag('Image').src = v;
+                }
+
+                set metadata(v) {
+                    this.tag('Metadata').text = `${v.compression} | ${v.container}`;
+                }
+            }
+
+            const options = { stage: { w: 1920, h: 1080, precision: 2 / 3, clearColor: 0xFF000000, canvas2d: false, useImageWorker: false }, debug: true }
+
+            const app = new BasicUsageExample(options);
+
+            document.body.appendChild(app.stage.getCanvas());
+        }
+    </script>
+</body>
+
+</html>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "author": "Metrological, Bas van Meurs <[email protected]>",
   "name": "@lightningjs/core",
-  "version": "2.7.1",
+  "version": "2.8.0",
   "license": "Apache-2.0",
   "main": "dist/lightning.js",
   "module": "index.js",