Close #306 - knob: Formatting options for value display (#307)

Signed-off-by: Yannick Schaus <habpanel@schaus.net>
openhab · Jun 16, 2018 · cd4c280 · cd4c280
1 parent db3270b
commit cd4c280
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 8 deletions.
diff --git a/web/app/widgets/knob/knob.settings.tpl.html b/web/app/widgets/knob/knob.settings.tpl.html
@@ -73,10 +73,14 @@ <h3 translate-keep-content translate="widget.knob.settings.header">Knob Settings
                                 </div>
                             </div>
 
-                            <div class="col-lg-12 col-md-12">
+                            <div class="row">
+                                <h4 class="col-lg-12 col-md-12"  translate-keep-content translate="widget.knob.general.centraldisplay">Central display</h4>
+                            </div>
+
+                            <div class="col-lg-6 col-md-6">
                                 <div class="form-group">
-                                    <label class="control-label col-lg-3 col-md-3" translate-keep-content translate="widget.knob.general.centraldisplay">Central display</label>
-                                    <div class="col-lg-9 col-md-9">
+                                    <label class="control-label col-lg-1 col-md-1"></label>
+                                    <div class="col-lg-11 col-md-11">
                                         <div class="checkbox">
                                             <label>
                                                 <input type="checkbox" name="readOnly" ng-model="form.displayInput" /> <span translate-keep-content translate="widget.knob.general.centraldisplay.showvalue">Show value</span>
@@ -90,12 +94,24 @@ <h3 translate-keep-content translate="widget.knob.settings.header">Knob Settings
                                     </div>
                                 </div>
                             </div>
-
-
-
+                            <div class="col-lg-6 col-md-6">
+                                <div class="form-group" ng-class="{error: _form.format.$error && _form.submitted}">
+                                    <label class="col-lg-4 col-md-4" translate-keep-content translate="widget.common.format" style="font-weight: normal">Format</label>
+                                    <div class="col-lg-12 col-md-12">
+                                        <input name="col" ng-disabled="form.useserverformat" ng-model="form.format" class="form-control" />
+                                    </div>
+                                    <div class="col-lg-12 col-md-12">
+                                        <div class="checkbox">
+                                            <label>
+                                                <input type="checkbox" name="vertical" ng-model="form.useserverformat" /> <span translate-keep-content translate="widget.common.format.useserverprovided">Use server-provided format if available</span>
+                                            </label>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
                         </div>
                     </div>
-                    
+
                 </uib-tab>
 
                 <uib-tab heading="{{'Bar & Track' | translation:'widget.knob.bartrack'}}">

diff --git a/web/app/widgets/knob/knob.widget.js b/web/app/widgets/knob/knob.widget.js
@@ -75,6 +75,12 @@
                 return undefined;
             }
 
+            if (vm.widget.useserverformat && item.stateDescription && item.stateDescription.pattern) {
+                vm.knob.options.inputFormatter = function (input) {
+                    return sprintf(item.stateDescription.pattern, input);
+                }
+            }
+
             return value;
         }
 
@@ -128,7 +134,11 @@
         };
         if (vm.widget.scaleQuantity) vm.knob.options.scale.quantity = vm.widget.scaleQuantity;
         if (vm.widget.scaleSpaceWidth) vm.knob.options.scale.spaceWidth = vm.widget.scaleSpaceWidth;
-
+        if (vm.widget.format && !vm.widget.useserverformat) {
+            vm.knob.options.inputFormatter = function (input) {
+                return sprintf(vm.widget.format, input);
+            }
+        }
 
         // if ranges are enabled update knob setings
         if ( vm.widget.rangesEnabled) {
@@ -196,6 +206,8 @@
             startAngle: widget.startAngle,
             endAngle: widget.endAngle,
             displayInput: angular.isDefined(widget.displayInput) ? widget.displayInput : true,
+            format: widget.format,
+            useserverformat: widget.useserverformat,
             readOnly: widget.readOnly,
             barWidth: widget.barWidth,
             trackWidth: widget.trackWidth,