Add interaction for overlays

varunkumar · Sep 21, 2019 · ef6ff49 · ef6ff49
1 parent 3ab0a8a
commit ef6ff49
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 3 deletions.
diff --git a/core/transformers/image_overlay_transformer.py b/core/transformers/image_overlay_transformer.py
@@ -94,7 +94,7 @@ def transform(self, frame, config):
                     self.__draw_label(
                         frame, item["text"], (item["position"]["left"], item["position"]["top"]), bg_color, fg_color)
                 elif ("image" in item.keys()):
-                    img = cv2.imread(item["image"])
+                    img = cv2.imread("overlay/" + item["image"])
                     # self.__overlay_transparent(
                     #    frame, img, item["position"]["left"], item["position"]["top"])
                     self.__overlay_transparent1(

diff --git a/web-client/camlio.js b/web-client/camlio.js
@@ -161,8 +161,18 @@ const toggleOverlay = () => {
         .map(overlay => {
           return `<img class="overlay" src="./media/overlay/${overlay}" data-src="${overlay}"></img>`;
         })
-        .join('') + '<a href="#" style="display: inline">Browse</a>'
+        .join('') +
+        '<input type="text" class="overlay-text" placeholder="Text overlay"></input>'
     );
+    $('.overlay-text').keypress(function(event) {
+      var keycode = event.keyCode ? event.keyCode : event.which;
+      if (keycode == '13') {
+        configuration.overlay = [
+          { position: { top: 700, left: 850 }, text: $('.overlay-text').val() }
+        ];
+        sendConfiguration(configuration);
+      }
+    });
     img.parentElement.classList.add('active');
     configuration.overlay = [];
   }
@@ -223,6 +233,16 @@ const initializeEventListeners = () => {
     configuration.presentation = $(e.target).data('src');
     sendConfiguration(configuration);
   });
+
+  $('#camliaControls').on('click', '.overlay', e => {
+    $('.overlay').removeClass('active');
+    $(e.target).addClass('active');
+    configuration.overlay = [
+      { position: { left: 20, top: 20 }, image: $(e.target).data('src') }
+    ];
+    sendConfiguration(configuration);
+  });
+
   document.querySelector('#ctrlBlur').addEventListener('click', toggleBlur);
   document
     .querySelector('#ctrlOverlay')

diff --git a/web-client/index.html b/web-client/index.html
@@ -13,7 +13,7 @@
     <div class="header-bar">
         <a href="index.html"><img class="logo" src="camlio.jpeg" alt="Camlio"></a>
         <p>Change your lens, change your story.</p>
-        <div><a href="https://twitter.com/sreekanthnaga">@sreekanthnaga</a><p style="float: left"> | </p><a href="https://twitter.com/varunkumar">@varunkumar</a></div>
+        <div><a href="https://twitter.com/sreekanthnaga">@sreekanthnaga</a><a href="https://twitter.com/varunkumar">@varunkumar</a></div>
     </div>
 
   </header>