DEV Community

Cover image for ViBox Can Transform Your Desktop Experience
Tufik Chediak Sanchez
Tufik Chediak Sanchez

Posted on

ViBox Can Transform Your Desktop Experience

ViBox enables users to personalize their desktops by adding a diverse range of content, including widgets, bubbles, or icons directly to their status bar. Users have the flexibility to select from a collection of pre-defined widgets or utilize the browser widget to incorporate custom web content. Whether it’s news feeds, social media, notes, or personalized web snippets, ViBox makes it easy for users to access their favorite online information with just a single click. Our commitment extends to continually expanding the widget library, providing even more options and enhancing the existing ones.

Image description

The Start

This project began as a small personal need. Frustrated by the lack of suitable existing options, I decided to create a small app to address my specific problem. Over time, I expanded its functionality by adding new features, resulting in what we now know as ViBox.

This productivity tool has significantly enhanced my workflow as a developer. It allows me to keep my desktop organized, ensuring that my essential content and frequently used tools are readily accessible, instead of wasting time searching in hundreds of tabs, and bookmarks, or having my dock with hundreds of icons.

Image description

Now, let me demonstrate how ViBox works by adding three different types of content to the available locations: desktop widget, bubble, or status bar icon.

Desktop Widget

In this scenario, we’ll add a straightforward weather widget to our desktop. I want to acknowledge weatherwidget.org for their fantastic widget generator, which we’re utilizing here. You can also visit their website, generate one of their available layouts, copy the generated code, and add it using our browser’s content option.

Image description

  1. Go to the main panel and choose the weather content.
  2. In the configuration panel, provide a widget name, search for the desired location, and click Add button.
  3. You can resize and drag our widget to any position on the screen. After resizing or dragging, the widget will automatically reposition itself. This behavior is due to the default grid settings, which help create visually appealing layouts. If necessary, you can configure the grid settings in the configuration/general section.

Image description

Bubbles

ViBox also allows us to add all content as floating bubbles. This type of content is perfect for adding resources that we use frequently in our daily routines. Like floating bubbles for emails, note widgets, video/audio sites, work chats, or any other web content that you visit frequently throughout the day.

Let’s add Gmail as a bubble, using the quick shortcut already available in the main panel.

Image description

  1. Search and click in the Gmail shortcut.
  2. Click the gear icon located at the top-right corner of the widget.
  3. Navigate to the Bubble Tab and enable it.
  4. By default, corner attraction is enabled. After you drag and drop the widget for the first time, it will automatically reposition itself in a corner.
  5. When you click the bubble, it will open the content. You can then resize and drag it to set the desired position or dimensions of the window.

Image description

Status Bar Icons

Bubbles are useful in various scenarios, but space could be limited to a bunch of those. An alternative approach is to incorporate content as icons in the status bar. some examples could be the exchange currency widget, chatGPT, translators, notes, etc.

Bubbles are useful in various scenarios, but sometimes space constraints limit their effectiveness. An alternative approach is to incorporate content as icons in the status bar. For instance, consider adding widgets like the exchange currency widget, ChatGPT, translators, and notes. Having ChatGPT readily accessible with just one click would be especially beneficial.

Let’s add ChatGPT, a widely popular tool these days. Having it just one click away would be incredibly convenient.

Image description

  1. Select the Browser Content in the main panel.
  2. Configure the widget by setting the widget name as ChatGPT and the URL as https://chatgpt.com.
  3. In the Status Bar tab, enable it and set the icon type to URL.
  4. Quickly search for a good image that works well as an icon “preferably a PNG with transparency), copy the URL, and paste it into the content field. example: //cdn-icons-png.flaticon.com/512/12222/12222589.png
  5. To finish, click on the ‘Generate’ button. The app will automatically create an icon and display a preview of it.

Image description

Open App For All.

ViBox is completely free. I invite you to join us on this exciting journey to shape the future of the app. Your contribution and feedback will help enhance and deliver a better experience.

Enjoy it! I hope this app becomes a valuable productivity tool, just as it has been for me.

To conclude, you can download our app from the App Store or Microsoft Store. Visit us at vibox.cloudbit.co, and feel free to comment, request new features, or just say hi on Discord.

Top comments (0)