Front End UI Investigation

[tcatkins99]

Hey all. I've been following this project for a while and finally got it setup on a Pi over the weekend.

Since I can't help myself, I decided to start tinkering with things and figured I'd have a go at a revamped UI. My background is React so of course I started there!

My idea is to add an "api" of sorts that just serves up JSON to the front end and React handles the rest. I'm not at all a PHP guru but I have at least gotten enough hacked together to serve up JSON in order to create the below basic overview page. It's not even close to feature complete but I just wanted to see if I could at least prove that it could be done.

Anyway, if there is interest in this I'll continue forward on it and setup a fork for this and hopefully others will contribute.

[becausebirds]

It looks beautiful 🤩

[tcatkins99]

Thanks! I am hoping to get some time to do some more to it over the weekend. Below is a screenshot of my current work in progress.

[Teflon98]

I think those both look fantastic. With some very quick and dirty Photoshopping, I am wondering what your thoughts on the following 1.5 concepts.

On the Overview page, on the left, there's the "Species Detected Today" link. Right now, it just lists the species detected as a table. I think it would be super nice if there was an option to make it a gallery. This could be as simple as just a table with a single picture in one cell, the common name in the cell below and the scientific name in the cell below that. The table's columns could be dynamic or fixed. My thought is that a gallery with pictures would be much more engaging to someone like myself who doesn't know what many of the birds look like.

On a slightly different note and building on what was posted above... I feel the initial presentation of a more compact form may be helpful. The spectrograms are great but they dilute the flow of species. If each of the cards could expand when tapped and then show the corresponding spectrogram, that would nice. Most important to me would be an option to shown only the unique species and not the individual detections of the same species. (Yeah, I know the graphic I cobbled together doesn't show this.) The card associates the time and the percentage together as well as having the playback control in the same area.

Once again, I think this project is amazing and thank you for everything that you do!

[jaredb7]

Love the idea and looks awesome :). I'm along to help you flesh it out and develop.

Can I suggest we use Limonade to power the API? just so it's super lightweight and looks after handling the URLs and JSON output
https://limonade-php.github.io/

Have the API completely separate to the existing code (so we end up duplicating functionality and can run both the old and new UI side by side)

Have the API directory like this

Each of the API endpoints in their own file... we probably won't have too many, likely settings, services and detections (holds responses for everything from latest detections, species etc)

Then more or less describe the API endpoints like this

<?
require_once 'lib/limonade.php';

$skipJSsettings = 1;

dispatch_get('/detections/list/:DetectionDate', 'GetAllDetectionsForDate');
dispatch_get('/detections/list/:CommonName', 'GetAllDetectionsForSpeciesName');
dispatch_get('/detections/latest', 'GetLatestDetectionss');

[tcatkins99]

That's awesome and you are thinking about along the lines I am. I have created a separate api path at /api that handles all the rest-y stuff but I don't know much about php so I had just hacked together a rest api; so that lemonade library looks pretty interesting.

Let me get this tidied up and I'll push my WIP to a repo and hopefully we can all bang away at it and get it moving forward.

[Teflon98]

Greetings,

So, I am happy to help in any capacity. My coding capacity is fantastically limited, unfortunately: As in, pretty much not going to be of any use. I might be able to tweak things.

If there's something I can test for usability, experience, or errors I would be happy to give that a go. I do have a little experience with UX and UI design.

[tcatkins99]

I have finally added the repos here on GitHub for this. The first is a fork of this repo that adds the necessary api paths to enable the frontend UI. The other repo is the UI itself.

This is really more of a proof of concept than anything but the basics work for the overview page and the search page. The front end is in react/typescript using Vite so you'll need node to do any development/building of the UI. I'm glad to see there's interest on this and look forward to moving this forward to a more complete package!

https://github.com/tcatkins99/BirdNET-Pi
https://github.com/tcatkins99/birdnet-pi-alt-ui

[jaredb7]

@tcatkins99 This is my first pass at building out the API, Doco is at https://documenter.getpostman.com/view/2732346/2s93si1ACY
Quite happy with how it's turned out so far, the data returned by the API is more or less the same as what the current web ui receives,

I haven't submitted a PR for it yet as it relies heavily upon a heap of work I did consolidating code spread across all the current web ui pages into a common file. But hopefully something very soon.

[krummrey]

Is the project still active? And is there an instance to see?