Mr Antonio,
Using WEBVIEW2, in a WINDOW as I showed, when opening for the first time, the ESC key 'bkeydown', works perfectly, so I can close the window with ESC. When clicking on the GRAPHIC mounted by webview, ESC stops working.
So, I would like to capture the mouse click on the graph and return the focus to the window.
DEFINE WINDOW oWnd TITLE "Dashboard "
*** Paneles
oPanelWeb := TPanel():New( 0, 281, oWnd:nHeight, oWnd:nWidth, oWnd )
oWebView := TWebView2():New(oPanelWeb)
....
oWnd:bKeyDown := {|nKey| IIF(nKey==VK_ESCAPE,oWnd:end(),)}
ACTIVATE WINDOW oWnd MAXIMIZED ON RESIZE
/************************************************************************************/
CLASS TDashboard
/*
*/
DATA cHtml
DATA aGraph INIT {}
METHOD New() CONSTRUCTOR
METHOD AddPanel (cTexto, cValor, cFaFaIcon, cColor )
METHOD AddGraph (cNombre, cTitulo, cTipo, aColumnsData, aData, cColor, cSubTitulo, cHorTitle, cVerTitle, lPrefixohAxis, lPrefixovAxis )
METHOD AddGraph2 (cNombre, cTitulo, cTipo, aColumnsData, aData, cColor, cSubTitulo, cHorTitle, cVerTitle, lPrefixohAxis, lPrefixovAxis )
ENDCLASS
/************************************************************************************/
METHOD New() CLASS TDashboard
/*
*/
TEXT INTO ::cHtml
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dashboard</title>
<script src="https://cdn.tailwindcss.com"></script>
<script type="text/javascript" src="
https://www.gstatic.com/charts/loader.js"></script>
<link rel="stylesheet" href="
https://use.fontawesome.com/releases/v5.12.1/css/all.css" crossorigin="anonymous">
<script type="text/javascript">
// Cargar Google Charts
google.charts.load('current', {'packages':['corechart'], 'language': 'pt-BR'});
google.charts.setOnLoadCallback(drawCharts);
// Función para dibujar los gráficos
function drawCharts() {
//AgregarChar
}
//FuncionGrafico
window.onresize = function () {
drawCharts(); // Redibujar gráficos cuando la ventana cambia de tamaño
};
</script>
</head>
<body class="bg-gray-100">
<div class="flex flex-col lg:flex-row min-h-screen">
<!-- Main Content -->
<div class="flex-1 overflow-y-auto">
<div id="values" class="section">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
<!-- AddPanel -->
</div>
</div>
<div class="section p-2">
<hr>
</div>
<!-- Gráficos Section -->
<div id="charts" class="section">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 gap-6">
<!-- idgrafico -->
</div>
</div>
<br><br><br><br><br><br>
</div>
</div>
</body>
</html>
ENDTEXT
return Self
/************************************************************************************/
METHOD AddPanel(cTexto, cValor, cFaFaIcon, cColor ) CLASS TDashboard
/*
*/
Local cPanel := '<div class="bg-white shadow-md p-6 h-50 rounded-lg text-center border-t-4 border-'+cColor+'-500">'+;
' <h3 class="text-lg font-bold text-'+cColor+'-500"><i class="fas fa-'+cFaFaIcon+' fa-3x"></i></h3>'+;
' <p class="text-xl mt-4 text-'+cColor+'-700">'+cTexto+'</p>'+;
' <p class="text-3xl mt-2 text-'+cColor+'-500 font-bold">'+cValor+'</p>'+;
'</div>'+;
'<!-- AddPanel -->'
::cHtml := strtran(::cHtml,"<!-- AddPanel -->",cPanel)
return Self
/************************************************************************************/
METHOD AddGraph2 (cNombre, cTitulo, cTipo, aColumnsData, aData, cColor, cSubTitulo, cHorTitle, cVerTitle, lPrefixohAxis, lPrefixovAxis )
/*
cTipo := ColumnChart, LineChart, PieChart, BarChart, ScatterChart
*/
Local cGraph, cFuncion, cId, i
Default cHorTitle := ''
Default cVerTitle := ''
Default lPrefixohAxis := .f.
Default lPrefixovAxis := .f.
cGraph := cNombre+'();//AgregarChar'
::cHtml := strtran(::cHtml,"//AgregarChar",cGraph)
cFuncion := "function "+cNombre+"() { "+;
"var data = google.visualization.arrayToDataTable(["+;
" ['"+aColumnsData[1]+"', '"+aColumnsData[2] + "', '"+aColumnsData[3] +"'], "
for i := 1 to len(aData)
cFuncion := cFuncion + "['"+aData[i,1]+"', "+STR(aData[i,2]) +", "+STR(aData[i,3]) +"],"
next i
cFuncion := cFuncion + " ]);"+;
"var options = { "+;
IIf(!Empty(cSubTitulo), " title: '" + cSubTitulo + "',", "")+;
" hAxis: {" + IIf(lPrefixohAxis, "format: 'R$ #,##0.00', ","")+"title: '" + Alltrim(cHorTitle) + "'},"+;
" vAxis: {" + IIf(lPrefixovAxis, "format: 'R$ #,##0.00', ","")+"title: '" + Alltrim(cVerTitle) + "'},"+;
" width: '100%',"+;
" height: 300, "+;
" isStacked: false, "+;
" is3D: " + IIf(s_hParametros['lGrafico3D'] ,"true ","false ")+;
"};"+;
" var chart = new google.visualization."+cTipo+"(document.getElementById('"+cNombre+"'));"+;
" var formatter = new google.visualization.NumberFormat({ decimalSymbol: ',', groupingSymbol: '.', fractionDigits: 2 });"+;
" formatter.format(data, 1);" +;
"chart.draw(data, options);"+;
"}"+;
"//FuncionGrafico"
::cHtml := StrTran(::cHtml,"//FuncionGrafico",cFuncion)
cId := '<div class="bg-white shadow-md p-2 rounded-lg border-t-4 border-'+cColor+'-500">'+;
'<h2 class="text-xl font-bold mb-4 text-'+cColor+'-500">'+cTitulo+'</h2>'+;
'<div id="'+cNombre+'"></div>'+;
'</div>'+;
'<!-- idgrafico -->'
::cHtml := StrTran(::cHtml,"<!-- idgrafico -->",cId)
return Self
/************************************************************************************/
METHOD AddGraph (cNombre, cTitulo, cTipo, aColumnsData, aData, cColor, cSubTitulo, cHorTitle, cVerTitle, lPrefixohAxis, lPrefixovAxis )
/*
cTipo := ColumnChart, LineChart, PieChart, BarChart, ScatterChart
*/
Local cGraph, cFuncion, cId, i
Default cHorTitle := ''
Default cVerTitle := ''
Default lPrefixohAxis := .f.
Default lPrefixovAxis := .f.
cGraph := cNombre+'();//AgregarChar'
::cHtml := strtran(::cHtml,"//AgregarChar",cGraph)
cFuncion := "function "+cNombre+"() { "+;
"var data = google.visualization.arrayToDataTable(["+;
" ['"+aColumnsData[1]+"', '"+aColumnsData[2]+"'], "
for i := 1 to len(aData)
cFuncion := cFuncion + "['"+aData[i,1]+"', "+STR(aData[i,2])+"],"
next i
cFuncion := cFuncion + " ]);"+;
"var options = { "+;
IIf(!Empty(cSubTitulo), " title: '" + cSubTitulo + "',", "")+;
" hAxis: {" + IIf(lPrefixohAxis, "format: 'R$ #,##0.00', ","")+"title: '" + Alltrim(cHorTitle) + "'},"+;
" vAxis: {" + IIf(lPrefixovAxis, "format: 'R$ #,##0.00', ","")+"title: '" + Alltrim(cVerTitle) + "'},"+;
" width: '100%',"+;
" height: 300, "+;
" isStacked: false, "+;
" is3D: " + IIf(s_hParametros['lGrafico3D'] ,"true ","false ")+;
"};"+;
" var chart = new google.visualization."+cTipo+"(document.getElementById('"+cNombre+"'));"+;
" var formatter = new google.visualization.NumberFormat({ decimalSymbol: ',', groupingSymbol: '.', fractionDigits: 2 });"+;
" formatter.format(data, 1);" +;
"chart.draw(data, options);"+;
"}"+;
"//FuncionGrafico"
::cHtml := StrTran(::cHtml,"//FuncionGrafico",cFuncion)
cId := '<div class="bg-white shadow-md p-2 rounded-lg border-t-4 border-'+cColor+'-500">'+;
'<h2 class="text-xl font-bold mb-4 text-'+cColor+'-500">'+cTitulo+'</h2>'+;
'<div id="'+cNombre+'"></div>'+;
'</div>'+;
'<!-- idgrafico -->'
::cHtml := StrTran(::cHtml,"<!-- idgrafico -->",cId)
return Self
