Yes, been since 3.2, always new futures from snapshots to snapshots there are .
“Fixed layout” also has the support for this.
You can provide x and y coordinates
In case you want to stick with your existing layout, add the following to the page’s config section:
style:
--f7-card-margin-horizontal: 0px
--f7-block-padding-horizontal: 0px
Hi,
Thanks Oliver.
I’ve now upgraded to:
openHAB 3.2.0 Build #2595
Your suggestion (below) fixes horizontal, but not vertical in my page:
style:
--f7-card-margin-horizontal: 0px
--f7-block-padding-horizontal: 0px
Adding:
--f7-card-margin-vertical: 0px
--f7-block-margin-vertical: 0px
Makes no difference.
Utlising the new Canvas layout I get this:
config:
label: PanelV2DEV3
sidebar: true
layoutType: fixed
fixedType: canvas
style:
height: 900px
width: 1600px
blocks: []
masonry: null
grid: []
canvas:
- component: oh-canvas-layer
config: {}
slots:
default:
- component: oh-canvas-item
config:
x: 0
y: 0
h: 900
w: 1600
slots:
default:
- component: widget:PanelV2DEV
config: {}
I’m not sure what to try next - is there any documentation for these new features?
Thanks,
Richie
reduces the space by 16px.
No idea what else can be done.
In Chrome hit F12 and try to find the css style which creates the rest of the space
This is an error, if a widget has a 0 at x / y, it will be moved to the next grid value.
you simply have to set x / y to 1 in code mode.
Hi,
Ah, so my mistake was assuming it was starting at 0, when it starts at 1?
I will look at that tonight.
Thanks,
Richie
Hi Oliver,
I did that whilst trying to identify the problem and it seemed to be in the same div element that the other css items on this post were being added.
Thanks,
Richie
Hi Tallman,
Ok, so adjusted some settings like so:
config:
label: PanelV2DEV3
sidebar: true
hideNavbar: true
layoutType: fixed
fixedType: canvas
blocks: null
masonry: null
grid: null
canvas:
- component: oh-canvas-layer
config: {}
slots:
default:
- component: oh-canvas-item
config:
x: 1
y: 1
h: 1200
w: 1920
slots:
default:
- component: widget:PanelV2DEV
config: {}
Which is better, but still has space to the left:
This space is in both Edge and Chrome, full and “normal” screen.
When using the Developer Tools (F12) I can see the elements broken down like this:
class=“oh-canvas-layout”
<div class="oh-canvas-layout-container" style="user-select: auto; width: 1280px; height: 720px; transform: scale(1); text-align: center; position: relative; --oh-canvas-item-box-shadow:0px 0px 4px 2px #444; --oh-canvas-item-svg-shadow:drop-shadow(0px 0px 4px #444); --oh-canvas-item-text-shadow:#444 0px 0px 4px;">
is this:
Within that div is this div:
<div style="height: inherit; width: inherit; position: absolute; top: 0px; left: 0px;"><img class="oh-canvas-background">
I’m not sure whether it’s something I’m doing wrong (very likely) or a bug.
Thanks,
Richie
Hi,
Ok, so I’ve now got it working.
I just needed to tweak the screenwidth and width values until the panel would correctly fit on my tablet screen:
config:
label: PanelV2DEV3
screenWidth: 1280 <== this value
screenHeight: 800
scale: false
sidebar: true
hideNavbar: true
layoutType: fixed
fixedType: canvas
blocks: null
masonry: null
grid: null
canvas:
- component: oh-canvas-layer
config: {}
slots:
default:
- component: oh-canvas-item
config:
x: 1
y: 1
h: 800
w: 1240 <== this value
slots:
default:
- component: widget:PanelV2DEV
config: {}
Thanks for your help,
Richie
@tarag I see @Confectrician merged the PR but unless I’m mistaken it’s still missing some explanation about the layers feature.
as 3.2 will be released in probably less than a month now it would be nice to have it in the docs by then!
Yes, I have some plans to make a canvas layout by then. Hopefully I’ll have time and write some docs at the same time.
Hi, Is there any news on this feature? I’m using 3.2.0 but I’m not able to remove the white external border in cavass layout in any way, I’m trying everything, the only alternative for a tablet is to use Habpanel, buit I really would like to use mainui instead. Thanks in advance.
This is what I’m talking about:
Me too, i dont know how to remove this border.
please post your yaml code for the page
Hi, this is the code, it’s nothing more than create a new page and choose a fixed canvass layout:
config:
layoutType: fixed
fixedType: canvas
label: test_CanvassPage
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-label-card
config:
title: Test Label Card
footer: Footer
action: command
actionCommand: MyCommand
item: myItem
Hello there,
same here. Don’t know how to remove the white border, too.
Running Openhab 3.2.0
Regards.
I have been using this full screen to act like a ‘photo frame’. There may be a better way but this one seems to work for me. This is for a specific screen resolution 1920x1080
config:
layoutType: fixed
screenWidth: 1920
screenHeight: 1080
scale: false
hideNavbar: true
hideSidebarIcon: true
showFullscreenIcon: false
colNum: 1
margin: 0
label: Main Photo Page
sidebar: true
blocks: []
masonry: null
grid:
- component: oh-grid-item
config:
x: 0
y: 0
h: 1
w: 1
slots:
default:
- component: widget:widget_photoframe
canvas: null
I believe that you have to resort to css to get rid of that border on the fixed layout pages. Add a stylesheet
parameter like this to the page config:
config:
layoutType: fixed
fixedType: canvas
label: Wall Mount
sidebar: true
stylesheet: |
.oh-canvas-layout-container div img {
visibility: hidden;
}