Android Question Pass value to JavaScript

KarlB · Jul 25, 2021

I need to pass a float to JavaScript for a Google Chart gauge. I'm porting code from MIT App Inventor that works perfectly. It uses getWebViewString() to pass a parameter. Is there a B4A equivalent? I searched everything I could think of but could find no example in the forum.

Thanks!

App Inventor Version:

<html>
  <head>
    <script src="loader.js"></script>

    <script>
                        
    var webString = 0;

    google.charts.load('current', {'packages':['gauge']});
    google.charts.setOnLoadCallback( drawChart );

    function drawChart() {
      
      var data = google.visualization.arrayToDataTable([
      ['Label', 'Value'],
      ['Vbat', webString]
      ]);
                            
      var options = {
        min: 30, max: 44,
        yellowFrom: 42, yellowTo: 44,
        redFrom: 30, redTo: 32,
        minorTicks: 2,
        majorTicks: ['30', '32', '34', '36', '38','40', '42', '44']
      };
                                
      var chart = new google.visualization.Gauge(document.getElementById('chart_div'));
                                
      chart.draw(data, options);

      setInterval(function() {
        webString = window.AppInventor.getWebViewString();       
        data.setValue(0, 1, webString );         
        chart.draw(data, options);
       }, 1000);
                                      
}
     </script>
   </head>
 
  <body>                                             
    <div id="chart_div" style="width: 170px; height: 175px;text-align: center;"></div>
  </body>
</html>

B4A Version:

<html>
  <head>
   <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
   <script type="text/javascript">
  
      var webString = 0;
      
      google.charts.load('current', {'packages':['gauge']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {

        var data = google.visualization.arrayToDataTable([
          ['Label', 'Value'],
          ['Watts', webString]
        ]);

      var options = {
        min: 0, max: 400,
        yellowFrom: 250, yellowTo: 350,
        redFrom: 350, redTo: 400,
        minorTicks: 5,
        majorTicks: ['0', '', '100', '', '200','', '300', '','400']
      };

        var chart = new google.visualization.Gauge(document.getElementById('chart_div'));

        chart.draw(data, options);

        setInterval(function() {
        [[[How to pass a value from B4A to webString here?]]]
          data.setValue(0, 1, webString);
          chart.draw(data, options);
        }, 3000);

      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 400px; height: 120px;"></div>
  </body>
</html>

B4A snipet:

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
End Sub

Sub Activity_Create(FirstTime As Boolean)

    Activity.LoadLayout("Main")               
    Chart = File.GetText(File.DirAssets, "onegauge.html")
    WebView1.LoadHtml(Chart)
End Sub

Erel · Jul 26, 2021

Better to use File.ReadString. This is the cross platform method.

WebViewExtra: Call B4A Sub from WebView

Hi All, Here with Attached simple project to demonstrate how to call B4A Sub in WebView using WebViewExtra (v1.42). I'm not play often with this lib, but found some interest on how B4A can interact with WebView via Javascript. The project will: - Load html from asset - Call Javascript...

www.b4x.com

KarlB · Jul 27, 2021

Thank. It works alone but when I add it to my app the gauge is replaced by a view of the JavaScript code.

<html>
<head>
<body>
<div id="chart_div"></div>
</body>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
var webString = 0;

function doCallBack(a) {
webString = a;
};

google.charts.load('current', {'packages':['gauge']});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
var data = google.visualization.arrayToDataTable([
['Label', 'Value'],
['Watts', webString]
]);

var options = {
min: 0, max: 400,
yellowFrom: 250, yellowTo: 350,
redFrom: 350, redTo: 400,
minorTicks: 5,
majorTicks: ['0', '', '100', '', '200','', '300', '','400']
};

var chart = new google.visualization.Gauge(document.getElementById('chart_div'));

chart.draw(data, options);

setInterval(function() {
function doCallBack() {
webString = a;
}
data.setValue( 0, 1, webString );
chart.draw( data, options );
}, 1000);
}
</script>
</head>

</html>

Erel · Jul 28, 2021

Check this quite old example: https://www.b4x.com/android/forum/threads/add-charts-with-google-charts-service.39197/#content

Android Question Pass value to JavaScript

KarlB

Member

Erel

B4X founder

WebViewExtra: Call B4A Sub from WebView

KarlB

Member

Attachments

Erel

B4X founder

Similar Threads