PDA

View Full Version : thinBasic 1.10.5 help on testing a new feature



ErosOlmi
26-11-2017, 22:18
Hi all,

thinBasic 1.10.5 development is at the last stage.
I need help in testing a new feature that will be present in next thinBasic 1.10.5.0.
Attached to this post you will find a Bundled Script called "ActiveX_WebBrowser_GoogleCharts"

When executed it will create a .\Chart\ directory with some html templates using Google Charts Library.
Script will load those templates and show some charts inside a dialog, see image.

The new feature I need to test is a new control type called ACTIVEX
It will be created like all User Interface controls using CONTROL ADD ACTIVEX ...
This control will be able to host visual ActiveX components into thinBasic script.
Once loaded, programmer will be able to interact with them.

What I need to know is if charts are visible and what Operating system/Browser/version you have.
Attention:

Internet connection is needed because Google Charts Library is loaded from Google sites
it can be that the script will ask administrator privilege. This is because script changes 2 registry parameters in HKEYCU. Both parameters are "by application" so will act only for this application:

first parameter instruct embedded web control to emulate Internet Explore 9 browser
second parameter instruct embedded web control not to emit a sound when page is reloaded



Thanks a lot
Eros


Just to show what the script looks like ... here below the full source.
You will see there are a lot of new features like:

Named Dialog and Controls.
Named Dialog and Controls is a way to give a Dialog or a Control a name and then use that name to interact with that dialog or control using properties (get/set) and methods
automatic event handling functions.
Instead of having big SELECT/CASE of strange commands/events, it will be possible to write named dialog and controls events functions and trap only those events you prefer.
For example if you have a button named MyButton, trapping the click event will be that easy as writing a function named [ControlName]_On[EventToTrap] like:

CallBack Function MyButton_OnClick() as Long
'---Do whatever with the click on MyButton button
End Function


All this make it possible to have a VB6 like syntax very easy to use and read.

USES "UI"uses "Registry"


#BUNDLE File "", ".\Charts\GoogleChart_Dynamic_ComboChart.html" , ".\Charts\" , ReplaceExisting=1, DeleteOnClose=0, CreateFullPath=1
#BUNDLE File "", ".\Charts\GoogleChart_Dynamic_Gauge.html" , ".\Charts\" , ReplaceExisting=1, DeleteOnClose=0, CreateFullPath=1
#BUNDLE File "", ".\Charts\GoogleChart_Dynamic_LineCurveChart.html" , ".\Charts\" , ReplaceExisting=1, DeleteOnClose=0, CreateFullPath=1
#BUNDLE File "", ".\Charts\GoogleChart_Dynamic_MaterialBarChart.html" , ".\Charts\" , ReplaceExisting=1, DeleteOnClose=0, CreateFullPath=1
#BUNDLE File "", ".\Charts\GoogleChart_Dynamic_Pie3DChart.html" , ".\Charts\" , ReplaceExisting=1, DeleteOnClose=0, CreateFullPath=1
#BUNDLE File "", ".\Charts\GoogleChart_Dynamic_SankeyDiagram.html" , ".\Charts\" , ReplaceExisting=1, DeleteOnClose=0, CreateFullPath=1
#BUNDLE File "", ".\Charts\GoogleChart_Dynamic_TreeMap.html" , ".\Charts\" , ReplaceExisting=1, DeleteOnClose=0, CreateFullPath=1
#BUNDLE File "", ".\Charts\GoogleChart_Dynamic_WordTree.html" , ".\Charts\" , ReplaceExisting=1, DeleteOnClose=0, CreateFullPath=1


'---Define a button ID
begin ControlID
%ButtonClose
%ButtonGO
%lblFind
%txtFind
%lblReplace
%txtReplace
%wBroser
%ID_ActiveX
%IDC_MenuTREE
end ControlID


global iWebBrowser AS iDISPATCH




DIALOG New Pixels, Name frmMain, 0, "Testing ActiveX control using WebBrowser and Google Charts",-1,-1, 1024, 768,
%WS_DLGFRAME | %DS_CENTER | %WS_CAPTION | %WS_SYSMENU | %WS_OVERLAPPEDWINDOW




'CONTROL ADD BUTTON Name btnGO , frmMain.Handle, %ButtonGO , "GO" , 500, 10, 120, 25, %BS_NOTIFY | %BS_CENTER | %BS_VCENTER | %WS_TABSTOP
CONTROL ADD BUTTON Name btnCloseMe , frmMain.Handle, %ButtonClose , "Close" , 0, 0, 120, 25, %BS_NOTIFY | %BS_CENTER | %BS_VCENTER | %WS_TABSTOP


