Homey.ink on a tablet/desktop

Glenn_Dijkstra · January 13, 2021, 12:10pm

I know, I know, but it ll reset after time. And I d love to see them all together. I ll try to make a node red dashboard soon

Igy · January 13, 2021, 12:40pm

Never reset in my case on one device. Using it on wall mounted tablet and kiosk browser and it remains same also after restarts.

JPe4619 · January 13, 2021, 1:36pm

Have a look here, seen pictures with all the values visible in the same tile.

PetervdK · January 13, 2021, 8:39pm

Zoiets?
Something like this?

Chris_Peters · February 3, 2021, 6:29pm

That’s nice, is that just a sketch or a working dashboard?

PetervdK · February 3, 2021, 7:05pm

It’s a working dashboard. Took me some weeks to accomplish. Not fully satisfied yet, but works good enough for now.
I have a second dashboard that shows last connected/reported times and want to integrate that into this one. Can’t get it right though (can’t get all info on the tiles in a decent way), my json knowledge is too limited.

Peter_Kawa · March 18, 2021, 3:17am

I got it to work too, @Glenn_Dijkstra
Running it local on Homey micro webserver.
Screenshot

Photo

Peter_Kawa · March 18, 2021, 10:07pm

Adjustments I made (as is, I still have to run a diff with all edited files ):
I’m familiar with coding, but far from guru
So you’re on your own using this.

