Contents - Index - Top


VB6 - Exchange rates example

 

The Exchange Rates demo has the following html:

 

<html>

<head>

  <link rel="StyleSheet" href="exchangeRates.css" type="text/css"> 

  <script language="JavaScript" src="https://cdn.jsdelivr.net/npm/chart.js@3.3.2/dist/chart.min.js" type="text/javascript"></script>

</head>

<body>

<div class="card">

        <h1>Exchange Rate</h1>

        <form class="hiddencontainer">

 

            <div class="row">

                <div class="value" id="currencyRate"></div>

                <label for="result">Result =</label>

                <div id="result"></div>

                <div id="resultCurrency"></div>

            </div>

    </form>

 

    <div class="container">

        <canvas id="graph" width="300" height="300"></canvas>

    </div>

    </div>

    

 

  <script language="JavaScript" src="exchangeRates.js" type="text/javascript"></script>

 

</body>

</html>

 

as you can see there's a bit of javascript involved as well. Let us have a look at what is in the exchangeRates.js file.

var currencyChart;

 

function configureChart() {

 

    const ctx = document.getElementById("graph").getContext("2d");

    currencyChart = new Chart(ctx, {

        type: "line",

            data: {

                labels: "",

                datasets: []

            }

    })

 

}

 

 

function queryRates(firstValue,firstCurrency,secondCurrency) {

    let typingTime = null;

    const url = 'api.frankfurter.app';

 

    clearTimeout(typingTime);

    typingTime = setTimeout(() => {

 

        async function fetchCurrency() {

            let res = await fetch(`https://${ url }/latest?from=${ firstCurrency }`);

            let dataRes = await res.json();

 

            for (const [key, value] of Object.entries(dataRes.rates)) {

                if (secondCurrency === key) {

                    document.querySelector(".value").innerText = value;

                    document.querySelector("#result").innerText = (firstValue * value).toFixed(2);

                    document.querySelector("#resultCurrency").innerText = secondCurrency;

                } 

            }

              

        }

        fetchCurrency();

    }, 1000)

  return document.querySelector(".value").innerText;

}

 

 

function displayGraph(fromCHis,toCHis) {

    const url = 'api.frankfurter.app';

 

    async function fetchHistory() {

        let resHistory = await fetch(`https://${ url }/2020-01-04..?from=${fromCHis}&to=${toCHis}`);

        let dataResHistory = await resHistory.json();

        const xlabels = [];

        const ylabels = [];

        for (const [key, value] of Object.entries(dataResHistory.rates)) {

            xlabels.push(key);

            ylabels.push(value);

        }

 

        const yScale = [];

        ylabels.forEach(y => {

            yScale.push(y[`${toCHis}`]);

        })

 

        currencyChart.data = {

            labels: xlabels,

            datasets: [{

                label: 'Exchange rate',

                data: yScale,

                borderColor: '#0000ff',

            }]

        }

        currencyChart.update();

    }

 

    fetchHistory();

}

 

 

configureChart();

 

OK.. that's a bit too much to explain line by line, but the gist is as follows.

The first thing it runs is at the bottom. 

The configureChart function is called to configure the chart as is defined via the npm chart.min.js javascript include.

Then there's two functions.

1. The queryRates function that asks the api.frankfurter.app API for the current exchange rate for the value in firstValue and from currency firstCurrency in currency secondCurrency.

2. The displayRates function, also queries the api.frankfurter.app API, but this time for drawing the history chart.

 

As you can imagine, these API calls take time to execute and you don't want your application to hang if there's no timely response (if at all)

 

Now have a look at the Visual Basic side of things.

 

The "Get Rates" button has the initial logic.

 

Private Sub GetRatesButton_Click()

  Dim nValue As Variant

  Dim sCurFrom As String

  Dim sCurTo As String

  

  nValue = CDec(AmountTextBox.Text)

  If nValue <> 0 Then

    sCurFrom = FromCombo.Text

    sCurTo = ToCombo.Text

    If sCurFrom <> sCurTo Then

      RateTextBox.Text = "working.."

      ResultTextBox.Text = ""

      QueryRatings

    Else

      MsgBox "That's a rate of 1, no need to ask that."

    End If

  Else

    MsgBox "Enter an amount first."

  End If

End Sub

 

First we get the amount value from the amount TextBox control and also the comboform values "from" and "to" for the currencies.

