Build-your-first-App-s

Build your first App

With both the Controller installed and the App downloaded for your mobile devices, it is time to begin designing a simple App. As a first step to understanding the workflow of OpenRemote Designer we will be creating a simple app to display “Hello World” on our smartphone or tablet.

Building the “Hello World” App

  1. First you login in the online Designer. In the UI designer window, you click on NewNew Panel, select your mobile device (Android, iPhone, iPad) and enter your project name (e.g. smart home), as the name under panel property on the right hand menu bar. The default name for the screen, which is Starting Screen, you rename to Remote.
  2. Next, from the right hand menu, you drag an abc label element onto the smartphone panel and enter “Hello World” in its text field.
  3. As the last step, you click on the save button in the upper left corner. Your OpenRemote UI Designer screen should now look similar to the one in Figure 1.
hello-world-app Figure 1 First steps with OpenRemote Designer

  1. As the final step open the App, you have downloaded in Step 3. When you start the app on your smartphone or tablet for the first time, it requests the IP-address of our controller hardware.
  2. To find your PC’s IP address under OS X 8 (Mountain Lion), you start the Network Utility by selecting ApplicationsUtilityNetwork Utility. Since OS-X 10.9 (Mavericks) the network utility can be found in the folder /System/Library/CoreServices/Applications/. Open Finder, select GoGo to Folder…, enter /System/Library/Core-Services/Applications/ and select Network Utility. Alternatively you can open the Mac search function Spotlight and search for Network Utility.
  3. Under Windows (XP / 7 / 8 / 10) you open the terminal window and type: ipconfig /all
  4. Once you have the controller IP address you enter it followed by :8688/controller in the configuration screen of our OpenRemote panel app, e.g.: http://192.168.174.23:8688/controller
  5. When you start the OpenRemote app for the first time, it will automatically open the configuration screen. Once the app has loaded, access to the configuration screen is gained by shaking the phone for iOS or long pressing the screen for Android (Figure 2).

Figure 2 The OpenRemote App’s configuration screen for iOS (shake phone for access)

  1. As the final step, you select the panel identity of your online-design (Figure 2), which in your case is smarthome. The app now automatically connects to your local controller and retrieves the application you have designed with OpenRemote Designer. Before you are able to see your “Hello World” OpenRemote design on your smartphone or tablet, you need to synchronize your local controller with your OpenRemote Designer.
  2. In case you see an error message from the client app or the OpenRemote controller such as controller.xml not found or panel.xml not found, don’t panic. These files are only downloaded to controller and client after the first synchronization with OpenRemote Online Designer. This is why, before you are able to see your “Hello World” OpenRemote design on your smartphone or tablet, you need to synchronize your local controller with the OpenRemote Designer.
  3. In order to do that you go to http://localhost:8688/controller and click on Sync with Online Designer. The controller will now connect to your online OpenRemote Designer account and synchronize with your project.
  4. The local copy of your design will be stored  in panel.xml. After a restart of your smartphone app, you see “Hello World” on the screen of your smart home app. You have successfully installed your control platform and can get started with your first project.

Continue building your own project:

Here are some resources which help you to extend your control system:

  • ‘How To Smart Homes’, the Tutorial book by Othmar Kyas, to continue with this first App, integrating several services and devices, designing your user interfaces, adding intelligence, and professionally managing your system.
  • ‘Home Example’, a reference project, to start building your own Home or Serviced Apartment Application, once you familiarized yourself with OpenRemote. It contains UI, predictive scheduling, and tools for the Installer
  • OpenRemote Documentation, to find all available documentation for integrating a wide range of devices and protocols, the UI designer, Macro’s and Rules.
  • OpenRemote Forum, to post questions or find answers on any other topic not covered by the documentation.

Before we forget, we want to thank Othmar Kyas, for creating this ‘Get Started’.

Different Needs, Tailored Solutions

From a straightforward single account setup to your personal fully branded solution, including back-end services, OpenRemote provides you with the perfect solution.

Compare Products

News Feed

New version 2.5 released. Now free for private use, educational purpose, and trials.

Finalist at IoTWorld San Francisco 2015

Last Tweets