From 8b6a7927f4ce8b7db61bd2affaa31e56e7a11b96 Mon Sep 17 00:00:00 2001 From: Dany LE Date: Mon, 8 Aug 2022 00:12:54 +0200 Subject: [PATCH] Correct openGL transparent color display problem, stylesheet now allows style inheritance --- Diya/Array.extension.st | 10 ++++++++ Diya/Diya2DPrimShape.class.st | 7 ++++++ Diya/Diya2DShader.class.st | 18 ++++++++------ Diya/DiyaEllipse.class.st | 10 -------- Diya/DiyaExampleApp.class.st | 27 ++++++++++++-------- Diya/DiyaImageTex.class.st | 8 ++---- Diya/DiyaStyle.class.st | 41 +++++++++++++++++++++++++++++++ Diya/DiyaStyleSheet.class.st | 24 +++++++++++++----- Diya/DiyaUIThemesManager.class.st | 2 +- 9 files changed, 106 insertions(+), 41 deletions(-) create mode 100644 Diya/DiyaStyle.class.st diff --git a/Diya/Array.extension.st b/Diya/Array.extension.st index 5354d3f..3895808 100644 --- a/Diya/Array.extension.st +++ b/Diya/Array.extension.st @@ -1,5 +1,15 @@ Extension { #name : #Array } +{ #category : #'*Diya' } +Array >> asDiyaStyle [ + |style| + style := DiyaStyle new. + self do:[:v | + style at: v key put: v value + ]. + ^style +] + { #category : #'*Diya' } Array >> asPoint [ ^ (self at: 1 ifAbsent:[0]) @ (self at: 2 ifAbsent:[0]) diff --git a/Diya/Diya2DPrimShape.class.st b/Diya/Diya2DPrimShape.class.st index 760610f..c5b187d 100644 --- a/Diya/Diya2DPrimShape.class.st +++ b/Diya/Diya2DPrimShape.class.st @@ -22,6 +22,10 @@ Diya2DPrimShape >> boundingBox [ { #category : #initialization } Diya2DPrimShape >> draw [ vbuffer ifNil: [ ^self ]. + OpenGL + enable: GL_CULL_FACE; + enable: GL_BLEND; + blendFnWithSfactor: GL_SRC_ALPHA dfactor: GL_ONE_MINUS_SRC_ALPHA. "configure vao vbo for texture QUAD" self texture ifNotNil: [ self texture setup. @@ -36,6 +40,9 @@ Diya2DPrimShape >> draw [ self texture ifNotNil: [self texture drop.]. self borderWidth > 0 ifTrue: [ self drawBorder ]. context vao disableAttribute: 0. + OpenGL + disable: GL_CULL_FACE; + disable: GL_BLEND. ] { #category : #initialization } diff --git a/Diya/Diya2DShader.class.st b/Diya/Diya2DShader.class.st index 676d84f..6725e3c 100644 --- a/Diya/Diya2DShader.class.st +++ b/Diya/Diya2DShader.class.st @@ -20,7 +20,13 @@ uniform vec4 u_bg_color; uniform sampler2D u_texture; varying vec2 texcoord; void main(void) { - vec4 texcolor = vec4(0,0,0,0); + if(u_texture_type == 1) + { + // draw border + gl_FragColor = u_color; + return; + } + vec4 texcolor = u_bg_color; // alpha if(u_texture_type == 0x1906) { texcolor = vec4(1, 1, 1, texture2D(u_texture, texcoord).a); @@ -28,19 +34,15 @@ void main(void) { // rgba else if (u_texture_type == 0x1908){ texcolor = texture2D(u_texture, texcoord); - } - 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; + gl_FragColor = u_bg_color; } }' ] diff --git a/Diya/DiyaEllipse.class.st b/Diya/DiyaEllipse.class.st index 877db04..b3bdd16 100644 --- a/Diya/DiyaEllipse.class.st +++ b/Diya/DiyaEllipse.class.st @@ -23,16 +23,6 @@ DiyaEllipse class >> rx: rx ry: ry shader: s [ yourself ] -{ #category : #initialization } -DiyaEllipse >> draw [ - OpenGL - enable: GL_BLEND; - blendFnWithSfactor: GL_SRC_ALPHA dfactor: GL_ONE_MINUS_SRC_ALPHA. - super draw. - OpenGL - disable: GL_BLEND -] - { #category : #initialization } DiyaEllipse >> drawBorder [ "do nothing" diff --git a/Diya/DiyaExampleApp.class.st b/Diya/DiyaExampleApp.class.st index 3b62247..225d776 100644 --- a/Diya/DiyaExampleApp.class.st +++ b/Diya/DiyaExampleApp.class.st @@ -17,12 +17,18 @@ DiyaExampleApp >> defineStyleSheet [ #fontSize -> 24. #bgColor -> Color transparent. }; + define: #text_icon_2 extend:#text_icon_1 styles: { + #fontSize -> 16. + }; define: #image_view styles: { - #color -> (Color r: 1.0 g:1.0 b:1.0 alpha:1.0 ). - #border -> 3. + #color -> Color white. + #border -> 1. #bgColor -> Color cyan. #borderColor -> Color red }; + define: #rect_view extend: #image_view styles: { + #bgColor -> Color transparent. + }; define: #text_view styles: { #color -> Color orange. #fontSize -> 16. @@ -36,18 +42,18 @@ DiyaExampleApp >> defineStyleSheet [ define: #ell_view styles: { #borderColor -> Color red. #color -> Color white. - #bgColor -> Color cyan. - #border -> 3. + #border -> 2. }; define: #poly_view styles: { #borderColor -> Color red. #color -> Color green. - #border -> 3. + #border -> 1. + #bgColor -> Color transparent. }; define: #button_view styles: { - #borderColor -> Color red. + #borderColor -> (Color r: 0.051 g: 0.051 b: 0.051). #color -> Color white. - #bgColor -> Color magenta. + #bgColor -> (Color r: 0.1529 g: 0.1529 b: 0.1529). #border -> 1. #yAlign -> #middle. #xAlign -> #center @@ -80,7 +86,7 @@ DiyaExampleApp >> setup [ node extent:200@200. node := root addNode: (DiyaRectangle new) at: 10@80. - node styleName: #image_view. + node styleName: #rect_view. node extent: 240@320. node := root addNode: (DiyaText data: String loremIpsum) at: 10@80. @@ -103,12 +109,13 @@ DiyaExampleApp >> setup [ node textureNamed: 'mrsang.png'. node styleName: #poly_view. - "icon := root addNode: (DiyaFontIcon data: #(16rF101 16rF155 16rF185 16rF21B 16rF298 16rF254)) at: 240@500. - icon styleName: #text_icon_1 ." + icon := root addNode: (DiyaFontIcon data: #(16rF101 16rF155 16rF185 16rF21B 16rF298 16rF254)) at: 240@500. + icon styleName: #text_icon_2. button := root addNode: (DiyaButton text: 'Click me !') at: 240@460. button extent: 200@40. button icon:16rF185"'mrsang.png'". + "button rotation: Float pi / 2.0." button styleName: #button_view. ^ root ] diff --git a/Diya/DiyaImageTex.class.st b/Diya/DiyaImageTex.class.st index 8638427..c7f2713 100644 --- a/Diya/DiyaImageTex.class.st +++ b/Diya/DiyaImageTex.class.st @@ -18,9 +18,9 @@ DiyaImageTex class >> fromFile: path [ { #category : #accessing } DiyaImageTex >> drop [ - OpenGL + "OpenGL disable: GL_CULL_FACE; - disable: GL_BLEND. + disable: GL_BLEND." ] { #category : #'instance creation' } @@ -72,10 +72,6 @@ DiyaImageTex >> path [ { #category : #accessing } DiyaImageTex >> setup [ - OpenGL - enable: GL_CULL_FACE; - enable: GL_BLEND; - blendFnWithSfactor: GL_SRC_ALPHA dfactor: GL_ONE_MINUS_SRC_ALPHA. OpenGLTexture parameteri: GL_TEXTURE_2D pname: GL_TEXTURE_WRAP_S param: GL_CLAMP_TO_EDGE; parameteri: GL_TEXTURE_2D pname: GL_TEXTURE_WRAP_T param: GL_CLAMP_TO_EDGE; diff --git a/Diya/DiyaStyle.class.st b/Diya/DiyaStyle.class.st new file mode 100644 index 0000000..379f4e0 --- /dev/null +++ b/Diya/DiyaStyle.class.st @@ -0,0 +1,41 @@ +Class { + #name : #DiyaStyle, + #superclass : #DiyaBaseObject, + #instVars : [ + 'parent', + 'style' + ], + #category : #'Diya-Graphics' +} + +{ #category : #accessing } +DiyaStyle >> at: name ifAbsent: aBlock [ + |value| + value := style at: name ifAbsent:[nil]. + value ifNotNil: [ ^value ]. + parent ifNil: [ ^aBlock value ]. + ^ parent at:name ifAbsent: aBlock. +] + +{ #category : #accessing } +DiyaStyle >> at: name put: value [ + style at: name put: value +] + +{ #category : #initialization } +DiyaStyle >> initialize [ + super initialize. + style := Dictionary new. + parent := nil + +] + +{ #category : #accessing } +DiyaStyle >> parent [ + ^ parent +] + +{ #category : #accessing } +DiyaStyle >> parent: anObject [ + parent := anObject +] diff --git a/Diya/DiyaStyleSheet.class.st b/Diya/DiyaStyleSheet.class.st index ae209c9..d346b28 100644 --- a/Diya/DiyaStyleSheet.class.st +++ b/Diya/DiyaStyleSheet.class.st @@ -8,16 +8,28 @@ Class { } { #category : #convenience } -DiyaStyleSheet >> ? sheet [ - ^stylesheet at: sheet ifAbsent:[ - DiyaCoreAPIError signal: 'Unable to query stylesheet ', sheet +DiyaStyleSheet >> ? styleName [ + ^stylesheet at: styleName ifAbsent:[ + DiyaCoreAPIError signal: 'Unable to query stylesheet ', styleName ]. ] { #category : #initialization } -DiyaStyleSheet >> define: name styles: styles [ - stylesheet at: name put: styles asDictionary. - ^self +DiyaStyleSheet >> define: styName extend: parentStyName styles: rules [ + |parentSheet style| + parentSheet := self ? parentStyName. + style := self define: styName styles: rules. + style parent: parentSheet. + ^style + +] + +{ #category : #initialization } +DiyaStyleSheet >> define: name styles: rules [ + |style| + style := rules asDiyaStyle. + stylesheet at: name put: style. + ^style ] diff --git a/Diya/DiyaUIThemesManager.class.st b/Diya/DiyaUIThemesManager.class.st index 9e5484e..770a46c 100644 --- a/Diya/DiyaUIThemesManager.class.st +++ b/Diya/DiyaUIThemesManager.class.st @@ -50,7 +50,7 @@ DiyaUIThemesManager >> defineDefaultTheme [ #xAlign -> #left. #yAlign -> #middle. #iconSize -> 24. - } + }; yourself ) ]