B4J Question ABMaterial Canvas How-To.

techknight

techknight

Well-Known Member
Licensed User
Longtime User
Is there an AB material for dummies out there? I saw the examples website and it shows all the controls and features it has along with code, but its not really telling me on how everything works, or more importantly how to use anything. I just dont get it...

For example, something as easy as changing the background color of one of the cells to see where it shows up in the page? Nope no idea.

What about adding a scaled background image to the web page? Nope, not a clue....

any help would be appreciated.
 
Sort by date Sort by votes
techknight

techknight

Well-Known Member
Licensed User
Longtime User
And its not transparent :-/

Here is my code. It throws a random button in the page just to see if its transparent.

B4X: 
    Dim pnlTemp As ABMCanvasObject
    pnlTemp.InitializeAsRectangle(page, "pnltemp",550,550,100,100,False)
    DrawLabelWithRect(pnlTemp, "arial", 20, "#000000", "Button", 50, 50, "rgba(173, 255, 47, 0.2)", "#FFFFFF")
    'DrawLabelWithRect(pnlTemp,"arial","5","rgba(173, 255, 47, 0.5)","",50,50,"rgba(173, 255, 47, 0.5)","rgba(173, 255, 47, 0.5)")
    myCanvas.AddObject(pnlTemp)
  
    ' important
    myCanvas.Refresh

Cannot get alpha working at all anymore. No matter what I do. What are you using as a browser??

I tried IE 11 which is built into Win7 and it doesn't even load the page.
 
Last edited:
Upvote 0
alwaysbusy

alwaysbusy

Expert
Licensed User
Longtime User
Seems to work in the demo:

upload_2018-1-18_16-14-0.png


B4X: 
Dim pnlTemp As ABMCanvasObject
pnlTemp.InitializeAsRectangle(page, "pnltemp",500+(100/2),200+(100/2),100,100,True)
DrawLabelWithRect(pnlTemp,"ariel","5","#FFFFFF","",50,50,"rgba(0,255,0,0.2)","#ADFF2F")
canvas1.AddObject(pnlTemp)

As for your mouse pointer that is off, this is because the DrawLabelWithRect is written with center in mind (for the label):

upload_2018-1-18_16-21-28.png


The Green is the InitializeAsRectange, the red is the RoundRect(LabelObject, -halfX, -halfY, halfX*2, halfY*2, 5, True, True)

So if you change it to RoundRect(LabelObject, 0, 0, halfX*2, halfY*2, 5, True, True), green and red will match, but the text will not so if you want text you will need to adjust that.
 
Upvote 0
techknight

techknight

Well-Known Member
Licensed User
Longtime User
Maybe its the placement of the code?

I am placing it in connectpage just before the mycanvas.refresh and page.refresh.

The click position fix worked. Thanks

B4X: 
Sub DrawLabelWithRect(LabelObject As ABMCanvasObject, Font As String, Size As Int, Color As String, Text As String, halfX As Int, halfY As Int, rectColor As String, rectBorderColor As String)
    LabelObject.Clear
    LabelObject.fillStyleColor(rectColor)
    LabelObject.strokeStyleColor(rectBorderColor)
    ' because we 'centered' the origin for the text part, we neeed to undo what we have added for the image part
    RoundRect(LabelObject, 0, 0,  halfX*2, halfY*2, 5, True, True)
    LabelObject.font(Font, Size)
    LabelObject.textBaseline(ABM.CANVAS_TEXTBASELINE_MIDDLE)
    LabelObject.textAlign(ABM.CANVAS_TEXTALIGN_CENTER)
    LabelObject.fillStyleColor(Color)
    LabelObject.fillText(Text, halfX, halfY)
End Sub
 
Last edited:
Upvote 0
alwaysbusy

alwaysbusy

Expert
Licensed User
Longtime User
techknight said:
Maybe its the placement of the code?
Click to expand...
hmmm, in the demo, it is also in ConnectPage:

