RSS

AiLiveComplete – Adding animation to any visual component

Check some of the features that will be coming to AiLiveComplete (classic & browser based versions). These features will allow you to quickly add animation to ANY visual components! Check it out below.

Interested in AiLiveComplete? please see HERE for details and more information.

See it InAction by installing THIS app on your Android device

 
3 Comments

Posted by on April 18, 2014 in Uncategorized

 

AiLiveComplete – March 11th, 2014 – New Feature Release

New components / blocks / features have been added to AiLiveComplete. These enhancements exist both in the classic version (Ai1LiveComplete) and the browser based version (Ai2LiveComplete).

The new enhancements are:

  • Added ability for sending email with attachment
  • Added ability to make Label scrollable and hyperlinked
  • Added ability to use custom fonts (.ttf)  for label component – same feature as button
  • Added ability to make Notifier dialog messages linkable
  • Added ability to position Notifier dialog window at TOP, CENTER or BOTTOM
  • Added ability to take snapshot of phone and EMail it it as attachment!
  • Added ability to quickly send EMail attachments
  •  Added ability to change ListPicker search title
  • Added ability to change the Notifier Cancel button text

To see some of these features in action, see YouTube video below:

Interested in AiLiveComplete? please see HERE for details and more information.

 

 
9 Comments

Posted by on March 14, 2014 in Uncategorized

 

How to develop a Photo Booth Android app

In this tutorial, we will develop a Photo Booth app. I’ll show you how you can develop an app that allows you to accomplish the following tasks. The app will be developed using MIT App Inventor

  • Take pictures using your smart phone,
  • Saving picture onto canvas
  • Display the last 4 pictures on your device
  • Select one of the pictures and get the picture name
  • Post / transmit a selected picture to a PHP server

What will be covered in this tutorial?

  • Camera — allows you take, save picture
  • Canvas – for displaying pictures onto canvas (4 canvases will be used)
  • Notifier – for displaying messages
  • Web – for posting the picture to a PHP server
  • Button, Label, TextBox, Arrangements

We will be working toward the design shown in figure blow:

image

Below figure is showing you, at high level, how the components are arranged in our design editor. It also shows you the non-visible components (e.g. Camera, Web, Notifier). that are used in the sample app.

image

For the layout, we use Vertical and horizontal screen arrangements to contain the four canvases. After a camera picture is taken, one of the canvas background images is changed to show the image.  To keep the canvases spaced properly, we use Label component with its Text background set to None. Using this approach, the Label serves as a spacer and puts spacing between our canvas components. The figure below shows this layout:

image

Assumption:

This tutorial assumes you know the basics of App Inventor. For additional tutorials, please see HERE.

App Inventor Blocks

The layout includes 4 canvases. The canvases are used to show the pictures that are taken. Once a picture is taken, it will be saved and shown onto first canvas. The second picture will be saved onto second canvas. This will continue through all four canvases and then we rotate back again to first canvas. To keep track of which canvas should be used, we declare and use a global variable as shown below. We also set the default value to zero

image

To take a picture, we are using a Button component, btnTakePicture with Text of ‘Take Picture’. Once btnTakePicture is clicked, we start the device camera using the Camera component. Figure below shows the block for invoking the device camera:

image

Once the camera lens opens and picture is taken, the Camera.AfterPicture will be triggered. In this event, the global variable canvasNum is increased by 1. This will allow us to rotate the image and save, as background, to Canvas1 through Canvas4. When the canvasNum is over 4, we rotate it back to 1 so that we can save the picture back to Canvas1. A procedure named setPictureInCanvas is used to set the image as background of one of the canvases. The figure below shows the relevant blocks for this logic:

 image

We provide ability for user to select an image that is already displayed on the canvas. Once the canvas is touched, we retrieve its background image and display its image name in a text box. The blocks for this logic are shown in figure below:

image

Once an image is selected, and its name displayed in TextBox (txtPictureToPost), we allow the user to tap on a Button (btnPostImage) to transmit / post the selected image using Web component. The Web component URL is set to point to PHP script on the server. The blocks for the Web and invoking the PHP script is shown in figure below. On each post, if successful, it will store the file, on the server, as myPhoto.jpg.

image


PHP Code:

The following is the PHP code that needs to be saved onto your server and invoked using the blocks shown in the above figure.

<?php
/* FileName: tempSaveFile.php
* Simple PHP script to save image file.
* Note: This simple PHP requires much update for data validation
*/

$dataToWrite = $_REQUEST['fileName'];
$fileName = "myPhoto.jpg";

file_put_contents($fileName, $dataToWrite);

?>

Download source / apk

  • Click HERE to download .apk
  • Click HERE to download source
 
 
5 Comments

Posted by on February 27, 2014 in Uncategorized

 

How to develop location based Android App

In this tutorial, I’ll show you how you can develop an app that allows you to record list of addresses and view the address on the Google Maps. I will also show you how to view your current location on the Google Map. The coding will be done using MIT App Inventor.

