Photoframe - MainUI Widget

Minfred · June 4, 2023, 3:10pm

Hi there,

i would like to use the Rpi-Touchdisplay as Photoframe including some values (room-temperatures, etc) with the new possibilities of MainUI.
First of all, i would like to have an image-carousel as there was in HabPanel.

I have a cronjob, who loads three random pictures every hour from my nas and saves the pics in the static-folder.
Furthermore i have an String-Item, which holds the three urls to the static pictures.

Until now, i have the following code. I can show the pictures and works so far.
But how can i achieve:

Automatic sliding (show every picture about 10 seconds)
Looping (after Picture 3, starting with Picture 1 again)

Are the used components the best solutions or are there better option i cannot see in the moment?

In the future, i would like to hover some oh-cards holding the values for some rooms in the bottom of the pics…
For example: “Picture 1 - Temperature/Humidty livingroom” & “Picture 2 - Temperature/Humidity bathroom” & “Picture 3 - Temperature/Humidity sleepingroom”

uid: widget_photoframe_2
tags: []
props:
  parameters:
    - description: <b>Optional prefix</b> for item names
      label: Item prefix
      name: itemPrefix
      required: false
      type: TEXT
    - context: item
      description: Item which holds the image-url and the title
      label: Image/Title Item
      name: image
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Jun 4, 2023, 4:43:48 PM
component: f7-block
config:
  style:
    position: relative
slots:
  default:
    - component: f7-swiper
      config:
        navigation: true
        params:
          grabCursor: true
          initalSlide: 0
          keyboard: true
          mousewheel: true
          observeSlideChildren: true
          observer: true
          runCallbacksOnInit: true
          slidesPerView: 1
          spaceBetween: 2
          updateOnWindowResize: true
          watchOverflow: true
        style:
          --swiper-navigation-color: white
          --swiper-navigation-size: 50px
          z-index: 0
      slots:
        default:
          - component: oh-repeater
            config:
              for: images
              fragment: true
              rangeStart: 1
              rangeStop: =items[props.image].state.split(';').length
              sourceType: range
            slots:
              default:
                - component: f7-swiper-slide
                  config:
                    class:
                      - display-flex
                      - justify-content-center
                      - align-items-center
                    style:
                      height: 100%
                      position: relative
                      width: 100%
                  slots:
                    default:
                      - component: oh-image
                        config:
                          style:
                            height: 100%
                            object-fit: contain
                            width: 100%
                          url: =items[props.image].state.split(';')[loop.images_idx]

JustinG · June 4, 2023, 3:21pm

I believe you just have to set the speed parameter in the swiper params:

This may happen automatically when you set the speed, if not, you probably just need to set the rewind parameter to true:

Looks good to me. This is how I would do this.

Minfred · June 4, 2023, 4:29pm

Hi,

thanks a lot for the sugestions.
The speed parameter just set the velocity of the slideeffect via next-/prev-click, not an automated sliding after x seconds.
BUT, i found the solution in the API-description: autoplay parameter with the option “delay”.

Perfect, now its working!

uid: widget_photoframe_2
tags: []
props:
  parameters:
    - description: <b>Optional prefix</b> for item names
      label: Item prefix
      name: itemPrefix
      required: false
      type: TEXT
    - context: item
      description: Item which holds the image-url and the title
      label: Image/Title Item
      name: image
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Jun 4, 2023, 6:23:37 PM
component: f7-block
config:
  style:
    position: relative
slots:
  default:
    - component: f7-swiper
      config:
        navigation: true
        params:
          grabCursor: true
          initalSlide: 0
          keyboard: true
          mousewheel: true
          observeSlideChildren: true
          observer: true
          runCallbacksOnInit: true
          slidesPerView: 1
          spaceBetween: 2
          updateOnWindowResize: true
          watchOverflow: true
          speed: 500
          rewind: true
          autoplay: {
            delay: 5000
          }
        style:
          --swiper-navigation-color: white
          --swiper-navigation-size: 50px
          z-index: 0
      slots:
        default:
          - component: oh-repeater
            config:
              for: images
              fragment: true
              rangeStart: 1
              rangeStop: =items[props.image].state.split(';').length
              sourceType: range
            slots:
              default:
                - component: f7-swiper-slide
                  config:
                    class:
                      - display-flex
                      - justify-content-center
                      - align-items-center
                    style:
                      height: 100%
                      position: relative
                      width: 100%
                  slots:
                    default:
                      - component: oh-image
                        config:
                          style:
                            height: 100%
                            object-fit: contain
                            width: 100%
                          url: =items[props.image].state.split(';')[loop.images_idx]

Kind regards and thanks,
Minfredo

Minfred · June 13, 2023, 7:40pm

Hi,

i have to extend my wishes (or better: the wishes of my wife).
I use the photoframe-widget on the Raspi-Display with a canvas layout with hoovering items showing some temperatures/ humidity of different rooms (find the code attached).
BUT, my wife complains that she can’t see the photos (with the items in front).

My idea is now, to have 4 sliding photoframes (like the three in the thread above), but in the fourth picture, i have an arrangement with clock and different items, without a photo behind.
So, to show the widgets only in the fourth frame or to have a sliding photo with items.
Can somebody follow my thoughts?
Is this even possible?

