Spielend programmieren lernen

Programmierkurse für Kinder, Jugendliche und Erwachsene

User Tools

Site Tools


en:blog:2016:1008_scannerapp

Title: Tutorial: silly scanner app with Pocket Code Date: 2016-10-08 08:37 Modified: 2016-10-09 08:00 Tags: report, tutorial, coding, PocketCode Googleadsense: True Slug: 20161008_scannerapp Summary: Step-by-step tutorial of how to create an absolute useless app using Pocket Code Shortlink: https://goo.gl/HA6acz Hashtag: #spielendprogrammieren

By request of most awesome Serbian CodeWeekEU activist and teacher Csaba Vörös i wrote a full tutorial of an Pocket-Code “scanner” app that originally started as a joke for my game-programming students. The idea is that you point your Smartphone to another lifeform and press a “scan” button, like in the "Star Trek" tv-series. The app will “scan” the lifeform and tell you everything you need to know…

All Screenshots of this tutorial are made by student Niklas Rebel.

Note: All pictures can be found in higher resolution under:
http://spielend-programmieren.at/blog/images/20161008_scannerapp/. You can also click on a screenshot to enlarge it.

requirements: installing PocketCode

Pocket-Code is currently only aviable for Android SmartPhones and Tablets. All you need is an Android device and a short time of internet access to download the two free/libre open source apps PocketCode and PocketPaint from the Google Play Store. Once both apps are downloaded and installed, no more internet connection is required for this tutorial.

Practical note: To run this whole tutorial with a class of students, no additional computers nor a computer lab is required. Just one (Android) smartphone/tablet per participant is required with PocketCode and PocketPaint already installed. Form my experience it is a good idea to make sure that every student not only bring a smartpone/tablet but also an electric charger. Using PocketCode intensely seems to be very demanding for the batteries.

Step-by-step instruction

After starting the PocketCode App, click the “new” button, enter “Scanner App” as program name and choose vertical orientaion:

PocketCode starts an empty app with an background object but no game objects (sprite). Click on the “background” button, click on “scripts” and hit the “+” button. Pocket-Code presents you a color-coded selection of visual coding bricks:

Tap on the orange “control” block and select the topmost block “when program started”. Note that this block has a rounded top side tho indicate that this block can be the beginning topmost block of a program made out of several blocks. Hit the “back” button of your phone and you will see the different categories of code blocks again. This time, tap on the green block for “looks”. Select “turn camera on”. Swipe the “turn camera on” block a bit down so that it becomes attached under the “when program started” block.

Go back again, select the green “looks” blocks again and “Use camera back”. Attach this block below the previous block. Note that you can switch the camera to “front” if you want the scanner using the front camera of your phone (the front camera is usually of inferior quality and used for selfies and videochat only).

In this tutorial, i used the “back” camera to have a more Star-Trek like scanning experience. We are done with scripting the background; hit the “back” button of your smartphone until you come to the object overview screen again. We still have only the background an no object, but the background is now properly scripted:

It's time to paint our first object. Click on the “+” icon and select “Pocket Paint” to create a new bitmap from scratch. Note that the PocketPaint app has several tool icons at the bottom border. From left to right, those icons allow you to edit the size of a stroke (brush size), to select a color and to select one of several painting tools:

The object needed now is an attractive “Scan” button for the user. We are hand-painting a Graphical User Interface here. I decided to create a pink ellipse and finger-paint the word “scan” into it using a different color and a thin brush size. You may have other ideas of how your Scanning button should look. In any case, make sure that the Scanning button “sits” on the lower border of your smartphone. Also make sure that the area outside the button is transparent (the gray checkered pattern). Make sure nothing inside your Scan button is transparent. If you are satisfied with your artwork (you can always improve it later), hit the “PocketPaint” icon in the topleft. Pocket Code will ask you to save the changes (click “save”) and to name the object. Choose “Scan Button” as object name:

The scanning app consists now of one background object (with a bit of code) and one single “sprite” object, the scanning Button. In PocketCode, each object can have several looks (in Scratch, those are called costumes). The Scan Button object has currently one single look and no scripts. Click on the Object button showing the Scan Button once. Similar to the background, PocketCode presents you with an screen to edit the script or the looks of this Scan Button object.

Click on “scripts”, and select “control” and the “when program is started” code block, like always. From the “looks” menu (you have to go back once), select “set size to 60% and “show”. This makes sure the Scan Button is always visible when the app is started. From the blue “move” menu select the top element “place at X Y”. Tap on the values for X and Y and change X to 0 and Y to -250. The idea is to place the Scan button at the bottom edge of the smartphone screen:

