Some thoughts about frontend improvement

I’ve been quite busy in the last 2-3 weeks building what’s basically a completely new frontend for a customer. It’s not as general purpose as the current info-beamer web dashboard and “only” handles configuration of a single type of package, but it’s basically a complete frontend to manage

  • Authentication (login/logout)
  • Devices (add/remove/rename/group/etc…)
  • Device details (live view/sensor values/device configuration ui)
  • Assets (similar to the new asset page)
  • Setups (add/remove/copy/configure/assign)

This is implemented as a Vue.js based single-page app. In other words: You can upload assets while editing the setup and it’s quite snappy as there’s no page reloads, only API calls. In addition the result can be deployed on any static webserver as there’s no extra backend part required. Only the info-beamer.com API is used.

Writing this code proved two things to me:

  • The API is (as expected) fully usable for building almost any kind of frontend on top of it.
  • Modern frontend development can actually be really fun.

The current state of the info-beamer.com frontend isn’t optimal and there’s a lot of minor issues that needed to be improved for a while now:

  • Uploading assets while editing a setup’s configuration
  • Major improvements regarding the handling of the auto generated interfaces for setups (like easier reordering in playlists and so on)
  • Sorting/grouping of setups/package/devices

Now I figured I might approach this in a new and interesting way: I might build a new configuration frontend replacing the current Devices/Setups/Packages and Assets tabs using a similar approach as described above. In addition to that, the full source code for that frontend could be released on github. This would enable you to

  • Build your own modification based on the Frontend and deploy it for your customers using the info-beamer hosted service as your reliable backend.
  • Build white label pages for customers while having the full control over how the frontend behaves.
  • See how the API is used (well, technically you can already poke into the API calls made using the web inspector)

Thoughts and feedback welcome. Note that this isn’t a promise and there’s no ETA for any of that.

3 Likes

Hi There Florian,

Is there hope for an automatic Playlist modification? Meaning that any modification made to a master playlist consequently changes all its instances and state, in whatever setup where the said playlist might be present.

The playlist tab is a mis-feature and was never really useful. The reason is that there are no instances: When you import such a playlist into a setup, the asset ids of the playlist are added to fill the list in that setup. But there’s no additional state. Once filled, the setup has no idea which playlist (if any) the assets added came from. And as such it’s impossible to automatically update them later when you edit the playlist. I wanted to remove the playlist feature for a long time now. I’ll have to think about to better approach this issue.

The playlist tab is far from being a mis-feature. It could reveal itself as a powerful user-friendly feature, when dealing with full commercial application. It goes with the realtime campaign modification and application. We tested it… Really need to invent that feature that allows anyone who wants to display, at anytime, does it into an API, that includes content from a playlist in realtime.

We are working on it… but LUA is a new language to me…

It never fulfilled its only purpose: Having a way to manage playlists and have changes automatically applied to setups that use those playlists. Right now it’s just an awkward way to group assets and to then assign that group to a setup. In hindsight I regret adding this feature.

With the API it’s of course possible to build hugely complex rule sets and automation around setups and their assigned assets. Building a customized frontend for that should be rather straight forward. But there really should be a way to do some of that from the UI. I guess I’ll have to think about a better approach at some point.

Hello Florian,

How could the “White Label Page” for a customer be deployed?

More specifically, I’m looking for a customer-user to have the ability to:

  • Login to a branded color-themed page
  • View owned-screens
  • View pre-defined content layouts
  • Upload/add content to layouts
  • Assign layouts to owned-screens
  • Edit

The customer-user would be given a login that takes them to a pre-formatted account with assets already added to pre-defined layouts created by the admin-user (me). The customer-user would simply edit and add new content.

Can you get in contact by email with hello@info-beamer.com to see how we might solve this?