Hi everyone 
At Sixth Generation we recently finished a project that relied heavily on the Bounding box and the Reorderable list component. We’re a big fan of these components so we wanted to share our learnings with the community.
What was the challenge?
Standaard Uitgeverij , a Belgian publisher of books and comics has launched an app called Strips.be where users can read their favourite Belgian comics on their phone or tablet. We have built the backoffice tool in Retool that manages the reading experience of the application.
An algorithm in the backend parses comic books and determines where each frame is located on a given page. In general the algorithm does a pretty good job at finding all frames on a page, but in some instances it needed some manual finetuning.
An example of what happens when the algorithm misses the mark on capturing the right panels.
What was the solution?
We solved this challenge by building the Playbook Editor. A tool that allows backoffice users to visualise and update panels the algorithm has detected.
It's easy to browse through the comic and see the panels the algorithm has detected on each page.
Adjusting the fit of the panels is straightforward with the Bounding box component — simply tweak them to better frame your content.
If the narrative should take a new direction, the panels can easily be dragged and dropped in the right place with the Reorderable list component.
Learnings
With a bit of custom CSS here and there we were able to build an easy-to-use editor for backoffice users. As we spend some time working with the Bounding box and Reorderable list component, we wanted to share some insights.
- It’s not possible to pan within the bounding box, so it’s easy to lose track of your image while zooming within the canvas. This reset bounding box trick helped us to reset the view of the canvas when the user gets lost.
- There is a race condition where the initial bounding boxes on the canvas are cleared when the image take a bit longer to load. We solved this by adding the initial bounding boxes with a slight delay.
- There seems to be a bug where the delete icon on the top left button of a bounding box is no longer shown, so we coloured the button red to indicate the delete button.
- There is no auto height setting on the Reorderable list component, so we’ve set the height of the component itself pretty high to account for large lists of frames.
If you have any questions about this case, don't hesitate to reach out! If you're interested, you can read more about it on our website.