Is there any progress in this topic. Sth. like this would be nice
-
Floorplan Dashboard
-
Actually not from our side (yet).
We’re still working on v0.9pimatic v0.9 has been released!
Support Pimatic and get some free stickers
Like us on Facebookmake it so !
-
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.
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”