# Homey.ink on a tablet/desktop

**URL:** <https://community.homey.app/t/homey-ink-on-a-tablet-desktop/12443>\
**Category:** Developers\
**Tags:** app\
**Created:** [April 29, 2019, 3:55pm UTC](https://community.homey.app/t/homey-ink-on-a-tablet-desktop/12443 "2019-04-29T15:55:21Z")\
**Posts on this page:** 20\
**Page:** 2

<div class="post-metadata">

**Author:** ![DaneedeKruyff](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/daneedekruyff/32/964_2.png) [@DaneedeKruyff](https://community.homey.app/u/DaneedeKruyff)\
**Post date:** [May 2, 2019, 3:34pm UTC](https://community.homey.app/t/homey-ink-on-a-tablet-desktop/12443/21 "2019-05-02T15:34:07Z")

</div>

Been there, done that,

Day: [https://github.com/daneedk/homey.ink/blob/master/app/img/weather/sunny.svg](https://github.com/daneedk/homey.ink/blob/master/app/img/weather/sunny.svg)

Night: [https://github.com/daneedk/homey.ink/blob/master/app/img/weather/sunnyn.svg](https://github.com/daneedk/homey.ink/blob/master/app/img/weather/sunnyn.svg)

Just haven’t yet implemented the code to display the night variant, but the images and variables are available.

---

<div class="post-metadata">

**Author:** ![Gisle\_Johnsen](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/gisle_johnsen/32/9720_2.png) [@Gisle\_Johnsen](https://community.homey.app/u/Gisle_Johnsen)\
**Post date:** [May 3, 2019, 7:24am UTC](https://community.homey.app/t/homey-ink-on-a-tablet-desktop/12443/22 "2019-05-03T07:24:55Z")

</div>

How do I modify css?  
Cant modify anything else but the index.html.  
I run it from my personal server hosted on:  
[https://blablablabla.ddns.net/homey.ink-master/app/index.html?token=eyJfX2F0aG9tX2FwaV9xxxxxxxxxxxxxxxx&theme=web](https://blablablabla.ddns.net/homey.ink-master/app/index.html?token=eyJfX2F0aG9tX2FwaV9xxxxxxxxxxxxxxxx&theme=web)

Trying to modify css in: homey.ink-master/app/css/homey.ink.css

Nothing happens 😕

---

<div class="post-metadata">

**Author:** ![Dijker](https://avatars.discourse-cdn.com/v4/letter/d/b9bd4f/32.png) [@Dijker](https://community.homey.app/u/Dijker)\
**Post date:** [May 3, 2019, 8:35am UTC](https://community.homey.app/t/homey-ink-on-a-tablet-desktop/12443/23 "2019-05-03T08:35:07Z")

</div>

> [@Gisle\_Johnsen](#):
>
> Trying to modify css in: homey.ink-master/app/css/homey.ink.css

Try the [https://github.com/athombv/homey.ink/blob/master/app/css/ **themes** /web.css](https://github.com/athombv/homey.ink/blob/master/app/css/themes/web.css)

When specifying the Web theme…  
Or duplicate it and submit your awesomeweb.css Theme to the Developer 😉

---

<div class="post-metadata">

**Author:** ![DaneedeKruyff](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/daneedekruyff/32/964_2.png) [@DaneedeKruyff](https://community.homey.app/u/DaneedeKruyff)\
**Post date:** [May 3, 2019, 8:59am UTC](https://community.homey.app/t/homey-ink-on-a-tablet-desktop/12443/24 "2019-05-03T08:59:04Z")

</div>

Added battery indicator that shows when a device has reported a low battery (alarm\_battery capability)

 ![image](https://us1.discourse-cdn.com/flex025/uploads/athom/original/2X/b/bcc76bde0b35d0f64713b2ab53b5e91483f2af9b.jpeg)

Added info panel to show detailed information

![image](https://us1.discourse-cdn.com/flex025/uploads/athom/original/2X/2/2a743383b689299d4aeadf9e16427b9a6f10bcdc.jpeg)

Also for weather information

![image](https://us1.discourse-cdn.com/flex025/uploads/athom/original/2X/8/88cf641d20fe4e67f5d16b421b5de1c4d6903312.jpeg)

The icon will now show either a sun or a moon depending the time of day. (When there is no cloud cover…)

Code is available here [https://github.com/daneedk/homey.ink](https://github.com/daneedk/homey.ink)

(@Jamie)

---

<div class="post-metadata">

**Author:** ![Jeroen\_Somhorst](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/jeroen_somhorst/32/184_2.png) [@Jeroen\_Somhorst](https://community.homey.app/u/Jeroen_Somhorst)\
**Post date:** [May 3, 2019, 7:06pm UTC](https://community.homey.app/t/homey-ink-on-a-tablet-desktop/12443/25 "2019-05-03T19:06:44Z")

</div>

I’m thinking about adding power consumption data in tiles of various devices. That would be a great addition.

---

<div class="post-metadata">

**Author:** ![Hullie](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/hullie/32/9264_2.png) [@Hullie](https://community.homey.app/u/Hullie)\
**Post date:** [May 3, 2019, 7:13pm UTC](https://community.homey.app/t/homey-ink-on-a-tablet-desktop/12443/26 "2019-05-03T19:13:28Z")

</div>

I can confirm that all the devices info of Homey can been shown. Not only “on/off”. You have to render each device correctly to display the values on the dashboard. 😃

---

<div class="post-metadata">

**Author:** ![Rocodamelshekima](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/rocodamelshekima/32/8209_2.png) [@Rocodamelshekima](https://community.homey.app/u/Rocodamelshekima)\
**Post date:** [May 3, 2019, 7:14pm UTC](https://community.homey.app/t/homey-ink-on-a-tablet-desktop/12443/27 "2019-05-03T19:14:31Z")

</div>

Pics with thumbs up and code, or it didn’t happen. 😉

---

<div class="post-metadata">

**Author:** ![Hullie](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/hullie/32/9264_2.png) [@Hullie](https://community.homey.app/u/Hullie)\
**Post date:** [May 3, 2019, 7:34pm UTC](https://community.homey.app/t/homey-ink-on-a-tablet-desktop/12443/28 "2019-05-03T19:34:49Z")

</div>

It is just a proof of concept. My code is not generic, working for my situation only.

 ![33](https://us1.discourse-cdn.com/flex025/uploads/athom/original/2X/7/745638a9908ebf500bfec474842e42320db3451c.jpeg)

But hey, it is possible to show all the data.

---

<div class="post-metadata">

**Author:** ![DaneedeKruyff](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/daneedekruyff/32/964_2.png) [@DaneedeKruyff](https://community.homey.app/u/DaneedeKruyff)\
**Post date:** [May 3, 2019, 8:38pm UTC](https://community.homey.app/t/homey-ink-on-a-tablet-desktop/12443/29 "2019-05-03T20:38:55Z")

</div>

@Dijker could you try my code on your Kobo reader (and perhaps post some screenshots)? I’ve changed all theme files but can only view them in a browser so I wonder how my version looks on the actual device. I’d like to know if the placement of the icons and info panel is properly aligned.

---

<div class="post-metadata">

**Author:** ![Seraphim](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/seraphim/32/8879_2.png) [@Seraphim](https://community.homey.app/u/Seraphim)\
**Post date:** [May 4, 2019, 6:32am UTC](https://community.homey.app/t/homey-ink-on-a-tablet-desktop/12443/30 "2019-05-04T06:32:13Z")

</div>

Hi DaneedeKruyff,

this is what your work looks on my Kobo H2o:

 ![screen_001](https://us1.discourse-cdn.com/flex025/uploads/athom/original/2X/1/188f9c9d129c4822e070ec3b826b36f287399d24.png)

Don’t know why the Kobo won’t show up my devices, opening this on my Mac all Themes show the devices although the icons for Battery, Sunrise/set and weather won’t show up.

Kobo-Theme on Mac:

 ![45](https://us1.discourse-cdn.com/flex025/uploads/athom/original/2X/9/97647f590de39ee5584ecd0d83cda20982ec3eca.png)

Web-Theme on Mac:  
 ![25](https://us1.discourse-cdn.com/flex025/uploads/athom/original/2X/9/9fbf3e0d13c50633bc7d3473503de037c6e14865.jpeg)

Hope this helps you a bit.

Regards  
Andreas

---

<div class="post-metadata">

**Author:** ![Seraphim](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/seraphim/32/8879_2.png) [@Seraphim](https://community.homey.app/u/Seraphim)\
**Post date:** [May 4, 2019, 6:34am UTC](https://community.homey.app/t/homey-ink-on-a-tablet-desktop/12443/31 "2019-05-04T06:34:30Z")

</div>

Hello Hullie,

what did you do to show your devices among themselves?

Regards  
Andreas

---

<div class="post-metadata">

**Author:** ![DaneedeKruyff](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/daneedekruyff/32/964_2.png) [@DaneedeKruyff](https://community.homey.app/u/DaneedeKruyff)\
**Post date:** [May 4, 2019, 7:49am UTC](https://community.homey.app/t/homey-ink-on-a-tablet-desktop/12443/32 "2019-05-04T07:49:42Z")

</div>

Thanks, looks like the script crashes on your Kobo, I’ll look into it.

---

<div class="post-metadata">

**Author:** ![Hullie](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/hullie/32/9264_2.png) [@Hullie](https://community.homey.app/u/Hullie)\
**Post date:** [May 4, 2019, 8:17am UTC](https://community.homey.app/t/homey-ink-on-a-tablet-desktop/12443/33 "2019-05-04T08:17:30Z")

</div>

I took the DaneedeKruyff’s code as a starting point.

In the function renderHomey() , “homey.devices.getDevices().then( function (devices)…” disable or comment the line:

```
"if(!device.ui.quickAction) return false;"

```

This line will stop adding devices without quickAction property (on/off).

In the renderDevices(devices) function you have to add logic for device without quickaction:

The ‘else’ of the “if (device.ui.quickAction) {. … }”

`"$device.classList.toggle('on', true );"` so the device looks enabled.

E.g. for a thermometer:

```
if device.driverId === "thermometer") {
            var $value = document.createElement('div');
            $value.classList.add('value');
            $value.innerHTML = device.capabilitiesObj.measure_temperature.value + device.capabilitiesObj.measure_temperature.units;
            $device.appendChild($value);
        }
```

---

<div class="post-metadata">

**Author:** ![Hullie](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/hullie/32/9264_2.png) [@Hullie](https://community.homey.app/u/Hullie)\
**Post date:** [May 4, 2019, 8:20am UTC](https://community.homey.app/t/homey-ink-on-a-tablet-desktop/12443/34 "2019-05-04T08:20:49Z")

</div>

@DaneedeKruyff I took your code and I saw the paths the images were not correct on safari (MacOS).  
This worked for me:  
url(img/battery.png) (instead of url(…/img/battery.png) )

---

<div class="post-metadata">

**Author:** ![svermex](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/svermex/32/5320_2.png) [@svermex](https://community.homey.app/u/svermex)\
**Post date:** [May 4, 2019, 8:22am UTC](https://community.homey.app/t/homey-ink-on-a-tablet-desktop/12443/35 "2019-05-04T08:22:23Z")

</div>

Great project, working on Kobo H2O version 2. Battery life will be interesting since the Kobo has to keep the WiFi connection alive. Any expectations on that?

 ![image](https://us1.discourse-cdn.com/flex025/uploads/athom/original/2X/8/8083d771fd1b2293b0c1fa10150fc49368889e18.jpeg)

---

<div class="post-metadata">

**Author:** ![Dijker](https://avatars.discourse-cdn.com/v4/letter/d/b9bd4f/32.png) [@Dijker](https://community.homey.app/u/Dijker)\
**Post date:** [May 4, 2019, 10:12pm UTC](https://community.homey.app/t/homey-ink-on-a-tablet-desktop/12443/36 "2019-05-04T22:12:43Z")

</div>

> [@DaneedeKruyff](#):
>
> @Dijker could you try my code on your Kobo reader (and perhaps post some screenshots)?

Same as @Seraphim here, although on my Windows/Chrome The color and also the B&W ?theme=kobo-aura-hd& looks good!

I guess it is what [Emile already told in his Blog DIY](https://blog.athom.com/homey-ink/)

> I found that the browser on the device was a very old one though (there were Internet Explorer 6 flashbacks),

Think we need a switch to choose for the Kobo’s a /?LegacyBrowserSupport=Kobo& to switch to the Simple view and show on Modern Browsers all nice features…

---

<div class="post-metadata">

**Author:** ![DaneedeKruyff](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/daneedekruyff/32/964_2.png) [@DaneedeKruyff](https://community.homey.app/u/DaneedeKruyff)\
**Post date:** [May 6, 2019, 7:26am UTC](https://community.homey.app/t/homey-ink-on-a-tablet-desktop/12443/37 "2019-05-06T07:26:23Z")

</div>

> [@Dijker](#):
>
> Think we need a switch to choose for the Kobo’s a /?LegacyBrowserSupport=Kobo& to switch to the Simple view and show on Modern Browsers all nice features…

Yes, I’m afraid we’ll have to take that route unfortunately.

---

<div class="post-metadata">

**Author:** ![Jeroen\_Somhorst](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/jeroen_somhorst/32/184_2.png) [@Jeroen\_Somhorst](https://community.homey.app/u/Jeroen_Somhorst)\
**Post date:** [May 6, 2019, 12:26pm UTC](https://community.homey.app/t/homey-ink-on-a-tablet-desktop/12443/38 "2019-05-06T12:26:52Z")

</div>

Isn’t it possible to detect the tablet using the user agent from the browser?

---

<div class="post-metadata">

**Author:** ![DaneedeKruyff](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/daneedekruyff/32/964_2.png) [@DaneedeKruyff](https://community.homey.app/u/DaneedeKruyff)\
**Post date:** [May 6, 2019, 12:52pm UTC](https://community.homey.app/t/homey-ink-on-a-tablet-desktop/12443/39 "2019-05-06T12:52:14Z")

</div>

Probably, I don’t have such devices however. Best would be to even ignore the user agent and check for feature support but that would require some time that I don’t want to put into it. I will never use it on devices that don’t support those newer features.

---

<div class="post-metadata">

**Author:** ![Rocodamelshekima](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/rocodamelshekima/32/8209_2.png) [@Rocodamelshekima](https://community.homey.app/u/Rocodamelshekima)\
**Post date:** [May 6, 2019, 1:08pm UTC](https://community.homey.app/t/homey-ink-on-a-tablet-desktop/12443/40 "2019-05-06T13:08:04Z")

</div>

But…but…Danee!! I do!

[Previous page](https://community.homey.app/t/homey-ink-on-a-tablet-desktop/12443.md?page=1)

[Next page](https://community.homey.app/t/homey-ink-on-a-tablet-desktop/12443.md?page=3)