'----------------------------------------------------
'----------------------------------------------------
'---Set IE11 usage inside Web control
'---See: https://forum.powerbasic.com/forum/jose-s-corner/discussion/61044-trouble-with-chart-js-in-embedded-browser
'--- https://www.codeproject.com/Articles/793687/Configuring-the-emulation-mode-of-an-Internet-Expl
'--- Set 9999 Windows Internet Explorer 9. Webpages are displayed in IE9 Standards mode, regardless of the !DOCTYPE directive.
Registry_SetDWord("HKEYCU", "Software\Microsoft\Internet Explorer\Main\FeatureControl\FEATURE_BROWSER_EMULATION", APP_Name, 9999)


'---This disable the sound clik when navigating
' https://msdn.microsoft.com/en-us/library/ee330734(v=vs.85).aspx#navigation_sound
$FeatureBaseKey = "Software\Microsoft\Internet Explorer\Main\FeatureControl\FEATURE_DISABLE_NAVIGATION_SOUNDS"
Registry_SetDWord("HKEYCU", $FeatureBaseKey, APP_Name, 1)




'---Create ActiveX container
CONTROL ADD ActiveX name activexWB , frmMain.Handle, %ID_ActiveX , "Shell.Explorer", 0, 0, 0, 0, %WS_VISIBLE | %WS_CHILD
'---Now Capture iDispatch object from Activex
iWebBrowser = activexWB.ActiveXObj
'---Reference: https://msdn.microsoft.com/en-us/library/aa752043(v=vs.85).aspx




if IsComObject(iWebBrowser) Then
'---Initial WebControl setup
iWebBrowser.Silent = TRUE
Else
msgbox "It was not possible to get Dispatch interface from ActiveX Web Control"
end If




Control Add TreeView, Name MainTree, frmMain.Handle, %IDC_MenuTREE, "", 0, 0, 0, 0, _
%WS_CHILD |
%WS_VISIBLE |
%TVS_HASBUTTONS |
%TVS_HASLINES |
%TVS_LINESATROOT |
%TVS_SHOWSELALWAYS


MainTree.ItemHeight = 36
treeview_setindent frmMain.Handle, %IDC_MenuTREE, 20
MainTree.BackColor = rgb(214, 223, 247)

treeview_setTextColor frmMain.Handle, %IDC_MenuTREE, rgb(0, 0, 0) 'rgb(75, 118, 223)
treeview_setLineColor frmMain.Handle, %IDC_MenuTREE, rgb(0, 0, 0)


long htGoogleCharts = TREEVIEW_INSERTITEM frmMain.Handle, %IDC_MenuTREE, 0, %TVI_FIRST, 0, 0, "Google Charts"

long htGauge = TreeView_InsertItem frmMain.Handle, %IDC_MenuTREE, htGoogleCharts, %TVI_LAST, 0 , 0 , "Gauge Chart"
long htCombo = TreeView_InsertItem frmMain.Handle, %IDC_MenuTREE, htGoogleCharts, %TVI_LAST, 0 , 0 , "Combo Chart"
long htLineCurve = TreeView_InsertItem frmMain.Handle, %IDC_MenuTREE, htGoogleCharts, %TVI_LAST, 0 , 0 , "Line Curve"
long htPie3DChart = TreeView_InsertItem frmMain.Handle, %IDC_MenuTREE, htGoogleCharts, %TVI_LAST, 0 , 0 , "Pie 3D Chart"
long htMaterialBarChart = TreeView_InsertItem frmMain.Handle, %IDC_MenuTREE, htGoogleCharts, %TVI_LAST, 0 , 0 , "Material Bar Chart"
long htSankeyDiagram = TreeView_InsertItem frmMain.Handle, %IDC_MenuTREE, htGoogleCharts, %TVI_LAST, 0 , 0 , "Sankey Diagram"
long htTreeMap = TreeView_InsertItem frmMain.Handle, %IDC_MenuTREE, htGoogleCharts, %TVI_LAST, 0 , 0 , "Tree Map"
long htWordTree = TreeView_InsertItem frmMain.Handle, %IDC_MenuTREE, htGoogleCharts, %TVI_LAST, 0 , 0 , "Word tree implicit"

MainTree.Expand(htGoogleCharts) = %TRUE
MainTree.Select = htGauge'htGoogleCharts


DIALOG SHOW MODAL frmMain.Handle


'------------------------------------------------
callback function activexWB_OnCallBack() as Long
'------------------------------------------------


msgbox Function_Name
'---Sooner or later thinBasic will be able to capture events from ActiveX


end Function


