Guidance with RESTful API UI design

I have these VoIP phones that are basically a small tablet (7-10ish-inch) propped up on the desk with a handset resting on it, they make great control surfaces for automation, random information display or video feeds. If you’re familiar with these, you probably know these devices are super cutting edge….for about two months tops, then they get old real quick, ancient, really. Running Android 5-ish, means their certificate stores are too outdated to connect to the Play Store to get some apps needed, such as the one for the automation controller that was lost during a factory reset.

As a workaround I had planned integrating with other controllers with built-in much better web UIs and control indirectly with these when needed. Kiosked browsers remove clutter, and you don’t need worry about control for the phone itself as you only need to pick up the handset to summon the dialer and from there you can make your way out of the kiosk. That’s already have of the pieces sorted out. But again I forgot the certificate problem plus the fact that these platforms serve pages are just too fancy for the browsers I have available: Opera Mini, an old version of Firefox, and the Android version 5 (give or take) system browser. The pre-made UIs not an option anymore, the last chance I have to make it work is designing the pages myself, the controller has a REST API, which, on principle I understand. I know how to interact with it on the command line with curl or Invoke-WebRequest.

Designing a UI in my vectors app (Affinity Designer is my goto), cutting it up and reassembling it in markup linked to specific calls appears to be all there is to it. It seemed easy enough. Where I got lost is in the RE part of REST. How do I get the webpage to receive updates from the server so an image is changed to represent the status of the associated device. It would have to “run”, (i.e. be a web app, not just markup and CSS) don’t it?

The controller does include a basic web server but it’s designed by devs, not graphics- or much less UX designers, it’s also infuriating to work on but it is regardless an implementation example that could be useful to build error-free syntax calls that’d be attached custom UI components:

Sidenote

Taking the screenshot I noticed it’s actually the page that requests the updates. :slight_smile: My bad! I still wouldn’t know where to begin though but at least I won’t try to implement websockets or something.

Can this be achieved with Bootstrap Studio? Could you maybe share a link with a little guidance or tips or a crash course, anything really.

Thanks!

The short answer is Bootstrap Studio is primarily a front-end focuesd application.

If you are gong to wire things up to work with primarily js (I don’t code applications in js so I am not sure about implementation), it could work with minimal effort taking advantage of the built in web server. You will have to wire up your listners etc. BSS has the ability to add custom code blocks and I believe along with adding additional utility/supporting js files you would be okay.

I hope this helps.

I usually fetch json data to update UI or content from site that created in BSS, is this what you expected?

I tried to read with high focus, but i still don’t get what you mean, could you write much simpler whats ur goal? Cause i dont get the boilerplate text over there snd its mixing my feelings about the question and delivery from you… Is your goal displaying data from the api in ui using bss to have “live” status etc of smth?

Could u share the api with me if so and tell me what do u want to display, how and where

1 Like