Frontend to mimic iOS 10 and Home.app Topic is solved

Post Reply
sandurz
Posts: 15
Joined: Thursday 28 July 2016 16:52
Target OS: Windows
Domoticz version:
Contact:

Frontend to mimic iOS 10 and Home.app

Post by sandurz » Sunday 07 August 2016 18:49

INSTALL HERE: https://github.com/andrewatwood/homeAppFrontend

LATEST DEMO (as of 9/20/16): https://streamable.com/iis1


Was looking for a portfolio project and decided to recreate the Apple's new Home app as a web frontend. Domoticz will be the first compatible system so I'll be posting updates here.

https://streamable.com/zkcp - a demo of where I am here in the early stages. Non-functional but working on the layout and aesthetics.
http://imgur.com/a/APJyu - here's what the main screen looks like in the actual app. I'll be including that overall status screen which I'm a big fan of.
Last edited by sandurz on Tuesday 20 September 2016 22:51, edited 2 times in total.

jadijkstra2000
Posts: 132
Joined: Monday 26 May 2014 10:18
Target OS: Raspberry Pi
Domoticz version:
Contact:

Re: Frontend to mimic iOS 10 and Home.app

Post by jadijkstra2000 » Sunday 07 August 2016 22:13

Nice!

Patrick
Posts: 29
Joined: Friday 01 August 2014 23:40
Target OS: Raspberry Pi
Domoticz version: 3.5877
Location: The Netherlands
Contact:

Re: Frontend to mimic iOS 10 and Home.app

Post by Patrick » Sunday 07 August 2016 22:18

Very Nice!!!
Can't wait to see it in action :D :lol:

Holland
Posts: 317
Joined: Friday 12 July 2013 13:53
Target OS: Raspberry Pi
Domoticz version: Beta Ch
Location: The Netherlands
Contact:

Re: Frontend to mimic iOS 10 and Home.app

Post by Holland » Sunday 07 August 2016 22:38

Looks very good. Looking forward to test it.

sandurz
Posts: 15
Joined: Thursday 28 July 2016 16:52
Target OS: Windows
Domoticz version:
Contact:

Re: Frontend to mimic iOS 10 and Home.app

Post by sandurz » Wednesday 10 August 2016 15:26

Awesome I'll keep everyone posted!

Latest demo: https://streamable.com/0jh2
Here's where I'm at right now: functioning support for basic Switch devices grouped into Rooms using Roomplan, and Scenes. Scenes in Homekit aren't tied to any room, they just show up wherever they're relevant, so that's what I did here. Scenes show up in any room where a device controlled by that scene is present. Like the "All Off" scene - it contains every device and has them set to Off, so any room you're in has that scene visible.

And the status of scenes in the app doesn't necessarily reflect the status of that exact Scene in Domoticz - instead of only allowing one scene to be On at a given time, any scene that has its conditions met will display as 'On'.

Gonna start doing some basic graphics work soon, and then dimmer support to follow. Along the way I'll be adding in live updates from the Domoticz server - right now it only syncs any server-side changes on reload.

sandurz
Posts: 15
Joined: Thursday 28 July 2016 16:52
Target OS: Windows
Domoticz version:
Contact:

Re: Frontend to mimic iOS 10 and Home.app

Post by sandurz » Wednesday 10 August 2016 15:35

And a little preview of how it looks on big ole tablet screens: http://imgur.com/a/APAAW

User avatar
Minglarn
Posts: 144
Joined: Friday 21 August 2015 19:27
Target OS: Raspberry Pi
Domoticz version: beta
Location: Stockholm / Sweden
Contact:

Re: Frontend to mimic iOS 10 and Home.app

Post by Minglarn » Wednesday 10 August 2016 17:29

Nice and clean!
Keep it that way as i'm looking forward to install and use it!

Keep up the good work!
When you eliminate the impossible, whatever remains, however improbable, must be the truth.” -Spock in Star Trek VI

User avatar
Dynamic
Posts: 213
Joined: Friday 12 July 2013 14:50
Target OS: -
Domoticz version:
Location: Enschede
Contact:

