Voting: 
Vote up!
1 Votes
11 Replies
Answered

Gif or video in form

Question asked by dragos.triteanu on Feb 21, 2016 15:20 EST

Hello Kony, I am currently developing an application for the mobile android and android channels, and I would want to embed either a .gif file or a .mp4 file on a form. Could you please suggest the propper approach for doing this? Should I create a custom widget for doing this? If that is the case, could you maybe provide an example? Should I create separate activity/view in languages and include them via FFI?   Cheers, Dragos

Vote up!
1 votes
Vote down!

Hi Dragos,

Thank you for contacting Kony.

We understand you would like to embed .gif and .mp4 files in your application.

You can use browser widget for embedding these files.

Kindly go through the link given below for more information on this widget.

Link: http://docs.kony.com/konylibrary/studio/kony_widget_user_guide/Default.htm#Browser.htm%3FTocPath%3DBrowser|_____0

Thank you
Rashmi

Replied by: Feb 22, 2016 05:34 EST
Gold
Vote up!
0 votes
Vote down!

Hello Rashmi,

Thank you for the answer. I wanted to aks if it is possible to load resources inside the browser widget from within the application's resource bundle? I mean that I do not want to host the files somewhere remotely, and retrieve them in the browser widget using an internet connection.

Is this possible to specify an internal resource/file name of type .gif/.mp4 in the browser widget?

 

Thank you!

Replied by: Feb 22, 2016 11:07 EST
Vote up!
0 votes
Vote down!

As I have read, I can see that the kony browser widget has a loadData function that can load rawBytes from files.This in conjunction with the File API can get me what I need.

The thing I am not able to do is access the resource files using the File API.

For example, I have a file named mainreveal.mp4. I have tried to access it like:

kony.io.FileSystem.getFile("mainreveal.mp4") or

kony.io.FileSystem.getFile(kony.io.FileSystem.getApplicationDirectoryPath() + "mainreveal.mp4") or

kony.io.FileSystem.getFile(kony.io.FileSystem.getApplicationDirectoryPath() + "/mainreveal.mp4")

How can I correctly locate the file?

Replied by: Feb 22, 2016 15:45 EST
Vote up!
0 votes
Vote down!

I am also in need of displaying a video/PDF file from the application bundle. So, please let me know the solution.

Regards,

Kanakadurgarao

Replied by: Feb 23, 2016 03:03 EST
Vote up!
0 votes
Vote down!

Hello guys,

I have tried a few approaches to load the gif file in the browser widget, and I don't seem to be able to do this. I've tried each of the folowing approaches sepparately, and this is really frustrating. :*(

This is my initialize method for my intro form:

IntroForm.prototype.initialize = function () {

var THIS = this;

var fileName = "mainreveal.gif";

var dataConfig = {"mimeType": "image/gif"};

//APPROACH 1 (an Image2 with zindex 1 placed underneath browser, and tried to retrieve image)

    FrmIntro.imgLogo.src = fileName;

    FrmIntro.logoBrowser.loadData(FrmIntro.imgLogo.rawBytes, dataConfig);

//APPROACH 2 (Loading image as HTML string. This fails cause the browser cannot find mainreveal.gif)

   FrmIntro.logoBrowser.htmlString = "<html> <head> </head> <body> <img src=\"mainreveal.gif\" alt=\"Smiley face\" /> </body></html>";

//APPROACH 3 (Loading file from file system. As i have opened up a KonyApp.app, I see that the mainreveal.gif is in the main path. I tried //to retrieve it as 'mainreveal.gif' or '/mainreveal.gif' ,  and had no success).

var file = kony.io.FileSystem.getFile(fileName);

FrmIntro.logoBrowser.loadData(file.read(), dataConfig);

};

The file is currently places in :

resources/commons/mainreveal.gif

resources/mobile/mainreveal.gif

resources/mobile/native/iphone/mainreveal.gif

resources/mobile/native/android/mainreveal.gif

 

Could you maybe provide a sample application for loading up a .gif file inside an application form, as for example a main intro for the app?

 

Thanks! 
                     

 

Replied by: Feb 24, 2016 15:37 EST
Vote up!
0 votes
Vote down!

Hey there,

Since you guys seem a bit busy, I've still exhausted every option possible.

I think that the only way this can be done is via FFI. Please correct me if I'm wrong.

Regarding this, could you also provide me with the location of the resource files on the phone? I mean, even with FFI, I still need a path in order to find my file, so that I may load it in the browser.

 

Replied by: Feb 25, 2016 16:35 EST
Vote up!
0 votes
Vote down!

Hi Dregos,

Thank you for contacting Kony.

As discussed before, you can access the gif/mp4 files using Browser widget. The property you will need is 'htmlString'.
You can give a simple HTML code in this to access your files.

Link: http://docs.kony.com/konylibrary/studio/kony_widget_user_guide/Default.htm#Browser_Basic_Properties.htm#htmlString%3FTocPath%3DBrowser|Basic%2520Properties|_____4

However, please do note that the browser widget needs to be a screenlevelwidget and the file will open in another browser.

For embedding the files, you will need to use FFI (as you had stated). The file can be anywhere and using the code in the FFI you can access them.
They can be in a server or in a system. Please do note that you need to give the correct path to access these files. They need not be in the resource folder.

Hope to have answered your query.

Thank you
Rashmi

Replied by: Feb 26, 2016 07:51 EST
Gold
Vote up!
0 votes
Vote down!

Hello Rashmi,

I'm affraid that you have lost me with the last reply.

I am to use FFI in order to load a file from the phone, but how can I use the file, or the rawBytes with htmlString?

I see that the browser has a loadData function that takes in rawBytes, maybe this should be used.

Another thing that is unclear to me, is finding the exact path of the file using FFI.

Are you sure that htmlString should be used?

Cheers,

Dragos

Replied by: Feb 27, 2016 02:35 EST
Vote up!
1 votes
Vote down!

Hi Dragos,

Apologies for causing any confusion.

In my earlier update we have provided 2 options for you.

First one, is by using the htmlString property in Browser widget. You can define a small HTML code in which you can use HTML to access the URL/folder path containing the video file.
The problem with this is you will get out of your application and the video will be shown on a browser when the widget is clicked. The browser widget also needs to be a screenlevelwidget and you will have to keep all the other widgets in the header and footer of the form.

Second one, is as you said using an FFI. There is no specific folder where you need to keep the files. You will just need to give the correct file path in the FFI code to access this file.

Hope to have answered your query.

Thank you
Rashmi

Replied by: Feb 29, 2016 06:10 EST
Gold
Vote up!
1 votes
Vote down!

Thank you very much for your answer,

I have managed to use the html5 video tag in order to load my animation.

The problem I now face, is that the mobile controls automatically appear if the mobile phone opens a html5 video(even if the controls are switched off). Is there any way to mask this? 

Another issue is that the video does not start immediatelly on the phone, but a big play button appears.When I click it, the controls appear. Can I somehow hide this from the app?

My html string is:

<!DOCTYPE html><html> <head> <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"> </head> <body> <video id=\"animation\" autoplay=\"autoplay\"> <source src=\"mainreveal.mp4\" type=\"video/mp4\"> </video> </body> <style> video { width: 100% !important; height: auto !important;}</style> <script> var video = document.getElementById(\"animation\"); video.control = false; </script></html>

As I see, .gif files remain stuck at the first frame, so those are not a solution.

Is there some easy way I can create an animation using the browser widget, so that it is seemless to the user? (no video controls, or stucking)

 

Cheers,

Dragos

 

 

 

Replied by: Mar 23, 2016 15:42 EDT
Vote up!
0 votes
Vote down!

I have also found this topic:

http://stackoverflow.com/questions/12496144/can-you-autoplay-html5-videos-on-the-ipad

Is there any other way I can do this besides loading an mp4 in the browser widget?

Cheers,

Replied by: Mar 23, 2016 16:09 EDT