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

[sandurz]

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.

[jadijkstra2000]

Nice!

[Patrick]

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

[Holland]

Looks very good. Looking forward to test it.

[sandurz]

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]

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

[Minglarn]

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

Keep up the good work!

[Dynamic]

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]

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]

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]

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

pi@raspberrypi:~/homeAppFrontend$ sudo nano config.json
pi@raspberrypi:~/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)
^Cpi@raspberrypi:~/homeAppFrontend$

[sandurz]

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]

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]

@sandurz

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

[madrian]

Looks promising, however it needs more development.

[sandurz]

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

[ben9519]

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?

[EdddieN]

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!

[EdddieN]

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.

Can we revise this? See this conversation here: https://github.com/EdddieN/machinon-dom ... issues/239