====== Layout - Circle ====== Dialog selections are discussed below the image. To navigate to an item, select it in the Circle Layout image. {{imapmarkers>:ui:ui-layout-circle-selected-v4.webp?direct&300|Circle Layout Object Design}} [[#selection|ID1|Selection@11,10,44,39]] [[#option|ID2|Options@79,11,114,36]] [[#pin|ID3|Pin@115,11,146,34]] [[#copy|ID4|Copy@150,11,181,36]] [[#cut|ID5|Cut@186,10,219,35]] [[#save|ID6|Save@223,9,253,34]] [[#delete|ID7|Delete@258,9,290,34]] [[:ui:ui-layout-circle-deselected|ID8|Empty area@10,43,291,160]] [[:ui:ui-layout-circle-deselected|ID9|Empty area@10,442,290,593]] [[#selection:_back_-_forward|ID10|Selection: Back- Forward@31,601,88,628]] [[#z-order:_front_-_back|ID11|Z-order: front - back@94,601,163,627]] [[#group|ID12|Group@170,601,202,626]] [[#rotate_-_transform|ID13|Rotate - Transform@205,600,235,625]] [[#align|ID14|Align@240,601,279,625]] [[|ID15|Not clickable since it is selected. Tap an empty area to navigate, or see the Options description (below) for configuration of the circle layout.@28,186,270,420]] {{cfg>}} { } {{**Circle Layout Object Design screen. Make selection above.** ===== Circle Layout ===== The page after selecting the Circle layout, with the 'circle' selected. It provides spatial positioning, canvas boundaries, and the action ''+'' for linear radial container arrangements. ==== Steps to Complete the Circle Layout ==== The user will customarily follow these steps to complete the circle layout setup: - The container with the 6 default object placeholders can be moved to another location by tap/hold/dragging the center of the selected container itself. Individual object placeholders cannot be moved independently, only in tandem. - The 6 default placeholders can be increased or decreased by using the Object Design menu Options {{:ui:ui-icon_option-25-v4.webp?direct}} icon which will open the ++Option Edit dialog shown here|text{:ui:ui-layout-circle-dialog_options-gen_sound_icon-v4.webp?direct&250|Circle Option Edit dialog 1of2}} {{:ui:ui-layout-circle-dialog_options-label_background-v4.webp?direct&250|Circle Option Edit dialog 2of2}}++. While this interactive demo cannot apply a circle layout, those wanting to explore its Options for further interaction and explanation can **tap the ''Option'' icon** in the Circle Layout dialog at the top of this page. - To assign an action to a ''+'' placeholder: - Deselect the Circle Layout container by tapping an empty space outside of the layout placeholder. * In this demo, tap an empty space in the Circle Layout dialog at the top of this page //or// [[:ui:ui-layout-circle-deselected|tap here to navigate there.]] Otherwise, ++tap here to read what would happen|\\ • Tap the desired ''+'' placeholder to open this Action On Tap dialog: {{:ui:ui-option-action_tap-layout-selection-v4.webp?direct&200|Action On Tap Selection dialog}}++. ==== Circle Layout Objects Description ==== === Circle objects === * **Circle objects** {{:ui:ui-icon_add_gray-v4.webp?direct&35}} : Placeholders, shown in Edit On mode, for the layout objects. The default "Circle Layout" contains 6 vertically aligned objects, with the layout container shown as selected. Tapping outside the boundary deselects the layout. At that time, a tap on a ''+'' will activate an ''Action'' dialog for selection of which action is desired (application, folder, window, sequence, etc.) * **Coordinate Markers (725, 65, 951):** Real-time pixel distance markers from canvas edges. A tap-drag of the container would change these numbers, but they are not adjustable in this demo. * **Anchor Nodes (Blue Handles):** Boundary adjustment handles located at midpoints and corners to scale width and height. (not adjustable in this demo) Other objects on this page are described below. For items that are not actionable in this demo, a video shows the user's involvement in the selection. === Object Design Menu (Top) === Notice the Object Design Menu at both the top and bottom of the screen. The icons contained in these menus describe what will happen or what options are available for the selected object. Read below and view a demo of what happens when specific icons are selected. **TOP** {{ui:ui-icon_object_design_menu_top-v4.webp?400|Object Design Menu - Top}}\\ == Selection == {{ui:ui-icon_selection-v4.webp?direct&25}} - Once the selection icon is tapped, the user can drag left to partially intersect any selected object or right to fully select any object. * ++See a demo here.|{{ui:ui-icon_object_design_menu-selection-video-v4.gif}}++ == Action == {{ui:ui-icon_action-v4.webp?direct&25}} - This would normally enable the object's action when tapped or swiped, such as application, folder, or calendar. However, since the "layout" is selected, the ''Action'' icon is grayed out. A user will want to assign "actions" to the objects within the circle layout. To accomplish that, tap an empty area to deselect the layout. This changes the Launcher focus from Object Design mode to Page Design mode, enabling tapping the layout's '+' icons to assign actions. * ++See a demo here.|{{ui:ui-icon_object_design_menu-action-video-v4.gif}}++ * To navigate to that interactive ui page, [[:ui:ui-layout-circle-deselected|tap here.]] == Option == *{{ui:ui-icon_option-v4.webp?direct&25}} - Tap to open the Options Edit dialog for setting the number of rows, launch sounds, icon, labels, and background features. * Navigate to the interactive demo for the [[:ui:ui-layout-circle-dialog_options|Layout Circle Options]]. == Pin == *{{ui:ui-icon_pin-v4.webp?direct&25}} - With an object selected and then the pin icon tapped, the object will now be visible in its current location on all pages of the setup. * ++See a demo here.|{{ui:ui-icon_object_design_menu-pin-video-v4.gif}}++ == Copy == *{{ui:ui-icon_copy-v4.webp?direct&25}} - Creates a copy of the object, which can then be pasted using the Object Add (+) - Paste option. The new copy will be placed on top of the existing object but can be selected and moved to the desired location. * ++See a demo here.|{{ui:ui-icon_object_design_menu-copy-video-v4.gif}}++ == Cut == *{{ui:ui-icon_cut-v4.webp?direct&25}} - Removes the object from the screen location and allows the user to then paste the item to another location (such as another page) using the Object Add (+) - Paste option. * ++See a demo here.|{{ui:ui-icon_object_design_menu-cut-video-v4.gif}}++ == Save == *{{ui:ui-icon_save-v4.webp?direct&25}} - places a copy of the object in the Resource's "Saved" folder for future access * ++See a demo here.|{{ui:ui-icon_object_design_menu-save-video-v4.gif}}++ == Delete == *{{ui:ui-icon_delete-v4.webp?direct&25}} - Removes the object from the page with no saving * ++See a demo here.|{{ui:ui-icon_object_design_menu-delete-video-v4.gif}}++ \\ === Object Design Menu (Bottom) === **BOTTOM** {{:ui:ui-icon_object_design_menu_bottom-v4.webp?400|Object Design Menu - Bottom}}\\ == Selection: Back - Forward == *{{ui:ui-icon_select_back-v4.webp?direct&25}} **Back** - Grayed out in this image (inactive) since all objects on the page were selected. If multiple unselected objects exist, the user can cycle through all objects by tapping the icon, then proceed with modifying the selected object. * For both the back and forward icons, see a demo ++here|{{ui:ui-icon_object_design_menu-forward_backward-video-v4.gif}}++. *{{ui:ui-icon_select_forward-v4.webp?direct&25}} **Forward** - Grayed out in this image (inactive) since all objects on the page were selected. If multiple unselected objects exist, the user can cycle through all objects by tapping the icon, then proceed with the object's modification.\\ == Z-order: Front - Back == *{{ui:ui-icon_zorder_front-v4.webp?direct&25}} **Front** - Grayed out in this image (inactive) since all objects were selected. If multiple overlapping unselected objects existed, this would bring the selected object to the front "layer" to appear before other objects. * For both the Z-order Front and Z-order Back icons, see a demo ++here|{{ui:ui-icon_object_design_menu-front_back-video-v4.gif}}++. *{{ui:ui-icon_zorder_back-v4.webp?direct&25}} **Back** - Grayed out in this image (inactive) since all objects were selected. If multiple overlapping unselected objects existed, this would move the selected object to a "layer" behind other objects.\\ == Group == *{{ui:ui-icon_group-v4.webp?direct&25}} **Group** - While the 3 objects in this image //are selected//, they are currently separate objects. Tapping this icon groups the 3 objects into a single object. This is useful when needing to move the group items at the same time. * ++See a demo here.|{{ui:ui-icon_object_design_menu-group-video-v4.gif}}++ == Rotate - Transform == *{{ui:ui-icon_rotate-transform-v4.webp?direct&25}} **Rotate - Transform** - Grayed out in this image (inactive) since more than 1 object is selected. If only a single object is selected, tapping the icon opens the rotate-transform dialog to rotate the object around its x or y axis and adjust its rotation, scaling, and translation... It's complicated, so experiment to learn. * ++See a demo here.|{{ui:ui-icon_object_design_menu-rotate_transform-video-v4.gif}}++ == Align == *{{ui:ui-icon_align-v4.webp?direct&25}} **Align** - Grayed out in this image (inactive) since all objects in the image were selected. If multiple objects exist, the user taps the align icon, which reveals a horizontal or vertical alignment bar when it intersects another object. This is useful for centering or matching top/bottom areas of objects. * ++See a demo here.|{{ui:ui-icon_object_design_menu-align-video-v4.gif}}++{{page>site:site-footer-comment_feedback_block}} ===== Hidden Index Anchors ===== [[:ui:ui-layout-circle-deselected]]