1
0
mirror of https://github.com/lxsang/Diya-API.git synced 2024-12-26 03:18:22 +01:00

Change coordinate to top down, improvement on label rendering

This commit is contained in:
Dany LE 2022-08-06 03:11:36 +02:00
parent a8b89f19c5
commit 5915d86219
22 changed files with 189 additions and 87 deletions

View File

@ -10,8 +10,13 @@ Class {
}
{ #category : #accessing }
Diya2DPrimShape >> border [
^style get: #border
Diya2DPrimShape >> bgColor [
^style get: #bgcolor
]
{ #category : #accessing }
Diya2DPrimShape >> bgColor: c [
^style set: #bgcolor value: c
]
{ #category : #accessing }
@ -24,6 +29,11 @@ Diya2DPrimShape >> borderColor: c [
style set: #borderColor value: c.
]
{ #category : #accessing }
Diya2DPrimShape >> borderWidth [
^style get: #border
]
{ #category : #accessing }
Diya2DPrimShape >> borderWidth: w [
style set: #border value: w.
@ -36,14 +46,12 @@ Diya2DPrimShape >> boundingBox [
{ #category : #accessing }
Diya2DPrimShape >> color [
self texture ifNotNil: [ ^ self style get: #color. ].
^ self style get: #bgcolor.
^ self style get: #color.
]
{ #category : #accessing }
Diya2DPrimShape >> color: value [
self texture ifNotNil: [ ^ self style set: #color value: value. ].
^ self style set: #bgcolor value: value.
^ self style set: #color value: value
]
{ #category : #initialization }
@ -61,7 +69,7 @@ Diya2DPrimShape >> draw [
OpenGL drawArrays: type first:0 count:((vbuffer size )>> 2 ).
"reset value"
self texture ifNotNil: [self texture drop.].
self border > 0 ifTrue: [ self drawBorder ].
self borderWidth > 0 ifTrue: [ self drawBorder ].
context vao disableAttribute: 0.
]
@ -69,9 +77,9 @@ Diya2DPrimShape >> draw [
Diya2DPrimShape >> drawBorder [
"Diya2DShader uniqueInstance use."
shader setUniform: #u_color value: self borderColor asGL4FArray;
setUniform: #u_texture_type value: 0.
setUniform: #u_texture_type value: 1.
OpenGL
lineWidth: self border.
lineWidth: self borderWidth.
self drawLines.
OpenGL lineWidth: 1.0.
]
@ -111,6 +119,7 @@ Diya2DPrimShape >> setUpShader [
super setUpShader.
self shader
setUniform: #u_color value: self color asGL4FArray;
setUniform: #u_bg_color value: self bgColor asGL4FArray;
setUniform: #u_texture_type value:
(self texture ifNil: [ 0 ] ifNotNil:[self texture format]).
]

View File

@ -10,17 +10,17 @@ Diya2DShader class >> fragmentShader [
#ifdef GL_ES
precision highp float;
#endif
uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;
// 2D uniforms
uniform int u_texture_type;
uniform vec4 u_color;
uniform vec4 u_bg_color;
uniform sampler2D u_texture;
varying vec2 texcoord;
void main(void) {
vec4 texcolor = vec4(1,1,1,1);
vec4 texcolor = vec4(0,0,0,0);
// alpha
if(u_texture_type == 0x1906) {
texcolor = vec4(1, 1, 1, texture2D(u_texture, texcoord).a);
@ -29,7 +29,19 @@ void main(void) {
else if (u_texture_type == 0x1908){
texcolor = texture2D(u_texture, texcoord);
}
gl_FragColor = texcolor * u_color;
else if(u_texture_type == 1)
{
texcolor = vec4(1,1,1,1);
}
vec4 pxcolor = texcolor * u_color;
if(pxcolor.a > 0.0)
{
gl_FragColor = pxcolor;
}
else
{
gl_FragColor = u_bg_color;
}
}'
]
@ -55,6 +67,7 @@ Diya2DShader >> setUpUniforms [
self addUniform: #u_texture of: Uniform1i.
self addUniform: #u_texture_type of: Uniform1i.
self addUniform: #u_color of: Uniform4F.
self addUniform: #u_bg_color of: Uniform4F.
self addUniform: #u_border_color of: Uniform4F.
self addUniform: #u_border of: Uniform1F.
]

View File

@ -26,6 +26,7 @@ DiyaApplicationLauncher >> bindGlobalEvent [
root on: #quit do: [:e| running := false].
root on: #(fingerdown fingermotion mousemotion) do:[:e|
pointer position: e mapped worldPosition.
"Transcript show: e mapped worldPosition asString;cr."
DiyaRendererContext uniqueInstance mouse: (e mapped x) @ (e mapped y).
].
]
@ -79,8 +80,8 @@ DiyaApplicationLauncher >> running [
{ #category : #initialization }
DiyaApplicationLauncher >> setup [
event := SDL_Event new.
root addNode: (Diya2DNode new) at: 0@10.
txtFPS := root addNode:(DiyaText data: '') at: ( self context resolution x - 80)@40.
root addNode: (Diya2DNode new) at: 0@0.
txtFPS := root addNode:(DiyaText data: '') at: ( self context resolution x - 80)@(self context resolution y - 40).
txtFPS extent: 80@40.
txtFPS fontSize: 18.
txtFPS color: Color red.

View File

@ -29,7 +29,8 @@ DiyaButton >> initialize [
super initialize.
style
set:#textAlign value: #center;
set:#textVAlign value: #middle.
set:#textVAlign value: #middle;
set:#border value: 1.
rec := self addNode: (DiyaRectangle new).
label := self addNode: (DiyaLabel new).
label txt
@ -49,6 +50,6 @@ DiyaButton >> text: string [
{ #category : #accessing }
DiyaButton >> updateLayout [
rec extent: self extent.
label position: 0@(self extent y).
label position: 0@0.
label extent: self extent.
]

View File

@ -11,7 +11,7 @@ DiyaConvexPolygon >> calculateVertices [
vbuffer ifNotNil: [ vbuffer free ].
vbuffer := FFIExternalArray externalNewType: GLfloat size:size.
vbuffer autoRelease.
points sort:[:a :b| a angle < b angle].
points sort:[:a :b| a angle > b angle].
index := 1.
points do:[:point|
texcoord := self texcoordOf: point.
@ -19,7 +19,7 @@ DiyaConvexPolygon >> calculateVertices [
at: index put: point x;
at: index + 1 put: point y;
at: index + 2 put: texcoord x;
at: index + 3 put: 1.0 - texcoord y.
at: index + 3 put: texcoord y.
index := index + 4.
].
p := points at: 2.
@ -28,7 +28,7 @@ DiyaConvexPolygon >> calculateVertices [
at: index put: p x;
at: index + 1 put: p y;
at: index + 2 put: texcoord x;
at: index + 3 put: 1.0 - texcoord y.
at: index + 3 put: texcoord y.
]
{ #category : #initialization }

View File

@ -9,7 +9,7 @@ DiyaDefaultStyle >> initialize [
super initialize.
self set: #bgcolor value:(Color r: 0.2118 g: 0.2118 b: 0.2118).
self set: #color value: Color white.
self set: #border value: 1.
self set: #border value: 0.
self set: #fontSize value: 18.
self set: #fontFamily value: DiyaFontManager uniqueInstance defaultFamily.
self set: #fontStyle value: DiyaFontManager uniqueInstance defaultStyle.

View File

@ -95,13 +95,13 @@ DiyaEllipse >> setUpShader [
DiyaEllipse >> update [
bbox := Rectangle origin: ((rx negated) @ (ry negated)) corner: (rx @ ry).
{
bbox origin x. bbox corner y. 0.0. 0.0.
bbox origin x. bbox origin y. 0.0. 1.0.
bbox corner x. bbox origin y. 1.0. 1.0.
bbox origin x. bbox origin y. 0.0. 0.0.
bbox origin x. bbox corner y. 0.0. 1.0.
bbox corner x. bbox corner y. 1.0. 1.0.
bbox corner x. bbox origin y. 1.0. 1.0.
bbox corner x. bbox corner y. 1.0. 0.0.
bbox origin x. bbox corner y. 0.0. 0.0.
bbox corner x. bbox corner y. 1.0. 1.0.
bbox corner x. bbox origin y. 1.0. 0.0.
bbox origin x. bbox origin y. 0.0. 0.0.
} doWithIndex: [:e :i| vbuffer at: i put: e].
^true
]

View File

@ -89,8 +89,8 @@ void draw_ellipse(inout vec4 c, vec2 p, Ellipse e, float border)
vec2 rotate_point(vec2 center, vec2 p,float angle)
{
float s = sin(angle);
float c = cos(angle);
float s = sin(-angle);
float c = cos(-angle);
// translate point back to origin:
p.x -= center.x;
@ -110,7 +110,7 @@ void main() {
vec4 color = vec4(0);
//defining ellipse
Ellipse e = create_ellipse(middle, u_ry, u_rx);
draw_ellipse(color, rotate_point(middle, gl_FragCoord.xy, rotation), e, u_border);
draw_ellipse(color,rotate_point(middle, gl_FragCoord.xy, rotation), e, u_border);
// Output to screen
gl_FragColor = color;
}
@ -125,6 +125,7 @@ precision mediump float;
#endif
uniform mat4 u_projection;
uniform mat3 u_transform;
uniform vec2 u_resolution;
varying float rotation;
varying vec2 middle;
varying vec2 texcoord;
@ -133,7 +134,8 @@ void main()
vec3 coord_global = u_transform * vec3(gl_Vertex.xy, 1.0);
gl_Position = u_projection * vec4(coord_global.xy, 0, 1.0);
rotation = atan(u_transform[1][0], u_transform[0][0]);
middle = (u_transform * vec3(0.0,0.0,1.0)).xy;
vec2 org = (u_transform * vec3(0.0,0.0,1.0)).xy;
middle = vec2(org.x, u_resolution.y - org.y);
texcoord = gl_Vertex.zw;
}'
]

View File

@ -18,38 +18,45 @@ DiyaExampleApp >> main [
DiyaExampleApp >> setup [
|node node1 ell label icon button|
label := root addNode: (DiyaLabel new) at: 10@40.
label extent: 250@30.
label extent: 250@24.
label color: Color orange.
label iconSize: 24.
label icon: 16rF254.
node1 := root addNode: (DiyaRectangle size:100@150 shader: DiyaExampleShader uniqueInstance) at: 100 @ 400.
node1 rotation: (Float pi / 8.0).
node1 := root addNode: (DiyaRectangle size:100@150 shader: DiyaExampleShader uniqueInstance) at: 300 @ 40.
"node1 rotation: (Float pi / 8.0)."
node1 scale: 1.2@1.2.
node1 on: #(mousebuttondown fingerdown) do:[:e|
label txt: 'Mouse ', (node1 local: e mapped worldPosition) asIntegerPoint asString].
node := root addNode: (DiyaImageView from:'mrsang.png') at: 250 @ 430.
node := root addNode: (DiyaImageView from:'mrsang.png') at: 10 @ 400.
node color: (Color r: 1.0 g:1.0 b:1.0 alpha:1.0 ).
"node borderColor: Color red."
"node borderWidth: 3.0."
node borderWidth:1.
node bgColor: Color cyan.
node borderColor: Color red.
node borderWidth: 3.0.
node extent:200@200.
node := root addNode: (DiyaRectangle new) at: 10@80.
node borderWidth: 1.
node extent: 240@320.
"node := root addNode: (DiyaText data: String loremIpsum) at: 10@400.
node := root addNode: (DiyaText data: String loremIpsum) at: 10@80.
node extent: 240@320.
node wordWrap: true.
node fontSize: 16.
node align: #center."
node bgColor: Color transparent.
node align: #center.
node := root addNode: (DiyaLine from: 10@620 to: 200@635).
"node := root addNode: (DiyaLine from: 10@10 to: 200@200).
node color: (Color red).
node borderWidth: 2.0.
node borderWidth: 2.0."
ell := root addNode: (DiyaEllipse rx:100 ry: 70) at: 340@300.
ell := root addNode: (DiyaEllipse rx:100 ry: 70) at: 100@300.
ell borderColor: Color red.
ell color: Color white.
ell bgColor: Color cyan.
ell rotation: Float pi / 6.0.
ell borderWidth: 3.0.
"node rotation: Float pi / 2.0."
@ -63,13 +70,13 @@ DiyaExampleApp >> setup [
node textureNamed: 'mrsang.png'.
node borderWidth: 3.0.
icon := root addNode: (DiyaFontIcon data: #(16rF101 16rF155 16rF185 16rF21B 16rF298 16rF254)) at: 10@24.
"icon := root addNode: (DiyaFontIcon data: #(16rF101 16rF155 16rF185 16rF21B 16rF298 16rF254)) at: 10@24.
icon fontSize: 24.
icon color: (Color r: 209/255 g: 66/255 b:245/255 ).
icon color: (Color r: 209/255 g: 66/255 b:245/255 )."
button := root addNode: (DiyaButton text: 'Click me !') at: 160@10.
button := root addNode: (DiyaButton text: 'Click me !') at: 240@460.
button extent: 200@40.
button icon:16rF185.
button icon:16rF185"'mrsang.png'".
button iconSize: 24.
^ root
^ root
]

View File

@ -43,6 +43,17 @@ DiyaFontIcon >> getLinebreakIndices: delta [
self shouldNotBeCalled
]
{ #category : #accessing }
DiyaFontIcon >> iconSize [
^ self fontSize
]
{ #category : #accessing }
DiyaFontIcon >> iconSize: v [
"self extent: "
^ self fontSize: v
]
{ #category : #initialization }
DiyaFontIcon >> initialize [
super initialize.

View File

@ -0,0 +1,21 @@
Class {
#name : #DiyaImageIcon,
#superclass : #DiyaImageView,
#category : #'Diya-Graphics'
}
{ #category : #accessing }
DiyaImageIcon >> iconSize [
^ self extent x
]
{ #category : #accessing }
DiyaImageIcon >> iconSize:v [
^ self extent: v@v
]
{ #category : #accessing }
DiyaImageIcon >> initialize [
super initialize.
style set: #border value: 0
]

View File

@ -17,11 +17,16 @@ DiyaLabel >> fontSize [
{ #category : #accessing }
DiyaLabel >> fontSize: value [
txt fontSize: value.
icon ifNotNil: [ icon fontSize: value ].
"icon ifNotNil: [ icon fontSize: value ]."
"dirty := true."
]
{ #category : #accessing }
DiyaLabel >> getHAlign: offset [
^ 0 max: (txt alignLine: ( txt maxLineWidth)).
]
{ #category : #accessing }
DiyaLabel >> icon [
^ icon
@ -33,31 +38,24 @@ DiyaLabel >> icon: anObject [
anObject isNumber ifTrue: [
icon := self addNode: (DiyaFontIcon data: anObject).
icon align: #left].
anObject isString ifTrue: [ icon := self addNode: (DiyaImageView from: anObject)].
anObject isString ifTrue: [
icon := self addNode: (DiyaImageIcon from: anObject).
].
icon ifNil: [ ^ DiyaCoreAPIError signal: 'Invalid icon identification'].
dirty := true.
]
{ #category : #accessing }
DiyaLabel >> iconPosition: offset [
|xpos|
txt splitLines.
txt lines ifEmpty: [ ^0@0 ].
xpos := txt alignLine: txt lines first key.
^xpos@0
]
{ #category : #accessing }
DiyaLabel >> iconSize [
icon ifNil: [ ^0 ].
^icon fontSize.
^ icon iconSize
]
{ #category : #accessing }
DiyaLabel >> iconSize: v [
icon ifNil: [ ^self ].
icon fontSize: v.
icon iconSize: v
]
@ -82,16 +80,21 @@ DiyaLabel >> txt: anObject [
{ #category : #accessing }
DiyaLabel >> updateLayout [
|offset isize|
|offset isize align|
offset := 0.
icon ifNotNil: [
isize := icon fontSize.
offset := isize + (isize >> 1).
icon extent:offset @ (extent y).
isize := self iconSize.
offset := isize + (isize >> 2).
"icon extent:offset @ (extent y)."
].
txt extent: (extent x - offset) @ (extent y).
txt position: offset @ 0.
"lookahead update"
txt update.
align := self getHAlign: offset.
txt position: offset @ ( (self extent y - txt extent y ) >> 1).
icon ifNil: [ ^self ].
icon position: (self iconPosition: offset).
"{ offset. txt extent. txt maxLineWidth. align } inspect."
icon position: (align @( (self extent y - self iconSize ) >> 1)).
]

View File

@ -34,10 +34,11 @@ DiyaLine class >> points: points [
{ #category : #initialization }
DiyaLine >> draw [
shader setUniform: #u_texture_type value: 1.
OpenGL
"enable: GL_LINE_SMOOTH;
hint: GL_LINE_SMOOTH_HINT mode: GL_NICEST;"
lineWidth: self border.
lineWidth: self borderWidth.
super draw.
OpenGL lineWidth: 1.0";
disable: GL_LINE_SMOOTH".

View File

@ -13,7 +13,8 @@ Class {
'dirty',
'ehandlers',
'root',
'style'
'style',
'id'
],
#pools : [
'OpenGLConstants',
@ -69,6 +70,11 @@ DiyaNode >> extent [
^ self subclassResponsibility
]
{ #category : #accessing }
DiyaNode >> id [
^ id
]
{ #category : #initialization }
DiyaNode >> initialize [
super initialize.
@ -80,6 +86,7 @@ DiyaNode >> initialize [
ehandlers := Dictionary new.
style := DiyaNodeStyle new.
root := nil.
id := Random new nextInt: 1e6
]
{ #category : #'as yet unclassified' }
@ -185,7 +192,7 @@ DiyaNode >> setUpShader [
"in shader, window origin is bottom left conor of the window
the mouse position should be transformed to this coodinate"
shader setUniform: #u_mouse value:
{ context mouse x. context resolution y - context mouse y }.
{ context mouse x. context mouse y }.
].
mem free.
]

View File

@ -22,7 +22,11 @@ DiyaNodeStyle >> get: styleName [
DiyaNodeStyle >> initialize [
super initialize.
styles := Dictionary new.
parent := nil
parent := nil.
"self set: #bgcolor value: Color transparent.
self set: #color value:Color white.
self set: #border value: 0.
self set: #borderColor value: Color transparent."
]
{ #category : #accessing }

View File

@ -41,10 +41,10 @@ DiyaRectangle >> update [
|extent|
extent := self extent.
{
0.0. extent y. 0.0. 0.0.
0. 0. 0.0. 1.0.
extent x. 0.0. 1.0. 1.0.
extent x. extent y. 1.0. 0.0.
0. 0. 0.0. 0.0.
0. extent y. 0.0. 1.0.
extent x. extent y. 1.0. 1.0.
extent x. 0. 1.0. 0.0.
} doWithIndex: [:e :i| vbuffer at: i put: e].
^true
]

View File

@ -6,7 +6,8 @@ Class {
'wrap',
'texheight',
'font',
'lines'
'lines',
'maxLineWidth'
],
#pools : [
'FT2Types'
@ -130,7 +131,7 @@ DiyaText >> formatText [
index := index + 1.
]
].
offset setX: 0.0 setY: (offset y )- (texture linespace)
offset setX: 0.0 setY: (offset y ) + (texture linespace)
].
]
@ -140,17 +141,17 @@ DiyaText >> getCharsVerticesFrom:glyph offset: offset cellh: cellh [
|x y w h gsize texcoord|
gsize := glyph extent.
x := offset x + (glyph bearing x).
y := offset y - cellh.
y := offset y "- cellh".
w := (gsize x).
h := (gsize y).
texcoord := glyph texcoord.
offset setX: (offset x + (glyph advance x)) setY: offset y.
^{x. y + h. texcoord origin x. texcoord origin y.
x. y. texcoord origin x. texcoord corner y.
x + w. y. texcoord corner x. texcoord corner y.
^{x. y. texcoord origin x. texcoord origin y.
x. y + h. texcoord origin x. texcoord corner y.
x + w. y + h. texcoord corner x. texcoord corner y.
"x. y + h. texcoord origin x. texcoord origin y.
x + w. y. texcoord corner x. texcoord corner y."
x + w. y + h. texcoord corner x. texcoord origin y. }.
x + w. y. texcoord corner x. texcoord origin y. }.
]
{ #category : #accessing }
@ -170,6 +171,7 @@ DiyaText >> getLineAt: index to: line with: tex2D [
line add: glyph.
].
].
maxLineWidth := maxLineWidth max: w.
^ (data size + 1) @ w
]
@ -186,7 +188,9 @@ DiyaText >> initialize [
wrap := false.
texheight := 0.
style set: #border value: 0.
"style set: #bgcolor value: Color red."
type := GL_QUADS.
maxLineWidth := 0.
]
{ #category : #'as yet unclassified' }
@ -202,6 +206,17 @@ DiyaText >> lines [
^ lines
]
{ #category : #accessing }
DiyaText >> maxLineHeight [
texture ifNil: [ ^0].
^ texture linespace
]
{ #category : #accessing }
DiyaText >> maxLineWidth [
^ maxLineWidth
]
{ #category : #accessing }
DiyaText >> splitLines [
|line ret tex2D|
@ -236,6 +251,7 @@ DiyaText >> update [
vbuffer := FFIExternalArray externalNewType: GLfloat size: data size * 16.
vbuffer autoRelease.
self drawText.
dirty := false.
^true
]
@ -252,8 +268,8 @@ DiyaText >> valign: v [
{ #category : #accessing }
DiyaText >> valignText:h [
self valign = #middle ifTrue:[^ (0 max:((self extent y - h) / 2 ) asFloat) negated].
self valign = #bottom ifTrue:[^ (0 max:(self extent y - h )) negated].
self valign = #middle ifTrue:[^ (0 max:((self extent y - h) / 2 ) asFloat)].
self valign = #bottom ifTrue:[^ (0 max:(self extent y - h ))].
^0
]

View File

@ -12,6 +12,12 @@ DiyaWidget class >> fromStyle: aStyle [
^self new style: aStyle; yourself
]
{ #category : #accessing }
DiyaWidget >> bgColor:v [
^style set: #bgcolor value: v
]
{ #category : #accessing }
DiyaWidget >> color [
^style get: #color

View File

@ -27,10 +27,10 @@ OrthoProjectionMatrix >> bottom [
{ #category : #initialization }
OrthoProjectionMatrix >> calculate [
self at:1 at:1 put: (2.0 /(self right - self left)).
self at:2 at:2 put: (2.0 / (self top - self bottom)).
self at:2 at:2 put: (2.0 / (self bottom - self top)).
self at:3 at:3 put: (2.0 / (self far - self near)) negated.
self at:4 at:1 put: ((self right + self left)/ (self right - self left)) negated.
self at:4 at:2 put: ((self top + self bottom) / (self top - self bottom)) negated.
self at:4 at:2 put: ((self top + self bottom) / (self bottom - self top)) negated.
self at:4 at:3 put: ((self far + self near)/(self far - self near)) negated.
]

View File

@ -7,5 +7,5 @@ SDL_MouseButtonEvent >> triggableOn: aNode [
{ #category : #'*Diya' }
SDL_MouseButtonEvent >> worldPosition [
^ (self x) @ (DiyaRendererContext uniqueInstance resolution y - self y )
^ (self x) @ (self y )
]

View File

@ -7,5 +7,5 @@ SDL_MouseMotionEvent >> triggableOn: arg1 [
{ #category : #'*Diya' }
SDL_MouseMotionEvent >> worldPosition [
^ (self x) @ (DiyaRendererContext uniqueInstance resolution y - self y )
^ (self x) @ (self y )
]

View File

@ -9,5 +9,5 @@ SDL_TouchFingerEvent >> triggableOn: aNode [
SDL_TouchFingerEvent >> worldPosition [
|resolution|
resolution := DiyaRendererContext uniqueInstance resolution.
^((self x)* (resolution x) ) @ ((1.0 - self y)* (resolution y)).
^((self x)* (resolution x) ) @ ((self y)* (resolution y)).
]