Widget to enter a time

Apps & Services HABPanel
1

Hi all,
I am struggeling to create a widget in which I can enter a time into a time Item.
Is anyone out there that already built something like this?
Google and ChatGPT have not been helpful to achieve this task :-/
Alternatively a good howto, tutorial or example on the timeline picker could help me, too.

kind regards
Joerg

2

Did you also search the Forum? Time Picker

1 Like
3

Yes I did, but this for openhab, but not for habpanel

4

A simple version is to use an input card, and specify the type as datetime-local this should bring up a datetime picker when clicked. I use this (but as list items) for a widget where I can schedule putting my home in vacation mode when we’re away for a few days or more.

5

Hi Anders,
sorry, that I am screwed up a little bit. Could you provide me with some more detailled information?
It would be great to have a screenshot and the code.
best regards
Joerg

6

Here is the yaml for a simple example:

component: oh-input-card
config:
  title: Time picker
  type: datetime-local
  sendButton: true
  item: VacationMode_StartDate
  useDisplayState: true
  showTime: true

Should render something like this, but the input field might vary depending on your device/browser:

Screenshot 2023-06-30 at 09.52.09
Screenshot 2023-06-30 at 09.52.091017×346 6.46 KB

7

Thanks,
was offline for a week but will give it a try and will let you know
kind regards
Joerg

8

I am still struggeling with it.
What did I do so far:
I created a custom widget in hab panel called MyTimePicker.
it has 2 settings:
1st: item_to_manage, type string: Just to display a text
2nd: time_item, type item: Here goes my item from openhab to that I want to manage and set in the panel
It simply doesn’t update the item I hand over in the configuration of the item in my habpanel dashboard.
Any idea what is wrong?

Here is the code I created:


<style>
#timepick_table,
#timepick_td {
  border: 0px;
  padding: 3px;
  font-size: {{config.font_size}}px;
  text-align: center;
}

#timepick_table {
  border-collapse: collapse;
  width: 100%;
}
</style>

<div class="time-widget">
  <input id="time-input" type="time" ng-model="timeValue" />
  <button id="set-time-button" ng-click="sendTime()">Set Time</button>
</div>

<script>
  (function () {
    'use strict';

    angular.module('app').controller('MyPickerWidgetController', MyPickerWidgetController);

    function MyPickerWidgetController($scope, openhabService) {
      $scope.timeValue = '';

      $scope.sendTime = function () {
        var timeItem = '{{config.time_item}}';
        var timeValue = $scope.timeValue;
        openhabService.sendCommand(timeItem, timeValue);
      };

      // Listen to changes in the time picker and update the displayed time
      $scope.$watch('timeValue', function (newValue, oldValue) {
        if (newValue !== oldValue) {
          $scope.config.item_to_manage = newValue;
        }
      });
    }
  })();
</script>```