[Python] Kivy shaders appear only in top right part of screen

I am trying my first attempts with kivy shaders because I want to have a gradient background for my widgets. How can I apply the shader to the whole Widget background? Somehow it only appears in the top right corner of the screen.

from kivy.app import App
from kivy.uix.widget import Widget
from kivy.graphics import RenderContext, Color, Rectangle
from kivy.uix.boxlayout import BoxLayout
from kivy.properties import NumericProperty

class ShaderWidget(Widget):
mid_point = NumericProperty(0.0)

def __init__(self, **kwargs):
self.canvas = RenderContext()
super(ShaderWidget, self).__init__(**kwargs)

self.canvas.shader.fs = '''
$HEADER$
uniform vec2 resolution;
uniform float u_mid_point;

void main(void) {
vec2 pos = gl_FragCoord.xy / resolution.xy;
float alpha_channel_rate;

if (gl_FragCoord.x < u_mid_point) {
alpha_channel_rate = pow(gl_FragCoord.x / u_mid_point, 2.0);
} else {
alpha_channel_rate = pow((resolution.x - gl_FragCoord.x) / u_mid_point, 2.0);
}

vec4 color = vec4(alpha_channel_rate * 0.5, alpha_channel_rate * 0.5, alpha_channel_rate * 0.5, 1.0);
gl_FragColor = color;
}
'''

with self.canvas:
Color(1, 1, 1, 1) # White color
self.rect = Rectangle(pos=self.pos, size=self.size)

self.bind(size=self.update_rect, pos=self.update_rect)

def update_rect(self, *args):
self.rect.pos = self.pos
self.rect.size = self.size

self.canvas['resolution'] = [self.width, self.height]
self.canvas['u_mid_point'] = self.width / 2


class GradientApp(App):
def build(self):
layout = BoxLayout()

shader_widget = ShaderWidget()
layout.add_widget(shader_widget)
return layout


if __name__ == '__main__':
GradientApp().run()


Also if theres somebody with experience, I'd like to know how can I make a shader that's fading in from black to white and then fading out back to black over the whole widget background. Thanks in advance!

Continue reading...