What will be covered in this tutorial?  In this tutorial, you’ll learn the basics of:

  • List manipulation – creating lists, appending items to lists
  • ListPicker – adding items to lists, persisting to database
  • LocationSensor – detecting current location for displaying on Google Maps
  • ActivityStarter – used to start-up Google Maps for current or predefined address
  • Notifier – displaying messages
  • TinyDB – persisting data (lists) into database
  • Misc. – text manipulation, basic validation

We will be working toward the design shown in Figure-1 blow:

image

Figure-1

 

Figure-2 below is showing you, at high level, how the components are arranged in our design editor. It also shows you the non-visible components (e.g. TinyDb, ActivityStarter, LocationSensor, Notifier). that are used in the sample app. It also shows you the ListPicker. Please note that ListPicker can be dropped anywhere in the design editor because using the blocks, we set that hidden.

image

Figure-2

 

Assumption: This tutorial assumes you know the basics of App Inventor. For additional tutorials, please see HERE.

App Inventor Blocks

We define 2 global variables.

  • tagAddress  a variable is a constant and will be used, as a tag, for storing / retrieving data from our database.
  • listLocations – a variable that be used to store / manipulate list of addresses

We now create a procedure that can be invoked when the app is started (initialized). The procedure sets up the initial state of some of the components. Some of these settings could have been done from the design editor, but for demo purpose and clarification, we are using a procedure. In the procedure, we also check our database to find out if there are any stored addresses. If no data, then we just use an empty list.

image

Figure-3

Viewing stored locations

We use a button, btnViewLocations, that user can tap to view all user-specified addresses in a ListPicker. If validation goes through (e.g. address list not empty), this button will invoke our ListPicker.Open to display the addresses. The ListPicker component has been set to not-visible (see our init procedure in top figure). The blocks for the clicked event of this button is shown below. When button is clicked, we check to see if our listLocations contains any data. If not, display error message, otherwise we open our ListPicker using ListPicker1.Open block:

image

Figure-4

 

Adding new addresses:

To add a new address, we have dropped a button (btnAddLocation ‘Add Location’). We also use a button (btnCancel ‘Cancel’) to cancel the process of adding.  We also use a button btnAddLocatoinhelp ‘Location Help’) to display what type of addresses can be entered. The blocks looks like below:

image

Figure-5

 

When btnAddLocation is clicked, we make our address data entry visible (using screen arrangement), allowing user to enter address. If user clicks on cancel, we make the arrangement hidden again. Using this approach, we keep the screen simple and avoid the clutter. We also provide a button (btnSubmit ‘Submit’), allow user to indicate that they want to store data. The data entry arrangement looks like below:

image

Figure-6

 

When user taps on btnSubmit ‘Submit’ button, we perform basic validation to ensure data has been submitted. If validation does not pass, we display error message. Otherwise, we invoke a procedure that appends the new address to our list. We also store the updated list into our database. Once address is added, we hide our arrangement again.  Blocks below shows how this logic is done:

image

Figure-7

 

When user selects an address from the opened ListPicker, we display the address in the device and allow user to tap on btnViewMap ‘View on Map’ to see the selected address on the Google Map. Figure-8 shows the blocks for ListPicker.AfterPicking and Figure-9 shows how it is displayed on the device or emulator.

image

Figure-8

 

image

Figure-9

 

When the btnViewMap ‘View on Map’, we validate to ensure that an address already has been selected. If not, display error message otherwise we use blocks shown in Figure-10 to show address:

image

Figure-10

 

The above blocks will open the map and the output will be like image below:

image

Figure-11

 

Viewing current location on the map

We have dropped in a button, btnMyLocation ‘My location on the map’ that can be clicked to view current location on the map. It will use LocationSensor to get the current address and will use blocks shown in Figure-12 to show current location on the map:

image

Figure-12

 

Download source / apk

  • Click HERE to download .apk
  • Click HERE to download source
 
5 Comments

Posted by on February 27, 2014 in Uncategorized

 

Developing an Android Flashlight app

Ever wanted to develop an Android Flashlight app? If so, take a look at the video below that shows you how to develop a Flashlight app the quick-&-easy way.

Interested in AiLiveComplete? please see HERE for details and more information.

Download source / apk 

  • Click HERE to download .apk
  • Click HERE to download source (NOTE: This was designed in Ai1LiveComplete classic version)
 
1 Comment

Posted by on February 20, 2014 in AiLiveComplete, android

 

Quickly retrieve Android device info

Ever wanted to add capability to your Android app to retrieve device specific information such as API level or device model / manufacturer?

If so, watch YouTube below to see how this could quickly be accomplished using KitchenSink component in AiLiveComplete!

Interested in AiLiveComplete? please see HERE for details and more information.

 
Leave a comment

Posted by on February 15, 2014 in Uncategorized

 

AiLiveComplete – Horizontal & Vertical Scrolling – Part I

Check out the video below to see the components in AiLiveComplete that enables you to quickly add in horizontal and vertical scrolling capability:

Interested in Ai2LiveComplete? please see HERE for details and more information.

 
Leave a comment

Posted by on February 9, 2014 in Uncategorized

 
 
Follow

Get every new post delivered to your Inbox.

Join 77 other followers