Floorplan Dashboard

---

Hey Guys!

This weekend i was talking to an old friend of mine. He has equipped his house with KNX Bus and a Gira Homeserver. After a little discussion and comparing prices, I was conviced by using Pimatic We can do lots of silimar stuff and do not need expensive hardware

The only thing that made me really really jealous was his floorplan layout. He can switch lights and outlets, control heatings, move shutters and so on.

What about implementing this into Pimatic!? Would be an awesome dashboard and a great project for web developers!!

Maybe something like this :

Using a background image and having buttons or switchpanels placed where you need them (as some kind of overlay maybe)

I made the floorplan as background image with http://www.floorplanner.com nice and easy.

Maybe it’s too early to implement and maybe it’s a lot work to do, but at the other hand it would improve Pimatic a lot and would be a great project.

Could that be a realistic request or an vain wish ?

@leader21 I think it is a must-have feature even though I won’t use it From earlier projects I know a lot of users like this floor plan type of user interface and it is also catchy whenever pimatic will be presented or reviewed.

I can imagine it is not that difficult to implement and there should be frameworks available which can be used rather than building from scratch.

That reminded me of this http://www.openremote.org/display/docs/Get+Started#GetStarted-Applicationexamples
Same floorplan but also picture, some movie examples on the website.

a floorplan is a very nice feature. a very good and freeware tool, to create pictures in 2D or 3D
is: Sweet Home 3D http://www.sweethome3d.com/

From delete (duplicate) topic;

my request: floorplans, like in FHEM
http://www.fhemwiki.de/wiki/FLOORPLAN

http://sourceforge.net/p/fhem/code/HEAD/tree/trunk/fhem/docs/fhem-floorplan-installation-guide.pdf?format=raw

Is there any progress in this topic. Sth. like this would be nice

Actually not from our side (yet).
We’re still working on v0.9

Any news on this?
I’m still missing some more color in my life

no more infos about this feature?

@noxx i’m trying something like this at the moment, because i’m also missing a feture liek this, but my tries are not presentable right now.

nice to hear

A floorplan is great. My concern is how people, with no photoshop/html/js skills can make their own floorplan. Im thinking of something else and if and when i get to it ill post my experience.

well depends on the implementation. in my above mockup there’s the link to www.floorplanner.com.
it is easy to use and you don’t need any skills to create the floorplan. the question is, how to combine pimatic and the floorplan.
well, let’s see if / when / however this will come up in the future.
i am sure, there will be a solution someday, but for that we need some skilled frontend designers i guess.

I also think the main point is the simple creation of a floor plan and the integration in Pimatic.

The presentation could be done in a kind of iFrame.
Then it is still about the Sensordaten switches etc. place in the floorplan-picture with link and function

You can use Layering Images:
https://www.webdesign.org/html-and-css/tutorials/layering-images.8470.html

You could use an “old-fashioned” HTML page with an image map in an i-frame.
The HTML-page loads the image as an image map. Of course you need to create links calling pimatic in some way but that would be an instant possibility already available right now.
There are even online tools on the internet to create these image maps.
(note search on “image map html”. Searching on “image map” only will give links how you create an image from a map which could be handy as well but not what we are looking for)

Ive tried to set something up.
The idea was to use a floorplan or any other image as a background.
I then made draggable div’s that use coordinates so when the browser resizes(or using a phone/tablet) it would stay in position.

It was a problem to let the browser remember the coordinates, LocalStorage was a quick solution (maybe use mysql?)

I then imported buttons through a config file:

//buttons
button1.text = LAMP1
URL = CURL command to toggle

That should not be too hard for people without any coding skill.

Then, just place the buttons and deactivate editing mode.

https://postimg.org/image/hy9w8qz5p/

https://postimg.org/image/v3peeut19/

https://postimg.org/image/oeiuyu7p9/

https://postimg.org/image/t1ox0lv25/

https://postimg.org/image/8vq0fgosd/

yep, something like this would be a good start.

I’m also thinking about creating a simple plugin which displays a background image with freely positionable divs.
Currently open questions for me.

• How to save the config? Extra json file? Pimatic config file(plugin config)?

• How to communicate with pimatic? I would use websockets.

• How to deliver the html? Additional express instance? Within instance of normal web front-end?

• Which widgets should be implemented first? Switch, presence, temperature…

• Which JavaScript widget framework to use? Currently this is the biggest question for me…

@thex said in Floorplan Dashboard:

How to save the config? Extra json file? Pimatic config file(plugin config)?

I’d prefer plugin configuration. May be you can use devices to configure the positionable divs. This way, you
couldd set the dash button without restarting pimatic.

How to communicate with pimatic? I would use websockets.

Yes, websockets is the best choice I think.

How to deliver the html? Additional express instance? Within instance of normal web front-end?

Via the pimatic HTTP/HTTPS endpoint. See pimatic-angular-material-frontend for example which can be used without conflicting with pimatic-mobile-frontend. May be you can even build upon pimatic-angular-material-frontend.

Which widgets should be implemented first? Switch, presence, temperature…

For the dashboard, I think presence, temperature should be among the first to implement.

Which JavaScript widget framework to use? Currently this is the biggest question for me…

angularJS or React
As said earlier, maybe you can base on pimatic-angular-material-frontend. However, pimatic-angular-material-frontend is based on angularJS version 1 as far I know. It is better to use angularJS version 2 these days.

https://www.npmjs.com/package/pimatic-angular-material-frontend

@thex said in Floorplan Dashboard:

• Which widgets should be implemented first? Switch, presence, temperature…

nice to hear that this request is being worked on. if you think about what you want to do with the floorplan, then i would say switches, shutters, weather / temp/hum, presence and variables device, dummy devices too and maybe alarm for the smoke detectors

@thex that would be great, but whats happens it come to scaling?
what happens on my mobile device? …with the divs and the image
will the screen be tiny or will everything explode?
im really curious about this project. good luck