from IPython.display import HTML, SVG
from IPython.core.magic import register_cell_magic
HTML('''
<h2>Hello</h2>
''')
def js(src):
return HTML(f"""
<div class='chart'></div>
<!-- script src="https://d3js.org/d3.v5.min.js"></script -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/processing.js/1.6.6/processing.js"></script>
<script>
{src}
</script>
""")
js('''
document.querySelector('.chart').innerHTML = 'Bye';
''')
HTML("""
<style>
article div {
width: 2rem;
height: 2rem;
margin: .5rem;
}
.green {
background-color: green;
}
.blue {
background-color: blue;
}
</style>
<section>
<article>
<div class="blue"></div>
<div class="green"></div>
</article>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.js"></script>
<script>
var myAnimation = anime({
targets: ['.blue', '.green'],
translateX: '13rem',
rotate: 180,
borderRadius: '8px',
duration: 5000,
loop: false
});
</script>
""") # ez egy HTM +js minta
HTML('''
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.0/p5.js"></script>
<script>
new p5();
ellipse(50, 50, 80, 80);
</script>
''')
# kör rajzolás
@register_cell_magic
def ps(line, src):
return HTML(f"""
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.0/p5.js"></script>
<script>
new p5();
{src.replace(" #", " //")} // allow python-style comment
</script>
""")
%%ps
createCanvas(200, 200)
ellipse(50, 50, 80, 80) # circle
rect(50, 50, 80, 80)
line(50, 50, 80, 80)