SpiderBasic

- a basic to master the web -
https://forums.spiderbasic.com/

Rounded Box (Vector Graphics) problem

https://forums.spiderbasic.com/viewtopic.php?t=1857

Page 2 of 2

Re: Rounded Box (Vector Graphics) problem

Posted: Sat Mar 28, 2020 7:09 pm
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)

Re: Rounded Box (Vector Graphics) problem

Posted: Sun Mar 29, 2020 1:28 pm
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

Re: Rounded Box (Vector Graphics) problem

Posted: Sun Mar 29, 2020 6:36 pm
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.

Re: Rounded Box (Vector Graphics) problem

Posted: Sun Mar 29, 2020 7:20 pm
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)

Re: Rounded Box (Vector Graphics) problem

Posted: Sun Mar 29, 2020 8:39 pm
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

Re: Rounded Box (Vector Graphics) problem

Posted: Sun Mar 29, 2020 8:55 pm
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.

Re: Rounded Box (Vector Graphics) problem

Posted: Thu Apr 02, 2020 7:54 pm
by Fred
Why not reusing the component ?

Re: Rounded Box (Vector Graphics) problem

Posted: Fri Apr 03, 2020 6:07 am
by plouf
hey Fred

about the backward lien with Arc, that return unexpeted clockwise-anticlockwise behaviour is this correct or bug ?

Re: Rounded Box (Vector Graphics) problem

Posted: Fri Apr 10, 2020 9:41 am
by Andy
sorry fred, i dont understand what you mean by reusing the component
All times are UTC
Page 2 of 2

Powered by phpBB® Forum Software © phpBB Limited