This toturial describes a way to build a usable dashboard using a chrome/chromium based brouwser.
I’m using a raspberry Pi with touchscreen in our living room as dashboard. It runs chromium in kiosk mode. (GitHub - jareware/chilipie-kiosk: Easy-to-use Raspberry Pi image for booting directly into full-screen Chrome, with built-in convenience features for unattended operation. Perfect for dashboards and build monitors.)
Last week i moved from a custom homeydash variant to just use https://my.homey.app
On a rather small screen the my.homey.app interface i preferred to have a more minimalistic design. Chrome extensions like stylebot are a great tool to change the look and feel of a website, and thus ideal for this use case. Have a go on your computer with it and see how easy it is to hide certain parts of the interface.
Unfortunately the current chrome extensions won’t work on a raspberry pi due to the older version of extension support. It is however super easy to make your own extension that is supported.
Step 1. Install and use stylebot on my.homey.app.
Step 2. make a folder on your computer and name it something like “mycleanhomey”
Step 3. add a file named manifest.json with the following content.
{
"manifest_version": 2,
"name": "My Clean Homey",
"version": "0.1.0",
"description": "cleans up my homey interface for small dashboard",
"content_scripts": [{
"css": ["styles.css"],
"matches": ["https://my.homey.app/*"]
}]
}
Step 2. in the stylebot window select the </> Code tab to view the the style changes. copy the content of that. (or use mine below) and save this to a new file named styles.css.
header.css-1de8ztc.e1m911683 {
display: none;
}
h1.css-n2pkw2.eci7lag0 {
display: none;
}
div.css-s1veh7.e1v0h46k1 {
display: none;
}
div.css-1jkkn79.e1p7vz1r0 {
display: none;
}
nav.css-1osi4ik.eagfq2g3 {
display: none;
}
h3.css-121gyid.ew8axpo0 {
display: none;
}
section section p {
display: none;
}
Copy the folder with the two files (manifest.json and styles.css) to the system you want to use the changes on. in the browser go to extensions, open from extracted folder and select the folder. you have now build and used your own browser extension to change the look and feel of my.homey.app.
