Hello
Can we implement web technologies like html css JavaScript and others which the help of cross platform development tools ? If so how can we do ? As am fresher to corona SDK.
Sure, you’d just add a webview to your application that takes up the full screen, then add your html, js, and css files to your project folder.
https://docs.coronalabs.com/api/library/native/newWebView.html
webView:request( “localfile.html”, system.ResourceDirectory )
Dave
Which means we need to paste the entire html file folder that I have created inside to the project folder and then to do link it thro the local.we view ???
Can you please elaborate it with more details .?? Is their any example source code ?
Here is the guts of a composer scene where I’m using a native.newWebView() to show a Google Map overlaid with a Weather Underground radar image. I need to dynamically pass my latitude and longitude to the HTML, so I use Lua to write out the HTML on the fly and link to it. Since this scene is only the webView, I don’t create anything in scene:create(). Native objects are best created in scene:show();
local header = [[\<!DOCTYPE html\> \<html\> \<head\> \<title\>Google Maps JavaScript API v3 Example: Map Simple\</title\> \<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"\> \<meta charset="utf-8"\> \<style\> html, body, #map\_canvas { margin: 0; padding: 0; height: 100%; } \</style\> \<script src="https://maps.googleapis.com/maps/api/js?key=yourgooglemapapikey"\>\</script\> \<script\> var map; var radarOverlay; var mapBounds; var API\_calls = 0; var rateLimitTimer;]] local body = [[function initialize() { var myLatLong = new google.maps.LatLng(latitude, longitude); var mapOptions = { zoom: 8, center: myLatLong, mapTypeId: google.maps.MapTypeId.ROADMAP, zoomControl: false, scaleControl: false, panControl: false, streetViewControl: false, overviewMapContro: false }; map = new google.maps.Map(document.getElementById('map\_canvas'), mapOptions); google.maps.event.addListener(map, 'idle', function() { API\_calls++; if (API\_calls \> 9) { // rate limit return(true); } var center = map.getCenter(); var bounds = map.getBounds(); var zoom = map.getZoom(); ne = bounds.getNorthEast(); sw = bounds.getSouthWest(); var URL = 'http://api.wunderground.com/api/yourAPIKey/animatedradar/image.gif?num=5&delay=50&maxlat=' + ne.lat() + '&maxlon=' + sw.lng() + '&minlat=' + sw.lat() + '&minlon=' + ne.lng() + '&width=' + screenWidth + '&height=' + screenHeight + '&rainsnow=1&smooth=1&noclutter=1'; if (radarOverlay) { radarOverlay.setMap(null); } radarOverlay = new google.maps.GroundOverlay( URL, bounds ); radarOverlay.setMap(map); }); rateLimitTimer = setInterval(function () { API\_calls--; if (API\_calls \< 0) { API\_calls = 0; } }, 15000); } google.maps.event.addDomListener(window, 'load', initialize); \</script\> \</head\> \<body\> \<div id="map\_canvas"\>\</div\> \</body\> \</html\>]] local params local webView local function radarListener( event ) scene.view:insert( event.target ) end -- -- Start the composer event handlers -- function scene:create( event ) local sceneGroup = self.view params = event.params -- -- setup a page background, really not that important though composer -- crashes out if there isn't a display object in the view. -- end function scene:show( event ) local sceneGroup = self.view params = event.params if event.phase == "will" then local path = system.pathForFile( "radar.html" , system.TemporaryDirectory ) local fp = io.open( path, "w" ) if fp then fp:write(header) fp:write("var latitude = " .. tostring(myData.latitude) .. ";\n") fp:write("var longitude = " .. tostring(myData.longitude) .. ";\n") fp:write("var screenWidth = " .. tostring( display.contentWidth) .. ";\n") fp:write("var screenHeight = " .. tostring( display.contentHeight - 50) .. ";\n") fp:write(body) fp:close() end else webView = native.newWebView( display.contentCenterX, display.contentCenterY - 25, display.contentWidth, display.contentHeight - 50 ) local path = system.pathForFile( "radar.html" , system.TemporaryDirectory ) local fp = io.open( path, "r" ) if fp then fp:close(); webView:request( "radar.html", system.TemporaryDirectory ) else webView:request( "radar.html", system.ResourceDirectory ) end end end
As a backup I have a copy of the radar.html in the folder with main.lua for a generic location in case I can’t read the file I just wrote.
Rob
Sure, you’d just add a webview to your application that takes up the full screen, then add your html, js, and css files to your project folder.
https://docs.coronalabs.com/api/library/native/newWebView.html
webView:request( “localfile.html”, system.ResourceDirectory )
Dave
Which means we need to paste the entire html file folder that I have created inside to the project folder and then to do link it thro the local.we view ???
Can you please elaborate it with more details .?? Is their any example source code ?
Here is the guts of a composer scene where I’m using a native.newWebView() to show a Google Map overlaid with a Weather Underground radar image. I need to dynamically pass my latitude and longitude to the HTML, so I use Lua to write out the HTML on the fly and link to it. Since this scene is only the webView, I don’t create anything in scene:create(). Native objects are best created in scene:show();
local header = [[\<!DOCTYPE html\> \<html\> \<head\> \<title\>Google Maps JavaScript API v3 Example: Map Simple\</title\> \<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"\> \<meta charset="utf-8"\> \<style\> html, body, #map\_canvas { margin: 0; padding: 0; height: 100%; } \</style\> \<script src="https://maps.googleapis.com/maps/api/js?key=yourgooglemapapikey"\>\</script\> \<script\> var map; var radarOverlay; var mapBounds; var API\_calls = 0; var rateLimitTimer;]] local body = [[function initialize() { var myLatLong = new google.maps.LatLng(latitude, longitude); var mapOptions = { zoom: 8, center: myLatLong, mapTypeId: google.maps.MapTypeId.ROADMAP, zoomControl: false, scaleControl: false, panControl: false, streetViewControl: false, overviewMapContro: false }; map = new google.maps.Map(document.getElementById('map\_canvas'), mapOptions); google.maps.event.addListener(map, 'idle', function() { API\_calls++; if (API\_calls \> 9) { // rate limit return(true); } var center = map.getCenter(); var bounds = map.getBounds(); var zoom = map.getZoom(); ne = bounds.getNorthEast(); sw = bounds.getSouthWest(); var URL = 'http://api.wunderground.com/api/yourAPIKey/animatedradar/image.gif?num=5&delay=50&maxlat=' + ne.lat() + '&maxlon=' + sw.lng() + '&minlat=' + sw.lat() + '&minlon=' + ne.lng() + '&width=' + screenWidth + '&height=' + screenHeight + '&rainsnow=1&smooth=1&noclutter=1'; if (radarOverlay) { radarOverlay.setMap(null); } radarOverlay = new google.maps.GroundOverlay( URL, bounds ); radarOverlay.setMap(map); }); rateLimitTimer = setInterval(function () { API\_calls--; if (API\_calls \< 0) { API\_calls = 0; } }, 15000); } google.maps.event.addDomListener(window, 'load', initialize); \</script\> \</head\> \<body\> \<div id="map\_canvas"\>\</div\> \</body\> \</html\>]] local params local webView local function radarListener( event ) scene.view:insert( event.target ) end -- -- Start the composer event handlers -- function scene:create( event ) local sceneGroup = self.view params = event.params -- -- setup a page background, really not that important though composer -- crashes out if there isn't a display object in the view. -- end function scene:show( event ) local sceneGroup = self.view params = event.params if event.phase == "will" then local path = system.pathForFile( "radar.html" , system.TemporaryDirectory ) local fp = io.open( path, "w" ) if fp then fp:write(header) fp:write("var latitude = " .. tostring(myData.latitude) .. ";\n") fp:write("var longitude = " .. tostring(myData.longitude) .. ";\n") fp:write("var screenWidth = " .. tostring( display.contentWidth) .. ";\n") fp:write("var screenHeight = " .. tostring( display.contentHeight - 50) .. ";\n") fp:write(body) fp:close() end else webView = native.newWebView( display.contentCenterX, display.contentCenterY - 25, display.contentWidth, display.contentHeight - 50 ) local path = system.pathForFile( "radar.html" , system.TemporaryDirectory ) local fp = io.open( path, "r" ) if fp then fp:close(); webView:request( "radar.html", system.TemporaryDirectory ) else webView:request( "radar.html", system.ResourceDirectory ) end end end
As a backup I have a copy of the radar.html in the folder with main.lua for a generic location in case I can’t read the file I just wrote.
Rob