Photoframe - MainUI Widget

Setup, Configuration and Use Widgets
1

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]
2

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.

3

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

1 Like
4

Hi,

i have to extend my wishes (or better: the wishes of my wife). :smiley:
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

5

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
                  ...
1 Like