Skip to content
View in the app

A better way to browse. Learn more.

Web Designer Forum

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

A tool to create interactive content

Featured Replies

Hello everyone, my name is Lucas and I'm new to the forum. I want to share with you a project I've been working on recently. It's a tool for creating interactive content, including websites. The name is TilBuci and it works in a similar way to CMS applications, such as Wordpress, including collaborative creation features. The idea is to develop a visual tool that simplifies the creation of interactive content for various screen formats with several export possibilities, from websites to apps. TilBuci is a free, open-source project and works with JavaScript. The website is https://tilbuci.com.br/ and I also created a short "welcome" video:

https://www.youtube.com/watch?v=kkGz4JhQGYk

An example site with a documentary I directed some time ago (in Portuguese only): https://aglomerado.tilbuci.com.br/

Hope you like it 😉

(PS: I looked for a specific forum for this post here but since I couldn't find one, I ended up posting in this general category).

Hi @lujunq - a clever tool but unless I'm missing something where would you use this?

On your demo for example how would anyone access the movie? It it embedded in a website or something?

  • Author

Hi, @fisicx, in that example the movie is the website itself. It was entirely created using TilBuci and exported as the site.  A "movie" on TilBuci is any type of project, from a truly interactive film (as was the only form of export at the beginning of the project) to all the possibilities we have today. The process to create the example site:

Creating the site using the sofwtare interface:

01.thumb.jpg.2ddddfaa1c9961d13c45e44b8514705d.jpg

Exporting the movie as a website

02.thumb.jpg.35a11f2ebe62ee8aace190beb63f7d1c.jpg

The exported folder contents (including the base index.html you access when the URL is open):

03.thumb.jpg.80d0865f23e6e439742aefad36d0ad28.jpg

 

 

Hmm.....

Not sure how this would be anything like a CMS.

How for example could you create a blog and allow comments?

How would you integrate a payment portal or connection to a CRM?

How would you add a contact form with validation and processing?

How could you do something like this:

https://comparisonplugin.com/all-the-things/

  • Author

Oh, it is being worked on in the direction of CMSs. When you install TilBuci on a web server, it starts working both as an editor and as a content viewer (exporting content is an additional feature).

Currently, the implementation of collaborative work is already advancing, so it is already possible to have several people working on the same film, posting and editing content (in the form of "scenes" - again using terms from the original functionality of the software). These collaborators can have different levels of access and functions.

04.thumb.jpg.88971713832f20cc6523cb404787b25e.jpg

As for data entry by content visitors, there are already several ways to do this, both by embedding forms in the layout and by opening input popups using actions that have their validations, such as numbers and email addresses, but the comment/rating functions have not yet been implemented.

05.thumb.jpg.5675e41f38ae6d9155eac44168569a2e.jpg

06.thumb.jpg.e2ecbadffdfeba08a727b20709453379.jpg

07.thumb.jpg.00e4517e2b94972f8be4a7e10beab512.jpg

As for payment methods, I am really working on restricting content based on subscriptions. Currently, it is already possible to restrict access to the content of a film to groups of visitors (identified by their emails - the software already has a simplified system for identifying/logging in visitor accounts). The idea here is to use the plugin functionality already existing in TilBuci to add payment methods for subscriptions to these groups.

09.thumb.jpg.d29da336e3efc31c9180bd3e2207cee2.jpg

08.thumb.jpg.6db161c7c4be82d80af1ba759a2cda95.jpg

There really is still a lot to do in the software 😉

OK. But I can already do all that in WP.

Even recreating something like your demo is fairly simple.

I get that it's a great tool but getting people to download and install and then use it is going to be difficult. I can't even get past the dark interface. It looks very gloomy.

  • Author

I understand your point, but I think it's cool to have different tools focused on the same goals, like WP, Joomla and the like. Each one brings a different perspective and way of working and can better suit the needs and interests of one person or another. The important thing is to have a range of options.

Now, as for convincing people to download, install and use the program, that really is a big challenge 😉

Oh, another content I'm creating with the tool:
https://tilbuci.itch.io/third-floor

You are correct. But your tool isn't a replacement for WP or Joomla or Concrete or any other CMS.

It's a nice way to do animations and you might fond some people enjoy using the tool but there are much simpler ways to create interactive content.

All the best and hope it gets some traction.

  • 2 weeks later...
  • Author

Hello everyone. There is a new version of TilBuci available with updates to the desktop applications exporter (Windows, macOS and Linux), but the big news is that you can now try the software before even downloading and installing it! For a 7-day trial period, visit:

https://try.tilbuci.com.br/

You will be able to try all the features of the software and export your creations to continue your work on your own TilBuci installation.

I've created an account and tried very hard to build a movie but I just don't get it.

All I want to is add a 'hallo world' button to the centre of the page. But this seems impossible.

And I really struggle with the grey. I need a white background on which to create.

The controls are complicated and not user friendly - how for example do you centre an object?

And you don't have a remember me option.

  • Author

Oh, I'm glad you're trying it 😉

You can convert any placed media into a button - a picture, a shape, a text and even a video. Just select it and use the trigger actions to set the bahevior:
https://tilbuci.com.br/site/getting-started-with-tilbuci/actions/

The placement properties on the right will help you put the elements where you want. For an example, centering a button horizontally here:
image.png.aa8e69b1100ba6aefb103ffb83543282.png

The word 'media' is the problem. Text is not media. Headings are not media. Buttons and links are not media. Images and video is media.

Centering an element is a CSS function. This means for example: margin: 0 auto;  or text-align:center; If you position using pixel dimensions you lose all responsiveness.

It's the same with the text styling. I prefer to use percentage sizes. That way I can adjust the base font size depending on the device and orientation which then automatically changes all other elements.

What is really simple to do in something like wordpress is complicated using tibuci. You know the system and it's been build to meet your needs. You need to do a lot of user testing.

And your tutorials need more details. And a white background.

Look at this guide to adding video to wordpress:

https://wordpress.com/support/wordpress-editor/blocks/youtube-block/

See how each step is explained

  • Author

Oh, thank you for your replies, gathering much information from it 😉

Grouping all elements under the term "media" is intentional: the idea is to reflect the functioning of the tool that treats texts, audios, videos, etc. in exactly the same way, making no distinction between them. This is true even when creating playlists, where a single playlist can contain elements of all these types, without distinction. The choice of terms is always important, even to identify the purposes (a fun fact: originally, "movies" were called "imaginations" in TilBuci, and "scenes" were "thought streams").

TilBuci does not exactly use pixels for positioning (following the common idea "a pixel is not a pixel"). Think of the movie area as a canvas: the size in "pixels" is more of a reference for creation (let's call it points to differentiate). When the content is displayed, this canvas is resized to be centered on the screen in order to maintain the created layout, so if an element is positioned exactly in the center during editing, it will always be displayed centered, regardless of the screen resolution or aspect ratio. Of course, all movies allow editing of this area for both horizontal and vertical screens at the same time.

Each tool has its own way of working. In the case of TilBuci, some references are graphic programs or even multimedia editors like Flash/Animate. This is good: each person can feel more comfortable with one or the other proposal.

About the tutorials, you couldn't be more right. I really need to improve them a lot!

Whilst I understand why you group all elements under the media banner it's not intuitive. Especially for those unfamiliar with graphic programs.

Wordpress uses the term 'block' to define an element:

https://wordpress.com/support/wordpress-editor/blocks/

It's more generic and gives you far more scope to expand the range.

As to the pixels thing, maybe allow me to choose the unit. Add icons for left, right, centre. The arrows you have tend to be used for increase/decrease - which does confuse.

And please please please give me an option for a white background!

  • Author

I understand the issue of terms quite well. It really is a question of what the tool's audience is used to. I've been working with graphic artists, videographers and poets on some projects using TilBuci and they seem to understand this choice well - perhaps this is dictating a lot of the software's choices. This is really an audience that lacks tools that speak the same language as them and are more used to these graphic programs.

It really seemed to me that the choice of some of the interface icons could cause confusion. Tip noted for the next review 😉

Regarding the interface color, the choice of themes in TilBuci's settings is really on the radar. There is so much to do and so little time... Currently the interface colors can be adjusted individually (and manually one by one) for the displayed content (which uses the same structure as the editor), but this needs to be improved a lot (like using themes ant not only idividual color setting) and brought to the editing interface as well.

image.thumb.png.391702429a6b735eeda665600f86ec8e.png

If you are targeting graphic designers and people in similar professions and they all understand the terminology then leave it alone.

But if you want to include a wider audience then the terminology needs to align with what they are used to.

Even calling it a movie is confusing. My mum wants a widget for her website, she doesn't want a movie.

  • Author

Yes, I have a lot of experience working with this audience. Right now, they are really my focus with the tool. Thanks for the tips 😉

Oh, if you want to follow TilBuci on social media, here are some links (still in the early stages)

Instagram: https://www.instagram.com/tilbuci/
Bluesky: https://bsky.app/profile/tilbuci.bsky.social
Facebook: https://www.facebook.com/tilbuci/
X: https://x.com/tilbuci

  • 1 month later...
  • Author

Oh, thank you a lot. I expect to release an updtaed version soon with some nice improvements 😉

The tool website has a "getting started" section (https://tilbuci.com.br/site/getting-started-with-tilbuci/) as well some quick tips updated on a daily basis (https://tilbuci.com.br/site/quick-tips/). You may also try it online before downloading it: https://try.tilbuci.com.br/

  • 2 weeks later...
  • Author

Hi, everyone. A new TilBuci version is available with several new features!

NEW BORDER EFFECT
Images now have a new effect: borders. You can set the color, strength and blur of the borders.

COLOR OVERLAY
The instance color menu now has an adjustment of overlay shapes, such as the traditional add, difference or multiply.

STATIC SCENES
You can now set scenes as “static”. When these scenes are open, TilBuci pauses at the end of each keyframe, not automatically following the animation. This allows greater control of the display when necessary.

CONTRAPTIONS
Version 8 brings a new feature, the “contraptions”, which are tools for simplifying the creation process. Initially, the creation of menus is available, which can be configured from the contraptios right menu and activated through the new contraption.menu command.

NEW COMMANDS
New actions are available for your interactions. For scene display control, scene.nextkeyframe, scene.previouskeyframe, scene.loadfirstkeyframe, scene.loadlastkeyframe and scene.loadkeyframe. For access control, system.visitoringroup. For menu display, contraption.menu and contraption.menuhide. Check out the latest version of the TilBuci Scripting Actions document to see what's new.

BUG FIXES
The new version fixes all bugs found so far, including color adjustments for visitor input interfaces.

-------

The new version is available from the software repository:
https://github.com/lucasjunqueira-var/tilbuci/releases/tag/v8

  • Author

Mainly among artistic and educational projects. We will start using it this semester at the digital arts course at my city's local university (UFMG).

  • 3 weeks later...
  • Author

Hi, everyone! TilBuci version 9 is out with some new features:

MOVIE PROPERTIES
There is a new transition method between scenes, "none" (hard cut). In addition, it is now possible to set an animated icon (spritemap) to be displayed while a new scene is downloaded (loading icon).

NEW GENERAL GLOBAL
A new value is available in the general globals: "has the visitor ever clicked?". With it, it is possible to know if there has been any type of interaction to allow automatic playback of media in browsers.

INSTANCE ZOOM
A new action is available: instance.zoom. When executed, the content of an instance (picture or video) takes up the entire screen while the movie content is paused. Clicking again causes the image to return to its normal size, resuming playback of the scene.

MOUSE OVER ACTIONS
For content aimed at devices with mouse interaction, it is now possible to set actions not only for clicks but also for the mouse over event.

The link to the release on Github:
https://github.com/lucasjunqueira-var/tilbuci/releases/tag/v9

  • 1 month later...
  • Author

Hi, everyone! It's me again 😉

This week I published a playlist of videos with a step-by-step guide to creating a quiz using TilBuci, from conception to publication and monitoring, including media inclusion, defining interactions and things like that. Plkease check it out and share your thoughts.

 

  • 4 weeks later...
  • Author

Hello everyone! A new version of TilBuci, the free software I have been developing for creating interactive content, is now available. Version 12 includes several new features to simplify content creation, including contraptions for cover and background images and music tracks. In addition, two new tools expand the software's usability: form and global interface creators.  Another new feature is the improvement of the PWA app exporter. Check out the new features in the repository:

https://github.com/lucasjunqueira-var/tilbuci/releases/tag/v12

Edited by lujunq

  • 4 weeks later...
  • Author

Hello everyone! I want to share with you a new playlist of videos about creating content using TilBuci. In this playlist, I explore the creation of content for a kiosk, like the ones we see in museums, exhibitions and events, from the design to the export of Windows and Linux executables, as well as an Android app.

 

  • 1 month later...

Love that you're thinking about multiple screen formats and export options—that’s a huge need right now with how varied user devices have become.

Also, props for making it open-source. That alone makes it super appealing for developers and small teams.

Bookmarked TilBuci to explore further. Looking forward to seeing how it evolves!

  • Author

Oh, thank you. The next version will include a "desktop launcher" to simplify the usage process, without the need for installation on a web server.

  • 1 month later...
  • Author

Hello everyone, a new version of TilBuci is available with many new features. One of the biggest is that, in addition to being installed on a web server for a collaborative creation environment, the software can now also be downloaded as a portable desktop application that runs on Windows, macOS, and Linux. The new version can be found here:

https://github.com/lucasjunqueira-var/tilbuci/releases/tag/v14

Another news is the new tutorial on creating a survey kiosk for an exhibition, which covers producing content simultaneously for horizontal and vertical screens, using variables, text input, and storing events in the cloud.

https://www.youtube.com/playlist?list=PLjJLo5ynGY5xQ0XD5hCs7Fds85M3bmDxF

Edited by lujunq

Create an account or sign in to comment

Account

Navigation

Search

Search

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.