config:
  fixedType: canvas
  gridEnable: true
  hideNavbar: true
  hideSidebarIcon: true
  label: Rpi_Display_2
  layoutType: fixed
  order: ""
  screenHeight: 480
  screenWidth: 800
  showFullscreenIcon: true
  sidebar: true
blocks: []
masonry: null
grid: []
canvas:
  - component: oh-canvas-layer
    config: {}
    slots:
      default:
        - component: oh-canvas-item
          config:
            h: 520
            w: 840
            x: -20
            y: -20
          slots:
            default:
              - component: widget:widget_photoframe_2
                config:
                  image: photoframe_pics
        - component: oh-canvas-item
          config:
            h: 140
            noCanvasShadow: false
            notStyled: true
            w: 360
            x: 420
            y: 320
          slots:
            default:
              - component: widget:Cell_Weather_1
                config: {}
        - component: oh-canvas-item
          config:
            h: 100
            notStyled: false
            w: 280
            x: 440
            y: 20
          slots:
            default:
              - component: oh-clock-card
                config:
                  dateFormat: LL
                  datePos: below
                  noBorder: false
                  showDate: true
        - component: oh-canvas-item
          config:
            h: 140
            w: 180
            x: 20
            y: 160
          slots:
            default:
              - component: widget:Cell_Temp_Card_1
                config:
                  humidity_item: bme280_wohnzimmer_humidity_number
                  icon: chevron_right_square
                  temp_item: bme280_wohnzimmer_temperature_number
                  title: Wohnzimmer
        - component: oh-canvas-item
          config:
            h: 140
            w: 180
            x: 20
            y: 320
          slots:
            default:
              - component: widget:Cell_Temp_Card_1
                config:
                  humidity_item: SonoffHumidA2
                  icon: chevron_right_square
                  temp_item: SonoffTempA2
                  title: Schlafzimmer
        - component: oh-canvas-item
          config:
            h: 140
            w: 180
            x: 220
            y: 320
          slots:
            default:
              - component: widget:Cell_Temp_Card_1
                config:
                  humidity_item: humidityAqaraBad01
                  icon: chevron_right_square
                  temp_item: temperatureAqaraBad01
                  title: Bad
        - component: oh-canvas-item
          config:
            h: 140
            w: 180
            x: 220
            y: 160
          slots:
            default:
              - component: widget:Cell_Temp_Card_1
                config:
                  humidity_item: SonoffHumidB2
                  icon: chevron_right_square
                  temp_item: SonoffTempB2
                  title: Kinderzimmer

Best regards,
Minfredo

JustinG · June 13, 2023, 9:41pm

You can put whatever you want on a swiper slide. So to get another slide, just add one after the repeater series and place the other components you want directly on that slide. The basic structure would look like this:

component: f7-block
  ...
    - component: f7-swiper
      ...
          - component: oh-repeater
            ...
                - component: f7-swiper-slide
                  ...
                      - component: oh-image
                        ...
          - component: f7-swiper-slide
            ...
                - component: Label or whatever
                  ...
                - component: other-component or whatever
                  ...

BG56 · November 24, 2023, 2:28pm

Dear @Minfred, I saw your post “Photoframe” and would like to implement it into my Openhab. The implementation would be much easier, if you could tell my how your items “itemPrefix” and “image” look like. Did your widget use “itemPrefix” or “image” only?

I tried this for item “images” … but it does not work

Thanks for your help!
Bernhard

BG56 · November 27, 2023, 9:45am

it is easier than expected. The following command worked (without “;” at the end of the string.

I still dont know, how to place the “image title” into the string.

JustinG · November 27, 2023, 3:10pm

The documentation lays out what you need for image captions:

The only extra piece that you need if you are sending that “object” with url and caption properties is how yaml relates to json strings. In yaml, array elements are indicated with the - and in json an array is enclosed in [...]. So the example yaml in the docs:

actionPhotos:
    - url: http://openhabian:8080/static/photos/image1.jpg
      caption: Image 1
    - url: http://openhabian:8080/static/photos/image2.jpg
    - html: <video src="http://openhabian:8080/static/videos/video1.mp4"></video>
      caption: Garden Camera

Is an array of three json objects. The first object has url and caption keys, the second has only a url key, and the third has html and caption keys. To send the same configuration as a json string would be:

actionPhotos: =[{'url':'http://openhabian:8080/static/photos/image1.jpg','caption':'Image 1'},{'url':'http://openhabian:8080/static/photos/image2.jpg'},{'html':'<video src="http://openhabian:8080/static/videos/video1.mp4"></video>','caption':'Garden Camera'}]

Minfred · December 29, 2023, 11:13am

HI @BG56 ,

sorry for my late reply, i’m busy managing twins.
If i understand you correctly, your problem is to tell Openhab where it can find the photos.
I have an rule in openhab for that:

when
      System started
  then
    logInfo("Setzen der Links", "Foto-Links für Display")
    photoframe_pics.postUpdate("http://youripaddress:8080/static/Pictures/bild1.jpg; http://youripaddress:8080/static/Pictures/bild2.jpg;")
end

Is this helping?

Kind regards,
Minfred