1px thin stroke line

[daiwhea]

Is your feature request related to a problem? Please describe:

Can we use canvas.NewLine() to paint a thin line which is just 1px?

line := canvas.NewLine(color.Red)
line.StrokeWidth = 1
line.StrokeColor = color.Red
line.Position1 = fyne.NewPos(0, 10)
line.Position2 = fyne.NewPos(300, 10)

I use export FYNE_SCALE=0.5 and export FYNE_SCALE=1 to run a demo. But the lines looks like the same strokeWidth. The text looks scaled, but lines seem not scaled as expected.

I'm using MBP. but I don't think it's because the HiDPI.

In fact we can see thin line if we use widget.Card, we can see it draws a thin border. But Card uses widget.NewShadowingRenderer which is internal.

Is it possible to construct a solution with the existing API?
I don't know how to draw a thin line with fyne-toolkit.

Thanks

[daiwhea]

I'm trying to port my electron app to fyne toolkit. There're many kline bars on the screen. And I need a horizontal/vertical thin lines for cursor. just like below. I use svg to paint chart in electron app.

[andydotxyz]

I think that in released versions we check that line is at least 1 in width.
If you check the develop branch for the upcoming v2.1 you may find it works better.

However as the toolkit is scalable we don't use px values. To scale the current coordinates to pixels you need to divide by Window.Canvas().Scale()

(P.S. the card lines are gradients, so the comparison isn't as direct as you may think)

[daiwhea]

Thank you @andydotxyz . It's always you answered the questions.

New to golang, I'm not sure how can I switch to develop branch. Please have a look at command below. It seems still v2.0.3

$ go get -d fyne.io/fyne/v2@develop

go: downloading fyne.io/fyne/v2 v2.0.3-rc2.0.20210619093830-4cea3cc8eb2c
go get: downgraded fyne.io/fyne/v2 v2.0.3 => v2.0.3-rc2.0.20210619093830-4cea3cc8eb2c

[daiwhea]

For my old MBP, branch develop won't work. I created a vendor directory, and download develop branch in it. Then run commands below.

go mod vendor reports nothing. but when I try to run it, there is an error output below.

daiwhea$ go mod vendor
daiwhea$ go run GoStock.go
#github.com/go-gl/gl/v3.2-core/gl
vendor/github.com/go-gl/gl/v3.2-core/gl/package.go:40:11: fatal error: 'KHR/khrplatform.h' file not found
#include <KHR/khrplatform.h>
^~~~~~~~~~~~~~~~~~~
1 error generated.

[andydotxyz]

Version v2.0.3-rc2.0.20210619093830-4cea3cc8eb2c isn’t 2.0.3, it is pre-2.1 (you can see the date of the last commit in the second field). The error you report has been fixed in the branch So I’m not sure what is going on there. If you’re >= go 1.16 don’t do anything with vendor, it’s go.mod that is the source of truth.

[daiwhea]

Ok. I use go get -d fyne.io/fyne/v2@develop switched to develop branch. But it seems not a thin line, but a line with fade-in colors.

I set StrokeWidth = 3, 2, 1, 0.5, 0.3, and run them all. As you can see, only when I set strokeWidth=3, I can see the difference in the line stroke.

package main
import (
"fmt"
"image/color"
"fyne.io/fyne/v2"
"fyne.io/fyne/v2/app"
"fyne.io/fyne/v2/canvas"
"fyne.io/fyne/v2/container"
)
func main() {
a := app.New()
a.Lifecycle().SetOnEnteredForeground(func() { fmt.Println("focused") })
w := a.NewWindow("Msg Card")
w.Resize(fyne.NewSize(624, 428))
lines := [5]*canvas.Line{}
sws := []float32{3, 2, 1, 0.5, 0.3}
for i, sw := range sws {
lines[i] = canvas.NewLine(color.RGBA{255, 0, 0, 255})
lines[i].StrokeWidth = sw
x := float32(i * 20)
lines[i].Position1 = fyne.NewPos(x, 10)
lines[i].Position2 = fyne.NewPos(x+15, 10)
}
w.SetContent(
container.NewWithoutLayout(lines[0], lines[1], lines[2], lines[3], lines[4]),
)
w.CenterOnScreen()
w.ShowAndRun()
}

Is it possible to get a thin line?

[andydotxyz]

Are you sure that is develop? I get the following:

It looks like that is going down to 1px on LowDPI, but on my HiDPI monitor it's 2 pixels (relating no doubt to mac's pixel density complications) so there is still work to be done internally.

