To centralize, please keep info about your DIY project expansions on this in this thread and show us the results!
As the Kobo H2O presentation didn’t show nice om my Kobo Aura HD that was lying around it needed an own theme. Today I forked it, cloned it local on my Windows and learned myself some CSS code to fix it for my Kobo Aura HD that was lying around.
Here the report and instructions how to do that:
[WIP - have to write it…]
Kobo Aura H2O ( ?theme=kobo-h2o )
Kobo Aura HD ( ?theme=kobo-aura-hd )
Web browser ( ?theme=web )
so copy the URL from the developer inspect console and just change that part of the URL
I found an small error in the original instructions, Start your local Server with serving the app folder: serve -p 5000 <Pathe-to-your-local-copy\homey.ink\app (or references don’t work…)
Then your local URL reference will look more like the online one, Remove the app/index.html from it, it will now be: (These two are reported to Athom, probablyfixed Now: http://localhost:5000/?token=YOUR_TOKEN&theme=YOUR_THEME .
Both Kobo’s need a rotation, developing local in Chrome doesn’t, remove in the 11th line the 9 from the rotate(90deg) and you are done for local testing! replace it back before going to production -webkit-transform: rotate( *9* 0deg) translateX(180px) translateY(180px);
Trying the page from your device it needs the IP of your developing computer! Where localhost always point back to the computer you work on, I replaced it with the IP Address in the URL to test it from the Kobo. http://**192.168.1.2**:5000/?token=YOUR_TOKEN&theme=YOUR_THEME .
Then probably it will not work as your good protected Computer blocks it in the firewall and/or Windows Defender. Open an Powershell as Administrator and past, New-NetFirewallRule -DisplayName "Enable Serve Inbound Port 5000" -Direction Inbound -LocalPort 5000 -Protocol TCP -Action Allow -Program "C:\program files\nodejs\node.exe" -Profile Any Now it should work (and saver than disabling the complete Firewall!)
Kobo themes use a rotation to support landscape presentation on the browser that by itself does not support rotation. See the line with -webkit-transform: rotate(90deg) in the /app/css/themes/[themename].css file.
I immediately have to addmit I am not an CSS guru!
I just do something until it looks nice for me. and Probably al lot of CSS code can be optimized.
Anyway, I want to share the result and I created a Pull Request to share if from Emiles official repository!
Use it, learn form it, help me to learn CSS and optimize or re-use it and show us your results!
My code is now here:
The “Screenshot” is made on Windows as I don’t know how to do that on the Kobo.
Below the Pictures also some device specific Tips!
scroll down to “Setup instructions” and log in with your Athom account
after logging in, look at the developer tools console, which should contain a log entry that looks something like this:
right-click on that URL to copy the link address to the clipboard
paste into a new text file (or something) to see the full URL, and change https://app.homey.ink to http://localhost:5000; the result is the URL that you can use to access the server running on your local PC
I think this looks quite interesting. But it would be nice if you could have different favourite flows and devices on the tablet/dashboard compared to your phone app.
Maybe you’d like to have several tablets around the house or just have different devices than your phone.
From what I understand this is not possible today, or am I wrong?
anyone an idea why favorite devices can only be real devices? (like lights or switches)
I added the the Thermostat, couple of thermometers an doorcontacts to my favorite devices but that don’t show up in the dashboard