Tweaking ZeroPhone UI

From ZeroPhone
Jump to: navigation, search

Sometimes, the stock ZeroPhone UI just isn't good enough - you might want it to look a little different, or maybe behave differently. Here's one of the ways to do that (more to be added later).

Tweaking UI element representation

pyLCI allows having different UI representations (views) for different UI elements. It uses JSON-based configuration files, so that one can define, which view is used for a specific UI element or just UI element type, as well as which view is the default for UI element families or specific UI elements. The information about used views is stored in the ui/configs directory, in .json files. The main file is base_config.json, which contains defaults that are shipped with pyLCI. This file is stored in pyLCI git repository and will be updated from time to time to accomodate new apps, so changing the base_config.json file itself is highly unadvised (since then there might be merge conflicts on next update from git).

To solve the "updating centralised defaults through git" problem, I've made a simple JSON-based configuration way - so that it's easy to to define, which view is used for this specific UI element or just UI element type, as well as which view is the default. To personalize the UI, just create one more file in ui/configs/ folder, and it's going to be automatically picked up (file naming restrictions apply). All the keys and values in the base_config.json file can be overridden by creating a config_my_changes.json file in the same folder, where "my changes" is a descriptive name for what this config changes - so, resulting filenames could look like config_my_tweaks.json or config_readability.json.

UI element view descriptions

Right now, there aren't many views available. For example, for ListViewUIElement, available views are:

  • TextView

A simple view which is meant for character-based (non-graphical) displays, like HD44780 display (2x16 characters and further). Left for compatibility reasons (so that those displays can still be attached and used on ZeroPhone as auxiliary displays)

  • SimpleGraphicalView

A view that uses 8pt fonts. Fonts are smaller and harder to read, but one screen fits more information (8x24 characters).

  • PrettyGraphicalView

A view that uses 16pt fonts. It's more readable, but only 4 rows of max 16 characters fit on the screen. It's going to be used as the default view in ZeroPhone when the UI work branch gets merged.

An example base config

This is an example base config file (base_config.json), which will have its values overridden by any additional config files.

{"list_ui_base":{
   "custom_views":{
       "Systemctl: all unit list menu": "SimpleGraphicalView",
       "Systemctl: filtered unit list menu": "SimpleGraphicalView",
       "NMap: select port types": "SimpleGraphicalView"
   },
   "default":"PrettyGraphicalView"
 }
}

(base_config.json taken from git on 09.10.17)

Replacing view for one specific element

Let's create a config_tweaks.json file, to override one UI element's settings, specifically, its default view:

{"list_ui_base":{"custom_views":{"NMap: select port types": "PrettyGraphicalView", "Main app menu": "MainMenuTripletView"}}}

The "NMap: select port types" key is the UI element name, passed to the UI element constructor, like this:

chosen_ports = Checkbox(heuristic_ports, i, o, name="NMap: select port types", final_button_name="Run scan").activate()

So, if you want to change the name of a specific UI element, you need to find out its name first - and just reading it from the code is the most convenient way so far.

Resulting config that'll be used by the UI elements:

{"list_ui_base":{
  "custom_views":{
      "Systemctl: all unit list menu": "SimpleGraphicalView",
      "Systemctl: filtered unit list menu": "SimpleGraphicalView",
      "NMap: select port types": "PrettyGraphicalView",
      "Main app menu": "MainMenuTripletView"
  },
  "default":"PrettyGraphicalView"
 }
}

Replacing the default view for one type of UI elements

Now, let's say you want to use the 8px character view by default. Let's create a config_tweaks.json file, to override one view that we don't like the default view for:

{"list_ui_base":{"default":"SimpleGraphicalView"}}

Resulting config that'll be used by the UI elements:

{"list_ui_base":{
  "custom_views":{
      "Systemctl: all unit list menu": "SimpleGraphicalView",
      "Systemctl: filtered unit list menu": "SimpleGraphicalView",
      "NMap: select port types": "PrettyGraphicalView",
      "Main app menu": "MainMenuTripletView"
  },
  "default":"SimpleGraphicalView"
 }
}

That is, assuming that config_tweaks.json is also used.

Resulting example config

If we merge both of those configs together, we get:

 {"list_ui_base":{"custom_views":{"NMap: select port types": "PrettyGraphicalView", "Main app menu": "MainMenuTripletView"}}}

Notes

  • In the future, passing positional and keyword arguments to the view constructors will be supported.
  • Also, some ListViewUIElement elements, like Checkboxes, subclass those view classes because some logic has to be changed for them - the names to be used in config files remain the same, but the actual classes used are not, so you might want to keep that in mind if you want to edit UI elements' view code.