Visual Prolog and SVG

 

 

Scalable Vector Graphics (SVG) 1.1 Specification offers enormous possibilities also used with Visual Prolog in creating graphical output.

 

The svgDrawing class for Visual Prolog 6 uses only a part of these possibilities. The idea in defining the predicates was, that they would so “equal” as possible compared with the own drawing predicates of VIP6. So modifying old code to produce svg output is relative easy.

 

Examples:

        Business graphics charts

        Some animation examples

        Project management charts

 

 

In the class is no svg – syntax checking, so be careful when you add extra styles, scripts and animation commands.

 

Creating and closing a svg-outputstream.. 1

Basic shapes. 3

Color naming. 3

Line. 3

Rect 4

Rect with gradient colouring. 5

Circle. 5

Ellipse. 6

Polyline. 7

Polygon. 7

Text 8

Add Link to Object 10

 

 

Creating and closing a svg-outputstream

 

predicates
 
        createSVGPicture:(string FileName,
                                    unsigned WIDTH,
                                    unsigned HEIGHT) -> outputstream procedure(i,i,i).
        % @short Creating svg-file predicate. 
        % @detail This predicate creates the outputstream to a file.
        %Width an height are in pixels and the the viewport to the graph is 0,0,width,height.
        % @end
        createSVGPicture:(string FileName,
                                    unsigned WIDTH,
                                    unsigned HEIGHT,
                                    string Unit,
                                    integer Viewport_X1,
                                    integer Viewport_Y1,
                                    integer Viewport_X2,
                                    integer Viewport_Y2) -> outputstream procedure(i,i,i,i,i,i,i,i).
        % @short Creating svg-file predicate. 
        % @detail This predicate creates the outputstream to a file.
        %    Width an height are in pixels if the unit string is empty. Unit possibilities are px, dpi, cm, mm,in,pt, pc,em
        %   Vieport coordinates in pixels.
        % @end
        createSVGPicture:(string FileName,
                                    unsigned WIDTH,
                                    unsigned HEIGHT,
                                    string Unit,
                                    integer Viewport_X1,
                                    integer Viewport_Y1,
                                    integer Viewport_X2,
                                    integer Viewport_Y2,
                                    string OnLOAD) -> outputstream procedure(i,i,i,i,i,i,i,i,i).
        % @short Creating svg-file predicate. 
        % @detail This predicate creates the outputstream to a file.
        %   Adds an onload event of a script. See example. 
        %   Width an height are in pixels if the unit string is empty. Unit possibilities are px, dpi, cm, mm,in,pt, pc,em
        %   Vieport coordinates in pixels.
        % @end
 
        closeSVG:(outputstream) procedure(i).
         % @short Closes the svg outputstream. 
        %  @detail Closes the file. The predicate must be in the end of drawing routines.
        %  @end
 

 

 

