Rounded Box (Vector Graphics) problem

Just starting out? Need help? Post your questions and find answers here.
Andy
Posts: 46
Joined: Sat Feb 15, 2020 5:19 pm
Location: Larnaca, Cyprus
Contact:

Re: Rounded Box (Vector Graphics) problem

Post by Andy »

Code: Select all

Global NewMap vstyle.l()
Global styletxt.s
Declare SetStyle()

Procedure initstyle(style.s)
 
  ! elStyle = document.createElement('style')
  ! elStyle.type= 'text/css'
  ! elHead = document.getElementsByTagName('head')[0]
  ! elHead.appendChild( elStyle )
 
  Protected j
  j=CreateJSON(-1)
  ParseJSON(j, ReplaceString(style,"'",Chr(34)))
  ExtractJSONMap(JSONValue(j), vstyle())
  FreeJSON(j)
  SetStyle()
 
EndProcedure

Procedure addstyle(class.s, prop.s,p1.s="",p2.s="",p3.s="",p4.s="")
 
  If p1<>"":prop=ReplaceString(prop,"$1",p1):EndIf
  If p2<>"":prop=ReplaceString(prop,"$2",p2):EndIf
  If p3<>"":prop=ReplaceString(prop,"$3",p3):EndIf
  If p4<>"":prop=ReplaceString(prop,"$4",p4):EndIf
  styletxt+class+"{"+prop+"}"+#CRLF$
 
EndProcedure

Procedure.s jscolor(c.l)
 
  ProcedureReturn "RGBA("+Str(Red(c))+","+Str(Green(c))+","+Str(Blue(c))+","+StrF(Alpha(c)/255)+")"
 
EndProcedure

Procedure SetStyle()
 
  Protected v.l
 
  styletxt=""
  addstyle("body","font: 10px arial; color: #000;")
  addstyle(".spiderwindow-title","font-size: 140%;")
 
  ForEach vstyle()
    v= vstyle()
    Select MapKey(vstyle())
      Case "g_radius"
        addstyle(".spiderwindow,.sbWebBorder,iframe","border-radius: 4px;")
        addstyle(".spiderwindow-content","border-radius: 0 0 4px 4px;")
       
      Case "wt_back-color"
        addstyle(".spiderwindow","background-color: $1;",jscolor(v))
       
      Case "wt_color"
        addstyle(".spiderwindow-title","color: $1;",jscolor(v))
       
      Case "wc_back-color"
        addstyle(".spiderwindow-content","background-color: $1;",jscolor(v))
       
      Case "w_shadow"   
        addstyle(".spiderwindow","box-shadow: $1px $1px $2px 0px #000;",Str(v),Str(v*4))
       
    EndSelect
  Next
 
  ! elStyle.innerHTML = v_styletxt
 
EndProcedure

Procedure clearCanvas(CanvasGadget)
 
  w = GadgetWidth(CanvasGadget)
  h = GadgetHeight(CanvasGadget)
 
  AddPathBox(0, 0, w, h)
  VectorSourceColor(RGBA(30, 30, 30, 255))
  FillPath()
   
EndProcedure

Procedure drawLine(mx, my)
 
  MovePathCursor(mx, my)
  AddPathCurve(mx+100, my, 250, 30, 350, 30)
  VectorSourceColor(RGBA(255, 0, 0, 255))
  StrokePath(2)
 
EndProcedure

Procedure WindowEvents()
 
  Select EventWindow()
    Case 2
     
      mx = WindowX(2) + WindowWidth(2)
      my = WindowY(2) + WindowHeight(2)
     
      If StartVectorDrawing(CanvasVectorOutput(2))
        clearCanvas(2)
        drawLine(mx, my)
      EndIf
     
  EndSelect
 
EndProcedure

