#!/usr/bin/env python
# -*- coding: utf-8 -*-
# # brython, brythonmagic
#
# [brython](https://github.com/brython-dev/brython) is an implementation of Python in javascript, [byrthonmagic](https://github.com/kikocorreoso/brythonmagic) makes it available from a notebook.
# [documentation](https://github.com/kikocorreoso/brythonmagic) [source](https://github.com/kikocorreoso/brythonmagic) [installation](https://github.com/kikocorreoso/brythonmagic) [tutorial](https://github.com/kikocorreoso/brythonmagic)
# In[1]:
from jyquickhelper import add_notebook_menu
add_notebook_menu()
# ## example
# In[2]:
get_ipython().run_line_magic('load_ext', 'brythonmagic')
# In[3]:
get_ipython().run_cell_magic('html', '', '\n\n')
# In[4]:
html = """
Hi
"""
# In[5]:
get_ipython().run_cell_magic('brython', '-c html_ex -h html', 'from browser import doc\n\ndoc["paragraph"].style = {"color": "yellow",\n "fontSize": "100px",\n "lineHeight": "150px",\n "textAlign": "center",\n "backgroundColor": "black"}\n')
# In[6]:
get_ipython().run_cell_magic('brython', '-s my_dummy_function', 'def dummy_function(some_text):\n print(some_text)\n')
# In[7]:
get_ipython().run_cell_magic('brython', '-S my_dummy_function', "dummy_function('Hi')\n")
# In[8]:
get_ipython().run_cell_magic('brython', '-c simple_example', 'from browser import doc, html\n\nfor i in range(10):\n doc["simple_example"] <= html.P(i)\n')
# In[9]:
get_ipython().run_cell_magic('brython', '-c canvas_example', 'from browser.timer import request_animation_frame as raf\nfrom browser.timer import cancel_animation_frame as caf\nfrom browser import doc, html\nfrom time import time\nimport math\n\n# First we create a table to insert the elements\ntable = html.TABLE(cellpadding = 10)\nbtn_anim = html.BUTTON(\'Animate\', Id="btn-anim", type="button")\nbtn_stop = html.BUTTON(\'Stop\', Id="btn-stop", type="button")\ncnvs = html.CANVAS(Id="raf-canvas", width=256, height=256)\n\ntable <= html.TR(html.TD(btn_anim + btn_stop) +\n html.TD(cnvs))\n\ndoc[\'canvas_example\'] <= table\n# Now we access the canvas context\nctx = doc[\'raf-canvas\'].getContext( \'2d\' ) \n\n# And we create several functions in charge to animate and stop the draw animation\ntoggle = True\n\ndef draw():\n t = time() * 3\n x = math.sin(t) * 96 + 128\n y = math.cos(t * 0.9) * 96 + 128\n global toggle\n if toggle:\n toggle = False\n else:\n toggle = True\n ctx.fillStyle = \'rgb(200,200,20)\' if toggle else \'rgb(20,20,200)\'\n ctx.beginPath()\n ctx.arc( x, y, 6, 0, math.pi * 2, True)\n ctx.closePath()\n ctx.fill()\n\ndef animate(i):\n global id\n id = raf(animate)\n draw()\n\ndef stop(i):\n global id\n print(id)\n caf(id)\n\ndoc["btn-anim"].bind("click", animate)\ndoc["btn-stop"].bind("click", stop)\n')
# In[10]:
from brythonmagic import load_js_lib
load_js_lib("http://d3js.org/d3.v3.js")
# In[11]:
get_ipython().run_cell_magic('brython', '-c simple_d3', 'from browser import window, document, html\nfrom javascript import JSObject\n\nd3 = window.d3\n\ncontainer = JSObject(d3.select("#simple_d3"))\nsvg = container.append("svg").attr("width", 100).attr("height", 100)\ncircle1 = svg.append("circle").style("stroke", "gray").style("fill", "gray").attr("r", 40)\ncircle1.attr("cx", 50).attr("cy", 50).attr("id", "mycircle")\n\ncircle2 = svg.append("circle").style("stroke", "gray").style("fill", "white").attr("r", 20)\ncircle2.attr("cx", 50).attr("cy", 50)\n\ndef over(ev):\n document["mycircle"].style.fill = "blue"\n\ndef out(ev):\n document["mycircle"].style.fill = "gray"\n\ndocument["mycircle"].bind("mouseover", over)\ndocument["mycircle"].bind("mouseout", out)\n')
# In[12]:
get_ipython().run_cell_magic('brython', '-c manipulating', 'from browser import document, html\n\ndef hide(ev):\n divs = document.get(selector = \'div.input\')\n for div in divs:\n div.style.display = "none"\n\ndef show(ev):\n divs = document.get(selector = \'div.input\')\n for div in divs:\n div.style.display = "inherit"\n\ndocument["manipulating"] <= html.BUTTON(\'Hide code cells\', Id="btn-hide")\ndocument["btn-hide"].bind("click", hide)\n\ndocument["manipulating"] <= html.BUTTON(\'Show code cells\', Id="btn-show")\ndocument["btn-show"].bind("click", show)\n')
# In[13]:
load_js_lib("https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.6.5/OpenLayers.js")
# In[14]:
get_ipython().run_cell_magic('brython', '-c ol_map', 'from browser import document, window\nfrom javascript import JSConstructor, JSObject\n\n## Div layout\ndocument[\'ol_map\'].style.width = "800px"\ndocument[\'ol_map\'].style.height = "400px"\ndocument[\'ol_map\'].style.border = "1px solid black"\n\nOpenLayers = window.OpenLayers\n\n## Map\n_map = JSConstructor(OpenLayers.Map)(\'ol_map\')\n\n## Addition of a OpenStreetMap layer\n_layer = JSConstructor(OpenLayers.Layer.OSM)(\'Simple OSM map\')\n_map.addLayer(_layer)\n\n## Map centered on Lon, Lat = (-3.671416, 40.435897) and a zoom = 14\n## with a projection = "EPSG:4326" (Lat-Lon WGS84)\n_proj = JSConstructor(OpenLayers.Projection)("EPSG:4326")\n_center = JSConstructor(OpenLayers.LonLat)(-3.671416, 40.435897)\n_center.transform(_proj, _map.getProjectionObject())\n_map.setCenter(_center, 10)\n\n## Addition of some points around the defined location\nlons = [-3.670, -3.671, -3.672, -3.672, -3.672,\n -3.671, -3.670, -3.670]\nlats = [40.435, 40.435, 40.435, 40.436, 40.437,\n 40.437, 40.437, 40.436]\n\nsite_points = []\nsite_style = {}\n\npoints_layer = JSConstructor(OpenLayers.Layer.Vector)("Point Layer")\n_map.addLayer(points_layer)\n\nfor lon, lat in zip(lons, lats):\n point = JSConstructor(OpenLayers.Geometry.Point)(lon, lat)\n point.transform(_proj, _map.getProjectionObject())\n _feat = JSConstructor(OpenLayers.Feature.Vector)(point)\n points_layer.addFeatures(_feat)\n')
# In[15]:
load_js_lib("http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.2/raphael-min.js")
# In[16]:
get_ipython().run_cell_magic('brython', '-c raphael_ex', 'from browser import window\nfrom javascript import JSObject\n\nRaphael = window.Raphael\n\npaper = JSObject(Raphael("raphael_ex", 400, 400))\n\n#Draw rectagle\nrect = paper.rect(1,1,398,398)\nrect.attr("stroke", "black")\n\n#Draw orbits\nfor rot in range(90,280,60):\n ellipse = paper.ellipse(200, 200, 180, 50)\n ellipse.attr("stroke", "gray")\n ellipse.rotate(rot)\n\n#Draw nucleus\nnucleus = paper.circle(200,200,40)\nnucleus.attr("fill", "black")\n\n# Draw electrons\nelectron = paper.circle(200, 20, 10)\nelectron.attr("fill", "red")\nelectron = paper.circle(44, 290, 10)\nelectron.attr("fill", "yellow")\nelectron = paper.circle(356, 290, 10)\nelectron.attr("fill", "blue")\n')
# In[17]:
get_ipython().run_cell_magic('brython', '', 'from browser import doc, html\n\ndef show_cell_number(on = True):\n cells = doc.get(selector = \'.input_prompt\')\n for i, cell in enumerate(cells):\n if on:\n if \'In\' in cell.html and \'
\' not in cell.html:\n cell.html += "
cell #" + str(i)\n else:\n if \'In\' in cell.text:\n cell.html = cell.html.split(\'
\')[0]\n\nshow_cell_number(on = True)\n')
# In[18]: