LED strip designer context menu. Fix critical unicolor averaging bug. (…

…awawa-dev#379)
chbartsch · Nov 29, 2022 · 67fb89b · 67fb89b
1 parent da294c0
commit 67fb89b
Show file tree

Hide file tree

Showing 14 changed files with 662 additions and 222 deletions.
diff --git a/assets/webconfig/content/light_source.html b/assets/webconfig/content/light_source.html
@@ -39,7 +39,7 @@ <h3 class="page-header"><i class="fa fa-lightbulb-o fa-fw"></i><span data-i18n="
 		<div id="menu_gencfg" class="tab-pane fade" style="padding-top: 10px;" aria-labelledby="menugencfg">
 			<div class="row">
 				<div class="col-lg-12" id="layout_intro"></div>
-				<div class="col-lg-6 col-md-12">
+				<div class="col-lg-6 col-md-12" id="led_main_panel">
 					<div class="accordion" id="accordion">
 						<div class="accordion-item">
 							<div class="accordion-header card card-default" id="headingOne">
@@ -567,31 +567,111 @@ <h4 class="card-title">
 					</div>
 				</div>
 				<!-- accordion -->
-				<div class="col-lg-6 col-md-12">
+				<div class="col-lg-6 col-md-12" id="led_zoom_panel">
 					<div class="card card-default">
 						<div class="card-header" id="instTarget2">
 							<h4 class="card-title"><i class="fa fa-search fa-fw"></i><span data-i18n="conf_leds_layout_peview">LED Layout preview</span></h4>
 						</div>
-						<div class="card-body">
-							<p id="previewcreator" style="font-weight: bold;"></p>
+						<div class="card-body" id="visualCreatorPanel">
 							<p id="previewledcount" style="font-weight: bold;"></p>
 							<p id="previewledpower" style="font-weight: bold;"></p>
 							<div id="led_vis_help"></div>
+							<p data-i18n="conf_leds_layout_context" style="font-weight: bold;"></p>
 							<div class="col-lg-12 st_helper" style="padding-left: 0px; padding-right: 0px;">
 								<div id="leds_preview"></div>
 							</div>
 						</div>
 						<div class="card-footer">
 							<button type="button" class="btn btn-danger" id="leds_prev_toggle_num"><i class="fa fa-info fa-fw"></i><span data-i18n="main_ledsim_btn_togglelednumber">toggle led numbers</span></button>
 							<button type="button" class="btn btn-primary" id="leds_prev_checklist"><i class="fa fa-info-circle fa-fw"></i><span data-i18n="conf_leds_layout_btn_checklist">toggle led numbers</span></button>
+							<button type="button" class="btn btn-warning" id="leds_prev_zoom"><i class="fa fa-arrows-alt fa-fw"></i><span data-i18n="conf_leds_layout_btn_zoom">zoom</span></button>
 						</div>
 					</div>
 				</div>
 			</div>
 		</div>
 	</div>
 </div>
-
+<div class="dropdown-menu dropdown-menu-sm" style="display: none;" id="creator-context-menu">
+	<a class="dropdown-item" href="#" id="CMD_MOVE"><i class="fa fa-arrows fa-fw"></i><span data-i18n="led_editor_context_move">Move</span></a>
+	<a class="dropdown-item" href="#" id="CMD_PROPERTIES"><i class="fa fa-edit fa-fw"></i><span data-i18n="led_editor_context_properties">Properties</span></a>
+	<a class="dropdown-item" href="#" id="CMD_ENABLE"><i class="fa fa-lightbulb-o fa-fw"></i><span id="cmd_dis_enable_text" data-i18n="led_editor_context_enable">Enable</span></a>
+	<a class="dropdown-item" href="#" id="CMD_DELETE"><i class="fa fa-remove fa-fw"></i><span data-i18n="led_editor_context_delete">Delete</span></a>
+</div>
+<!-- Modal -->
+<div class="modal fade" id="ledPropertiesForm" tabindex="-1" aria-labelledby="ledPropertiesLabel" aria-hidden="true">
+	<div class="modal-dialog">
+		<div class="modal-content p-0">
+			<div class="card card-default modal-body" style="margin: 0px !important; padding: 0px !important;">
+				<div class="card-header">
+					<h4 class="modal-title"><b><span id="ledPropertiesFormLabel"></span></b></h4>				
+				</div>
+				<div class="card-body">
+					<div class="container">
+						<div class="form-group row">
+							<div class="col-12 col-md-6">
+								<div class="form-group row">
+									<div class="col-form-label mb-3 col-3">
+										<label class="required" data-i18n="conf_leds_layout_cl_left"></label>
+									</div>
+									<div class="mb-3 col-9">
+										<div class="input-group">
+											<input type="number" class="form-control" data-schemaformat="stepper" min="0" max="1" step="0.001" id="ledPropertiesDialogLeft" />
+											<div class="input-group-append"><button type="button" class="btn btn-secondary stepper-down">-</button></div>
+											<div class="input-group-append"><button type="button" class="btn btn-secondary stepper-up">+</button></div>
+										</div>
+									</div>
+								</div>
+								<div class="form-group row">
+									<div class="col-form-label mb-3 col-3">
+										<label class="required" data-i18n="conf_leds_layout_cl_right"></label>
+									</div>
+									<div class="mb-3 col-9">
+										<div class="input-group">
+											<input type="number" class="form-control" data-schemaformat="stepper" min="0" max="1" step="0.001" id="ledPropertiesDialogRight" />
+											<div class="input-group-append"><button type="button" class="btn btn-secondary stepper-down">-</button></div>
+											<div class="input-group-append"><button type="button" class="btn btn-secondary stepper-up">+</button></div>
+										</div>
+									</div>
+								</div>
+							</div>
+							<div class="col-12 col-md-6">								
+								<div class="form-group row">
+									<div class="col-form-label mb-3 col-3">
+										<label class="required" data-i18n="conf_leds_layout_cl_top"></label>
+									</div>
+									<div class="mb-3 col-9">
+										<div class="input-group">
+											<input type="number" class="form-control" data-schemaformat="stepper" min="0" max="1" step="0.001" id="ledPropertiesDialogTop" />
+											<div class="input-group-append"><button type="button" class="btn btn-secondary stepper-down">-</button></div>
+											<div class="input-group-append"><button type="button" class="btn btn-secondary stepper-up">+</button></div>
+										</div>
+									</div>
+								</div>
+								<div class="form-group row">
+									<div class="col-form-label mb-3 col-3">
+										<label class="required" data-i18n="conf_leds_layout_cl_bottom"></label>
+									</div>
+									<div class="mb-3 col-9">
+										<div class="input-group">
+											<input type="number" class="form-control" data-schemaformat="stepper" min="0" max="1" step="0.001" id="ledPropertiesDialogBottom" />
+											<div class="input-group-append"><button type="button" class="btn btn-secondary stepper-down">-</button></div>
+											<div class="input-group-append"><button type="button" class="btn btn-secondary stepper-up">+</button></div>
+										</div>
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+				<div class="card-footer">					
+					<button type="button" id="ready_to_set_single_abort" class="btn btn-danger float-end"><span data-i18n="general_btn_exit">Exit</span></button>					
+					<button type="button" id="ready_to_set_single_led" class="btn btn-primary float-end me-2"><span data-i18n="general_btn_save">Save</span></button>
+				</div>				
+			</div>
+		</div>
+	</div>
+</div>
 <link href="css/jsonaceeditor.min.css" rel="stylesheet" type="text/css" />
 <script src='js/lib/jsonaceeditor.min.js'></script>
 

diff --git a/assets/webconfig/css/hyperhdr.css b/assets/webconfig/css/hyperhdr.css
@@ -788,4 +788,36 @@ body:not(.dark-mode) .alert-yellow{
 	color: #212529;
 	background-color: #f39c12;
 	border-color: #e08e0b;
-}
+}
+
+.crosslineDark {
+     background: 
+         linear-gradient(to top left,
+             rgba(0,0,0,0) 0%,
+             rgba(0,0,0,0) calc(50% - 1px),
+             rgba(0,0,0,1) 50%,
+             rgba(0,0,0,0) calc(50% + 1px),
+             rgba(0,0,0,0) 100%),
+         linear-gradient(to top right,
+             rgba(0,0,0,0) 0%,
+             rgba(0,0,0,0) calc(50% - 1px),
+             rgba(0,0,0,1) 50%,
+             rgba(0,0,0,0) calc(50% + 1px),
+             rgba(0,0,0,0) 100%);
+}
+
+.crosslineWhite {
+     background: 
+         linear-gradient(to top left,
+             rgba(0,0,0,0) 0%,
+             rgba(0,0,0,0) calc(50% - 1.5px),
+             rgba(255,255,255,1) 50%,
+             rgba(0,0,0,0) calc(50% + 1.5px),
+             rgba(0,0,0,0) 100%),
+         linear-gradient(to top right,
+             rgba(0,0,0,0) 0%,
+             rgba(0,0,0,0) calc(50% - 1.5px),
+             rgba(255,255,255,1) 50%,
+             rgba(0,0,0,0) calc(50% + 1.5px),
+             rgba(0,0,0,0) 100%);
+}
diff --git a/assets/webconfig/i18n/en.json b/assets/webconfig/i18n/en.json
@@ -1177,5 +1177,14 @@
   "edt_conf_mqtt_ssl_ignore_errors_title" : "Ignore SSL errors",
   "edt_conf_mqtt_ssl_ignore_errors_expl" : "Ignore all SSL errors such as self-signed certificates etc. Use with caution.",
   "json_api_flatbuffers_user_lut" : "Flatbuffers LUT filename",
-  "json_api_hdr_expl" : "Turn on/off HDR tone mapping. You can also pass the name of the user LUT file in the user HyperHDR home folder to be used for Flatbuffers tone mapping."
+  "json_api_hdr_expl" : "Turn on/off HDR tone mapping. You can also pass the name of the user LUT file in the user HyperHDR home folder to be used for Flatbuffers tone mapping.",
+  "led_editor_context_move": "Move",
+  "led_editor_context_properties": "Properties",
+  "led_editor_context_delete": "Delete",
+  "led_editor_context_enable": "Enable",
+  "led_editor_context_disable": "Disable",
+  "led_editor_context_moving": "Left click the mouse to accept the position",
+  "conf_leds_disabled_notification" : "Some LEDs are disabled by the user!",
+  "conf_leds_layout_context" : "Right click on the LED to display the context menu. With the CTRL key selects the object below.",
+  "conf_leds_layout_btn_zoom" : "Zoom"
 }