Tag Archives: Software

Using droid-at-screen to see your phone’s display on your computer

droid-at-screen is a free Java-based app that displays the content of your phone’s display to your computer’s display, when the phone is connected via a USB cable.

Below is a screen snap shot taken from my computer display. At the upper left is the Droid@Screen application running.  Droid@Screen is connected to my Nexus 5 phone.

At right is the display showing on my phone, which has been transferred from the phone to my computer over a USB connection. I’ve circled two user interface items – the magnifying glass icon is used to adjust the display size of the phone’s screen. Since the phone has a 1920×1080 display, the initial image is quite large!

Below that is a camera icon. Click on that to take a snapshot of what is on the screen, and then save the screen image to a local file.

Capture

At the lower left is the DroidAtScreen .jar file. This is the Java executable program file. Assuming Java is installed on your system, double click the .jar file to begin running Droid@Screen.

Continue reading Using droid-at-screen to see your phone’s display on your computer

A “switch board” user interface panel for App Inventor apps

In the last post, we introduced some concepts for building “creative” App Inventor user interfaces that feature visually appealing user interface controls rather than the usual bland buttons.

In this post, we look at creating an array of toggle switches. Tapping a switch flips the switch from left to right, or right to left.

Concepts

In developing this user interface, we learn two concepts:

  1. We expand on the previous post and its use of images to create custom buttons.
  2. We see how a user interface control can be stored in a list and referenced like a variable within our apps.

Source code:

The User Interface

I called my app “Mission Control” because any good mission control panel needs lots of switches!

The user interface features 9 toggle switches in a 3 x 3 array. The purpose of this app is to demonstrate how to implement this type of interface – the app does not otherwise do anything interesting.

Tapping any toggle switch causes the switch lever to move to the other side of the switch. Here is a screen shot showing some toggle switches to the left and some to the right.

Screenshot_20160204-140323The Designer View

Continue reading A “switch board” user interface panel for App Inventor apps

Free-Download App Inventor Bluetooth Communications Cheat Sheet

Download here: App Inventor Bluetooth Cheat Sheet (PDF)

Covers basic Bluetooth text communications with links to tutorials on sending numeric and binary data, and connecting to Arduino over App Inventor Bluetooth.

App Inventor sample source code available here.

High res, suitable for printing. Feel free to share with others.

Here is a GIF image of the first page but use the PDF for printing (higher resolution) and it includes both pages:

Voila_Capture 2015-10-28_08-35-41_PM

Post comments here or on our Facebook group page. Thank you!

E-Books and Printed Books

If you find these tutorials helpful (I hope you do!) please take a look at my books on App Inventor. To learn more about the books and where to get them (they are inexpensive) please see my App Inventor Books page.

  • App Inventor 2 Introduction (Volume 1 e-book)
    Step-by-step guide to easy Android programming
  • App Inventor 2 Advanced Concepts (Volume 2 e-book)
    Step-by-step guide to Advanced features including TinyDB
  • App Inventor 2 Databases and Files (Volume 3 e-book)
    Step-by-step TinyDB, TinyWebDB, Fusion Tables and Files
  • App Inventor 2 Graphics, Animation and Charts (Volume 4 e-book and printed book)
    Step-by-step guide to graphics, animation and charts

Thank you for visiting! — Ed

Do you need to use a “real programming language” to create useful applications?

Do you need to use a “real programming language” to create useful applications?

No!

The history of programming begins long ago with the toggling of switches on a console to “program” a system. This primitive method advanced to the use of short text instructions called “assembly language”, which was then followed by programming languages such as Fortran and others.

In the past couple of decades, “real software” was often written in C/C++, Java or C#. Today, “real software” is written in PHP, Ruby on Rails, JavaScript, Python, VBA and other new programming languages and support libraries.

Yet there remains an attitude that real software is not real unless its written in a traditional programming language (Java, for example). There is a joke, especially among hardware designers, that “real programmers program in solder”!

So what is a “real programming language”? Realistically, any programming language or system that enables you to deliver a software project that meets the customer needs and requirements is a “real programming language”.

Which gets us to the main point – MIT App Inventor is a real programming language – it is just a different way of programming than that used by “traditional” solutions. Do not let others tell you that App Inventor is not real programming! (But it is more fun!)

Free-Download App Inventor OrientationSensor “Cheat Sheet”!

Download here: App Inventor Orientation Sensor Cheat Sheet (PDF)

High res, suitable for printing. Feel free to share with others.

Here is a GIF of the cheat sheet but use the PDF for printing (higher resolution):

Voila_Capture 2015-10-28_12-25-22_PM

Post comments here or on our Facebook group page. Thank you!

E-Books and Printed Books

If you find these tutorials helpful (I hope you do!) please take a look at my books on App Inventor. To learn more about the books and where to get them (they are inexpensive) please see my App Inventor Books page.

  • App Inventor 2 Introduction (Volume 1 e-book)
    Step-by-step guide to easy Android programming
  • App Inventor 2 Advanced Concepts (Volume 2 e-book)
    Step-by-step guide to Advanced features including TinyDB
  • App Inventor 2 Databases and Files (Volume 3 e-book)
    Step-by-step TinyDB, TinyWebDB, Fusion Tables and Files
  • App Inventor 2 Graphics, Animation and Charts (Volume 4 e-book and printed book)
    Step-by-step guide to graphics, animation and charts

