Android Question Refresh WebPage (for example Google Map) without white screen in middle...

Magma · Sep 20, 2013

Hi there,

i want for example see live tracking of my car in Google Maps... but don't have white screen in the middle (refreshing page - from blank)... I was hope if having two (2) webviews and checking progress will pass this problem - but the problem stills...

See my code if you can help me:

B4X:

Sub Process_Globals
    'These global variables will be declared once when the application starts.
    'These variables can be accessed from all modules.
    Dim Timer3 As Timer
End Sub
 
Sub Globals
    'These global variables will be redeclared each time the activity is created.
    'These variables can only be accessed from this module.
 
    Dim WebView1 As WebView
    Dim WebView2 As WebView
    Dim w As Long
    Dim SeekBar1 As SeekBar
    Dim Button1 As Button
    Dim PosLat, PosLong As List
    Dim lat As Float
    Dim lng As Float
    Dim WebViewExtras1 As WebViewExtras
    Dim WebViewExtras2 As WebViewExtras
  
End Sub
 
Sub Activity_Create(FirstTime As Boolean)
    'Do not forget to load the layout file created with the visual designer. For example:
    Activity.LoadLayout("showatmap")
    WebView1.Left =0
    WebView1.Top = 0
    WebView1.Width = 100%x
    WebView1.Height = 100%y - Button1.Height
    WebView2.Left =0
    WebView2.Top = 0
    WebView2.Width = 100%x
    WebView2.Height = 100%y - Button1.Height
    Button1.Top = WebView1.Height
    Button1.Left = 50%x
    Button1.Width = 50%x
    SeekBar1.Left = 0
    SeekBar1.Top = WebView1.Height
    SeekBar1.Width = 50%x
  
    If Main.lbllat.Trim = "" OR Main.lblLat.Trim="0" OR Main.lbllon.Trim = "" OR Main.lblLon.Trim="0" Then
    Msgbox("Not having Lat and Long from GPS - check your GPS!","Προσοχή!")
    ExitApplication
    End If
  
    
      WebViewExtras1.addWebChromeClient(WebView1, "WebViewExtras1")  
    WebViewExtras2.addWebChromeClient(WebView2, "WebViewExtras2")  
 
    PosLat.Initialize
    PosLong.Initialize
  
    PosLat.clear
    PosLong.clear
    lat=Main.lblLat
    lng=Main.lbllon
    PosLat.Add(lat)
    PosLong.Add(lng)
 
    ShowMap(lat, lng, SeekBar1.Value, False, False, False, "TOP_LEFT", True, PosLat, PosLong, True, False, "#ff0000", 0.5, 3)
    w=1
 
    Timer3.Initialize("Timer3",5000)
    Timer3.Enabled = True  
 
End Sub
 
Sub Activity_Resume
 
End Sub
 
Sub Activity_Pause (UserClosed As Boolean)
 
End Sub
 
 
Sub Button1_Click
    ExitApplication
End Sub
 