Re: Frontend to mimic iOS 10 and Home.app

Post by Dynamic » Thursday 11 August 2016 10:22

Really, really cool. Would love to have this on a display on my wall. Design is clean and simple.

Will it be possible to change the background / colors according to the sunrise/sunset? In the evening I don't want the tablet to be a 'lighthouse'.

sandurz
Posts: 15
Joined: Thursday 28 July 2016 16:52
Target OS: Windows
Domoticz version:
Contact:

Re: Frontend to mimic iOS 10 and Home.app

Post by sandurz » Thursday 11 August 2016 15:56

Dynamic wrote:Really, really cool. Would love to have this on a display on my wall. Design is clean and simple.

Will it be possible to change the background / colors according to the sunrise/sunset? In the evening I don't want the tablet to be a 'lighthouse'.
GREAT feature idea. Will definitely implement that.

sandurz
Posts: 15
Joined: Thursday 28 July 2016 16:52
Target OS: Windows
Domoticz version:
Contact:

Re: Frontend to mimic iOS 10 and Home.app

Post by sandurz » Saturday 13 August 2016 0:49

Ready for some testing for those interested! Basic switch and dimmer support is fully functional.

Just follow the instructions here and let me know how it goes: https://github.com/andrewatwood/homeAppFrontend.git

Since the actual app is heavily based on rooms, this is too. Will put any devices not assigned to a Roomplan into 'Default Room' but organizing all your rooms will yield the best results.

Holland
Posts: 317
Joined: Friday 12 July 2013 13:53
Target OS: Raspberry Pi
Domoticz version: Beta Ch
Location: The Netherlands
Contact:

Re: Frontend to mimic iOS 10 and Home.app

Post by Holland » Saturday 13 August 2016 10:36

Hi Sandurz,

Thanks for publishing the first test version.

Did a test, but it displays only a white page. Page title is called Home Mockup.

I do see activity on the server side. Have a look to the log below, maybe you can point me to the right direction;

Did add an ip address for the Domoticz server.

Second, would it be possible to make the port number 3000 configurable. Since I have already something running on port 3000. Off course I did shut down that daemon before starting homeAppFrontend

Code: Select all

[email protected]:~/homeAppFrontend$ sudo nano config.json
[email protected]:~/homeAppFrontend$ sudo npm start

> [email protected] start /home/pi/homeAppFrontend
> node ./bin/www

