From dab86ba567db5fe5d120f720c659743e76de6a5f Mon Sep 17 00:00:00 2001
From: Gautier Taravella <tarag@mailbox.org>
Date: Mon, 8 Mar 2021 21:01:44 +0100
Subject: [PATCH] Addition of a plan layout for floorplan-like page, in
 addition to responsive and grid layouts. Supports system and user-defined
 widgets.

Signed-off-by: Gautier Taravella <tarag@mailbox.org>
---
 bundles/org.openhab.ui/web/package-lock.json  |   5 +
 bundles/org.openhab.ui/web/package.json       |   1 +
 .../definitions/widgets/layout/index.js       |  28 ++
 .../src/components/widgets/layout/index.js    |   2 +
 .../widgets/layout/oh-canvas-item.vue         | 232 ++++++++++++++++
 .../widgets/layout/oh-canvas-layout.vue       | 260 ++++++++++++++++++
 .../widgets/layout/oh-layout-page.vue         |  14 +-
 bundles/org.openhab.ui/web/src/js/app.js      |   5 +
 .../settings/pages/layout/layout-edit.vue     |  48 +++-
 .../settings/pages/pagedesigner-mixin.js      |  23 +-
 10 files changed, 595 insertions(+), 23 deletions(-)
 create mode 100644 bundles/org.openhab.ui/web/src/components/widgets/layout/oh-canvas-item.vue
 create mode 100644 bundles/org.openhab.ui/web/src/components/widgets/layout/oh-canvas-layout.vue

diff --git a/bundles/org.openhab.ui/web/package-lock.json b/bundles/org.openhab.ui/web/package-lock.json
index 049c879d0b..1bbd021a58 100644
--- a/bundles/org.openhab.ui/web/package-lock.json
+++ b/bundles/org.openhab.ui/web/package-lock.json
@@ -18392,6 +18392,11 @@
         "diff-match-patch": "^1.0.0"
       }
     },
+    "vue-draggable-resizable": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/vue-draggable-resizable/-/vue-draggable-resizable-2.3.0.tgz",
+      "integrity": "sha512-77CLRj1TPwB30pwsjOf3pkd1UzYanCdKXbqhILJ0Oo5QQl50lvBfyQCXxMFzwWwTc3sbBbQH3FfWSV+BkoSElA=="
+    },
     "vue-echarts": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/vue-echarts/-/vue-echarts-4.1.0.tgz",
diff --git a/bundles/org.openhab.ui/web/package.json b/bundles/org.openhab.ui/web/package.json
index 99cca105d3..480d47c32b 100644
--- a/bundles/org.openhab.ui/web/package.json
+++ b/bundles/org.openhab.ui/web/package.json
@@ -88,6 +88,7 @@
     "vue": "^2.6.12",
     "vue-async-computed": "^3.9.0",
     "vue-codemirror": "^4.0.6",
+    "vue-draggable-resizable": "^2.3.0",
     "vue-echarts": "^4.1.0",
     "vue-fragment": "^1.5.1",
     "vue-fullscreen": "^2.2.0",
diff --git a/bundles/org.openhab.ui/web/src/assets/definitions/widgets/layout/index.js b/bundles/org.openhab.ui/web/src/assets/definitions/widgets/layout/index.js
index 992c16d3d0..794939911d 100644
--- a/bundles/org.openhab.ui/web/src/assets/definitions/widgets/layout/index.js
+++ b/bundles/org.openhab.ui/web/src/assets/definitions/widgets/layout/index.js
@@ -67,3 +67,31 @@ export function OhGridLayoutDefinition () {
       pb('showFullscreenIcon', 'Show Fullscreen Icon', 'Show a fullscreen icon on the top right corner (default false)')
     ])
 }
