Enhance web interface

[linusg]

Hi,

I just go started with OwnTracks a few days ago, awesome project! However I was not particularly pleased with the web interface it ships with, it looks a bit dusty to me and has quite limited functionality, so I just made my own using Vue.js and the HTTP API of the recorder.

Now I'm wondering if there's interest in updating the existing interface, I'd be able to help with that or provide code.

I made a single page, features include live updating of latest location using the websocket (similar to the existing solution, but with additional accuracy circles, as suggested in #282), multiple layers on the same map (latest locations, history line/track, history points, heatmap), date range selection (#179), (arguably) improved detail popups, filtering by user and device, auto center and zoom button, increased max zoom level for more detailed view of individual waypoints.

I had auto zoom on each update implemented, but found it more annoying than helpful. Could be a configurable thing.

Yet to be implemented: displaying user icons (I have none in my setup so I couldn't test), maybe the table of current locations (I don't need it), address displaying (I have no geo-ip set up either), deleting waypoints (I'm on it).

It's really not that much code.
What do you think?

[jpmens]

If "I was not particularly pleased with the web interface it ships with" is a euphemism for "it looks rather awful" then I'm in full agreement; unfortunately I'll never be a Web dev.

We are very interested in your work, and you got several 👍 overnight.

User icons (i.e. CARDS are important to us here, as are reverse geo lookup and the Table of locations -- we use that a lot and I'm aware of a number of installations which use that, so please don't drop it; you are welcome to enhance it, of course. :)

I don't think deleting geo points is important as that can be accomplished with Unix utilities, but I'm not adverse to taking that.

Looking forward to seeing your first pull request. :-)

[linusg]

I'm glad it's being well received!

"I was not particularly pleased with the web interface it ships with" is a euphemism for "it looks rather awful" then I'm in full agreement

That made me chuckle :)
Every part of the current UI performs its task well, mainly visualizing a bunch of raw data in an accessible way. And I certainly know many people simply don't care about more than that, and I respect that. As a web dev however, I'm not one of those people 😄

I implemented card faces (now that I have some, I really like them) and if "reverse geo lookup" simply means pulling the addr from the JSON object like here, I did that as well.

Why are there both Leaflet/OSM and Google maps in use? I don't have a Google Maps API key and I quite like OSM, so I just went with that.

I think the existing table can just be kept, I did not touch it but worked on map features only.
Same goes for /view (which I honestly did not figure out yet). /map and /last could be replaced or kept as well, as you wish.
The "landing page" (/index.html) could be extended with a link to the new interface, be replaced by the new interface, whatever you think is best.

While there's often one or multiple build steps involved in web development nowadays (Transpiling bleeding edge JS and CSS preprocessors, mostly), I chose to go with pure CSS and JS which every somewhat up-to-date browser should understand. Internet Explorer, anyone? 😉
That basically means deploying the web ui is the same as always, as well as packaging.

External JS dependencies are [email protected], [email protected], [email protected]/dist/leaflet.js, [email protected] and [email protected], minified ~165kB loaded from https://unpkg.com. That's less than ~216kB for /last!
On the other hand, I like icons and the missing build step means including additional 200kB for the icon font + CSS. If page loading time is a concern here, a custom icon font including only used icons can be created, but might have to be updated - or by using webpack, required icons can be embedded as SVG. Or, the people who hate icons vote to remove them altogether 😏
To put things in relation though, the 2.8k location points I have are >700kB.

I don't think deleting geo points is important as that can be accomplished with Unix utilities, but I'm not adverse to taking that.

Initially I thought the API for this already exists, now that I see this isn't the case, I'll leave this to someone else for now because I'm pretty bad in C.

I can prepare a PR so some people can test it, have a critical look on the implementation (e.g. I'm neither using format=geojson nor format=linesting, only format=json, which has both advantages and disadvantages) and give feedback.

[jpmens]

Why are there both Leaflet/OSM and Google maps in use? I don't have a Google Maps API key and I quite like OSM, so I just went with that.

I started off using Google maps, and we later had contributions for OSM. Since then, we (OwnTracks project) have decided to go OSM only and I was actually thinking about ripping out the Google stuff. I haven't done that yet, but feel free to -- it suits us well. The reasoning we have: we want to stay as open as possible, hence OSM. While it can be argued that Google's maps are clearer/better-looking/whatever, I certainly disagree with them tracking us. OSM it is.

The "landing page" (/index.html) could be extended with a link to the new interface, be replaced by the new interface, whatever you think is best.

Let us replace it with the new interface, but I'd very much like us to be able to get at the "raw"-ish data somehow, maybe with a "download in format xxx" dropdown? We have users who use that raw data and we also have users with several dozen devices they want to see.

External JS dependencies

I'm not a friend of loading external dependencies on the fly, and I'd very much appreciate our delivering all we need along with the Recorder if at all possible. In addition to then always having what we need, we have one layer less of "tracking" when our Web interface is opened.

[linusg]

OSM it is.

Thanks for the explanation, makes sense!

I'd very much like us to be able to get at the "raw"-ish data somehow, maybe with a "download in format xxx" dropdown?

That shouldn't be hard, however I'd like to make sure the UI doesn't get cluttered and probably will have update my layout then.

I'm not a friend of loading external dependencies on the fly, and I'd very much appreciate our delivering all we need along with the Recorder if at all possible.

I saw this is the case already (with the exception of jQuery), and can of course use local copies.

In addition to then always having what we need, we have one layer less of "tracking" when our Web interface is opened.

I absolutely agree with you here. One could just enable the Google location history on Android, but being able to get a location history of my devices while staying in absolute control over the data is why I chose OwnTracks in the first place!

[jpmens]

I'd like to make sure the UI doesn't get cluttered and probably will have update my layout then.

A link to a separate page should be sufficient; no need to revamp everything.

[tabacha]

Hi,
I can help with beta-testing. Is there any code availabe jet?

[linusg]

I can help with beta-testing. Is there any code availabe jet?

Unfortunately not, I'll make a PR now. Replacing all external dependencies by local ones will take some time though.

[jpmens]

@tabacha, it's your turn. :-)

[fab33]

It will be fine if we can have autozoom and user images