implement webui live video (#340)

* implement webui live video

* add missing german translation

assets/webconfig/content/leds.html

@@ -83,11 +83,12 @@
 		<div id="menu_display" class="tab-pane fade" style="padding-top:10px">
 			<div  class="container-fluid">
 				<div id="leds_canvas"/>
-
+				
 				<div id="leds_controls">
 					<button  type="button" class="btn btn-success" id="leds_toggle"  data-i18n="conf_leds_test_button_toggleleds">toggle leds</button>
 					<button  type="button" class="btn btn-danger" id="leds_toggle_num"  data-i18n="conf_leds_test_button_togglelednumber">toggle led numbers</button>
 					<button  type="button" class="btn btn-danger" id="leds_toggle_live"  data-i18n="conf_leds_test_button_toggleliveleds">toggle live leds</button>
+					<button  type="button" class="btn btn-danger" id="leds_toggle_live_video"  data-i18n="conf_leds_test_button_togglelivevideo">toggle live video</button>
 				</div>
 			</div>
 		</div>
@@ -296,6 +297,7 @@
 					<div id="previewledcount"></div>
 					<div class="col-lg-12 st_helper" style="padding-left:0px; padding-right:0px">
 						<div id="leds_preview"></div>
+						<div>
 					</div>
 				</div>
 				<div class="panel-footer">

assets/webconfig/i18n/de.json

@@ -115,6 +115,7 @@
 		"conf_leds_test_button_toggleleds" : "LEDs",
 		"conf_leds_test_button_togglelednumber" : "LED Nummerierung",
 		"conf_leds_test_button_toggleliveleds" : "LED Echtzeitansicht",
+		"conf_leds_test_button_togglelivevideo" : "Grabber Echtzeitansicht",
 		"conf_grabber_label_intro" : "Hyperion unterstützt 2 Hauptarten wie Bilder aufgenommen werden können. Zum Einen die Plattform Aufnahme, die sich direkt am System bedient auf dem Hyperion läuft (beste Qualität). Zum Anderen die USB Aufnahme, die sich an einem angeschlossenen Gerät bedient die benötigten Informationen für die Verarbeitung und Ausgabe zu erhalten (Mehr Konfigurationsaufwand und Kalibrierung)",
 		"conf_colors_label_intro" : "Neben der Farbkalibrierung, gehört auch die Glättung (sanfte Farbübergänge) und die Erkennung von störenden (schwarzen) Balken zur Bildverarbeitung.",
 		"conf_network_label_intro" : "Alle Einstellungen zu Ports, der Weiterleitung von JSON/PROTO und Boblight sowie UDP Listener.",

assets/webconfig/i18n/en.json

@@ -115,6 +115,7 @@
 		"conf_leds_test_button_toggleleds" : "toggle leds",
 		"conf_leds_test_button_togglelednumber" : "toggle led numbers",
 		"conf_leds_test_button_toggleliveleds" : "toggle live leds",
+		"conf_leds_test_button_togglelivevideo" : "toggle live video",
 		"conf_grabber_label_intro" : "Hyperion supports two ways on how to get captured pictures for processing and output. The platform capture: internal at the device you are running Hyperion on (best qualitiy) and the USB Capture which gathers from a connected device the necessary pictures (more calibration work and configuration).",
 		"conf_colors_label_intro" : "Color calibration, smoothing (color transistions) and detection of blackbars.",
 		"conf_network_label_intro" : "All network based settings are listed here.",

assets/webconfig/js/content_leds.js

@@ -322,10 +322,12 @@ $(document).ready(function() {
 		createClassicLeds();
 	});
 	
+	// ------------------------------------------------------------------
 	$('.ledMAconstr').bind("change", function() {
 		createMatrixLeds();
 	});
 	
+	// ------------------------------------------------------------------
 	$('#btn_cl_generate').off().on("click", function() {
 		if (finalLedArray != ""){
 			$("#ledconfig").text(JSON.stringify(finalLedArray, null, "\t"));
@@ -334,6 +336,7 @@ $(document).ready(function() {
 		}
 	});
 	
+	// ------------------------------------------------------------------
 	$('#btn_ma_generate').off().on("click", function() {
 		if (finalLedArray != ""){
 			$("#ledconfig").text(JSON.stringify(finalLedArray, null, "\t"));
@@ -342,6 +345,19 @@ $(document).ready(function() {
 		}
 	});
 
+	// ------------------------------------------------------------------
+	$(hyperion).on("cmd-ledcolors-imagestream-update",function(event){
+		if ($("#leddevices").length == 0)
+		{
+			requestLedImageStop();
+		}
+		else
+		{
+			imageData = (event.response.result.image);
+			$("#image_preview").attr("src", imageData);
+		}
+	});
+
 	// ------------------------------------------------------------------
 	$(hyperion).on("cmd-ledcolors-ledstream-update",function(event){
 		if ($("#leddevices").length == 0)
@@ -420,7 +436,7 @@ $(document).ready(function() {
 		canvas_height = $('#leds_canvas').innerHeight();
 		canvas_width = $('#leds_canvas').innerWidth();
 
-		leds_html = "";
+		leds_html = '<img src="" id="image_preview" style="position:relative" />"';
 		for(var idx=0; idx<leds.length; idx++)
 		{
 			led = leds[idx];
@@ -436,6 +452,9 @@ $(document).ready(function() {
 		$('#led_0').css({"z-index":"10"});
 
 		$('#leds_custom_updsim').trigger('click');
+		$('#image_preview').hide();
+		$('#image_preview').attr("width" , $('#leds_canvas').innerWidth()-2);
+		$('#image_preview').attr("height", $('#leds_canvas').innerHeight()-2);
 	});
 
 	// ------------------------------------------------------------------
@@ -463,6 +482,21 @@ $(document).ready(function() {
 		}
 	});
 
+	// ------------------------------------------------------------------
+	$('#leds_toggle_live_video').off().on("click", function() {
+		setClassByBool('#leds_toggle_live_video',imageStreamActive,"btn-success","btn-danger");
+		if ( imageStreamActive )
+		{
+			requestLedImageStop();
+			$('#image_preview').hide();
+		}
+		else
+		{
+			$('#image_preview').show();
+			requestLedImageStart();
+		}
+	});
+
 	// ------------------------------------------------------------------
 	$("#leds_custom_updsim").off().on("click", function() {
 		if (validateText()){

assets/webconfig/js/hyperion.js

@@ -13,11 +13,12 @@ var websocket = null;
 var hyperion = {};
 var wsTan = 1;
 var cronId = 0;
-var ledStreamActive=false;
-var loggingStreamActive=false;
+var ledStreamActive  = false;
+var imageStreamActive = false;
+var loggingStreamActive = false;
 var loggingHandlerInstalled = false;
 var watchdog = 0;
-
+var debugMessagesActive = true;
 //
 function cron()
 {
@@ -168,6 +169,18 @@ function requestLedColorsStop()
 	sendToHyperion("ledcolors", "ledstream-stop");
 }
 
+function requestLedImageStart()
+{
+	imageStreamActive=true;
+	sendToHyperion("ledcolors", "imagestream-start");
+}
+
+function requestLedImageStop()
+{
+	imageStreamActive=false;
+	sendToHyperion("ledcolors", "imagestream-stop");
+}
+
 function requestPriorityClear()
 {
 	sendToHyperion("clear", "", '"priority":1');
@@ -205,6 +218,8 @@ function requestWriteConfig(config)
 	});
 
 	var config_str = JSON.stringify(complete_config);
+	console.log("save");
+	console.log(config_str);
 	sendToHyperion("config","setconfig", '"config":'+config_str);
 }
 

assets/webconfig/js/ui_utils.js

@@ -1,4 +1,12 @@
 
+function debugMessage(msg)
+{
+	if (debugMessagesActive)
+	{
+		console.log(msg);
+	}
+}
+
 function bindNavToContent(containerId, fileName, loadNow)
 {
 	$("#page-content").off();