+
+export function OhCanvasItemDefinition () {
+  return new WidgetDefinition('oh-canvas-item', 'Canvas Item', 'Specific attributes to display widgets on a canvas.')
+    .paramGroup(pg('appearance', 'Layout Settings'), [
+      pb('notStyled', 'Preserve classic style', 'Preserve classic appearance of widgets as in standard layout pages.'),
+      pb('noCanvasShadow', 'No elements shadow', 'Do not shadow inner elements of standard widgets')
+        .v((value, configuration, configDescription, parameters) => { return configuration.notStyled !== true })
+    ])
+}
+
+export function OhCanvasLayoutDefinition () {
+  return new WidgetDefinition('oh-canvas-layout', 'Canvas Layout', 'Position widgets on a canvas layout with arbitrary position and size down to pixel resolution')
+    .paramGroup(pg('layout', 'Layout Settings'), [
+      pn('grid', 'Grid size', 'Grid size in pixels used to snap content (default 5)')
+    ])
+    .paramGroup(pg('screenSettings', 'Screen Settings'), [
+      pn('screenWidth', 'Screen Width', 'Screen width in pixels (default 1280)'),
+      pn('screenHeight', 'Screen Height', 'Screen width in pixels (default 720)'),
+      pb('scale', 'Scaling', 'Scale content to screen width (can lead to unexpected styling issues) (default false)'),
+      pt('imageUrl', 'Image URL', 'The URL of the image to display as background').c('url'),
+      pt('imageSrcSet', 'Image Source Set', 'The src-set attribute of background image element to take into account mulitple device resolutions. For example: "/static/floorplans/floor-0.jpg, /static/floorplans/floor-0@2x.jpg 2x"')
+    ])
+    .paramGroup(pg('shadow', 'Canvas items shadow'), [
+      pt('boxShadow', 'Box shadow', 'Shadow applied to box elements (box-shadow CSS syntax).').a(),
+      pt('textShadow', 'Text shadow', 'Shadow applied to text elements or font icons (text-shadow CSS syntax)').a(),
+      pt('filterShadow', 'Fitler Shadow', 'Shadow applied to raster or SVG image elements (filter: drop-shadow() CSS syntax)').a()
+    ])
+}
diff --git a/bundles/org.openhab.ui/web/src/components/widgets/layout/index.js b/bundles/org.openhab.ui/web/src/components/widgets/layout/index.js
index 2bb41c8df0..36579a55f9 100644
--- a/bundles/org.openhab.ui/web/src/components/widgets/layout/index.js
+++ b/bundles/org.openhab.ui/web/src/components/widgets/layout/index.js
@@ -6,3 +6,5 @@ export { default as OhGridCol } from './oh-grid-col.vue'
 export { default as OhGridCells } from './oh-grid-cells.vue'
 export { default as OhMasonry } from './oh-masonry.vue'
 export { default as OhGridLayout } from './oh-grid-layout.vue'
