meta data for this page
  •  

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision		Previous revision
section:section-widget [2026/04/21 23:31] – dorepssection:section-widget [2026/05/10 18:09] (current) – external edit 127.0.0.1
Line 14: Line 14:
 ==== Widget Selection Dialog ==== ==== Widget Selection Dialog ====
  
-To locate this dialog, navigate to ''Edit On'' > Object Design menu (top) ''+'' > ''Widget''. This ++dialog|{{:ui:ui-widget-type_selections-image.png?direct&200}}++ will be seen. The selections are explained below on this page.+To locate this dialog, navigate to ''Edit On'' > Object Design menu (top) ''+'' > ''Widget''. This ++dialog|{{:ui:ui-widget-type_selections-image.webp?direct&200}}++ will be seen. The selections are explained below on this page.
  
 ==== Widget - Placement and Advanced Uses ==== ==== Widget - Placement and Advanced Uses ====
Line 20: Line 20:
 === Add a Widget === === Add a Widget ===
  
-To add an Application Widget, enter [[:ui:ui-edit_on|''Edit On'' mode]] [long-press an empty area on the Page, Drawer, or Window] and select **Add (+)** icon {{:ui:ui-icon_add-white_on_black.png?25}}, then select ''Widget'' from the Add dialog list. A visual thumbnail of all widgets will display in **//non-alphabetical//** order.  **Application Widgets** will contain only widgets for apps installed on the user's device.+To add an Application Widget, enter [[:ui:ui-edit_on|''Edit On'' mode]] [long-press an empty area on the Page, Drawer, or Window] and select **Add (+)** icon {{:ui:ui-icon_add-white_on_black.webp?25}}, then select ''Widget'' from the Add dialog list. A visual thumbnail of all widgets will display in **//non-alphabetical//** order.  **Application Widgets** will contain only widgets for apps installed on the user's device.
  
 Widgets can be added to a page, sliding drawer or window. Folders will not accept widgets. Widgets can be added to a page, sliding drawer or window. Folders will not accept widgets.
Line 31: Line 31:
 There are fourteen built-in widgets in Total Launcher: There are fourteen built-in widgets in Total Launcher:
  
