Hi
I try to make a CustomComponent. It is OK when i running ABMComp_FirstRun. But when i running ABMComp_Refresh, I always got a ReferenceError by graphic variable. why ... !?
http://vps.jinyistudio.tw/b4j_image/111.bmp
Html code
I try to make a CustomComponent. It is OK when i running ABMComp_FirstRun. But when i running ABMComp_Refresh, I always got a ReferenceError by graphic variable. why ... !?
http://vps.jinyistudio.tw/b4j_image/111.bmp
B4X:
private Sub ABMComp_Build(internalID As String) As String
Return $""$
End Sub
' Is useful to run some initalisation script.
private Sub ABMComp_FirstRun(InternalPage As ABMPage, internalID As String)
Dim script As String = $"
var rootUrl = 'eqtcard/';
var assetUrl = rootUrl + 'assets';
var graphicUrl = rootUrl + 'archer.graphic.svg';
var configUrl = rootUrl + 'archer.config.json';
var container1 = document.getElementById('${internalID}');
var graphic = archer.create(container1);
graphic.document.setAssetRoot(assetUrl);
graphic.loadUrl(graphicUrl, configUrl);
graphic.on('ready', function () {
// Make graphic fit into container bounds
//graphic.view.zoomToFit(0);
//graphic.view.centerAt(-800,0, true);
graphic.view.enableMouse(false,false);
// Enable zoom / pan with mouse
graphic.view.enableMouse(true, true);
// Set variable values
graphic.setValue('light11', 0);
graphic.setValue('second11', '10');
graphic.setValue('percent11', '10');
graphic.setValue('light12', 0);
graphic.setValue('sencond12', '11');
graphic.setValue('percent12', '11');
graphic.setValue('light13', 0);
graphic.setValue('second13', '0');
graphic.setValue('percent13', '0');
graphic.setValue('light14', 0);
graphic.setValue('second14', '0');
graphic.setValue('percent14', '0');
}); "$
InternalPage.ws.Eval(script, Array As Object(ABMComp.ID))
isfirst=False
End Sub
' runs when a refresh is called
private Sub ABMComp_Refresh(InternalPage As ABMPage, internalID As String)
Dim script As String = $"
graphic.setValue('second11','100');
"$
InternalPage.ws.Eval(script, Array As Object(ABMComp.ID))
End Sub
B4X:
<!DOCTYPE html>
<html>
<head>
<title>EquipCard</title>
<style>
body {
margin: 0;
}
#container {
position: absolute;
width: 100%;
height: 100%;
}
#error {
display: none;
}
</style>
</head>
<body>
<div id="container"></div>
<div id="error">
<h1>The graphic files could not be loaded</h1>
<p>Please note that this example may only work when served through a web server. The example code needs to dynamically load files which for security reasons is not allowed when serving from the file system.</p>
</div>
<!-- Include the runtime library -->
<!-- NOTE: The Archer Runtime library is free for personal, non-commercial use and testing environments. -->
<!-- For using the Archer Runtime library in production environments please visit https://archer.graphics to learn more about commercial licensing options. -->
<script src='libs/archer.min.js'></script>
<script language='javascript' type='text/javascript'>
/*
* NOTE: This example may only work when it is loaded through a web server. The example code needs to load the archer
* graphic file as well as the archer configuration file, which for security reasons is not allowed when loading the
* HTML file from the file system.
*/
/**
* Root location where your interactive graphic is stored.
* Leave empty to resolve paths relative from this HTML.
* Can also contain an absolute URL to the server where your graphic is stored, for example:
* http://my-domain.com/graphics/my-graphic/
*/
var rootUrl = '';
/**
* Location of the assets folder, by default resolved relative from root URL
*/
var assetUrl = rootUrl + 'assets';
/**
* Location of the SVG file, by default resolved relative from root URL
*/
var graphicUrl = rootUrl + 'archer.graphic.svg';
/**
* Location of the graphic configuration file, by default resolved relative from root URL
*/
var configUrl = rootUrl + 'archer.config.json';
/**
* The container HTML element in which to display the graphic
*/
var container = document.getElementById('container');
// Create a graphic instance over the container
var graphic = archer.create(container);
// Tell the graphic where assets (e.g. images) are located
graphic.document.setAssetRoot(assetUrl);
// Load graphic and configuration
graphic.loadUrl(graphicUrl, configUrl);
// Wait until files are loaded
graphic.on('ready', function () {
// Make graphic fit into container bounds
graphic.view.zoomToFit();
// Enable zoom / pan with mouse
graphic.view.enableMouse(true, true);
// Set variable values
graphic.setValue('light11', 1);
graphic.setValue('second11', 'some-text');
graphic.setValue('percent11', 'some-text');
graphic.setValue('light12', 1);
graphic.setValue('light13', 1);
graphic.setValue('light14', 1);
graphic.setValue('sencond12', 'some-text');
graphic.setValue('percent12', 'some-text');
graphic.setValue('second13', 'some-text');
graphic.setValue('second14', 'some-text');
graphic.setValue('percent13', 'some-text');
graphic.setValue('percent14', 'some-text');
// Add event listeners
});
// Files could not be loaded, maybe due to security restrictions
// Display error message
graphic.on('error', function() {
document.getElementById('error').style['display'] = 'block';
})
</script>
</body>
</html>
Last edited:
