Archive for the ‘All Posts’ Category

Lunifera’s 2015 Xmas tree is online

December 8, 2015

Xmas time is here again … and we at Lunifera continue our tradition of decorating our office with a remote-controlled Xmas tree that serves as a prototype for the IoT-related functionality of OS.bee (Open Standards business engineering environment), a modern model-driven software factory for business applications that is about to launch (stay tuned!).

This year, we added another cool feature to our tree: snow!

20151208_125737

This year’s tree has an amazing snow effect … and yes, some “flakes” end up on the floor.

 

The tree is equipped with an air blower that pushes tiny styrofoam balls up through the hollow trunk. At the top, the balls are pushed out sideways and snow back down for an extra winter effect.

As in the previous years, we use a Vaadin UI for the Xmas tree controller. Clicking buttons sends MQTT messages with the appropriate commands to the Raspberry Pi that performs them in the physical world.

20151208_125804

Part of the circuitry we use to perform Xmas tree commands: A Raspberry Pi receives MQTT messages and controls an IR led for the lights, triggers a relay for the air blower, turns on the angel’s motor and makes an Arduino control the star.

For the video stream, we use another Raspberry Pi running the Motion webcam server. Let’s hope that our bandwidth can take it (and that the suspension of the angel does not jump from it’s guidance)!

Our tree can be found here — Feel free to toy around with it and spread the Xmas spirit 🙂

Advertisements

Using the Vaadin (GWT) SuperDevMode in OSGi Environments

July 7, 2015

GWT and Vaadin come with a great feature to debug the client-side widget code in the Chrome browser. Using GWT’s code server, the Java code will be displayed in the Chrome browser, and you can set your breakpoints and do debugging stuff directly in Chrome.

To run the superDevMode some preparations are required:

  1. Enable SuperDevMode in widgetset
  2. Compile your widgetset by a Maven build
  3. Download all dependencies required to run the codeserver (another Maven build)
  4. Create a launch config to run the code server
  5. Enhance the classpath of the code server launch config
    1. Add all downloaded dependencies to the classpath of the code server launch config
    2. Add local client-side code bundles and their source folders to the classpath
    3. Add the widgetset bundle to the classpath
    4. Ensure that 5.2 and 5.3 are at the beginning of the classpath
  6. Start the code server
  7. Start your OSGi Vaadin Application
  8. Open http://localhost:9876/
    1. Bookmark “Dev Mode on” and “Dev Mode off” in the browser
  9. Open your application in Chrome {URL}/?superdevmode
  10. To reload widgetset in 8) click the “Dev Mode on” bookmark
  11. Ensure that Chrome -> Developer tools -> Properties -> Sources -> xyz Sourcemaps are checked
  12. Open the source tab in Chrome and find your java sources there

1 Enable SuperDevMode

To enable the super dev mode, add the following lines to your widgetset.gwt.xml

<set-configuration-property name="devModeRedirectEnabled"
		value="true" />;

<add-linker name="xsiframe" />

2 Compile widgetset

To compile the widgetset properly, we are using a Maven build.

Create a file called pom-compileWidgetset.xml in your widgetset bundle and configure the pom. Therefore just follow Vaaclipse widgetset as a sample.

Following entries in the pom are mandatory:

  1. Add all your maven dependencies required to compile the widgetset
  2. Configure the vaadin-maven-plugin to compile the widgetset. The compiled widgetset will be copied to ${basedir}/resources.

Run the build with “mvn clean verify -f pom-compileWidgetset.xml”

3 Download all dependencies for the CodeServer

To run the code server properly, a lot of jar files are required. The simplest method to collect all dependencies and their transitive dependencies is to use another Maven build.

Create a file called pom-superdev.xml in your widgetset bundle and configure the pom. For this pom, just follow Vaaclipse widgetset as a sample.

The pom contains all required dependencies and a configuration for the maven-dependency-plugin which copies all jar files to a folder under “${project.build.directory}/superDev-lib”. Attention: The superDev-lib folder will be removed, if you call “mvn clean …” on the widgetset bundle. So it might be a good idea to create a folder called superDev-lib directly in the widgetset bundles root and copy the jars from${project.build.directory}/superDev-lib” to this folder manually.

Run the build with “mvn clean verify -f pom-superdev.xml”

4 Create a superDev launch config

The superDev launch config is a simple java launch config.

Settings:

  • Main class: com.google.gwt.dev.codeserver.CodeServer
  • Program arguments: “-logLevel DEBUG org.semanticsoft.vaaclipse.widgetset.DefaultWidgetset”
  • VM arguments: “-Xss8M -Xmx512M -XX:MaxPermSize=512M”