[andydotxyz]

With a few local tweaks I managed to get it to this point, is that what you would look for @daiwhea ?

[daiwhea]

With a few local tweaks I managed to get it to this point, is that what you would look for @daiwhea ?

Thanks. @andydotxyz Yes, this is what I'm looking for. And I think I'm using develop branch. I use LifeCycle() and see the log text. Why can't I got this thin lines? Is my MBP too old? it's late 2011, 10.13.6

a.Lifecycle().SetOnEnteredForeground(func() { fmt.Println("focused") })

[daiwhea]

At last, I reset $GOPROXY and run go get again. Still not thin line like yours.

below is my go.mod file:

module daiwhea.com/line

go 1.16

require fyne.io/fyne/v2 v2.0.3-rc2.0.20210619093830-4cea3cc8eb2c

[andydotxyz]

Still not thin line like yours.

Yes that is correct - like I said I was working on local modifications and was looking for your confirmation that it was the expected result.

The version you are using is from develop as far as I can see.
I will open a PR with my fix in it so you can test on your computer.

[daiwhea]

Still not thin line like yours.

Yes that is correct - like I said I was working on local modifications and was looking for your confirmation that it was the expected result.

The version you are using is from develop as far as I can see.
I will open a PR with my fix in it so you can test on your computer.

@andydotxyz Thanks. I'll close this issue later.

[andydotxyz]

You can test it on that PR #2299 and see if it gets the desired results on your macOS setup.

[daiwhea]

Still not as thin and clear as yours.

my go.mod:

daiwheadeMacBook-Pro:line daiwhea$ cat go.mod
module daiwhea.com/line

go 1.16

require fyne.io/fyne/v2 v2.0.3-rc2.0.20210624163745-f63d704d32ec

Don't know why. Maybe my system's too old?

[daiwhea]

@andydotxyz At last, I can get 1px thin line with a canvas.NewRectangle(). And if I want to get 0.5px thin line. It will be round up to 1px. I'm not sure why can't I got thin lines like yours. Seems fyne will forbid min width/height = 1, so any height < 1 will be round up to 1.

my go.mod:

module daiwhea.com/line

go 1.16

require fyne.io/fyne/v2 v2.0.3-rc2.0.20210624163745-f63d704d32ec

my main.go:

package main

import (
"fmt"
"image/color"

"fyne.io/fyne/v2"
"fyne.io/fyne/v2/app"
"fyne.io/fyne/v2/canvas"
"fyne.io/fyne/v2/container"
)

func main() {
a := app.New()
a.Lifecycle().SetOnEnteredForeground(func() { fmt.Println("focused") })
w := a.NewWindow("Msg Card")
w.Resize(fyne.NewSize(624, 428))
lines := [5]*canvas.Line{}
rects := [5]*canvas.Rectangle{}
texts := [5]*canvas.Text{}
sizes := []string{"3", "2", "1", "0.5", "0.3"}
sws := []float32{3, 2, 1, 0.5, 0.3}
red := color.RGBA{255, 0, 0, 255}
for i, sw := range sws {
lines[i] = canvas.NewLine(red)
lines[i].StrokeWidth = sw
x := float32(i * 25)
lines[i].Position1 = fyne.NewPos(x, 10)
lines[i].Position2 = fyne.NewPos(x+15, 10)
rectangle := canvas.NewRectangle(red)
rectangle.StrokeWidth = 0
rectangle.Move(fyne.NewPos(x, 20))
rectangle.Resize(fyne.NewSize(15, sw))
rects[i] = rectangle
texts[i] = canvas.NewText(sizes[i], red)
texts[i].Move(fyne.NewPos(x, 30))

}
w.SetContent(
container.NewWithoutLayout(lines[0], lines[1], lines[2], lines[3], lines[4],
rects[0], rects[1], rects[2], rects[3], rects[4],
texts[0], texts[1], texts[2], texts[3], texts[4],
),
)
w.CenterOnScreen()
w.ShowAndRun()
}

[daiwhea]

@andydotxyz I've a look at internal/painter/software/draw.go , Seems it will add vectorPad to strokeWidth. So canvas.Line will has a min height for 2px. Just like those lines what I got. I'm not sure why you got lines more thinner.

and in internal/painter/vector.go. canvas.Line will get extra 2 for pad.

[andydotxyz]

vectorPad is not the cause, that is adding space around the drawable item so we don’t clip at the boundary (important for diagonal lines).