'------------------------------------------------
' Callback function used to handle dialog events
' not handled by specific event functions
'------------------------------------------------
CallBack Function frmMain_OnCallBack() As Long
'------------------------------------------------


End Function


'------------------------------------------------
CallBack Function frmMain_OnInit() As Long
'------------------------------------------------


'---Limits window minimum size
DIALOG SET MINSIZE CBHNDL, 550, 220


btnCloseMe.Text = "Close"


End Function


'------------------------------------------------
CallBack Function frmMain_OnSize() As Long
'------------------------------------------------


MainTree.w = 200
MainTree.h = frmMain.ch


btnCloseMe.x = frmMain.cw - 130
btnCloseMe.y = 10


activexWB.x = 201
activexWB.y = 100
activexWB.cw = frmMain.cw - 201
activexWB.ch = frmMain.ch-100



End Function






'------------------------------------------------
CallBack Function frmMain_OnDestroy() As Long
'------------------------------------------------


End Function






'------------------------------------------------------------------------------
' Button EVENT
'------------------------------------------------------------------------------
'------------------------------------------------
CallBack Function btnCloseMe_OnClick() As Long
'------------------------------------------------


DIALOG End CBHNDL


End Function




'------------------------------------------------------------------------------
' TreeView EVENTs
'------------------------------------------------------------------------------
CallBack Function MainTree_OnSelChanged() As Long
'----------------------------------------------------------------------------
local sChartTemplate as String
local sDynamic as String
local sDataMarker as String
local sUrl as String
local NavigateTo as Long
local UpdateChart as Long
'Local HtmlDocument as iDispatch




sDataMarker = "%thinbasicdata"

select case MainTree.Selected

case htGoogleCharts
'---FOR SOME REASONS THIS IS NOT WORKING
'---Seems when I destroy DOM Document of the browser then it is not possibile to navigate to a web page


sUrl = "https://developers.google.com/chart/"
NavigateTo = TRUE


case htGauge
sChartTemplate = app_sourcepath & "Charts\GoogleChart_Dynamic_Gauge.html"
sDynamic = "
['Label', 'Value'],
['Memory', {1}],
['CPU', {2}],
['Network', {3}]
"
sDynamic = StrFormat$(sDynamic, rnd(10, 100), rnd(10, 100), rnd(10, 100))


UpdateChart = TRUE


case htLineCurve
sChartTemplate = app_sourcepath & "Charts\GoogleChart_Dynamic_LineCurveChart.html"
sDynamic = "
['Year', 'Sales', 'Expenses'],
['2004', 1000, 400],
['2005', 1170, 460],
['2006', 660, 1120],
['2007', 1030, 540]
"
UpdateChart = TRUE

case htCombo
sChartTemplate = app_sourcepath & "Charts\GoogleChart_Dynamic_ComboChart.html"
sDynamic = "
['Month', 'Bolivia', 'Ecuador', 'Madagascar', 'Papua New Guinea', 'Rwanda', 'Average'],
['2004/05', 165, 938, 522, 998, 450, 614.6],
['2005/06', 135, 1120, 599, 1268, 288, 682 ],
['2006/07', 157, 1167, 587, 807, 397, 623 ],
['2007/08', 139, 1110, 615, 968, 215, 609.4],
['2008/09', 136, 691, 629, 1026, 366, 569.6]
"
UpdateChart = TRUE


case htMaterialBarChart
sChartTemplate = app_sourcepath & "Charts\GoogleChart_Dynamic_MaterialBarChart.html"
sDynamic = "
['Year', 'Sales', 'Expenses', 'Profit'],
['2014', 1000, 400, 200],
['2015', 1170, 460, 250],
['2016', 660, 1120, 300],
['2017', 1030, 540, 350]
"
UpdateChart = TRUE

case htPie3DChart
sChartTemplate = app_sourcepath & "Charts\GoogleChart_Dynamic_Pie3DChart.html"
sDynamic = "
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
"
UpdateChart = TRUE

