need some criticized input please.

stephen

@cvp dos this preserve alpha?

stephen

Did you draw them on an iOS device? If yes, which app did you use? I'm rather intrigued because Vectornator (what I'm using) is good, but certainly not perfect.

on iPad Air2
sketch
Draw
vectornator

most of it is hand painted and with Draw you can use brushes to draw vectors but vectornator give beter control of the vertices.. and the export scaling helps alot
y process for drawing usually goes...
Adobe Sketch ⇒ AdobeDraw for base structure
Adobe Draw ⇒ Adobe Sketch for detailing
Adobe Sketch ⇒ Vectornator for finalizing and export.

you can also save to creative cloud on vectornator to combine all three for pretty good workflow

cvp

@stephen said:

dos this preserve alpha?

No idea at all. I just thought a little time to find a solution svg -> ui.Image

stephen

@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

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