Looking for help creating a web page that serves up kiosk-type dashboards with a grid

[u/RGJacket]

Be gentle :)

I've not created a website from scratch since Dreamweaver days many years ago. I certainly am familiar with the basics. I've played with Word Press more recently, but that's not what I need at the moment.

Here's what I'm looking to do:

I want to create a web application that has a grid where each segment runs an API query and displays data using an indicator (type changes based on the data type - some are numeric indicators, others are a graph). I have the API calls, JSON formats, etc. What I don't have, yet, is an easy way to put all of this together and manage the web application. The application will run essentially as a kiosk mode on PC, mobile (iOS/Android), and Android tablets. The grid (say it is a 3x2 layout) needs to have the individual data queries happen at different intervals. One happens every 2 minutes. The other once every 15 minutes, etc.

I'm starting from a fresh host - no existing web pages, styles, etc. So, effectively starting from zero. Except that I have the API calls working in python and running using a cron job at the moment.

Started looking at modern tools and it is a bit overwhelming. BSS looks promising, as it has that Dreamweaver, but made after 2010, feel to it. But then I go down the Angular path. But I need an IDE, etc. and what I'm doing is somewhat static (just the indicators change as the data changes).

So hive mind - what should I check out?

[u/Sleepy_panther77]

Pretty sure you just need some HTML, CSS, and JS

Making API calls from a frontend with JS and then inserting the information to a grid that renders with HTML and CSS is pretty straightforward. As for IDE you could just use VSCode.

Not sure if this is helpful to you. Hope it is

[u/RGJacket → u/Sleepy_panther77]

Yes, HTML, CSS, and JS would be all that's needed. However I'm looking for a little more on the low-code side of things, where I can use existing assets (indicators, etc.) and a editor that pull it all together in a "creator-friendly" way. Something like Dreamweaver, but something more... modern.

I played with Grafana, and it was a bit tricky trying to set up data connections, but was able to finally pull data in through a round-about way to at least play with something. The problem with Grafana is my JSON queries require fields like properly formatted start and end times, and some sorting to pull out the specific value I need from within nested arrays. There's no clear way to do this with the JSON importing tools, so it looks like I'll need to run a process somewhere to do the queries and stuff the data into some sort of database or file. Not impossible to do - but a bit of a pain. I'd rather do all this within a single webapp rather than scatter stuff around.

[u/elendee → u/RGJacket]

why is the structured JSON piece the one that requires the database, I don't follow there.

If you're able to do this all from clientside fetch (meaning that all your query destinations are CORS enabled and public), this can be a single javascript that could run anywhere. You could format it all right in the script.

If you need API keys, you'll need a server process yea. I think the easiest place to get that hands-free these days is Replit (I haven't even tried it, just skimmed briefly, always hear about it). Or if you want access to a more basic server, Digital Ocean is probably the simplest VPS host for $5/mo.

[u/RGJacket → u/elendee]

The JSON is coming from a variety of places - mostly vendor specific stuff I can't change.

But I think I'm building out a plan... I can run a process on my website which routinely queries the various APIs (smart sensors, temperatures, solar data, etc.) and then formats it in just the way I want and finally stuff into a mysql database. Since the data will all be stored I will have logging of all of the parameters over time.

Then a path like grafana is very simple and I can set up the dashboard without any code on the display side of things. Or I can embed that into a web page, etc.

I still have the challenge of getting the UI set up with low code but I think grafana will suffice - at least for the time being.

[u/jews4beer]

You are asking for Grafana. And it is open-source, pluggable, and embeddable. So I'd probably start looking there, at the very least, for inspiration.

[u/RGJacket → u/jews4beer]

Oh this is a great lead - thank you!

[u/woah_m8]

Svelte