+export { default as OhCanvasLayout } from './oh-canvas-layout.vue'
+export { default as OhCanvasItem } from './oh-canvas-item.vue'
diff --git a/bundles/org.openhab.ui/web/src/components/widgets/layout/oh-canvas-item.vue b/bundles/org.openhab.ui/web/src/components/widgets/layout/oh-canvas-item.vue
new file mode 100644
index 0000000000..528773ab5f
--- /dev/null
+++ b/bundles/org.openhab.ui/web/src/components/widgets/layout/oh-canvas-item.vue
@@ -0,0 +1,232 @@
+<template>
+  <vue-draggable-resizable
+    :id="'oh-canvas-item-vdr-' +id"
+    :key="reloadKey"
+    :x="x"
+    :y="y"
+    :w="w"
+    :h="h"
+    :parent="true"
+    :draggable="!!context.editmode"
+    :resizable="!!context.editmode && !autosize"
+    :class-name="!!context.editmode ? 'oh-canvas-item-editmode' : 'oh-canvas-item-runmode'"
+    :grid="gridEnable ? [gridPitch,gridPitch] : undefined"
+    v-if="visible" class="oh-canvas-item no-margin"
+    @dragging="onDrag"
+    @resizing="onResize"
+    :on-drag-start="onDragStartCallback"
+    :on-resize-start="onResizeStartCallback">
+    <f7-menu v-if="context.editmode" class="configure-canvas-menu">
+      <f7-menu-item icon-f7="menu" dropdown icon-only>
+        <f7-menu-dropdown right>
+          <f7-menu-dropdown-item @click="context.editmode.configureWidget(context.component, context.parent)" href="#" text="Configure container" />
+          <f7-menu-dropdown-item v-if="context.component.slots.default.length > 0" @click="context.editmode.configureWidget(context.component.slots.default[0], context)" href="#" text="Configure Widget" />
+          <f7-menu-dropdown-item @click="context.editmode.editWidgetCode(context.component, context.parent)" href="#" text="Edit YAML" />
+          <f7-menu-dropdown-item v-if="context.component.slots.default.length > 0" @click="toggleAutoSize()" href="#">
+            <span>Auto Size</span>
+            <f7-icon class="margin-left" :f7="autosize ? 'checkmark_square' : 'square'" />
+          </f7-menu-dropdown-item>
+          <f7-menu-dropdown-item v-if="context.component.slots.default.length > 0" @click="toggleShadow()" href="#">
+            <span>Shadow</span>
+            <f7-icon class="margin-left" :f7="shadow ? 'checkmark_square' : 'square'" />
+          </f7-menu-dropdown-item>
+          <f7-menu-dropdown-item v-if="context.component.slots.default.length > 0" divider />
+          <f7-menu-dropdown-item @click="context.editmode.copyWidget(context.component, context.parent)" href="#" text="Copy" />
+          <f7-menu-dropdown-item divider />
+          <f7-menu-dropdown-item @click="context.editmode.bringWidgetToFront(context.component, context.parent, 'canvas')" href="#" text="Bring to Front" />
+          <f7-menu-dropdown-item @click="context.editmode.moveWidgetDown(context.component, context.parent, 'canvas')" href="#" text="Move Up" />
+          <f7-menu-dropdown-item @click="context.editmode.moveWidgetUp(context.component, context.parent, 'canvas')" href="#" text="Move Down" />
+          <f7-menu-dropdown-item @click="context.editmode.sendWidgetToBack(context.component, context.parent, 'canvas')" href="#" text="Send to Back" />
+          <f7-menu-dropdown-item divider />
+          <f7-menu-dropdown-item @click="context.editmode.removeWidget(context.component, context.parent, 'canvas')" href="#" text="Remove Item" />
+        </f7-menu-dropdown>
+      </f7-menu-item>
+    </f7-menu>
+    <div @click.capture="eventControl" style="width: 100%; height: 100%; position:absolute;">
+      <oh-placeholder-widget v-if="context.editmode && !context.component.slots.default.length" @click="context.editmode.addWidget(context.component, null, context.parent)" class="oh-canvas-item-content" />
+      <generic-widget-component v-else-if="context.component.slots.default.length" :context="childContext(context.component.slots.default[0])" @command="onCommand" class="oh-canvas-item-content"
+                                :class="{
+                                  'oh-canvas-item-styled' : styled,
+                                  'oh-canvas-item-shadow' : styled && shadow
+                                }" />
+    </div>
+    <f7-icon v-if="context.editmode" class="drag-handle" f7="move" size="15" color="gray" />
+  </vue-draggable-resizable>
+</template>
+
+<style lang="stylus">
+  .oh-canvas-item-editmode
+    outline 1px dashed #F00
+
+  .oh-canvas-item
+    position: absolute
+
+    .oh-canvas-item-content
+      width 100%
+      height 100%
+      margin 0
+
+    .oh-canvas-item-styled        // override background obscuring styles from system widgets
+      &.card                    // apply to card items
+        box-shadow: none
+        background: none
+        .card-content, .card-footer
+          .segmented, .stepper, .toggle
+            background: var(--f7-card-bg-color);
+
+    .oh-canvas-item-shadow        // shadow tuned to various card widgets
+      &.card                    // apply to card items
+        .card-content, .card-footer
+          .segmented, .stepper, .toggle
+            box-shadow:  var(--oh-canvas-item-box-shadow)
+          .oh-slider
+            .range-bar, .range-knob, .range-knob-label
+              box-shadow:  var(--oh-canvas-item-box-shadow)
+          img, svg
+            filter: var(--oh-canvas-item-svg-shadow)
+        .label-card-content
+          text-shadow: var(--oh-canvas-item-text-shadow)
+
+    .placeholder-widget a
+      height: 100%
+      padding: 0
+      display: flex
+
+    .drag-handle                // show drag handle on upper left corner
+      position: absolute !important
+      top: 0px
+      left: 0px
+      padding: 2px
+      z-index: 1000
+
+    .configure-canvas-menu        // show menu icon on upper right corner
+      position: absolute
+      top: 2px
+      right: 2px
+      .menu-inner
+        padding: 0px
+      .menu-inner:after
+        width: 0px
+ </style>
+
+<script>
+import mixin from '../widget-mixin'
+// import VueDraggableResizable from 'vue-draggable-resizable'
+import OhPlaceholderWidget from './oh-placeholder-widget.vue'
+import { OhCanvasItemDefinition } from '@/assets/definitions/widgets/layout'
+
+export default {
+  mixins: [mixin],
+  widget: OhCanvasItemDefinition,
+  components: {
+    'vue-draggable-resizable':
+        () => import('vue-draggable-resizable'),
+    OhPlaceholderWidget
+  },
+  props: {
+    gridPitch: Number,
+    gridEnable: Boolean,
+    id: String
+  },
+  data () {
+    return {
+      x: 0,
+      y: 0,
+      w: 0,
+      h: 0,
+      reloadKey: 0,
+      shadow: true,
+      styled: true
+    }
+  },
+  created () {
+    this.x = this.config.x || 20
+    this.y = this.config.y || 20
+    this.w = this.config.w || 100
+    this.h = this.config.h || 100
+    this.shadow = !this.config.noCanvasShadow
+    this.styled = !this.config.notStyled
+  },
+  computed: {
+    autosize () {
+      return this.w === 'auto'
+    }
+  },
+  methods: {
+    toggleAutoSize () {
+      if (this.w === 'auto') {
+        const elem = document.getElementById('oh-canvas-item-vdr-' + this.id)
+        this.w = this.context.component.config.w = elem.clientWidth
+        this.h = this.context.component.config.h = elem.clientHeight
+      } else {
+        this.w = this.context.component.config.w = 'auto'
+        this.h = this.context.component.config.h = 'auto'
+        this.reloadKey += 1
+      }
+    },
+    toggleShadow () {
+      this.shadow = !this.shadow
+      this.context.component.config.noCanvasShadow = !this.shadow
+    },
+    onResize: function (x, y, width, height) {
+      this.x = this.context.component.config.x = x
+      this.y = this.context.component.config.y = y
+      this.w = this.context.component.config.w = width
+      this.h = this.context.component.config.h = height
+    },
+    onDrag: function (x, y) {
+      this.x = this.context.component.config.x = x
+      this.y = this.context.component.config.y = y
+    },
+    onResizeStartCallback (ev) {
+      if (this.w === 'auto' || this.h === 'auto') {
+        return false
+      }
+
+      const posOK = this.onDragStartCallback(ev)
+      if (this.gridEnable) {
+        const snapW = Math.round(this.w / this.gridPitch) * this.gridPitch
+        const snapH = Math.round(this.h / this.gridPitch) * this.gridPitch
+
+        if (this.w === snapW && this.h === snapH) {
+          // Widget already on grid, can continue to resize
+          return true && posOK
+        } else {
+          // Widget was not on grid, snap to grid upon first action
+          this.w = this.context.component.config.w = snapW
+          this.h = this.context.component.config.h = snapH
+          return false
+        }
+      } else {
+        return true
+      }
+    },
+    onDragStartCallback (ev) {
+      if (this.gridEnable) {
+        const snapX = Math.round(this.x / this.gridPitch) * this.gridPitch
+        const snapY = Math.round(this.y / this.gridPitch) * this.gridPitch
+
+        if (this.x === snapX && this.y === snapY) {
+          // Origin on grid, continue dragging action
+          return true
+        } else {
+          // First snap to grid component and stop action
+          this.x = this.context.component.config.x = snapX
+          this.y = this.context.component.config.y = snapY
+          return false
+        }
+      } else {
+        return true
+      }
+    },
+    eventControl (ev) {
+      // Events are captured before bubbling to prevent undesired widget interaction when a widget has been
+      // added but the page is in edit mode.
+      if (this.context.editmode && this.context.component.slots.default.length > 0) {
+        ev.stopPropagation()
+        ev.preventDefault()
+      }
+    }
+  }
+}
+</script>
diff --git a/bundles/org.openhab.ui/web/src/components/widgets/layout/oh-canvas-layout.vue b/bundles/org.openhab.ui/web/src/components/widgets/layout/oh-canvas-layout.vue
new file mode 100644
index 0000000000..e86c6aefd9
--- /dev/null
+++ b/bundles/org.openhab.ui/web/src/components/widgets/layout/oh-canvas-layout.vue
@@ -0,0 +1,260 @@
+<template>
+  <div ref="ohCanvasLayout" class="oh-canvas-layout" :class="context.editMode ? 'margin-top' : ''">
+    <f7-block v-if="context.editmode">
+      <f7-menu class="configure-layout-menu">
+        <f7-menu-item
+          @click="addItem"
+          icon="margin-left"
+          icon-f7="plus"
+          text="Add Widget" />
+        <f7-menu-item
+          v-if="context.clipboardtype"
+          @click="
+            context.editmode.pasteWidget(
+              context.component,
+              context.component.parent,
+              'canvas'
+            )
+          "
+          icon-f7="square_on_square" />
+        <f7-menu-item
+          @click="toggleGrid()"
+          :icon-f7="grid.enable ? 'circle_grid_3x3_fill' : 'scircle_grid_3x3'"
+          style="margin-left: auto" />
+        <f7-menu-item
+          @click="
+            context.editmode.configureWidget(
+              context.component,
+              context.parent,
+              'oh-canvas-layout'
+            )
+          "
+          text="Configure" />
+      </f7-menu>
+      <hr>
+    </f7-block>
+    <div
+      ref="canvasLayoutContainer"
+      class="oh-canvas-layout-container"
+      :style="{
+        background: context.editmode
+          ? 'var(--f7-page-master-border-color)'
+          : false,
+        'user-select': context.editmode ? 'none' : 'auto',
+        width: style.width + 'px',
+        height: style.height + 'px',
+        transform: `scale(${style.scale})`,
+        textAlign: 'center',
+        position: 'relative',
+        '--oh-canvas-item-box-shadow': config.boxShadow
+          ? config.boxShadow
+          : '0px 0px 4px 2px #444',
+        '--oh-canvas-item-svg-shadow': config.filterShadow
+          ? config.filterShadow
+          : 'drop-shadow(0px 0px 4px #444)',
+        '--oh-canvas-item-text-shadow': config.textShadow
+          ? config.textShadow
+          : '#444 0px 0px 4px',
+      }">
+      <div
+        style="
+          height: inherit;
+          width: inherit;
+          position: absolute;
+          top: 0;
+          left: 0;
+        ">
+        <img
+          class="oh-canvas-background"
+          :src="config.imageUrl"
+          :srcset="config.imageSrcSet">
+      </div>
+      <!-- Grid lines -->
+      <div
+        :style="{
+          height: 'inherit',
+          width: 'inherit',
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          backgroundImage:
+            'linear-gradient(-90deg, rgba(0, 0, 0, 0.1) 1px, transparent 1px), linear-gradient(rgba(0, 0, 0, 0.1) 1px, transparent 1px)',
+          backgroundSize: `${grid.pitch}px ${grid.pitch}px, ${grid.pitch}px ${grid.pitch}px`,
+          visibility: context.editmode && grid.enable ? 'inherit' : 'hidden',
+        }" />
+      <f7-button
+        v-if="!context.editmode"
+        @click="toggleFullscreen"
+        class="fullscreen-icon"
+        :icon-f7="
+          fullscreen
+            ? 'arrow_down_right_arrow_up_left'
+            : 'arrow_up_left_arrow_down_right'
+        " />
+      <div
+        v-if="context.editmode"
+        style="
+          opacity: 0.3;
+          padding: 4px;
+          position: absolute;
+          width: 100%;
+        ">
+        {{ getCurrentScreenResolution() }}
+        <span v-if="isRetina()"><f7-icon
+          tooltip="Screen resolution shown is the fullscreen resolution for websites. Real screen resolution is bigger."
+          f7="info_circle" /></span>
+      </div>
+      <oh-canvas-item
+        v-for="obj in layout"
+        :key="obj.id"
+        :id="obj.id"
+        :gridEnable="grid.enable"
+        :gridPitch="grid.pitch"
+        :context="childContext(obj.item)" />
+    </div>
+  </div>
+</template>
+
+<style lang="stylus">
+.oh-canvas-layout {
+  overflow: visible; // prevent widget menus from scrolling page
+
+  .oh-canvas-layout-container {
+    margin: auto; // center layout when smaller than current screen
+    background-color: var(--f7-page-bg-color); // theme bg (for fullscreen)
+    transform-origin: top;
+  }
+
+  .oh-canvas-background {
+    height: 100%;
+    width: 100%;
+    object-fit: contain;
+  }
+
+  .fullscreen-icon {
+    position: absolute;
+    top: 2px;
+    right: 2px;
+    z-index: 1000;
+  }
+}
+</style>
+
+<script>
+import mixin from '../widget-mixin'
+import OhCanvasItem from './oh-canvas-item'
+import { OhCanvasLayoutDefinition } from '@/assets/definitions/widgets/layout'
+
+export default {
+  mixins: [mixin],
+  widget: OhCanvasLayoutDefinition,
+  components: {
+    OhCanvasItem: OhCanvasItem
+  },
+  data () {
+    return {
+      layout: [],
+      screenWidth: Number,
+      screenHeight: Number,
+      fullscreen: this.$fullscreen.getState(),
+      navbarHidden: false,
+      style: {
+        width: Number,
+        height: Number,
+        scale: 1.0
+      },
+      grid: {
+        pitch: Number,
+        enable: false
+      }
+    }
+  },
+  created () {
+    if (this.config.layoutType === 'fixed' && this.config.fixedType === 'canvas') {
+      this.style.width = this.screenWidth = this.config.screenWidth || 1280
+      this.style.height = this.screenHeight = this.config.screenHeight || 720
+      this.grid.pitch = this.config.grid || 5
+      this.grid.enable = this.config.gridEnable || false
+
+      if (!this.context.editmode) {
+        window.addEventListener('resize', this.setDimensions)
+      } else {
+        window.addEventListener('keydown', this.doCommand)
+        console.log('Adding keydown window listener')
+      }
+    }
+
+    this.canvasLayoutStyle()
+    this.computeLayout()
+  },
+  mounted () {
+    // Chrome reports a wrong size in fullscreen, store initial resolution and use non-dynamically.
+    this.windowWidth = window.screen.width
+    this.windowHeight = window.screen.height
+  },
+  destroyed () {
+    window.removeEventListener('keydown', this.doCommand)
+  },
+  methods: {
+    isRetina () {
+      return window.devicePixelRatio > 1
+    },
+    getCurrentScreenResolution () {
+      return (
+        'Layout Size: ' +
+        this.screenWidth +
+        ' x ' +
+        this.screenHeight +
+        ' (Current Screen: ' +
+        this.windowWidth +
+        ' x ' +
+        this.windowHeight +
+        ')'
+      )
+    },
+    addItem () {
+      this.context.component.slots['canvas'].push({
+        component: 'oh-canvas-item',
+        config: { x: 20, y: 20, h: 150, w: 200 },
+        slots: { default: [] }
+      })
+      this.computeLayout()
+    },
+    toggleFullscreen () {
+      this.$fullscreen.toggle(this.$refs.ohCanvasLayout, {
+        wrap: false,
+        callback: (fullscreen) => {
+          this.canvasLayoutStyle()
+          this.fullscreen = fullscreen
+        }
+      })
+    },
+    toggleGrid () {
+      this.context.component.config.gridEnable = this.grid.enable = !this.grid.enable
+    },
+    canvasLayoutStyle: function () {
+      if (this.config.scale && !this.context.editmode) {
+        this.style.scale = parent.innerWidth / this.screenWidth
+      } else {
+        this.style.scale = 1.0
+      }
+    },
+    computeLayout () {
+      let layout = []
+      if (this.context.component.slots?.canvas) {
+        this.context.component.slots.canvas.forEach((item) => {
+          layout.push({
+            item: item,
+            id: Math.random().toString(36).substring(2)
+          })
+        })
+      }
+      this.layout = layout
+    },
+    doCommand (e) {
+      let cmd = String.fromCharCode(e.keyCode).toLowerCase()
+      console.log(`Received key press code:${e.keyCode} string:${cmd}`)
+    }
+  }
+}
+</script>
diff --git a/bundles/org.openhab.ui/web/src/components/widgets/layout/oh-layout-page.vue b/bundles/org.openhab.ui/web/src/components/widgets/layout/oh-layout-page.vue
index b6e8e52072..a7d13eb959 100644
--- a/bundles/org.openhab.ui/web/src/components/widgets/layout/oh-layout-page.vue
+++ b/bundles/org.openhab.ui/web/src/components/widgets/layout/oh-layout-page.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <template v-if="config.layoutType !== 'fixed'">
+    <template v-if="!config.layoutType || config.layoutType === 'responsive'">
       <oh-block v-for="(component, idx) in context.component.slots.default"
                 :key="idx"
                 :context="childContext(component)"
