furniturekillo.blogg.se - Open canvas 6 using touch screen

Change the name of this component from "HorizontalArrangement1" to "ThreeButtons".

From the Palette's Layout drawer, drag out a HorizontalArrangement component and place it under the buttons.

You do this using a HorizontalArrangement component.

The next step is to make them line up horizontally. You should now have three buttons, one below the other. You should also see the three buttons on the mobile device screen. Using meaningful names makes your projects more readable to yourself and others.Ĭonnect to the AI2 Companion using the "Connect" menu. In this project, you're changing the names of the components rather than leaving them as the default names as you did with HelloPurr. Here's how this should look in the Designer, with the button names appearing in the list of project components. Similarly, make two more buttons for blue and green, named "ButtonBlue" and "ButtonGreen", placing them vertically under the red button.button to change its name from "Button1" to "ButtonRed". Click on Button1 in the Components list in the Viewer to highlight it (it might already be highlighted) and use the Rename.Drag a Button component onto the Viewer and change the Button's Text attribute to "Red" and make its BackgroundColor red.There's also a component you don't see: you use a HorizontalArrangement to make the three color buttons line up side by side.That's just a canvas without a background image. This canvas has a BackgroundImage, which is this kitty from the HelloPurr tutorial. Three Buttons for selecting red, blue, or green paint, and another button for clearing the drawing.You'll use these components to make PaintPot: To reiterate, the name and the title of Screen1 are initially the same, but you can change the title if you want.

However, you can change it, as you're doing for PaintPot. The Title starts out being "Screen1", which is what you used in HelloPurr. Title is a property of the Screen component.

The Title property of the screen, which is what you'll see in the mobile device's title bar.

You can't change the name of the first Screen component in the current version of App Inventor but you can create additional screens with names of anything you should choose. You'll see it listed in the Components panel in the Designer.

The name "Screen1", which is the name of the Screen component.

This will also be the name of the application if you package it for the phone.

The name you choose for your project as you work on it (in this case, PaintPot).

There are three names in App Inventor, and it's easy to confuse them: If you connect to the Companion on a mobile device, you should see this change on the device, with the new title showing in the title bar. To get started, go to the Properties panel on the right of the Designer window and change the screen Title to "PaintPot". Open App Inventor in a browser window, start a new project, and name it "PaintPot". Make sure your computer and your mobile device are set up to use App Inventor.

Controlling screen layout with Arrangement components.

This tutorial introduces the following App Inventor concepts: This tutorial assumes that you have completed the HelloPurr tutorial.

Include an image as a drawing background.

Use the button at the bottom to wipe the screen clean.

Drag your finger along the screen to draw a line.

Dip your finger into a virtual paint pot to draw in that color.

Historical note: PaintPot was one of the first programs developed to demonstrate the potential of personal computers, as far back as the 1970s. You'll build an app that lets you draw on the phone screen in different colors. This tutorial introduces the Canvas component for creating simple two-dimensional graphics.

This tutorial has two parts: Part 1 | Part 2