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:
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.
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.
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.
Use the Evothings Client app (available on Google Play and the Apple App Store) to connect to the Workbench and run apps. You can also connect from a Cordova application or a custom hybrid app. It is possible to connect from the web browser of the device (just enter the connect address shown in the Workbench window in the URL field of the browser).
However, when connecting from 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 Client app or build your own hybrid app with the functionality you require.
To connect from the Evothings Client app, use the "Scan" button to automatically detect the running Workbench application, or enter the connect URL in the address field and press "Connect".
To test the live editing feature of HyperReload, try out the following:
<h1>I am alive!</h1>
To add your own project to the Workbench, do this:
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()); // Replace IP-address with the address displayed in the Workbench! 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).
// Create a web view ("self" is the View Controller). UIWebView* webView = [[UIWebView alloc] initWithFrame: self.view.bounds]; // Example of how to set properties for the web view. webView.autoresizingMask = UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleWidth; webView.scalesPageToFit = NO; webView.scrollView.bounces = NO; self.automaticallyAdjustsScrollViewInsets = NO; // Replace IP-address with the address displayed in the Workbench! NSURL* url = [NSURL URLWithString:@"http://192.168.43.226:4042"]; // Connect to the Workbench. NSURLRequest* request = [NSURLRequest requestWithURL: url cachePolicy: NSURLRequestReloadIgnoringLocalAndRemoteCacheData timeoutInterval: 10]; [webView loadRequest: request]; // Display the web view. [self.view addSubview: webView];
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.
The Cordova Guide contains a step by step description of How to use Evothings Studio with a Cordova application.
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.
See the Source Code section of the main documentation page.