Sub ShowMap(CenterLat As Float, CenterLong As Float, Zoom As Int, MapTypeControl As Boolean, DispZoomControl As Boolean, DispScaleControl As Boolean, ScaleControlPosition As String, DispMarkerCenter As Boolean, MarkerLat As List, MarkerLong As List, DispMarkers As Boolean, DispPolyline As Boolean, PolyLineColor As String, PolyLineOpacity As Float, PolyLineWidth As Int)
    ' CenterLat        = latitude of map center in degrees
    ' CenterLong      = longitude of map center in degrees
    ' Zoom            = zomm index  0 - 21
    ' MapTypeControl  = true displays the map type control
    ' DispZoomControl  = true displays the zoom control otherwise false
    ' ScaleControl    = true displays the zoom control otherwise false
    ' ScaleControlPosition  = position of the scale control TOP_LEFT, TOP_CENTER, TOP_RIGHT, LEFT_CENTER, RIGHT_CENTER, BOTTOM_LEFT, BOTTOM_CENTER, BOTTOM_RIGHT
    ' DispMarkerCenter = true sets a marker on the center of the map
    ' MarkerLat            = List of lat  positions of the markers
    ' MarkerLong            = List of long positions of the markers
    ' DipsMarkers          = true displays the markers
    ' DispPolyline        = true displays a polyline with the markers as vertices
    ' PolyLineColor    = polyline color hexadecimal  #ff0000 = red  #00ff00 = green  #0000ff = blue
    ' PolyLineOpacity  = polyline opacity  0.0  transparent  1.0 full opaque
    ' PolyLineWidth    = polyline width in pixels
  
    Dim HtmlCode As String
    Dim i, j As Int
  
    HtmlCode = "<!DOCTYPE html><html><head><meta name='viewport' content='initial-scale=1.0, user-scalable=no' /><style type='text/css'>  html { height: 100% }  body { height: 100%; margin: 0px; padding: 0px }#map_canvas { height: 100% }</style><script type='text/javascript' src='http://maps.google.com/maps/api/js?sensor=true'></script><script type='text/javascript'> function initialize() {var latlng = new google.maps.LatLng(" & CenterLat & "," & CenterLong & "); var myOptions = { zoom: "&Zoom&", center: latlng, disableDefaultUI: true, zoomControl: "& DispZoomControl & ", scaleControl: "& DispScaleControl & ", scaleControlOptions: {position: google.maps.ControlPosition." & ScaleControlPosition & "}, mapTypeControl: "& MapTypeControl& ", mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById('map_canvas'),  myOptions)"
 
    ' displays a marker on the map center
    If DispMarkerCenter = True Then  
        HtmlCode = HtmlCode & "; var markerc = new google.maps.Marker({    position: new google.maps.LatLng(" & CenterLat & "," & CenterLong & "),map: map, title: '',clickable: false,icon: 'http://www.google.com/mapfiles/arrow.png' })"
    End If
  
    ' displays markers on the map
    If MarkerLat.Size>0 AND DispMarkers = True Then
        j = MarkerLat.Size - 1
        If j = 0 Then
            HtmlCode = HtmlCode & "; var marker" & i & " = new google.maps.Marker({    position: new google.maps.LatLng(" & MarkerLat.Get(i) & "," & MarkerLong.Get(i) & "),map: map, title: 'Test" & i & "',clickable: true, draggable: true, icon: 'http://www.google.com/mapfiles/marker_red.png' })"
'            HtmlCode = HtmlCode & "; google.maps.event.addListener(marker" & i & ", 'click', function() {alert('Marker1')} )"
        Else If j = 1 Then
            HtmlCode = HtmlCode & "; var marker" & i & " = new google.maps.Marker({    position: new google.maps.LatLng(" & MarkerLat.Get(i) & "," & MarkerLong.Get(i) & "),map: map, title: 'Test" & i & "',clickable: true, draggable: true, icon: 'http://www.google.com/mapfiles/marker_green.png' })"
'            HtmlCode = HtmlCode & "; google.maps.event.addListener(marker" & i & ", 'click', function() {map.set_center(marker" & i & ")} )"
            HtmlCode = HtmlCode & "; var marker" & i & " = new google.maps.Marker({    position: new google.maps.LatLng(" & MarkerLat.Get(i) & "," & MarkerLong.Get(i) & "),map: map, title: 'Test" & i & "',clickable: true, draggable: true, icon: 'http://www.google.com/mapfiles/marker.png' })"
'            HtmlCode = HtmlCode & "; google.maps.event.addListener(marker" & i & ", 'click', function() {map.set_center(marker" & i & ")} )"
        Else
            HtmlCode = HtmlCode & "; var marker0 = new google.maps.Marker({    position: new google.maps.LatLng(" & MarkerLat.Get(i) & "," & MarkerLong.Get(i) & "),map: map, title: 'Test0',clickable: true, draggable: true, icon: 'http://www.google.com/mapfiles/marker_greenA.png' })"
'            HtmlCode = HtmlCode & "; google.maps.event.addListener(marker0, 'click', function() {alert('Marker0')} )"
            For i = 1 To j - 1 ' diplays the markers
                HtmlCode = HtmlCode & "; var marker" & i & " = new google.maps.Marker({    position: new google.maps.LatLng(" & MarkerLat.Get(i) & "," & MarkerLong.Get(i) & "),map: map, title: 'Test" & i & "',clickable: true, draggable: true, icon: 'http://www.google.com/mapfiles/marker_orange" & Chr(i + 65) & ".png' })"
'                HtmlCode = HtmlCode & "; google.maps.event.addListener(marker" & i & ", 'click', function() {map.set_center(marker" & i & ")} )"
            Next
            HtmlCode = HtmlCode & "; var marker" & (j) & " = new google.maps.Marker({    position: new google.maps.LatLng(" & MarkerLat.Get(j) & "," & MarkerLong.Get(j) & "),map: map, title: 'Test" & j & "',clickable: true, draggable: true, icon: 'http://www.google.com/mapfiles/marker" & Chr(j + 65) & ".png' })"