To show all available values on tiles, edit this file:
/app/css/themes/web.css
Or use iphone.css / ipad.css / google nest hub.css instead, if you use one of the iphone/ipad/“google nest hub” templates as your theme on your device.
Find the line with:
.device .value {
Then change
position: absolute;
into
position: sticky;

-Font adjustment:
This is also done here:
.device .value {
Changes made:
top: 0.4vh;
right: 0.4vh;
font-size: 2.2vh;
font-weight: 500;
line-height: 3vh;
max-height: 2.6vh;

And at the entry below that,
#decimal {
change the font size for decimals:
font-size: 1.8vh;

The same theme for an android 10.1 tablet works for my android phone as well

Peter_Kawa · March 18, 2021, 10:45pm

@JPe4619 Jan, it is not functional (yet) though, but ik looks a bit like it.
What you see here are tiles ‘longpressed’, so they show a value it otherwise doesn’t.
The tiles keep this ‘state’ on a tablet f.i., but not on a Ggl Hub. I think cookies do the trick of ‘reminding the state’.
Using the online dash and casting it to a ggl hub, you will be pressing the tiles every x minutes to show the values you want…
From what I understand the only way for now is to download an run the dashboard locally.

Draceus · April 5, 2021, 7:55pm

So, I’ve used the online version previously but I have decided to run locally on my rpie instead. Got it up and running and I can see the dashboard when going to the IP of my rpie with the token string attached.

I SSH in to my pie and cd in to homey.ink and run serve -p 5000 app.

Problem is that when I close my ssh connection it seems like the dashboard stops working, how come? I’m a novice when it comes to linux so any help would be appreciated.

Peter_Kawa · April 5, 2021, 10:09pm

What does serve --help say?
I guess you have to do something like this, the run forever option
(found online, so don’t kill me if this is crap):

You need to specify the absolute path for the folder you want to serve, and also use which to get the command absolute path as well.

I use npx to run serve instead of having it installed, and it works like this:

forever start $(which npx) serve -l 80 -s /home/user/folder/build/

Peter_Kawa · April 5, 2021, 10:12pm

or what about entering this

npm i -g serve
git clone https://github.com/Homeycornelisse/homey.ink
cd homey.ink
serve -p 5000 app

I’m thinking if you only enter the last command, it quits when you disconnect. But maybe I’m talking crap and should not interfere

Draceus · April 6, 2021, 9:38am

Not getting it to work. Tried
npx forever start $(which npx) serve -l 80 -s /home/draceus/homey.ink/app

output is
npx: installed 235 in 23.712s
warn: --minUptime not set. Defaulting to: 1000ms
warn: --spinSleepTime not set. Your script will exit if it does not stay up for at least 1000ms
info: Forever processing file: /usr/bin/npx

Not sure what Im doing wrong. Surely everyone running this locally has it set up so it doesn’t stop working when you close SSH to the server. Must be someone who knows the answer ^^

Peter_Kawa · May 21, 2021, 6:06am

Using the dash on a local host, i was trying to get the weather icons working again, like the sun icon in the screenshot.
weather-icon-dash

Appearantly for a while now, the wheather descriptions changed into the language of your location, for me it is NL and the language is Dutch, instead of English (b/c the default weather icons all have English names).

So, I renamed the weather icons to Dutch, and that works. → The weather descriptions used can be found here
Well, it works for one word descriptions like ‘bewolkt’, or ‘helder’, but not when the description has two words like ‘lichte regen’ ‘half bewolkt’.
Can anyone give a hint how to escape the whitespace?
I tried halfbewolkt.svg and half bewolkt.svg for instance, but no luck.

Thanks in advance,
Peter

Peter_Kawa · May 24, 2021, 7:20pm

I found this solution, this removes all whitespaces from the weather data string.

      // First, remove possible whitespaces from weather description     
      let $WeatherStateNoSpace = weather.state.toLowerCase();
        $WeatherStateNoSpace = $WeatherStateNoSpace.replace(/\s+/g,'');

      $weatherStateIcon.classList.add($WeatherStateNoSpace);
      $weatherStateIcon.style.backgroundImage = 'url(img/weather/' + $WeatherStateNoSpace + dn + '.svg)';
      $weatherStateIcon.style.webkitMaskImage = 'url(img/weather/' + $WeatherStateNoSpace + dn + '.svg)';
 }

For the info panel, apply the like:

        $icon.id = ('weather-state-icon');
        // first, erase possible whitespaces from weather description 
        let $infoStateNoSpace = info.state.toLowerCase();
          $infoStateNoSpace = $infoStateNoSpace.replace(/\s+/g,'');

        $icon.classList.add($infoStateNoSpace);
        $icon.style.backgroundImage = 'url(img/weather/' + $infoStateNoSpace + dn + '.svg)';
        $icon.style.webkitMaskImage = 'url(img/weather/' + $infoStateNoSpace + dn + '.svg)';

EDIT Tested and it works.
“Licht bewolkt” is converted to “lichtbewolkt” and finds my “lichtbewolkt.svg”.

So, the icon files should not contain any whitespaces, f.i. partlyclouded.svg or heavythunderstorm.svg

List of Dutch weather descriptions (received from Openweathermap by mail, thanks feRon):

200: onweersbui met lichte regen
201: onweersbui met regen
202: onweersbui met zware regenval
210: lichte onweersbui
211: onweersbui
212: zware onweersbui
221: onregelmatig onweersbui
230: onweersbui met lichte motregen
231: onweersbui met motregen
232: onweersbui met zware motregen
300: lichte motregen
301: motregen
302: zware motregen
310: lichte motregen/regen
312: zware motregen/regen
313: stortbuien en motregen
314: hevige stortbuien en motregen
321: zware motregen
500: lichte regen
501: matige regen
502: zware regenval
503: zeer zware regenval
504: extreme regen
511: koude buien
520: lichte stortregen
521: stortregen
522: zware stortregen
531: afwisselende stortbuien
600: lichte sneeuw
601: sneeuw
602: hevige sneeuw
611: ijzel
612: lichte ijzel
621: natte sneeuw
622: hevige sneeuw
701: mist
721: nevel
731: zand/stof werveling
751: zandstorm
762: vulkanische as
771: rukwinden
781: tornado
800: onbewolkt
801: licht bewolkt
802: half bewolkt
803: zwaar bewolkt
804: geheel bewolkt

DidierVU · May 26, 2021, 3:13pm

half%20bewolkt.svg should do the trick I think…

Peter_Kawa · May 26, 2021, 3:22pm

You’d expect that, but that didn’t work either.
In my post above yours you can see it’solved by removing the whitespaces from the weather description string with a find&replace function, and naming the icon files also without any space, like ‘verylightrain.svg’

Peter_Kawa · October 5, 2022, 5:33pm

EDIT Solved!
Thanks to Arie Godschalk, this is the fix:

capabilityObj['cap.text1']

instead of:

capabilityobj.cap.text1

.

Hi Emile, or other dash devs,

I run homey dash locally

In the homeydash.app.js file, I wanted to add a capability with a dot in it’s name.
But it does not work, while a dot has a funcion. Does the dot have to be escaped?
And how? measure_rain\\.1h did not help.

Or should dots in capability names just be omitted by app devs?

Code

//  Not working because of the dot in *measure_rain.1h*
/*
          if ( device.capabilitiesObj.measure_rain.1h ) {
            device.makeCapabilityInstance('measure_rain.1h', function(value){
              var $deviceElement = document.getElementById('device:' + device.id);
              if( $deviceElement ) {
               // var $rain1h = ( ":measure_rain.1h" )
                var $valueElement = document.getElementById('value:' + device.id + ":measure_rain\\.1h");
                capability = device.capabilitiesObj['measure_rain.1h']
                renderValue($valueElement, capability.id, capability.value, capability.units)
                }
            });
          }
*/

I’d like to color the tile also from apps which use dots in the cap.names.
I use this code for that:

Code

if ( device.name == "Temp Vriezer" ) {
        if ( device.capabilitiesObj && device.capabilitiesObj.measure_temperature) {
        var temperature = device.capabilitiesObj.measure_temperature.value
        console.log(temperature)
        if ( temperature < -10 ) {  // value below -10, tile gets iceblue
          console.log("temperature out of bounds")
          $deviceElement.classList.add('lowest') // lowest == tile gets colored iceblue
        }else{
          $deviceElement.classList.remove('lowest')
        }
      }
        if ( device.capabilitiesObj && device.capabilitiesObj.measure_temperature) {
        var temperature = device.capabilitiesObj.measure_temperature.value
        console.log(temperature)
        if ( temperature > -9 ) {  // value above -9, tile gets red
          console.log("temperature out of bounds")
          $deviceElement.classList.add('high') // high == tile gets colored red
        }else{
          $deviceElement.classList.remove('high')
        }
      }
}

Many thanks in advance, I hope it’s something simple.

Tiwas · October 29, 2022, 1:19pm

I hope this isn’t too stupid, but…do you have experience running this from a docker? I was hoping to run it on my NAS and serve it to multiple units.

Romain_B · July 25, 2023, 8:03pm

Hi there,

How can I disconnect homey.ink access to my homey pro ? I’m not comfortable with the open online access to my homey box from a simple URL.

Thx

Topic		Replies	Views
Homeydash.com, a Homey dashboard Apps app , dashboard	1104	155061	January 27, 2024
Connecting to the Homey API? Questions & Help	26	2355	January 10, 2023
Homey Web App [CSS customization] Apps	61	5055	May 17, 2021
Homey 2.0 for phones AND tablets/iPads? Questions & Help	4	1057	November 4, 2018
Zoom In/Out the font and icons on Home Page google Tablet Questions & Help	1	274	August 17, 2022

Homey.ink on a tablet/desktop

Related Topics