Drawing
-
- Enthusiast
- Posts: 224
- Joined: Sat Jul 07, 2018 6:50 pm
Drawing
What is the best way to draw graph like this one:
I'm interested in full compliance of the curve "form" (in my opinion this view is optimally balanced | roundness\sharpness)
The only way I know is GDI+ with some antialiasing, but not sure if it will be sharp enough in small sizes...
I'm interested in full compliance of the curve "form" (in my opinion this view is optimally balanced | roundness\sharpness)
The only way I know is GDI+ with some antialiasing, but not sure if it will be sharp enough in small sizes...
Re: Drawing
Lots of ways. Webgadget and Javascript lib to google plot or roll your own with canvasgadget and vector drawing lib(antialias built-in) or 3rd party pay lib + PB wrapper code.
The nice thing about standards is there are so many to choose from. ~ Andrew Tanenbaum
Re: Drawing
Javascript or ActiveX solutions, but a simple line graph like that can be easily done yourself in Purebasic with 2D Drawing or Vector drawing.
Or maybe extend this module.
Or maybe extend this module.
-
- Enthusiast
- Posts: 224
- Joined: Sat Jul 07, 2018 6:50 pm
Re: Drawing
God, no!skywalk wrote:Webgadget and Javascript lib to google plot
Not really sure it can draw exactly like that... at least for all the time I have not seen a single example.skywalk wrote:vector drawing lib(antialias built-in)
Hmm... I'll go look for candidatesskywalk wrote:or 3rd party pay lib + PB wrapper code
Re: Drawing
My Projects ThreadToGUI / OOP-BaseClass / EventDesigner V3
PB v3.30 / v5.75 - OS Mac Mini OSX 10.xx - VM Window Pro / Linux Ubuntu
Downloads on my Webspace / OneDrive
PB v3.30 / v5.75 - OS Mac Mini OSX 10.xx - VM Window Pro / Linux Ubuntu
Downloads on my Webspace / OneDrive
Re: Drawing
Here is an example with PB's vector drawing library:
Code: Select all
EnableExplicit
Define ww, wh, style, win, canvas, font, event, quit
ww=820
wh=220
style | #PB_Window_ScreenCentered
style | #PB_Window_SystemMenu
style | #PB_Window_MinimizeGadget
win = OpenWindow(#PB_Any, 50,100, ww,wh, "", style)
AddKeyboardShortcut(win, #PB_Shortcut_Escape, 10)
#timer = 0
AddWindowTimer(win, #timer, 100)
canvas = CanvasGadget(#PB_Any, 10, 10, ww-20, wh-20)
CompilerIf #PB_Compiler_OS = #PB_OS_Windows
font = LoadFont(#PB_Any, "courier new", 10)
CompilerElse
font = LoadFont(#PB_Any, "monospace", 10)
CompilerEndIf
NewList values.i()
AddElement(values())
values() = 10
AddElement(values())
values() = 20
AddElement(values())
values() = 30
AddElement(values())
values() = 40
AddElement(values())
values() = 50
Procedure draw(canvas, List values.i())
Protected i
Shared font
StartVectorDrawing(CanvasVectorOutput(canvas))
VectorSourceColor($fff8f8f8)
FillVectorOutput()
For i=0 To 100 Step 20
; left labels
MovePathCursor(50, VectorOutputHeight()- 50 - i - VectorTextHeight(Str(i))/2.0)
VectorFont(FontID(font), 10.0)
AddPathText(Str(i))
VectorSourceColor($ffaaaaaa)
FillPath()
; y/horizontal lines
MovePathCursor(80, VectorOutputHeight()-50-i)
AddPathLine(VectorOutputWidth()-50, VectorOutputHeight()-50-i)
VectorSourceColor($ffcccccc)
StrokePath(1)
Next
For i=50 To 500 Step 50
; bottom labels
MovePathCursor(50 + i - VectorTextWidth(Str(i))/2.0, VectorOutputHeight()- 50 + 10)
VectorFont(FontID(font), 10.0)
AddPathText(Str(i))
VectorSourceColor($ffaaaaaa)
FillPath()
; x/vertical ticks
MovePathCursor(50 + i, VectorOutputHeight()-50)
AddPathLine(50 + i, VectorOutputHeight()-50 + 4)
VectorSourceColor($ffcccccc)
StrokePath(1)
Next
Protected.f xFrom, yFrom
Protected.f xTo, yTo
Protected.f xStep, yStep
Protected.f x1, y1, x2, y2, x3, y3, x4, y4
; origin
xFrom = 80
yFrom = VectorOutputHeight() - 50
MovePathCursor(xFrom, yFrom)
yTo = yFrom
xTo = xFrom
; step width
xStep = 6
ForEach values()
xTo = xFrom + xStep
yTo = VectorOutputHeight() - 50 - values()
yStep = yTo - yFrom
;
; +----------------------------+ +----------------------------+ +----------------------------+ +----------------------------+
; | | | | | | | |
; | x3 x4 | | x3 x4 | | x3 x4 | | x3 x4 |
; | ### | | ##### | | ###### | | ######## |
; | ### | | ### | | ## | | ## |
; | ## | | ## | | # | | # |
; | # | | # | | # | | # |
; | # | | # | | # | | # |
; | # | | # | | # | | # |
; | ## | | # | | # | | # |
; | ## | | ## | | # | | # |
; | ### | | ### | | ### | | ## |
; | ### | | #### | | ###### | | ######## |
; | x1 x2 | | x1 x2 | | x1 x2 | | x1 x2 |
; | | | | | | | |
; +----------------------------+ +----------------------------+ +----------------------------+ +----------------------------+
;
x1 = xFrom
x4 = xFrom + xStep
Select 3
Case 1
x2 = xFrom + 0.1 * xStep
x3 = xFrom + 0.9 * xStep
Case 2
x2 = xFrom + 0.33 * xStep
x3 = xFrom + 0.66 * xStep
Case 3
x2 = xFrom + 0.5 * xStep
x3 = xFrom + 0.5 * xStep
Case 4
x2 = xFrom + 0.99 * xStep
x3 = xFrom + 0.01 * xStep
EndSelect
y1 = yFrom
y2 = yFrom
y3 = yTo
y4 = yTo
AddPathCurve(x2, y2, x3, y3, x4, y4)
xFrom = xTo
yFrom = yTo
Next
; draw back down to zero baseline
xTo = 80
yTo = VectorOutputHeight() - 50
AddPathLine(xFrom, VectorOutputHeight() - 50)
VectorSourceColor($dd88C282)
StrokePath(1, #PB_Path_Preserve)
VectorSourceColor($8888C282)
FillPath()
StopVectorDrawing()
EndProcedure
draw(canvas, values())
Repeat
event = WaitWindowEvent(10)
Select event
Case #PB_Event_CloseWindow
quit = #True
Case #PB_Event_Menu
Select EventMenu()
Case 10
quit = #True
EndSelect
Case #PB_Event_Timer
Select EventTimer()
Case #timer
AddElement(values())
values() = Random(100)
draw(canvas, values())
EndSelect
EndSelect
Until quit
Last edited by #NULL on Wed Sep 18, 2019 9:16 am, edited 1 time in total.
-
- Enthusiast
- Posts: 224
- Joined: Sat Jul 07, 2018 6:50 pm
Re: Drawing
Wow, I have no words... it's amazing!#NULL wrote:Here is an example
Usually in the examples there were quite ugly-looking curves so I got the impression that the vector library just can't draw like that, looks like in the right hands it can
Thx!
Re: Drawing
I added some initial values (previous post updated)..
..to show that there is kind of like a plateau for each data point. This is because the curve will always cross the data point horizontally, which makes it easier to fit the segments to each other. I also added a Select to change the width of the plateau, so you can get sharp or round spikes.
Code: Select all
NewList values.i()
AddElement(values())
values() = 10
AddElement(values())
values() = 20
AddElement(values())
values() = 30
AddElement(values())
values() = 40
AddElement(values())
values() = 50
Code: Select all
;-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------
; +----------------------------+ +----------------------------+ +----------------------------+ +----------------------------+
; | | | | | | | |
; | x3 x4 | | x3 x4 | | x3 x4 | | x3 x4 |
; | ### | | ##### | | ###### | | ######## |
; | ### | | ### | | ## | | ## |
; | ## | | ## | | # | | # |
; | # | | # | | # | | # |
; | # | | # | | # | | # |
; | # | | # | | # | | # |
; | ## | | # | | # | | # |
; | ## | | ## | | # | | # |
; | ### | | ### | | ### | | ## |
; | ### | | #### | | ###### | | ######## |
; | x1 x2 | | x1 x2 | | x1 x2 | | x1 x2 |
; | | | | | | | |
; +----------------------------+ +----------------------------+ +----------------------------+ +----------------------------+
;
x1 = xFrom
x4 = xFrom + xStep
Select 3
Case 1
x2 = xFrom + 0.1 * xStep
x3 = xFrom + 0.9 * xStep
Case 2
x2 = xFrom + 0.33 * xStep
x3 = xFrom + 0.66 * xStep
Case 3
x2 = xFrom + 0.5 * xStep
x3 = xFrom + 0.5 * xStep
Case 4
x2 = xFrom + 0.99 * xStep
x3 = xFrom + 0.01 * xStep
EndSelect
Re: Drawing
PureBasic is just as capable as other languages if you're a skilled coder.Everything wrote:I got the impression that the vector library just can't draw like that, looks like in the right hands it can