5 Enhance the classpath of the superDev launch config

The jar files downloaded under 3) need to be added to the classpath of the launchconfig.

  • Open the launch config, switch to tab “Classpath”
  • Press “Add JARs”
  • Then add all jar files located in /superDev-lib to the classpath.
  • Then add any “local client-side bundles” contained in the workspace
  • Add the source folder of the “local client-side bundles” too
  • Add the “widgetset bundle”
  • Add the source folder of the “widgetset bundle”
  • Ensure that the “local client-side bundles”, the “widgetset bundle” and their source folders are at the beginning of the classpath.

Follow the launch configs contained in Vaaclipse widgetset as a sample.

superdev-launchconfig

6 Run the superDev launch config

Running the superDev launch config means that the widgetset is compiled.

If the code server could start properly, you will find following lines in the console:

The code server is ready.
Next, visit: http://localhost:9876/

7 Start the application launch config

Now you need to start you application using a launch config. No special configs are required there.

8 Open http://localhost:9876/

superDevURL

Just follow the instructions on the website and bookmark the two links.

9 Open application in superDevMode

To do this, open {URL}/?superdevmode in your Chrome browser.

The browser will tell you that the widgetset is being recompiled. Afterwards, the application opens.

10 and 11

No steps to describe here …

12 Open source code in Chrome browser

Open the developer tools in Chrome. Under the source tab you should find all your client-side Java code.

sourceCodeInChrome

You may set breakpoints to the code and do all the debugging stuff — right in your browser!

OSGi and Vaadin – Using ClassResource

June 18, 2015

Using Vaadin’s ClassResource in OSGi environments is pretty straightforward. But you have to know a few basics about the OSGi class loader:

In OSGi, every bundle has its own classloader. And all resources contained in a certain bundle are loaded by this bundle’s classloader only.


Sample

For instance, we try to load an image based on Vaadin’s ClassResource.

new Image("Bundle2 exported", 
        new ClassResource(org.my.SampleExported.class, 
        "ImageExported.png"))

The ClassResource internally will call

org.my.SampleExported.class.getResourceAsStream(
        "ImageExported.png")

 whenever ClassResource#getStream() is called.


The OSGi classloader takes over

After this, the OSGi classloader comes into play. It uses a defined strategy to look for the resource:

  1. If the package starts with “java”, then the request is forwarded to the parent classloader
  2. If the package is in the list of “boot delegation”, the the request is forwarded to the parent classloader
  3. The request is forwarded to “class loading hooks”
  4. The classloader checks whether there is a “import package” for “org.my”.
    1. If so, then the resource is loaded from this imported package (meaning that the request is forwarded to a different bundle classloader). If a package could be found, the lookup will terminate.
    2. If not, proceed with 5.
  5. The classloader checks all “required bundles” whether the resource can be found there.
  6. The classloader checks the “local” resources contained in the classloaders bundle.
  7. The classloader checks the “fragments classpath” resources contained in the fragments.
  8. The classloader checks for “dynamic imports”.

How not to: Something that will never work

Assume we have two bundles.

Bundle A – contains the Vaadin-Servlet, the resource handler and all that stuff required to run Vaadin in OSGi.

Bundle B – just another bundle. “Bundle A” does not have a dependency to “Bundle B”.

Bundle B contains an image and it should be loaded by a ClassResource. If you prepare a ClassResource for the image contained in “Bundle B”, but you do not pass a class contained in “Bundle B” to the ClassResource, OSGi is not able to load the image.

new Image("", 
        new ClassResource("ImageInBundleB.png"))

The reason is that ClassResource internally will use the classloader of the UI class. And this one does not have a dependency to “Bundle B”. And so the resource can not be loaded because it is not visible to the classloader.


Using a BundleResource

I prepared a BundleResource prototype. It is licensed under the Apache License and is available at the Lunifera github repo.

new Image("", 
        new BundleResource(theBundle, 
        "resources/ImageInBundleB.png"))

The path to the resource is the path relative to the bundle. In this sample, the “ImageInBundleB.png” is located in a folder called “resources”.

Feel free to use the BundleResource for your own projects.


Debugging

If a resource could not be found by the “ClassResource”, one just has to debug the OSGi classloader. If you are using Equinox, take a look at

org.eclipse.osgi.internal.loader.BundleLoader. It is responsible to load the resource.