Once you enter an amount and change the "from" and "to" currencies so that they don't match, the QueryRatings function is called.

 

Private Sub QueryRatings()

  Dim nValue As Variant

  Dim sCurFrom As String

  Dim sCurTo As String

  Dim jScript As String

  Dim varParams(3) As Variant

  

  jScript = "(amount,curFrom,curTo) => {" & vbCrLf

  jScript = jScript & "  displayGraph(curFrom,curTo);" & vbCrLf

  jScript = jScript & "  let obj = document.getElementById('currencyRate');" & vbCrLf

  jScript = jScript & "  if (obj !== undefined) {" & vbCrLf

  jScript = jScript & "    obj.innerText = '-1'" & vbCrLf  ' -1 is initialized..

  jScript = jScript & "  }" & vbCrLf

  jScript = jScript & "  queryRates(amount,curFrom,curTo);" & vbCrLf

  jScript = jScript & "}" & vbCrLf

  nValue = CDec(AmountTextBox.Text)

  sCurFrom = FromCombo.Text

  sCurTo = ToCombo.Text

  varParams(0) = nValue

  varParams(1) = sCurFrom

  varParams(2) = sCurTo

  

  Document.RunAnonymousFunction 2, varParams, jScript

  '

  ' We use a timer to poll for the results

  Timer.Enabled = True

End Sub

 

We're taking the currency from, currency to and the amount and pass that to the anonymous javascript function, we also identify this as function "2".

 

The javascript itself calls both displayGraph as well as the queryRates function and it starts a timer.

As the API does not return immediately, we want to check the currencyRate html element for the result.

Again and again, until there's a result.

 

Let's look at the function the timer runs:

 

Public Sub OnTimer()

  Dim jScript As String

  Dim varParams(0) As Variant

  

  jScript = " () => {" & vbCrLf

  jScript = jScript & "  let rate = document.getElementById('currencyRate');" & vbCrLf

  jScript = jScript & "  if (rate !== undefined) {" & vbCrLf

  jScript = jScript & "    let data = rate.innerText;" & vbCrLf

  jScript = jScript & "    return data;" & vbCrLf

  jScript = jScript & "  } else {" & vbCrLf

  jScript = jScript & "    return '-2';" & vbCrLf  '  error "-2" == currency rate not found

  jScript = jScript & "  }" & vbCrLf

  jScript = jScript & "}" & vbCrLf

  Document.BrowserDispatch EdgeWebBrowser.IDispatchPointer

  Document.RunAnonymousFunction 3, varParams, jScript

    Debug.Print "Tick"

End Sub

 

As you can see the timer checks the html element and returns either the value in the html or an error (-2). This function is identified as function "3". We don't pass any parameters to the anonymous function.

 

The OnRunAnonymousFunction is where we handle the event. 

We had 2 different javascript functions, identified by "2" and "3".

 

Private Sub Document_OnRunAnonymousFunction(ByVal Id As Long, ByVal Params As Variant, ByVal Data As String, ByVal Error As Long)

  Dim nRate As Variant

  Dim nAmount As Variant

  Dim nResult As Variant

  Dim sCurTo As String

  Dim sDecSep  As String

  If Id = 2 Then

    ' do nothing

  ElseIf Id = 3 Then

    ' What's the current symbol for the decimal separator according to windows?

    sDecSep = LoadLocaleValue(LOCALE_SDECIMAL)

    If sDecSep = "," Then

      Data = Replace(Data, ".", ",")

    End If

    nRate = CDec(Data)

    If nRate <> -1 Then

        sCurTo = ToCombo.Text

        nAmount = CDec(AmountTextBox.Text)

        nResult = nAmount * nRate

        RateTextBox.Text = Data

        ResultTextBox.Text = CStr(nResult) & " " & sCurTo

        

        Timer.Enabled = False

        Debug.Print "Tock"

    End If

  End If

End Sub

 

If you're not in the US then your decimal separate might be a comma (",") instead of a dot ("."), so we need to take that into account.

 

The timer keeps on running until it returns the correct data and the currencyRate html element no longer contains -1.

The moment it no longer contains -1, it has the actual currency Rate, which is returned in the -pass by reference- variable data.

We can now show the result in the resultTextBox.

 

Once the result is no longer -1, we stop the timer.

 


AntView - The MS Edge WebView2 ActiveX control Date last changed: 09/25/2024