add justification options for show text effect

crowbartools · Jul 1, 2018 · 6c5f898 · 6c5f898
1 parent 91e2032
commit 6c5f898
Show file tree

Hide file tree

Showing 5 changed files with 55 additions and 4 deletions.
diff --git a/gui/app/services/effectHelperService.js b/gui/app/services/effectHelperService.js
@@ -651,6 +651,14 @@
                             $scope.effect.width = 400;
                         }
 
+                        if ($scope.effect.justify == null) {
+                            $scope.effect.justify = "center";
+                        }
+
+                        if ($scope.effect.dontWrap == null) {
+                            $scope.effect.dontWrap = false;
+                        }
+
                         $scope.editorOptions = {
                             height: 300,
                             disableDragAndDrop: true,

diff --git a/gui/app/templates/interactive/effect-options/show-text.html b/gui/app/templates/interactive/effect-options/show-text.html
@@ -4,9 +4,9 @@
     <eos-replace-variables></eos-replace-variables>
 </eos-container>
 
-<eos-container header="Dimensions" class="setting-padtop">
+<eos-container header="Container Settings" class="setting-padtop">
     <p>This defines the size of the (invisible) box that the above text will be placed in.</p>
-    <div class="input-group">
+    <div class="input-group" style="padding-bottom: 15px;">
         <span class="input-group-addon">Width (in pixels)</span>
         <input 
           class="form-control" 
@@ -20,6 +20,24 @@
           min="1" max="10000"
           ng-model="effect.height">
     </div>
+
+    <label class="control-fb control--checkbox"> Dont Wrap Text</tooltip>
+        <input type="checkbox" ng-model="effect.dontWrap">
+        <div class="control__indicator"></div>
+    </label>
+    <p>Justification</p>
+    <label class="control-fb control--radio">Left
+    <input type="radio" ng-model="effect.justify" value="flex-start"/> 
+        <div class="control__indicator"></div>
+    </label>
+    <label class="control-fb control--radio" >Center
+        <input type="radio" ng-model="effect.justify" value="center"/>
+        <div class="control__indicator"></div>
+    </label>
+    <label class="control-fb control--radio" >Right
+        <input type="radio" ng-model="effect.justify" value="flex-end"/>
+        <div class="control__indicator"></div>
+    </label>
 </eos-container>
 
 <eos-overlay-position effect="effect" class="setting-padtop"></eos-overlay-position>

diff --git a/lib/common/handlers/mediaProcessor.js b/lib/common/handlers/mediaProcessor.js
@@ -208,6 +208,8 @@ async function showText(effect, trigger) {
         duration: effect.duration,
         height: effect.height,
         width: effect.width,
+        justify: effect.justify,
+        dontWrap: effect.dontWrap,
         overlayInstance: effect.overlayInstance
     };
 
@@ -250,6 +252,14 @@ async function showText(effect, trigger) {
         dto.position = "Middle";
     }
 
+    if (dto.justify == null) {
+        dto.justify = "center";
+    }
+
+    if (dto.dontWrap == null) {
+        dto.dontWrap = false;
+    }
+
     renderWindow.webContents.send('showtext', dto);
 }
 

diff --git a/resources/overlay/js/handlers/textHandler.js b/resources/overlay/js/handlers/textHandler.js
@@ -12,15 +12,27 @@ function showText(data){
 	var d = new Date();
 	var divClass = d.getTime() + "-text";
 
+	//border: 2px solid green;
+	let styles = `height:${data.height}px;width:${data.width}px;${customPosStyles}`;
+
+	styles += `justify-content:${data.justify};`
+
+	if(data.dontWrap) {
+		styles += "overflow: hidden; white-space: nowrap;"
+	}
+
+	if(borderColor) {
+		styles += `border: 2px solid ${borderColor};`
+	}
+
 	let container = `
 		<div class="${divClass} text-container"
 			position="${data.position}"
-			style="height:${data.height}px;width:${data.width}px;${customPosStyles}">
+			style="${styles}">
 				${data.text}
 		</div>
 	`;
 
-	console.log("adding text to page");
 	// Throw text on page.
 	$('#wrapper').append(container);
 

diff --git a/resources/overlay/js/main.js b/resources/overlay/js/main.js
@@ -32,6 +32,9 @@ function mixerSocketConnect(){
 
 			var olInstance = params.get("instance");
 
+			borderColor = params.get("borderColor");
+
+
 			console.log(`Recieved Event: ${event}`);
 			console.log(`Overlay Instance: ${olInstance}, Event Instance: ${data.overlayInstance}`)
 			console.log(data);