Improve loader widget position
This commit is contained in:
parent
928a7dd3e8
commit
9d0ec2d0f1
91
main.go
91
main.go
|
@ -3,17 +3,11 @@ package main
|
||||||
import (
|
import (
|
||||||
"bytes"
|
"bytes"
|
||||||
"runtime"
|
"runtime"
|
||||||
"time"
|
|
||||||
|
|
||||||
"github.com/divan/graphx/formats"
|
"github.com/divan/graphx/formats"
|
||||||
"github.com/divan/graphx/layout"
|
"github.com/divan/graphx/layout"
|
||||||
"github.com/gopherjs/gopherjs/js"
|
|
||||||
"github.com/gopherjs/vecty"
|
"github.com/gopherjs/vecty"
|
||||||
"github.com/gopherjs/vecty/elem"
|
|
||||||
"github.com/gopherjs/vecty/event"
|
|
||||||
"github.com/lngramos/three"
|
|
||||||
"github.com/status-im/whispervis/widgets"
|
"github.com/status-im/whispervis/widgets"
|
||||||
"github.com/vecty/vthree"
|
|
||||||
)
|
)
|
||||||
|
|
||||||
func main() {
|
func main() {
|
||||||
|
@ -26,8 +20,9 @@ func main() {
|
||||||
l := layout.NewAuto(data)
|
l := layout.NewAuto(data)
|
||||||
steps := 50
|
steps := 50
|
||||||
page := &Page{
|
page := &Page{
|
||||||
layout: l,
|
layout: l,
|
||||||
loader: widgets.NewLoader(steps),
|
loader: widgets.NewLoader(steps),
|
||||||
|
forceEditor: widgets.NewForceEditor(),
|
||||||
}
|
}
|
||||||
|
|
||||||
vecty.SetTitle("Whisper Simulation")
|
vecty.SetTitle("Whisper Simulation")
|
||||||
|
@ -36,7 +31,6 @@ func main() {
|
||||||
vecty.RenderBody(page)
|
vecty.RenderBody(page)
|
||||||
|
|
||||||
go func() {
|
go func() {
|
||||||
time.Sleep(1 * time.Second)
|
|
||||||
for i := 0; i < steps; i++ {
|
for i := 0; i < steps; i++ {
|
||||||
l.UpdatePositions()
|
l.UpdatePositions()
|
||||||
page.loader.Inc()
|
page.loader.Inc()
|
||||||
|
@ -46,82 +40,3 @@ func main() {
|
||||||
vecty.Rerender(page)
|
vecty.Rerender(page)
|
||||||
}()
|
}()
|
||||||
}
|
}
|
||||||
|
|
||||||
// Page is our main page component.
|
|
||||||
type Page struct {
|
|
||||||
vecty.Core
|
|
||||||
|
|
||||||
layout *layout.Layout
|
|
||||||
|
|
||||||
scene *three.Scene
|
|
||||||
camera three.PerspectiveCamera
|
|
||||||
renderer *three.WebGLRenderer
|
|
||||||
graph *three.Group
|
|
||||||
nodes *three.Group
|
|
||||||
edges *three.Group
|
|
||||||
controls TrackBallControl
|
|
||||||
|
|
||||||
autoRotate bool
|
|
||||||
|
|
||||||
loaded bool
|
|
||||||
loader *widgets.Loader
|
|
||||||
}
|
|
||||||
|
|
||||||
// Render implements the vecty.Component interface.
|
|
||||||
func (p *Page) Render() vecty.ComponentOrHTML {
|
|
||||||
return elem.Body(
|
|
||||||
elem.Div(
|
|
||||||
vecty.Markup(vecty.Class("pure-g")),
|
|
||||||
|
|
||||||
elem.Div(
|
|
||||||
vecty.Markup(vecty.Class("pure-u-1-5")),
|
|
||||||
elem.Heading1(vecty.Text("Whisper Message Propagation")),
|
|
||||||
elem.Paragraph(vecty.Text("This visualization represents message propagation in the p2p network.")),
|
|
||||||
),
|
|
||||||
elem.Div(
|
|
||||||
vecty.Markup(vecty.Class("pure-u-4-5")),
|
|
||||||
vecty.If(p.loaded,
|
|
||||||
vthree.WebGLRenderer(vthree.WebGLOptions{
|
|
||||||
Init: p.init,
|
|
||||||
Shutdown: p.shutdown,
|
|
||||||
}),
|
|
||||||
),
|
|
||||||
vecty.If(!p.loaded, p.loader),
|
|
||||||
),
|
|
||||||
),
|
|
||||||
vecty.Markup(
|
|
||||||
event.KeyDown(p.KeyListener),
|
|
||||||
),
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
func (p *Page) renderWebGLCanvas() vecty.Component {
|
|
||||||
return vthree.WebGLRenderer(vthree.WebGLOptions{
|
|
||||||
Init: p.init,
|
|
||||||
Shutdown: p.shutdown,
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
func (p *Page) init(renderer *three.WebGLRenderer) {
|
|
||||||
windowWidth := js.Global.Get("innerWidth").Float()*80/100 - 20
|
|
||||||
windowHeight := js.Global.Get("innerHeight").Float() - 20
|
|
||||||
|
|
||||||
p.renderer = renderer
|
|
||||||
p.renderer.SetSize(windowWidth, windowHeight, true)
|
|
||||||
|
|
||||||
devicePixelRatio := js.Global.Get("devicePixelRatio").Float()
|
|
||||||
p.renderer.SetPixelRatio(devicePixelRatio)
|
|
||||||
|
|
||||||
p.InitScene(windowWidth, windowHeight)
|
|
||||||
|
|
||||||
p.CreateObjects()
|
|
||||||
|
|
||||||
p.animate()
|
|
||||||
}
|
|
||||||
|
|
||||||
func (p *Page) shutdown(renderer *three.WebGLRenderer) {
|
|
||||||
p.scene = nil
|
|
||||||
p.camera = three.PerspectiveCamera{}
|
|
||||||
p.renderer = nil
|
|
||||||
p.graph, p.nodes, p.edges = nil, nil, nil
|
|
||||||
}
|
|
||||||
|
|
|
@ -0,0 +1,95 @@
|
||||||
|
package main
|
||||||
|
|
||||||
|
import (
|
||||||
|
"github.com/divan/graphx/layout"
|
||||||
|
"github.com/gopherjs/gopherjs/js"
|
||||||
|
"github.com/gopherjs/vecty"
|
||||||
|
"github.com/gopherjs/vecty/elem"
|
||||||
|
"github.com/gopherjs/vecty/event"
|
||||||
|
"github.com/lngramos/three"
|
||||||
|
"github.com/status-im/whispervis/widgets"
|
||||||
|
"github.com/vecty/vthree"
|
||||||
|
)
|
||||||
|
|
||||||
|
// Page is our main page component.
|
||||||
|
type Page struct {
|
||||||
|
vecty.Core
|
||||||
|
|
||||||
|
layout *layout.Layout
|
||||||
|
|
||||||
|
scene *three.Scene
|
||||||
|
camera three.PerspectiveCamera
|
||||||
|
renderer *three.WebGLRenderer
|
||||||
|
graph *three.Group
|
||||||
|
nodes *three.Group
|
||||||
|
edges *three.Group
|
||||||
|
controls TrackBallControl
|
||||||
|
|
||||||
|
autoRotate bool
|
||||||
|
|
||||||
|
loaded bool
|
||||||
|
loader *widgets.Loader
|
||||||
|
forceEditor *widgets.ForceEditor
|
||||||
|
}
|
||||||
|
|
||||||
|
// Render implements the vecty.Component interface.
|
||||||
|
func (p *Page) Render() vecty.ComponentOrHTML {
|
||||||
|
return elem.Body(
|
||||||
|
elem.Div(
|
||||||
|
vecty.Markup(
|
||||||
|
vecty.Class("pure-g"),
|
||||||
|
vecty.Style("height", "100%"),
|
||||||
|
),
|
||||||
|
elem.Div(
|
||||||
|
vecty.Markup(vecty.Class("pure-u-1-5")),
|
||||||
|
elem.Heading1(vecty.Text("Whisper Message Propagation")),
|
||||||
|
elem.Paragraph(vecty.Text("This visualization represents message propagation in the p2p network.")),
|
||||||
|
p.forceEditor,
|
||||||
|
),
|
||||||
|
elem.Div(
|
||||||
|
vecty.Markup(vecty.Class("pure-u-4-5")),
|
||||||
|
vecty.If(p.loaded,
|
||||||
|
vthree.WebGLRenderer(vthree.WebGLOptions{
|
||||||
|
Init: p.init,
|
||||||
|
Shutdown: p.shutdown,
|
||||||
|
}),
|
||||||
|
),
|
||||||
|
vecty.If(!p.loaded, p.loader),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
vecty.Markup(
|
||||||
|
event.KeyDown(p.KeyListener),
|
||||||
|
),
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
func (p *Page) renderWebGLCanvas() vecty.Component {
|
||||||
|
return vthree.WebGLRenderer(vthree.WebGLOptions{
|
||||||
|
Init: p.init,
|
||||||
|
Shutdown: p.shutdown,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
func (p *Page) init(renderer *three.WebGLRenderer) {
|
||||||
|
windowWidth := js.Global.Get("innerWidth").Float()*80/100 - 20
|
||||||
|
windowHeight := js.Global.Get("innerHeight").Float() - 20
|
||||||
|
|
||||||
|
p.renderer = renderer
|
||||||
|
p.renderer.SetSize(windowWidth, windowHeight, true)
|
||||||
|
|
||||||
|
devicePixelRatio := js.Global.Get("devicePixelRatio").Float()
|
||||||
|
p.renderer.SetPixelRatio(devicePixelRatio)
|
||||||
|
|
||||||
|
p.InitScene(windowWidth, windowHeight)
|
||||||
|
|
||||||
|
p.CreateObjects()
|
||||||
|
|
||||||
|
p.animate()
|
||||||
|
}
|
||||||
|
|
||||||
|
func (p *Page) shutdown(renderer *three.WebGLRenderer) {
|
||||||
|
p.scene = nil
|
||||||
|
p.camera = three.PerspectiveCamera{}
|
||||||
|
p.renderer = nil
|
||||||
|
p.graph, p.nodes, p.edges = nil, nil, nil
|
||||||
|
}
|
|
@ -15,16 +15,16 @@ type Loader struct {
|
||||||
}
|
}
|
||||||
|
|
||||||
func (l *Loader) Render() vecty.ComponentOrHTML {
|
func (l *Loader) Render() vecty.ComponentOrHTML {
|
||||||
var text string
|
text := l.text()
|
||||||
progress := l.Progress()
|
|
||||||
if progress > 99.9 {
|
|
||||||
text = "Completed"
|
|
||||||
} else {
|
|
||||||
text = fmt.Sprintf("Loading %.1f%%...", progress)
|
|
||||||
fmt.Println("Loader.Render()", text, progress)
|
|
||||||
}
|
|
||||||
return elem.Div(
|
return elem.Div(
|
||||||
elem.Heading1(vecty.Text(text)),
|
vecty.Markup(
|
||||||
|
vecty.Style("text-align", "center"),
|
||||||
|
vecty.Style("position", "relative"),
|
||||||
|
vecty.Style("top", "50%"),
|
||||||
|
),
|
||||||
|
elem.Heading1(
|
||||||
|
vecty.Text(text),
|
||||||
|
),
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -44,3 +44,15 @@ func (l *Loader) Progress() float64 {
|
||||||
fmt.Println("progress", 100*float64(l.current)/float64(l.steps))
|
fmt.Println("progress", 100*float64(l.current)/float64(l.steps))
|
||||||
return 100 * float64(l.current) / float64(l.steps)
|
return 100 * float64(l.current) / float64(l.steps)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Text returns formatted string to display.
|
||||||
|
func (l *Loader) text() string {
|
||||||
|
var text string
|
||||||
|
progress := l.Progress()
|
||||||
|
if progress > 99.9 {
|
||||||
|
text = "Completed"
|
||||||
|
} else {
|
||||||
|
text = fmt.Sprintf("Loading %.0f%%...", progress)
|
||||||
|
}
|
||||||
|
return text
|
||||||
|
}
|
||||||
|
|
Loading…
Reference in New Issue