'            HtmlCode = HtmlCode & "; google.maps.event.addListener(marker" & i & ", 'click', function() {map.set_center(marker" & i & ")} )"
        End If
      
    ' displays a polyline between the markers
        If DispPolyline = True AND j > 0 Then
            HtmlCode = HtmlCode & "; var points = ["
            HtmlCode = HtmlCode & " new google.maps.LatLng(" & MarkerLat.Get(0) & "," & MarkerLong.Get(0) & ")"
            For i=1 To j
                HtmlCode = HtmlCode & ", new google.maps.LatLng(" & MarkerLat.Get(i) & "," & MarkerLong.Get(i) & ")"
            Next
            HtmlCode = HtmlCode & "] "
            HtmlCode = HtmlCode & "; var polyline = new google.maps.Polyline({path: points, strokeColor: '" & PolyLineColor & "', strokeOpacity: " & PolyLineOpacity & ", strokeWeight: " & PolyLineWidth & "})"
            HtmlCode = HtmlCode & "; polyline.setMap(map)"
        End If
    End If
    HtmlCode = HtmlCode & "; }</script></head><body onload='initialize()'>  <div id='map_canvas' style='width:100%; height:100%'></div></body></html>"
 
If w=0 Then
    WebView1.LoadHtml(HtmlCode)
    Else
    WebView2.LoadHtml(HtmlCode)
End If  
End Sub
Sub Timer3_Tick
Timer3.Enabled = False
    PosLat.Initialize
    PosLong.Initialize
  
    PosLat.clear
    PosLong.clear
  
    lat=Main.lblLat
    lng=Main.lbllon
    PosLat.Add(lat)
    PosLong.Add(lng)
 
    ShowMap(lat, lng, SeekBar1.Value, False, False, False, "TOP_LEFT", True, PosLat, PosLong, True, False, "#ff0000", 0.5, 3)
'Timer3.Enabled = True
End Sub
 
Sub WebViewExtras1_ProgressChanged(NewProgress As Int)
  '  NewProgress is Current page loading progress, represented by an integer between 0 and 100.
  If NewProgress=100 Then
    WebView2.Visible = False
    WebView1.Visible = True
    w=1
    Timer3.Enabled = True
  End If
End Sub
 
Sub WebViewExtras2_ProgressChanged(NewProgress As Int)
  '  NewProgress is Current page loading progress, represented by an integer between 0 and 100.
  If NewProgress=100 Then
    WebView1.Visible = False
    WebView2.Visible = True
    w=0
    Timer3.Enabled = True
  End If
End Sub

Erel · Sep 20, 2013

What is the result of this code? The loading WebView is only visible when the page is complete, no?

Magma · Sep 20, 2013

