How to use plan touch mode in the zencontrol touch switch application.

In version 1.3.0 of the zencontrol touch switch application users can now create plan views with arbitrary button shapes, this can be used to make a switch screen where users can press an area on screen to perform actions.

Plan touch mode is configured in the GridControllerDataVariant object.

To use this mode when creating a plan touch view set the plan_touch_mode flag to true. Ensure the background_file_name and plan_control_file_name are both set.

Two images are required in order to use Plan touch mode, a background image and a plan_control image. The background is the image which will be displayed to the user. Commonly this would be a simplified plan image which shows the floor plan of the controlled area. The plan_control_image is an image which has solid coloured shapes representing the different areas to be controlled. These two images must be the same size, the plan control image must only have solid colours. two example images are included below. If your generated configuration doesn't contain the plan images they can be loaded by swiping over to the configuration pane (swipe from right to left), if a password is set, you will need to enter it now, then go to settings and select the "Add new image" button. This will allow you to navigate to the images on the device storage and copy them over to app information, ensure the image file names are identical to the entries in the json file.

example_plan_control.png

example_background.png

example json snip (not fully functional).

"landscape": 
{
       "background_file_name": "example_background.png",
        "plan_mode": true,
        "plan_touch_mode": true,
        "plan_control_file_name": "example_plan_control.png",
        "sub_button_footer": false,
        "plan_highlight_colour": "#D041B19C",
        "plan_colour_codes": [
             {
                "colour_code_hex": "#ffaec9",
                "type": "COMMAND",
               "command_data": {
                           "address": 153,
                           "command": 5,
                           "control": 0,
                           "data_0": 0,
                           "data_1": 0,
                           "data_2": 0,
                           "ip": "192.168.0.15",
                           "port": 5108
                       }
             }
          ]
}

Defining the actions for each group is done in the plan_colour_codes array. Each plan_colour_code should contain the hex string of the colour used in the plan control image in the format (#aarrggbb) where a is alpha(transparency), and the resulting action.

Example:

When pressing pink section (bottom right of example_plan_control.png) Make the control system with the IP 192.168.0.15 Set Group 2 to Max

{
    "colour_code_hex": "#ffaec9",
    "type": "COMMAND",
    "command_data": {
         "address": 133,
         "command": 5,
         "control": 0,
         "data_0": 0,
         "data_1": 0,
         "data_2": 0,
         "ip": "192.168.0.15",
         "port": 5108
      }
}

Example:

When pressing pink section, show sub button layout at pixel (400,400) to control Group 1 on the control system with the IP 192.168.0.15 with the commands Max, Off, Step up and Step down.

{
  "colour_code_hex": "#ffaec9",
  "type": "SUB_BUTTON_DIMMER",
  "sub_button_layout": {
    "label": "Group 1",
    "label_text_colour": -14272955,
    "label_text_size": 16.0,
    "popup_height": 80,
    "popup_width": 480,
    "start_x": 400,
    "start_y": 400
  },
  "sub_buttons": [
    {
      "command_data": {
        "address": 131,
        "command": 5,
        "control": 0,
        "data_0": 0,
        "data_1": 0,
        "data_2": 0,
        "ip": "192.168.0.15",
        "port": 5108
      },
      "label": "Max",
      "view_parameters": {
        "alpha": 1,
        "button_colour": -12009044,
        "button_pressed_colour": -14272955,
        "skeleton_mode": false,
        "text_colour": -1,
        "text_pressed_colour": -12009044,
        "text_size": 18
      }
    },
    {
      "command_data": {
        "address": 131,
        "command": 0,
        "control": 0,
        "data_0": 0,
        "data_1": 0,
        "data_2": 0,
        "ip": "192.168.0.15",
        "port": 5108
      },
      "label": "Off",
      "view_parameters": {
        "alpha": 1,
        "button_colour": -12009044,
        "button_pressed_colour": -14272955,
        "skeleton_mode": false,
        "text_colour": -1,
        "text_pressed_colour": -12009044,
        "text_size": 18
      }
    },
    {
      "command_data": {
        "address": 131,
        "command": 3,
        "control": 0,
        "data_0": 0,
        "data_1": 0,
        "data_2": 0,
        "ip": "192.168.0.15",
        "port": 5108
      },
      "init_command_data": {
        "address": 131,
        "command": 8,
        "control": 0,
        "data_0": 0,
        "data_1": 0,
        "data_2": 0,
        "ip": "192.168.0.15",
        "port": 5108
      },
      "label": "Dim up",
      "view_parameters": {
        "alpha": 1,
        "button_colour": -12009044,
        "button_pressed_colour": -14272955,
        "skeleton_mode": false,
        "text_colour": -1,
        "text_pressed_colour": -12009044,
        "text_size": 18
      }
    },
    {
      "command_data": {
        "address": 131,
        "command": 4,
        "control": 0,
        "data_0": 0,
        "data_1": 0,
        "data_2": 0,
        "ip": "192.168.0.15",
        "port": 5108
      },
      "init_command_data": {
        "address": 131,
        "command": 7,
        "control": 0,
        "data_0": 0,
        "data_1": 0,
        "data_2": 0,
        "ip": "192.168.0.15",
        "port": 5108
      },
      "label": "Dim down",
      "view_parameters": {
        "alpha": 1,
        "button_colour": -12009044,
        "button_pressed_colour": -14272955,
        "skeleton_mode": false,
        "text_colour": -1,
        "text_pressed_colour": -12009044,
        "text_size": 18
      }
    }
  ]
}