IoT: Industry 1.0 meets Business 4.0 — with Eclipse Paho

May 7, 2015

On the 9th of April (the “Global IoT Day”), we (Lunifera GmbH) co-organized a free IoT event in Vienna. With over 400 attendees, the Global IoT Day Event was a huge success — one of the biggest IoT events worldwide!

But we not only took part in the organization and hosting of this awesome event: Of course, we just had to do a small demo project and present it — the Lunifera steam engine.

“Industry 4.0” is one of the hottest topics at the moment: The computerization of production processes and the use of connected intelligent devices in production seems to be the future of industrial production. Industry 4.0 will change the way we produce (and use and scrap and recycle) things profoundly. With this “fourth industrial revolution” gaining speed, we at Lunifera GmbH have been toying around with various ideas and concepts of integration between physical world, production and business processes and user interface for some time.

Our newest proof-of-concept project in this area is our steam engine (looking back to “Industry 1.0” that brought the use of steam engines): We bought a working toy steam engine, hooked up sensors to it and set up circuitry (using, among others, an Arduino Uno and a Raspberry Pi) that converts the sensor output to binary data. Then we use the Python incarnation of Eclipse Paho in order to transfer the measurement data across any networks so it can be used pretty much anywhere.
steamengine

Our steam engine: Heating the water in the boiler causes the pressure to rise (pressure sensor: top right). The steam is used to turn the wheel in the back (cyan rotation sensor above wheel). The temperature is measured by a PT1000 sensor (left side of boiler).

oszi

The sensors turn the values of physical properties into voltage levels. We read these voltage levels and convert them into binary data.

Our next step was to transmit the pressure, temperature and RPM values that we measured from the physical engine to any listeners. According to our experience in the IoT area, the most flexible, reliable and easy-to-use solution for this is MQTT. Thus, we set up an MQTT broker and two MQTT clients (one client on the Raspberry Pi that gathers and interprets the measurement data, one on the machine with the business application). Using Eclipse Paho (the Python version on the Raspberry, the Java version on the PC), it took us about three minutes to set up the desired communication.

mqtt

The push-based communication in our demo project: Sensors S1 to S3 collect data, the Raspberry Pi interprets the values and transmits them to the MQTT broker. Whenever a new value arrives at the broker, it is forwarded to the other client that has registered before.

For our demo purposes, we integrated the measurement data into a simple web-based business application: We displayed the data right inside a business app by using Vaadin UI elements (various charts). In the future, it would be quite easy to integrate the values into additional complex representations such as augmented reality and so on.

steamengine_ui

In our simple example, the measurement values are displayed in a web-based demo application. Integration into standard business applications and web pages would be straightforward.

Vaadin & OSGi: managing the classloader

April 30, 2015

If you are using Vaadin with OSGi, you need to be aware of an issue related to http://dev.vaadin.com/ticket/15516:

Vaadin changed the classloader that is used to load the UI-class. Before this change, the UI-class was loaded by the classloader of the servlet class. Now the “context class loader” is used to load it.

So if you define your UI-class in the VaadinServlet by annotation, you will get a ClassNotFoundException.

It is pretty easy to fix that issue. The solution is to define the proper classloader in ServletService. Afterwards the UI-class can be loaded properly again.

@SuppressWarnings("serial")
@VaadinServletConfiguration(ui = ECViewSampleUI.class, productionMode = false)
public class SimpleVaadinServlet extends VaadinServlet {
	@Override
	protected VaadinServletService createServletService(
			DeploymentConfiguration deploymentConfiguration)
			throws ServiceException {
		// see http://dev.vaadin.com/ticket/15516
		ServletService service = new ServletService(this,
				deploymentConfiguration);
		service.init();
		return service;
	}
}

This snippet shows an implementation of VaadinServlet.

It is used to

  1. define the UI-class by annotation
  2. create a custom VaadinServletService to define the proper classloader.

 

public class ServletService extends VaadinServletService {

	public ServletService(VaadinServlet servlet,
			DeploymentConfiguration deploymentConfiguration)
			throws ServiceException {
		super(servlet, deploymentConfiguration);
	}

