Allow OH-Marker to provide width and height individually

stefan.hoehn · April 5, 2021, 4:28pm

Hi @ysc (Yannick),

I am trying to use the Markers to “illuminate” parts of a floorplan with self-designed oh custom icons to overlay them on the floor plan.

However the icons aren’t equal in width and height. For some reason the oh-marker was designed in a way that it doesn’t allow to set the size individually, so I digged in the source code and hoped I could supply something like [width, height] but it isn’t supported as the size is assigned to both height and width.

   <l-icon v-if="config.iconVisibility"
      :icon-size="[config.iconSize || 40, config.iconSize || 40]">
      <div v-if="config.useTooltipAsLabel" style="white-space: nowrap" :style="tooltipStyle">{{tooltip}}</div>
      <oh-icon v-else-if="config.icon && config.icon.indexOf('oh:') === 0" :icon="config.icon.split(':')[1]" :width="config.iconSize || 40" :height="config.iconSize || 40" :state="config.iconUseState ? state : undefined"/>
      <f7-icon v-else-if="config.icon" :color="config.iconColor" :size="config.iconSize || 40" :ios="config.icon" :md="config.icon" :aurora="config.icon"  />
    </l-icon >

I saw in git that you wrote that part of the code.
So I wonder if there is something that speaks against the idea to provide the dimensions individually like

<oh-icon v-else-if="config.icon && config.icon.indexOf('oh:') === 0" :icon="config.icon.split(':')[1]" :width="config.iconSizeWidth || 40" :height="config.iconSizeHeight|| 40" :state="config.iconUseState ? state : undefined"/>

If you would feel this to be an idea that could work I’d be happy try a change for that as a MR.

cheers
Stefan

ysc · April 5, 2021, 4:41pm

Ok but iconSize still has to be taken into account
i.e. config.iconSize || config.iconSizeWidth || 40
And the iconSizeWidth / iconSizeHeight should be made “advanced” as I believe in general square icons cover most common use cases.

stefan.hoehn · April 5, 2021, 5:04pm

Thanks Yannick,

I totally agree that providing squared markers are the standard, so iconWidth/iconHeight trumps iconSize trumps default(40)

“challenge accepted”. I do the best I can
Stefan

stefan.hoehn · April 6, 2021, 2:05pm

I started the development and therefore setup the environment locally on 3.1.0 M3. It turns out that without changing anything I get the following error in the console on version

openHAB 3.1.0.M3

Milestone Build

[Vue warn]: Error in mounted hook: "TypeError: Cannot read property 'component' of undefined"

found in

---> <OhIcon> at src/components/widgets/system/oh-icon.vue
       <F7ListItemContent>
         <F7ListItem>
           <F7List>
             <F7Col>
               <F7Block>
                 <F7Tab>
                   <F7Tabs>
                     <F7PageContent>
                       <F7Page>
                         <PlanEdit> at src/pages/settings/pages/plan/plan-edit.vue
                           <F7View>
                             <F7App>
                               <App> at src/components/app.vue
                                 <Root>
warn @ vue.esm.js?a026:628
logError @ vue.esm.js?a026:1893
globalHandleError @ vue.esm.js?a026:1888
handleError @ vue.esm.js?a026:1848
invokeWithErrorHandling @ vue.esm.js?a026:1871
callHook @ vue.esm.js?a026:4228
insert @ vue.esm.js?a026:3148
invokeInsertHook @ vue.esm.js?a026:6357
patch @ vue.esm.js?a026:6576
Vue._update @ vue.esm.js?a026:3957
updateComponent @ vue.esm.js?a026:4075
get @ vue.esm.js?a026:4488
run @ vue.esm.js?a026:4563
flushSchedulerQueue @ vue.esm.js?a026:4319
eval @ vue.esm.js?a026:1989
flushCallbacks @ vue.esm.js?a026:1915
Promise.then (async)
timerFunc @ vue.esm.js?a026:1942
nextTick @ vue.esm.js?a026:1999
queueWatcher @ vue.esm.js?a026:4411
update @ vue.esm.js?a026:4553
notify @ vue.esm.js?a026:739
reactiveSetter @ vue.esm.js?a026:1064
set @ vue.esm.js?a026:1086
updateWidgetConfig @ pagedesigner-mixin.js?ae7b:173
onceHandler @ events-class.js?8085:27
eval @ events-class.js?8085:79
eval @ events-class.js?8085:78
emit @ events-class.js?8085:72
updateWidgetConfig @ widget-config-popup.vue?eeb2:55
invokeWithErrorHandling @ vue.esm.js?a026:1863
invoker @ vue.esm.js?a026:2188
invokeWithErrorHandling @ vue.esm.js?a026:1863
Vue.$emit @ vue.esm.js?a026:3897
eval @ vue-component-dispatch-event.js?56bc:4
eval @ vue-component-dispatch-event.js?56bc:3
dispatchEvent @ link.js?1477:277
onClick @ link.js?1477:273
vue.esm.js?a026:1897 TypeError: Cannot read property 'component' of undefined
    at VueComponent.mounted (widget-mixin.js?8940:73)
    at invokeWithErrorHandling (vue.esm.js?a026:1863)
    at callHook (vue.esm.js?a026:4228)
    at Object.insert (vue.esm.js?a026:3148)
    at invokeInsertHook (vue.esm.js?a026:6357)
    at VueComponent.patch [as __patch__] (vue.esm.js?a026:6576)
    at VueComponent.Vue._update (vue.esm.js?a026:3957)
    at VueComponent.updateComponent (vue.esm.js?a026:4075)
    at Watcher.get (vue.esm.js?a026:4488)
    at Watcher.run (vue.esm.js?a026:4563)