B4X: 
Sub ConnectPage()
   'NEW
   ABMShared.ConnectNavigationBar(page)
   
   ' add paragraph   
   page.Cell(1,1).AddComponent(ABMShared.BuildParagraph(page,"par1","ABMCanvas is a HTML5 Canvas with Dragging possibilities.  All drawing is done with ABMVCanvasObjects and supports almost all methods described in {AL}http://www.w3schools.com/tags/ref_canvas.asp{AT}{C:#00B183}W3Schools{/C}{/AL}.") )
       
   ' create canvas
   Dim canvas1 As ABMCanvas
   canvas1.Initialize(page, "canvas1", ABM.COLOR_BLACK, ABM.INTENSITY_NORMAL,1024,569, True)
   
   ' create background
   Dim bg As ABMCanvasObject
   bg.InitializeAsRectangle(page, "bg",0,0,1024,569,False)
   bg.drawImage("background", 0,0)
   canvas1.AddObject(bg)

   ' <------------------------------------------------------------------------------------------------------------------->   
   Dim pnlTemp As ABMCanvasObject
   pnlTemp.InitializeAsRectangle(page, "pnltemp",500+(100/2),200+(100/2),100,100,True)
   pnlTemp.SetDragZone(500+(100/2),200+(100/2),1,1)
   DrawLabelWithRect(pnlTemp,"ariel","5","#FFFFFF","",50,50,"rgba(0,255,0,0.2)","#ADFF2F")
   canvas1.AddObject(pnlTemp)
  ' <------------------------------------------------------------------------------------------------------------------->  
   
   page.Cell(2,1).AddComponent(canvas1)
   
   Dim btn As ABMButton
   btn.InitializeRaised(page, "btn", "", "", "Add Kyle", "button")
   page.Cell(3,1).AddComponent(btn)
   ...
 
Upvote 0
techknight

techknight

Well-Known Member
Licensed User
Longtime User
Its a bug somewhere I think.

I noticed when I refreshed the page it was transparent! But it went opaque as soon as the custom digital font came in.
 
Upvote 0
techknight

techknight

Well-Known Member
Licensed User
Longtime User
No, thats the only place I used it. Everything else has been DrawLabel or DrawLabelwithPic.

Just now experimenting with DrawLabelwithRect.

I tried with and without mycanvas.refresh, I moved the cell addobject, I tried lots of things to no avail.

You can Teamviewer into my PC if that would help...
 
Upvote 0
techknight

techknight

Well-Known Member
Licensed User
Longtime User
The DrawLAbelwithRect subroutine is in the same class as the page. Its not in ABMShared or anything like that.
 
Upvote 0
techknight

techknight

Well-Known Member
Licensed User
Longtime User
It WORKS if I do it this way:

B4X: 
    Dim pnlTemp As ABMCanvasObject
    pnlTemp.InitializeAsRectangle(page, "pnlTemp",450,450,100,100,True)
    pnlTemp.SetDragZone(450,450,0.001,0.001)
    'DrawLabelWithRect(pnlTemp, "arial", 20, "#000000", "Button", 50, 50, "rgba(173, 255, 47, 0.2)", "rgba(173, 255, 47, 0.2)")
    'DrawLabelWithRect(pnlTemp,"arial","5","rgba(173, 255, 47, 0.5)","",50,50,"rgba(173, 255, 47, 0.5)","rgba(173, 255, 47, 0.5)")
    pnlTemp.fillStyleColor("rgba(173, 255, 47, 0.2)")
    pnlTemp.fillRect(0,0,100,100)
    myCanvas.AddObject(pnlTemp)

But... This does NOT work. its opaque:

B4X: 
    Dim pnlTemp As ABMCanvasObject
    pnlTemp.InitializeAsRectangle(page, "pnlTemp",450,450,100,100,True)
    pnlTemp.SetDragZone(450,450,0.001,0.001)
    'DrawLabelWithRect(pnlTemp, "arial", 20, "#000000", "Button", 50, 50, "rgba(173, 255, 47, 0.2)", "rgba(173, 255, 47, 0.2)")
    'DrawLabelWithRect(pnlTemp,"arial","5","rgba(173, 255, 47, 0.5)","",50,50,"rgba(173, 255, 47, 0.5)","rgba(173, 255, 47, 0.5)")
    pnlTemp.fillStyleColor("rgba(173, 255, 47, 0.2)")
    RoundRect(pnlTemp, 0, 0,  100, 100, 5, True, False)
    'pnlTemp.fillRect(0,0,100,100)
    myCanvas.AddObject(pnlTemp)

Something to do with the roundrect function.

Why??
 
Upvote 0
techknight

techknight

Well-Known Member
Licensed User
Longtime User
So, a little bit more of expirimentation led to this code:

B4X: 
    Dim pnlTemp As ABMCanvasObject
    pnlTemp.InitializeAsRectangle(page, "pnlTemp",450,450,100,100,True)
    pnlTemp.SetDragZone(450,450,0.001,0.001)
    'DrawLabelWithRect(pnlTemp, "arial", 20, "#000000", "Button", 50, 50, "rgba(173, 255, 47, 0.2)", "rgba(173, 255, 47, 0.2)")
    'DrawLabelWithRect(pnlTemp,"arial","5","rgba(173, 255, 47, 0.5)","",50,50,"rgba(173, 255, 47, 0.5)","rgba(173, 255, 47, 0.5)")
    pnlTemp.fillStyleColor("rgba(173, 255, 47, 0.3)")
    pnlTemp.fillRect(0,0,100,100)
    RoundRect(pnlTemp, 0, 0,  50, 50, 5, True, False)
    myCanvas.AddObject(pnlTemp)

The code above purposely overlays the roundrect of half the size on top of the fillrect transparency. Producing this result:
test.png


Notice the roundrect has no transparency at all for some reason. But your Fillrect routine? Works fine! Figure that one out.
 
Upvote 0
techknight

techknight

Well-Known Member
Licensed User
Longtime User
Let me know if you find the issue and fix it! Thats the last bit of the puzzle that I need to get my app rolling.

However in the mean time, I was able to get the basketball app working perfectly and controlling my hardware :)
 
Upvote 0
techknight

techknight

Well-Known Member
Licensed User
Longtime User
Can you adjust the size of a Modal Dialog? or are they fixed as well? I wanted to put a Canvas on modal dialogs as well for a graphical set-clock function, like I have it in my Android App where its on a panel that I set the visible property.
 
Upvote 0
alwaysbusy

alwaysbusy

Expert
Licensed User
Longtime User
I just don't seem to be able to reproduce your transparency problem :confused:

upload_2018-1-19_9-3-59.png


B4X: 
Sub ConnectPage()
   'NEW
   ABMShared.ConnectNavigationBar(page)
   
   ' add paragraph   
   page.Cell(1,1).AddComponent(ABMShared.BuildParagraph(page,"par1","ABMCanvas is a HTML5 Canvas with Dragging possibilities.  All drawing is done with ABMVCanvasObjects and supports almost all methods described in {AL}http://www.w3schools.com/tags/ref_canvas.asp{AT}{C:#00B183}W3Schools{/C}{/AL}.") )
       
   ' create canvas
   Dim canvas1 As ABMCanvas
   canvas1.Initialize(page, "canvas1", ABM.COLOR_BLACK, ABM.INTENSITY_NORMAL,1024,569, True)
   
   ' create background
   Dim bg As ABMCanvasObject
   bg.InitializeAsRectangle(page, "bg",0,0,1024,569,False)
   bg.drawImage("background", 0,0)
   canvas1.AddObject(bg)
   
   Dim pnlTemp As ABMCanvasObject
   pnlTemp.InitializeAsRectangle(page, "pnlTemp",450,170,100,100,True)
   pnlTemp.SetDragZone(450,170,0.001,0.001)
   'DrawLabelWithRect(pnlTemp, "arial", 20, "#000000", "Button", 50, 50, "rgba(173, 255, 47, 0.2)", "rgba(173, 255, 47, 0.2)")
   'DrawLabelWithRect(pnlTemp,"arial","5","rgba(173, 255, 47, 0.5)","",50,50,"rgba(173, 255, 47, 0.5)","rgba(173, 255, 47, 0.5)")
   pnlTemp.fillStyleColor("rgba(173, 255, 47, 0.3)")
   pnlTemp.fillRect(0,0,100,100)
   RoundRect(pnlTemp, 0, 0,  50, 50, 5, True, False)
   canvas1.AddObject(pnlTemp)
   
   page.Cell(2,1).AddComponent(canvas1)

   ...

B4X: 
Sub RoundRect(labelObject As ABMCanvasObject, x As Int, y As Int, width As Int, height As Int, radius As Int , fill As Boolean, stroke As Boolean)
   labelObject.beginPath
   labelObject.moveTo(x + radius, y)
   labelObject.lineTo(x + width - radius, y)
   labelObject.quadraticCurveTo(x + width, y, x + width, y + radius)
   labelObject.lineTo(x + width, y + height - radius)
   labelObject.quadraticCurveTo(x + width, y + height, x + width - radius, y + height)
   labelObject.lineTo(x + radius, y + height)
   labelObject.quadraticCurveTo(x, y + height, x, y + height - radius)
   labelObject.lineTo(x, y + radius)
   labelObject.quadraticCurveTo(x, y, x + radius, y)
   labelObject.closePath
   If fill Then
       labelObject.fill
   End If
   If stroke Then
       labelObject.stroke
   End If
End Sub
 
Upvote 0
alwaysbusy

alwaysbusy

