Some VFP DOM tests into HTML5 canvas class Part1

Published on by Yousfi Benameur

Html5 canvas is a new surface class drawing and makes a great replacement of gdiplus,gdiplusX.its works only on modern navigators whose support that(chrome,firefox, ie9 and above...).

Some persons can think thats a registry hack .No thats a microsoft invention to make the internet explorer navigator working with preview versions (ie6-7-8-9-10 and 11).

This is some tests to integrate html5 canvas in visual foxpro language.There is no way to do that goal another than the vfp ie browser and DOM but mandatory with emulation (otherwise you have too errors fired by vfp because the html5 is not supported on original IE browser shipped with vfp).

Can refer to this post: http://yousfi.over-blog.com/2015/01/who-said-that-vfp-ie-browser-died.html
to install the emulation (very easy).

the codes below are well tested on vfp9sp2 and IE11 emulation.

See the preview post how to emulate the vfp browser (and also internet explorer application).

Good, after starting the html5 canvas all is well  with the support language as javascript (it seems that is the only one language support for canvas !)

The Document Object Model (or DOM) is a W3C standard that describes an independent interface of any programming language and any platform, allowing computer programs and scripts to access or update the content,(http://fr.wikipedia.org/wiki/Document_Object_Model)

the follow contents show how to work with DOM automation with the html5 canvas.there is some problems i encountered and dont solved at this time:

-the beginPath() dont work with DOM from VFP but work fine from javascript.
-the gradients dont work also

Canvas support many types of declaration colors(rgb,rgba,html colors,named colors....)

 

All is tested on Windows8.1 only.

-*1*-

*Begin code
Publi yform
yform=Newobject("ycanvas")
yform.Show
Read Events
Return
*
Define Class ycanvas As Form
    Top = 10
    Left = 96
    Height = 466
    Width = 708


    ShowWindow=2
    AutoCenter=.T.
    Caption = "Test html5 canvas with DOM"
    Name = "Form1"

    Add Object command1 As CommandButton With ;
        Top = 408, ;
        Left = 24, ;
        Height = 25, ;
        Width = 96, ;
        Caption = "Javascript", ;
        BackColor = Rgb(255,128,64), ;
        Name = "Command1"

    Add Object olecontrol1 As OleControl With ;
        Oleclass="shell.explorer.2",;
        Top = 0, ;
        Left = 0, ;
        Height = 384, ;
        Width = 708, ;
        Anchor = 15, ;
        Name = "Olecontrol1"

    Add Object command2 As CommandButton With ;
        Top = 434, ;
        Left = 26, ;
        Height = 25, ;
        Width = 96, ;
        Caption = "VFP", ;
        BackColor = Rgb(0,255,0), ;
        Name = "Command2"

    Add Object command3 As CommandButton With ;
        Top = 408, ;
        Left = 204, ;
        Height = 25, ;
        Width = 96, ;
        Caption = "Javascript", ;
        BackColor = Rgb(255,128,0), ;
        Name = "Command3"

    Add Object command4 As CommandButton With ;
        Top = 432, ;
        Left = 203, ;
        Height = 25, ;
        Width = 96, ;
        Caption = "VFP", ;
        BackColor = Rgb(0,255,0), ;
        Name = "Command4"

    Add Object command5 As CommandButton With ;
        Top = 408, ;
        Left = 360, ;
        Height = 25, ;
        Width = 120, ;
        FontBold = .T., ;
        Caption = "3D text from VFP", ;
        BackColor = Rgb(0,255,0), ;
        Name = "Command5"

    Add Object command6 As CommandButton With ;
        Top = 434, ;
        Left = 360, ;
        Height = 25, ;
        Width = 119, ;
        FontBold = .T., ;
        Caption = "DrawImage", ;
        BackColor = Rgb(0,255,0), ;
        Name = "Command6"

    Add Object command7 As CommandButton With ;
        Top = 408, ;
        Left = 504, ;
        Height = 25, ;
        Width = 85, ;
        FontBold = .T., ;
        Caption = "DrawLine", ;
        BackColor = Rgb(0,255,0), ;
        Name = "Command7"

    Procedure ybuildcanvas
        Lparameters xwidth,xheight
        If Empty(xwidth)
            xwidth=Thisform.olecontrol1.Width
        Endi
        If Empty(xheight)
            xheight=Thisform.olecontrol1.Height
        Endi
        Local ycanvas,ctx
        Local w,h
        ycanvas=Null
        ctx=Null

        With Thisform.olecontrol1.Document
            ycanvas = .createElement("canvas")
            With ycanvas
                .Id = "ycanvas1"
                .Width=xwidth
                .Height=xheight
                .Style.position = "absolute"
                .Style.Border   = "1px solid"
                .Style.zIndex="100"
                .Style.background="bisque"
            Endwith
            .body.appendChild(ycanvas)
        Endwith
    Endproc

    Procedure Init
        With Thisform
            .SetAll("mousepointer",15,"commandbutton")
            .SetAll("anchor",768,"commandbutton")
        Endwith
    Endproc

    Procedure Load
        Declare Integer Sleep In kernel32 Integer
    Endproc

    Procedure command1.Click
        Local oo,canvas,ctx
        oo=Thisform.olecontrol1
        oo.Navigate("about:blank")
        Sleep(500)
        Thisform.ybuildcanvas()
        Sleep(1000)

        Local m.myvar
        TEXT to m.myvar noshow
        function ycircle(){
        var canvas=document.getElementById("ycanvas1");
        var ctx=canvas.getContext("2d");
        ctx.beginPath();
        ctx.lineWidth="5";
        ctx.arc(100,100,80,0,2*Math.PI);
        ctx.strokeStyle="red";
        ctx.stroke();
        ctx.fillStyle="yellow";
        ctx.fill();
        }
        ENDTEXT

        With oo.Document
            x=.createElement("SCRIPT")
            x.Id="yscript"
            T =.createTextNode(m.myvar)
            x.appendChild(T)
            .body.appendChild(x)
        Endwith
        Sleep(2000)

        *try
        Thisform.olecontrol1.Document.script.ycircle("")
        *catch
        *endtry
    Endproc

    Procedure olecontrol1.Init
        This.silent=.T.
    Endproc


    Procedure command2.Click
        Local oo,canvas,ctx
        oo=Thisform.olecontrol1
        oo.Navigate("about:blank")
        Sleep(500)
        Thisform.ybuildcanvas()
        Sleep(1000)

        canvas=oo.Document.getElementById("ycanvas1")
        ctx=canvas.getContext("2d")
        ctx.beginPath()
        ctx.lineWidth="5"
        ctx.arc(100,100,80,0,2*Pi())
        ctx.strokeStyle="red"
        ctx.stroke()
        ctx.FillStyle="yellow"
        ctx.Fill()
        Messagebox("DOM context begin path dont work from VFP but works from Javascript!",0+32+4096,"Problem")
    Endproc

    Procedure command3.Click
        Local oo,canvas,ctx
        oo=Thisform.olecontrol1
        oo.Navigate("about:blank")
        Sleep(500)
        Thisform.ybuildcanvas()
        Sleep(1000)

        Local m.myvar
        TEXT to m.myvar noshow
        function ygrad(){
        var canvas=document.getElementById("ycanvas1");
         var ctx=canvas.getContext("2d");

         var gradient=ctx.createLinearGradient(0,0,170,0);
         gradient.addColorStop("0","magenta");
         gradient.addColorStop("0.5","blue");
         gradient.addColorStop("1.0","red");

         // Fill with gradient
         ctx.strokeStyle=gradient;
         ctx.lineWidth=5;
         ctx.strokeRect(20,20,150,100);
         ///////////////////////////////////////
         ctx.translate(180,20);
         ctx.font="40px Georgia";
         ctx.fillStyle='red';
         ctx.fillText("Hello World!",10,50);

         }
        ENDTEXT

        With oo.Document
            x=.createElement("SCRIPT")
            x.Id="yscript"
            T =.createTextNode(m.myvar)
            x.appendChild(T)
            .body.appendChild(x)
        Endwith
        Sleep(2000)

        *try
        Thisform.olecontrol1.Document.script.ygrad("")
        *catch
        *endtry
    Endproc

    Procedure command4.Click
        Local oo,canvas,ctx
        oo=Thisform.olecontrol1
        oo.Navigate("about:blank")
        Sleep(500)
        Thisform.ybuildcanvas()
        Sleep(1000)

        canvas=oo.Document.getElementById("ycanvas1")
        ctx=canvas.getContext("2d")

        gradient=ctx.createLinearGradient(0,0,170,0)
        gradient.addColorStop("0","magenta")
        gradient.addColorStop("0.5","blue")
        gradient.addColorStop("1.0","red")

        * Fill with gradient
        ctx.strokeStyle=gradient
        ctx.lineWidth=5
        ctx.strokeRect(20,20,150,100)
        ctx.translate(180,20)
        ctx.Font="40px Georgia"
        ctx.FillStyle="red"
        ctx.fillText("Hello World!",10,50)

        ctx.Font="30px Verdana"
        * Create gradient
        gradient=ctx.createLinearGradient(0,0,canvas.Width,0)
        gradient.addColorStop("0","magenta")
        gradient.addColorStop("0.5","blue")
        gradient.addColorStop("1.0","red")
        *Fill with gradient
        ctx.FillStyle=gradient
        ctx.fillText("Big smile!",10,90)
        Messagebox("DOM context gradient  dont work as expected  from VFP but works from Javascript!",0+32+4096,"Problem")
    Endproc

    Procedure command5.Click
        Local oo,canvas,ctx
        oo=Thisform.olecontrol1
        oo.Navigate("about:blank")
        Sleep(500)
        Thisform.ybuildcanvas()
        Sleep(1000)

        oo=Thisform.olecontrol1
        canvas = oo.Document.getElementById("ycanvas1")
        canvasWidth = canvas.Width
        canvasHeight = canvas.Height
        ctx = canvas.getContext("2d")
        ctx.Font = "64pt Verdana"
        ctx.FillStyle = "gray"
        ctx.textAlign = "center"

        Local texttowrite
        texttowrite=Input("text to  write on canvas","","Foxpro is rock")
        If Empty(texttowrite)
            texttowrite="Foxpro is rock"
        Endi

        Local wdth,hght,dpth
        wdth= canvasWidth/2
        hght=canvasHeight/2
        dpth=4

        Local  i
        For i = 0   To  dpth
            ctx.fillText(texttowrite, wdth - i, hght - i)
        Endfor

        * shadow casting in bottom layers
        ctx.FillStyle = "chocolate"    && can use getcolor() but convert to html also
        ctx.shadowColor = "black"
        ctx.shadowBlur = 8
        ctx.shadowOffsetX = dpth+ 2
        ctx.shadowOffsetY = dpth+ 2
        ctx.fillText(texttowrite, wdth - i, hght - i)

        ctx.strokeText(texttowrite, wdth - i, 100)
    Endproc

    Procedure command6.Click
        Local oo,canvas,ctx
        oo=Thisform.olecontrol1
        oo.Navigate("about:blank")
        Sleep(500)
        Thisform.ybuildcanvas()
        Sleep(1000)

        Local xpict
        m.xpict=Getpict()
        If Empty(m.xpict)
            Return .F.
        Endi

        With oo.Document
            img=.createElement("IMG")
            img.setAttribute("src",m.xpict)
            img.setAttribute("width","640")
            img.setAttribute("Height","480")
            img.setAttribute("id","img")
            .body.appendChild(img)
        Endwith

        canvas =oo.Document.getElementById("ycanvas1")
        ctx = canvas.getContext("2d")
        Sleep(1000)
        yimg = oo.Document.getElementById("img")

        yimg.Style.visibility=[hidden]
        ctx.drawImage(yimg,0,0,canvas.Width,canvas.Height)
        Messagebox("DOM context drawImage works fine  from VFP (and from  Javascript)!",0+32+4096,"Problem")
    Endproc

    Procedure command7.Click
        Local oo,canvas,ctx
        oo=Thisform.olecontrol1
        oo.Navigate("about:blank")
        Sleep(500)
        Thisform.ybuildcanvas()
        Sleep(1000)
        canvas= Thisform.olecontrol1.Document.getElementById("ycanvas1")
        ctx = canvas.getContext("2d")
     

         ctx.lineWidth=5

        ctx.moveTo(50,50)
        ctx.strokeRect(50,50,10,10)
        ctx.lineTo(200,100)
        ctx.stroke()
        Messagebox("DOM context MoveTo() path dont work from VFP but works from Javascript!",0+32+4096,"Problem")
    Endproc

    Procedure Destroy
        Clea Events
    Endproc


Enddefine
*
*-- EndDefine: ycanvas

*End code

 

Some VFP DOM tests into HTML5 canvas class  Part1
Some VFP DOM tests into HTML5 canvas class  Part1
Some VFP DOM tests into HTML5 canvas class  Part1
Some VFP DOM tests into HTML5 canvas class  Part1
Some VFP DOM tests into HTML5 canvas class  Part1
Some VFP DOM tests into HTML5 canvas class  Part1

-*2*-This is a second example showing some diffrences between working with vfp+DOM and working with javascript.The same problems appears with beginpath and gradients.

This uses an internet explorer application (instead a form).

*BEGIN CODE

Declare Integer BringWindowToTop In user32 Integer
Declare Integer SetWindowText In user32 Integer HWnd, String lpstring
Declare Integer Sleep In kernel32 Integer

publi apie

apie=Newobject("internetexplorer.application")
apie.Navigate("about:blank")
Sleep(500)

With apie
    TEXT to m.myvar noshow
 <canvas id="ycanvas1" width="800" height="700" ></canvas>
 <hr style="height:7px;background-color:maroon;">
 <h3 style="color:maroon ;width:700;">
 From visual foxpro
 The circle is not drawn at all (canvas context beginpath)
 the rectangle gradient  is not filled with real gradient but with one color
 the text gradient dont work (filled with one color only)
</h3>
<hr style="height:7px;background-color:maroon;">
    ENDTEXT
    m.myvar=Strtran(m.myvar,Chr(13),"<br>")
    .Document.body.innerhtml=.Document.body.innerhtml+m.myvar

    *drawings from vfp here
    Local oo,canvas,ctx
    canvas=.Document.getElementById("ycanvas1")
    canvas.Style.background=[bisque]
    *Messagebox( trans(canvas.width)+"  "+trans(canvas.height))
    ctx=canvas.getContext("2d")
    ctx.beginPath()

    ctx.lineWidth="5"
    ctx.arc(100,100,80,0,2*Pi())
    ctx.strokeStyle="red"
    ctx.stroke()
    ctx.FillStyle="yellow"
    ctx.Fill()

    gradient=ctx.createLinearGradient(0,0,170,0)
    gradient.addColorStop("0","magenta")
    gradient.addColorStop("0.5","green")
    gradient.addColorStop("1.0","red")

    ctx.translate(200,0)
    ctx.strokeStyle=gradient
    ctx.lineWidth=5
    ctx.strokeRect(20,20,150,100)

    ctx.translate(-100,0)
    ctx.Font="22px Georgia"
    ctx.FillStyle="green"
    ctx.fillText("Hello World! VFP",0,180)

    gradient=ctx.createLinearGradient(0,0,170,0)
    gradient.addColorStop("0","magenta")
    gradient.addColorStop("0.5","green")
    gradient.addColorStop("1.0","red")

    * Fill with gradient
    ctx.FillStyle=gradient
    ctx.lineWidth=5
    ctx.fillRect(20,210,150,100)


    *javascript from here
    TEXT to m.myvar noshow
var canvas=document.getElementById("ycanvas1");
ctx=canvas.getContext("2d");

ctx.translate(-100,350);
ctx.beginPath();
ctx.lineWidth="5";
ctx.arc(100,100,80,0,2*Math.PI);
ctx.strokeStyle="red";
ctx.stroke();
ctx.fillStyle="yellow";
ctx.fill();

var  gradient=ctx.createLinearGradient(0,0,170,0);
 gradient.addColorStop("0","magenta");
 gradient.addColorStop("0.5","green");
 gradient.addColorStop("1.0","red");

 ctx.translate(200,0);
 ctx.strokeStyle=gradient;
 ctx.lineWidth=5;
 ctx.strokeRect(20,20,150,100);

 ctx.translate(-100,0);
 ctx.font="22px Georgia";
 ctx.fillStyle="green";
 ctx.fillText("Hello World! Javascript ",0,200);

 gradient=ctx.createLinearGradient(0,0,170,0);
 gradient.addColorStop("0","magenta");
 gradient.addColorStop("0.5","green");
 gradient.addColorStop("1.0","red");
 // Fill with gradient
 ctx.fillStyle=gradient;
 ctx.lineWidth=5;
 ctx.fillRect(20,210,150,100);
    ENDTEXT

    With apie.Document
        x=.createElement("SCRIPT")
        x.Id="yscript"
        T =.createTextNode(m.myvar)
        x.appendChild(T)
        .body.appendChild(x)
    Endwith
    Sleep(2000)

    .menubar=0
    .Toolbar=0
    .StatusBar=0
    .Height=680
    .Width=800
    .Left=(Sysmetric(1)-.Width)/2
    .Visible=.T.
    BringWindowToTop(.HWnd)
    SetWindowText(.HWnd, "Html5 canvas from VFP and from Javascript")
Endwith

*END CODE

 

 

Some VFP DOM tests into HTML5 canvas class  Part1

*Using DOM logic to work with html5 canvas element in a IE window application

*Begin code

Declare Integer BringWindowToTop In user32 Integer

apie=Newobject("internetexplorer.application")
With apie
    .Navigate("about:blank")
    TEXT to m.myvar noshow
Sorry your browser dont support HTML canvas tag!
    ENDTEXT

    oo=.Document
    ycanvas = oo.createElement("CANVAS")       
&& Create canvas element
    With ycanvas
        .Width=800
        .Height=640
        .Style.background="black"
        .Style.position="absolute"
        .Style.Border="1px solid"
    Endwith
    T = oo.createTextNode(M.myvar)     
&& Create a text node
    ycanvas.appendChild(T)              && Append the text to <canvas>
    oo.body.appendChild(ycanvas)        
&& Append <canvas> to <body>

    ctx=ycanvas.Getcontext("2d")
    Local m.delta
    m.delta=15
    With ctx
        .Strokestyle='red'
        .lineWidth=8
        .StrokeRect(50,50,150,100)
        .FillStyle='rgba(0,255,0,0.4)'
        .fillrect(50,50,150,100)
        .FillStyle='rgba(255,255,0,0.4)'
        .fillrect(50+m.delta,50+m.delta,150,100)
        .Strokestyle="white"
        .StrokeRect(50+m.delta,50+m.delta,150,100)

        .FillStyle='rgba(255,255,0,0.5)'
        .fillrect(50+2*m.delta,50+2*m.delta,150,100)
        .Strokestyle="yellow"
        .StrokeRect(50+2*m.delta,50+2*m.delta,150,100)

        ctx.Font = "48px Batavia"
        ctx.FillStyle="maroon"
        ctx.fillText (" H e l l o  W o r l d !",10,250)

        ctx.FillStyle="black"
        ctx.Strokestyle="gold"
        ctx.strokeText(" H e l l o  W o r l d !",10,350)

        ctx.translate(0,150)
        ctx.Font = "72pt Verdana"
        ctx.FillStyle = "gray"
        ctx.textAlign = "center"

        Local m.texttowrite
        m.texttowrite="Foxpro is rock"
        Local wdth,hght,dpth
        wdth = ycanvas.Width/2
        hght = ycanvas.Height/2
        dpth=4

        Local  i
        For i = 0   To  dpth
            ctx.fillText(texttowrite, wdth - i, hght - i)
        Endfor
        * shadow
        ctx.FillStyle = "chocolate"    && can use getcolor() but convert to html also
        ctx.shadowColor = "black"
        ctx.shadowBlur = 8
        ctx.shadowOffsetX = dpth+ 2
        ctx.shadowOffsetY = dpth+ 2
        ctx.fillText(texttowrite, wdth - i, hght - i)
    Endwith

    _Cliptext=oo.body.innerhtml   &&code in clipboard

    .menubar=0
    .Toolbar=0
    .StatusBar=0
    .Resizable=0
    Messagebox(oo.body.innerhtml)
    BringWindowToTop(.HWnd)
    .Visible=.T.
Endwith

*End code

 

Some VFP DOM tests into HTML5 canvas class  Part1
Some VFP DOM tests into HTML5 canvas class  Part1

-*3*-This is a sample how to use the javascript with vfp.The code use DOM to build the canvas.

the javascript is integrated as script object with DOM.

With this template can use any javascript code to play in vfp form with this ie browser (or in internet explorerapplication).The emulation is recquired mandatory.

this code draws 1000  circles randomly with random colours.

*Begin code
Publi oform
oform=Newobject("ycanvas")
oform.Show
Read Events
Return

Define Class ycanvas As Form
    Top = 9
    Left = 55
    Height = 600
    Width = 856
    ShowWindow = 2
    Caption = "Html5 canvas "
    Name = "Form1"

    Add Object olecontrol1 As OleControl With ;
        Oleclass="shell.explorer.2",;
        Top = 1, ;
        Left = 1, ;
        Height = 561, ;
        Width = 860, ;
        Anchor = 15, ;
        Name = "Olecontrol1"

    Add Object command1 As CommandButton With ;
        Top = 569, ;
        Left = 349, ;
        Height = 25, ;
        Width = 109, ;
        FontBold = .T., ;
        Anchor = 768, ;
        Caption = "1000 circles ", ;
        MousePointer = 15, ;
        BackColor = Rgb(0,255,0), ;
        Name = "Command1"

    Procedure ybuildcanvas
        Lparameters xwidth,xheight
        If Empty(xwidth)
            xwidth=Thisform.olecontrol1.Width
        Endi
        If Empty(xheight)
            xheight=Thisform.olecontrol1.Height
        Endi

        Local ycanvas,ctx
        Local ctx,w,h
        ycanvas=Null
        ctx=Null

        With Thisform.olecontrol1.Document
            ycanvas = .createElement("canvas")
            With ycanvas
                .Id = "ycanvas1"
                .Width=xwidth
                .Height=xheight
                .Style.position = "absolute"
                .Style.Border   = "1px solid"
                .Style.zIndex="100"
                .Style.background="gray"
            Endwith
            .body.appendChild(ycanvas)
        Endwith

        sleep(1000)
        Try
            ctx=ycanvas.getContext("2d")
            ctx.translate(0 ,0)
            ctx.setTransform(1,0,0,1,0,0)
            ctx.FillStyle = '000000'
            ctx.clearRect(0, 0, ycanvas.Width,ycanvas.Height)
        Catch
        Endtry
    Endproc

    Procedure yremovescript
        Lparameters  xId
        Try
            script = Thisform.olecontrol1.Document.getElementById(xId)
            script.parentElement.removeChild(script)
            Thisform.olecontrol1.Refresh
        Catch
        Endtry
    Endproc

    Procedure Init
        Thisform.olecontrol1.Navigate("about:blank")
    Endproc

    Procedure Destroy
        Clea Events
    Endproc


    Procedure olecontrol1.Init
        This.silent=.T.
    Endproc

    Procedure command1.Click
        With _Screen.ActiveForm
            .yremovescript("yscript")
            sleep(200)
            .ybuildcanvas()
            .SetAll("enabled",.F.,"timer")
        Endwith
        TEXT to m.myvar noshow
                var canvas = document.getElementById("ycanvas1");
                var ctx =canvas.getContext("2d");
                var width = canvas.width, height = canvas.height;
                var i = 0;
                do {
                    ctx.fillStyle = "rgba(" + Math.round(255 * Math.random()) + ","
                                               + Math.round(255 * Math.random()) + ","
                                               + Math.round(255 * Math.random()) + ",0.35)";
                    ctx.beginPath();
                    ctx.arc(width * Math.random(), height * Math.random(), 50 * Math.random(), 0, Math.PI * 2, true);
                    ctx.closePath();
                    ctx.fill();
                    ctx.strokeStle="rgba(" + Math.round(255 * Math.random()) + ","
                                               + Math.round(255 * Math.random()) + ","
                                               + Math.round(255 * Math.random()) + ",0.25)";
                    ctx.lineWidth=1;
                    ctx.stroke();
                } while (++i != 1000);
        ENDTEXT

        With _Screen.ActiveForm.olecontrol1.Document
            x=.createElement("SCRIPT")
            x.Id="yscript"
            T =.createTextNode(m.myvar)
            x.appendChild(T)
            .body.appendChild(x)
        Endwith
        sleep(2000)
    Endproc
Enddefine
*
*-- EndDefine: ycanvas

*End code

 

Some VFP DOM tests into HTML5 canvas class  Part1

-*4*-

*this is a small utility i used to studay html5 essentially in www.w3schools.com site.
*it gains me too time to walk on this new domain
.I recommand it.

*Begin code
Publi yform
yform=Newobject("asup")
yform.Show
Read Events
Return
*
Define Class asup As Form
    BorderStyle = 0
    Top = 35
    Left = 175
    Height = 40
    Width = 638
    ShowWindow = 2
    Caption = "Search in w3_Schools"
    MaxButton = .F.
    Icon = Home(1)+"graphics\icons\misc\lighton.ico"
    AlwaysOnTop = .T.
    Name = "Form1"

    Add Object text1 As TextBox With ;
        FontBold = .T., ;
        FontSize = 12, ;
        Height = 37, ;
        Left = 0, ;
        Top = 2, ;
        Width = 553, ;
        AutoComplete = 3, ;
        Name = "Text1"

    Add Object command1 As CommandButton With ;
        AutoSize = .T., ;
        Top = 1, ;
        Left = 556, ;
        Height = 36, ;
        Width = 80, ;
        FontBold = .T., ;
        FontSize = 12, ;
        Caption = "Search", ;
        Default = .T., ;
        MousePointer = 15, ;
        SpecialEffect = 2, ;
        ForeColor = Rgb(255,0,0), ;
        BackColor = Rgb(0,255,0), ;
        Name = "Command1"

    Procedure Load
    Declare Integer BringWindowToTop In user32 Integer
    Endproc

    Procedure Destroy
    Clea Events
    Endproc

    Procedure command1.Click
    Local m.x
    m.x=Thisform.text1.Value
    If Empty(m.x)
        Return .F.
    Endi
    Thisform.WindowState=1

    Local m.xurl
    m.xurl="http://www.w3schools.com/?q="+Allt(m.x)

    Publi apie
    apie=Newobject("internetexplorer.application")
    With apie
        .Navigate(m.xurl)
        .Toolbar=0
        .menubar=0
        .StatusBar=0
        .Width=800
        .Height=600
        .Top=50
        .Visible=.T.
        BringWindowToTop(.HWnd)
    Endwith
    Retu
    Endproc


Enddefine
*
*-- EndDefine: asup

*End code

 

Some VFP DOM tests into HTML5 canvas class  Part1

Click on code to select [then copy] -click outside to deselect

                     
 *5* created on 07 january 2017
*this code builds a DOM canvas (by vfp code) and try to retrieve its PEM (properties/methods/events) by amembers() function.
*i see 73 methods/events returned as well but any property(even width or height) ???
*this is mysterious.yet unsolved DOM canvas & vfp9  problem.

publi oform
oform=newObject("ycanvas")
oform.show
read events
retu
*
DEFINE CLASS ycanvas AS form
Height = 472
Width = 539
ShowWindow = 2
AutoCenter = .T.
Caption = "Test html5 canvas PEM with DOM"
Name = "Form1"

ADD OBJECT olecontrol1 AS olecontrol WITH ;
Oleclass="shell.explorer.2",;
Top = 12, ;
Left = 12, ;
Height = 445, ;
Width = 637, ;
Name = "Olecontrol1"

ADD OBJECT grid1 AS grid WITH ;
Anchor = 15, ;
Height = 466, ;
Left = 4, ;
Top = 2, ;
Width = 536, ;
Name = "Grid1"

PROCEDURE ybuildcanvas
Lparameters xwidth,xheight
If Empty(xwidth)
xwidth=Thisform.olecontrol1.Width
Endi
If Empty(xheight)
xheight=Thisform.olecontrol1.Height
Endi
Local ycanvas,ctx
Local w,h
ycanvas=Null
ctx=Null

With Thisform.olecontrol1.Document
ycanvas = .createElement("canvas")
With ycanvas
.Id = "ycanvas1"
.Width=xwidth
.Height=xheight
.Style.position = "absolute"
.Style.Border   = "1px solid"
.Style.zIndex="100"
.Style.background="bisque"
Endwith
.body.appendChild(ycanvas)
Endwith
ENDPROC

PROCEDURE Destroy
close data all
clea events
ENDPROC

PROCEDURE Activate
with thisform.grid1
.recordsource="ycurs"
.gridlines=0
.deletemark=.f.
.RecordMark=.F.
.column1.width=300
.SetAll("DynamicBackColor","IIF(MOD(RECNO( ), 2)=0, RGB(215,220,218)  , RGB(0,255,0))", "Column")
locate
endwith
thisform.windowstate=0
ENDPROC

PROCEDURE Init

Local oo,canvas,ctx
oo=Thisform.olecontrol1
oo.Navigate("about:blank")
Sleep(500)
Thisform.ybuildcanvas()
Sleep(1000)
oo=thisform.olecontrol1.document.getElementById("ycanvas1")
n=amembers(gaPropArray,m.oo,3)
thisform.windowstate=1
Create Cursor ycurs ( col1 c(70),col2 c(8),col3 c(30),col4  M)
For i=1 To N
Insert Into ycurs Values (gaPropArray(i,1),gaPropArray(i,2),gaPropArray(i,3),gaPropArray(i,4))
Endfor
sele ycurs
*		brow
Locate

thisform.removeObject("olecontrol1")
sele ycurs
thisform.caption=trans(reccount())+" PEM of html5 canvas but all are methods no properties!"
thisform.refresh
ENDPROC

PROCEDURE Load
declare integer Sleep in kernel32 integer
ENDPROC

ENDDEFINE
*
*-- EndDefine:ycanvas



To be informed of the latest articles, subscribe:
Comment on this post