Homey.ink on a tablet/desktop

When it’s too hard for u to run a server and fix some css files urself then i would suggest to use the online version. It comes with some restrictions ofc but it’s easy to use.

I have the online version, but I really miss the option to see temperatures, percentages, colors and stuff like that on the tiles. I ll try my best. Thanks so far! If i succeed, I ll make a small donation :+1:

1 Like

Just hit and hold the tile and you can get any info on it that is supported (temperature, power, humidity…)

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

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

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

Zoiets?
Something like this?

4 Likes

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

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.

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

Photo

1 Like

Adjustments I made (as is, I still have to run a diff with all edited files :wink: ):
I’m familiar with coding, but far from guru :wink:
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

2 Likes

@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.

1 Like

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.

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/

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 :wink:

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 ^^

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

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”.
lichtbewolkt

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

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

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’