[Feature] Add timepicker to calendar

[sinamics]

This is a continuation of #3302 and implementation of #3140 It was quite a hassle to get it right, but i think im almost there.

Main goal was to have one single list of hours, instead of two boxes with "after" and "before". The list expands with the selected days in calendar. Each day has a slightly different gray toned background.

• If the selected days in calendar is > 1, the after must be in day 1 and before in last day.
• Last selected time must be greater than the first.

User will get a error message in the top if these condition is not met.

Remaining items:

• [x] make it more stylish
• [x] needs more comprehensive testing to make sure there is no unwanted side-effects

[netlify[bot]]

✅ Deploy Preview for frigate-docs canceled.

Name	Link
🔨 Latest commit	6682c9dece8f6e5030b2dc5dec98d998365ccbc4
🔍 Latest deploy log	https://app.netlify.com/sites/frigate-docs/deploys/647e1229c60108000804fd98

[sinamics]

• improved styles
• hidden on mobile devices for now.
• updated calendar to accommodate the new after and before times.
• scrolls selected times into view

[sinamics]

So i have tested quite a bit, and seems to work ok. It would be beneficial to have someone else test and provide feedback on the usefulness of this, as well as any potential issues.

[NickM-27]

@sinamics Can you please resolve the conflicts here?

[sinamics]

@sinamics Can you please resolve the conflicts here?

sure can do.

[dominikjas]

Hey,

This looks very handy and we would like to use it! Is there an approximate time when this will be included in the stable version?

Or is there a safe way to use it now? I tried it once with the last dev version, but the time picker was not visible there.

[sinamics]

its available in the dev builds if you want to test it out now. https://github.com/blakeblackshear/frigate/pkgs/container/frigate

[dominikjas]

Mhm I won't get the timepicker when I'm using this image "ghcr.io/blakeblackshear/frigate:dev-2d52fbd" :-/

This is my docker compose:

version: "3.9"
services:
  frigate:
    container_name: frigate
    privileged: true # this may not be necessary for all setups
    restart: unless-stopped
    image: ghcr.io/blakeblackshear/frigate:dev-2d52fbd
    shm_size: "8gb" # update for your cameras based on calculation above
    devices:
      - /dev/bus/usb:/dev/bus/usb # passes the USB Coral, needs to be modified for other versions
    volumes:
      - /etc/localtime:/etc/localtime:ro
      - /var/lib/docker/volumes/frigate_config/_data/:/config/
      - /var/lib/docker/volumes/frigate_storage/_data:/media/frigate
      - type: tmpfs # Optional: 1GB of memory, reduces SSD/SD Card wear
        target: /tmp/cache
        tmpfs:
          size: 1000000000
    ports:
      - "5000:5000"
      - "8554:8554" # RTSP feeds
      - "8555:8555/tcp" # WebRTC over tcp
      - "8555:8555/udp" # WebRTC over udp
    environment:
      FRIGATE_RTSP_PASSWORD: "***"

and this is my frigate config:

mqtt:
  enabled: False

detectors:
  coral:
    type: edgetpu
    device: usb
#    model:
#      path: "/custom_model.tflite"
#  cpu1:
#    type: cpu
#    num_threads: 8

record:
  enabled: True
  retain:
    days: 30
    mode: active_objects
  events:
    pre_capture: 3
    post_capture: 3

snapshots:
  enabled: True
  clean_copy: True
  bounding_box: True

birdseye:
  enabled: false
  mode: continuous
  quality: 1

logger:
  default: info
  logs:
    frigate.event: debug

cameras:
  CAM07:
    ffmpeg:
      inputs:
        - path: rtsp://***:***@***.***.***.***/h264Preview_01_main
          roles:
           - detect
           - record
    objects:
      track:
        - person
        - car
        - bicycle
        - motorcycle
        - bus
    detect:
      width: 4608 # <---- update for your camera's resolution
      height: 1728 # <---- update for your camera's resolution

Did I miss something?

[NickM-27]

where are you looking for the time picker to be?

[dominikjas]

Thanks for the fast responses! Here:

[NickM-27]

that is where it is, you press the calendar -> custom -> and then you see the time picker

[dominikjas]

Still not there :-/

[sinamics]

@dominikjas can you goto system page, and make sure you have the dev build.

[NickM-27]

Also make sure you clear the cache on the browser as it may just not be loading the new frontend

[dominikjas]

Okay there seems to be another problem and as you already I expected the stable version was still loaded:

ERROR : Migration failed: 014_event_updates_for_fp

The container has crasehd now too. Can you also help me with this ?

[NickM-27]

if you have changed between versions you likely have a corrupt DB

[dominikjas]

Oh okay good to know thank you very much! I just stopped my container, renamed the db to frigate_old.db, restarted the container and the timepicker works now:

Are there any plans to get this timepicker in the frigate hass-card plugin too?

[NickM-27]

Are there any plans to get this timepicker in the frigate hass-card plugin too?

The frigate hass card is developed by another developer, and I believe it already supports features like the timpicker, timeline, etc.

[dominikjas]

Yes it has this timeline view but this was with a bigger amount of events a bit laggy on our home assistant. Would be nice to have it here:

But well, this probably doesn't belong in this thread.

Thank you again for the quick support!