Hi
I have build Component(ABMDigitMeter1). I create three component and put in page.cell. I have put them in the same row and different cell but them display incorrectly. what !?
P.S Every component was draw in a DIV ! following html code is export from project !
following is my abm component code ! every component has own CSS(WriteToCSS)
I have build Component(ABMDigitMeter1). I create three component and put in page.cell. I have put them in the same row and different cell but them display incorrectly. what !?
P.S Every component was draw in a DIV ! following html code is export from project !
B4X:
<div name="page.cell(2,1)" id="r2c1" class="col s12 m12 l12 offset-s0 offset-m0 offset-l0 transparent " style=" margin-top: 0px; margin-bottom: 0px; padding-left: 0px; padding-right: 0px;" >
<div id="bd1" class="">
<script type="text/javascript">
var rootUrl = '../archer/';
var assetUrl = rootUrl + 'assets';
var graphicUrl = rootUrl + 'archer.meter1.svg';
var configUrl = rootUrl + 'archer.meter1.json';
var contbd1;
var grapbd1;
</script>
</div></div>following is my abm component code ! every component has own CSS(WriteToCSS)
B4X:
Sub Class_Globals
Public ABMComp As ABMCustomComponent
Private data As Map
End Sub
'Initializes the object. You can add parameters to this method if needed.
Public Sub Initialize(InternalPage As ABMPage, ID As String)
data.Initialize
data.Put("backtext","00.00")
data.Put("fronttext","00.00")
data.Put("title",ID)
data.Put("unit","")
'
InternalPage.AddExtraCSSFile("custom/"&ID&".css")
WritetoCSS(ID)
'InternalPage.AddExtraJavaScriptFile("custom/"&ID&".js")
'WritetoJS(ID)
ABMComp.Initialize("ABMComp", Me, InternalPage, ID)
End Sub
public Sub AddExtraJavaScriptFile(page As ABMPage)
page.AddExtraJavaScriptFile("custom/archer.min.js")
End Sub
private Sub ABMComp_Build(internalID As String) As String
Return $"
<script type="text/javascript">
var rootUrl = '../archer/';
var assetUrl = rootUrl + 'assets';
var graphicUrl = rootUrl + 'archer.meter1.svg';
var configUrl = rootUrl + 'archer.meter1.json';
var cont${internalID};
var grap${internalID};
</script>
"$
End Sub
' Is useful to run some initalisation script.
private Sub ABMComp_FirstRun(InternalPage As ABMPage, internalID As String)
Dim script As String = $"
cont${internalID} = document.getElementById('${internalID}');
grap${internalID} = archer.create(cont${internalID});
grap${internalID}.document.setAssetRoot(assetUrl);
grap${internalID}.loadUrl(graphicUrl, configUrl);
grap${internalID}.on('ready', function () {
// Make graphic fit into container bounds
grap${internalID}.view.zoomToFit(0,false);
//graphic.view.centerAt(-800,0, true);
// Enable zoom / pan with mouse
grap${internalID}.view.enableMouse(false,false);
// Set variable values
grap${internalID}.setValue('fronttext','${data.Get("fronttext")}');
grap${internalID}.setValue('backtext', '${data.Get("backtext")}');
grap${internalID}.setValue('title', '${data.Get("title")}'');
grap${internalID}.setValue('unit', '${data.Get("unit")}');"$
}); "$
InternalPage.ws.Eval(script, Array As Object(ABMComp.ID))
End Sub
public Sub Refresh
If ABMComp.IsInitialized Then
ABMComp.Refresh
End If
End Sub
' runs when a refresh is called
private Sub ABMComp_Refresh(InternalPage As ABMPage, internalID As String)
Dim script As String = updateValue(InternalPage,internalID)
InternalPage.ws.Eval(script, Array As Object(ABMComp.ID))
End Sub
Private Sub updateValue(InternalPage As ABMPage, internalID As String) As String
Dim script As String = $"
grap${internalID}.setValue('fronttext', 'some-text');
grap${internalID}.setValue('backtext', 'some-text');
grap${internalID}.setValue('title', 'some-text');
grap${internalID}.setValue('unit', 'some-text');"$
Return script
End Sub
'
Sub MeterValue(value As String)
data.Put("fronttext",value)
End Sub
'
Sub MeterTitle(value As String)
data.Put("title",value)
End Sub
'
Sub MeterUnit(value As String)
data.Put("unit",value)
End Sub
'
Sub MeterBackText(value As String)
data.Put("backtext",value)
End Sub
' do the stuff needed when the object is removed
private Sub ABMComp_CleanUp(InternalPage As ABMPage, internalID As String)
End Sub
private Sub WritetoCSS(internalID As String) As String
Dim s1 As String=$"#${internalID} {
position: relative;
width: 128px;
height: 64px;
top:0px;
left:0px;
}"$
' position: relative;
' margin-left: 0px;
' margin-top: 0px;
Dim s3 As String="www\css\custom\"&internalID&".css"
File.WriteString(File.DirApp,s3,s1)
Return s1
End Sub
Last edited:
