StreamTube

  • icon-videoYouTube Live
  • Kiosk
  • icon_iOsiOS/Android
  • 8 contents
  • Smartphone/Tablet

Tutorial to create this App

Open the program 480interactive on your computer and click on the button “Create new App”.

 

  1. Choose the name of the project. For example “My App”.
  2. Choose the location of the project. By default, the program automatically chooses the workspace where all projects are saved.
  3. Choose the type of App. Select “App Kiosk”.
  4. Click on the “Create” button.

 

 

You already have the App created, but you do not have any added content yet.

This project has 8 YouTube links showing eight YouTube playlists of live broadcast channels with different themes. You can customize the project simply by replacing YouTube web addresses. Here’s how we’ve created this App in a few simple steps.

First let’s add some YouTube content. To do this, go to the “Add content” screen in the tree on the left, look for the “YouTube List” content and click on “Add”.

 

A wizard will open to add the link. In the field “Title” we write the title that we want the link to have. In the field “URL” we will write the link that YouTube provides us to share our video or our playlist and click on “Add”. (If you have doubts about this step you can see how to do it in this tutorial: Add Youtube video/list)

 

Now, we repeat this same process to add the rest of the links to the application.

Add the App icons

There are two types of icons in this App: the main icon of the App, which is the one that will be seen when users install the App on their devices and the icons of each of the contents, which are the icons you will see in the Kiosk where are all the contents that add to the application.

The main App icon

To add this icon, click on “App Settings” in the tree on the left and click on the “General Information” tab. Once there, we will see a default image, click on it and open the file browser. Now we choose the application icon called “ico-App.png”.

 

The video icons

  1. Click on the first content in the tree on the left.
  2. Click on the “Publication icon”
  3. We chose the content icon.
  4. We repeat this same process with each of the remaining contents and we will have all the icons ready.

 

Kiosk Banners

When you make a kiosk application, the first thing you see when you start the application is the “Kiosk” itself, where all the contents and categories that your app contains. At the top of the Kiosk we can place a banner, which is an image with which we can give a custom look to the App. In the following link you will be able to expand information about the Kiosk Banners.

 

To add the banners to the app we go to “Configuration of the app”> “Visual aspect” and we click on the “Banners” tab.

Now select “Vertical Banners” and click on “Add”

It will open the project folder, enter the “Libraries” folder, select the banner and click “Select”.

 

 

Customizing the colors of the Kiosk

Now we change the colors of the theme to customize the colors of our App. To do this we go to “App Settings”> “Visual Aspect”> “Colors”. Here we can customize the colors of the kiosk and the top menu bar to suit our needs.

First of all, you must have the free “480i Viewer” app installed on your tablet or smartphone. This App is necessary to be able to preview your App projects on your own tablet or smartphone. To do this, access from your smartphone or tablet to the App Store or Google Play and search for «480i Viewer».

 

Now, at 480interactive, click on “Export App” on the left side of the top menu bar and then open the App 480i Viewer on your device.

Once the export process is finished, a window will open showing the steps to follow from your device. Follow the directions:

 

  1. The App is automatically added to 480i Viewer so you can try it out.
  2. In 480i Viewer, click the “Download” button in the publication. Doing so will become a “View / Open” button.
  3. Click on “View / Open” to open your application and access its contents.

 

Congratulations! You already have the app on your device, now you can see what’s left on your smartphone or tablet.