Thank you for visiting! — Ed

Free – download MIT App Inventor “Cheat Sheet”

I have created a “cheat sheet” that captures all of the App Inventor components, blocks, events, properties and procedure calls. The “cheat sheet” is 9 page of details, in a large (almost 5 MB) PDF file that contains high resolution images suitable for high res printing. For those learning App Inventor, the cheat sheet may help you quickly find various components within the interface.

Download here: App Inventor Cheat Sheet (PDF)

Feel free to share with others.

I have some ideas for additional cheat sheets but would like to hear what you might like to have in a “cheat sheet” summary format. Post comments here or on our Facebook group page. Thank you!

E-Books and Printed Books

If you find these tutorials helpful (I hope you do!) please take a look at my books on App Inventor. To learn more about the books and where to get them (they are inexpensive) please see my App Inventor Books page.

  • App Inventor 2 Introduction (Volume 1 e-book)
    Step-by-step guide to easy Android programming
  • App Inventor 2 Advanced Concepts (Volume 2 e-book)
    Step-by-step guide to Advanced features including TinyDB
  • App Inventor 2 Databases and Files (Volume 3 e-book)
    Step-by-step TinyDB, TinyWebDB, Fusion Tables and Files
  • App Inventor 2 Graphics, Animation and Charts (Volume 4 e-book and printed book)
    Step-by-step guide to graphics, animation and charts

Thank you for visiting! — Ed

App Inventor introduces copy and paste of code blocks!

App Inventor has introduced “copy and paste” of code blocks. Now you can copy blocks of code within a current screen, or from one screen to another screen, or even between projects. This is great news!

Look for the “backpack” icon at upper right of the blocks Viewer screen:

AI_Copy1

Select a block or blocks with the mouse pointer, and then click and drag the selected blocks into the backpack. A copy of the blocks are placed into the backpack and your original blocks also remain in the editing window.

Click on the backpack icon and it displays the code blocks currently stored in the backpack:

AI_Copy2

Click on the code block in the backpack (at right) and drag it into the Blocks Viewer. That is all you need to do to copy blocks.

Use this feature to copy blocks within your current screen, or to copy blocks from one screen to another screen, or to copy blocks from one app to another app.

You can put several blocks into the backpack, and then select only the ones you wish to copy over to another blocks Viewer.

How do you empty the backpack? It seems the only way to empty the backpack of saved items is to close the editing windows, go back to the MIT App Inventor home page (http://appinventor.mit.edu/) and select the Create apps! button to re-enter the designer and blocks editor.

Regardless, this is a GREAT NEW FEATURE! Thanks MIT App Inventor team!

Implementing an “Array” in App Inventor

What is an “Array”?

An array is a variable data type that stores a collection of values referenced by an index number.

For example, suppose we wished to store the names of the 12 months of the year: January, February, March, … , November, December so we can convert a month number to a text name. Month 1 converts to “January”, Month 2 converts to “February” and Month 12 converts to “December”.

An easy way to do this conversion is to set up an array that, in concept, looks something like this:

Month[1] = “January”
Month[2] = “February”
Month[3] = “March”
Month[4] = “April”
Month[5] = “May”
Month[6] = “June”
Month[7] = “July”
Month[8] = “August”
Month[9] = “September”
Month[10] = “October”
Month[11] = “November”
Month[12] = “December”

Month is the name of this variable – but unlike other variables, this one stores 12 separate values. Each value is referenced by using an index – if the index value is 2, then Month[index] refers to “February”.

If we have a date, such as (US-style) – 2/14/15, meaning February 15, 2015, we can convert the month number of 2, into the text month name by referencing Month[2].

If you have studied algebra math or beyond, you have encountered array variables such as X1, X2, X3, … Xn where the value Xi is read as “X subscript i”. This is the same concept as an array of values. If you have not studied algebra, this notation may be new to you. 

Most programming languages support an array variable type but App Inventor does not support arrays. Yet arrays are a convenient way of storing and working with some types of data. To support an array-like variable in App Inventor, we can use a list and map the array subscript to an index position in the list.  By hiding this within a couple of procedures, we can simulate the array variable type.

Sample User Interface

I created a simple app to demonstrate the use and implementation of the array. You can download this app from the MIT App Inventor Gallery here.

Continue reading Implementing an “Array” in App Inventor

How to use the “2 Button” Notifier dialog box

A reader asked, “When using the 2 button Notifier dialog, how do we know which button was pressed?

The 2 button Notifier dialog alert box displays 3 buttons(!) – the first two have values you specify, such as “Ok” and “Done”, as shown here, and the third is an optional generic “Cancel” button:

Screenshot_2015-09-11-15-07-15

The Notifier component block is a procedure call that has no return value – so how can you determine which button was selected?

The answer is that the selected button is returned to a separate event handler.

Continue reading How to use the “2 Button” Notifier dialog box

Tip: Using component colors to find components in the Blocks Editor

Finding a specific programming block with in the AI2 Blocks editor can be hard for new AI programmers.

You found a great code example online and want to recreate it by entering the blocks in to your program – but you cannot find that red block in the middle of the code sample? Where is it? !!!

You start poking around the drop down lists, scanning up and down the pop up menus, missing it the first time(!) and then going through all the blocks again until you finally locate that darned block! Frustrating!

Continue reading Tip: Using component colors to find components in the Blocks Editor