@@ -30,27 +30,31 @@
         </f7-block>
       </template>
     </template>
-    <template v-else>
+    <template v-else-if="config.layoutType === 'fixed' && (!config.fixedType || config.fixedType === 'grid')">
       <oh-grid-layout :context="context" />
     </template>
+    <template v-else-if="config.layoutType === 'fixed' && config.fixedType === 'canvas'">
+      <oh-canvas-layout :context="context" />
+    </template>
   </div>
 </template>
 
-<style lang="stylus">
-</style>
+<style lang="stylus"></style>
 
 <script>
 import mixin from '../widget-mixin'
 import OhBlock from './oh-block.vue'
 import OhMasonry from './oh-masonry.vue'
 import OhGridLayout from './oh-grid-layout.vue'
+import OhCanvasLayout from './oh-canvas-layout.vue'
 
 export default {
   mixins: [mixin],
   components: {
     OhBlock,
     OhMasonry,
-    OhGridLayout
+    OhGridLayout,
+    OhCanvasLayout
   }
 }
 </script>
diff --git a/bundles/org.openhab.ui/web/src/js/app.js b/bundles/org.openhab.ui/web/src/js/app.js
index 8d2306d17b..67e59f5a67 100644
--- a/bundles/org.openhab.ui/web/src/js/app.js
+++ b/bundles/org.openhab.ui/web/src/js/app.js
@@ -58,6 +58,11 @@ Vue.use(Trend)
 // Import Fulscreen Plugin
 import fullscreen from 'vue-fullscreen'
 Vue.use(fullscreen)
