Add UI for automatic tone mapping settings

Author: awawa-dev

sources/base/schema/schema-automaticToneMapping.json

@@ -7,7 +7,7 @@
 		{
 			"type" : "boolean",
 			"format": "checkbox",
-			"title" : "edt_automatic_tone_mapping_enable_title",
+			"title" : "edt_conf_general_enable_title",
 			"default" : false,
 			"required" : true,
 			"propertyOrder" : 1
@@ -22,6 +22,11 @@
 			"maximum" : 255,
 			"default" : 155,
 			"required" : true,
+			"options": {
+				"dependencies": {
+					"enable": true
+				}
+			},
 			"propertyOrder" : 2
 		},
 		"tone_mapping_u_threshold" :
@@ -34,6 +39,11 @@
 			"maximum" : 255,
 			"default" : 175,
 			"required" : true,
+			"options": {
+				"dependencies": {
+					"enable": true
+				}
+			},
 			"propertyOrder" : 3
 		},
 		"tone_mapping_v_threshold" :
@@ -46,6 +56,11 @@
 			"maximum" : 255,
 			"default" : 160,
 			"required" : true,
+			"options": {
+				"dependencies": {
+					"enable": true
+				}
+			},
 			"propertyOrder" : 4
 		},
 		"time_to_tone_mapping" :
@@ -59,6 +74,11 @@
 			"default" : 30,
 			"append" : "edt_append_s",
 			"required" : true,
+			"options": {
+				"dependencies": {
+					"enable": true
+				}
+			},
 			"propertyOrder" : 5
 		}		
 	},

www/i18n/en.json

@@ -1253,14 +1253,13 @@
   "chk_lchCorrection": "LCH color correction",
   "grabber_calibration_expl": "This tool allows you to create a new calibrated HDR LUT for your grabber (or external flatbuffers source) as close to the actual input colors as possible.<br/>You need an HDR10 video source that can display this web page, for example: Windows 10 with HDR enabled in the properties of the graphics driver.<br/>The screen may flicker during calibration. The process typically takes about few minutes on a Intel 7 Windows PC (depending on the host CPU resources and the video capturing framerate).<br/><b>The calculations are very intensive and put a strain on your equipment <svg data-src='svg/performance_undervoltage.svg' class='svg4hyperhdr ms-1'></svg></b>You can disable LCH color correction to reduce the load a bit<br/>You can monitor the progress in HyperHDR logs using the browser from other device.<br/><br/><br/><b>1</b> If everything is properly connected, this page should be displayed on the TV screen (as HDR content) and live preview in HyperHDR (captured by the grabber).</br><b>2</b> Absolute minimum capturing resolution is 1280x720 (we will verify this). Recommended is 1920x1080 YUV/NV12. Aspect 1920/1080 must be preserved.<br/><b>3</b> You must disable 'Quarter of frame mode' in your grabber properties if it's enabled.<br/><b>4</b> You must set the grabber's video format to MJPEG/YUV/NV12/P010.<br/><b>5</b> Before you run the process please put your WWW browser in the full-screen mode (F11 key, we will verify this).</br><b>6</b> <b>If you are calibrating using Windows 11, turn off features such as 'Night light', 'Automatic manage color for apps' and 'Auto-HDR'. Do not change the color balance in the graphics driver. The GFX output should support e.g. 10 or 12 bit RGB in full PC range.</b><br/><br/>After completing the calibration, your new LUT table file (lut_lin_tables.3d) will be created in the user's HyperHDR home directory and is immediately ready to use when you just enable HDR tone mapping. Please verify HyperHDR logs for details.",
   "edt_automatic_tone_mapping_title" : "Automatic tone mapping",
