LaunchMeUp Editor

The editor is a powerful tool that allows you to design a theme. Its use requires a good knowledge of the components that can be used in a LaunchMeUp application (see the “reference manual” in this wiki).

How to launch LaunchMeUp Editor

Once LaunchMeUp is installed on your computer, a shortcut is available on the desktop as well as in the Windows start menu. It is also possible to launch the editor from the LaunchMeUp home page.

The first screen of the editor is the one allowing connection. A valid account created on magiczee.com is therefore necessary (see the “membership” section of the site). Creating this account is free.

It is also possible to change the display language using a drop-down list at the top right of the editor.

What LaunchMeUp Editor allows

LaunchMeUp Editor will allow you to modify the layout of the pages and components of a theme or application, or to create a new theme / application “from scratch”.

With the editor, you will be able to create pages in which you will judiciously place components to be configured using a list of properties.

The list of available components is described in the reference manual. Each component can be animated (appearance and disappearance animations) to cause transitions between the display of different pages.

File structure of an application

A theme or an application has two essential files.

The entry point: this is a .lmu page containing a root component called “Launcher”. It will be the main page of your theme.
The ThemeInfos file: it is an .lmu file containing the metadata of the theme (title, author, etc.)

The rest of the theme file tree is free, but it is recommended to follow the following diagram:

An “images\” subdirectory containing the images
A “video\” subdirectory containing the videos
A “musics\” subdirectory containing the music
A “sounds\” subdirectory containing the sounds

Editor home screen

Once connected, the editor gives you access to a home screen displaying the latest modified themes to allow them to be reopened with a single click.

It is also possible to open another application, create a new one or remix a theme retrieved from magiczee.com.

Create a new application

If you choose to create a new application, the editor will ask you in which directory you want to store it, then copy the new application template to that directory before opening it.

This model only includes an “entry point” page (+ ThemeInfos) and the subdirectories mentioned above.

Open an existing application

The system asks you for the storage path of the application to open and scans the files and subdirectories present there to offer them for editing.

Get a theme on magiczee.com

Coming soon

The different sections of the editor

Once your application is opened (creation or modification), the editor displays 3 distinct sections:

On the left, a retractable panel with the project explorer, component properties, variables and tools
At the top, a toolbar
In the middle, the editing area which displays the current page and allows the selection of components

Hovering the mouse over the different elements present in the editor displays help describing the functionality in question.

Project Explorer

It shows the file tree of your application directory. Right-clicking on an element in this tree gives access to a menu containing the following options:

Open: opens the element in the editor (pages, etc.)
Open with system: Opens the item with the default program set for the file extension.
Open folder: opens the folder in Windows File Explorer
Add :

An existing file: allows the addition of a file (media, etc.) and its copy into the project directory

A new page: adds a new xml page to the project

A new folder: adds a directory to the project tree

Rename: renames the selected item in the explorer
Cut/copy/paste: classic editing operations
Delete: deletes the selected item in Explorer (including on disk). It is also possible to use the “Delete” key.

Double-clicking on an element in the Explorer also has the effect of opening it, either in the editor for pages, or with Windows for other files.

Properties

The property panel is divided into 2 parts:

The component tree of the currently open page.

This tree is hierarchical, which means that a component can contain other components.

Right-clicking on an item in the list provides access to a menu containing the following options:

Set window id: launchmeup pages are multi-window. Thus, you can define for each component of a page the window in which it will be displayed. This is done by specifying the window id of the component. Application windows are defined at the Launcher level.
Go inside: allows you to go inside a component by making it the root displayed in the editing area. Can also be obtained by double clicking.
Set background/foreground color
Define the grid: only for Layout and Layout descendant components (Launcher, etc.), allows you to define the grid in which the child components will be placed
Define variables: to define a list of key/value pairs specific to the component. Variables can be used (via their key, which is replaced by their value) in certain properties and are inherited by child components.
Define styles: styles allow you to give a common appearance to a component type for the entire application.
Define items: only for ItemsPanel, gives access to a screen for defining items in the ItemsPanel.
Set Target: The target is what will be executed/displayed when the user clicks on a component. For example another page, a shell command, etc.
Bring to Front: moves the component to the foreground to improve its visibility.
Bring to second: moves the component to the background
Add a new element: only for components containing children like Layout or Launcher: adds a child component to the selected component.
Add a new item: only for ItemsPanels: adds an item to the ItemsPanel collection (icon, …)
Delete: deletes the selected component, it is also possible to use the “Delete” key.
Cut / copy / paste: classic editing operations

The properties of the component selected in the edit box.

This list allows the modification of the properties of the selected component.

It has a filter area at the top with the following options:

Group: to group (or not) the properties by theme
All / essential / modified: displays all properties, those deemed essential depending on the type of component selected, or only properties that have been modified by the user.
Search box: text box to filter properties by name

Variables

This panel contains a reminder of the variables defined in the different components of the page. Variables are very useful for making applications "configurable", and also in defining patterns of items that must repeat like icons.

Tools

This panel contains the connection widget and the editor display language widget.

The toolbar includes the menu options present in the editing panel, with the addition of:

Previous / next: to navigate the history of items opened in the editing area.
Save application: saves all changes.
Media autoplay: Enables/disables autoplay of media that are displayed in the editor.
Launch: to launch the application with the Player and test it.
Selection of the window to display: only displays components corresponding to a given window id.
Set theme information: to enter information from the “ThemeInfos.xml” file.
Define theme windows: provides access to a screen allowing you to specify the windows that the application will display once launched.

To the right of the toolbar is displayed a reminder of the page and the currently selected component.

The editing window

The central panel contains the rendering of the currently edited page, and allows the selection of components by mouse click.

The “Esc” key allows you to go back to the parent of the selected component.

A menu is available by right-click and gives access to the same options as the toolbar.

Grids defined in Layout components appear as yellow lines. It is possible to move the selected component in its parent grid by dragging with the mouse the small square (moving) or the small yellow triangle (sizing) located at the top left and bottom right of the selection rectangle.