case htSankeyDiagram
sChartTemplate = app_sourcepath & "Charts\GoogleChart_Dynamic_SankeyDiagram.html"
sDynamic = "
[ 'Brazil', 'Portugal', 5 ],
[ 'Brazil', 'France', 1 ],
[ 'Brazil', 'Spain', 1 ],
[ 'Brazil', 'England', 1 ],
[ 'Canada', 'Portugal', 1 ],
[ 'Canada', 'France', 5 ],
[ 'Canada', 'England', 1 ],
[ 'Mexico', 'Portugal', 1 ],
[ 'Mexico', 'France', 1 ],
[ 'Mexico', 'Spain', 5 ],
[ 'Mexico', 'England', 1 ],
[ 'USA', 'Portugal', 1 ],
[ 'USA', 'France', 1 ],
[ 'USA', 'Spain', 1 ],
[ 'USA', 'England', 5 ],
[ 'Portugal', 'Angola', 2 ],
[ 'Portugal', 'Senegal', 1 ],
[ 'Portugal', 'Morocco', 1 ],
[ 'Portugal', 'South Africa', 3 ],
[ 'France', 'Angola', 1 ],
[ 'France', 'Senegal', 3 ],
[ 'France', 'Mali', 3 ],
[ 'France', 'Morocco', 3 ],
[ 'France', 'South Africa', 1 ],
[ 'Spain', 'Senegal', 1 ],
[ 'Spain', 'Morocco', 3 ],
[ 'Spain', 'South Africa', 1 ],
[ 'England', 'Angola', 1 ],
[ 'England', 'Senegal', 1 ],
[ 'England', 'Morocco', 2 ],
[ 'England', 'South Africa', 7 ],
[ 'South Africa', 'China', 5 ],
[ 'South Africa', 'India', 1 ],
[ 'South Africa', 'Japan', 3 ],
[ 'Angola', 'China', 5 ],
[ 'Angola', 'India', 1 ],
[ 'Angola', 'Japan', 3 ],
[ 'Senegal', 'China', 5 ],
[ 'Senegal', 'India', 1 ],
[ 'Senegal', 'Japan', 3 ],
[ 'Mali', 'China', 5 ],
[ 'Mali', 'India', 1 ],
[ 'Mali', 'Japan', 3 ],
[ 'Morocco', 'China', 5 ],
[ 'Morocco', 'India', 1 ],
[ 'Morocco', 'Japan', 3 ]
"
UpdateChart = TRUE


case htTreeMap
sChartTemplate = app_sourcepath & "Charts\GoogleChart_Dynamic_TreeMap.html"
sDynamic = "
['Location', 'Parent', 'Market trade volume (size)', 'Market increase/decrease (color)'],
['Global', null, 0, 0],
['America', 'Global', 0, 0],
['Europe', 'Global', 0, 0],
['Asia', 'Global', 0, 0],
['Australia', 'Global', 0, 0],
['Africa', 'Global', 0, 0],
['Brazil', 'America', 11, 10],
['USA', 'America', 52, 31],
['Mexico', 'America', 24, 12],
['Canada', 'America', 16, -23],
['France', 'Europe', 42, -11],
['Germany', 'Europe', 31, -2],
['Sweden', 'Europe', 22, -13],
['Italy', 'Europe', 17, 4],
['UK', 'Europe', 21, -5],
['China', 'Asia', 36, 4],
['Japan', 'Asia', 20, -12],
['India', 'Asia', 40, 63],
['Laos', 'Asia', 4, 34],
['Mongolia', 'Asia', 1, -5],
['Israel', 'Asia', 12, 24],
['Iran', 'Asia', 18, 13],
['Pakistan', 'Asia', 11, -52],
['Egypt', 'Africa', 21, 0],
['S. Africa', 'Africa', 30, 43],
['Sudan', 'Africa', 12, 2],
['Congo', 'Africa', 10, 12],
['Zaire', 'Africa', 8, 10]
"
UpdateChart = TRUE


case htWordTree
sChartTemplate = app_sourcepath & "Charts\GoogleChart_Dynamic_WordTree.html"
sDynamic = "
[ ['Phrases'],
['cats are better than dogs'],
['cats eat kibble'],
['cats are better than hamsters'],
['cats are awesome'],
['cats are people too'],
['cats eat mice'],
['cats meowing'],
['cats in the cradle'],
['cats eat mice'],
['cats in the cradle lyrics'],
['cats eat kibble'],
['cats for adoption'],
['cats are family'],
['cats eat mice'],
['cats are better than kittens'],
['cats are evil'],
['cats are weird'],
['cats eat mice'],
]
"
UpdateChart = TRUE

end Select


if IsComObject(iWebBrowser) Then


if UpdateChart Then


ShowChart(sChartTemplate, sDataMarker, sDynamic)

elseif NavigateTo Then

GoToUrl(sUrl)


end If

end If

end Function


'--------------------------------------------------------
' Dynamic Script function added to activexWB control
'--------------------------------------------------------
function ShowChart(byval sChartTemplateFile as string, byval sDataMarker as String, byval sData as String) as Long
local sTemplate as String
Local HtmlDocument as iDispatch


'---Stop any current navigation
iWebBrowser.Stop

'---Load Graph template file from disk
sTemplate = load_file(sChartTemplateFile)


'---If template was loaded ...
if len(sTemplate) Then


