How to add loading screen in a webapp

dassoubarna · July 3, 2016, 9:02pm

I created a webapp following the tutorial from the link below.

http://code.tutsplus.com/tutorials/corona-sdk-creating-an-in-app-web-view–mobile-3301

Now I want to add a loading screen before the website loaded. But I don’t figure out how to do that. I tried several codes but all in vain.

There is another problem with the application it shows white space(like a band or ribbon) up and down when the site is loaded. The size of the ribbon varies depending on the screen size. Is there any way to load the site in full screen irrespective of the screen size?

My App is here:

https://www.mediafire.com/?aw02j29bc290wg9

Scott_Harrison · July 4, 2016, 5:02pm

On the ribbon, are you seeing this on simulator or device. On simulator this is just the way macs webview work. On the custom loading screen you would have to add an event listener to the webview once is loads put it on screen. Once you are loading a webpage you have to put the webview off screen because it is native.

dassoubarna · July 4, 2016, 7:31pm

Thanks for the reply. The ribbon appears in the device.
To add event listener for the loading screen do you have any tutorial or code reference for that?

Scott_Harrison · July 4, 2016, 7:41pm

Can you post a pic of the ribbon?
Here is a code example I found
https://gist.github.com/walterlua/3937293

dassoubarna · July 5, 2016, 6:45am

You may see the ribbon in top and bottom position. Those screen shots are taken in a 5inch screen.

Scott_Harrison · July 5, 2016, 6:49am

you probably need to set width and height to actual content height and width

dassoubarna · July 5, 2016, 6:50am

The full code:

-- Hide Status Bar display.setStatusBar(display.HiddenStatusBar) -- Background local background = display.newImage("background.png") -- Logo local logo = display.newImage("logo.png", 160, 115) -- Text local aboutText = display.newText("", 0, 0, "times.ttf", 16) --aboutText:setReferencePoint(display.CenterReferencePoint) aboutText.x = display.contentWidth \* 0.5 aboutText.y = display.contentHeight \* 0.5 - 260 aboutText:setTextColor(0, 0, 0) -- #EEEEEE aboutText.text = "" local aboutText2 = display.newText("", 0, 0, "freescpt.ttf", 100) --aboutText2:setReferencePoint(display.CenterReferencePoint) aboutText2.x = display.contentWidth \* 0.5 aboutText2.y = aboutText.y + 140 aboutText2:setTextColor(0, 0, 0) -- #EEEEEE aboutText2.text = "" local aboutText3 = display.newText("", 0, 0, "calist.ttf", 25) --aboutText2:setReferencePoint(display.CenterReferencePoint) aboutText3.x = display.contentWidth \* 0.5 + 40 aboutText3.y = aboutText2.y + 45 aboutText3:setTextColor(0, 0, 0) -- #EEEEEE aboutText3.text = "" local aboutText4 = display.newText("", 0, 0, "bookos.ttf", 15) --aboutText2:setReferencePoint(display.CenterReferencePoint) aboutText4.x = display.contentWidth \* 0.5 aboutText4.y = aboutText3.y + 28 aboutText4:setTextColor(0, 0, 0) -- #EEEEEE aboutText4.text = "" &nbsp;--Bottom bar local bottomBar = display.newImage("bottomBar.png", 160, 500) bottomBar.isVisible = false -- Back button local back = display.newImage("backButton.png", 290, 500) back.isVisible = false --Back function function back:tap(e) bottomBar.isVisible = false back.isVisible = false native.cancelWebPopup() end back:addEventListener("tap", back) local loadingText = display.newText("", 0, 0, "times.ttf", 16) --aboutText:setReferencePoint(display.CenterReferencePoint) loadingText.x = display.contentWidth \* 0.5 loadingText.y = display.contentHeight \* 0.5 loadingText:setTextColor(0, 0, 0) -- #EEEEEE loadingText.text = "Loading..." loadingText.alpha=0 --- ---- local counter = 1 local images = {}&nbsp; local nImages = 8 for i = 1, nImages do local objects = {} objects[1] = {} objects[1].fileName = "1.png" objects[1].url = "http://gogols.in//product-category/fusion-sweets/" objects[1].name = "Fusion Sweets" objects[2] = {} objects[2].fileName = "2.png" objects[2].url = "http://gogols.in//product-category/sandesh/" objects[2].name = "Sandesh" objects[3] = {} objects[3].fileName = "3.png" objects[3].url = "http://gogols.in//product-category/rosogolla/" objects[3].name = "Rosogolla" objects[4] = {} objects[4].fileName = "4.png" objects[4].url = "http://gogols.in//product-category/mishti-doi/" objects[4].name = "Misti Doi" objects[5] = {} objects[5].fileName = "5.png" objects[5].url = "http://gogols.in//product-category/diabetic-store/" objects[5].name = "Diabetic Store" objects[6] = {} objects[6].fileName = "6.png" objects[6].url = "http://gogols.in//product-category/fried-sweets/" objects[6].name = "Fried Sweets" objects[7] = {} objects[7].fileName = "7.png" objects[7].url = "http://gogols.in//product-category/nectar-corner/" objects[7].name = "Nectar Corner" objects[8] = {} objects[8].fileName = "8.png" objects[8].url = "http://gogols.in//product-category/mewa-bites/" objects[8].name = "Mewa Bites" &nbsp;-- &nbsp; &nbsp; &nbsp; &nbsp; local img = display.newGroup() local str = i \<= 9 and i local t = display.newImage(objects[str].fileName) local sn = display.newText(objects[str].name, 0, 40, nil, 10) sn:setTextColor(0, 0, 0) img:insert(t) img:insert(sn) function t:tap(e) native.showWebPopup( objects[i].url ) -- Back button visibility --bottomBar.isVisible = false --back.isVisible = false end t:addEventListener("tap", t) -- img.counter = counter &nbsp; &nbsp; &nbsp; &nbsp; -- img.origWidth = img.width &nbsp; &nbsp; &nbsp; &nbsp; -- img.origHeight = img.height &nbsp; &nbsp; &nbsp; &nbsp; images[#images + 1] = img &nbsp; &nbsp; &nbsp; &nbsp; -- counter = counter + sectionSize -- placement in pairs array for I = 1, #images do if I \<= 4 then images[I].x = (70\*I)-15&nbsp; images[I].y = 250 else images[I].x = (70\*I)-295 images[I].y = 340 end end end local link = display.newText("", 0, 0, native.systemFontBold, 13) --link:setReferencePoint(display.CenterReferencePoint) link.x = display.contentWidth \* 0.5 link.y = aboutText4.y + 270 link:setTextColor(0, 0, 0) -- #E5AF06 link.text = "http://gogols.in" -- Go Button local goButton = display.newImage("order\_now\_button.png") --goButton:setReferencePoint(display.CenterReferencePoint) goButton.x = display.contentWidth \* 0.5 goButton.y = aboutText4.y + 235 -- Go Button Function function goButton:tap(e) native.showWebPopup("http://gogols.in/") -- Back button visibility bottomBar.isVisible = false back.isVisible = false end -- Listeners goButton:addEventListener("tap", goButton)

Scott_Harrison · July 5, 2016, 6:58am

local scale0= ((display.actualContentWidth- display.contentWidth)\*.5)\*-1 local scale0Y= ((display.actualContentHeight- display.contentHeight)\*.5)\*-1 native.showWebPopup( scale0, scale0Y, display.actualContentWidth, display.actualContentHeight ,"http://gogols.in/")

dassoubarna · July 5, 2016, 7:40pm

Thanks! It solves the problem of the ribbon. Now I am trying to add a loading screen. Can it be possible to add a gif image for loading screen after the “Order Now” button is clicked instead of the text?

Scott_Harrison · July 5, 2016, 7:46pm

You would have to use a Sprite sheet, corona does not support displaying gif( unless you use a webview)

dassoubarna · July 5, 2016, 10:05pm

Ok… I’ll try and thanks again for the help.

Scott_Harrison · July 4, 2016, 5:02pm