Canvas Layout getting started

Does anyone know how to create canvas widgets?

uid: test_canvas_widget
tags: []
props:
  parameters: []
  parameterGroups: []
timestamp: Dec 23, 2022, 5:00:22 PM
component: f7-card
config:
  title: '=(props.item) ? "State of " + props.item : "Set props to test!"'
  footer: =props.prop1
  content: =items[props.item].displayState || items[props.item].state
slots:
  default:
    - component: oh-canvas-layout
      config:
        screenWidth: 600
        screenHeight: 400
        imageUrl: /static/heating.jpg
      slots:
        default:
          - component: oh-canvas-item
            slots:
              default:
                - component: widget:schuko_card

What do you mean ?
AFAIK there is no canvas widget type, it’s the page config type.

Thank you for your replay,
the above example is what I’ did using custom widget creation.

If this is not correct, what is the starting point
the other option is to create a new page, but what page is to be used or can be used?

there is no canvas page, so how do I’ start crating such a page?

I’ have checked the links attached, but cannot find oh-canvas-layout.

So may be I’ do not use the oh-canvas component for what they intended, but the documentation is not very informative on how to use them.

Create a new page by hitting the plus symbol, select create layout, select

Switch to fixed layout

Select

Fixed Canvas

and all added elements (widgets) will be oh-canvas components.

Thanks,
I’ tried width the example found,

config:
  layoutType: fixed
  fixedType: grid
  label: Canvas Tutorial
  sidebar: true
blocks: []
masonry: null
grid: []
canvas:
  - component: oh-canvas-item
    config:
      x: 10
      y: 10
      h: 800
      w: 600
    slots:
      default:
        - component: oh-clock-card
          config:
            title: test

Q:

  • there are some config elements, are they CSS elements or where are the defined?
  • the widget is not displayed, what did I’ miss?

You are missing the canvas-layer component

config:
  layoutType: fixed
  fixedType: canvas
blocks: []
masonry: null
grid: []
canvas:
  - component: oh-canvas-layer
    config: {}
    slots:
      default:
        - component: oh-canvas-item
          config:
            x: 20
            y: 20
            h: 150
            w: 200
          slots:
            default:
              - component: oh-clock-card
                config:
                  title: Clock
                  footer: Testclock

Thank you very much.

this is the way to getting started with canvas.

1th Create page
Create a new page by hitting the plus symbol, select create layout, select

Switch to fixed layout

Select

Fixed Canvas

and all added elements (widgets) will be oh-canvas components.

2nd Use oh-canvas.layer as the root element

config:
  layoutType: fixed
  fixedType: canvas
blocks: []
masonry: null
grid: []
canvas:
  - component: oh-canvas-layer
    config: {}
    slots:
      default:
        - component: oh-canvas-item
          config:
            x: 20
            y: 20
            h: 150
            w: 200
          slots:
            default:
              - component: oh-clock-card
                config:
                  title: Clock
                  footer: Testclock

for my project I’ have one more question,
is it possible to have two widgets and connect the two widgets using a bezier curve?

However, thank you very much as this is a good staring point

No, that is not possibel AFAIK.