Main Window
Connecting From a Device
Live Editing
Creating Your Own Project
Connecting From Hybrid Apps
Using Cordova/PhoneGap
JavaScript Tools
Source Code
Using the Workbench
The Evothings Workbench is a desktop application for running apps on mobile devices. For an overview of how to get started, see the Quick Start section of the main documentation page.
The Workbench has three windows:
- The main window that displays a list of projects (apps) you can run on mobile devices.
- The JavaScript Tools window, where you can interactively run code on connected devices and view log output.
- The Feedback section, where your input is superimportant for the evolution of Evothings Studio.
To run an app on a connected device, press the "Run" button. This will make the local web server used by the Workbench set its base directory to the folder where the main HTML file of the project is located.
Edit the source code of your apps using your favourite text editor and web development tools. Each time you save a file in the currently running project, it will automatically reload it on connected devices. This also works like a charm when you save images and other resources.

Main Window
The main window displays a list of projects. Drag and drop HTML files here to create new project entries. You can rearrange items by dragging them around, or move them off the list by clicking the [x] symbol. Note that this will not delete any files in the project, it just removes the project entry from the list.
When you click the "Run" button, that project will launch on connected devices. If no device is connected, a local browser window will open on the selected project as a back-up.
Click the "Open" button to display the files in the project. From the file list, you can open files in any editors you have installed on your machine.
Connecting from a Mobile Device
Before you can run an app on a device, you need to connect the device to the Workbench. The Workbench runs a server, that will tell devices to run and reload apps. If you are not connected, nothing will display on the device. You can connect from one or many devices concurrently.
You have two options, to use either the web browser on the device, or use a hybrid app, either the Evothings Client app (available on Google Play), or a custom hybrid app like a Cordova application.
Note that when using a web browser, functionality will be limited to the services provided by the browser. For example, you will not be able to use advanced networking or BlueTooth Low Energy. For most IoT apps, you will need to use the Evothings App or build your own hybrid app with the functionality you require.
To connect from a web browser, simply enter the URL displayed in the bottom panel of the main workbench window.
To connect from the Evothings App, use the "Scan" button to automatically detect the running Workbench application, or enter the URL in the address field and press "Connect".
Live Editing
To test the live editing feature of HyperReload, try out the following:
- Click the "Open" button of one of the demo apps in the Workbench window, for instance the "Hello World" example.
- Open the file "index.html" in a text editor.
- Change something in the HTML code, for example, change the <h1> heading to:
<h1>I am alive!</h1>
- Save the file. The changes you made should be instantly displayed on connected devices.
Creating Your Own Project
To add your own project to the Workbench, do this:
- Open the folder with the HTML file that is the main file of your application (typically "index.html", but any name is fine). The file must be a valid HTML file and it must have extension ".html" or ".htm".
- Drag the file into the Workbench window and drop it there.
- The file is now added as a project that you can run on connected devices.
- You can move project entries using drag-and-drop, and delete them by clicking the delete icon (this will not delete any files in your project folder).
- When clicking "Run" the files in that project the folder is monitored, and the app is reloaded when any file is updated. Currently up to three levels of subdirectories are monitored. This can be configured in the file settings.js.
Connecting From Hybrid Apps
You can use Evothings Workbench with hybrid applications, like Cordova apps. Just use the URL displayed in the bottom panel of the Workbench to connect. For example:
http://192.168.43.226:4042
Here is an example of how to connect from an Android WebView:
WebView mWebView = new WebView(this); mWebView.getSettings().setJavaScriptEnabled(true); setWebViewClient(new WebViewClient()); mWebView.loadUrl("http://192.168.43.226:4042");
Make sure the WebView has JavaScript enabled, and that it has a WebViewClient (otherwise, URLs opened from within the WebView will be opened in an external browser, rather than in the WebView itself).
Using Cordova/PhoneGap
Evothings Studio works great when developing apps with Apache Cordova (or Adobe PhoneGap). You can skip the entire build step and get a fast workflow with quick turn-around times.
Here is a step-by-step guide.
Create your Cordova project
If you don't have a Cordova project already, you first need to create it. Install Cordova and create a new project by following the instructions in the guide How To Build Native Apps. It is a good idea to build and test run the generated project, so you now everything works.
Launch Evothings Workbench
Launch the Workbench application, if it is not already running, so you can find out the connect address for the URL to use with Cordova. The address is displayed at the bottom panel of the main window.
Insert the Evothings Workbench URL
When the Cordova app launches, it loads the main HTML page of the app. When using Evothings Studio, you instead need the app to connect to the Workbench server when it loads. Specify the connect URL in file config.xml in the Cordova project.
Open the file config.xml in a text editor. Change this line:
<content src="index.html" />
to this (assuming the connect address is 192.168.0.102:4042):
<content src="http://192.168.0.102:4042" />
Build and launch the app
Now, build your app using Cordova and launch it on a device or emulator. When the app starts, it should display the Connected page.
Your app is now ready to run projects from the Workbench.
Drag the main HTML file into the Workbench
If you have not done this step, drag the main HTML file of your app into the Workbench main window. This is the file www/index.html in your Cordova project.
Click Run
Click the Run button to launch your app on the connected device. Clicking Run activates your project, and tells the Workbench that this is the project to reload when changes are made.
You only need to click Run once. Any document you edit and save in the current project will automatically reload the app on your device.

JavaScript Tools
Clicking the "Tools" button opens the JavaScript Tools window. This window has two parts; a JavaScript coding space and a log view.
In the coding space, you can evaluate JavaScript code snippets interactively on connected devices. Just select the code you wish to run, and press the "Eval" button. The selected code is sent to connected devices and evaluated. The return value is displayed in the log view in the bottom panel.
To display log messages, use the hyper.log() function. The log message is displayed in the lov view. Exemple:
hyper.log('Hello World')
By using hyper.log() in your code, you can output debug information from connected devices. If you are using console.log() in your existing code base, you can easily create an alias to send the output to the log view. Just include this line first thing in your page:
<script>console.log = hyper.log</script>
The Tools window very is useful for experimenting with code snippets, inspect and modify the state of the running program, and for debugging and debug logging.
Source Code
See the Source Code section of the main documentation page.
Copyright © 2013-2014 Evothings AB