-      *++**App Drawer**|{{:ui:ui-widget-app_drawer-image.png?direct&200}}++ [[:section:section-widget#widget:_-_app_drawer|(jump to full discussion)]] displays applications installed on the device, often functioning as a comprehensive app group with highly customizable layout, grid/list or columns/rows with various sorting options such as +      *++**App Drawer**|{{:ui:ui-widget-app_drawer-image.webp?direct&200}}++ [[:section:section-widget#widget:_-_app_drawer|(jump to full discussion)]] displays applications installed on the device, often functioning as a comprehensive app group with highly customizable layout, grid/list or columns/rows with various sorting options such as 
         * default as controlled by main menu > launcher options > behavior > app drawer section         * default as controlled by main menu > launcher options > behavior > app drawer section
         * smart based on frequency of use, time of day, and other smart measures         * smart based on frequency of use, time of day, and other smart measures
Line 38: Line 38:
         * offers a full menu bar         * offers a full menu bar
  
-      *++**App Drawer (pager)**|{{:ui:ui-widget-app_drawer_pager-image.png?direct&200}}++ [[:section:section-widget#widget:_-_app_drawer_(pager)|(jump to full discussion)]] is a newer type of app drawer widget which scrolls horizontally. It does have differences from the app drawer widget.+      *++**App Drawer (pager)**|{{:ui:ui-widget-app_drawer_pager-image.webp?direct&200}}++ [[:section:section-widget#widget:_-_app_drawer_(pager)|(jump to full discussion)]] is a newer type of app drawer widget which scrolls horizontally. It does have differences from the app drawer widget.
  
-      *++**App Group**|{{:ui:ui-widget-app_group-image.png?direct&200}}++ [[:section:section-widget#widget:_-_app_group|(jump to full discussion)]] functions similarly to the App Drawer but allows for grouping its items (apps, windows, folders, shortcuts) by user-defined criteria (mostly folders). It offers a customizable layout, icons, labels, and background.+      *++**App Group**|{{:ui:ui-widget-app_group-image.webp?direct&200}}++ [[:section:section-widget#widget:_-_app_group|(jump to full discussion)]] functions similarly to the App Drawer but allows for grouping its items (apps, windows, folders, shortcuts) by user-defined criteria (mostly folders). It offers a customizable layout, icons, labels, and background.
  
-      *++**Contacts**|{{:ui:ui-widget-contacts-image.png?direct&200}}++ [[:section:section-widget#widget:_-_contacts|(jump to full discussion)]] displays user contacts, based on the device's contact magager, and can be set to grid or list type. It supports long-click call and allows setting a default graphic for items with no photo.+      *++**Contacts**|{{:ui:ui-widget-contacts-image.webp?direct&200}}++ [[:section:section-widget#widget:_-_contacts|(jump to full discussion)]] displays user contacts, based on the device's contact magager, and can be set to grid or list type. It supports long-click call and allows setting a default graphic for items with no photo.
  
-      *++**Media Controller**|{{:ui:ui-widget-media_controller1-image.png?direct&100}}{{:ui:ui-widget-media_controller2-image.png?direct&100}}++ [[:section:section-widget#widget:_-_media_controller|(jump to full discussion)]] provides controls for a media application which supports the Android Media Controller API (e.g., Google Music, Poweramp). It also allows selecting a target app, customizing control button size, text size/color, icon color, and using a foreground image (skin). It can display the currently running media app even if a specific target app is not selected.+      *++**Media Controller**|{{:ui:ui-widget-media_controller1-image.webp?direct&100}}{{:ui:ui-widget-media_controller2-image.webp?direct&100}}++ [[:section:section-widget#widget:_-_media_controller|(jump to full discussion)]] provides controls for a media application which supports the Android Media Controller API (e.g., Google Music, Poweramp). It also allows selecting a target app, customizing control button size, text size/color, icon color, and using a foreground image (skin). It can display the currently running media app even if a specific target app is not selected.
  
-      *++**Page Indicator**|{{:ui:ui-widget-page_indicator-image.png?direct&200}}++ [[:section:section-widget#widget:_-_page_indicator|(jump to full discussion)]] shows the user's current position (here a 15 page setup) within the setup pages and can use customizable images or colors for normal, current and home pages.+      *++**Page Indicator**|{{:ui:ui-widget-page_indicator-image.webp?direct&200}}++ [[:section:section-widget#widget:_-_page_indicator|(jump to full discussion)]] shows the user's current position (here a 15 page setup) within the setup pages and can use customizable images or colors for normal, current and home pages.
  
-      *++**Analog Clock**|{{:ui:ui-widget-analog_clock-image.png?direct&200}}++ [[:section:section-widget#widget:_-_analog_clock|(jump to full discussion)]] displays the time and allows setting a time zone and customizing the appearance of the hour hand, minute hand, and second hand (which can be hidden using a transparent color).+      *++**Analog Clock**|{{:ui:ui-widget-analog_clock-image.webp?direct&200}}++ [[:section:section-widget#widget:_-_analog_clock|(jump to full discussion)]] displays the time and allows setting a time zone and customizing the appearance of the hour hand, minute hand, and second hand (which can be hidden using a transparent color).
  
-      *++**Compass**|{{:ui:ui-widget-compass-image.png?direct&200}}++ [[:section:section-widget#widget:_-_compass|(jump to full discussion)]] displays a compass functionality. It offers a basic image for the compass needle (skin) and supports applying a color filter over that skin.+      *++**Compass**|{{:ui:ui-widget-compass-image.webp?direct&200}}++ [[:section:section-widget#widget:_-_compass|(jump to full discussion)]] displays a compass functionality. It offers a basic image for the compass needle (skin) and supports applying a color filter over that skin.
  
-      *++**Circle Indicator**|{{:ui:ui-widget-circle_indicator-image.png?direct&100}}++ [[:section:section-widget#widget:_-_circle_indicator|(jump to full discussion)]] shows the current status for a selected resource such as //battery//, //RAM usage//, //storage//, or //SD card usage//.+      *++**Circle Indicator**|{{:ui:ui-widget-circle_indicator-image.webp?direct&100}}++ [[:section:section-widget#widget:_-_circle_indicator|(jump to full discussion)]] shows the current status for a selected resource such as //battery//, //RAM usage//, //storage//, or //SD card usage//.
  
-      *++**Drawer Handle**|{{:ui:ui-widget-drawer_handle-image.png?direct&100}}++ [[:section:section-widget#widget:_-_drawer_handle|(jump to full discussion)]] creates an expanded trigger area to pull out a specific //sliding drawer// (left, right, top, or bottom). It requires selecting the target sliding drawer and can use a custom image instead of the default arrow icon.+      *++**Drawer Handle**|{{:ui:ui-widget-drawer_handle-image.webp?direct&100}}++ [[:section:section-widget#widget:_-_drawer_handle|(jump to full discussion)]] creates an expanded trigger area to pull out a specific //sliding drawer// (left, right, top, or bottom). It requires selecting the target sliding drawer and can use a custom image instead of the default arrow icon.
  
-      *++**Slider**|{{:ui:ui-widget-slider-image.png?direct&100}}++ [[:section:section-widget#widget:_-_slider|(jump to full discussion)]] offers on-screen control of screen brightness or volumes (media, ring, notification, alarm, or call)+      *++**Slider**|{{:ui:ui-widget-slider-image.webp?direct&100}}++ [[:section:section-widget#widget:_-_slider|(jump to full discussion)]] offers on-screen control of screen brightness or volumes (media, ring, notification, alarm, or call)
  
-      *++*Photo Slide**|{{:ui:ui-widget-photo_slide-image.png?direct&200}}++ [[:section:section-widget#widget:_-_photo_slide|(jump to full discussion)]] is a photo show wrapper container to sequentially or randomly display images in color or force grayscale from a designated folder in user-selected intervals. The container's skin and corner radius can be modified.+      *++*Photo Slide**|{{:ui:ui-widget-photo_slide-image.webp?direct&200}}++ [[:section:section-widget#widget:_-_photo_slide|(jump to full discussion)]] is a photo show wrapper container to sequentially or randomly display images in color or force grayscale from a designated folder in user-selected intervals. The container's skin and corner radius can be modified.
  
-      *++**RSS reader**|{{:ui:ui-widget-rss_reader-image.png?direct&200}}++ [[:section:section-widget#widget:_-_rss_reader|(jump to full discussion)]] or **R**eally **S**imple **S**yndication for news, podcasts, other channels or aggregation services. The container will support both image with text or text only based on the aggregator's setup. It accepts standard URLs with an unverified number of available %%slot%%s (up to 20 have been tested).+      *++**RSS reader**|{{:ui:ui-widget-rss_reader-image.webp?direct&200}}++ [[:section:section-widget#widget:_-_rss_reader|(jump to full discussion)]] or **R**eally **S**imple **S**yndication for news, podcasts, other channels or aggregation services. The container will support both image with text or text only based on the aggregator's setup. It accepts standard URLs with an unverified number of available %%slot%%s (up to 20 have been tested).
  
-      *++**Checklist**|{{:ui:ui-widget-checklist1-image.png?direct&150}}{{:ui:ui-widget-checklist2-image.png?direct&150}}++ [[:section:section-widget#widget:_-_checklist|(jump to full discussion)]] is a widget to help users manage and track tasks. It offers manual addition, editing, and sorting.+      *++**Checklist**|{{:ui:ui-widget-checklist1-image.webp?direct&150}}{{:ui:ui-widget-checklist2-image.webp?direct&150}}++ [[:section:section-widget#widget:_-_checklist|(jump to full discussion)]] is a widget to help users manage and track tasks. It offers manual addition, editing, and sorting.
  
-      *++**Application**|{{:ui:ui-widget-application_widget.png?direct&200}}++ - [[:section:section-widget#widget:_-_application|(jump to full discussion)]] Every device has 3rd party application for varying purposes and application developer's frequently offer to present their app's data in a customized format. If selected by the user from this dialog, Total Launcher extracts the container and provides for user placement and some additional customization.+      *++**Application**|{{:ui:ui-widget-application_widget.webp?direct&200}}++ - [[:section:section-widget#widget:_-_application|(jump to full discussion)]] Every device has 3rd party application for varying purposes and application developer's frequently offer to present their app's data in a customized format. If selected by the user from this dialog, Total Launcher extracts the container and provides for user placement and some additional customization.
  
-Below is a more detailed discussion of each built-in widget. An understanding of the differences between similar widgets, such as App Drawer, App Drawer (pager), App Group, and Contacts, is difficult. If the descriptions below still leave questions, this ++spreadsheet representation| {{:section:section-widget-feature\_comparison\_chart.png?direct&200}} Tap to enlarge ++ may be more helpful for those interested.+Below is a more detailed discussion of each built-in widget. An understanding of the differences between similar widgets, such as App Drawer, App Drawer (pager), App Group, and Contacts, is difficult. If the descriptions below still leave questions, this ++spreadsheet representation| {{:section:section-widget-feature\_comparison\_chart.webp?direct&200}} Tap to enlarge ++ may be more helpful for those interested. 
 + 
 +----
  
 ==== Widget: App Drawer ==== ==== Widget: App Drawer ====
  
 {{tablelayout?colwidth="225px,375px"&rowsHeaderSource=auto&float=center}} {{tablelayout?colwidth="225px,375px"&rowsHeaderSource=auto&float=center}}
-|{{  :ui:ui-widget-app_drawer-image.png?direct&200  }}|The **App Drawer** widget is critical for //advanced// setup customization, offering flexibility in how apps are accessed. It can be placed directly on a page, within a window (to create a floating pop-up app drawer), or anchored to a screen edge (simulating a sliding drawer).|+|{{  :ui:ui-widget-app_drawer-image.webp?direct&200  }}|The **App Drawer** widget is critical for //advanced// setup customization, offering flexibility in how apps are accessed. It can be placed directly on a page, within a window (to create a floating pop-up app drawer), or anchored to a screen edge (simulating a sliding drawer).|
  
 === Interaction & Navigation === === Interaction & Navigation ===
  
-The bottom **Menu Bar** {{:ui:ui-icon_app_drawer_menu_bar.png?direct&100}} of the widget is the control center for finding and organizing apps. It contains the **Add**, **Sort**, **Tag**, and **Search** icons.+The bottom **Menu Bar** {{:ui:ui-icon_app_drawer_menu_bar.webp?direct&100}} of the widget is the control center for finding and organizing apps. It contains the **Add**, **Sort**, **Tag**, and **Search** icons.
  
-To customize the visual appearance of this bar (background, icon sets, text color/typeface), enter ''Edit On'' > select the App drawer (highlight) > select Object Design Menu (top) {{:ui:ui-icon_object_design_menu_top.png?direct&150}} > '' Options'' {{:ui:ui-icon_option.png?direct&15}}.+To customize the visual appearance of this bar (background, icon sets, text color/typeface), enter ''Edit On'' > select the App drawer (highlight) > select Object Design Menu (top) {{:ui:ui-icon_object_design_menu_top.webp?direct&150}} > '' Options'' {{:ui:ui-icon_option.webp?direct&15}}.
  
 == Search == == Search ==
  
-The Search icon {{:ui:ui-icon_search.png?direct&15}} on the bottom menu bar offers two modes:+The Search icon {{:ui:ui-icon_search.webp?direct&15}} on the bottom menu bar offers two modes:
   ***Index Search** - Offers a selection of initial letters, numbers, or special characters to jump to specific items.   ***Index Search** - Offers a selection of initial letters, numbers, or special characters to jump to specific items.
-    * **Keyboard Search** - The 3-dot icon {{:ui:ui-icon-3dot.png?direct&25}} at the bottom opens a full keyboard search.+    * **Keyboard Search** - The 3-dot icon {{:ui:ui-icon-3dot.webp?direct&25}} at the bottom opens a full keyboard search.
     * **Folder Support** - Search can optionally include items contained inside folders. Toggle this via ''Main Menu'' > ''Launcher Options'' > ''Behavior'' > ''Search in folder''.     * **Folder Support** - Search can optionally include items contained inside folders. Toggle this via ''Main Menu'' > ''Launcher Options'' > ''Behavior'' > ''Search in folder''.
  
Line 94: Line 96:
 == Sorting == == Sorting ==
  
-The **Menu Bar** allows a managed ''Sort'' {{:ui:ui-icon_sort.png?direct&15}} icon on the menu bar.+The **Menu Bar** allows a managed ''Sort'' {{:ui:ui-icon_sort.webp?direct&15}} icon on the menu bar.
   ***Temporary Sorting**: Sort momentarily by **Name**, **Recently installed**, or **Recent updates**.   ***Temporary Sorting**: Sort momentarily by **Name**, **Recently installed**, or **Recent updates**.
     ***Persistent Sorting**: Defined in the widget's **Shared Options** \> **Sort order**. Options include:     ***Persistent Sorting**: Defined in the widget's **Shared Options** \> **Sort order**. Options include:
Line 100: Line 102:
         * **User Defined**  -Allows manual rearrangement of apps and folders in Edit Mode.         * **User Defined**  -Allows manual rearrangement of apps and folders in Edit Mode.
         * **Smart** - Ranks items based on usage patterns (time of day, location, headset status, etc.). The number of "smart picks" can be set from 1 to 25.         * **Smart** - Ranks items based on usage patterns (time of day, location, headset status, etc.). The number of "smart picks" can be set from 1 to 25.
-  ***Tags** {{:ui:ui-icon-sort.png?direct&15}} - This allows users to group applications.+  ***Tags** {{:ui:ui-icon-sort.webp?direct&15}} - This allows users to group applications.
     ***Built-in Tags** - Includes categories such as Productivity, Folder, and Hidden. Additional categories (Maps, News, Social, Games, etc.) can be enabled via ''Main Menu'' \> ''Launcher Options'' \> ''Behavior'' \> ''Built-in tags''.     ***Built-in Tags** - Includes categories such as Productivity, Folder, and Hidden. Additional categories (Maps, News, Social, Games, etc.) can be enabled via ''Main Menu'' \> ''Launcher Options'' \> ''Behavior'' \> ''Built-in tags''.
     ***Untagged Items** - An option exists to display **only** items that have no tag assigned.     ***Untagged Items** - An option exists to display **only** items that have no tag assigned.
Line 106: Line 108:
 === Visual Design === === Visual Design ===
  
-The design options are, again, available once the widget is selected and the **Option icon** {{:ui:ui-icon_option.png?direct&15}} is tapped.+The design options are, again, available once the widget is selected and the **Option icon** {{:ui:ui-icon_option.webp?direct&15}} is tapped.
  
 == Layout & Scrolling == == Layout & Scrolling ==
Line 135: Line 137:
 <WRAP center round tip> <WRAP center round tip>
 <WRAP centeralign>**Transparency Trick:**</WRAP> <WRAP centeralign>**Transparency Trick:**</WRAP>
-Users can set a color to Hex code `#00000000` to make an element transparent (hidden) while keeping the item functional.+Users can set a color to Hex code ''#00000000'' to make an element transparent (hidden) while keeping the item functional.
 </WRAP> </WRAP>
  
Line 146: Line 148:
 VERIFY THIS COMMENT: do badges show on App Drawer and not App Group? Check your phone ... then adjust this ... This is a difference from the **App Group** which displays badges, but customization is handled only system-wide via ''Main Menu'' > ''Launcher Options'' > ''Icon Style'' > ''Badge Count''. VERIFY THIS COMMENT: do badges show on App Drawer and not App Group? Check your phone ... then adjust this ... This is a difference from the **App Group** which displays badges, but customization is handled only system-wide via ''Main Menu'' > ''Launcher Options'' > ''Icon Style'' > ''Badge Count''.
 </WRAP> </WRAP>
 +
 +----
  
 ==== Widget: App Drawer (pager) ==== ==== Widget: App Drawer (pager) ====
  
 {{tablelayout?colwidth="225px,375px"&rowsHeaderSource=auto&float=center}} {{tablelayout?colwidth="225px,375px"&rowsHeaderSource=auto&float=center}}
-|{{  :ui:ui-widget-app_drawer_pager-image.png?direct&200  }}|The **App drawer (pager)** is a distinct, built-in widget that offers an alternative to the standard 'App drawer' for displaying and organizing applications.\\ \\ It is designed as a customizable container that holds user-selected apps and folders, featuring either vertical or horizontal scrolling.\\ \\ Its primary difference lies in its presentation and built-in functionalities, which can provide a more structured and efficient user experience.|+|{{  :ui:ui-widget-app_drawer_pager-image.webp?direct&200  }}|The **App drawer (pager)** is a distinct, built-in widget that offers an alternative to the standard 'App drawer' for displaying and organizing applications.\\ \\ It is designed as a customizable container that holds user-selected apps and folders, featuring either vertical or horizontal scrolling.\\ \\ Its primary difference lies in its presentation and built-in functionalities, which can provide a more structured and efficient user experience.|
  
 The **App drawer (pager)** can be accessed and added by entering ''Edit Mode'' > ''Add'' icon (+) > ''Widget'', and navigating in the list of built-in widgets and selecting it. The **App drawer (pager)** can be accessed and added by entering ''Edit Mode'' > ''Add'' icon (+) > ''Widget'', and navigating in the list of built-in widgets and selecting it.
Line 163: Line 167:
     * An option exists to display applications as a text-only list, without icons. This is beneficial for users seeking a minimal and clean interface.     * An option exists to display applications as a text-only list, without icons. This is beneficial for users seeking a minimal and clean interface.
   ***Sorting Options:** It can be configured to show the most recently used applications at the top of the list, providing quicker access to frequently opened apps.   ***Sorting Options:** It can be configured to show the most recently used applications at the top of the list, providing quicker access to frequently opened apps.
 +
 +----
  
 ==== Widget: App Group ==== ==== Widget: App Group ====
 {{tablelayout?colwidth="225px,375px"&rowsHeaderSource=auto&float=center}} {{tablelayout?colwidth="225px,375px"&rowsHeaderSource=auto&float=center}}
-|{{:ui:ui-widget-app_group-image.png?direct&200}}|The App Group shares many core customization and aesthetic features with the App Drawer widget but //does// have some differences noted below. It allows users to create specific groups which makes it ideal for creating static docks, categorized groups (like "Work Apps" or "Games"), or quick-access panels, rather than displaying all applications on the device (which is the primary function of the App Drawer).|+|{{:ui:ui-widget-app_group-image.webp?direct&200}}|The App Group shares many core customization and aesthetic features with the App Drawer widget but //does// have some differences noted below. It allows users to create specific groups which makes it ideal for creating static docks, categorized groups (like "Work Apps" or "Games"), or quick-access panels, rather than displaying all applications on the device (which is the primary function of the App Drawer).|
  
 === Customizable Application Container === === Customizable Application Container ===
Line 198: Line 204:
   ***Animation**   ***Animation**
     * **Enter Animation:** This is an widget animation which occurs when returning to the page occupied by the widget.      * **Enter Animation:** This is an widget animation which occurs when returning to the page occupied by the widget. 
-    * See more detailed discussion [[:section:section-animations-construction|here.]]+    * See more detailed discussion [[:section:section-animations_construction|here.]]
  
 +----
 ==== Widget: Contacts ==== ==== Widget: Contacts ====
 {{tablelayout?colwidth="225px,375px"&rowsHeaderSource=auto&float=center}} {{tablelayout?colwidth="225px,375px"&rowsHeaderSource=auto&float=center}}
-|{{:ui:ui-widget-contacts-image.png?direct&200}}|**Contacts widget** functions as a specialized container for displaying user contacts with extensive customization options for appearance, layout, and interaction as discussed below.|+|{{:ui:ui-widget-contacts-image.webp?direct&200}}|**Contacts widget** functions as a specialized container for displaying user contacts with extensive customization options for appearance, layout, and interaction as discussed below.|
  
 === General Functions and Filtering === === General Functions and Filtering ===
Line 248: Line 255:
     ***Enter animation** for the Contacts widget actually occurs when the user completes a call and returns to the open Contact widget.     ***Enter animation** for the Contacts widget actually occurs when the user completes a call and returns to the open Contact widget.
       * See [[:section:section-animations_construction|Page and Object Animation]] and [[:ui:ui-object-animation|UI Object Animation]] for an overview of animations available.       * See [[:section:section-animations_construction|Page and Object Animation]] and [[:ui:ui-object-animation|UI Object Animation]] for an overview of animations available.
 +
 +----
  
 ==== Widget: Media Controller ==== ==== Widget: Media Controller ====
 {{tablelayout?colwidth="225px,375px"&rowsHeaderSource=auto&float=center}} {{tablelayout?colwidth="225px,375px"&rowsHeaderSource=auto&float=center}}
-|{{:ui:ui-widget-media_controller1-image.png?direct&100}} {{:ui:ui-widget-media_controller2-image.png?direct&100}}|This controls a media application and specifically works with media player apps that adhere to the **MediaController API** of the Android framework. Rather than attempt a listing of compatible media players, if the widget does not perform, the user should determine if the media player meets this criterion.\\ The Media Controller displays a set of controls (buttons) along with media metadata (title and artist) and album art for managing audio or video playback.|+|{{:ui:ui-widget-media_controller1-image.webp?direct&100}} {{:ui:ui-widget-media_controller2-image.webp?direct&100}}|This controls a media application and specifically works with media player apps that adhere to the **MediaController API** of the Android framework. Rather than attempt a listing of compatible media players, if the widget does not perform, the user should determine if the media player meets this criterion.\\ The Media Controller displays a set of controls (buttons) along with media metadata (title and artist) and album art for managing audio or video playback.|
  
 === Key Functions and Configuration === === Key Functions and Configuration ===
Line 273: Line 282:
       * If a background is used, the album are is replaced.       * If a background is used, the album are is replaced.
     * The **rounded corner radius** setting allows the widget container modification from 90 degree corner to a circle.     * The **rounded corner radius** setting allows the widget container modification from 90 degree corner to a circle.
 +
 +----
  
 ==== Widget: Page indicator ==== ==== Widget: Page indicator ====
 {{tablelayout?colwidth="225px,375px"&rowsHeaderSource=auto&float=center}} {{tablelayout?colwidth="225px,375px"&rowsHeaderSource=auto&float=center}}
-|{{:ui:ui-widget-page_indicator-image.png?direct&200}}|The widget serves as a visual aid to show the current location within the setup's available pages.\\ \\ The default page indicator consists of a "house" image representing the home page, and multiple dots for setups with more than one page, all in white. (The image shown is for a 15 page setup.)\\ \\ As a user's action causes the viewable page to change, the indicator representing the current page will enlarge slightly. This means each indicator (page) has 2 states:\\ • focused -or- current\\ • unfocused -or- available but not being viewed|+|{{:ui:ui-widget-page_indicator-image.webp?direct&200}}|The widget serves as a visual aid to show the current location within the setup's available pages.\\ \\ The default page indicator consists of a "house" image representing the home page, and multiple dots for setups with more than one page, all in white. (The image shown is for a 15 page setup.)\\ \\ As a user's action causes the viewable page to change, the indicator representing the current page will enlarge slightly. This means each indicator (page) has 2 states:\\ • focused -or- current\\ • unfocused -or- available but not being viewed|
  
 === Customization and States === === Customization and States ===
Line 291: Line 302:
   * **Home (normal)**: The page dot/marker of the designated home page when the home pages is not being viewed.   * **Home (normal)**: The page dot/marker of the designated home page when the home pages is not being viewed.
     * The "home page" is user designated in the Page Edit dialog as shown [[:ui:ui-edit_on|here.]]     * The "home page" is user designated in the Page Edit dialog as shown [[:ui:ui-edit_on|here.]]
 +----
  
 ==== Widget: Analog clock ==== ==== Widget: Analog clock ====
 {{tablelayout?colwidth="225px,375px"&rowsHeaderSource=auto&float=center}} {{tablelayout?colwidth="225px,375px"&rowsHeaderSource=auto&float=center}}
-|{{:ui:ui-widget-analog_clock-image.png?direct&200}}|This functions as a clock face, displaying time with hour, minute, and second hands.|+|{{:ui:ui-widget-analog_clock-image.webp?direct&200}}|This functions as a clock face, displaying time with hour, minute, and second hands.|
  
 === Customization and Features === === Customization and Features ===
Line 303: Line 315:
   * **Time Zone**: Users can set the specific time zone the clock is to display which defaults to the user's device setting. The user can manually select from over 500 locations in the global time zones.   * **Time Zone**: Users can set the specific time zone the clock is to display which defaults to the user's device setting. The user can manually select from over 500 locations in the global time zones.
   * **Clock Hand Customization**: The appearance of each clock hand is individually configurable:   * **Clock Hand Customization**: The appearance of each clock hand is individually configurable:
-    * **Hour hand**: Most users will customize this using a **color or image**. The hour hand from made invisible (hidden) using the hex color code #00000000.+    * **Hour hand**: Most users will customize this using a **color or image**. The hour hand from made invisible (hidden) using the hex color code ''#00000000''.
     * **Minute hand**: See the above hour had discussion above.     * **Minute hand**: See the above hour had discussion above.
     * **Second hand**: See the above hour had discussion above.     * **Second hand**: See the above hour had discussion above.
Line 314: Line 326:
       * If the clock is on the designated home page and the phone is on the home page, the enter animation is effected after a system doze and "awakened" by the power button or phone unlock.       * If the clock is on the designated home page and the phone is on the home page, the enter animation is effected after a system doze and "awakened" by the power button or phone unlock.
       * **Fixme ... hopefully, some creative soul will insert another way that this is used or useful!**       * **Fixme ... hopefully, some creative soul will insert another way that this is used or useful!**
 +
 +----
  
 ==== Widget: Compass ==== ==== Widget: Compass ====
 {{tablelayout?colwidth="225px,375px"&rowsHeaderSource=auto&float=center}} {{tablelayout?colwidth="225px,375px"&rowsHeaderSource=auto&float=center}}
-|{{:ui:ui-widget-compass-image.png?direct&200}}|The **Compass** provides directional functionality.|+|{{:ui:ui-widget-compass-image.webp?direct&200}}|The **Compass** provides directional functionality.|
  
 All customization for compass elements have access to the widget's Edit dialog, which access the launcher's Edit dialog, in the follow manner: All customization for compass elements have access to the widget's Edit dialog, which access the launcher's Edit dialog, in the follow manner:
Line 361: Line 375:
       * If the compass is on the designated home page and the phone is viewing on the home page, the enter animation is effected after a system doze and "awakened" by the power button or phone unlock.       * If the compass is on the designated home page and the phone is viewing on the home page, the enter animation is effected after a system doze and "awakened" by the power button or phone unlock.
       * **Fixme ... hopefully, some creative soul will insert another way that this is used or useful!**       * **Fixme ... hopefully, some creative soul will insert another way that this is used or useful!**
 +
 +----
  
 ==== Widget: Circle indicator ==== ==== Widget: Circle indicator ====
 ^  Device resouce  ^  Data Value  ^  Image  ^ ^  Device resouce  ^  Data Value  ^  Image  ^
-|  • **Battery**  |  % available  |  {{:ui:ui-widget-circle_indicator-image_battery.png?direct&100}}  | +|  • **Battery**  |  % available  |  {{:ui:ui-widget-circle_indicator-image_battery.webp?direct&100}}  | 
-|  • **RAM usage**  |  % available  |  {{:ui:ui-widget-circle_indicator-image_ram.png?direct&100}}  | +|  • **RAM usage**  |  % available  |  {{:ui:ui-widget-circle_indicator-image_ram.webp?direct&100}}  | 
-|  • **Storage**\\ (internal storage)  |  % available  |  {{:ui:ui-widget-circle_indicator-image_storage.png?direct&100}}  | +|  • **Storage**\\ (internal storage)  |  % available  |  {{:ui:ui-widget-circle_indicator-image_storage.webp?direct&100}}  | 
-|  • * **SD card**  |  % available\\ (if inserted)  |  {{:ui:ui-widget-circle_indicator-image_sdcard.png?direct&100}}  |+|  • **SD card**  |  % available\\ (if inserted)  |  {{:ui:ui-widget-circle_indicator-image_sdcard.webp?direct&100}}  |
 |The **Circle indicator** displays the **current status** of a specific device resource in a visual, circular format.||| |The **Circle indicator** displays the **current status** of a specific device resource in a visual, circular format.|||
  
Line 379: Line 395:
   * **Background** - Defines the background selections (color, dynamic color, icon pack, shape, image and dynamic image) for the widget container.  See [[:ui:ui-generic-background|Background]] for more details if desired.   * **Background** - Defines the background selections (color, dynamic color, icon pack, shape, image and dynamic image) for the widget container.  See [[:ui:ui-generic-background|Background]] for more details if desired.
   * **Margins**: Allows adjustment of the margins surrounding the widget in its container. See [[:section:section-margins-page_and_object|Understanding Margins in Total Launcher.]]   * **Margins**: Allows adjustment of the margins surrounding the widget in its container. See [[:section:section-margins-page_and_object|Understanding Margins in Total Launcher.]]
 +
 +----
  
 ==== Widget: Drawer handle ==== ==== Widget: Drawer handle ====
-{tablelayout?colwidth="225px,375px"&rowsHeaderSource=auto&float=center}} +{{tablelayout?colwidth="225px,375px"&rowsHeaderSource=auto&float=center}} 
-|{{:ui:ui-widget-drawer_handle-image.png?direct&200}}|This serves as an **expanded trigger area** to pull out a specific **sliding drawer** which is particularly useful if the default used by Total Launcher (a narrow invisible trigger area on the edge of the screen) is deemed too narrow or not accessible.\\ Total Launcher supports four sliding drawers (left, right, top, and bottom).|+|{{:ui:ui-widget-drawer_handle-image.webp?direct&200}}|This serves as an **expanded trigger area** to pull out a specific **sliding drawer** which is particularly useful if the default used by Total Launcher (a narrow invisible trigger area on the edge of the screen) is deemed too narrow or not accessible.\\ Total Launcher supports four sliding drawers (left, right, top, and bottom).|
  
 === Customization and Configuration === === Customization and Configuration ===
Line 392: Line 410:
     * Icon pack - See [[:ui:ui-generic-icon_pack|here.]]     * Icon pack - See [[:ui:ui-generic-icon_pack|here.]]
     * Shape - Easily a user-specific shape could be customized. See [[:ui:ui-resources-shape|here.]]     * Shape - Easily a user-specific shape could be customized. See [[:ui:ui-resources-shape|here.]]
-  * **Color filter**: A color can be set to **draw over the drawer handle. This uses the launcher's Color Picker described [[:ui:ui-generic-color_picker|here.]] +  * **Color filter**: A color can be set to **draw over the drawer handle**. This uses the launcher's Color Picker described [[:ui:ui-generic-color_picker|here.]] 
-  ***Background**: Defines the background selections (color, dynamic color, icon pack, shape, image and dynamic image) for the widget container.  See [[:ui:ui-generic-background|Background]] for more details if desired. +  * **Background**: Defines the background selections (color, dynamic color, icon pack, shape, image and dynamic image) for the widget container. See [[:ui:ui-generic-background|Background]] for more details if desired. 
-  ***Margins**: Allows adjustment of the margins surrounding the widget container. See [[:section:section-margins-page_and_object|here.]]  +  * **Margins**: Allows adjustment of the margins surrounding the widget container. See [[:section:section-margins-page_and_object|here.]]  
-  *+ 
 +---- 
 ==== Widget: Slider ==== ==== Widget: Slider ====
-{tablelayout?colwidth="225px,375px"&rowsHeaderSource=auto&float=center}} +{{tablelayout?colwidth="225px,375px"&rowsHeaderSource=auto&float=center}} 
-|{{:ui:ui-widget-slider-image.png?direct&200}}|Offering on-screen control of screen brightness and volumes (media, ring, notification, alarm, or call) through a linear representation with a "thumb" or bulb indicating the current point within the data range of the target.|+|{{:ui:ui-widget-slider-image.webp?direct&200}}|Offering on-screen control of screen brightness and volumes (media, ring, notification, alarm, or call) through a linear representation with a "thumb" or bulb indicating the current point within the data range of the target.|
  
 === Key Functions and Customization === === Key Functions and Customization ===
Line 412: Line 432:
   * **Thumb size** - This is the bulb or solid circle (default) representing the current point with the range. Size range is 0 - 287.   * **Thumb size** - This is the bulb or solid circle (default) representing the current point with the range. Size range is 0 - 287.
   * **Thumb skin** - This is the bulb or solid circle (default) which can be user-replaced   * **Thumb skin** - This is the bulb or solid circle (default) which can be user-replaced
-  * *Track thickness** - The thickness of the line along which the thumb (bulb) will travel. Thickness range is 0 - 287.+  * **Track thickness** - The thickness of the line along which the thumb (bulb) will travel. Thickness range is 0 - 287.
   * **Track color** - The visible color of the portion of the track to the right of the thumb position. Some may call this "unused capacity". This is through Color or Dynamic Color.   * **Track color** - The visible color of the portion of the track to the right of the thumb position. Some may call this "unused capacity". This is through Color or Dynamic Color.
   * **Progress color** - The visible color of the portion of the track to the left of the thumb position, set via Color or Dynaic Color.   * **Progress color** - The visible color of the portion of the track to the left of the thumb position, set via Color or Dynaic Color.
   * **Background** - Defines the background selections (color, dynamic color, icon pack, shape, image and dynamic image) for the widget container.  See [[:ui:ui-generic-background|Background]] for more details if desired.   * **Background** - Defines the background selections (color, dynamic color, icon pack, shape, image and dynamic image) for the widget container.  See [[:ui:ui-generic-background|Background]] for more details if desired.
   * **Margins**: Allows adjustment of the margins surrounding the widget in its container. See [[:section:section-margins-page_and_object|here]] for a better understanding.   * **Margins**: Allows adjustment of the margins surrounding the widget in its container. See [[:section:section-margins-page_and_object|here]] for a better understanding.
 +
 +----
  
 ==== Widget: Photo slide ==== ==== Widget: Photo slide ====
 {{tablelayout?colwidth="225px,375px"&rowsHeaderSource=auto&float=center}} {{tablelayout?colwidth="225px,375px"&rowsHeaderSource=auto&float=center}}
-|{{:ui:ui-widget-photo_slide-image.png?direct&200}}|A slide show of sequential or random display of images from a designated folder at user-selected intervals. and customization options (such as grayscale or corner radius).|+|{{:ui:ui-widget-photo_slide-image.webp?direct&200}}|A slide show of sequential or random display of images from a designated folder at user-selected intervals. and customization options (such as grayscale or corner radius).|
  
 === Key Functions and Customization === === Key Functions and Customization ===
Line 452: Line 474:
   * **Margins**: Allows adjustment of the margins surrounding the widget in its container. See [[:section:section-margins-page_and_object|here.]]   * **Margins**: Allows adjustment of the margins surrounding the widget in its container. See [[:section:section-margins-page_and_object|here.]]
  
 +----
  
 ==== Widget: RSS reader ==== ==== Widget: RSS reader ====
 {{tablelayout?colwidth="225px,375px"&rowsHeaderSource=auto&float=center}} {{tablelayout?colwidth="225px,375px"&rowsHeaderSource=auto&float=center}}
-|{{:ui:ui-widget-rss_reader-image.png?direct&200}}|An **RSS reader** integrates _R_eally _S_imple _S_yndication feeds (for news, podcasts, or aggregated channels) through any RSS service. The reader supports the display and content of user-selected services (3 defaults included but a user search for ''rss sports'' or ''rss podcasts'' etc) which can include images with text and text-only layouts.|+|{{:ui:ui-widget-rss_reader-image.webp?direct&200}}|An **RSS reader** integrates _R_eally _S_imple _S_yndication feeds (for news, podcasts, or aggregated channels) through any RSS service. The reader supports the display and content of user-selected services (3 defaults included but a user search for ''rss sports'' or ''rss podcasts'' etc) which can include images with text and text-only layouts.|
  
 === Functional Characteristics === === Functional Characteristics ===
  
 <WRAP toby> <WRAP toby>
-<WRAP centeralign>**Toby says: Scroll with RSS in Windows!**</WRAP>\\ \\ +<WRAP centeralign>**Toby says: Scroll with RSS in Windows!**</WRAP>
   * **Scrolling in Windows:** Although windows themselves do //not// scroll their contents, widgets placed inside a window that possess **native scrolling** functionality will scroll correctly. This allows users to view long news feeds within a floating pop-up window or sliding panel.   * **Scrolling in Windows:** Although windows themselves do //not// scroll their contents, widgets placed inside a window that possess **native scrolling** functionality will scroll correctly. This allows users to view long news feeds within a floating pop-up window or sliding panel.
-</WRAP> 
 </WRAP> </WRAP>
 +
 +----
  
 ==== Widget: Checklist ==== ==== Widget: Checklist ====
-{{tablelayout?colwidth="225px,375px"&rowsHeaderSource=auto&float=center}} +{{tablelayout?colwidth="425px,375px"&rowsHeaderSource=auto&float=center}} 
-|{{:ui:ui-widget-checklist1-image?direct&100}} {{:ui:ui-widget-checklist1-image?direct&100}}|This is a "To Do" list with each item preceded with a active checkbox for a user to indicate "completion" and an edit icon to enter the checklist dialog for creating, deleting, and managing the list.|+|{{:ui:ui-widget-checklist1-image.webp?direct&200}} {{:ui:ui-widget-checklist2-image.webp?direct&200}}|This is a "To Do" list with each item preceded with a active checkbox for a user to indicate "completion" and an edit icon to enter the checklist dialog for creating, deleting, and managing the list.|
  
 === Key Functions and Customization === === Key Functions and Customization ===
Line 492: Line 516:
     * **Down** - Select the list item to highlight it, then tap down to move the item one item down.     * **Down** - Select the list item to highlight it, then tap down to move the item one item down.
  
-</WRAP info>+<WRAP info>
 There is no stated limit of entries or character limit of an entry. uiTLM successfully tested 500 character entries and 10 entry items. There is no stated limit of entries or character limit of an entry. uiTLM successfully tested 500 character entries and 10 entry items.
 </WRAP> </WRAP>
 +
 +----
  
 ==== Widget: Application ==== ==== Widget: Application ====
Line 512: Line 538:
 === Scaling vs. Resizing === === Scaling vs. Resizing ===
  
-There is a functional difference between resizing and scaling a widget and how it affects the widget's background size. **Resizing** the widget frame (dragging the corner handles) changes the container size, but the content inside **does not** automatically stretch to fill the new space. If the widget //content// appears too small or floats in empty space after resizing, use the **rotate-transform** icon {{:ui:ui-icon_rotate-transform.png?direct&25}} (then tap it's ''Transform'' button and use the top slider [10-100]) to zoom the widget with it's contents which //will not// change the background size.+There is a functional difference between resizing and scaling a widget and how it affects the widget's background size. **Resizing** the widget frame (dragging the corner handles) changes the container size, but the content inside **does not** automatically stretch to fill the new space. If the widget //content// appears too small or floats in empty space after resizing, use the **rotate-transform** icon {{:ui:ui-icon_rotate-transform.webp?direct&25}} (then tap it's ''Transform'' button and use the top slider [10-100]) to zoom the widget with it's contents which //will not// change the background size.
   ***Resize** - Changes the boundaries of the container.   ***Resize** - Changes the boundaries of the container.
   ***Scale** - Zooms the widget content and it's container (background).   ***Scale** - Zooms the widget content and it's container (background).