Editing Custom Panels

The custom panel editor can appear in two different modes as the dynamic panel editor does. The viewing mode view_32shows the panel in a preview. In this mode the panel is full functional and can already activate functions if its widgets are already connected to an accessory characteristic.

edit_32In editing mode you can add widgets to the panel, change their settings and manage the panels styles and settings.

Editing panel settings and stylesheets

paintbrush_32In editing mode you can modify the panel settings (basically changing and editing its stylesheet) by tapping the paintbrush icon. In the settings dialog you will be able to change or modify the selected stylesheet. Changes on the stylesheets are immediately visualized in the panel behind.

The settings dialog appears as a popover view on the iPad and as a “slide-up” view on the iPhone as you may know it from other apps. Especially on the iPhone this improvement keeps the important immediate feedback on changes even on smaller displays, compared to the previous full screen dialog.

To change the stylesheet go to the panel settings section of the dialog and select the desired stylesheet. You will also be able to modify the stylesheet by tapping on the edit button on the bottom of the stylesheet list and selecting the stylesheet you want to modify. Since Version 2.3 we improved the usability of this feature by providing an additional section. Here you will be able to modify the stylesheet directly. Some commodity features have been also added to allow to duplicate assigned readonly stylesheets without having to navigate back to the main menu and then to the stylesheet management view.

Adding, editing and repositioning widgets

paintbrush_32New widgets can be added to the panel by tapping on + button on the top menu bar and selecting the desired widget type. You may have to reposition the widget accordingly.  Select a widget and tap on the paintbrush button in order to show the corresponding dialog. The properties shown depend on the widget selected. On the bottom of the settings list you can also choose to delete the widget if it is no longer required. Most changes will be shown immediately as they are changed in the background panel.

To reposition a widget just drag it around. Since Version 2.3 you will no longer have to hold the widget for a second before dragging it around. We found out, that selection and panning without a previous long hold is a quite big improvement of the user experience when editing panels, as other apps like Apple Keynote are providing the same functionality.

Cut, Copy & Paste

clipboard_32Starting with LiVo 2.5 you can cut, copy and paste widgets within a single panel or across different panels. Tap on the clipboard button to open a selection menu for the clipboard functions. Depending on your selection and the clipboard content, the menu will show the available functions.

Assigning characteristics

Tap on a widget to assign an accessory characteristic to it. A characteristic could be the status of a switch, a temperature, a color or whatever suits to the widgets and accessories selected. Tap on the „Command“ entry to navigate all the way down from accessories to services down to the individual characteristic. LiVo automatically shows only characteristics that fits to the selected widget type. The value setting property changes depending on the data type of the selected characteristic, so that you don’t have to “guess” which value should fit. If LiVo shows a simple text field probably it didn’t find additional meta information regarding the characteristics data types. In this case you should have a look in accessory manual provided by the hardware manufacturer. Tell us about unsupported accessories. We will try to get more specifications from hardware vendors and improve LiVo’s usability further.

Edit widgets step-by-step

Here’s  a step-by-step summary for creating a new widget and assigning a characteristic to it:

  1. Open one of the panels you already created or create a new one
  2. Let’s start with a simple switch or a labeled switch to make things easier, so place a „Switch“ or „Labeled Switch“ into your panel, by tapping on the + button on the top menu bar and selecting the corresponding widget type
  3. Now tap on the widget, the widget settings dialog opens.
  4. Tap on „Command“, the accessory list will be shown.
  5. Tap your way through services until you reach the characteristic to assign. As a switch supports boolean values only, you will only see services that contains boolean characteristics such as power states, switches etc.
  6. Finally select the characteristic to assign to your widget.
  7. Close the dialog
  8. Switch on the menu bar to „Viewing mode“
  9. Now you can test your widget assignment.
  10. Switch back to „Editing mode“ to continue editing your panel

List view layout for custom panels

This feature substitutes the former floating panel layout.

To show the panel widgets as a list of items (like in the dynamic panel), select “Show as list” in the panel settings. The editor user interface in this case is similar to the dynamic panel editor. As usual for custom panels and different from the automatically created widgets within dynamic panels you will be able to delete widgets from custom panels which are presented as a list.

Floating panel layout for custom panels

The floating layout feature was dropped with Version 2.3 of LiVo and substituted by the list view layout.