+// Import Vue Draggable Resizable
+import VueDraggableResizable from 'vue-draggable-resizable'
+// optionally import default styles
+import 'vue-draggable-resizable/dist/VueDraggableResizable.css'
+Vue.component('vue-draggable-resizable', VueDraggableResizable)
 
 // Extend prototype with the openHAB API interface
 Vue.prototype.$oh = openhab
diff --git a/bundles/org.openhab.ui/web/src/pages/settings/pages/layout/layout-edit.vue b/bundles/org.openhab.ui/web/src/pages/settings/pages/layout/layout-edit.vue
index 74c5949f15..8a5f6b0bf4 100644
--- a/bundles/org.openhab.ui/web/src/pages/settings/pages/layout/layout-edit.vue
+++ b/bundles/org.openhab.ui/web/src/pages/settings/pages/layout/layout-edit.vue
@@ -36,13 +36,14 @@
                     !(context.component.slots.default && context.component.slots.default.length) &&
                     !(context.component.slots.masonry && context.component.slots.masonry.length) &&
                     !(context.component.slots.grid && context.component.slots.grid.length) &&
+                    !(context.component.slots.canvas && context.component.slots.canvas.length) &&
                     !['responsive', 'fixed'].includes(page.config.layoutType)"
                   class="block-narrow margin-bottom" inset>
           <f7-block-title class="margin text-align-center">
             Choose a layout style
           </f7-block-title>
           <f7-row class="text-align-center align-items-stretch">