The value of -250 is just a guess. Because Android devices are produced with different screen resolutions it is now time to test the scanning app and find out the possible screen resolution. Click on the “play” item at the bottom right corner (a triangle pointing right). When the program is running (you should see the Scanning button) hit the “back” button of your device once. You should see some icons at the bottom of the screen. The “Axes on” icon in the bottom right corner displays a big crosshair (x and y axis) and in a small red font the maximal and minimal coordinates for both the x-axis and the y-axis.

Tap the “back” button of your smartphone again and navigate to the script of the Scan button object and change the y value (of the element “place at X Y”) to another value. The result should be that the Scan Button touches the bottom border of the screen. You may have to repeat those steps (changing y value, play) several times until you find a good y value. Do not enter an y-vaule smaller than the minimal y values of your smartphone, or the scanning button will become invisible.

Also keep in mind that the values you enter now are optimized for your smartphone. The whole app may look very different on smartphones with bigger screen resolutions and may become not usable on devices with lower screen resolution.

To finish the scripting for the Scan Button object, add those commands:

  • from “control”: “When tapped”. Note that this coding brick has a rounded upper edge and starts a new script.
  • from “control”: “Broadcast (message 1)”. Replace “message1” with the word “scanning”.
  • from “look”: “hide”
  • from “control”: “Wait 1 second”. Change the “1” to “8”
  • from “look”: “show”

If you test out the app by pressing on the “play” button you schould see the Scan button. If you click on it he disappears for 8 seconds and becomes visible again:

It is time to create other objects. Hit the “back” button of your smartphone until you see the object overview screen. Press the ”+“ icon again to create a new object. Use PocketPaint again to create the new object from Scratch. Inside PocketPaint, choose a dark green colour and set the brush size to thick. Paint a horizontal thick dark green line in the middle of the screen. Afterwards, change the brush size to small and choose a light green colour. Paint a thin, light green horizontal line inside the dark green line.

Click the “PocketPaint” Icon in the topleft corner and save the new object as “green bar”:

Now add a script to the green bar object. The bar should move up and down while scanning. The script is:

  • from “control”: “when program started”
  • from “look”: “hide”
  • from “control”: “when i recive 'scanning'”. Make sure that 'scanning' is displayed, not 'message1'.
  • from “motion”: “place at X Y”. Set X to the value 0 and Y to the minimal value that was displayed by “show axis”. If you did not remember the value, hit the play button again, tap “back” once and click on the “show axis”. In this example, i use ”-640“.
  • from “look”: “show”
  • from “motion”: “glide 1 second to X Y”. Change the gliding time to 2 seconds, change the X value to 0 and change the Y value to your top y position (640).
  • from “motion”: “glide 1 second to X Y”. Change the gliding time to 2 seconds, change the X value to 0 and change the Y value to your lowest y position (-640).
  • from “look”: “hide”

Another object is completed:

The next object is an area that slowly becomes more transparent while scanning.

Go back to the object overview and add another object using PocketPaint. The painting itself is very simple: just select a (green) color, select the “fill bucket” tool and fill the whole screen. You can also choose another color if you don't like green. Hit the “PocketPaint” Icon in the topleft corner and save the object as “green Area”:

The green Area object also needs a script. The script should slowly change the transparency during 4 seconds from 100% to 0%. You can experiment with other values (like changing the transparency to only 50%). The changing of the tranparency should be done inside a loop that is repeated 16 times (you can choose another value if you do the math correctly). Dividing 100% by 16 steps equals 100%/16 = 6.25%. Thats how much the transparency is reduced in every step. Dividing 4 seconds by 16 equals 4sec / 16 = 0.25 seconds. That's how much time passes in each step. Here is the script for the green Area:

  • from “control”: “if program is started”
  • from “look”: “hide”
  • from “control”: “when i recive 'scanning'”
  • from “look”: “set transparency to 0%”
  • from “look”: “show”
  • from “control”: “repeat 16 times”. Note that this coding brick “explodes” into 2 seperate bricks: the “repeat” brick and another brick “End of loop”. The next commands go between those bricks to indicate that those commands are looped 16 times.
    • from “look”: “change transparency by %”. Set the “by %” value to ”- ( 100 / 16)“ or set it directly to ”-6.25“
  • “End of loop”. This block was automatically created by the “repeat” block.