Example:

 

           

            OUT = createSVGPicture("clock.svg",300,300,"",0,0,300,300,"SetTime(evt)"),

            X0=150,

            Y0 =150,

            A = 80,

            B = 80,

            STR0 = "\n<defs>\n<script language=\"Javascript\">\n<![CDATA[\n\nfunction SetTime(LoadEvent)\n{\nvar Now = new Date();\n\nvar Seconds = Now.getSeconds();\nvar Minutes = Now.getMinutes() + Seconds / 60;\nvar Hours = Now.getHours() + Minutes / 60;\n\nvar SVGDocument = LoadEvent.getTarget().getOwnerDocument();\n\nSVGDocument.getElementById(\"seconds\").setAttribute('transform', 'rotate(' + (Seconds * 6) + ')');\nSVGDocument.getElementById(\"minutes\").setAttribute('transform', 'rotate(' + (Minutes * 6) + ')');\nSVGDocument.getElementById(\"hours\").setAttribute('transform', 'rotate(' + (Hours * 30) + ')');\n}\n\n]]>\n</script>\n</defs>",

            addScript(OUT,STR0),

            addGroup(OUT,""),

                drawSVGCircle(OUT, X0,Y0,A,noColor,rgb(255,80,255),2,[],[]),

             countCoordinates(0,A,B,X0,Y0,X1,Y1),

             drawSVGText(OUT,X1,Y1+3,"3",8,dtext_center,rgb(0,0,0),0),

                countCoordinates(30,A,B,X0,Y0,X11,Y11),

                drawSVGCircle(OUT,X11,Y11,3,rgb(255,0,0),noColor,0,[],[]),

                countCoordinates(60,A,B,X0,Y0,X12,Y12),

                drawSVGCircle(OUT,X12,Y12,3,rgb(255,0,0),noColor,0,[],[]),

             countCoordinates(90,A,B,X0,Y0,X2,Y2),

             drawSVGText(OUT,X2,Y2+3,"6",8,dtext_center,rgb(0,0,0),0),

                countCoordinates(120,A,B,X0,Y0,X21,Y21),

                drawSVGCircle(OUT,X21,Y21,3,rgb(255,0,0),noColor,0,[],[]),

                countCoordinates(150,A,B,X0,Y0,X22,Y22),

                drawSVGCircle(OUT,X22,Y22,3,rgb(255,100,0),noColor,0,[],[]),

             countCoordinates(180,A,B,X0,Y0,X3,Y3),

             drawSVGText(OUT,X3,Y3+3,"9",8,dtext_center,rgb(0,0,0),0),

                countCoordinates(210,A,B,X0,Y0,X31,Y31),

                drawSVGCircle(OUT,X31,Y31,3,rgb(255,0,0),noColor,0,[],[]),

                countCoordinates(240,A,B,X0,Y0,X32,Y32),

                drawSVGCircle(OUT,X32,Y32,3,rgb(255,0,0),noColor,0,[],[]),

             countCoordinates(270,A,B,X0,Y0,X4,Y4),

             drawSVGText(OUT,X4,Y4+3,"12",8,dtext_center,rgb(0,0,0),0),

                countCoordinates(300,A,B,X0,Y0,X41,Y41),

                drawSVGCircle(OUT,X41,Y41,3,rgb(255,0,0),noColor,0,[],[]),

                countCoordinates(330,A,B,X0,Y0,X42,Y42),

                drawSVGCircle(OUT,X42,Y42,3,rgb(255,0,0),noColor,0,[],[]),

            endGroup(OUT),

            STRORIGO = string::format("transform='translate(% %)'",X0,Y0),

               addGroup(OUT,STRORIGO),

                addgroup(OUT,"id='hours'"),

                                STR1= "<animateTransform attributeName='transform' type='rotate' dur='43200s' values='0;360' repeatCount='indefinite'/>",

                                drawSVGLine(OUT,pnt(0,0),pnt(0,-convert(integer,A/2)),rgb(0,0,0),4,[],[STR1]),

                endGroup(OUT),

                addgroup(OUT,"id='minutes'"),

                                STR2= "<animateTransform attributeName='transform' type='rotate' dur='3600s' values='0;360' repeatCount='indefinite'/>",

                                drawSVGLine(OUT,pnt(0,0),pnt(0,-convert(integer,2*A/3)),rgb(0,0,255),4,[],[STR2]),

                endGroup(OUT),

                addgroup(OUT,"id='seconds'"),

                                STR3= "<animateTransform attributeName='transform' type='rotate' dur='60s' values='0;360' repeatCount='indefinite'/>",

                                drawSVGLine(OUT,pnt(0,0),pnt(0,convert(integer,-4*A/5)),rgb(0,255,0),2,[],[STR3]),

                endGroup(OUT),

                drawSVGCircle(OUT,0,0,3,rgb(255,0,0),noColor,0,[],[]),

            endGroup(OUT),

            closeSVG(OUT),

 

 

Basic shapes

 

Color naming

 

domains
   rgb = rgb(integer,integer,integer); noColor; s(string).

 

examples

 

             drawSVGText(OUT,X2,Y2+3,"6",8,dtext_center,rgb(0,0,0),0),

             drawSVGCircle(OUT,0,0,3,rgb(255,0,0),noColor,0),

             drawSVGPolygon(OUT,closelist,s("url(#tausta)"),rgb(169, 169, 169),1,"fill-opacity:1",[]),

 

 

You can also use recognized color keyword names mentioned in chapter 4.2

             drawSVGCircle(OUT,0,0,3,rgb(255,0,0),s(“lightblue”),0),

 

 

 

 

 