-            <f7-col width="50" class="elevation-2 elevation-hover-6 elevation-pressed-1" style="background-color: var(--f7-card-bg-color)">
+            <f7-col width="30" class="elevation-2 elevation-hover-6 elevation-pressed-1" style="background-color: var(--f7-card-bg-color)">
               <f7-link @click="setLayoutType('responsive')" class="flex-direction-column padding" style="color: var(--f7-theme-color-text-color)">
                 <f7-icon size="70px" f7="rectangle_3_offgrid" />
                 <div class="margin-bottom">
@@ -53,8 +54,8 @@
                 </div>
               </f7-link>
             </f7-col>
-            <f7-col width="50" class="elevation-2 elevation-hover-6 elevation-pressed-1" style="background-color: var(--f7-card-bg-color)">
-              <f7-link @click="setLayoutType('fixed')" class="flex-direction-column padding" style="color: var(--f7-theme-color-text-color)">
+            <f7-col width="30" class="elevation-2 elevation-hover-6 elevation-pressed-1" style="background-color: var(--f7-card-bg-color)">
+              <f7-link @click="setLayoutType('fixed', 'grid')" class="flex-direction-column padding" style="color: var(--f7-theme-color-text-color)">
                 <f7-icon size="70px" f7="grid" />
                 <div class="margin-bottom">
                   Fixed Grid