can I ask why you closed the issue, I don’t see a comment?

[daiwhea]

vectorPad is not the cause, that is adding space around the drawable item so we don’t clip at the boundary (important for diagonal lines).

can I ask why you closed the issue, I don’t see a comment?

Sorry @andydotxyz . That thin line is what I'm looking for. I waited for serval days without your feedback. I know you're busy for the fyne toolkit. The most important reason is that I can't make sure the reason why I can't get a thin line like your. I don't want to waste your time for this tiny issue. At that time, I think maybe it's just because my os is too old. So I closed this issue.

I don't know how to test why I can't get thin line like yours. Can you please tell me how to deep test it? I'm new to golang and gui system. I have only a little web developments. Thanks a lot.

[andydotxyz]

Can you please confirm the resolution of the monitor you are using @daiwhea?
It would also be helpful if you could run fyne_demo and tap the advanced panel, tell us what the "Scale" is reported as.

[daiwhea]

My monitor

fyne_demo

The result of Line vs Rectangle

Rectangle can only make horizontal/vertical thin line. It won't work for sloping lines.

[andydotxyz]

OK, thanks for this. That display is not HiDPI, so I will try to replicate on a suitably non-retina monitor.

[andydotxyz]

This fix is now on the develop branch for testing, will be part of v2.1.0

[daiwhea]

Thanks @andydotxyz . I've just test the new branch. It doesn't work as expected.

If StrokeWidth < 1, it won't be displayed. And StrokeWidth 1 or 2 displayed like they are same width.

[andydotxyz]

Can you confirm that you're still using FYNE_SCALe=1?

[andydotxyz]

My guess is it relates to when scale < 1 because here is what I can see (scales 4, 1, 0.5):

[daiwhea]

My guess is it relates to when scale < 1 because here is what I can see (scales 4, 1, 0.5):

Thanks. I'm not sure why. I just update the develop branch then run the test. Can I do any help to it? I don't know how to run a local version of fyne-toolkit. Is there some documents?

[andydotxyz]

Can you confirm that you're still using FYNE_SCALE=1?
Can I do any help to it?

If you could confirm the scale used that would help a little.
The following steps can be used to check out a clean copy and verify

$ git clone https://github.com/fyne-io/fyne
$ cd fyne
$ git checkout develop
$ cd cmd/hello
<copy your code into main.go>
$ go run main.go

That will run your test app with the latest fixes all running.

[daiwhea]

sorry @andydotxyz go get https://github.com/fyne-io/fyne doesn't work. Should I download source code directly ?

$ go get https://github.com/fyne-io/fyne
go get: malformed module path "https:/github.com/fyne-io/fyne": invalid char ':'

[andydotxyz]

sorry @andydotxyz go get https://github.com/fyne-io/fyne doesn't work. Should I download source code directly ?

Sorry I meant git clone, updated

[daiwhea]

Sorry I'm too late. Seems doesn't work on my old mac.

172-11-2-103:test daiwhea$ git clone https://github.com/fyne-io/fyne.git
Cloning into 'fyne'...
remote: Enumerating objects: 47353, done.
remote: Counting objects: 100% (5198/5198), done.
remote: Compressing objects: 100% (2262/2262), done.
^[[Aiving objects:  15% (7435/47353), 5.79 MiB | 21.00 KiB/s
remote: Total 47353 (delta 3321), reused 4450 (delta 2904), pack-reused 42155
Receiving objects: 100% (47353/47353), 70.87 MiB | 36.00 KiB/s, done.
Resolving deltas: 100% (31075/31075), done.

172-11-2-103:test daiwhea$ cd fyne/
172-11-2-103:fyne daiwhea$ git checkout develop
Branch develop set up to track remote branch develop from origin.
Switched to a new branch 'develop'
172-11-2-103:fyne daiwhea$ cd cmd/hello/
172-11-2-103:hello daiwhea$ ls
main.go
172-11-2-103:hello daiwhea$ go run main.go
go: downloading golang.org/x/text v0.3.3
focused
focused

[andydotxyz]

OK, I think I may have tracked something down, I could do with a little more info.
Please run the latest develop version of fyne_demo (in the Fyne repo at cmd/fyne_demo).
(You can do this by updating the develop branch once again).
The advanced panel should have more info, such as:

[daiwhea]

@andydotxyz Here. My texture scale is 1 ,yours 2.

[andydotxyz]

Thanks, this helps. I think latest develop should properly resolve the issue now :).

[daiwhea]

@andydotxyz Great, it works now.