Expert
Licensed User
Longtime User
I think I found a solution for the transparency problem. It appears the round box (created with a path) IS transparent, BUT because it is drawn (by the HTML5 canvas) several times, appears opaque because if overlays itself a couple of times. After doing some reading up, I found this about the drawing state:

The current path and the current bitmap are not part of the drawing state. The current path is persistent, and can only be reset using the beginPath() method. The current bitmap is a property of the canvas, not the context.
Click to expand...

So for our RoundRect, all we have to do after drawing our rect, is resetting the path:
B4X: 
Sub RoundRect(labelObject As ABMCanvasObject, x As Int, y As Int, width As Int, height As Int, radius As Int , fill As Boolean, stroke As Boolean)
   labelObject.beginPath
   labelObject.moveTo(x + radius, y)
   labelObject.lineTo(x + width - radius, y)
   labelObject.quadraticCurveTo(x + width, y, x + width, y + radius)
   labelObject.lineTo(x + width, y + height - radius)
   labelObject.quadraticCurveTo(x + width, y + height, x + width - radius, y + height)
   labelObject.lineTo(x + radius, y + height)
   labelObject.quadraticCurveTo(x, y + height, x, y + height - radius)
   labelObject.lineTo(x, y + radius)
   labelObject.quadraticCurveTo(x, y, x + radius, y)
   labelObject.closePath
   If fill Then
       labelObject.fill
   End If
   If stroke Then
       labelObject.stroke
   End If
   ' RESETTING THE PATH <----------------------------------------------
   labelObject.beginPath
End Sub
 
Last edited:
Upvote 0
techknight

techknight

Well-Known Member
Licensed User
Longtime User
That fix worked. So simple ;-)

With DrawLabel, how do I go back to Roboto for some labels, and how do i define Bold or Italic?
 
Upvote 0
alwaysbusy

alwaysbusy

Expert
Licensed User
Longtime User
You'll need the font2 method for that:

B4X: 
LabelObject.font2("Roboto", "italic", "normal" , "bold", 40)

Some possible values:

style: Specifies the font style. Possible values:
normal
italic
oblique

variant: Specifies the font variant. Possible values:
normal
small-caps

weight: Specifies the font weight. Possible values:
normal
bold
bolder
lighter
100
200
300
400
500
600
700
800
900
 
Upvote 0
techknight

techknight

Well-Known Member
Licensed User
Longtime User
Got it. Thanks.

BTW I had to simplify and try to reduce my lines of code. So I did and I have this now:

B4X: 
myCanvas.AddObject(DrawButton(cmdHomeUp, "cmdHomeUp", "Roboto", 30, "normal", "#000000", "#ADFF2F", "▲", 0, 235, 100, 100))

Where it used to be:

B4X: 
cmdHomeUp.InitializeAsRectangle(page, "cmdHomeUp",0,235,100,100,True)
cmdHomeUp.SetDragZone(0,235,0.001,0.001)
DrawLabelWithRoundRect(cmdHomeUp, "Roboto", 30, "#000000", "▲", 50, 50, "#ADFF2F", "#ADFF2F")
myCanvas.AddObject(cmdHomeUp)

Updated subroutine:
B4X: 
Sub DrawButton(ButtonObject As ABMCanvasObject, ID As String, Font As String, Size As String, Weight As String, Color As String, ButtonColor As String, Text As String, x As Int, y As Int, width As Int, height As Int) As ABMCanvasObject
    If ButtonObject.IsInitialized = False Then
        ButtonObject.InitializeAsRectangle(page, ID, x, y, width, height, True)
    End If
    ButtonObject.SetDragZone(x,y,0.001,0.001)
    DrawLabelWithRoundRect(ButtonObject, Font, Size, Color, Text, width/2, height/2, ButtonColor, ButtonColor)
    Return ButtonObject
End Sub

In case this helps anyone.
 
Upvote 0
You must log in or register to reply here.

Similar Threads

Mashiane
  • Article
Share My Creation [Web] Sithaso Wireframes - A free tool for the b4x community - (Canva/Figma Alternative)
Replies
6
Views
990
Mashiane
Mashiane
G
  • Question
B4J Question [ABMaterial] ModalSheet Scrollbar issue
Replies
3
Views
3K
Gustavo Retana
G
Harris
  • Article
B4J Tutorial [ABMaterial] For Dummies (beginner lessons)
2
Replies
22
Views
30K
Harris
Harris
max123
  • Article
B4J Code Snippet Remove Aliasing on Canvas horizontal and vertical lines
Replies
0
Views
4K
max123
max123
J
  • Question
B4J Question save canvas in jpg
Replies
8
Views
5K
jota
J
Top