Welcome!
This is the community forum for my apps Pythonista and Editorial.
For individual support questions, you can also send an email. If you have a very short question or just want to say hello β I'm @olemoritz on Twitter.
need some criticized input please.
-
@cvp thank you! when i get back to the animation system ill rewrite the texture cache and see if i can get that to work
-
@cvp said:
@stephen said:
my problem with that is i need them to be scene.Textures..
You can convert a sgv to an ui.Image via
import os import ui w = ui.WebView() fpath = os.path.expanduser('~/Documents/test.svg') w.load_url('file://'+fpath) w.present('sheet') with ui.ImageContext(w.width, w.height) as ctx: w.draw_snapshot() ui_image = ctx.get_image() ui_image.show()
all i get is a white rect from this π
-
@stephen For me it is ok for a static svg but white rectangle if animated svg, what you did not yet ask at this moment π
-
-
-
@stephen increase the frame and it is ok
import os import ui w = ui.WebView() w.frame = (0,0,500,500) fpath = os.path.expanduser('~/Documents/svg-test.svg') #fpath = os.path.expanduser('~/Documents/test.svg') w.load_url('file://'+fpath) w.present('sheet') with ui.ImageContext(w.width, w.height) as ctx: w.draw_snapshot() ui_image = ctx.get_image() ui_image.show()
-
awesome didnt think about the frame. but sadely i seem to lose the alpha transparency. im sure i can go through the process of adding one but at that point id have to change format and then i lose the perks of vector graphics. plus id have to run the add alpha process to a library of images for the game and that seemsnlike a bad idea lol. thank you tho for checking it out for me π
-
@stephen transparency works
import os import ui v = ui.View() v.frame = (0,0,500,250) v.name = 'with or without opacity=0' w1 = ui.WebView() w1.frame = (0,0,250,250) html = ''' <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> <svg xmlns="http://www.w3.org/2000/svg" width="304" height="290"> <path d="M2,111h300 l-242.7,176.3 92.7-285.3 92.7,285.3z" fill="#FB2" stroke="#B00" stroke-width="4" stroke-linejoin="round"/> </svg> ''' w1.load_html(html) v.add_subview(w1) w2 = ui.WebView() w2.frame = (250,0,250,250) html = ''' <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> <svg xmlns="http://www.w3.org/2000/svg" width="304" height="290"> <path d="M2,111h300 l-242.7,176.3 92.7-285.3 92.7,285.3z" fill="#FB2" stroke="#B00" stroke-width="4" stroke-linejoin="round" fill-opacity="0"/> </svg> ''' w2.load_html(html) v.add_subview(w2) v.present('sheet') #with ui.ImageContext(w.width, w.height) as ctx: # w.draw_snapshot() # ui_image = ctx.get_image() # ui_image.show()
-
@cvp ya you are creating the opacity programaticaly (if thats the right term here lol ) where in my image it is solid where it should have a 50% alpha that i set in third party editor.
-
@stephen I don't know anything about it but it is only to show that WebView supports opacity in static svg...
-
@stephen how are sure that your file test-svg.svg is half transparent?
-
gotcha thank you @cvp π
-
@stephen sorry, I don't understand What you mean
-
@cvp
its ok buddy i had done some research before (you probably know by now how i love research lol) and i couldnt find a way to use svg in scene. im sure there is an objc way but im not familier enough there lol -
@stephen I just found that WebView supports animated svg, try this
import os import ui w = ui.WebView() w.frame = (0,0,500,500) #fpath = os.path.expanduser('~/Documents/svg-test.svg') #w.load_url('file://'+fpath) html = ''' <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 300"> <rect class="mouse" x="0" y="0" width="800" height="300"/> <polygon class="diamondTu tulip" points="400, 280, 310, 150, 400, 20, 490, 150"/> <style> .mouse { fill: #E5E4E3; } .tulip { fill: #CC2954; } .diamondTu { animation-name: diamondTurns; animation-duration: 4s; animation-iteration-count: infinite; transform-origin: 50% 50%; } @keyframes diamondTurns { 0% { transform: rotate(0deg); } 50% { transform: rotate(-90deg); } 100% { transform: rotate(0deg); } } </style> </svg ''' w.load_html(html) w.present('sheet') #with ui.ImageContext(w.width, w.height) as ctx: # w.draw_snapshot() # ui_image = ctx.get_image() # ui_image.show()
-
@stephen said:
i couldnt find a way to use svg in scene. im sure there is an objc way
I think that I had read that SKTexture does not support svg π’
-
@stephen Perhpas could you use Shader, as here (try it)
Γdit: sorry, it needs a/your test.jpg in the folder of the script
# shader example from Pythonista doc about Scene.Shader from scene import * import os # RIPPLE GLSL shader program ripple_shader1 = ''' precision highp float; varying vec2 v_tex_coord; // texture coordinate // These uniforms are set automatically: uniform sampler2D u_texture; // input image uniform float u_time; // timer uniform vec2 u_sprite_size; // This uniform is set in response to touch events: uniform vec2 u_offset; void main(void) { vec2 p = -1.0 + 2.0 * v_tex_coord + (u_offset / u_sprite_size * 2.0); float len = length(p); vec2 uv = v_tex_coord + (p/len) * 1.5 * cos(len*50.0 - u_time*10.0) * 0.03; gl_FragColor = texture2D(u_texture,uv); // fragment shader color } ''' # SPHERE EFFECT GLSL shader program ripple_shader2 = ''' precision highp float; varying vec2 v_tex_coord; // texture coordinate uniform float u_time; // time in seconds uniform sampler2D tex0; // scene buffer void main(void) { vec2 tc = v_tex_coord; vec2 p = -1.0 + 2.0 * tc; float r = dot(p,p); if (r > 1.0) discard; float f = (1.0-sqrt(1.0-r))/(r); vec2 uv; uv.x = p.x*f + u_time; uv.y = p.y*f + u_time; gl_FragColor = vec4(texture2D(tex0,uv).xyz, 1.0); } ''' # EDGE DETECTION shader program ripple_shader3 = ''' precision highp float; varying vec2 v_tex_coord; // texture coordinate uniform vec2 imageResolution; uniform sampler2D u_texture; void main() { vec2 pos = vec2(v_tex_coord.x, 1.0 - v_tex_coord.y); vec2 onePixel = vec2(1, 1) / imageResolution; vec4 color = vec4(0); mat3 edgeDetectionKernel = mat3( -1, -1, -1, -1, 8, -1, -1, -1, -1 ); for(int i = 0; i < 3; i++) { for(int j = 0; j < 3; j++) { vec2 samplePos = pos + vec2(i - 1 , j - 1) * onePixel; vec4 sampleColor = texture2D(u_texture, samplePos); sampleColor *= edgeDetectionKernel[i][j]; color += sampleColor; } } color.a = 1.0; gl_FragColor = color; } ''' # EMBOSS shader program ripple_shader4 = ''' precision highp float; varying vec2 v_tex_coord; uniform sampler2D u_texture; uniform float u_time; // time in seconds void main() { // 2 vec2 onePixel = vec2(1.0 / 480.0, 1.0 / 320.0); // 3 vec2 texCoord = v_tex_coord; // 4 vec4 color; color.rgb = vec3(0.5); color -= texture2D(u_texture, texCoord - onePixel) * 5.0; //*u_time; color += texture2D(u_texture, texCoord + onePixel) * 5.0; // 5 color.rgb = vec3((color.r + color.g + color.b) / 3.0); gl_FragColor = vec4(color.rgb, 1); } ''' # MIRROR EFFECT GLSL shader program ripple_shader5 = ''' precision highp float; varying vec2 v_tex_coord; uniform sampler2D texture; uniform vec2 u_sprite_size; uniform float u_time; // time in seconds void main() { vec2 uv = v_tex_coord; float sepoffset = 0.005*cos(u_time*3.0); if (uv.y > 0.5)// + sepoffset)// is air - no reflection or effect { gl_FragColor = texture2D(texture, vec2(uv.x, uv.y)); } else { // Compute the mirror effect. float xoffset = 0.005*cos(u_time*3.0+200.0*uv.y); float yoffset = ((0.3 - uv.y)/0.3) * 0.05*(1.0+cos(u_time*3.0+50.0*uv.y)); vec4 color = texture2D(texture, vec2(uv.x+xoffset , 1.0 - uv.y+ yoffset)); gl_FragColor = color; } } ''' class MyScene (Scene): def setup(self): self.sprite = SpriteNode('test.jpg', parent=self) self.sprite.shader = Shader(ripple_shader1) self.did_change_size() def did_change_size(self): # Center the image: self.sprite.position = self.size/2 def touch_began(self, touch): self.set_ripple_center(touch) def touch_moved(self, touch): self.set_ripple_center(touch) def set_ripple_center(self, touch): # Center the ripple effect on the touch location by setting the `u_offset` shader uniform: dx, dy = self.sprite.position - touch.location self.sprite.shader.set_uniform('u_offset', (dx, dy)) run(MyScene())
-
@cvp haha thats pretty awesome! i should look into shaders im sure some post processing will do some good haha
-
@stephen yes, but no so easy, one language more to learn , I become too old for this stuff π’
-
@stephen You only π need to (find a tool to) convert SVG into GLSL language of Shader