Getting Started with Control MP

In this tutorial we will go over creating a new project and go over some of the other navigation options, then we will create a simple LED project that uses an ESP8266 with no breadboard or jumpers. You could also use an ESP32 or Uno with WIFI.

  • This simple project will turn the ESP8266's built in LED on and off using a Toggle Switch component.

    When the ESP8266 receives a command from Control MP it will either turn on the built in LED or turn it off depending on the command received.

    The ESP8266 will also send commands back to Control MP to turn the LED component on or off and also send the LED status based on the command it received.

    Once again this is a very simple example to get you working with Control MP by sending and receiving commands from a microcontroller.

    Enjoy! And if you have any question or need support please contact support@controlmp.com.

  • From the main screen click on Projects (red arrow) to open the project list screen.

    You can also see there are a few other navigation options on this screen, let’s go over them now while we are here. Currently the user is logged in so we see the Logout link, if this user was not logged in you would be seeing two links: Login or Create New Account. Creating an account is not mandatory but you will gain a few features if you do! By creating an account, you will be able to upload your projects to the cloud and access them from any of your other devices. You can also transfer any purchased credits to your other devices if you like. Please note that if you do not have an account and you delete the app from your device you will lose any credits purchased on that device.

    There are two other icons on the bottom navigation bar the first to the left is Resources which will take you to this site. The other icon to the right is settings which will allow you to make changes to Control MP's navigation colors and set if you want layout snap-to and size.

  • From the project list screen click on New Projects (red arrow) to open the new project screen.

    The other navigation options on this screen are Close which will take you back to the main screen, Help which will open the help related to this screen. If you are logged in, you will see Cloud Projects which will open the cloud projects list and Edit Project which will allow you to edit or delete any of the projects in the list.

  • To create a new project enter a name for the project, select the Allowed Orientation for this project options are Both, Portrait Only and Landscape Only.

    Click on the Background Color button to change the background color and select a color from the color picker.

    Click on the Menu Icon Color button to change the color of the menu and select a color from the color picker.

    Next select the Connection Type you can choose from Bluetooth (BLE) or WIFI UDP.

    If you select Bluetooth (BLE) you must option to Auto Connect when the check box is checked.

    Press the Scan for Devices button to launch the Scanning for Devices screen and select the device you want to use, once connected to the device the Device Services screen will appear where you select the service you want to use, once the service is selected the Service Characteristics screen will appear where you can select the service characteristic to use, once selected you will be back to the New Project screen and will see the device details below the button.

    Once you’re happy with your settings click on Save (red arrow). To use WIFI UDP as your Connection Type see below.

  • If you choose to use WIFI UDP as your Connection Type you will see IP and Port. An IP address is not required, if you don't enter an IP address Control MP will broadcast to all devices on your network this is nice if you have multiplied devices you want to send to. If you know your devices IP address, it's best to use it. The UDP port is required.

    Once you’re happy with your settings click on Save (red arrow).

    Other navigation items on this screen include Cancel to return to the project list screen without saving, Help which will open the help related to this screen. Public Project allows you to download any project that you have the access code for, all the library examples include an access code to download the Control MP project. One thing to keep in mind is all the components in a project use the percentage of the screen for their location which means on a high-resolution device one component at 40% and another component at 50% may not touch but on a low-resolution device they may. So, with that in mind you may have to move things around a little depending on the device you are using.

  • Now that we went over how to create a new project lets create our LED Simple demo! Below we will be going through creating the project but if you do not want to create the project from scratch you can download the public project, the access code is LEDDemo1 for the Bluetooth (BLE) HM-10 version and LEDDemo2 for the WIFI UDP version.

    Let’s start by enter a name for this project: LED Simple Demo.

    Select the colors you want for the background and menu.

    For the Connection Type I'm going to use WIFI UDP my IP address is going to be 192.168.1.22 and for the port I'm using 8051 (that's what the Arduino examples use).

    Let’s save the project and we will be taken back to the project list screen.

  • Click on the LED Simple Demo in the project list.

  • Here we are at our empty project, to start editing or adding new components click on the menu (red arrow).

  • A popup menu will appear some of the buttons will only be shown depending on Connection Type and if you have the Accelerometer component in your project. Below is a list of the buttons you may see:

    Home brings you back to the main screen.

    Connect or Disconnect only shown for Bluetooth (BLE) to connect or disconnect to your BLE device

    Edit puts the project into edit mode.

    Accelerometer opens the accelerometer settings (if project includes the accelerometer).

    Help will open help for this area.

    IP Address only shown for WIFI UDP, this is the local IP of the device Control CP is running on.

    Now let's click Edit to begin building!

  • The image to the left explains the menu icons.

    Let's click the Add Component icon (Plus Sign).

  • Take a little time and scroll through the available components, when done select the Toggle Switch component.

  • Move and resize the toggle switch to your liking.

  • Now click on the toggle switch to edit the toggle switch properties.

  • Here we see the toggle switch properties.

    Enter Toggle Switch for Name.

    Enter TS1:{0}; for Command String. The Command String must include {0} which is replaced by the Off or On value. The Command string also requires a terminating character (single character) after the {0} here we are using a ;.

    Leave the Off and On values as they are 0 and 1.

    We won't be doing anything with Local Command String in this example.

    Leave Both for Allowed Orientation.

    Click the Knob Color button to set the color, I selected red.

    Click Save.

  • Click the Add Component icon (Plus Sign) and select the LED component from the Component List

    Move and resize the LED to your liking.

    click on the LED to edit the LED properties.

  • Enter LED for Name.

    Enter LED:{0}; for Receive Command String. The Recive Command String must include {0} and a terminating character.

    Leave the Off and On values as they are 0 and 1.

    Leave Both for Allowed Orientation.

    Select the LED Color, I selected red.

    Click Save.

  • Click the Add Component icon (Plus Sign) and select the Dynamic Text component from the Component List

    Move to your liking.

    click on the Dynamic Text to edit the Dynamic Text properties.

  • Enter LED Status for Name.

    Enter LED Status: {0} for Text. The {0} will be replaced with the text we send to this component from the ESP8266.

    Enter TX1:{0}; for Receive Command String. The Receive Command String must include {0} and a terminating character.

    Click the Color button if you would like to change the color.

    Leave Both for Allowed Orientation.

    I selected Arial for Font, Medium for Font Size, Normal for Font Style and Left for Text Orientation.

    Click Save. You may have to reposition the text after saving as the component will size to the new text.

  • Once you are happy with your layout turn your device to landscape and move and resize the components how you would like them to look in landscape. When you go back to portrait you will notice you portrait layout remained the same! Now you can have two different layouts based on device orientation for the same project!

    Now we can click the check mark icon and get out of edit mode.

  • Your project is complete, now we just have to flash the ESP8266.!

  • If you haven't already installed the Control MP library in Arduino, the library and information can be found Here.

    We will be using the LEDSimpleUDP example sketch under the Control MP UDP examples in the Arduino IDE.

    Once you have the example open in Arduino the only thing you have to change is your network information SSID Name and Password (red arrow) if you didn't use the same IP address (192.168.1.22) or port number (8051) as above you will have to change the IP address and port number in the sketch to match what you entered in the project screen.

    Connect your ESP8266 via USB and select the correct board and port under tools in Arduino and flash your ESP8266.

    Once flashed open the LED Simple Demo project in Control MP and flip the switch to on, you should see the built in LED on the ESP8266 light up and the LED component in Control MP should light up as well and the status text should say On!