B4J Question ABMaterial Canvas How-To.

techknight · Jan 11, 2018

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.

techknight · Jan 18, 2018

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.

alwaysbusy · Jan 18, 2018

Seems to work in the demo:

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):

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.

techknight · Jan 18, 2018

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

alwaysbusy · Jan 18, 2018

techknight said:
Maybe its the placement of the code?

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)
   ...

techknight · Jan 18, 2018

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.

alwaysbusy · Jan 18, 2018

You are sure there is not somewhere in your code still a DrawLabelWithRect() method that is using the opaque #color instead of the rgba() one?

techknight · Jan 18, 2018

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...

techknight · Jan 18, 2018

The DrawLAbelwithRect subroutine is in the same class as the page. Its not in ABMShared or anything like that.

techknight · Jan 18, 2018

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??

techknight · Jan 18, 2018

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:

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

alwaysbusy · Jan 18, 2018

I'll check it out tomorrow. Seems like the RoundRect routine must have some fine tuning indeed.

techknight · Jan 18, 2018

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

techknight · Jan 19, 2018

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.

alwaysbusy · Jan 19, 2018

I just don't seem to be able to reproduce your transparency problem

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

techknight · Jan 19, 2018

I sent you the project in your e-mail, Maybe its something with the project?

alwaysbusy · Jan 22, 2018

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.

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

techknight · Jan 22, 2018

I will have to give this a shot and see if it works

techknight · Jan 24, 2018

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?

alwaysbusy · Jan 24, 2018

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

techknight · Jan 24, 2018

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.

B4J Question ABMaterial Canvas How-To.

Well-Known Member

Well-Known Member

Expert

Well-Known Member

Expert

Well-Known Member

Expert

Well-Known Member

Well-Known Member

Well-Known Member

Well-Known Member

Expert

Well-Known Member

Well-Known Member

Expert

Well-Known Member

Expert

Well-Known Member

Well-Known Member

Expert

Well-Known Member

Similar Threads

Privacy & Transparency

Privacy & Transparency