forked from mbk-lab/rui_orig
2
0
Fork 0
rui/demo/transformDemo.go

362 lines
12 KiB
Go

package main
import (
"fmt"
"github.com/anoshenko/rui"
)
const transformDemoText = `
GridLayout {
style = demoPage,
content = [
GridLayout {
id = listLayout, width = 100%, height = 100%, cell-horizontal-align = center, cell-vertical-align = center,
content = [
TextView { id = transformView, width = 200px, height = 100px,
text = "View", text-align = center, text-size = 32pt,
background-color = #FFBBBBBB, radius = 8px, padding = 8px, margin = 4px,
border = _{ style = solid, width = 1px, color = #FF000080 },
shadow = _{ spread-radius = 1px, blur = 16px, color = #80000000},
},
]
},
ListLayout {
style = optionsPanel,
content = [
"Perspective",
ListLayout {
margin-bottom = 12px, orientation = horizontal, vertical-align = center,
content = [
NumberPicker { id = PerspectiveEditor, type = slider, width = 120px,
min = -500, max = 500, step = 10, value = 0
},
TextView {
id = PerspectiveValue, text = "0px", margin-left = 12px, width = 32px
}
]
},
"Perspective origin X (pixels)",
ListLayout {
margin-bottom = 12px, orientation = horizontal, vertical-align = center,
content = [
NumberPicker { id = xPerspectiveOriginEditor, type = slider, width = 120px,
min = -1000, max = 1000, step = 10, value = 0
},
TextView {
id = xPerspectiveOriginValue, text = "0px", margin-left = 12px, width = 32px
}
]
},
"Perspective origin Y (pixels)",
ListLayout {
margin-bottom = 12px, orientation = horizontal, vertical-align = center,
content = [
NumberPicker { id = yPerspectiveOriginEditor, type = slider, width = 120px,
min = -1000, max = 1000, step = 10, value = 0
},
TextView {
id = yPerspectiveOriginValue, text = "0px", margin-left = 12px, width = 32px
}
]
},
"Origin X (pixels)",
ListLayout {
margin-bottom = 12px, orientation = horizontal, vertical-align = center,
content = [
NumberPicker { id = xOriginEditor, type = slider, width = 120px,
min = -1000, max = 1000, step = 10, value = 0
},
TextView {
id = xOriginValue, text = "0px", margin-left = 12px, width = 32px
}
]
},
"Origin Y (pixels)",
ListLayout {
margin-bottom = 12px, orientation = horizontal, vertical-align = center,
content = [
NumberPicker { id = yOriginEditor, type = slider, width = 120px,
min = -1000, max = 1000, step = 10, value = 0
},
TextView {
id = yOriginValue, text = "0px", margin-left = 12px, width = 32px
}
]
},
"Origin Z (pixels)",
ListLayout {
margin-bottom = 12px, orientation = horizontal, vertical-align = center,
content = [
NumberPicker { id = zOriginEditor, type = slider, width = 120px,
min = -1000, max = 1000, step = 10, value = 0
},
TextView {
id = zOriginValue, text = "0px", margin-left = 12px, width = 32px
}
]
},
"Translate X (pixels)",
ListLayout {
margin-bottom = 12px, orientation = horizontal, vertical-align = center,
content = [
NumberPicker { id = xTranslateEditor, type = slider, width = 120px,
min = -100, max = 100, step = 1, value = 0
},
TextView {
id = xTranslateValue, text = "0px", margin-left = 12px, width = 32px
}
]
},
"Translate Y (pixels)",
ListLayout {
margin-bottom = 12px, orientation = horizontal, vertical-align = center,
content = [
NumberPicker { id = yTranslateEditor, type = slider, width = 120px,
min = -100, max = 100, step = 1, value = 0
},
TextView {
id = yTranslateValue, text = "0px", margin-left = 12px, width = 32px
}
]
},
"Translate Z (pixels)",
ListLayout {
margin-bottom = 12px, orientation = horizontal, vertical-align = center,
content = [
NumberPicker { id = zTranslateEditor, type = slider, width = 120px,
min = -100, max = 100, step = 1, value = 0
},
TextView {
id = zTranslateValue, text = "0px", margin-left = 12px, width = 32px
}
]
},
"Scale X",
ListLayout {
margin-bottom = 12px, orientation = horizontal, vertical-align = center,
content = [
NumberPicker { id = xScaleEditor, type = slider, width = 120px,
min = -5, max = 5, step = 0.1, value = 1
},
TextView {
id = xScaleValue, text = "1", margin-left = 12px, width = 32px
}
]
},
"Scale Y",
ListLayout {
margin-bottom = 12px, orientation = horizontal, vertical-align = center,
content = [
NumberPicker { id = yScaleEditor, type = slider, width = 120px,
min = -5, max = 5, step = 0.1, value = 1
},
TextView {
id = yScaleValue, text = "1", margin-left = 12px, width = 32px
}
]
},
"Scale Z",
ListLayout {
margin-bottom = 12px, orientation = horizontal, vertical-align = center,
content = [
NumberPicker { id = zScaleEditor, type = slider, width = 120px,
min = -5, max = 5, step = 0.1, value = 1
},
TextView {
id = zScaleValue, text = "1", margin-left = 12px, width = 32px
}
]
},
"Skew X (degree)",
ListLayout {
margin-bottom = 12px, orientation = horizontal, vertical-align = center,
content = [
NumberPicker { id = xSkewEditor, type = slider, width = 120px,
min = -90, max = 90, step = 1, value = 0
},
TextView {
id = xSkewValue, text = "0°", margin-left = 12px, width = 32px
}
]
},
"Skew Y (degree)",
ListLayout {
margin-bottom = 12px, orientation = horizontal, vertical-align = center,
content = [
NumberPicker { id = ySkewEditor, type = slider, width = 120px,
min = -90, max = 90, step = 1, value = 0
},
TextView {
id = ySkewValue, text = "0°", margin-left = 12px, width = 32px
}
]
},
"Rotate (degree)",
ListLayout {
margin-bottom = 12px, orientation = horizontal, vertical-align = center,
content = [
NumberPicker { id = RotateEditor, type = slider, width = 120px,
min = -180, max = 180, step = 1, value = 0
},
TextView {
id = RotateValue, text = "0°", margin-left = 12px, width = 32px
}
]
},
"Rotate X",
ListLayout {
margin-bottom = 12px, orientation = horizontal, vertical-align = center,
content = [
NumberPicker { id = xRotateEditor, type = slider, width = 120px,
min = 0, max = 1, step = 0.01, value = 1
},
TextView {
id = xRotateValue, text = "1", margin-left = 12px, width = 32px
}
]
},
"Rotate Y",
ListLayout {
margin-bottom = 12px, orientation = horizontal, vertical-align = center,
content = [
NumberPicker { id = yRotateEditor, type = slider, width = 120px,
min = 0, max = 1, step = 0.01, value = 1
},
TextView {
id = yRotateValue, text = "1", margin-left = 12px, width = 32px
}
]
},
"Rotate Z",
ListLayout {
margin-bottom = 12px, orientation = horizontal, vertical-align = center,
content = [
NumberPicker { id = zRotateEditor, type = slider, width = 120px,
min = 0, max = 1, step = 0.01, value = 1
},
TextView {
id = zRotateValue, text = "1", margin-left = 12px, width = 32px
}
]
},
Checkbox { id = backfaceVisibility, content = "backface-visibility", checked = true }
]
}
]
}`
func transformDemo(session rui.Session) rui.View {
view := rui.CreateViewFromText(session, transformDemoText)
if view == nil {
return nil
}
// transform := rui.NewTransform(view.Session())
transformView := rui.ViewByID(view, "transformView")
if transformView == nil {
return view
}
updateSliderText := func(tag string, value float64, unit string) {
rui.Set(view, tag, rui.Text, fmt.Sprintf("%g%s", value, unit))
}
rui.Set(view, "PerspectiveEditor", rui.NumberChangedEvent, func(v rui.NumberPicker, newValue float64) {
transformView.Set(rui.Perspective, rui.Px(newValue))
updateSliderText("PerspectiveValue", newValue, "px")
})
rui.Set(view, "xPerspectiveOriginEditor", rui.NumberChangedEvent, func(v rui.NumberPicker, newValue float64) {
transformView.Set(rui.PerspectiveOriginX, rui.Px(newValue))
updateSliderText("xPerspectiveOriginValue", newValue, "px")
})
rui.Set(view, "yPerspectiveOriginEditor", rui.NumberChangedEvent, func(v rui.NumberPicker, newValue float64) {
transformView.Set(rui.PerspectiveOriginY, rui.Px(newValue))
updateSliderText("yPerspectiveOriginValue", newValue, "px")
})
rui.Set(view, "xOriginEditor", rui.NumberChangedEvent, func(v rui.NumberPicker, newValue float64) {
transformView.Set(rui.OriginX, rui.Px(newValue))
updateSliderText("xOriginValue", newValue, "px")
})
rui.Set(view, "yOriginEditor", rui.NumberChangedEvent, func(v rui.NumberPicker, newValue float64) {
transformView.Set(rui.OriginY, rui.Px(newValue))
updateSliderText("yOriginValue", newValue, "px")
})
rui.Set(view, "zOriginEditor", rui.NumberChangedEvent, func(v rui.NumberPicker, newValue float64) {
transformView.Set(rui.OriginZ, rui.Px(newValue))
updateSliderText("zOriginValue", newValue, "px")
})
rui.Set(view, "xTranslateEditor", rui.NumberChangedEvent, func(v rui.NumberPicker, newValue float64) {
transformView.Set(rui.TranslateX, rui.Px(newValue))
updateSliderText("xTranslateValue", newValue, "px")
})
rui.Set(view, "yTranslateEditor", rui.NumberChangedEvent, func(v rui.NumberPicker, newValue float64) {
transformView.Set(rui.TranslateY, rui.Px(newValue))
updateSliderText("yTranslateValue", newValue, "px")
})
rui.Set(view, "zTranslateEditor", rui.NumberChangedEvent, func(v rui.NumberPicker, newValue float64) {
transformView.Set(rui.TranslateZ, rui.Px(newValue))
updateSliderText("zTranslateValue", newValue, "px")
})
rui.Set(view, "xScaleEditor", rui.NumberChangedEvent, func(v rui.NumberPicker, newValue float64) {
transformView.Set(rui.ScaleX, newValue)
updateSliderText("xScaleValue", newValue, "")
})
rui.Set(view, "yScaleEditor", rui.NumberChangedEvent, func(v rui.NumberPicker, newValue float64) {
transformView.Set(rui.ScaleY, newValue)
updateSliderText("yScaleValue", newValue, "")
})
rui.Set(view, "zScaleEditor", rui.NumberChangedEvent, func(v rui.NumberPicker, newValue float64) {
transformView.Set(rui.ScaleZ, newValue)
updateSliderText("zScaleValue", newValue, "")
})
rui.Set(view, "RotateEditor", rui.NumberChangedEvent, func(v rui.NumberPicker, newValue float64) {
transformView.Set(rui.Rotate, rui.Deg(newValue))
updateSliderText("RotateValue", newValue, "°")
})
rui.Set(view, "xRotateEditor", rui.NumberChangedEvent, func(v rui.NumberPicker, newValue float64) {
transformView.Set(rui.RotateX, newValue)
updateSliderText("xRotateValue", newValue, "")
})
rui.Set(view, "yRotateEditor", rui.NumberChangedEvent, func(v rui.NumberPicker, newValue float64) {
transformView.Set(rui.RotateY, newValue)
updateSliderText("yRotateValue", newValue, "")
})
rui.Set(view, "zRotateEditor", rui.NumberChangedEvent, func(v rui.NumberPicker, newValue float64) {
transformView.Set(rui.RotateZ, newValue)
updateSliderText("zRotateValue", newValue, "")
})
rui.Set(view, "xSkewEditor", rui.NumberChangedEvent, func(v rui.NumberPicker, newValue float64) {
transformView.Set(rui.SkewX, rui.Deg(newValue))
updateSliderText("xSkewValue", newValue, "°")
})
rui.Set(view, "ySkewEditor", rui.NumberChangedEvent, func(v rui.NumberPicker, newValue float64) {
transformView.Set(rui.SkewY, rui.Deg(newValue))
updateSliderText("ySkewValue", newValue, "°")
})
rui.Set(view, "backfaceVisibility", rui.CheckboxChangedEvent, func(checkbox rui.Checkbox, checked bool) {
transformView.Set(rui.BackfaceVisible, checked)
})
return view
}