'---Replace data placeholder with data
sTemplate = replace$(sTemplate, sDataMarker, sData)


'---Now we need to load HTML directly into DOMCodument of the browser

'---Get WebBrowser DOMDocument dispatch interface
HtmlDocument = iWebBrowser.Document
'---If OK, change it using dynamic text loaded from chart template
if IsComObject(HtmlDocument) then
HtmlDocument.OpenNew = FALSE
HtmlDocument.open("text/html", "replace")
HtmlDocument.Write(sTemplate)
HtmlDocument.Close

iWebBrowser.Refresh
HtmlDocument = Nothing
end If


end If


end Function

'--------------------------------------------------------
' Dynamic Script function added to activexWB control
'--------------------------------------------------------
function GoToUrl(byval sNewUrl as string) as Long
local sTemplate as String
Local HtmlDocument as iDispatch


'---Stop any current navigation
iWebBrowser.Stop


'---Now we need to load clear DOMCodument of the browser

'---Get WebBrowser DOMDocument dispatch interface
HtmlDocument = iWebBrowser.Document
'---If OK, change it using dynamic text loaded from chart template
if IsComObject(HtmlDocument) then
HtmlDocument.OpenNew = false
HtmlDocument.open("text/html", "replace")
HtmlDocument.Write("")
HtmlDocument.Close
HtmlDocument = Nothing

end If


'---Load URL
iWebBrowser.Navigate(sNewUrl)
iWebBrowser.Refresh


end Function

Petr Schreiber
27-11-2017, 08:37
Hi Eros,

thanks a lot, I can confirm it works perfectly on Windows 10 64bit / Creators Update / Edge.

I was able to choose different items from the treeview and it showed different charts.

The response was immediate on 90 MBit connection.


Petr

primo
27-11-2017, 09:44
Hi Eros
i have tested in windows xp/32 and windows 7/x64 on the same machine, they displayed okay except the following:

word tree implicit
sandkey Diagram
Material bar Chart
Pie 3D Chart

it is may be related to the IE web browser version, since the IE in winxp is version 8 and i am using for web browsing portable firefox not IE

ErosOlmi
27-11-2017, 19:22
Thanks primo for testing.

Just a confirmation: not working charts do not work in both operating systems or only in XP?

Thanks
Eros

primo
27-11-2017, 20:26
the not working charts do not work in both operating systems.
just now i have checked the IE version in windows 7 and its version is 8 like that in windows xp (winxp original ie version is 6 but i have upgraded it years ago) . so it is may be IE 8 does not display all Charts.
but don't bother with that, i am using always old OS's . and if it is running all in windows 10 then thats okay

primo
28-11-2017, 11:44
i want to check the theory that the IE 8 does not display all Charts, so i have downloaded the IE 10 x64 for windows 7/x64 https://filehippo.com/download_internet_explorer_windows_7_64/14435/
she in turn have downloaded many things from microsoft and after reboot the IE version become v10. xxx in windows 7. running Eros example above and now yes all the Charts is displayed
https://s2.postimg.org/b0prpb74p/piechart.jpg

ErosOlmi
28-11-2017, 15:25
Thanks a lot for testing.
I think IE9 would be enough for running correctly but IE10 is netter ;)

Michael Hartlef
28-11-2017, 22:10
It ran fine, but took a while to start up.

Win7 Home 64bit here with Chrome Version 62.0.3202.94 (Official Build) (64-Bit)

ErosOlmi
28-11-2017, 22:54
Thanks a lot Michael.

Does the speed is the same as loading charts from original Google site?
https://developers.google.com/chart/interactive/docs/gallery/gauge

Michael Hartlef
29-11-2017, 12:26
Thanks a lot Michael.

Does the speed is the same as loading charts from original Google site?
https://developers.google.com/chart/interactive/docs/gallery/gauge

I will check tonight when I have time (hopefully) and get back to you on that.

Michael Hartlef
29-11-2017, 23:43
Ok, I tried again. The first time it took about 15-20 seconds till the window appeared. Just like yesterday. The charts showed up after that pretty fast. Just like that link you sent me.
The second and every other time I ran the app, it came up almost instantly.

ErosOlmi
30-11-2017, 00:00
Great, thanks a lot.

What I'm here trying to achieve is:

having a general control container able to show almost any visual ActiveX component.
This seems done
.
having the ability to connect to hosted visual ActiveX component using an iDispatch object and interact with hosted component calling its methods and changing its properties.
This seems done.
.
having the ability to install an event handle in order to intercept events fired by hosted component.
This will be quite tricky and complex to achieve so far for me. I still need to study a bit ATL components.


Ciao
Eros