initstyle("{'g_radius':8,'wt_back-color':3523245567,'wt_color':4294967295,'wc_back-color':4280427042,'b_back-color':4283539158,'b_color':4278190080,'wb_width':0,'wb_color':0,'w_shadow':2,'b_shadow':5,'p_back-color':4285241782}")
OpenWindow(1,230,5,200,70,"Samples",#PB_Window_Background)
CanvasGadget(2, 0, 0, WindowWidth(1), WindowHeight(1), #PB_Canvas_Keyboard)
BindEvent(#PB_Event_MoveWindow, @WindowEvents())

If StartVectorDrawing(CanvasVectorOutput(2))
  clearCanvas(2)
  StopVectorDrawing()
EndIf

OpenWindow(2,230,5,200,40,"Samples",#PB_Window_TitleBar)
User avatar
Peter
Posts: 1086
Joined: Mon Feb 24, 2014 10:17 pm
Location: 127.0.0.1:9080
Contact:

Re: Rounded Box (Vector Graphics) problem

Post by Peter »

here is my attempt:

Code: Select all

EnableExplicit

Enumeration
  #Window
EndEnumeration

Global BackgroundCanvas
Global B1, B2

Procedure DrawConnection(Box1, Box2)
  
  Protected y1 = GadgetY(Box1) + (GadgetHeight(Box1) / 2)
  Protected x1 = GadgetX(Box1) + (GadgetWidth(Box1))
  
  Protected y2 = GadgetY(Box2) + (GadgetHeight(Box2) / 2)
  Protected x2 = GadgetX(Box2)
  
  StartDrawing(CanvasOutput(BackgroundCanvas))
  
  Box(0, 0, GadgetWidth(BackgroundCanvas), GadgetHeight(BackgroundCanvas), RGB(255, 255, 255))
  
  LineXY(x1, y1, x2, y2, RGB(255, 0, 0))
  
  StopDrawing()
  
EndProcedure

Procedure DragStartEvent()
  Debug "DragStartEvent"
EndProcedure

Procedure DragDragEvent()
  Debug "DragDragEvent"
  DrawConnection(B1, B2)
EndProcedure

Procedure DragStopEvent()
  Debug "DragStopEvent"
EndProcedure

Procedure AddBox(x, y, w, h, Caption.s)
  
  Protected CG, GID, TG
  
  CG = CanvasGadget(#PB_Any, x, y, w, h, #PB_Canvas_Border | #PB_Canvas_Container) 
  
  TG = TextGadget(#PB_Any, -1, -1, w, 30, Caption, #PB_Text_Border | #PB_Text_Center | #PB_Text_VerticalCenter)
  
  SetGadgetColor(TG, #PB_Gadget_BackColor, $EFEFEF)
  
  ; here you can add more gadgets...
  
  CloseGadgetList()
  
  GID = GadgetID(CG)
  
  ! $(v_gid.div).draggable({
  !   start: function() {
  !     f_dragstartevent();
  !   },
  !   drag: function() {
  !     f_dragdragevent();
  !   },
  !   stop: function() {
  !     f_dragstopevent();
  !   }  
  ! });
  
  ProcedureReturn CG
  
EndProcedure

OpenWindow(#Window, 0, 0, 0, 0, "", #PB_Window_Background)

BackgroundCanvas = CanvasGadget(#PB_Any, 0, 0, WindowWidth(#Window), WindowHeight(#Window))

B1 = AddBox( 10, 10, 150, 80, "Box1")

B2 = AddBox(250, 10, 150, 80, "Box2")

DrawConnection(B1, B2)
(I am not very familiar with the vector commands, so I used the drawing commands.)

Greetings ... Peter
plouf
Posts: 194
Joined: Tue Feb 25, 2014 6:01 pm
Location: Athens,Greece

Re: Rounded Box (Vector Graphics) problem

Post by plouf »

but isnt draw commands less compute need ? :)

i have run Andy's example and it the line "losing" only during movement in fast speed
but when movement stop lines are in position

i think it should forward its application with that, it is NOT bad.
Christos
Andy
Posts: 46
Joined: Sat Feb 15, 2020 5:19 pm
Location: Larnaca, Cyprus
Contact:

Re: Rounded Box (Vector Graphics) problem

Post by Andy »

This is Peters example with curves and correct positioning of the curves

Code: Select all

EnableExplicit

Enumeration
  #Window
EndEnumeration

Global BackgroundCanvas
Global B1, B2

Procedure DrawConnection(Box1, Box2)
 
  Protected y1 = GadgetY(Box1) + (GadgetHeight(Box1) / 2)
  Protected x1 = GadgetX(Box1) + (GadgetWidth(Box1))
 
  Protected y2 = GadgetY(Box2) + (GadgetHeight(Box2) / 2)
  Protected x2 = GadgetX(Box2)
   
  StartVectorDrawing(CanvasOutput(BackgroundCanvas))
  
  AddPathBox(0, 0, GadgetWidth(BackgroundCanvas), GadgetHeight(BackgroundCanvas))
  VectorSourceColor(RGBA(50, 50, 50, 255))
  FillPath()

  MovePathCursor(x1, y1)
  AddPathCurve(x1+100, y1, x2-100, y2, x2, y2)
  VectorSourceColor(RGBA(255, 0, 0, 255))
  StrokePath(2)
  
  StopVectorDrawing()
  
EndProcedure

Procedure DragStartEvent()
  Debug "DragStartEvent"
  DrawConnection(B1, B2)
EndProcedure

Procedure DragDragEvent()
  Debug "DragDragEvent"
  DrawConnection(B1, B2)
EndProcedure

Procedure DragStopEvent()
  Debug "DragStopEvent"
  DrawConnection(B1, B2)
EndProcedure

Procedure AddBox(x, y, w, h, Caption.s)
 
  Protected CG, GID, TG
 
  CG = CanvasGadget(#PB_Any, x, y, w, h, #PB_Canvas_Border | #PB_Canvas_Container)
 
  TG = TextGadget(#PB_Any, -1, -1, w, 30, Caption, #PB_Text_Border | #PB_Text_Center | #PB_Text_VerticalCenter)
 
  SetGadgetColor(TG, #PB_Gadget_BackColor, $EFEFEF)
 
  ; here you can add more gadgets...
 
  CloseGadgetList()
 
  GID = GadgetID(CG)
 
  ! $(v_gid.div).draggable({
  !   start: function() {
  !     f_dragstartevent();
  !   },
  !   drag: function() {
  !     f_dragdragevent();
  !   },
  !   stop: function() {
  !     f_dragstopevent();
  !   } 
  ! });
 
  ProcedureReturn CG
 
EndProcedure

OpenWindow(#Window, 0, 0, 0, 0, "", #PB_Window_Background)

BackgroundCanvas = CanvasGadget(#PB_Any, 0, 0, WindowWidth(#Window), WindowHeight(#Window))

B1 = AddBox( 10, 10, 150, 80, "Box1")

B2 = AddBox(250, 10, 150, 80, "Box2")

DrawConnection(B1, B2)
User avatar
Peter
Posts: 1086
Joined: Mon Feb 24, 2014 10:17 pm
Location: 127.0.0.1:9080
Contact:

Re: Rounded Box (Vector Graphics) problem

Post by Peter »

Andy wrote:This is Peters example with curves and correct positioning of the curves
cool! 8-)

Here is the Draggable API to possibly add more features (such as Snap-To-Grid or similar): https://api.jqueryui.com/draggable/

Let me know if you need help.

Greetings ... Peter
Andy
Posts: 46
Joined: Sat Feb 15, 2020 5:19 pm
Location: Larnaca, Cyprus
Contact:

Re: Rounded Box (Vector Graphics) problem

Post by Andy »

Thank Peter, ill definitely take a look. The only thing that bothers me with the code above is how the curved line lags behind the canvas gadget.
Fred
Site Admin
Posts: 1506
Joined: Mon Feb 24, 2014 10:51 am

Re: Rounded Box (Vector Graphics) problem

Post by Fred »

Why not reusing the component ?
plouf
Posts: 194
Joined: Tue Feb 25, 2014 6:01 pm
Location: Athens,Greece

Re: Rounded Box (Vector Graphics) problem

Post by plouf »

hey Fred

about the backward lien with Arc, that return unexpeted clockwise-anticlockwise behaviour is this correct or bug ?
Christos
Andy
Posts: 46
Joined: Sat Feb 15, 2020 5:19 pm
Location: Larnaca, Cyprus
Contact:

Re: Rounded Box (Vector Graphics) problem

Post by Andy »

sorry fred, i dont understand what you mean by reusing the component
Post Reply