Line

 

        drawSVGLine:(outputstream,
                             pnt StartPoint, 
                             pnt EndPoint,
                             rgb StrokeColor, 
                             unsigned StrokeWidth) procedure(i,i,i,i,i).
 
        drawSVGLine:(outputstream,
                              pnt StartPoint,
                              pnt EndPoint,
                              rgb StrokeColor,
                              unsigned StrokeWidth, 
                              string_list ExtraStyles,
                              string_list ANIMATION_COMMANDLIST) procedure(i,i,i,i,i,i,i).
 

 

Example:

 

(svg-picture)

 

 

            OUT = createSVGPicture("line.svg",10,4,"cm",0,0,300,100),

                drawSVGRect(OUT,rct(0,0,300,100),noColor,rgb(0,0,0),2),

                drawSVGLine(OUT,pnt(20,25),pnt(280,25),rgb(255,0,0),2),

                drawSVGLine(OUT,pnt(20,50),pnt(280,50),s("blue"),3,["stroke-dasharray:10,4,5,4"],[]),

                drawSVGLine(OUT,pnt(20,75),pnt(280,75),s("black"),2,["stroke-dasharray:2,2"],[]),

            closeSVG(OUT),

 

 

 

Rect

 

         
         drawSVGRect:(outputstream,
                               rct, 
                               rgb FillColor,
                               rgb StrokeColor,
                               unsigned STROKEWIDTH) procedure(i,i,i,i,i).
    
        drawSVGRect:(outputstream,
                              rct, 
                              rgb FillColor,
                              rgb StrokeColor,
                              unsigned STROKEWIDTH,
                              string_list ExtraSTYLES,
                              string_list COMMANDLIST) procedure(i,i,i,i,i,i,i).
 

 

Example:

 

 

(svg-picture)

 

           

            OUT = createSVGPicture("rect1.svg",10,4,"cm",0,0,300,100),

                drawSVGRect(OUT,rct(10,10,100,80),noColor,rgb(0,0,255),3),

                drawSVGRect(OUT,rct(150,30,280,60),s("palegoldenrod"),rgb(0,0,255),1),

            closeSVG(OUT),

 

 

Rect with gradient colouring

 

    constants
        gradient_left_right =1.
        gradient_right_left = 2.
        gradient_top_bottom=3.
        gradient_bottom_top=4.
        gradient_left_top_right_bottom=5.
        gradient_left_bottom_right_top=6.
 
    predicates
        drawSVGLinearGradientRect:(outputstream, 
                                                   rct, 
                                                   offsetStopList, 
                                                   integer Direction, 
                                                   rgb StrokeColor,
                                                   unsigned StrokeWidth) procedure(i,i,i,i,i,i).
 
        drawSVGLinearGradientRect:(outputstream, 
                                                   rct, 
                                                   offsetStopList, 
                                                   integer Direction, 
                                                   rgb StrokeColor,
                                                   unsigned StrokeWidth,
                                                   string_list ExtraStyles,
                                                   string_list ANIMATION_COMMANDLIST) procedure(i,i,i,i,i,i,i,i).
 
        drawSVGRadialGradientRect:(outputstream, 
                                                   rct, 
                                                   offsetStopList, 
                                                   rgb StrokeColor,
                                                   unsigned StrokeWidth) procedure(i,i,i,i,i).
        drawSVGRadialGradientRect:(outputstream, 
                                                   rct, 
                                                   offsetStopList, 
                                                   rgb StrokeColor,
                                                   unsigned StrokeWidth, 
                                                   string_list ExtraStyles,
                                                   string_list ANIMATION_COMMANDLIST) procedure(i,i,i,i,i,i,i).
 

 

See example below in Add link to Object.

 

Circle

        drawSVGCircle:(outputstream, 
                                integer CenterX, 
                                integer CenterY, 
                                integer Radius,
                                rgb FillColor) procedure(i,i,i,i,i).
        drawSVGCircle:(outputstream, 
                                integer CenterX, 
                                integer CenterY, 
                                integer Radius,
                                rgb FillColor,
                                rgb StrokeColor, 
                                unsigned StrokeWidth,
                                string_list ExtraStyles,
                                string_list ANIMATION_COMMANDLIST) procedure(i,i,i,i,i,i,i,i,i).
 

 

