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
uitlm-rewrite:phase-02 [2026/07/05 12:28] – dorepsuitlm-rewrite:phase-02 [2026/07/19 12:00] (current) – ↷ Links adapted because of a move operation doreps
Line 1: Line 1:
-<WRAP center notice centeralign> 
-**⚠️ v4.0 UI Transition Notice - In Process:** 
-//The release of Total Launcher v4.0 has introduced significant user interface changes. Please note that this  
-page does not yet reflect these updates. The new layout paths, folds, and visual maps are currently being  
-compiled and will be deployed shortly.// 
-</WRAP> 
- 
- 
----- 
- 
- 
 ====== Phase 2: The Canvas (Structure & Workflow) ====== ====== Phase 2: The Canvas (Structure & Workflow) ======
  
-Now that styling an object is better understood, how is it placed on an object. Total Launcher is not just a grid of icons; it is a free-form design canvas. This phase covers the architecture: **Pages, Windows, Layouts, and Positioning.**+Now that styling an object is better understood, how is it placed on an object? Total Launcher is not just a grid of icons; it is a free-form design canvas. This phase covers the architecture: **Pages, Windows, Layouts, and Positioning.**
  
 ===== The Hierarchy ===== ===== The Hierarchy =====
Line 25: Line 14:
 Total Launcher allows extensive management of screens and pages. Total Launcher allows extensive management of screens and pages.
  
