[Pro][Dashboard] SmartDash - a dashboard for Homey

Developers
, , , ,
1

Hi everyone!
I created a dashboard for Homey, she can work without internet (local connection) or from remote (need connection to Homey cloud).
She work on Android and iOS (iPhone and iPad) platforms.
This App use Homey Web Api and require to create an Api Key in Homey Pro 2023 (my.homey.app → settings → api keys) and a url for retrieve bearer token for Homey Pro 2016-2019

COMPATIBILITY

Homey Pro 2023
Homey Pro 2016/2019 (see this post and this post)

NOTE: in Homey Pro 2016/2019 the strategy for autoupdate bearer token is valid only for local connection. A workaround for cloud connection is to expose url for autoupdate bearer token

MAIN FEATURES

  • local and remote login
  • 6 customizable panels
  • customizable widget for every panel: socket, sensor, presence, light, thermostat, powerwall, blind, solarpanel, camera, insight and more
  • virtual button for execute flows or change variable state
  • screensaver (blank, simple clock and simple weather forecast, iframe)
  • panel to panel auto switches function
  • ability to activate panel by setting a Homey numeric variable (see this post)
  • backup/restore data
  • ability to customize widget and panel layout by CSS (see this post and this post)
  • ability to manual change icon in dashboard (see this post)

SUPPORTED LANGUAGES

united kingdom-64(1) English
italy-64(1) Italian
france-64 French
netherlands-64 Dutch
If you want to add a new language post in this topic.

TO DO

  • manage multiple homey
  • an alert/message system (overlays for showing some info)
  • add a password/pin for execute some command and change params (coming soon)
  • ability to dismiss notifications on timeline widget
  • ability to move widget from panels

DO YOU WANT A NEW FEATURE?

KNOWN BUGS/ISSUES

  • You tell me

DOWNLOAD

playstore

appstore

nspanelpro

lenovo-clock-smart-clock-gen-2-subseries-gallery-1

SCREENSHOTS

13 Likes
2

HOW TO CUSTOMIZE CSS:

NOTE: CSS are saved in local database, so there is a limit to the number of lines that depends on the OS.

Every line of custom css must include .content. Every line not correct are removed when saving.

The basic widget template is:

<div class="content">		
  <div class="box"></div>
  <div class="name"></div>
  <div class="update"></div>
  <div class="battery"></div>	
</div>

“box” is the main object, describe it is complicate, but it can contain:

<div class="value"></div> (it can contain a capability value)

or

<div class="state"></div> (it can contain an icon)

or 

<div class="range h"><input class="slider" type="range"></div> (slider of GenericLight,  GenericFan, LightRGB)

or

<div class="range v"><input class="slider" type="range"></div> (slider of BlindCurtain)

or

<ul class="list"><li></li>...</ul> (Timeline)

or

<div class="canvas"><canvas class="chart"></canvas></div> (Insight)

or

<div class="image"><img class="img" /></div> (VirtualCamera)

When widget has left and right elements the structure is

<div class="fl">some things</div><div class="fr">some things</div> (THSensor, SolarPanel)

A widget that changes state has “on” class or “active” class or “alarm” class
A very simple example is:

.content { color: #ffffff; background-color: red !important }
.on .content .state { color: #ffffff }

.content { color: #ffffff; background-color: magenta !important }
.active .content .state { color: #ffffff }

.content { color: #ffffff; background-color: green !important }
.alarm .content .state { color: #ffffff }

default widget on is:
Screenshot 2024-03-06 alle 11.12.20

with custom css is:
Screenshot 2024-03-06 alle 11.12.56

SOME USEFULL CSS

Disable shadow and remove rounded border in single widget

.content { box-shadow: none; border-radius: 0 }

Hide the dim slider in GenericLightWidget / GenericFanWidget and show it only if light/fan is on:

.content .range { display: none }
.on .content .range { display: block }

Interact with the iframe:

.content iframe { pointer-events: auto }

Customize date or time in ClockWidget

.content .date { display: none }
.content .time { color: #000000 }

Customize range slider dimension

.content .range { width: 300%; left: -100% }

Make a widget circle

.content { border-radius: 0; box-shadow: none; background-color: transparent }
.content .box { position: initial; width: 100px; height: 100px; margin: 0 auto; border-radius: 50%; background-color: lime }

HOW TO GROUP CSS BY WIDGET TYPE

Every widget has a type class:

clock, genericcapability, genericalert, genericsensor, genericsocket, genericlight, genericfan, genericthermostat, genericspeaker, presencesensor, thsensor, comfortsensor, smsensor, virtualcamera, iframe, insight, timeline, virtualbutton, powerwall, jsonvariable, weather, solarpanel, blindcurtain, separator, dummy

You can group CSS by widget type, have to work in the panel custom CSS:

 .panel .widget.clock .content { background: url("$image.jpg") no-repeat center center; background-size: cover }

LINKS TO SOME USEFULL CSS

MAKE ATTENTION:
Please don’t change width, height, display property of .content { }: it involves having glitch
If some CSS rules don’t work, add !important after property

3

Happy to test :wink:. Now using Homeydash/Fully browser on the NSPanel pro.

4

I have added info and apk…!
Argh, @Caseda need to publish App on play store?

1 Like
5

After a small amount of talking under the mods i’ve reinstated the APK link.
It probably is the old version now? so you might want to update it.

Sorry for any inconvenience, just wanted to be safe as it technically is just a random APK that could do anything.
So of course the installing user should be advised that they are installing it at their own risk.

1 Like
6

Thankyou :slight_smile:
I have update link to latest version!

Coming soon on play store!

1 Like
7

Give a shout when it’s on the play store, I like where this is going :slight_smile:

8

Developer is working like crazy :rofl:. New features are being added during every moment of the day.

Underneath my nspanell pro with smart dash.

1000006923
10000069231088×1920 323 KB

9

Now on playstore
SmartDash

3 Likes
10

Added landscape

11

i have an issue with the app…
it can’t load the list of devices.
it’s ok with virtual button to turn on or off but doesn’t receive the list of devices on my homey 2023 pro.

12

Is step 2 working for you?

step 2

13

the json looks like it is truncated. Need check if it’s a localapi / tag system limit

14

Maybe tag system has a character limit, if confirmed i need to change the way to get data.
I have to create 2 script, first one for devices list, capabilities and units, second one for get only data and timestamps.

Ok, i created scripts for two methods:
“getDevices” and “getData”.
App on first start read “getDevices” and then read “getData”.

On this way it should resolve and the data exchanged is less (minor stress for Homey)
After some test i release new version and modify the first and second post

Updated second post with new api for big data.

15

Fixed stupid bug

16

Update scripts to force capabilities name to lowercase

17

I updated scripts js for manage the automatic retrieve of flows: no more need entering manually but now is possible to select it from list!
Needed new api, new app (on release) and need updating devices list (Use button refresh on devices section)

18

New update for scripts, now i retrieve too advanced flows

1 Like
19

New version available, added simple screensaver

20

Updated screensaver with simple widget forecast