Example

 

(svg-picture)

 

 

            OUT = createSVGPicture("circle1.svg",10,4,"cm",0,0,300,100),

                drawSVGCircle(OUT,90,50,40,noColor),

                drawSVGCircle(OUT,170,20,20,s("blue")),

                drawSVGCircle(OUT,170,80,20,rgb(255,255,0)),’

                drawSVGCircle(OUT,210,50,40,rgb(0,255,0),rgb(255,0,0),3,["fill-opacity:0.4"],[]),

            closeSVG(OUT),

 

 

Ellipse

        drawSVGEllipse:(outputstream, 
                                 rct, 
                                 rgb FillColor,
                                 rgb StrokeColor, 
                                 unsigned StrokeWidth) procedure(i,i,i,i,i).
        drawSVGEllipse:(outputstream, 
                                 rct, 
                                 rgb FillColor,
                                 rgb StrokeColor, 
                                 unsigned StrokeWidth,
                                 string_list ExtraStyles,
                                 string_list ANIMATION_COMMANDLIST) procedure(i,i,i,i,i,i,i).
 

Example:

(svg-picture)

 

 

            OUT = createSVGPicture("ellipse2.svg",400,200),

                drawSVGEllipse(OUT,rct(10,10,150,190),rgb(250,34,112),rgb(0,0,0),2),

                drawSVGEllipse(OUT,rct(210,50,380,150),rgb(2,34,112),rgb(255,0,0),4),

                drawSVGEllipse(OUT,rct(80,80,340,120),s("gold"),s("silver"),5,["fill-opacity:0.3","stroke-opacity:0.5"],[]),

            closeSVG(OUT),

 

 

Polyline

        drawSVGPolyline:(outputstream, 
                                   vpiDomains::pntlist PointLIST,
                                   rgb FillColor,
                                   rgb StrokeColor, 
                                   unsigned StrokeWidth) procedure(i,i,i,i,i).
        drawSVGPolyline:(outputstream, 
                                   vpiDomains::pntlist PointLIST,
                                   rgb FillColor,
                                   rgb StrokeColor, 
                                   unsigned StrokeWidth,
                                   string_list ExtraStyles,
                                   string_list ANIMATION_COMMANDLIST) procedure(i,i,i,i,i,i,i).
        

Example:

(svg-picture)

 

 

 

            OUT = createSVGPicture("polyline.svg",300,100,"",0,0,300,100),

                PLIST1 = [pnt(10,10),pnt(20,80),pnt(22,50),pnt(40,20),pnt(60,80),pnt(80,90),pnt(120,20)],

                drawSVGPolyline(OUT,PLIST1,noColor,rgb(0,100,0),2),

                PLIST2 = [pnt(150,10),pnt(170,80),pnt(172,50),pnt(190,20),pnt(210,80),pnt(230,90),pnt(280,20)],

                drawSVGPolyline(OUT,PLIST2,s("gold"),rgb(0,100,0),4),

            closeSVG(OUT),

 

 

Polygon

        drawSVGPolygon:(outputstream, 
                                   pntlist PointLIST,
                                   rgb FillColor,
                                   rgb StrokeColor, 
                                   unsigned StrokeWidth) procedure(i,i,i,i,i).
                                   
        drawSVGPolygon:(outputstream, 
                                   pntlist PointLIST,
                                   rgb FillColor,
                                   rgb StrokeColor, 
                                   unsigned StrokeWidth,
                                   string_list ExtraSTYLES,
                                   string_list ANIMATION_COMMANDLIST) procedure(i,i,i,i,i,i,i).
 

Example:

(svg-picture)

 

 

 

 

            OUT = createSVGPicture("polygon.svg",300,100,"",0,0,300,100),

                PLIST1 = [pnt(10,10),pnt(20,80),pnt(22,50),pnt(40,20),pnt(60,80),pnt(80,90),pnt(120,20)],

                drawSVGPolygon(OUT,PLIST1,noColor,rgb(0,100,0),2),

                PLIST2 = [pnt(150,10),pnt(170,80),pnt(172,50),pnt(190,20),pnt(210,80),pnt(230,90),pnt(280,20)],

                drawSVGPolygon(OUT,PLIST2,s("gold"),rgb(0,100,0),4),

            closeSVG(OUT),

 

 

 