@@ -64,13 +65,25 @@
                 </div>
               </f7-link>
             </f7-col>
+            <f7-col width="30" class="elevation-2 elevation-hover-6 elevation-pressed-1" style="background-color: var(--f7-card-bg-color)">
+              <f7-link @click="setLayoutType('fixed', 'canvas')" class="flex-direction-column padding" style="color: var(--f7-theme-color-text-color)">
+                <f7-icon size="70px" f7="square_stack_3d_up" />
+                <div class="margin-bottom">
+                  Canvas
+                </div>
+                <div class="margin-top">
+                  Create a canvas-like page for a specific screen size, with pixel positionning of widgets. Suitable for e.g. wall mounted tablets.
+                </div>
+              </f7-link>
+            </f7-col>
           </f7-row>
         </f7-block>
 
         <oh-layout-page class="layout-page" v-else-if="ready" :context="context" :key="pageKey" :style="page.config.style"
                         @add-block="addBlock"
                         @add-masonry="addMasonry"
-                        @add-grid-item="addGridItem" />
+                        @add-grid-item="addGridItem"
+                        @add-canvas-item="addCanvasItem" />
       </f7-tab>
       <f7-tab id="code" @tab:show="() => { this.currentTab = 'code' }" :tab-active="currentTab === 'code'">
         <editor v-if="currentTab === 'code'" :style="{ opacity: previewMode ? '0' : '' }" class="page-code-editor" mode="application/vnd.openhab.uicomponent+yaml?type=layout" :value="pageYaml" @input="onEditorInput" />
@@ -148,7 +161,8 @@ export default {
         config: {},
         slots: {
           default: [],
-          grid: []
+          grid: [],
+          canvas: []
         }
       },
       addFromModelContext: {},
@@ -273,12 +287,15 @@ export default {
       this.addFromModelContext = {}
       this.forceUpdate()
     },
