2D drawing using HR element

Author Message
u jayakodi

  • Total Posts : 17
  • Scores: 0
  • Reward points : 0
  • Joined: 9/30/2010
  • Status: offline
2D drawing using HR element Thursday, September 30, 2010 7:48 PM (permalink)
0
u jayakodi
e-mail jayakodiu@yahoo.com
 
The <HR> element is the simplest in HTML; I was wondering why there are no <IR> and <VR> elements for inclined and vertical lines and saw some vague info on the net. Digging a bit deeper, I have made a few vbscript routines which give the <HR> element capabilities of 2D drawing by applying IE's transformation matrix; it can draw any line, rectangles, polygons, xy charts and curves of any color and any thickness.
 
The enclosed zip file has the vbs file used as a source and a demo file '2DdrawHRvbs.htm'; soon I may add save function; any suggestion for print function is welcome.
 
#1
    u jayakodi

    • Total Posts : 17
    • Scores: 0
    • Reward points : 0
    • Joined: 9/30/2010
    • Status: offline
    Re:2D drawing using HR element Thursday, September 30, 2010 7:53 PM (permalink)
    0
    u jayakodi
    jayakodiu@yahoo.com
     
    I could not attach the zip file mentioned in my last post; the demo html file and the source vbs files are as below in text:
    ------
    demo file:
     
    <html>
    <head><script language=vbs src="jhrdr.vbs"></script></head>
    <body></body>
    <script language=vbs>
    cl="#00aa00"
    jlin 50,50,500,150
    cl="#ff0000"
    htx 5,65,"Rectangles"
    rect 50,85,75,170
    rect 100,100,200,170
    cl="#0000ff"
    th=2
    htx 5,170,"Polygons"
    poln 90,190,70,3
    poln 180,190,60,4
    poln 280,190,50,5
    poln 380,190,40,6
    htx 5,280,"XY chart"
    cl=0
    th=1
    jlin 58,300,58,500
    jlin 5,420,510,420
    jlin 5,460,510,460
    jlin 5,500,510,500
    htx 5,475,"Distance"
    htx 5,435,"Levels"
    cl="#ff00ff"
    th=3
    sx=70
    sy=400
    for i=0 to 8
    xx=70+i*50
    yy=400-2*i*i
    jlin sx,sy,xx,yy
    sx=xx
    sy=yy
    vtx sx,475,i
    vtx sx,435,2*i*i
    next
    cl="#ffaa11"
    htx 660,210,"Sine Curve"
    sx=600
    sy=40
    gg=pi/10
    for i=0 to 50
    xx=600+50*sin(i*gg)
    yy=40+10*i
    jlin sx,sy,xx,yy
    sx=xx
    sy=yy
    next
    cl=0
    th=1
    jlin 600,40,600,540
    jdv.style.filter="progid:DXImageTransform.Microsoft.BasicImage(rotation=1)"
    jdv.style.fontSize=24
    jdv.style.textDecoration="underline"
    </script>
    </html>
    ----------------
     
    jhrdr.vbs file:
     
    dim cl,th,pi,jdv
    cl="#000000"
    th=1
    pi=4*atn(1)
    set ss1 = document.createElement("style")
    ss1.setAttribute "type", "text/css"
    sst="hr{position:absolute}"
    sst=sst+"span{position:absolute;font-family:arial;font-size:12;filter=progid:DXImageTransform.Microsoft.BasicImage( rotation=3)}"
    sst=sst+"BODY{margin:0;cursor:crosshair}"
    ss1.styleSheet.csstext=sst
    set hh1 = document.getElementsByTagName("head")(0)
    hh1.appendChild ss1
    sub jlin(x1,y1,x2,y2)
    set ele=document.body.appendchild(document.createelement("hr"))
    dx=abs(x2-x1)
    dy=abs(y2-y1)
    ln=1+sqr(dx*dx+dy*dy)
    ele.style.width=ln
    ele.style.height=th
    ele.style.color=cl
    if dx=0 then dx=0.0000001
    ag=atn(dy/dx)
    if x2>x1 and y2<y1 then ag=2*pi-ag
    if x2<x1 then
    if y2>y1 then ag=pi-ag else ag=ag+pi
    end if
    sn=sin(ag)
    cs=cos(ag)
    ele.style.filter="progid:DXImageTransform.Microsoft.Matrix(sizingmethod='auto expand')"
    ele.filters.item(0).M11 = cs
    ele.filters.item(0).M12 = -sn
    ele.filters.item(0).M21 = sn
    ele.filters.item(0).M22 = cs
    if x2<x1 then x1=x2
    if y2<y1 then y1=y2
    ele.style.left=x1
    ele.style.top=y1
    end sub
    sub rect(x1,y1,x2,y2)
    jlin x1,y1,x2,y1
    jlin x2,y1,x2,y2
    jlin x2,y2,x1,y2
    jlin x1,y2,x1,y1
    end sub
    sub poln(x,y,a,n)
    g=2*pi/n
    for i=1 to n
    xx=x+a*cos(i*g)
    yy=y+a*sin(i*g)
    jlin x,y,xx,yy
    x=xx
    y=yy
    next
    end sub
    sub htx(x,y,tt)
    set jdv=document.body.appendChild(document.createElement("span"))
    jdv.style.left=x
    jdv.style.top=y
    jdv.style.filter=""
    jdv.innerText=tt
    end sub
    sub vtx(x,y,tt)
    set jdv=document.body.appendChild(document.createElement("span"))
    jdv.style.left=x
    jdv.style.top=y
    jdv.innerText=tt
    end sub
     
    #2
      TNO

      • Total Posts : 2094
      • Scores: 36
      • Reward points : 0
      • Joined: 12/18/2004
      • Location: Earth
      • Status: offline
      Re:2D drawing using HR element Saturday, October 02, 2010 8:29 AM (permalink)
      0
      Interesting approach but with VML being available you could gain significant efficiency:

      <v:line from="10,10" to="100,100"></v:line>

      Here are some other alternatives that may interest you:

      http://www.uselesspickles.com/triangles/demo.html
      http://www.p01.org/releas...g_lines_in_JavaScript/

      To iterate is human, to recurse divine. -- L. Peter Deutsch
       
      #3
        u jayakodi

        • Total Posts : 17
        • Scores: 0
        • Reward points : 0
        • Joined: 9/30/2010
        • Status: offline
        Re:2D drawing using HR element Sunday, October 03, 2010 11:53 PM (permalink)
        0
        TNO


        Interesting approach but with VML being available you could gain significant efficiency:

        <v:line from="10,10" to="100,100"></v:line>

        Here are some other alternatives that may interest you:

        http://www.uselesspickles.com/triangles/demo.html
        http://www.p01.org/releases/Drawing_lines_in_JavaScript/


        Yes, VML is easy - but on its way out?!? My purpose was to demonstrate that the common HR element can be used for line / polygon / curve drawings with a matrix 'rotator' for which standard procedures are available; otherwise, the DIV element has been the only route.
         
        u jayakodi
         
         
        #4
          TNO

          • Total Posts : 2094
          • Scores: 36
          • Reward points : 0
          • Joined: 12/18/2004
          • Location: Earth
          • Status: offline
          Re:2D drawing using HR element Monday, October 04, 2010 1:55 AM (permalink)
          0
          u jayakodi


          Yes, VML is easy - but on its way out?!?
           


          VML was never a Web standard. Starting with IE9, the better alternatives are to use SVG or CANVAS. Hopefully IE10 will support WebGL like other modern browsers then you'll have a native, hardware accelerated 3D API:
          http://learningwebgl.com/blog/
          To iterate is human, to recurse divine. -- L. Peter Deutsch
           
          #5

            Online Bookmarks Sharing: Share/Bookmark

            Jump to:

            Current active users

            There are 0 members and 1 guests.

            Icon Legend and Permission

            • New Messages
            • No New Messages
            • Hot Topic w/ New Messages
            • Hot Topic w/o New Messages
            • Locked w/ New Messages
            • Locked w/o New Messages
            • Read Message
            • Post New Thread
            • Reply to message
            • Post New Poll
            • Submit Vote
            • Post reward post
            • Delete my own posts
            • Delete my own threads
            • Rate post

            2000-2012 ASPPlayground.NET Forum Version 3.9