{"id":48,"date":"2024-05-08T00:00:00","date_gmt":"2024-05-08T00:00:00","guid":{"rendered":"https:\/\/www.avgator.com\/post\/what-s-new-in-version-0-40-exploring-element-modes-new-design-features-and-the-datetime-widget"},"modified":"2024-05-08T00:00:00","modified_gmt":"2024-05-08T00:00:00","slug":"whats-new-in-version-040-exploring-element-modes-new-design-features-and-the-datetime-widget","status":"publish","type":"post","link":"https:\/\/content.avgator.com\/?p=48","title":{"rendered":"What’s New in Version 0.40: Exploring Element Modes, New Design Features, and the Datetime Widget"},"content":{"rendered":"\n

Element modes<\/h2>\n\n\n\n

 NEW<\/strong><\/p>\n\n\n\n

We have added the capability to create mods for elements (all of them!). This allows for significant alteration of both the appearance and actions of the element depending on dynamic data. This functionality extends to page lists as well: you can easily modify the structure of the list with just a few clicks.<\/p>\n\n\n\n

\"Mode<\/figure>\n\n\n\n

Mode creation dialog<\/p>\n\n\n\n

Media upload: support for .svg (color inheritance included) and .webp<\/h2>\n\n\n\n

 NEW<\/strong><\/p>\n\n\n\n

We have implemented the ability to upload images in the webp format. Additionally, you now have the unique opportunity to upload images in the .svg format. It is important to understand that an SVG image containing ‘currentColor’ as a color indication will adopt the element’s color settings\u2014this is particularly convenient for creating unique icons.<\/p>\n\n\n\n

\"Extended<\/figure>\n\n\n\n

Extended media upload box<\/p>\n\n\n\n

We recommend to use this icons: Open Source Icon Sets – Iconify<\/a><\/p>\n\n\n\n

\"Use<\/figure>\n\n\n\n

Use any .svg image as icon. Animated .svg also supported.<\/p>\n\n\n\n

Granural Padding & Border Radius Control<\/h2>\n\n\n\n

 NEW<\/strong><\/p>\n\n\n\n

It has become convenient to set different value for different sides. Feel free to utilize this feature!<\/p>\n\n\n\n

\"Padding<\/figure>\n\n\n\n

<\/p>\n\n\n\n

\"Advanced<\/figure>\n\n\n\n

Advanced border radius control<\/p>\n\n\n\n

Extended Background Size & Position<\/h2>\n\n\n\n

 NEW<\/strong><\/p>\n\n\n\n

Now you have more control over the background at the page, project, and other supported element. You can now specify sizes and positions as well.<\/p>\n\n\n\n

\"Extended<\/figure>\n\n\n\n

<\/p>\n\n\n\n

Background Image for Containers<\/h2>\n\n\n\n

 NEW<\/strong><\/p>\n\n\n\n

The ability to specify a background for the container is now available. Control for position, opacity, size, blur included!<\/p>\n\n\n\n

\"Containers<\/figure>\n\n\n\n

Containers with custom background Images<\/p>\n\n\n\n

Border Radius for Containers<\/h2>\n\n\n\n

 NEW<\/strong><\/p>\n\n\n\n

Utilize border radius directives for the container to enhance the appearance of your project.<\/p>\n\n\n\n

\"Container<\/figure>\n\n\n\n

Container border radius<\/p>\n\n\n\n

Text Wrap Behavior for Button & Text Elements<\/h2>\n\n\n\n

 NEW<\/strong><\/p>\n\n\n\n

Working with long text has become more convenient. Later we will add convenient tools for automatic truncation of long text.<\/p>\n\n\n\n

\"Control<\/figure>\n\n\n\n

Control over text wrap<\/p>\n\n\n\n

Global Override Theme Design Settings<\/h2>\n\n\n\n

 NEW<\/strong><\/p>\n\n\n\n

We have moved global project background settings into a separate category in the menu. Additionally, in this menu item you now have the option to specify custom settings for the main colors used. In the future we plan to significantly extend control over the appearance at a global level and allow users to create and share their own design\/color themes.<\/p>\n\n\n\n

\"Override<\/figure>\n\n\n\n

Override global theme color\/background settings<\/p>\n\n\n\n

Blur Content behind Subpage or Container<\/h2>\n\n\n\n

 NEW<\/strong><\/p>\n\n\n\n

At the container and subPage level, it is now possible to control the degree of blurring of elements\/content beneath them. This is very convenient for highlighting, creating visually appealing effects and improving the readability of your interface.<\/p>\n\n\n\n

\"Background<\/figure>\n\n\n\n

Background blur effect<\/p>\n\n\n\n

Containers are sortable again!<\/h2>\n\n\n\n

NEW<\/strong><\/p>\n\n\n\n

New Function Creation Modal<\/h2>\n\n\n\n

NEW<\/strong><\/p>\n\n\n\n

A new editor has been designed for creating functions. Writing and testing functions has become much more convenient. Additionally, integrated documentation with all available global data and variables for use will be added to this modal soon.<\/p>\n\n\n\n

\"New<\/figure>\n\n\n\n

New Function Creation Modal<\/p>\n\n\n\n

New DateTime Widget<\/h2>\n\n\n\n

NEW<\/strong><\/p>\n\n\n\n

We have added a DateTime widget for convenient and fast visualization of the current time and date with detailed formatting options and the ability to specify time zones.<\/p>\n\n\n\n

\"DateTime<\/figure>\n\n\n\n

DateTime widget<\/p>\n\n\n\n

Precache External Images<\/h2>\n\n\n\n

 NEW<\/strong><\/p>\n\n\n\n

If your project extensively uses images from external sources you can now cache them in advance so that users will see them instantly when using your GUI.<\/p>\n\n\n\n

\"Add<\/figure>\n\n\n\n

Add datasource with urls array should be precached<\/p>\n\n\n\n

Image Lazy Load Option<\/h2>\n\n\n\n

NEW<\/strong><\/p>\n\n\n\n

Using this option will allow you to defer the immediate loading of heavy images and improve the user experience.<\/p>\n\n\n\n

\"Image<\/figure>\n\n\n\n

Image lazy loading<\/p>\n\n\n\n

Shades Control Widget Improved<\/h2>\n\n\n\n

 NEW<\/strong><\/p>\n\n\n\n

Advanced settings and bug fixes have been implemented for the shades control widget. You can now configure the curtain style in more detail. Additionally, users can adjust the degree of opening and closing by directly dragging the curtain fabric.<\/p>\n\n\n\n