-  * **Adding/Removing Pages:** Enter [[:section:section1-2-e_beginners_basic_editing_steps#to_enter_edit_mode|Edit mode]]. When viewing the ++screen |{{:uitlm-1-2-e-fig1.webp?200}}++ make sure to tap the ''Edit Off'' icon to turn the ++Edit On|{{:section:section-phase2-page-edit.webp?200}}++. Tap the "New Page" icon {{:ui:ui-icon_page-new_page.webp?direct&25}} to add, or the "Trash" icon {{ui:ui-icon_delete-v4.webp?direct&15}} to remove the current page (shows in the center of the screen). +  * **Adding/Removing Pages:** Enter [[section:section-basic_editing#to_enter_edit_mode|Edit mode]]. By default, the setting is off. When viewing this ++screen |{{:ui:ui-edit_mode_off-v4.webp?200}}++ make sure to tap the ''Edit'' icon to turn the ++Edit On|{{:ui:ui-edit_on-v4.webp?200}}++. The ''New page'' heading indicates that a 'new page' can be created. Swipe right to view the page placeholder. Then tap ''+'' to create a new page. Pages do not require labels, but labels //are used// for Launcher Actions, such as ''Go to page ...''. Therefore, labels are recommended to be entered here. Tap the "New Page" icon {{:ui:ui-icon_page-new_page-v4.webp?direct&75}} to add, or the "Trash" icon {{ui:ui-icon_delete-v4.webp?direct&15}} to remove the current page (shows in the center of the screen). 
-  * **Arranging Pages:** In the page overview, use the ''Swap Button'' {{:ui:ui-icon_page_swap.webp?direct&25}} to exchange positions of pages. +  * **Arranging Pages:** In the page overview, use the ''Swap Button'' {{ui:ui-icon_page_swap-v4.webp?direct&50}} to exchange positions of pages. 
-  * **The Home Page:** Indicated by a ''House Icon'' {{:ui:ui-icon_page_home.webp?direct&25}}. To change the default home page, swipe left or right and tap the house icon on the desired page.+  * **The Home Page:** Indicated by a ''House Icon'' {{:ui:ui-icon_page_home.webp?direct&25}}. To change the default home page, swipe left or right to center the desired page on the screen. Tap the house icon to set it as 'Home'.
   * **Scrolling:**   * **Scrolling:**
     * **Horizontal:** Standard swiping between pages.     * **Horizontal:** Standard swiping between pages.
-    * **Vertical:** Each page can be individually set to "Scroll Vertically" in Page Options {{:ui:ui-icon_option-v4.webp?direct&25}}. Just "uncheck" the ''Fit the content to the screen height (make not scrollable)'' option, then follow this [[howto:howto-page_scrolling-vertical|setup procedure]]. This allows for an almost infinite scrolling page similar to a social media feed. +    * **Vertical:** Each page can be individually set to "Scroll Vertically" in Options {{:ui:ui-icon_option-v4.webp?direct&25}}. Just ''turn on'' the ''Fit the content to the screen height (disable scrolling)'' button. Then follow this [[howto:howto-page_scrolling-vertical|setup procedure]]. This allows for an almost infinite-scrolling page, similar to a social media feed. 
-  * **Orientation:** Total Launcher supports independent page designs for **Portrait** and **Landscape** modes. Arrange objects separately for each orientation.+  * **Orientation:** Total Launcher supports independent page designs for **Portrait** and **Landscape** modes. Arrange objects separately for each orientation by tapping the Background icon {{ui:ui-icon_image-v4.webp|}} and selecting ''Portrait'' and/or ''Landscape'' for each device orientation.
  
 ===== Layouts (Grids & Circles) ===== ===== Layouts (Grids & Circles) =====
-While objects can be freely placed, "Layouts" are containers that snap objects into a structured formation.+While objects can be placed freely, "Layouts" are containers that snap objects into a structured arrangement.
  
   * **Grid Layout:** Snaps items into rows and columns.   * **Grid Layout:** Snaps items into rows and columns.
-    * *Customization:* You can adjust ''Columns/Rows'' (1 to 16).+    * **Customization:** Adjust ''Columns'' or ''Rows'' (1 to 16).
   * **Circle Layout:** Arranges items in a perfect circle.   * **Circle Layout:** Arranges items in a perfect circle.
-    * *Customization:* You can adjust the size, rotation angle and even transform it to unique viewpoints.+    * **Customization:** Adjust the size, rotation angle, and even transform it to unique viewpoints, or select the option to make it a **Fidget spinner**.
   * **Why use a Layout?**   * **Why use a Layout?**
     * **Automatic Spacing:** If resizing a Grid Layout, all icons inside resize and space themselves automatically.     * **Automatic Spacing:** If resizing a Grid Layout, all icons inside resize and space themselves automatically.
-    * **Batch Editing:** Changing the "Icon Size" in the Layout Options changes *every* icon in that grid instantly.+<WRAP center round tip 60%> 
 +Objects, such as icons and folders, can be placed //anywhere// on the page.\\ See [[:howto:howto-add-app_shortcut|"How To Add An Application Shortcut To The Page".]] 
 +</WRAP>
  
 ==== Grouping vs. Layouts ==== ==== Grouping vs. Layouts ====
Line 48: Line 39:
   * **Layout:** A container that forces items into a grid/circle. You cannot drag items freely inside it.   * **Layout:** A container that forces items into a grid/circle. You cannot drag items freely inside it.
   * **Group:** A selection of free-floating objects glued together.   * **Group:** A selection of free-floating objects glued together.
-    * *How to Group:* Highlight multiple objects by a tap/hold. This activates the Object Design Menus. In the bottom menu, tap the ''Group'' icon {{ui:ui-icon_group-v4.webp?direct&25}}. +    * **How to Group:** Highlight multiple objects by a tap/hold. This activates the Object Design Menus. In the bottom menu, tap the ''Group'' icon {{ui:ui-icon_group-v4.webp?direct&25}}. 
-    * *Benefit:* You can move, rotate, or animate the entire group as one unit (e.g., a "Music Player" group containing Play, Pause, and Album Art objects).+    * **Benefit:** This enables the entire group to be moved, rotated, or animated as one unit (e.g., a "Music Player" group containing Play, Pause, and Album Art objects).
  
 ===== Anchoring & Screen Adaptation ===== ===== Anchoring & Screen Adaptation =====
Line 60: Line 51:
     * **Problem:** On a taller screen, a "Dock" anchored to the top might float in the middle of the screen.     * **Problem:** On a taller screen, a "Dock" anchored to the top might float in the middle of the screen.
     * **Solution:** Enable ''Fit content to the screen height'' in the ''Page Options''.     * **Solution:** Enable ''Fit content to the screen height'' in the ''Page Options''.
-      * **How to set:** Once enabled, select the object and use the **Y-Position** entry to adjust alignment to the desired level.+      * **How to set:** Once enabled, select the object and use the **Y-Position** entry to adjust alignment to the desired position, and select the {{:ui:ui-icon_fit_position-top-v4.webp?direct&25}}{{:ui:ui-icon_fit_position-bottom-v4.webp?direct&20}} icon on the Object Design menu (bottom) to reflect top or bottom priority.
     * **Best for:** Docks, Navigation Bars, and Footers. This ensures stability across different devices.     * **Best for:** Docks, Navigation Bars, and Footers. This ensures stability across different devices.
  
Line 69: Line 60:
 ===== Z-Order (Layers) ===== ===== Z-Order (Layers) =====
 Objects in Total Launcher sit in layers, like a stack of papers. Objects in Total Launcher sit in layers, like a stack of papers.
-  * **The Issue:** When a large transparent shape is placed *over* a button, the button becomes unclickable because the shape is blocking the touch.+  * **The Issue:** When a large transparent shape is placed **over** a button, the button becomes unclickable because the shape is blocking the touch.
   * **The Fix:**   * **The Fix:**
     * **Access:**  With the desired object selected and the Object Design Menu (bottom) activated, then:     * **Access:**  With the desired object selected and the Object Design Menu (bottom) activated, then:
Line 76: Line 67:
  
 ===== The Grid vs. Free Positioning ===== ===== The Grid vs. Free Positioning =====
-  * **Snap-to-Grid:** By default, objects in ''Edit On'' mode when selected will snap to invisible grid lines for neatness when manually moved. +  * **Snap-to-Grid:** By default, objects in ''Edit On'' mode, when selected, will snap to invisible grid lines for neatness when manually moved. 
-  * **Nudging:** For pixel-perfect precision, still in Edit On mode with the object selected, quickly tap one of the ''Edit'' {{:ui:ui-icon_object_edit.webp?direct&25}} elements to use the directional arrow keys to finitely move an object or the ''pencil'' to manually adjust the position coordinates 1 pixel at a time.+  * **Nudging:** For pixel-perfect precision, still in Edit On mode with the object selected, quickly tap one of the ''Edit'' {{ui:ui-icon_object_edit-v4.webp?direct&25}} elements to use the directional arrow keys to finitely move an object or the ''pencil'' to manually adjust the position coordinates 1 pixel at a time.
  
 ---- ----
  
 <WRAP right> <WRAP right>
-[[:uitlm-rewrite:phase-03|Proceed to Phase 3]]+[[:uitlm-rewrite:phase-02b|Proceed to Phase 2b]]
 </WRAP> </WRAP>