Text

The text drawing possibilities in svg standard are not very developed, when you want to write multiple lines.

 

constants used for align
 
dtext_left, dtext_right, dtext_left
 
 
predicates
        drawSVGText:(outputstream,
                              integer X,
                              integer Y,
                              string TXT,
                              unsigned FONTSIZE,
                              integer Alignment) procedure(i,i,i,i,i,i).
 
        drawSVGText:(outputstream, 
                              integer X,
                              integer Y,
                              string TXT,
                              unsigned FONTSIZE, 
                              integer Align, 
                              rgb COLOR,
                              integer ANGLE) procedure(i,i,i,i,i,i,i,i).
 
        drawSVGText:(outputstream, 
                             integer X,
                             integer Y,
                             string TXT,
                             unsigned FONTSIZE,
                             integer Align,
                             rgb COLOR,
                             integer ANGLE,
                             string ExtraStyles,
                             string_list ANIMATION_COMMANDLIST) procedure(i,i,i,i,i,i,i,i,i,i).
 
        drawSVGTextInRect:(outputstream,
                                       rct,
                                       string Text,
                                       integer FONTSIZE) determ(i,i,i,i).
 
        drawSVGTextInRect: (outputstream, 
                                        rct, 
                                        string Text, 
                                        integer FONTSIZE, 
                                        rgb FontColor) determ(i,i,i,i,i).
 

 

Example:

(svg-picture)

 

 

            OUT = svgDrawing::createSVGPicture("text1.svg",400,200),

                STR1 = "Hello how are you there behind the screen !",

                STR2 = "Hello there !!!!",

                drawSVGRect(OUT,rct(10,10,100, 100),noColor,s("black"),1),

                drawSVGTextInRect(OUT,rct(10,10,100, 200),STR1,12,rgb(0,0,255)),

                drawSVGText(OUT,150,100,STR1,10,dtext_left,rgb(255,0,0),20),

                drawSVGText(OUT,150,100,STR1,10,dtext_left,rgb(255,0,255),-20),

                drawSVGText(OUT,10,190,STR2,30,dtext_left,rgb(255,0,255),0,["stroke:black","stroke-width: 1"],[]),

            closeSVG(OUT),

 


Add Link to Object

 

        addLinkToObject:(outputstream,
                                  string STR) procedure(i,i).
        
        endObjectLink:(outputstream) procedure(i).
 

 

Example:

 

 

(svg-picture)

 

 

 

        S = svgDrawing::createSVGPicture("test41.svg",500,200),

        svgDrawing::drawSVGRect(S, rct(0,0,600,200),svgDrawing::rgb(125,125,125),svgDrawing::rgb(0,0,0),3),

             svgDrawing::addLinkToObject(S,"http://www.koti.welho.com/krastas"), 

               svgDrawing::drawSVGLinearGradientRect(S,

                                                                             rct(10,40,240,160),

                                                                               [svgDrawing::offsetStopColor(15,svgDrawing::rgb(120,0,255)),

                                                                                svgDrawing::offsetStopColor(50,svgDrawing::rgb(0,255,0)),

                                                                                svgDrawing::offsetStopColor(75,svgDrawing::rgb(0,0,255))],

                                                                                svgDrawing::rgb(255,255,255),

                                                                                5),

                svgDrawing::endObjectLink(S),

            svgDrawing::drawSVGText(S,30,100,"This rect has a link ! ! !",12,svgDrawing::rgb(255,255,255)),

            svgDrawing::drawSVGLinearGradientRect(S,

                                                                         rct(260,40,490,160),

                                                                         [svgDrawing::offsetStopColor(0,svgDrawing::rgb(0,0,255)),

                                                                          svgDrawing::offsetStopColor(50,svgDrawing::rgb(0,255,0)),

                                                                          svgDrawing::offsetStopColor(100,svgDrawing::rgb(0,0,255))],

                                                                          svgDrawing::rgb(0,255,0),5),

            svgDrawing::drawSVGText(S,280,100,"This rect has a no link",12,svgDrawing::rgb(255,255,255)),

            svgDrawing::closeSVG(S),