	@Override
	public ClassLoader getClassLoader() {
		// return the bundle classloader
		// see http://dev.vaadin.com/ticket/15516
		return ServletService.class.getClassLoader();
	}

The highlighted lines in the ServletService ensure that a proper class loader – the classloader of the custom ServletService – is used to load the UI-class.

Things should work properly afterwards …

 

Best,
Florian Pirchner

Eclipse-Databinding for Vaadin

April 10, 2015

A while ago we (Lunifera GmbH) have implemented Eclipse-Databinding for Vaadin. Two different databinding approaches that perfectly work together.

In this blog i’d like to talk about the two different ways of databinding and how these worlds can be tided together.

Vaadin comes with an integrated databinding capability. Databinding in Vaadin means, that UI elements (components) are bound to so called containers, items and properties. So the data of components can be abstracted from the component itself. But Vaadin defines no common way to bind these containers, items and properties to each other.

There the eclipse databinding comes into play. Eclipse databinding provides a common way to bind so called “observable values” to each other. An “observale value” is an abstraction above the “data related to its source”. Eclipse databinding comes with an implementation for POJOs, Beans (POJOs with PropertyChangeSupport), SWT-Widgets, JFace-Components, EObjects (Eclipse Modeling Framework – EMF) and the EMF-Edit-Commands. These implementations allow you to bind “observable values” from different domains (one of mentioned implementations) to each other.

In combination Vaadin databinding and Eclipse databinding are working properly together.

Vaadin Databinding

Vaadin databinding consists of 3 concepts for different use cases:

  • Property – An abstraction for a type and value. Used to bind fields like TextField to the property
  • Item – A collection of properties. It represents a row in a table. Each property inside the item has a unique propertyID
  • Container – A collection of items. It represents a data-table. Each item inside the container has a unique itemID

Property, Item and Container are expressed by interface. And Vaadin comes with a lot of proper implementations for different usecases.

datamodel-sml

Image: “Book of Vaadin 8.1” – Copyright 2015 Vaadin Ltd [1].

Property

// Create a property
ObjectProperty property =
    new ObjectProperty("Florian", String.class);
        
// Create a text field
TextField nameField = new TextField("Firstname");
        
// Bind nameField to data
nameField.setPropertyDataSource(property);

See also: “Book of Vaadin 8.2.1”

As soon as the property is set to the field, you may use the property to read and write values.

Item

Dealing with items is really similar to properties.

PropertysetItem item = new PropertysetItem();
item.addItemProperty("firstName", new ObjectProperty("Florian"));
item.addItemProperty("age", new ObjectProperty(36));
        
// create a form
Form form = new Form();
form.setItemDataSource(item);

See also: “Book of Vaadin 8.3.1”

In this case an item is prepared and set to a form. Forms are special components that show defined properties of the given item.

There are different ways to define items. The example above uses a PropertysetItem which allows you to define all properties manually. But there are also more comfortable way for pojos.

// Create an instance of the bean
Person bean = new Person();
        
// Create a bean item configured for type Person.class
BeanItem<Person> item = new BeanItem<Person>(bean);

// Set the item to the form
Form form = new Form();
form.setItemDataSource(item);

Sample: “Book of Vaadin 8.3.2”
To automatically create an item for a bean, that holds each bean-property, you just may use the BeanItem.

Container

// set a personContainer to the table
Table table = new Table("Persons");
table.setContainerDataSource(personContainer);

See also: “Book of Vaadin 8.5”

For containers there is also a generic way to define the container properties (the columns of the container). And also a lot of very useful implementations like the BeanContainer or BeanItemContainer. Based on the JPAContainer you can connect your Vaadin components to JPA really quickly.

For details about BeanItemContainer see: “Book of Vaadin 8.5.4”

Eclipse Databinding

The Eclipse databinding follows a more general way and tries to abstract bindings in general.

Unbenannte Zeichnung (1)If you would like to use Eclipse databinding, you have to deal with some concepts.

  • ObservableValue (ObservableList) – it is defined by an interface and is an abstraction above a data-endpoint.
  • UpdateValueStrategy – defines how source-to-target and target-to-source updates will be processed.
  • Binding – binds the observable values (or lists) to each other. BindingStrategy can be used.
  • DatabindingContext – It is a common state for all contained bindings.
  • Realm – It is responsible to synchronize updates with the environment

Observable Values

Similar to the Vaadin databinding, an obervable value defines the type and value the instance deals with. The observable value knows how to access the underlying “target-element”. This “target-element” may be anything, as far there is an implementation for it. For now the”target-element” may be a pojo, a bean, an EObject, a SWT-widget,… The observable value will register all required listeners at the “target-element” to get notified about changes. If the value of the “target-element” is changed, then the “obervable value” will notify the Binding, which updates the value at the opposite side of the Binding.

UpdateValueStrategy

The UpdateValueStrategy may be used to define how values are updated.They can be defined for “source-to-target” and “target-to-source” updates. The UpdateValueStrategy is also responsible for data conversion.

It comes with 3 policies:

  • POLICY_NEVER – Values in the “observable value” will never be transferred to the opposite end of the binding.
  • POLICY_ON_REQUEST –  Values in the “observable value” will only be transferred to the opposite end, if requested by a method call.
  • POLICY_UPDATE – If the “observable value” becomes notified about changes in the “target-element”, then the value will be automatically transferred to the opposite of the binding.

ValueBinding

The ValueBinding connects the Source-ObservableValue to the Target-ObservableValue according the UpdateValueStrategy-Policy. It also offers methods to validate and update model-to-target or target-to-model (Model is a synonym for Source) operations.

DatabindingContext

The databinding context manages all bindings. Also List- and Set-Bindings. The granularity about the instances of DatabindingContexts depends on the underlying application. In general i would say, that all bindings that should be validated in a common context, should be added to the sames context. If you have different views as part of your system, each view may get its own context. But it depends on you.

Lifecycle

When you are using Eclipse databinding, you need to be aware about its lifecycle. If a view is closed, a timeout occurs,… you must ensure, that the databinding context is #disposed(). There is a method for it. Otherwise the Vaadin components will receive value updates, even if the UI is already closed.

Realm

For instance if you are doing a long running operation as an async operation in a different thread and you expect that the async operation updates your UI properly, you need a way to sync your UI with this thread. In SWT you have to update the UI in the SWT-Ui-Thread. In Vaadin you need to call UI#access(…).

The realm is specific for each databinding implementation. The source- and the target-observable-values may have their own Realm. So it would be possible to bind a SWT-UI to a Vaadin-UI. I never tried to do so, but i am pretty sure, that it will work properly.

Eclipse-Databinding for Vaadin

We have prepared an eclipse databinding implementation for Vaadin. You can find it in this github-repo. There is also a P2-Updatesite located here: Lunifera-P2-Repo.

Realm-Activation

Before you create the DatabindingContext, you need to activate the Realm for VaadinDatabinding.

// Activate the realm
VaadinObservables.activateRealm(this);

// Create databinding context
DataBindingContext dbc = new DataBindingContext();

Even if you would like to add new Bindings in a different Thread, you need to activate the realm. Otherwise databinding does not know anything about the current UI-instance.

In real projects you won’t have to call the activation on certain places again and again. So there is a perfect place to do so.

You have to override the VaadinServletService and add following method:

public UI findUI(VaadinRequest request) {
	UI instance = super.findUI(request);

	// activate the realm for the current ui and thread
	VaadinObservables.activateRealm(instance);

	return instance;
}

Then every time, Vaadin is looking for the current UI-instance, the realm will be activated automatically.

 

 

Examples

Now lets start with some examples demonstrating how to use the eclipse databinding for Vaadin.

1 Binding components –> #value

// Activate the realm
VaadinObservables.activateRealm(this);

// Create databinding context
DataBindingContext dbc = new DataBindingContext();
	
// Create the Vaadin components
TextField sourceField = new TextField();
sourceField.setImmediate(true);
Label targetField = new Label();
	
// Create the observable values
IObservableValue sourceOV = VaadinObservables.observeValue(sourceField);
IObservableValue targetOV = VaadinObservables.observeValue(targetField);

// bind the values to each other
dbc.bindValue(sourceOV, targetOV);

This sample binds the value of the textField to the value of the label. If the value of the textField changes, the label is updated.

2 Binding components –> #enabledState

// Activate the realm
VaadinObservables.activateRealm(this);

// Create databinding context
DataBindingContext dbc = new DataBindingContext();

// Create the Vaadin components
CheckBox checkbox = new CheckBox();
checkbox.setImmediate(true);
TextField textField = new TextField();
		
// Create the observable values
IObservableValue sourceOV = VaadinObservables.observeValue(checkbox);
// observe the enabled state of the textfield
IObservableValue targetOV = VaadinObservables.observeEnabled(textField);

// bind the values to each other
dbc.bindValue(sourceOV, targetOV);

This sample binds the value of the checkBox to the enabled property of the textfield. If the checkbox is checked, then the textField is enabled. Otherwise it is disabled.

3 Bind components to beans

// Activate the realm
VaadinObservables.activateRealm(this);

// Create databinding context
DataBindingContext dbc = new DataBindingContext();

Person person = new Person();

// Create the text field
TextField textField = new TextField();
textField.setImmediate(true);

// Create the observable values
IObservableValue sourceOV = BeansObservables.observeValue(person, "firstname");
IObservableValue targetOV = VaadinObservables.observeValue(textField);

// bind the values to each other
dbc.bindValue(sourceOV, targetOV);

This sample binds the “firstname”-property of the given bean to the value of the text. If the value of the textField or the value of the bean changes, then the change is updated at the opposite site.

4 Reuse the Vaadin property

// Activate the realm
VaadinObservables.activateRealm(this);

// Create databinding context
DataBindingContext dbc = new DataBindingContext();

Person person = new Person();

// Create the text field
TextField textField = new TextField();
textField.setImmediate(true);
textField.setPropertyDatasource(new ObjectDatasource());

// Create the observable values
IObservableValue sourceOV = BeansObservables.observeValue(person, "firstname");
textField.setPropertyDataSource(new ObjectProperty<String>("", String.class));

// bind the values to each other
dbc.bindValue(sourceOV, targetOV);

In this sample, an ObjectProperty was set to the textField. The Vaadin databinding implementation internally tries to get the property datasource before binding. If it is available, then the property will be bound. Otherwise the field itself is bound. So it is your choice whether you want to work with properties or not.

5 Bind the multiselection of table-1 to the input of table-2

// Activate the realm
VaadinObservables.activateRealm(this);

// Create databinding context
DataBindingContext dbc = new DataBindingContext();

// Create the Vaadin components
Table table1 = new Table();
table1.setMultiSelect(true);
table1.setImmediate(true);
Table table2 = new Table();

// observe the multi selection
IObservableList table1OV = VaadinObservables.observeMultiSelectionAsList(table1, Person.class);
// observe the content
IObservableList table2OV = VaadinObservables.observeContainerItemSetContents(table2, Person.class);
	
// bind the values to each other
dbc.bindList(table1OV, table2OV);

This sample binds the multi-selection of table1 to the input of table2. So table2 shows the selected items of table1. Note, that this kind of binding uses ObservableLists.

 

6 Bind a table to a WritableList

// Activate the realm
VaadinObservables.activateRealm(this);

// Create databinding context
DataBindingContext dbc = new DataBindingContext();

// create a table
Table table = new Table("Persons");
layout.addComponent(table);
table.setContainerDataSource(new BeanItemContainer<Person>(
			Person.class));
		
// create a writable list as model
final WritableList model = new WritableList();
		
// observe the table container content
IObservableList tableOV = VaadinObservables
		.observeContainerItemSetContents(table, Person.class);

// bind the lists to each other
dbc.bindList(model, tableOV);

// create a button to add records
Button button = new Button("Add person");
layout.addComponent(button);
button.addClickListener(new Button.ClickListener() {
	@Override
	public void buttonClick(ClickEvent event) {
		Person person = new Person();
		person.setName("My first name");
		person.setName2("Another name");
		person.setAge(43);
		person.setBirthday(new Date());
		model.add(person);
	}
});

This sample binds a WriteableList as a model to the container contents. If a Person is added to the model, the table will update it’s contents.
The Button is used to add new records to the model.

7 Bind a table to a nested list in a bean or pojo

// Activate the realm
VaadinObservables.activateRealm(this);

final DataBindingContext dbc = new DataBindingContext();

// create a table
Table table = new Table("Persons");
layout.addComponent(table);
table.setContainerDataSource(new BeanItemContainer<Person>(Person.class));

// create the model
final Person father = createPerson("Father", 43);
father.addToChildren(createPerson("Child 1", 17));
father.addToChildren(createPerson("Child 2", 19));

// observe the table container content
IObservableList tableOV = VaadinObservables
		.observeContainerItemSetContents(table, Person.class);
// observe the nested children list
IObservableList childrenOV = BeansObservables.observeList(father,
		"children", Person.class);

// bind the lists to each other
dbc.bindList(tableOV, childrenOV);

// create a button to add records
Button button = new Button("Add person");
layout.addComponent(button);
button.addClickListener(new Button.ClickListener() {
	@Override
	public void buttonClick(Button.ClickEvent event) {
		Person person = new Person();
		person.setName("Child 3");
		person.setAge(23);
		father.addToChildren(person);
		// Update the targets
		dbc.updateTargets();
	}
});

This sample binds a nested children list located in Person.class as a model to the container contents. The Button is used to add new records to the model.

Attention: If a person is added to the children list of the bean, the table is not updated automatically. This happens since the PropertyChangeSupport does not really support notifications for changed collections. So you need to call dbc.updateTargets() or binding.updateModelToTarget().
If you are using the Eclipse Modeling Framework, then also changes in Sets and Lists are automatically transferred to the table, since EMF can deal with notifications for collection changes.

Attention2: If the person bean does not provide PropertyChangeSupport, then you need to use PojoObservables#observeList to create the model observable.