-  "edt_automatic_tone_mapping_enable_title" : "Enable automatic tone mapping",
-  "edt_automatic_tone_mapping_enable_expl" : "Automatic tone mapping is only available for YUV/NV12/P010 formats with 'Quarter of frame' mode enabled",
+  "edt_automatic_tone_mapping_enable_explain" : "Automatic tone mapping control is only available for <span style='color:red;'>'YUV/NV12/P010'</span> video formats with <span style='color:red;'>'Quarter of frame'</span> mode enabled. Please configure them in the USB grabber settings.",
   "edt_automatic_tone_mapping_y_threshold_title" : "Brightness threshold (Y)",
   "edt_automatic_tone_mapping_y_threshold_expl" : "The brightness level that separates raw dark HDR material from the SDR signal",
   "edt_automatic_tone_mapping_u_threshold_title" : "Blue chroma threshold (U)",
   "edt_automatic_tone_mapping_u_threshold_expl" : "Blue chroma level that separates raw pale HDR material from the SDR signal",
   "edt_automatic_tone_mapping_v_threshold_title" : "Red chroma threshold (V)",
   "edt_automatic_tone_mapping_v_threshold_expl" : "Red chroma level that separates raw pale HDR material from the SDR signal",
   "edt_automatic_tone_mapping_time_title" : "Time to turn on tone mapping",
-  "edt_automatic_tone_mapping_time_title_expl" : "Time to turn on tone mapping if the signal does not exceed the configured threshold levels"
+  "edt_automatic_tone_mapping_time_expl" : "Time to turn on tone mapping if the signal does not exceed the configured threshold levels"
 }

www/js/processing.js

@@ -49,6 +49,10 @@ $(document).ready( function() {
 		//blackborder
 		$('#conf_cont').append(createOptPanel('<svg data-src="svg/image_processing_blackborder.svg" fill="currentColor" class="svg4hyperhdr"></svg>', $.i18n("edt_conf_bb_heading_title"), 'editor_container_blackborder', 'btn_submit_blackborder'));
 		$('#conf_cont').append(createHelpTable(window.schema.blackborderdetector.properties, $.i18n("edt_conf_bb_heading_title")));
+
+		//automatic tone mapping
+		$('#conf_cont').append(createOptPanel('<svg data-src="svg/hdr.svg" fill="currentColor" class="svg4hyperhdr"></svg>', $.i18n("edt_automatic_tone_mapping_title"), 'editor_container_automatic_tone_mapping', 'btn_submit_automatic_tone_mapping'));
+		$('#conf_cont').append(createHelpTable(window.schema.automaticToneMapping.properties, $.i18n("edt_automatic_tone_mapping_title")));
 	}	
 
 	//color
@@ -103,13 +107,27 @@ $(document).ready( function() {
 	$('#btn_submit_blackborder').off().on('click',function() {
 		requestWriteConfig(editor_blackborder.getValue());
 	});
+
+	//tone mapping
+	editor_automatic_tone_mapping = createJsonEditor('editor_container_automatic_tone_mapping', {
+		automaticToneMapping: window.schema.automaticToneMapping
+	}, true, true, undefined, false);
+
+	editor_automatic_tone_mapping.on('change',function() {
+		editor_automatic_tone_mapping.validate().length ? $('#btn_submit_automatic_tone_mapping').attr('disabled', true) : $('#btn_submit_automatic_tone_mapping').attr('disabled', false);
+	});
+	
+	$('#btn_submit_automatic_tone_mapping').off().on('click',function() {
+		requestWriteConfig(editor_automatic_tone_mapping.getValue());
+	});
 
 	//create introduction
 	if(window.showOptHelp)
 	{
 		createHint("intro", $.i18n('conf_colors_color_intro'), "editor_container_color");
 		createHint("intro", $.i18n('conf_colors_smoothing_intro'), "editor_container_smoothing");
 		createHint("intro", $.i18n('conf_colors_blackborder_intro'), "editor_container_blackborder");
+		createHint("intro", $.i18n('edt_automatic_tone_mapping_enable_explain'), "editor_container_automatic_tone_mapping");
 	}
 
 	removeOverlay();