-    setLayoutType (layoutType) {
+    setLayoutType (layoutType, fixedType) {
       this.page.config.layoutType = layoutType
+      this.page.config.fixedType = fixedType
       if (layoutType === 'responsive') {
         this.page.slots.default = []
-      } else {
+      } else if (layoutType === 'fixed' && fixedType === 'grid') {
         this.page.slots.grid = []
+      } else if (layoutType === 'fixed' && fixedType === 'canvas') {
+        this.page.slots.canvas = []
       }
       this.forceUpdate()
     },
@@ -300,7 +317,13 @@ export default {
     addGridItem (component) {
       component.slots['grid'].push({
         component: 'oh-grid-item',
-        config: { x: 5, y: 3, h: 2, w: 2 },
+        config: { x: 5, y: 3, h: 2, w: 2 }
+      })
+    },
+    addCanvasItem (component) {
+      component.slots['canvas'].push({
+        component: 'oh-canvas-item',
+        config: { x: 10, y: 10, h: 50, w: 50 },
         slots: { default: [] }
       })
       this.forceUpdate()
@@ -316,21 +339,24 @@ export default {
         config: this.page.config,
         blocks: this.page.slots.default,
         masonry: this.page.slots.masonry,
-        grid: this.page.slots.grid
+        grid: this.page.slots.grid,
+        canvas: this.page.slots.canvas
       })
     },
     fromYaml () {
       try {
         const updatedPage = YAML.parse(this.pageYaml)
-        if (updatedPage.config && updatedPage.config.layoutType && updatedPage.config.layoutType === 'fixed' &&
+        if (updatedPage.config && updatedPage.config.layoutType &&
+            updatedPage.config.layoutType === 'fixed' &&
            ((updatedPage.blocks && updatedPage.blocks.length) || (updatedPage.masonry && updatedPage.masonry.length))) {
-          throw new Error('Using blocks and masonry in fixed-size layouts is not possible')
+          throw new Error('Using blocks and masonry in fixed layouts is not possible')
         }
 
         this.$set(this.page, 'config', updatedPage.config)
         this.$set(this.page.slots, 'default', updatedPage.blocks)
         this.$set(this.page.slots, 'masonry', updatedPage.masonry)
         this.$set(this.page.slots, 'grid', updatedPage.grid)
+        this.$set(this.page.slots, 'canvas', updatedPage.canvas)
         this.forceUpdate()
         return true
       } catch (e) {
diff --git a/bundles/org.openhab.ui/web/src/pages/settings/pages/pagedesigner-mixin.js b/bundles/org.openhab.ui/web/src/pages/settings/pages/pagedesigner-mixin.js
index e935277f08..96b43e54cb 100644
--- a/bundles/org.openhab.ui/web/src/pages/settings/pages/pagedesigner-mixin.js
+++ b/bundles/org.openhab.ui/web/src/pages/settings/pages/pagedesigner-mixin.js
@@ -43,6 +43,8 @@ export default {
           pasteWidget: this.pasteWidget,
           moveWidgetUp: this.moveWidgetUp,
           moveWidgetDown: this.moveWidgetDown,
+          sendWidgetToBack: this.sendWidgetToBack,
+          bringWidgetToFront: this.bringWidgetToFront,
           removeWidget: this.removeWidget
         } : null,
         clipboardtype: this.clipboardType
@@ -285,18 +287,25 @@ export default {
     },
     moveWidgetUp (component, parentContext, slot = 'default') {
       let siblings = parentContext.component.slots[slot]
-      let pos = siblings.indexOf(component)
-      if (pos <= 0) return
-      siblings.splice(pos, 1)
-      siblings.splice(pos - 1, 0, component)
-      this.forceUpdate()
+      this.moveWidget(component, parentContext, slot, siblings.indexOf(component) - 1)
     },
     moveWidgetDown (component, parentContext, slot = 'default') {
+      let siblings = parentContext.component.slots[slot]
+      this.moveWidget(component, parentContext, slot, siblings.indexOf(component) + 1)
+    },
+    bringWidgetToFront (component, parentContext, slot = 'default') {
+      this.moveWidget(component, parentContext, slot, parentContext.component.slots[slot].length)
+    },
+    sendWidgetToBack (component, parentContext, slot = 'default') {
+      this.moveWidget(component, parentContext, slot, 0)
+    },
+    moveWidget (component, parentContext, slot = 'default', newPos) {
       let siblings = parentContext.component.slots[slot]
       let pos = siblings.indexOf(component)
-      if (pos >= siblings.length - 1) return
+      newPos = Math.max(0, Math.min(siblings.length, newPos))
+      if (pos === newPos) return
       siblings.splice(pos, 1)
-      siblings.splice(pos + 1, 0, component)
+      siblings.splice(newPos, 0, component)
       this.forceUpdate()
     },
     removeWidget (component, parentContext, slot = 'default') {