logError @ vue.esm.js?a026:1897
globalHandleError @ vue.esm.js?a026:1888
handleError @ vue.esm.js?a026:1848
invokeWithErrorHandling @ vue.esm.js?a026:1871
callHook @ vue.esm.js?a026:4228
insert @ vue.esm.js?a026:3148
invokeInsertHook @ vue.esm.js?a026:6357
patch @ vue.esm.js?a026:6576
Vue._update @ vue.esm.js?a026:3957
updateComponent @ vue.esm.js?a026:4075
get @ vue.esm.js?a026:4488
run @ vue.esm.js?a026:4563
flushSchedulerQueue @ vue.esm.js?a026:4319
eval @ vue.esm.js?a026:1989
flushCallbacks @ vue.esm.js?a026:1915
Promise.then (async)
timerFunc @ vue.esm.js?a026:1942
nextTick @ vue.esm.js?a026:1999
queueWatcher @ vue.esm.js?a026:4411
update @ vue.esm.js?a026:4553
notify @ vue.esm.js?a026:739
reactiveSetter @ vue.esm.js?a026:1064
set @ vue.esm.js?a026:1086
updateWidgetConfig @ pagedesigner-mixin.js?ae7b:173
onceHandler @ events-class.js?8085:27
eval @ events-class.js?8085:79
eval @ events-class.js?8085:78
emit @ events-class.js?8085:72
updateWidgetConfig @ widget-config-popup.vue?eeb2:55
invokeWithErrorHandling @ vue.esm.js?a026:1863
invoker @ vue.esm.js?a026:2188
invokeWithErrorHandling @ vue.esm.js?a026:1863
Vue.$emit @ vue.esm.js?a026:3897
eval @ vue-component-dispatch-event.js?56bc:4
eval @ vue-component-dispatch-event.js?56bc:3
dispatchEvent @ link.js?1477:277
onClick @ link.js?1477:273

With that simple floorplan

config:
  imageUrl: /static/Erdgeschoss-blank.svg
  label: floor
  backgroundColor: black
markers:
  - component: oh-plan-marker
    config:
      name: New Marker
      icon: oh:light
      iconUseState: true
    slots:
      default: []

which points to

in widget-mixin.js

Hence, it complains about a missing stylesheet configuration in the component (oh-plan-page and others).

Running the same on

openHAB 3.1.0

Build #2243

I don’t get that problem (note: replacing the imageUrl with something else doesn’t make a difference).

Any idea how I can track down the root cause of that error? I just want to make sure I don’t produce issues with my changes, so I want to know where this comes from before I even start (actually I had started already and first thought I had caused it so I stashed everything but the problem stayed on a clean check out).

ysc · April 6, 2021, 2:51pm

This appears to be an already existing unrelated bug.

stefan.hoehn · April 7, 2021, 11:30am

Hi Yannick,

I made it. Not really a huge commit but at least my first one in the UI

I haven’t created a MR yet because I forgot to put it onto a branch , so I wanted to ask you if that is still okay?

You can have a first glimpse here:

Here is an example of what is possible with that change:

wide-marker-opt

Merge Request: As soon as you give it a go I will create a Merge Request.
Deploying the new version

