canvas layout page - scaling issue in portrait mode

[Larsen-Locke]

The problem

In the new canvas layout page when using the scaling option the canvas placement sometimes does not work as expected, e.g. in portrait mode the canvas is placed wrong (To be fair: There's already a warning that styling issues may occur when using the scaling option)

Here you see that the canvas is placed on the right side and you have to pan (although scaling is on). If it would work properly it would just fit the screen.

Your suggestion

One thing I saw in the code is that scaling is computed based on the width of the image.
I think it would be better to consider the width/height-ratio:
main...Larsen-Locke:openhab-webui:main

If I'm not wrong I would start the PR to correct the scaling.

Your environment

runtimeInfo:
version: 3.4.0.M1
buildString: Milestone Build
locale: de-DE
systemInfo:
configFolder: /etc/openhab
userdataFolder: /var/lib/openhab
logFolder: /var/log/openhab
javaVersion: 11.0.16
javaVendor: Raspbian
osName: Linux
osVersion: 5.10.103-v7l+
osArchitecture: arm
availableProcessors: 4
freeMemory: 37369608
totalMemory: 234881024
startLevel: 100
bindings:
-...
clientInfo:
device:
ios: false
android: true
androidChrome: true
desktop: false
iphone: false
ipod: false
ipad: false
edge: false
ie: false
firefox: false
macos: false
windows: false
cordova: false
phonegap: false
electron: false
nwjs: false
os: android
osVersion: "12"
webView: false
webview: false
standalone: false
pixelRatio: 2.75
prefersColorScheme: light
isSecureContext: false
locationbarVisible: true
menubarVisible: true
navigator:
cookieEnabled: true
deviceMemory: N/A
hardwareConcurrency: 8
language: de-DE
languages:
- de-DE
- en-DE
- de
- en-US
- en
onLine: true
platform: Linux armv8l
screen:
width: 393
height: 851
colorDepth: 24
support:
touch: true
pointerEvents: true
observer: true
passiveListener: true
gestures: false
intersectionObserver: true
themeOptions:
dark: dark
filled: true
pageTransitionAnimation: disabled
bars: light
homeNavbar: default
homeBackground: default
expandableCardAnimation: default
userAgent: Mozilla/5.0 (Linux; Android 12; Pixel 4a) AppleWebKit/537.36 (KHTML,
like Gecko) Chrome/104.0.0.0 Mobile Safari/537.36
timestamp: 2022-08-23T15:20:16.505Z

[tarag]

I have not really used the scaling option so I probably did not encounter your issue. Your correction seems spot-on. I see no reason why it wouldn't be merged if you submit a PR.

[Larsen-Locke]

I see no reason why it wouldn't be merged if you submit a PR.

Thank you for your reply.
I wanted to test before I start a PR. I guess I'm doing something wrong although I tried to follow the doc. Maybe you could give me a small hint for my first attempt in the ui.

• I forked the repo
• cd to web folder (for me /opt/openhab-webui-main/bundles/org.openhab.ui/web)
• npm install and npm start (tried with user openhabian and root; versions of npm and node are correct).
• Messages look good ("project is running at http://localhost:8082... [tons of messages but no errors]

Entrypoint main [big] = js/app.js
[1] multi (webpack)-dev-server/client?http://localhost:8082 (webpack)/hot/dev-server.js ./src/js/app.js 52 bytes {main} [built]
[./node_modules/framework7-vue/framework7-vue.esm.bundle.js] 13.3 KiB {main} [built]
[./node_modules/framework7/css/framework7.bundle.css] 1.15 KiB {main} [built][./node_modules/framework7/framework7-lite.esm.bundle.js] 5.36 KiB {main} [built]
[./node_modules/strip-ansi/index.js] 161 bytes {main} [built]
[./node_modules/vue-async-computed/dist/vue-async-computed.esm.js] 7.72 KiB {main} [built]
[./node_modules/vue-fullscreen/dist/vue-fullscreen.min.js] 6.11 KiB {main} [built]
[./node_modules/vue-masonry-css/dist/vue-masonry.es2015.js] 6.04 KiB {main} [built]
[./node_modules/vue/dist/vue.esm.js] 319 KiB {main} [built]
[./node_modules/vuetrend/dist/vue-trend.esm.js] 6.57 KiB {main} [built]
[./node_modules/webpack-dev-server/client/index.js?http://localhost:8082] (webpack)-dev-server/client?http://localhost:8082 4.29 KiB {main} [built]
[./node_modules/webpack-dev-server/client/overlay.js] (webpack)-dev-server/client/overlay.js 3.52 KiB {main} [built]
[./node_modules/webpack-dev-server/client/socket.js] (webpack)-dev-server/client/socket.js 1.53 KiB {main} [built]
[./node_modules/webpack/hot/dev-server.js] (webpack)/hot/dev-server.js 1.59 KiB {main} [built]
[./src/js/app.js] 2.18 KiB {main} [built]
    + 3533 hidden modules
Child html-webpack-plugin for "index.html":
     1 asset
    Entrypoint undefined = ./index.html
    [./node_modules/html-webpack-plugin/lib/loader.js!./src/index.html] 2.33 KiB {0} [built]
    [./node_modules/lodash/lodash.js] 531 KiB {0} [built]
    [./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 472 bytes {0} [built]
    [./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 497 bytes {0} [built]
ℹ ｢wdm｣: Compiled successfully.

But I could never call dev-server at the stated port (for me 8082).
Am I doing something completely wrong?
Just a small hint would be greatly appreciated cause I'm a little stuck.

[tarag]

From what you write, I assume your are using your openHAB raspi to run the development web ui and you try to display it in a browser on another system. By default the development UI (available on port 8082 in your case) does not allow external connections (anything else that the pi). You have to add the following host: '0.0.0.0' entry to webpack dev server options in bundles/org.openhab.ui/web/build/webpack.config.js:

  devServer: {
    hot: true,
    // open: true,
    // compress: true,
    contentBase: '/www/',
    disableHostCheck: true,
    host: '0.0.0.0',
...

If you restart the development server (nom start), you'll now see ℹ ｢wds｣: Project is running at http://0.0.0.0:8082/.

You can also easily run the development UI on another computer and proxy your running openhab install on another machine.

[Larsen-Locke]

Thank you so much. It works.