Server accessible on port 3000
GET / 200 3722.118 ms - 3834
GET /css/main.css 304 25.186 ms - -
GET /css/font-awesome.min.css 304 7.685 ms - -
GET /javascripts/min/app-min.js 304 8.517 ms - -
GET /images/icons/list.svg 304 4.183 ms - -
GET /images/icons/home.svg 304 9.219 ms - -
GET /images/icons/home-inactive.svg 304 1.823 ms - -
GET /images/rooms/default.png 304 1.784 ms - -
GET / 304 783.519 ms - -
GET /css/main.css 304 6.491 ms - -
GET /css/font-awesome.min.css 304 7.554 ms - -
GET /javascripts/min/app-min.js 304 8.284 ms - -
GET /images/icons/list.svg 304 19.588 ms - -
GET /images/icons/home.svg 304 16.362 ms - -
GET /images/icons/home-inactive.svg 304 7.708 ms - -
GET /images/rooms/default.png 304 1.900 ms - -
GET /bridge/ecus/rrc/uiStatus 500 727.383 ms - 1726
TypeError: /home/pi/homeAppFrontend/views/layout.jade:10
    8|     link(rel='stylesheet', href='/css/main.css')
    9|     link(rel='stylesheet', href='/css/font-awesome.min.css')
  > 10|     if !config.pretty
    11|       style.
    12|         .button, .action {
    13|           -webkit-backdrop-filter: none !important;

Cannot read property 'pretty' of undefined
    at eval (eval at <anonymous> (/home/pi/homeAppFrontend/node_modules/jade/lib/index.js:218:8), <anonymous>:44:13)
    at eval (eval at <anonymous> (/home/pi/homeAppFrontend/node_modules/jade/lib/index.js:218:8), <anonymous>:231:22)
    at res (/home/pi/homeAppFrontend/node_modules/jade/lib/index.js:219:38)
    at Object.exports.renderFile (/home/pi/homeAppFrontend/node_modules/jade/lib/index.js:380:38)
    at Object.exports.renderFile (/home/pi/homeAppFrontend/node_modules/jade/lib/index.js:370:21)
    at View.exports.__express [as engine] (/home/pi/homeAppFrontend/node_modules/jade/lib/index.js:417:11)
    at View.render (/home/pi/homeAppFrontend/node_modules/express/lib/view.js:126:8)
    at tryRender (/home/pi/homeAppFrontend/node_modules/express/lib/application.js:639:10)
    at EventEmitter.render (/home/pi/homeAppFrontend/node_modules/express/lib/application.js:591:3)
    at ServerResponse.render (/home/pi/homeAppFrontend/node_modules/express/lib/response.js:961:7)
GET / 200 446.203 ms - 3834
GET /css/main.css 304 2.131 ms - -
GET /css/font-awesome.min.css 304 1.843 ms - -
GET /images/icons/list.svg 304 2.081 ms - -
GET /images/icons/home.svg 304 5.491 ms - -
GET /images/icons/home-inactive.svg 304 5.035 ms - -
GET /javascripts/min/app-min.js 304 6.050 ms - -
GET /images/rooms/default.png 304 1.837 ms - -
GET /fonts/San%20Francisco%20Display%20Regular.ttf 304 7.065 ms - -
GET /fonts/San%20Francisco%20Display%20Bold.ttf 304 8.481 ms - -
GET /images/icons/list.svg 304 34.100 ms - -
GET /images/icons/home.svg 304 34.528 ms - -
GET /images/icons/home-inactive.svg 304 33.455 ms - -
GET /fonts/fontawesome-webfont.woff?v=4.6.3 200 50.754 ms - 90412
GET /favicon.ico 500 468.846 ms - 1726
TypeError: /home/pi/homeAppFrontend/views/layout.jade:10
    8|     link(rel='stylesheet', href='/css/main.css')
    9|     link(rel='stylesheet', href='/css/font-awesome.min.css')
  > 10|     if !config.pretty
    11|       style.
    12|         .button, .action {
    13|           -webkit-backdrop-filter: none !important;

Cannot read property 'pretty' of undefined
    at eval (eval at <anonymous> (/home/pi/homeAppFrontend/node_modules/jade/lib/index.js:218:8), <anonymous>:44:13)
    at eval (eval at <anonymous> (/home/pi/homeAppFrontend/node_modules/jade/lib/index.js:218:8), <anonymous>:231:22)
    at res (/home/pi/homeAppFrontend/node_modules/jade/lib/index.js:219:38)
    at Object.exports.renderFile (/home/pi/homeAppFrontend/node_modules/jade/lib/index.js:380:38)
    at Object.exports.renderFile (/home/pi/homeAppFrontend/node_modules/jade/lib/index.js:370:21)
    at View.exports.__express [as engine] (/home/pi/homeAppFrontend/node_modules/jade/lib/index.js:417:11)
    at View.render (/home/pi/homeAppFrontend/node_modules/express/lib/view.js:126:8)
    at tryRender (/home/pi/homeAppFrontend/node_modules/express/lib/application.js:639:10)
    at EventEmitter.render (/home/pi/homeAppFrontend/node_modules/express/lib/application.js:591:3)
    at ServerResponse.render (/home/pi/homeAppFrontend/node_modules/express/lib/response.js:961:7)
GET /bridge/ecus/rrc/uiStatus 500 501.025 ms - 1726
TypeError: /home/pi/homeAppFrontend/views/layout.jade:10
    8|     link(rel='stylesheet', href='/css/main.css')
    9|     link(rel='stylesheet', href='/css/font-awesome.min.css')
  > 10|     if !config.pretty
    11|       style.
    12|         .button, .action {
    13|           -webkit-backdrop-filter: none !important;

Cannot read property 'pretty' of undefined
    at eval (eval at <anonymous> (/home/pi/homeAppFrontend/node_modules/jade/lib/index.js:218:8), <anonymous>:44:13)
    at eval (eval at <anonymous> (/home/pi/homeAppFrontend/node_modules/jade/lib/index.js:218:8), <anonymous>:231:22)
    at res (/home/pi/homeAppFrontend/node_modules/jade/lib/index.js:219:38)
    at Object.exports.renderFile (/home/pi/homeAppFrontend/node_modules/jade/lib/index.js:380:38)
    at Object.exports.renderFile (/home/pi/homeAppFrontend/node_modules/jade/lib/index.js:370:21)
    at View.exports.__express [as engine] (/home/pi/homeAppFrontend/node_modules/jade/lib/index.js:417:11)
    at View.render (/home/pi/homeAppFrontend/node_modules/express/lib/view.js:126:8)
    at tryRender (/home/pi/homeAppFrontend/node_modules/express/lib/application.js:639:10)
    at EventEmitter.render (/home/pi/homeAppFrontend/node_modules/express/lib/application.js:591:3)
    at ServerResponse.render (/home/pi/homeAppFrontend/node_modules/express/lib/response.js:961:7)
GET /bridge/ecus/rrc/uiStatus 500 1157.272 ms - 1726
TypeError: /home/pi/homeAppFrontend/views/layout.jade:10
    8|     link(rel='stylesheet', href='/css/main.css')
    9|     link(rel='stylesheet', href='/css/font-awesome.min.css')
  > 10|     if !config.pretty
    11|       style.
    12|         .button, .action {
    13|           -webkit-backdrop-filter: none !important;

Cannot read property 'pretty' of undefined
    at eval (eval at <anonymous> (/home/pi/homeAppFrontend/node_modules/jade/lib/index.js:218:8), <anonymous>:44:13)
    at eval (eval at <anonymous> (/home/pi/homeAppFrontend/node_modules/jade/lib/index.js:218:8), <anonymous>:231:22)
    at res (/home/pi/homeAppFrontend/node_modules/jade/lib/index.js:219:38)
    at Object.exports.renderFile (/home/pi/homeAppFrontend/node_modules/jade/lib/index.js:380:38)
    at Object.exports.renderFile (/home/pi/homeAppFrontend/node_modules/jade/lib/index.js:370:21)
    at View.exports.__express [as engine] (/home/pi/homeAppFrontend/node_modules/jade/lib/index.js:417:11)
    at View.render (/home/pi/homeAppFrontend/node_modules/express/lib/view.js:126:8)
    at tryRender (/home/pi/homeAppFrontend/node_modules/express/lib/application.js:639:10)
    at EventEmitter.render (/home/pi/homeAppFrontend/node_modules/express/lib/application.js:591:3)
    at ServerResponse.render (/home/pi/homeAppFrontend/node_modules/express/lib/response.js:961:7)
GET /bridge/ecus/rrc/uiStatus 500 636.994 ms - 1726
TypeError: /home/pi/homeAppFrontend/views/layout.jade:10
    8|     link(rel='stylesheet', href='/css/main.css')
    9|     link(rel='stylesheet', href='/css/font-awesome.min.css')
  > 10|     if !config.pretty
    11|       style.
    12|         .button, .action {
    13|           -webkit-backdrop-filter: none !important;

Cannot read property 'pretty' of undefined
    at eval (eval at <anonymous> (/home/pi/homeAppFrontend/node_modules/jade/lib/index.js:218:8), <anonymous>:44:13)
    at eval (eval at <anonymous> (/home/pi/homeAppFrontend/node_modules/jade/lib/index.js:218:8), <anonymous>:231:22)
    at res (/home/pi/homeAppFrontend/node_modules/jade/lib/index.js:219:38)
    at Object.exports.renderFile (/home/pi/homeAppFrontend/node_modules/jade/lib/index.js:380:38)
    at Object.exports.renderFile (/home/pi/homeAppFrontend/node_modules/jade/lib/index.js:370:21)
    at View.exports.__express [as engine] (/home/pi/homeAppFrontend/node_modules/jade/lib/index.js:417:11)
    at View.render (/home/pi/homeAppFrontend/node_modules/express/lib/view.js:126:8)
    at tryRender (/home/pi/homeAppFrontend/node_modules/express/lib/application.js:639:10)
    at EventEmitter.render (/home/pi/homeAppFrontend/node_modules/express/lib/application.js:591:3)
    at ServerResponse.render (/home/pi/homeAppFrontend/node_modules/express/lib/response.js:961:7)
GET /bridge/ecus/rrc/recordings/yearTotal 500 827.412 ms - 1726
TypeError: /home/pi/homeAppFrontend/views/layout.jade:10
    8|     link(rel='stylesheet', href='/css/main.css')
    9|     link(rel='stylesheet', href='/css/font-awesome.min.css')
  > 10|     if !config.pretty
    11|       style.
    12|         .button, .action {
    13|           -webkit-backdrop-filter: none !important;

Cannot read property 'pretty' of undefined
    at eval (eval at <anonymous> (/home/pi/homeAppFrontend/node_modules/jade/lib/index.js:218:8), <anonymous>:44:13)
    at eval (eval at <anonymous> (/home/pi/homeAppFrontend/node_modules/jade/lib/index.js:218:8), <anonymous>:231:22)
    at res (/home/pi/homeAppFrontend/node_modules/jade/lib/index.js:219:38)
    at Object.exports.renderFile (/home/pi/homeAppFrontend/node_modules/jade/lib/index.js:380:38)
    at Object.exports.renderFile (/home/pi/homeAppFrontend/node_modules/jade/lib/index.js:370:21)
    at View.exports.__express [as engine] (/home/pi/homeAppFrontend/node_modules/jade/lib/index.js:417:11)
    at View.render (/home/pi/homeAppFrontend/node_modules/express/lib/view.js:126:8)
    at tryRender (/home/pi/homeAppFrontend/node_modules/express/lib/application.js:639:10)
    at EventEmitter.render (/home/pi/homeAppFrontend/node_modules/express/lib/application.js:591:3)
    at ServerResponse.render (/home/pi/homeAppFrontend/node_modules/express/lib/response.js:961:7)
^[email protected]:~/homeAppFrontend$



sandurz
Posts: 15
Joined: Thursday 28 July 2016 16:52
Target OS: Windows
Domoticz version:
Contact:

Re: Frontend to mimic iOS 10 and Home.app

Post by sandurz » Saturday 13 August 2016 16:23

Hmmm occasionally a blank page will happen 1/20 reloads for some reason but it doesn't seem like it was a one-time fluke.

Thanks for testing! Made some updates that could potentially fix the error, so re-clone and give it a go. Added a port option in the config and changed the default, so give it another go if you could. If you're having problems, open up the frontend on a desktop browser and in the developer console execute app.dumpServer() to send a report back to the console and paste it here.

Holland
Posts: 317
Joined: Friday 12 July 2013 13:53
Target OS: Raspberry Pi
Domoticz version: Beta Ch
Location: The Netherlands
Contact:

Re: Frontend to mimic iOS 10 and Home.app

Post by Holland » Sunday 14 August 2016 0:12

Works now! Thanks.

Also the port change.

Even dimming lamps works

For those who want to update an existing git install, run this inside the root folder of homeAppFrontend

Code: Select all

git pull

Holland
Posts: 317
Joined: Friday 12 July 2013 13:53
Target OS: Raspberry Pi
Domoticz version: Beta Ch
Location: The Netherlands
Contact:

Re: Frontend to mimic iOS 10 and Home.app

Post by Holland » Tuesday 20 September 2016 21:43

@sandurz

Just curious, haven't seen any activity lately on this project. Still on the map, or .... :P

madrian
Posts: 208
Joined: Saturday 27 August 2016 1:18
Target OS: -
Domoticz version:
Contact:

Re: Frontend to mimic iOS 10 and Home.app

Post by madrian » Tuesday 20 September 2016 22:32

Looks promising, however it needs more development. :)

sandurz
Posts: 15
Joined: Thursday 28 July 2016 16:52
Target OS: Windows
Domoticz version:
Contact:

Re: Frontend to mimic iOS 10 and Home.app

Post by sandurz » Tuesday 20 September 2016 22:47

Hehe yeah slacked on development hard. I'll pick back up!

ben9519
Posts: 9
Joined: Monday 14 July 2014 13:31
Target OS: Raspberry Pi
Domoticz version:
Location: Netherlands
Contact:

Re: Frontend to mimic iOS 10 and Home.app

Post by ben9519 » Thursday 29 September 2016 22:02

Hi,

I get this error when run npm install

Code: Select all

sudo npm install
npm http GET https://registry.npmjs.org/body-parser
npm http GET https://registry.npmjs.org/cookie-parser
npm http GET https://registry.npmjs.org/debug
npm http GET https://registry.npmjs.org/express
npm http GET https://registry.npmjs.org/jade
npm http GET https://registry.npmjs.org/morgan
npm http GET https://registry.npmjs.org/q
npm http GET https://registry.npmjs.org/serve-favicon
npm http GET https://registry.npmjs.org/unirest

npm ERR! Error: failed to fetch from registry: cookie-parser
npm ERR!     at /usr/share/npm/lib/utils/npm-registry-client/get.js:139:12
npm ERR!     at cb (/usr/share/npm/lib/utils/npm-registry-client/request.js:31:9)
npm ERR!     at Request._callback (/usr/share/npm/lib/utils/npm-registry-client/request.js:136:18)
npm ERR!     at Request.callback (/usr/lib/nodejs/request/main.js:119:22)
npm ERR!     at Request.<anonymous> (/usr/lib/nodejs/request/main.js:212:58)
npm ERR!     at Request.emit (events.js:88:20)
npm ERR!     at ClientRequest.<anonymous> (/usr/lib/nodejs/request/main.js:412:12)
npm ERR!     at ClientRequest.g (events.js:156:14)
npm ERR!     at ClientRequest.emit (events.js:67:17)
npm ERR!     at HTTPParser.parserOnIncomingClient [as onIncoming] (http.js:1256:7)
npm ERR! You may report this log at:
npm ERR!     <http://bugs.debian.org/npm>
npm ERR! or use
npm ERR!     reportbug --attach /home/pi/homeAppFrontend/npm-debug.log npm
npm ERR!
npm ERR! System Linux 4.1.19+
npm ERR! command "/usr/bin/nodejs" "/usr/bin/npm" "install"
npm ERR! cwd /home/pi/homeAppFrontend
npm ERR! node -v v0.6.19
npm ERR! npm -v 1.1.4
npm ERR! message failed to fetch from registry: cookie-parser
npm ERR!
npm ERR! Additional logging details can be found in:
npm ERR!     /home/pi/homeAppFrontend/npm-debug.log
npm not ok
Any ideas?

User avatar
EdddieN
Posts: 136
Joined: Wednesday 16 November 2016 12:31
Target OS: Raspberry Pi
Domoticz version: 3.5877
Location: Scotland
Contact:

Re: Frontend to mimic iOS 10 and Home.app

Post by EdddieN » Wednesday 01 February 2017 0:02

Looks great!

Quick thing, don't seem to get the mapping of the devices as explained for the config.json

for example I have a Hue light called "Sofa" on Domoticz, do I call it Sofa left and right?

Also I notice that all accessories come with the room name on the button which clutters things a bit, anyway just to have the name or optionally remove the room name from the button?

The default room, what is it? All the unassociated room devices?

Looks really nice! :D

Post Reply

Who is online

Users browsing this forum: No registered users and 2 guests