I would like to deploy my own version on my production system:
I built the project resulting into org.openhab.ui-3.1.0-SNAPSHOT.jar

In general can I just copy it to the addons folder replacing the current one?
Is this related to the following bundle “195 │ Active │ 80 │ 3.0.1 │ openHAB UI :: Bundles :: Main UI” and should this be stopped first?
As you can see I am on 3.0.1 which is the stable release (I think). Do you recommend to upgrade to the milestone release 3.1.0 M3 via openhabian-config?

Stefan

ysc · April 7, 2021, 12:07pm

The changes look good!

It’s easier to do in the console with bundle:update org.openhab.ui file:/<location> or even bundle:update org.openhab.ui https://<location>
(practical when you let the build server produce the binary for you i.e.
bundle:update org.openhab.ui https://ci.openhab.org/job/PR-openHAB-WebUI/lastSuccessfulBuild/artifact/bundles/org.openhab.ui/target/org.openhab.ui-3.1.0-SNAPSHOT.jar).

No need to restart openHAB in this case but I believe it will revert to the previous version if you restart/empty the cache. It also might not work since you have different versions.

stefan.hoehn · April 7, 2021, 12:10pm

Ok, great.

again I learned something new (bundle:update) !

So, is it okay if I do the MR without creating a branch?

ysc · April 7, 2021, 12:11pm

Yes. The burden will be on you if you want to create more if you don’t realign your main branch to the upstream.

stefan.hoehn · April 7, 2021, 12:27pm

Sure, next time I will definitely make sure I create a branch.

stefan.hoehn · April 8, 2021, 7:48am

When running node generate.js in the docs/components/src it in “/openhab-webui/bundles/org.openhab.ui/doc/components/src” I get the following error:

..../openhab-webui/bundles/org.openhab.ui/doc/components/src/generate.js:1
import fs from 'fs'
^^

SyntaxError: Unexpected identifier
at Module._compile (internal/modules/cjs/loader.js:723:23)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
at Module.load (internal/modules/cjs/loader.js:653:32)
at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
at Function.Module._load (internal/modules/cjs/loader.js:585:3)
at Function.Module.runMain (internal/modules/cjs/loader.js:831:12)
at startup (internal/bootstrap/node.js:283:19)
at bootstrapNodeJSCore (internal/bootstrap/node.js:623:3)

Any idea, why? maybe too old node version (v10.19.0) ?

ysc · April 8, 2021, 5:04pm

Hmm, maybe. If you want you can also carefully add the parameters to the doc manually. They will be adjusted next time the script is run anyways.

stefan.hoehn · April 10, 2021, 5:42am

I was able to update node to v14.16.1 and fortunately that did the trick.

stefan.hoehn · April 10, 2021, 6:02am

I didn’t dare yet to go this way because I wouldn’t have known how to rollback if something went wrong (which eventually did), so I went the old-fashioned way to copy the jar to the addons folder. Note that it doesn’t make a different whether 194 is stopped (“resolved”) or not.

161 │ Active    │  80 │ 3.1.0.M3                │ openHAB Core :: Bundles :: UI REST Interface
191 │ Active    │  80 │ 3.1.0.M3                │ openHAB Core :: Bundles :: UI
192 │ Active    │  80 │ 3.1.0.M3                │ openHAB Core :: Bundles :: UI Icon Support
194 │ Active    │  80 │ 3.1.0.M3                │ openHAB UI :: Bundles :: Main UI
230 │ Active    │  80 │ 3.1.0.M3                │ openHAB UI :: Bundles :: Basic UI
231 │ Active    │  80 │ 3.1.0.M3                │ openHAB UI :: Bundles :: HABPanel UI
232 │ Active    │  80 │ 3.1.0.M3                │ openHAB UI :: Bundles :: Icon Set :: Classic
234 │ Installed │  80 │ 3.1.0.202104071037      │ openHAB UI :: Bundles :: Main UI

Error while starting bundle: file:/usr/share/openhab/addons/org.openhab.ui-3.1.0-SNAPSHOT.jar

org.osgi.framework.BundleException: Could not resolve module: org.openhab.ui [233]

  Unresolved requirement: Import-Package: org.osgi.framework; version="[1.9.0,2.0.0)"

Would the update method you described above work differently?
What if the update doesn’t work either? Is there a mechanism to rollback the bundle update to the installed bundle or do I just “uninstall” and it reverts back to the old one?
Any idea why this dependency is missing?