Course 10 / Lecture 7:

Build a responsive user interface for various screen sizes

In this lecture the focus is on improving the user interface of your C#.Net robot control app. The Ozeki 10 user interface is accessible remotely from a web browser. Multiple users can log in to control your robot at the same time. They can use smart phones, laptops, desktop computers or large projected displays. In this lecture you will learn how to handle various display sizes in the user interface of your app. You will also learn how to serve independent web browsers using HTTP sessions.

Task #1:

Make colums hidden on mobile phones!

The following video shows you how to make your grid to be responsive. If you use a mobile phone or resize your web browser, the two last columns disappear.

Task #2:

Create control buttons for the barrier!

From the following video you can learn how to control your barrier system using buttons. You can see how to create a horizontal list to place the buttons next to each other. Important: in the video the calling of AppOut method is commented in the openBarrier and the closeBarrier functions. Do not comment it out because the barrier control system will not work.

Task #3:

Create text area for the LCD display!

In the following video you can see how to send a message to the LCD screen of a Brick. You can learn how to create and use an OzGPC_Form.

Task #4:

Add live video to your user interface!

From the following video you can learn how to add a live video as an mjpeg stream to your user interface.

Task #5:

Add a "Snaphost" button to your user interface!

The following video shows you how to add a button to your own page with an OzGPC_Button style. You can also see how to create and subscribe to a new eventhandler, how to send a snapshot message to the selected camera and catch reply from the camera which contains the path of the snapshot.

Task #6:

Save the SnapShots using an Item manager

From the following video you can learn how to save the snapshots using an item manager.