need some criticized input please.

[stephen]

@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 😕

[cvp]

@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 🙄

[cvp]

@stephen UIWebView does not support animated svg but SFSafariViewController does

See my script and for instance

	main('https://codyhouse.co/demo/animated-svg-icon/index.html') 

[stephen]

@cvp

here is the same file im testing with. and the mage should have transparency

[cvp]

@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() 

[stephen]

@cvp

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 😊

[cvp]

@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() 

[stephen]

@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.

[cvp]

@stephen I don't know anything about it but it is only to show that WebView supports opacity in static svg...

[cvp]

@stephen how are sure that your file test-svg.svg is half transparent?

[stephen]

gotcha thank you @cvp 🙃

[cvp]

@stephen sorry, I don't understand What you mean

[stephen]

@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

[cvp]

@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() 

[cvp]

@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 😢

[cvp]

@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())

[stephen]

@cvp haha thats pretty awesome! i should look into shaders im sure some post processing will do some good haha

[cvp]

@stephen yes, but no so easy, one language more to learn , I become too old for this stuff 😢

[cvp]

@stephen You only 🙄 need to (find a tool to) convert SVG into GLSL language of Shader

[stephen]

@cvp
never too old 😊 ive been tryingbto familierise myself with as many as i can. so far i have worked with:

• C# .net
• C
• C++
• java
• java script
• unreal script (language died)
• html
• css
• php
• sourceScript (Wraps C++ for source engine by valve)
• python

and currently objc, first through objc_utils then ObjC its self.
next will be gfx shaders

c# i got pretty well in tuned with but the rest i could use some more learning. i did notice they all, for the most part, are extremly close to eachother just dif rules