Another object is finished!

Let's now created the last, most complicated object. Go back to the object overwiew and add a new object using pocket code. This is the “result” object. The first result is a human (the scanner identify someone as humanoid”). Draw a stick figure. Make sure to use the middle half of the screen (leave blank a quarter of the screen above and below your drawing). Paint the word “human” above the stick figure, or use the text tool:

Exit PocketPaint and save this new object as “result”. Now comes the complicated part, several of my students got this wrong at the first time. You do NOT make different result objects. What you do is make for the one and only result object different looks (costumes).

Click on the result object (the stickman). Click on “looks”. (We will add a script later). You should see that your result object has the name “result”, and it's costume has also the name “result”. Confusing! To be able to discriminate the costume name from the object name, let's rename the costume name. PocketCode allows you to rename costumes: Click on the 3-vertical-dots icon in the topright corner and select “rename”. a checkbox appear left of the (only) costume. Check this checkbox and click on the topleft corner icon. Rename the costume to “result picture1”. We will later have 4 or more costumes for the result object:

Now add 4 or more costumes to the result object. Warning: Do NOT add new objects. Instead, go to the object overwie and click on the (only!) result object. click on “looks”. At the moment, the result object has one single look (costume), named “result picture1”. Click on “+” and use PocketPaint to add other costumes.

I choosed “human”, “flower”, “alien” and “thing”. The more different costumes you make, the more fun you will have with your scanning app. Make sure to leave the upper quarter of the screen free when drawing your costumes.

It is a good idea to rename the costumes into “result picture2”, “result picture3” etc., even if it is not strictly necessary to do so.

Now it's time to create the final script for our one and only result object:

In the object overview, click on the result object and click on script. Add a new script using those commands:

  • from “control”: “when program is started”
  • from “look”: hide
  • from “look”: set size to 60%
  • from “control”: “when i recive 'scanning'”
  • from “control”: “Wait 4 seconds”. This is the time the scanning bar needs to glide up and down the screen
  • from “control”: “repeat 10 times”. This code block will also create an “end of loop” block.
    • from “look”: “next look”. This code is block is inside the loop
  • “end of loop”
  • from “look”: “show”
  • from “control”: “wait 4 seconds”
  • from “look”: “hide”

Nearly done! Now it is necessary to modify the “10” inside the “repeat 10 times” block. Click on the “10”. A calculator-like screen appears. Notice the buttons on the left. Hit the “functions” button and choose the “random” functions. Change the values from “0,1” into “16, 32”. If you made more than 16 costumes, choose larger values. The idea is that the loop is repeated so many times that each costume has an equal chance of appearing.

Your app is ready to use now! Put on your star trek uniform, point your smartphone at other beings and press the scan button to reveal their true identity.

ideas for improvements

Aside of adding sound effects (works like costumes) the scanning app can be made even more sophisticated by displaying several (randomized) attributes of the scanned lifeform, like:

  • “threat level” (“extreme dangerous”, “dangerous”, “mostly harmless”, “harmless”),
  • “cultural level” (“sophisticated”, “barbarian”)
  • “intelligence” (“genious”, “sapient”, “brainless”)
  • “charakter” (“likeable”, “friendly”, “mean”, “agressive”)

Each of those attributes works exactly like the “result” object: You create a new object and paint several costums for it (like “intelligence picture1”, “intelligence picture2” etc.). Make use of the fact that we left the upper and lower quarter of the screen empty while painting the “result” stick figures. This is the place you have for painting the attribute pictures. the less screen space (y-axis) you use, the more different attributes you can display. Make use of the text tool of PocketPaint (you need to tap on the finished text once to “stamp” it into the picture) or simply use symbols, like hearts, skulls, brains etc.

The script is exactly the same script you used for the result object. You may want to add “place X Y” at the start and modify the Y value, this is more convenient than having to re-paint the costumes.

publishing your app

Pocket code allows you to upload your up to the PocketCode Server so that other users can enjoy and modify it. You can also download your app from PocketCode as an .apk file and put it on your homepage for sale.

license

This article (text and images) is, if not stated otherwise in the image captions, licensed under Creative-Commons-Share-Alike 4.0 (cc-by-sa) by Horst JENS.



/var/www/horst/spielend-programmieren.at/data/pages/en/blog/2016/1008_scannerapp.txt · Last modified: 2017/10/12 09:44 (external edit)