No.. First screen gets white and the slowly shows map.... :-(

warwound · Sep 20, 2013

You ought to use the javascript Google Map API.
You'd load a webpage containing the map only once and then use javascript to draw and update the positions of features on the map.

It's not a complicated APi to learn the basics of and there's loads of examples available to learn from.

Why don't you use the b4a GoogleMaps library - it'd be much easier and also look much more 'professional'?

Martin.

Magma · Sep 20, 2013

i don't want to use API because there are limits about keys and the use... i want every user of this application have it's own way...

Do you have any idea using webview without getting white screen in the middle of refresh...

warwound · Sep 20, 2013

Magma said:
Do you have any idea using webview without getting white screen in the middle of refresh...

You can't reload a webpage in a WebView without some sort of flicker as the old page unloads and the new page loads.

Why not use b4a GoogleMaps library or b4a OSMDroid library?
(Use the right tools for the job).

Martin.

Magma · Sep 20, 2013

because as i said they need api key... and i don;t want have limits...

warwound · Sep 20, 2013

OSMDroid needs absolutely no API key: http://www.b4x.com/android/forum/threads/osmdroid-mapview-for-b4a-tutorial.16310/

Martin.

Magma · Sep 20, 2013

working at android 2 version ?

warwound · Sep 20, 2013

Magma said:
working at android 2 version ?

Yes, i'm not sure what the minimum supported version of android is though.
You can read more about OSMDroid here: http://code.google.com/p/osmdroid/.

Martin.

Magma · Sep 20, 2013

If it so simple can you make an example...

Give lat and long and zoom level from user, add more than one marker with info text, and show at screen...
and refresh at 5 secs...

That will not flicker ?

Magma · Sep 20, 2013

warwound said:
Yes, i'm not sure what the minimum supported version of android is though.
You can read more about OSMDroid here: http://code.google.com/p/osmdroid/.

Martin.

Just tried but getting only boxes... screen...

my code is:

B4X:

Sub Process_Globals
    'These global variables will be declared once when the application starts.
    'These variables can be accessed from all modules.
    Dim Timer3 As Timer
 
    Dim TileSource As String
    Dim ZoomLevel As Int
      Dim MapCenter As GeoPoint   
   
    Dim Marker1 As Marker
    Dim speed As Int
    Dim Markers As List
 
End Sub
 
Sub Globals
    'These global variables will be redeclared each time the activity is created.
    'These variables can only be accessed from this module.
 
    Dim SeekBar1 As SeekBar
    Dim Button1 As Button
 
   
    Dim MapView1 As MapView
    Dim MarkersOverlay1 As MarkersOverlay
    Dim TileSourceSpinner As Spinner
 
 
End Sub
 
Sub Activity_Create(FirstTime As Boolean)
    'Do not forget to load the layout file created with the visual designer. For example:
    Activity.LoadLayout("showatmap")
 
    Button1.Top = 100%x-Button1.Height
    Button1.Left = 50%x
    Button1.Width = 50%x
    SeekBar1.Left = 0
    SeekBar1.Top = Button1.top
    SeekBar1.Width = 50%x
     
    MapView1.Initialize("")
      Activity.AddView(MapView1, 0, 0, 100%x, 100%y)   
    MapView1.SendToBack
   
    If Main.lbllat.Trim = "" OR Main.lblLat.Trim="0" OR Main.lbllon.Trim = "" OR Main.lblLon.Trim="0" Then
    Msgbox("no lat and long point...","caution!")
    ExitApplication
    End If
 
    ZoomLevel=14
  MapView1.SetTileSource("Mapnik")   
   
  MapView1.SetZoomEnabled(True)
 
  '  enable the built in multi touch controller - the map can now be 'pinch zoomed'
  MapView1.SetMultiTouchEnabled(True)
 
 
  MarkersOverlay1.Initialize(MapView1, "MarkersOverlay1")
  MapView1.AddOverlay(MarkersOverlay1)
 
 
  speed = Main.lblSpeed * 3.6
  Marker1.Initialize(Main.carid, "Speed: " &  speed & "klm/h", Main.lblLat, Main.lblLon , Null)
 
  Markers.Initialize2(Array As Object(Marker1))      '  this is the new code
 
  MarkersOverlay1.AddMarkers(Markers)
 
  If FirstTime Then
      TileSource="Mapnik"
     
        ' fit the MapView To the MarkersOverlay
      MapView1.FitMapToBoundingBox(MarkersOverlay1.GetBoundingBox)
  Else
      '  restore saved zoom level and map center
      MapView1.Zoom=ZoomLevel
    MapView1.SetCenter3(MapCenter)
  End If
 
 
    Timer3.Initialize("Timer3",5000)
    Timer3.Enabled = True   
 
 
 
End Sub
 
Sub Activity_Resume
 
End Sub
 
Sub Activity_Pause (UserClosed As Boolean)
 
End Sub
 
 
Sub Button1_Click
    ExitApplication
End Sub
 
 
Sub Timer3_Tick
Timer3.Enabled = False
 
    MarkersOverlay1.RemoveMarkers
 
 
  speed = Main.lblSpeed * 3.6
  Marker1.Initialize(Main.carid, "Speed: " &  speed & "klm/h", Main.lblLat, Main.lblLon , Null)
 
  Markers.Initialize2(Array As Object(Marker1))   
 
  MarkersOverlay1.AddMarkers(Markers)
 
  MapView1.AnimateTo (Main.lblLat, Main.lblLon)
 
 
Timer3.Enabled = True
End Sub
 
 
 
Sub MarkersOverlay1_LongClick(Title As String, Description As String, Point As GeoPoint)
  'Log("MarkersOverlay1_LongClick")
  ToastMessageShow(Title&": Latitude="&Point.Latitude&", Longitude="&Point.Longitude, True)
 
  '  zoom the map in and center (with animation) on the LongClicked Marker
  MapView1.Zoom=MapView1.GetMaxZoomLevel-1
  MapView1.AnimateTo3(Point)
End Sub
 
Sub TileSourceSelect_ItemClick (Position As Int, Value As Object)
  MapView1.SetTileSource(Value)
End Sub

Magma · Sep 20, 2013

just made...

all cool ! thank you again!

Android Question Refresh WebPage (for example Google Map) without white screen in middle...

Magma

Expert

Erel

B4X founder

Magma

Expert

warwound

Expert

Magma

Expert

warwound

Expert

Magma

Expert

warwound

Expert

Magma

Expert

warwound

Expert

Magma

Expert

Magma

Expert

Magma

Expert