 Conclusion

With “Eclipse Databinding for Vaadin” can bind Vaadin components to other components, beans, pojos,… very quickly. The databinding implementation ensures, that values are treated properly. Using “Eclipse Databinding for Vaadin” developers can save a lot of lines of code.

See also

The examples in these additional sources may also be used for the “Eclipse databinding for Vaadin”. The core concepts are always the same.

[1]  Copyright 2015 Vaadin Ltd, licensed under a Creative Commons CC-BY-ND License version 2.0

Lunifera MQTT Xmas-Tree is online

December 1, 2014

With December just begun, we are happy to announce that the 2014 incarnation of our MQTT Xmas Tree is now online. Feel free to try it out here: The tree is standing in our office, and everybody can change the lights on it, move the Xmas star and have a tiny angel fly around 😉

How did we do it? Well, it consists of three main parts – not counting the tree itself 😉

  • a RaspberryPi that controls the LED band on the tree and the movement of the star and the Xmas angel. On this RaspberryPi, we have the Mihini framework running an MQTT client. The MQTT client ties together hardware (GPIO pins) and software (MQTT messages). In order to retrieve MQTT messages, the client uses the Lua implementation of Eclipse Paho. Messages containing valid Xmas Tree commands are then translated to the appropriate GPIO actions (controlling the LED band via an IR diode, powering the motor for the Xmas angel via a transistor and triggering an Arduino Uno that generates a PPM signal for the servo motor that moves the star).
  • a second RaspberryPi that has a webcam attached and serves a video stream via motion and apache2 (we followed this great tutorial approximately to get this running). With DDNS, this stream can be reached from the outside world.
  • a Vaadin Web UI featuring buttons that send MQTT messages with commands for our tree to our MQTT broker (to be picked up by the first RaspberryPi) and displaying the video stream so users can watch the effects of their actions.

Getting this contraption to work was great fun — a great way to spend one’s spare time. A nice team-building activity. And a perfect counterweight to tedious debugging sessions ;-)

