How to run LoveLace GUI as an Android App

Share your Projects! Dashboards & Frontend
1

I didn’t see anyone doing this, so thought I would pass on…

How I Run LoveLace GUI as an Android App

You can view the LoveLace GUI (referred as LL here) from the Home-Assistant Web Server on most any Web Browser. But on a smartphone it looks pretty funky with the browser’s bars and buttons wrapped all around the LL page and not much like a typical standalone android app.

I found that after a certain android version (don’t know which), Google started to include with their android os, a highly optimized version of Chromium. Then they added to their SDK a function named “WebView”.

This gives android app developers a way to embed HTML5 into their app along with any other app functionality that you would see in a normal android app.

Not really wanting to learn to write an android app today, I searched the Play Store looking for someone already using WebView.

I found a few and decided to try this one:

Website Viewer
Codestore Technologies Pvt Ltd.Tools

It was easy to install and when loaded asks for your homepage url. I entered “192.168.0.116:8123/lovelace/0”. After clicking on the OK button, I was amazed to see a nice clear rendition of my LL Overview page that looked just like a nice little app should!!

All my Entities worked with the touch screen and I was really happy with the results.

After more research, I found that Amazon had done the same thing, but calls it a Hybrid WebApp. So I took the apps apk file and sideloaded it on my Amazon 4k FireStick and after installing the apk it also ran great!! The only catch is that since the app is not written for the Firestick with no touchpad, I had to use my bluetooth mouse. But even that works pretty darn good.

So now I control my home from my TV using a FireStick!!! Hooray

However, I would appreciate hearing from anyone knowing of a webview app that was made for fire stick.

I see this as a powerful way to leverage all the hard work that went into creating the LL GUI into an integrated efficient UI for a real android app.

–Regards

p.s. they claim to have an unprecedented 3 week release cycle here. So i would expect to see this mainstreamed in ohhh bout two to three weeks. hehehe

2

This is built into chrome and Android. There is no need for a separate app.

The first time you access your HA instance from an Android device, it will ask you if you want to add it to your home screen…boom! It’s an “app” now.

4 Likes
3

You can just go to 192.168.0.116:8123 and click the menu and click “add to home screen”. Ive been using it like this

1 Like
4

And what, you couldn’t have just said that? lol :slight_smile:

Well I smell there is more to tell than that.

I’m not positive, but I’m pretty sure that from the rivalry between Google and Amazon, Amazon doesn’t have a version of Chrome loaded up on Firestick. So me thinks that Chromium is separate from Chrome and that Chrome is invoking it to do it’s “Home Screen” thingy.

I would like you to try that trick on Firestick on your TV, which is where I would like to use it. Bet that wont work even though my test app does.

5

Thanks for the feedback. It gave me the idea to just try Amazons browser (silk).

It works Great!!! Even has a built-in toggle mouse.

6

Even Firefox on Android has an “android” icon that puts it in full screen mode. So Firefox can see the capability too.

7

A not so great pic of my 42" TV

20191001_080421
20191001_0804213264×2448 1.54 MB

8

Hmmm… It’s seems to be working really well, now Im wondering why they (HA dev team) are bothering to burn the time to create an iOS and Android app?? I think they are calling it Companion.

9

A Home Assistant app will be useful so you can send notifications to the HA app, or use the app and phone as a presence sensor in Home Assistant.

This website viewer app may be useful on Fire tablets if it can do a full-screen mode and can display custom Lovelace cards. I’ll test it out later.

Update: The app doesn’t run certain Lovelace cards like button-card or weather-card, and doesn’t remove any borders, so it’s not the best option on Fire tablets. The best option for Fire tablets (aside from flashing to a pure Android OS) so far is to use the Chrome browser’s “Add to Home Screen” option and an app like Immersive Fullscreen to get rid of the top and bottom bars.

1 Like
10

Well, the iOS version has been around for a while, and it provides device tracking built into it…as well as some sensor data.

A “companion” app allows things like sensor data, presence/device tracking, push notifications, etc. Just look at Ariela for an example.

1 Like
11

Together with the compact custom header you can create a very app like look& feel

12

I did basically the same, but encountered some errors with my setup. Here is how I solved it. Maybe this helps someone.

To get remote access, I setup nginx as a reverse proxy and protected it with basic authentication. However, each time I called the app again from background, I got a “401 Authentication required”.

After reading a ton, I learned that there is a problem with the Javascript Service Workers who don’t pick up a basic authentication protected connections correctly resulting in the 401s.

I solved it by implementing my own webview app (and with implementing I mean copy paste code from the internet :D)
and added a function that removes the stored service workers on startup. (See here, its German, but maybe Google translate helps https://de.switch-case.com/67501731).

Having this implemented everything is running fine.

The only issue that remains is that the history does not work from remote. But having Influx+Graphana it’s fine for me.

1 Like
13

Gotcha…

But I think thats what a Hybrid WebApp is for. It combines WebView with regular android stuff. i.e.:

package com.qiteq.gpswebview;

import android.Manifest;
import android.os.Bundle;
import android.support.v4.app.ActivityCompat;
import android.support.v7.app.AppCompatActivity;
import android.webkit.GeolocationPermissions;
import android.webkit.WebChromeClient;
import android.webkit.WebView;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        WebView wv = new WebView(this);
        wv.loadUrl("http://qiteq.pl/stack/index.html");
        setContentView(wv);

        ActivityCompat.requestPermissions(this, new String[]{
                Manifest.permission.ACCESS_FINE_LOCATION,
                Manifest.permission.ACCESS_COARSE_LOCATION
        }, 0);

        wv.getSettings().setJavaScriptEnabled(true);


        wv.setWebChromeClient(new WebChromeClient() {
            @Override
            public void onGeolocationPermissionsShowPrompt(String origin, GeolocationPermissions.Callback callback) {
                callback.invoke(origin, true, false);
            }
        });


    }
}
14

Nope.

Like I said, look at Ariela for an example of what can be done with an app.

15

ok thanks, will do.