Any news on this?
I’m still missing some more color in my life
-
Floorplan Dashboard
-
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.
pimatic-google-calendar | pimatic-wmi | pimatic-snmp | pimatic-wakeonlan |
Like my work? Then consider a donation
Follow me: www.thorstenreichelt.de -
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.pimatic v0.9 has been released!
Support Pimatic and get some free stickers
Like us on Facebookmake it so !
-
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 functionYou 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/
-
yep, something like this would be a good start.
pimatic v0.9 has been released!
Support Pimatic and get some free stickers
Like us on Facebookmake it so !
-
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
"It always takes longer than you expect, even when you take into account Hofstadter's Law.", Hofstadter's Law
-
@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
pimatic v0.9 has been released!
Support Pimatic and get some free stickers
Like us on Facebookmake it so !
-
@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 -
any news?
is it possible to create pages, like FTUI (FHEM) or VIS (IoBroker)?
https://wiki.fhem.de/wiki/FHEM_Tablet_UIFHEM samples
https://blog.moneybag.de/wp-content/uploads/2015/11/WetterUI.jpg
http://www.juergenstechnikwelt.de/wp-content/uploads/2015/05/ftui_01.jpgIoBroker samples
https://lh3.googleusercontent.com/KPUumBeG8LLitV7VOxg763M_tnqFjBtMK1mUbbMI3NfDu56uNuYIsDQBwfN_GS3sf50=h900
http://uploads.tapatalk-cdn.com/20161015/ed0fe05bd623812a60359c77012c9e5f.jpg
https://iobroker.net:8080/vis.0/bluefox_ehome/wwEHome.png -
not natively yet. still searching for devs / volunteers that will implement this nice feature!
in the meantime you can check the share your gui thread
https://forum.pimatic.org/topic/6/share-your-gui/
there are some nice examples on how to create your own gui via api and som other tools
also there is the angular frontend plugin that creates a nice gui
https://pimatic.org/plugins/pimatic-angular-material-frontend/pimatic v0.9 has been released!
Support Pimatic and get some free stickers
Like us on Facebookmake it so !
-
And I remember the pimatic-customcss plugin
Maybe this is useful for you?pimatic v0.9 has been released!
Support Pimatic and get some free stickers
Like us on Facebookmake it so !
-
thx.
perhaps the best solution for me is a combination of pimatic and iobroker-vis.
i will try it. i like both.
but both of them are not a “eierlegende-wollmilch-sau”
-
If we can overcome some “problems” it would be do-able.
I might look into it soon but my hurdle is coffeescript.
I dont want to use socket.io method from this forum as it changes everything after you add a device.
Ofc, it has te be user friendly so we also need decent, easy software to create the floorplan and also the config should be easy for others to understand.
So probably AJAX with draggable div’s that save coordinates to a config.
Next is to see how to import the already made devices, maybe a tip anyone?
-
Maybe not as nice as the desired solution I realised a floorplan (with help of a colleque) in Pimatic where I can see which doors and windows are open and closed.
As you can see on the second floor there is a window open.
This is realised with a python script which changes the picture in a html file when doors or windows are opend ore closed.
The only backside is that you have to refresh the picture in Pimatic all the time to see the actual situation but for me that is not a problem.
The same way you could turn lights on and off.