Layout Designer Timeline Improvements

Setting the scene

Many of you will know that 1.8 will have a new feature called “Playlists”. This feature will allow a Region Timeline to have one or more re-usable Playlists assigned to it. The Playlists will have “Modules” assigned to them, which we are going to call Widgets for convenience.

In their simplest form a Layout has a Region which has a timeline containing a single Playlist which contains a single widget (image/text/whatever).

In their most complex form a Layout has multiple Regions which all have multiple Playlists on their Timelines. The Playlists contain many widgets and are reused across multiple Layouts.

Our request

We recognise that the Layout Designer Timeline is functional in its current format, but that it could be improved. Adding Playlists is an opportunity to do that and we’d like to ask our lovely community how you think it could be improved and how it should look. :blush:

We’ve not written off any ideas, so anything goes - but keep in mind:

  • It may be nice to move away from the “form” pattern so that you can see the designer when you are editing the timeline
  • Its not just “Timeline -> Media” any more, its “Timeline -> Playlist -> Widgets (Media)”
  • Some people have 1 Widget on a Timeline and some have 100s
  • Each widget needs to support Add, Edit, Delete, Permissions and Edit Transition In/Out
  • Widgets need to be orderable
  • Designs are hard to explain with words, pictures are very welcome :smiley:

We’d like to get started soon, so this topic has a 5 day auto-close - thanks to all in advance!

I would like to see the ability to create and manage timelines made easier. Being able to drag and drop items into place would help.

I would think being able to have an option for a second window that could display a large quantity of the avaliable items that can be added to the timeline, would be benificial. This way users utilizing two monitors could see the avaliable items on one monitor and then drag and drop items into place on the other monitor. This would also help to free up space on the designer screen so that you could see the timeline and designer at the same time, while having your media, widets and what not easily accessible on the second screen.

Second wishlist item is to be able to lock regions so that they are not accidently moved while working within the designer.

1 Like

We certainly hope to add more types of widget in the future, but at present there are only a handful - I’m not sure how we would fill a screen with them? Popup windows are also a bit of a design anti-pattern (hence the massive rise in popup blockers).

Drag and drop sounds very reasonable though - I guess you are thinking more about items in the library, rather than text, ticker, etc? Or would you expect to add a ticker item by dragging it? If so, how would you configure the URL, etc?

Lockable regions - definitely - some sort of switch somewhere on the designer to lock their position (and perhaps another to lock aspect ratio).

I agree that a second window is a pop up problem, So maybe an alternative approach such as utilizing, for lack of the proper term, a drop down layer that is scroll-able could serve the same purpose. Once an item is clicked and held on, the scroll-able layer would disappear leaving the designer window showing. The user could then drop the library item or what not into place. I would think that if it is a ticker or something like say a webpage, a wizard would appear to have you fill out the needed information, then saving the information and adding the item to the time line or as a new region.

I am not sure what you mean by widgets when it comes to Xibo. Are you referring to the modules?

It became quite onerous to call them “Modules assigned to Regions” or “Media Assigned to Regions” (two interchangeable terms).

So we decided to call them widgets from now on - the widget is the thing you drop onto the Region (it might be media from the library, it might be a module, etc).

Widget is the current buzz word for that sort of thing too!

To see the thumbnails of all the widgets assigned in one region (playlist) would be nice. Also thumbnails of all items in all campaigns at once.

And, this is silly, but I kind of need this feature, could another layout (the whole layout) be assigned in the region as a playlist?
This way I could easily, for example, add a message (Happy New Year) or picture of snowman to all displaying layouts at once, simply by creating a layout with a region for a snowman, and a region for playlist that consists of layouts I choose.

Maybe I have to many ideas, that is because I’m still adjusting to Xibo (our company used commercial software before Xibo that slightly differs :smile:

We’re not going to be supporting putting another layout inside a region. It’s actually hugely complex to do that.

You would however be able to create your playlist, and add it to multiple regions, and then when you added Happy New Year or your snowman to that playlist it would appear in all layouts that used that playlist on them.

Is drag and drop then what people really want? I have big concerns with that when it comes to playlists with hundreds of widgets in them, or media libraries with thousands of items in them? How would drag and drop work efficiently there? It’s also massively labour intensive if you want to have the same thing three times or something along those lines as you have to drag/drop three times repeatedly.

1 Like

I don’t think so.
Don’t waste energy and time… I think Layout Designer is intuitive enough already.

@Jasmina - we do take your point, which is why it has remained essentially the same for the last 5 years. However there is intense pressure to deliver “playlists” functionality (which you yourself have a use case for :snowman:) which will add further complexity to the way the layout designer works.

It is this further complexity that we want to design in a way that works well and doesn’t confuse people.

Sure we could slap a drop down list on there to switch between assigned playlists, and do our usual “Assign Playlist” button - but that feels like it would be impossible to use.

Some ideas we have floating around:

A “toolbox” docked to the top of the designer window

The toolbox is used to add widgets (text, ticker, etc), to add files from the library and to assign existing playlists.

Once you have what you want in the toolbox, you can select the items and Drag/Drop to a point on the playlist or into a region, or select and click assign.

A “timeline” flow to present playlists and widgets

Combine the List/Grid views that appear when you click “Edit Timeline” so that they are an adaptable view of sortable, multi-selectable items which shrink down or expand out depending on the number of items in total, or the number of items selected at that time.

The widget cards in the timeline hold the Edit/Delete/Etc links, clicking a link flips the card and expands it.

Ditching the dialogue that obscures the designer

Positioning the region timelines at the bottom of the designer and having them expand to the full timeline as presented in the point above, when the region is clicked. Having a helper to indicate which region’s timeline is active (a glow or something)

Have a horizontal limit and scrolling, but ensure that it auto-scrolls to the relevant point when the region is clicked.

This would make the “next” buttons on widgets much more meaningful as the designer preview would refresh underneath (and be visible!) it would also mean that items in the “toolbox” could be dragged to the active timeline and dumped at a particular point.

As I said, these are just ideas floating around!

1 Like

I’ll own up to the brie (bree) typo in the mockup before someone points that out :stuck_out_tongue:. Other types of cheese are available!

I had just assumed you meant the small town on the edge of the Shire, which had been tagged with “Cheese” because of the excellent cheese they have there…

1 Like

This topic was automatically closed after 5 days. New replies are no longer allowed.

Specification

Implement a new Layout Designer which streamlines the process of creating layouts, provides easier “in-line” editing and a reusable toolbox for adding/assigning content.

Image Overview

Designer

The Layout designer window will remain broadly the same. The region dropdown menu will be replaced by clicking on the region which will highlight it and open the right hand region timeline pane. The other options on the region timeline pane will be available in the timeline pane.

“Action Pane”

The right hand action pane will serve as a visualization of the regions assigned playlists and their content.

The right hand action pane will also serve as the container for and add/edit/delete/other form contents.

Toolbox

A tool box will be available at the bottom of the screen which has a “Home” tab showing the media modules available to assign.

These can be drag/drop directly onto a region or directly onto the timeline - where there are options to be set, the Add form will open in the right hand pane once the drag has completed. They can also be clicked and “assigned” - when clicked they should popover a button to assign.

The home tab will also include the option to add a new playlist.

The library can also be searched for content to assign - searching will open a new tab with the library search results.

2 Likes