Merge pull request #36 from martinRenou/underwater_effect_texturing

UnderWater effect: Add ability to change default color/texture

ipygany/ipygany.py

@@ -11,7 +11,7 @@
 from ipywidgets import (
     widget_serialization,
     DOMWidget, Widget,
-    Color
+    Color, Image
 )
 
 from .serialization import array_serialization, component_array_serialization
@@ -459,6 +459,9 @@ class UnderWater(Effect):
 
     input = Union((Tuple(trait=Unicode, minlen=2, maxlen=2), Unicode())).tag(sync=True)
 
+    default_color = Color('#F2FFD2').tag(sync=True)
+    texture = Instance(Image, allow_none=True, default_value=None).tag(sync=True, **widget_serialization)
+
     @default('input')
     def _default_input(self):
         return self.parent.data[0].name

package.json

@@ -50,9 +50,10 @@
   },
   "dependencies": {
     "@jupyter-widgets/base": "^1.1.10 || ^2 || ^3",
+    "@jupyter-widgets/controls": "^2.0.0",
     "backbone": "^1.4.0",
     "binary-search-tree": "^0.2.6",
-    "ganyjs": "^0.4.0",
+    "ganyjs": "^0.5.0",
     "three": "^0.118.0",
     "uuid": "^3.3.3"
   },

src/widget.ts

@@ -7,6 +7,10 @@ import {
   WidgetModel, DOMWidgetModel, DOMWidgetView, ISerializers, unpack_models
 } from '@jupyter-widgets/base';
 
+import {
+  ImageView
+} from '@jupyter-widgets/controls';
+
 import {
   Message
 } from '@phosphor/messaging';
@@ -186,8 +190,8 @@ abstract class BlockModel extends _GanyWidgetModel {
     return this.get('environment_meshes').map((model: any) => model.obj);
   }
 
-  get defaultColor () : string {
-    return this.get('default_color');
+  get defaultColor () : THREE.Color {
+    return new THREE.Color(this.get('default_color'));
   }
 
   initEventListeners() : void {
@@ -588,23 +592,66 @@ class UnderWaterModel extends EffectModel {
   defaults() {
     return {...super.defaults(),
       _model_name: UnderWaterModel.model_name,
+      default_color: '#F2FFD2',
+      texture: null,
     };
   }
 
+  initialize (attributes: any, options: any) {
+    super.initialize(attributes, options);
+
+    this.setTexture();
+  }
+
   get input () {
     const input = this.get('input');
 
     return typeof input == 'string' ? input : [input];
   }
 
+  get defaultcolor () {
+    return new THREE.Color(this.get('default_color'));
+  }
+
+  setTexture () {
+    const image = this.get('texture');
+
+    if (image === null) {
+      this.block.texture = null;
+
+      return;
+    }
+
+    this.widget_manager.create_view(image, {}).then((imageView: ImageView) => {
+      const textureLoader = new THREE.TextureLoader();
+
+      textureLoader.load(imageView.el.src, (texture: THREE.Texture) => {
+        this.block.texture = texture;
+      });
+    });
+  }
+
   createBlock () {
-    return new UnderWater(this.parent.block, this.input);
+    return new UnderWater(this.parent.block, this.input, { defaultColor: this.defaultColor });
+  }
+
+  initEventListeners() : void {
+    super.initEventListeners();
+
+    this.on('change:texture', () => {
+      this.setTexture();
+    });
   }
 
   block: UnderWater;
 
   static model_name = 'UnderWaterModel';
 
+  static serializers: ISerializers = {
+    ...EffectModel.serializers,
+    texture: { deserialize: (unpack_models as any) },
+  }
+
 }