This short tutorial will illustrate the capabilities of Olympe:
- How to build apps combining data, logic and UI in record time
- How to share real-time data across apps
It should take around 10-15 minutes to complete. You will build two apps, one for your computer and one for your phone, to allow your phone to control the display of your computer. Similar mechanisms can be used to create a game and use your phone as a pad, or to have 2-way interactions from your computer to your phone as well 😀.
Its aim is to allow you to build an app quickly, without spending much time on the underlying concepts. Those can be seen in more details in the reference guide.
It consists in 4 steps:
- Build the app that will run on your computer
- Build the data model to share data
- Plug the app on the data
- Build the controller app for your phone
Open DRAW and drag-and-drop a Project from the right sidebar (aka the marketplace). Name the project "My first project"
Open the project, and create a new application by drag-and-dropping a UI App from the marketplace. Name the application "Color Display".
Open the UI App. You now see the screenflow editor, which allows defining the navigation between the different screens. A Home screen is already available, and we only need one screen for this first example. Let's edit it by double-clicking on it.
We are now in the Visual Editor, which allows laying out components such as buttons, labels, forms, maps, etc. For our simple app we will place only two things: a colored rectangle and a quote.
Drag and drop a rectangle on the home screen.
On the bottom left you see the Property Editor, which allows configuring the properties of the rectangle.
In the first tab:
- Change its name to "Colored zone".
In the second tab:
- Set X to "Left" using the drop down arrow.
- Set Y to "Top"
- Set Width to 80% using the drop down arrow.
- Set Height to 100%
Finally, change the color of the rectangle by setting a background color in the third tab.
In the first tab:
- Change its name to "Quote"
- Set its Theme Class to "h1"
In the second tab:
- Set X to "Center" using the drop down arrow.
- Set Y to "Middle"
Let's make it look a bit nicer, in the third tab:
- Set a Background Color (for example the predefined yellow)
- Set Border Width to 1, and its color to black
And finally, put the quote using the fourth tab:
- Set the label's Text to '"Colors speak all languages"Joseph Addison' on multiple lines
- Scroll down and set the Horizontal alignment to Center
Voilà, the first step is completed! This is what you should end up with:
Now that the display is built, let's make it a bit more dynamic. The color of the rectangle will no longer be set as an absolute value in DRAW, but it will be controlled by another app running on your phone. The goal will be to change the color on your browser by moving your finger on your phone.
This is done by sharing data between your phone and your browser, using your finger will act as a pointing device. We will therefore call this shared data a Pointer. Our first pointer will simply store the coordinates of your finger as x and y.
Go back to your project (e.g. using the breadcrumb at the top of the window). Drag and drop a Data Model into your project, and name it "Pointer Data Model".
Open it, and from there you can create a new Business Model. A business model is like a class in an object oriented programming language, or like a table in a SQL database.
- Create the business model by drag and dropping a Business Model from the marketplace on the right of the window.
- Rename it to Pointer.
- Add two Number properties by drag and dropping two Number bricks from the marketplace onto the Properties section of the Pointer. Name those properties
Now that we have created a data model, we need some getter and setter functions to interact with it. Let's create two bricks:
Get Pointer's position and
Set Pointer's position, by using the Generate helper bricks... menu on the Pointer business model.
Let's now create an actual pointer. This is done by creating a new Data Set in your project, and creating a new entry. This is like creating a new instance of our Pointer class, or like adding a new row in our Pointer table. You can initialize the values of x and y to something between 0 and 250.
We now need just a way to retrieve the pointer. One way to do it is by creating a new
Get Pointer brick. This is done by adding a new Function to your project.
Opening the function opens the logic editor, where you'll be able to define the behaviour of the function by plugging bricks together. The first thing to do is to define the output or our function: we want to retrieve our pointer. Let's therefore create one output of type Pointer.
Then in order to get that value, in our simple case we will simply get the list of all pointers, and then get the first element in that list. Drag and drop the
Get Object List brick from the marketplace on the right, and set
model to Pointer. Then add a
Get First Object in List brick and connect the two. Finally, connect the output of
Get First Object in List to the output of the function.
Well done, we now have an app, and a pointer that stores a position! We will now use that position to determine the color of our rectangle: rather than setting its background color as an absolute value, we will now compute it based on the values stored in our pointer.
Open the Color Display app, and open the Home screen. Select the Colored zone rectangle. In the third tab, click on the f(x) icon next to the background color. This opens the logic editor, where you'll be able to compute the value of the color. Drag and drop the bricks you need from the marketplace on the right, and connect the dots to build the following schema:
To see whether it works, you can open another browser window. In the first, open the screenflow editor of the Color Display app, and in the other, open the pointer in the New Data Set. Change the values to change the color of the rectangle in real time!
We now have just one step to go: if we change the pointer's position in the data set, the color changes. Let's now build an app that will update the position using our phone and our finger.
In the project view, create another UI App called Controller. This app is very simple, with just one big button. Open the app's screen, and add a new button.
- Set its Theme Class to outline
- Set X and Y to Center and Middle
- Set Width and Height to 95%
Our button will capture the touch events when we move our finger. On the fourth tab of the property editor we can all possible interactions with our button. The one we are interested in here is On Touch Move. Click on the f(x) icon to add some logic.
If DRAW is deployed on a server (i.e. the URL of DRAW in your browser is like
https://some_domain_name.com/), you can simply load the app on your phone by using the Share menu entry on the Controller app, and by scanning the QR Code using your phone's camera (some Android phones may require a dedicated QR scanning app).
If you have deployed DRAW locally (i.e. the URL of DRAW in your browser is like
https://localhost:8888/...), you can still load the app on your phone if your phone is connected to the same wifi network. Find out your IP address (Windows, Mac) and use that address in your browser in place of
localhost. For example if your IP address is 192.168.0.2, enter
https://192.168.0.2:8888 in your browser. From there, use the Share menu entry of the Controller app to display a QR Code which you can scan with your phone's camera.
Using your browser: open the Controller app and activate the touch mode:
- Chrome: Menu -> View -> Developer -> Inspect elements, and click on the little phone at the top left.
- Firefox: Menu -> Tools -> Web Developer -> Responsive Design Mode, and make sure "Touch Simulation" is enabled.
In a separate tab, load the Color Display app. Et voilà! When you move your finger on your phone, you change the color in your browser.
You probably noticed that your finger changes the color on the top left of the screen, but once it moves to the bottom right quadrant the color remains white. This is because we simply plugged the position into the color: color components are between 0 and 255. Any position beyond 255 will therefore be converted to a color component of 255. As your phone has a resolution of more than 255x255 pixels, a significant amount of space is considered as white.
This can be resolved by normalizing the position depending on the actual size of the phone's screen. Create a new function as follows:
Then use it within the Controller app, in the On Touch Move function:
As a result, the pointer position remains always between (0,0) and (255,255), and the color change is continuous across the whole screen of the phone.
Ajouter 1 prop au business model Créer les fonctions get et set
Brancher hidden sur l'app ordi
Brancher 2 évènements supplémentaires