Merge pull request #7 from jspanchu/image-display-lossless

feat(RawImageDisplayArea): support rgb24 and rgba32 images

Author: jourdain

trame_rca/widgets/rca.py

@@ -84,3 +84,15 @@ def __init__(self, **kwargs):
             "name",
             "origin",
         ]
+
+
+class RawImageDisplayArea(HtmlElement):
+    def __init__(self, **kwargs):
+        super().__init__(
+            "raw-image-display-area",
+            **kwargs,
+        )
+        self._attr_names += [
+            "name",
+            "origin",
+        ]

vue-components/src/components/DisplayArea/script.js

@@ -1,13 +1,15 @@
 import ImageDisplayArea from '../ImageDisplayArea';
 import MediaSourceDisplayArea from '../MediaSourceDisplayArea';
 import VideoDecoderDisplayArea from '../VideoDecoderDisplayArea';
+import RawImageDisplayArea from '../RawImageDisplayArea';
 
 export default {
   name: 'DisplayArea',
   components: {
     ImageDisplayArea,
     MediaSourceDisplayArea,
     VideoDecoderDisplayArea,
+    RawImageDisplayArea,
   },
   props: {
     name: {

vue-components/src/components/DisplayArea/template.html

@@ -2,5 +2,5 @@
   <image-display-area v-if="display === 'image'" :name="name" :origin="origin" :poolSize="4" />
   <media-source-display-area v-if="display === 'media-source'" :name="name" :origin="origin" />
   <video-decoder-display-area v-if="display === 'video-decoder'" :name="name" :origin="origin" />
+  <raw-image-display-area v-if="display === 'raw-image'" :name="name" :origin="origin" />
 </div>
-`

vue-components/src/components/RawImageDisplayArea/index.vue

@@ -0,0 +1,2 @@
+<template src="./template.html" />
+<script src="./script.js" />

vue-components/src/components/RawImageDisplayArea/script.js

@@ -0,0 +1,76 @@
+export default {
+  name: 'RawImageDisplayArea',
+  props: {
+    name: {
+      type: String,
+      default: 'default',
+    },
+    origin: {
+      type: String,
+      default: 'anonymous',
+    },
+  },
+  data() {
+    return {
+      hasContent: false,
+    };
+  },
+  mounted() {
+    this.wslinkSubscription = null;
+    const canvas = this.$el;
+    const ctx = canvas.getContext('2d');
+    this.onImage = ([{ name, meta, content }]) => {
+      if (this.name === name) {
+        if (meta.type.includes('image/rgb24')) {
+          content.arrayBuffer().then((buffer) => {
+            const data = new Uint8Array(buffer);
+            canvas.width = meta.w;
+            canvas.height = meta.h;
+            const imageData = ctx.createImageData(meta.w, meta.h);
+            const pixels = imageData.data;
+            let iRGB = 0;
+            let iRGBA = 0;
+            while (iRGBA < pixels.length) {
+              pixels[iRGBA++] = data[iRGB++];
+              pixels[iRGBA++] = data[iRGB++];
+              pixels[iRGBA++] = data[iRGB++];
+              pixels[iRGBA++] = 255;
+            }
+            ctx.putImageData(imageData, 0, 0);
+            this.hasContent = true;
+          });
+        } else if (meta.type.includes('image/rgba32')) {
+          content.arrayBuffer().then((buffer) => {
+            const data = new Uint8ClampedArray(buffer);
+            canvas.width = meta.w;
+            canvas.height = meta.h;
+            const imageData = new ImageData(data, meta.w, meta.h);
+            ctx.putImageData(imageData, 0, 0);
+            this.hasContent = true;
+          });
+        } else {
+          this.hasContent = false;
+        }
+      }
+    };
+    if (this.trame) {
+      this.wslinkSubscription = this.trame.client
+        .getConnection()
+        .getSession()
+        .subscribe('trame.rca.topic.stream', this.onImage);
+    }
+  },
+  beforeUnmount() {
+    // unsub trame.rca.topic.stream
+    if (this.wslinkSubscription) {
+      if (this.trame) {
+        this.trame.client
+          .getConnection()
+          .getSession()
+          .unsubscribe(this.wslinkSubscription);
+        this.wslinkSubscription = null;
+      }
+    }
+  },
+  inject: ['trame'],
+};

vue-components/src/components/RawImageDisplayArea/template.html

@@ -0,0 +1,2 @@
+<canvas class="js-canvas" v-show="hasContent">
+</canvas>

vue-components/src/components/index.js

@@ -4,6 +4,7 @@ import ImageDisplayArea from './ImageDisplayArea';
 import RemoteControlledArea from './RemoteControlledArea';
 import MediaSourceDisplayArea from './MediaSourceDisplayArea';
 import VideoDecoderDisplayArea from './VideoDecoderDisplayArea';
+import RawImageDisplayArea from './RawImageDisplayArea';
 
 export default {
   DisplayArea,
@@ -12,4 +13,5 @@ export default {
   RemoteControlledArea,
   MediaSourceDisplayArea,
   VideoDecoderDisplayArea,
+  RawImageDisplayArea,
 };