Of course, we are going to open source the tree command software on Github. By the way here is an overview picture of the hardware we used for controlling the tree:

Christmastree-blog

 

Happy treeing and have a joyous holiday season!

The Lunifera Crew from Vienna

http://www.lunifera.com

Sharky at EclipseCon Europe

November 2, 2013

Klemens and I have been at the EclipseCon Europe in Ludwigsburg and got the chance to demo sharky there. When we came there and saw the big room our talk was assigned to, i became speechless. It wasn’t a room, but rather a hall. Really impressive. Never talked on such a big stage.

The talk was really nice; in fact it was the funniest talk i have ever had. You already know that sharky is a big wild one with his own mind. So this nasty fish refused to follow some of our commands. For instance sharky decided to fly higher and higher without any interest to get back down to us. (Well, it was not sharky’s fault. A loose cable blocked the diving mode). So i sent out Klemens to catch sharky again 😀 But how to catch a sharky that is flying in a height of 10 meters? Well, i still don’t know, but ask Klemens because he managed.

At the end, we could demo all things we had planned to do. And it seemed that the attendees really loved sharky and his little accidental misbehaviour.

For me it was one of the talks i will never forget. Was sooo much fun and a lot things happened to laugh about. Two people made a movie about the talk and i am looking forward to their release…

Here you can see a little movie by Benjamin Cabe. Jonas Helmig was volunteer to rc sharky by a 3D-sensor.

And an image during prepartion of sharky before the talk by my friend @ekkescorner:

Ece2013_SharkyPrepare

Thanks a lot to Jelena from foundation. She helped a lot preparing things…

Sharky – Jnect on BeagleBone with Eclipse Paho

October 14, 2013

During weekend Klemens and me worked hard on a Jnect-M2M integration.

If you follow the image from “Sharky – his evolution progress“, you can see that OpenNI and NiTE are running on an Ubuntu hardware and not on a beagle bone black. The problem was, that NiTE does not support ARM processors for now.

Ubuntu running OpenNI and NiTE

So we got the idea to track the coordinates of parts of the human body (joints) on the Ubuntu hardware using OpenNI and to send the coordinates to an external M2M-Server running on a beagle bone.

The informations sent by OpenNI java wrapper to the M2M-Server (topic=skeleton) look like:

skeleton {
   joint = Left-Hand
   x = 123.45
   y = 211.77
   z = 86.78
}

Jnect with M2M Client

We used the Jnect project and added M2M support to it. So Jnect no longer depends on the Microsoft Kinect Library, but also may use a M2M-Connector to get skeleton information from the M2M-Server.

Jnect will subscribe to the topic=skeleton from the M2M-Server and gets the coordinates of the tracked joints by OpenNI. Implementing some glue code it was simple to build the EMF-body-model defined by Jnect. Since Jnect also provides API to register GestureDetectors, we could use the provided API to add a LeftHandUpGestureDetector.

Finally we installed the Jnect bundles on an Equinox OSGi runtime running on a beagle bone black.

What happens in detail

The ASUS 3D-sensor is connected to the Ubuntu hardware. Running an implemented Java-Wrapper, the sensor will send pictures to OpenNI and OpenNI will pass skeleton informations to the Java-Wrapper. We put the given coordinates to a datastructure and pass them to the M2M server using Eclipse Paho.

The M2M server receives the messages and passes it to the Jnect M2M client running on the beagle bone black.

Jnect will parse that information and adjusts the EMF-body model. Changes to the body model will invoke the LeftHandUpGestureDetector. If the gesture is matched by the changes of the coordinates sent from OpenNI, then a systemOut is sent to the console.

See details here

Sharky – his evolution progress

October 12, 2013

We could already demo, that sharky may become controlled by a Vaadin web UI properly. Now we are going to help sharky in its natural evolution.

The main idea

We would like to use a natural interface to remote control two sharkies at the same time. A 3D-sensor should observe the left and the right hand movements. Gestures by the left hand should remote control sharky-1 and gestures by the right hand should control sharky-2.

The technical solution should look like the image below.

SharkyEvolutes

The sensor

So we bought Xbox Kinect. The problem was, that Kinect SDK only supports windows and OpenNI dropped linux support for license reasons. Again we explored the web and found Asus Xtion Pro Live. A 3D-sensor developed for developers and native OpenNI support. The sensor will capture 3D-images and sends them to OpenNI. NiTE – as an openNI plugin – provides java API for skeleton and hand tracking. Our first idea was to install OpenNI and NiTE on a beagle bone. But NiTE does not support ARM processors for now. So we adjusted our architecture again and have been installing OpenNI and NiTE on a X86 Ubuntu. Writing some java glue code allows us to track the positions of a hand in 3-dimensions. Since we are addicted to M2M-technologies we do not further process that information on the Ubuntu device, but send them using Eclipse Paho to a M2M-Server using the MQTT protocoll.

M2M-Server

The M2M-Server (a Mosquitto server) is running on a Beagle Bone Black. And it aims as a publish/subscribe server. Clients can subscribe to topics and will get messages sent to the topic. The Ubuntu device sends all messages to the “handinfo” topic at the M2M-server.

Jnect Bodymodel

A very nice project called Jnect provided by Jonas Helmig and Maximilian Kögel (Eclipsesource Munich) implements a body model based on EMF. It also supports gesture recognition. Your own gesture handler may be registered using extension points. So the idea is, that eclipse equinox is becoming installed on an additional beagle bone. Using Paho the beagle bone connects to the M2M-Server at the topic “handinfo”. So all changes of the human hands in any of the 3-dimensions is sent to this beagle bone. Implementing some glue code, the body model based on EMF is prepared.

At a next step, we have to add GestureHandlers. These are being notified about changes in the body model and have to calculate whether a gesture was detected. For instance “left hand up”, “right hand down”, “hands clapped”,… The gestures will be sent to the M2M-Server at the topic “gestures”.

Sharky controller

These gestures are the base information for the Sharky controller. The sharky controller is also installed on a beagle bone black and is based on Mihini. Using Lua it connects to the M2M-Server and subscribes the topic “gestures”.

So if the human raises its right hand, the SharkyController gets the information “right hand up”. Sharky controller will use that information to calculate the required GPIO outputs. The GPIOs are connected to the remote controller and sharky follows the commands introduced by hand movements.

Planned commands – left hand controlls sharky-1 and right hand controlls sharky-2

  • hand left -> “sharky turn left”
  • hand right -> “shary turn right”
  • hand up -> “sharky raise”
  • hand down -> “sharky dive”
  • hand towards the sensor -> “sharky get faster”
  • hand away from sensor -> “sharky get slower”

So we have a lot of work to do, to implement things properly. Lets see what happens…