{"id":47,"date":"2021-01-10T16:49:12","date_gmt":"2021-01-10T16:49:12","guid":{"rendered":"https:\/\/smarthome.bolte-online.net\/?p=47"},"modified":"2026-02-02T08:55:38","modified_gmt":"2026-02-02T07:55:38","slug":"floor-plan-in-openhab-3","status":"publish","type":"post","link":"https:\/\/smarthome.bolte.name\/?p=47","title":{"rendered":"floor plan in openHAB 3"},"content":{"rendered":"\n

So finally you don’t need 3rd party software to realize this kind of visualisation with OH. <\/p>\n\n\n\n

\"\"
Go to „Pages“ …<\/figcaption><\/figure>\n\n\n\n
\"\"
Select \"\" (+) in the lower right corner and select „Create floor plan“<\/figcaption><\/figure>\n\n\n\n
\"\"
In the „Design“ Tab you do the background configuration.<\/figcaption><\/figure>\n\n\n\n

Unfortunately there is now Upload for your background image here – you have to entry a URL. If you upload an image to ..\/openhab_conf\/html\/ <\/code>(in my docker install it’s \/opt\/openhab3\/openhab_conf\/html\/<\/code>) you can use the URL https:\/\/ip:port\/static\/floorplan.png<\/code> .<\/p>\n\n\n\n

When you start addings markers to your floor plan, use Ctrl-S to save it very often. In my case this was very buggy – especially with FireFox, Chromium went a bit better. Othervise things can get lost if you switch to Code view.<\/p>\n\n\n\n

\"\"
First you got to „Run mode“ in the lower right corner or hit Ctrl-R<\/figcaption><\/figure>\n\n\n\n

In Rzn mode you see your backgrund image and you’re able to place markes on it via „Add Marker +“ in the upper right corner. An new icon \"\" will appear. You can move it by mouse or click and „configure“ it. \"\"<\/p>\n\n\n\n

\"\"
In the marker settings you can choose an item to connect ist. If you like to show the state e.g. of the lamp, you can use the openHAB icon light by adding „oh:light“ as icon. If you activate „Icons depends ion state“, it will show if light is on or off in „TOGGLE“ mode.<\/figcaption><\/figure>\n\n\n\n

The Code looks like that:<\/p>\n\n\n\n

config:
label: Grundriss
imageUrl: http:\/\/192.168.0.84:8081\/static\/floorplan.png
<\/code> imageWidth: 1339
imageHeight: 1080
sidebar: true
backgroundColor: black
markers:
- component: oh-plan-marker
config:
name: Licht EG Arbeitszimmer
coords: 347.8965363437814,156.97770542341357
item: KNXGenericGroupAddress_LichtEGArbeitszimmer
iconUseState: true
icon: oh:light
action: toggle
actionItem: KNXGenericGroupAddress_LichtEGArbeitszimmer
actionCommand: TOGGLE
slots:
default: []<\/code><\/p>\n\n\n\n

So I placed markers on the floor plan in run mode and connected them to items in teh config GUI, everything else I did in Code view.<\/p>\n\n\n\n

\"\"
For temperature I wanted to show it alway on the pan, so I activated „tooltipPermanent“ as shown in the Code <\/figcaption><\/figure>\n\n\n\n
  - component: oh-plan-marker\n    config:\n      name: Temperatur Kinderzimmer\n      coords: 886.709316039385,44.863268966278405\n      item: FritzHeizungKinderzimmer_Temperatur\n      icon: oh:temperature\n      useTooltipAsLabel: false\n      tooltipPermanent: true\n    slots:\n      default: []<\/code><\/pre>\n\n\n\n
Of course there’s a lot more to do, but this is a good start. The next thing for me is sowing the plan on an Android tablet by default.<\/p>\n","protected":false},"excerpt":{"rendered":"
So finally you don’t need 3rd party software to realize this kind of visualisation with OH. Unfortunately there is now Upload for your background image here – you have to entry a URL. If you upload an image to ..\/openhab_conf\/html\/ (in my docker install it’s \/opt\/openhab3\/openhab_conf\/html\/) you can use the URL https:\/\/ip:port\/static\/floorplan.png . When you… floor plan in openHAB 3<\/span> weiterlesen<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8,3],"tags":[],"class_list":["post-47","post","type-post","status-publish","format-standard","hentry","category-openhab","category-smarthome","entry"],"yoast_head":"\nfloor plan in openHAB 3 - Smarthome and more<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/smarthome.bolte.name\/?p=47\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"floor plan in openHAB 3 - Smarthome and more\" \/>\n<meta property=\"og:description\" content=\"So finally you don’t need 3rd party software to realize this kind of visualisation with OH. Unfortunately there is now Upload for your background image here – you have to entry a URL. If you upload an image to ..\/openhab_conf\/html\/ (in my docker install it’s \/opt\/openhab3\/openhab_conf\/html\/) you can use the URL https:\/\/ip:port\/static\/floorplan.png . When you… floor plan in openHAB 3 weiterlesen\" \/>\n<meta property=\"og:url\" content=\"https:\/\/smarthome.bolte.name\/?p=47\" \/>\n<meta property=\"og:site_name\" content=\"Smarthome and more\" \/>\n<meta property=\"article:published_time\" content=\"2021-01-10T16:49:12+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-02-02T07:55:38+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/smarthome.bolte.name\/wp-content\/uploads\/2021\/01\/Screenshot_20210110_145740.png\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"4\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/smarthome.bolte.name\\\/?p=47#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/smarthome.bolte.name\\\/?p=47\"},\"author\":{\"name\":\"admin\",\"@id\":\"https:\\\/\\\/smarthome.bolte.name\\\/#\\\/schema\\\/person\\\/a103d6a52c795ca597d4c8325094865c\"},\"headline\":\"floor plan in openHAB 3\",\"datePublished\":\"2021-01-10T16:49:12+00:00\",\"dateModified\":\"2026-02-02T07:55:38+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/smarthome.bolte.name\\\/?p=47\"},\"wordCount\":314,\"commentCount\":1,\"image\":{\"@id\":\"https:\\\/\\\/smarthome.bolte.name\\\/?p=47#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/smarthome.bolte.name\\\/wp-content\\\/uploads\\\/2021\\\/01\\\/Screenshot_20210110_145740.png\",\"articleSection\":[\"openHAB\",\"Smarthome\"],\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/smarthome.bolte.name\\\/?p=47#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/smarthome.bolte.name\\\/?p=47\",\"url\":\"https:\\\/\\\/smarthome.bolte.name\\\/?p=47\",\"name\":\"floor plan in openHAB 3 - Smarthome and more\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/smarthome.bolte.name\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/smarthome.bolte.name\\\/?p=47#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/smarthome.bolte.name\\\/?p=47#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/smarthome.bolte.name\\\/wp-content\\\/uploads\\\/2021\\\/01\\\/Screenshot_20210110_145740.png\",\"datePublished\":\"2021-01-10T16:49:12+00:00\",\"dateModified\":\"2026-02-02T07:55:38+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/smarthome.bolte.name\\\/#\\\/schema\\\/person\\\/a103d6a52c795ca597d4c8325094865c\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/smarthome.bolte.name\\\/?p=47#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/smarthome.bolte.name\\\/?p=47\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/smarthome.bolte.name\\\/?p=47#primaryimage\",\"url\":\"https:\\\/\\\/smarthome.bolte.name\\\/wp-content\\\/uploads\\\/2021\\\/01\\\/Screenshot_20210110_145740.png\",\"contentUrl\":\"https:\\\/\\\/smarthome.bolte.name\\\/wp-content\\\/uploads\\\/2021\\\/01\\\/Screenshot_20210110_145740.png\",\"width\":258,\"height\":61},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/smarthome.bolte.name\\\/?p=47#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/smarthome.bolte.name\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"floor plan in openHAB 3\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/smarthome.bolte.name\\\/#website\",\"url\":\"https:\\\/\\\/smarthome.bolte.name\\\/\",\"name\":\"Smarthome and more\",\"description\":\"home assistant, openHAB, KNX, HUE\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/smarthome.bolte.name\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/smarthome.bolte.name\\\/#\\\/schema\\\/person\\\/a103d6a52c795ca597d4c8325094865c\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/8473a48dd3980e9656bb77325b9158044c07963af0f5852a7c3918537443e409?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/8473a48dd3980e9656bb77325b9158044c07963af0f5852a7c3918537443e409?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/8473a48dd3980e9656bb77325b9158044c07963af0f5852a7c3918537443e409?s=96&d=mm&r=g\",\"caption\":\"admin\"},\"sameAs\":[\"https:\\\/\\\/smarthome.bolte.name\"],\"url\":\"https:\\\/\\\/smarthome.bolte.name\\\/?author=1\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"floor plan in openHAB 3 - Smarthome and more","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/smarthome.bolte.name\/?p=47","og_locale":"de_DE","og_type":"article","og_title":"floor plan in openHAB 3 - Smarthome and more","og_description":"So finally you don’t need 3rd party software to realize this kind of visualisation with OH. Unfortunately there is now Upload for your background image here – you have to entry a URL. If you upload an image to ..\/openhab_conf\/html\/ (in my docker install it’s \/opt\/openhab3\/openhab_conf\/html\/) you can use the URL https:\/\/ip:port\/static\/floorplan.png . When you… floor plan in openHAB 3 weiterlesen","og_url":"https:\/\/smarthome.bolte.name\/?p=47","og_site_name":"Smarthome and more","article_published_time":"2021-01-10T16:49:12+00:00","article_modified_time":"2026-02-02T07:55:38+00:00","og_image":[{"url":"https:\/\/smarthome.bolte.name\/wp-content\/uploads\/2021\/01\/Screenshot_20210110_145740.png","type":"","width":"","height":""}],"author":"admin","twitter_card":"summary_large_image","twitter_misc":{"Verfasst von":"admin","Gesch\u00e4tzte Lesezeit":"4\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/smarthome.bolte.name\/?p=47#article","isPartOf":{"@id":"https:\/\/smarthome.bolte.name\/?p=47"},"author":{"name":"admin","@id":"https:\/\/smarthome.bolte.name\/#\/schema\/person\/a103d6a52c795ca597d4c8325094865c"},"headline":"floor plan in openHAB 3","datePublished":"2021-01-10T16:49:12+00:00","dateModified":"2026-02-02T07:55:38+00:00","mainEntityOfPage":{"@id":"https:\/\/smarthome.bolte.name\/?p=47"},"wordCount":314,"commentCount":1,"image":{"@id":"https:\/\/smarthome.bolte.name\/?p=47#primaryimage"},"thumbnailUrl":"https:\/\/smarthome.bolte.name\/wp-content\/uploads\/2021\/01\/Screenshot_20210110_145740.png","articleSection":["openHAB","Smarthome"],"inLanguage":"de","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/smarthome.bolte.name\/?p=47#respond"]}]},{"@type":"WebPage","@id":"https:\/\/smarthome.bolte.name\/?p=47","url":"https:\/\/smarthome.bolte.name\/?p=47","name":"floor plan in openHAB 3 - Smarthome and more","isPartOf":{"@id":"https:\/\/smarthome.bolte.name\/#website"},"primaryImageOfPage":{"@id":"https:\/\/smarthome.bolte.name\/?p=47#primaryimage"},"image":{"@id":"https:\/\/smarthome.bolte.name\/?p=47#primaryimage"},"thumbnailUrl":"https:\/\/smarthome.bolte.name\/wp-content\/uploads\/2021\/01\/Screenshot_20210110_145740.png","datePublished":"2021-01-10T16:49:12+00:00","dateModified":"2026-02-02T07:55:38+00:00","author":{"@id":"https:\/\/smarthome.bolte.name\/#\/schema\/person\/a103d6a52c795ca597d4c8325094865c"},"breadcrumb":{"@id":"https:\/\/smarthome.bolte.name\/?p=47#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/smarthome.bolte.name\/?p=47"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/smarthome.bolte.name\/?p=47#primaryimage","url":"https:\/\/smarthome.bolte.name\/wp-content\/uploads\/2021\/01\/Screenshot_20210110_145740.png","contentUrl":"https:\/\/smarthome.bolte.name\/wp-content\/uploads\/2021\/01\/Screenshot_20210110_145740.png","width":258,"height":61},{"@type":"BreadcrumbList","@id":"https:\/\/smarthome.bolte.name\/?p=47#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/smarthome.bolte.name\/"},{"@type":"ListItem","position":2,"name":"floor plan in openHAB 3"}]},{"@type":"WebSite","@id":"https:\/\/smarthome.bolte.name\/#website","url":"https:\/\/smarthome.bolte.name\/","name":"Smarthome and more","description":"home assistant, openHAB, KNX, HUE","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/smarthome.bolte.name\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Person","@id":"https:\/\/smarthome.bolte.name\/#\/schema\/person\/a103d6a52c795ca597d4c8325094865c","name":"admin","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/secure.gravatar.com\/avatar\/8473a48dd3980e9656bb77325b9158044c07963af0f5852a7c3918537443e409?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/8473a48dd3980e9656bb77325b9158044c07963af0f5852a7c3918537443e409?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/8473a48dd3980e9656bb77325b9158044c07963af0f5852a7c3918537443e409?s=96&d=mm&r=g","caption":"admin"},"sameAs":["https:\/\/smarthome.bolte.name"],"url":"https:\/\/smarthome.bolte.name\/?author=1"}]}},"_links":{"self":[{"href":"https:\/\/smarthome.bolte.name\/index.php?rest_route=\/wp\/v2\/posts\/47","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/smarthome.bolte.name\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/smarthome.bolte.name\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/smarthome.bolte.name\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/smarthome.bolte.name\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=47"}],"version-history":[{"count":2,"href":"https:\/\/smarthome.bolte.name\/index.php?rest_route=\/wp\/v2\/posts\/47\/revisions"}],"predecessor-version":[{"id":101,"href":"https:\/\/smarthome.bolte.name\/index.php?rest_route=\/wp\/v2\/posts\/47\/revisions\/101"}],"wp:attachment":[{"href":"https:\/\/smarthome.bolte.name\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=47"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/smarthome.bolte.name\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=47"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/smarthome.bolte.name\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=47"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}