Author Archive

Improvements to the RendererKivy (Part 2)

July 22nd, 2015 No comments

The following modifications have been implemented in these days:

  • Fixed problem when rendering concave polygons. It can be seen from previous images that in the case of an arrow and a wedge there was a defect on the rendering due to the triangulation algorithm to fill it. The mesh renderer uses “triangle_fan” and since all the points form triangles always with the hub in concave polygons this was a problem. It was fixed by splitting concave polygons into convex ones. This was implemented using Tesselator a utility class in the graphics kivy package.
  • Path was being closed when it should not. It has been fixed that a path line was being closed by default, the initial point was removed so the line does not try to close a path when it is not necessary.
  • Elements out of the figure axes are not rendered. The problem here is that everything was being drawn in the same layer. A stencil widget is used as a mask so everything out of bounds it is hidden. In the second figure, 4 stencil instructions are created to show just the graphics instructions visible in the clip rectangle.
  • Focus behavior was added to the FigureCanvasKivy. Keyboard events are automatically bound by the focus behavior.
  • Added support for multiple dash length and offset in a same line. Line can receive a list with the values of length and offset for the respective rendering. For instance [10, 5, 20, 10] would create a line with 10 visible points then 5 hidden 20 visible and 10 hidden. This can be seen on the figure of the sin function below

dynamic dashes in a line4 stencil widgetsartist demointegral demo

Categories: GSOC2015, kivy, matplotlib Tags: , ,

Improvements to the RendererKivy

July 17th, 2015 No comments

The main improvements to the Renderer involved to run a test for the backend_kivy with as many as possible examples. From the test we figured out there were some implementations missed. The following are the main improvements done to the Renderer this week:

  • The rendering of the text is not blurry anymore. This was fixed by working with int values instead of float, it seems like opengl was trying to give some percentage of the pixel value to the previous and next pixel giving this effect.
  • Math text such as integrals, derivatives and so on can be added to the figure canvas. Matplotlib provides a very useful math text parser which receives the string and returns an object that can be embedded on the kivy canvas.
  • Images as textures can be added inside a Figure and outside as well. Matplotlib allows to generate some interpolation graphs which can be inserted into the axes and give some fancy visualization of data. Since color in kivy’s renderering is multiplicative, you would want the color to be white or the texture will be ‘tinted’ as it will be something other than 1.* color channel at pixel. Initially the problem was that the texture was invisible but it was solved by changing the Color to white as it is explained before. When a figure is not present the image is added directly to the canvas as a texture.

Some examples can be seen in the pictures below. Additionally there are two known problems, the first one is that the rendering is out of the axes and the second one is related to the path and mesh creation. This problems can be seen specifically in the integral example and the electric dipole with the arrows and magnetic fields.

gradient bar imshow without figure

Read more…

Categories: GSOC2015, kivy, matplotlib Tags: , ,

Navigation Toolbar for #kivympl using an Action Bar

July 17th, 2015 No comments

After my last post I started the implementation of a Navigation Toolbar for the backend. For the Navigation Toolbar for kivy we decided to experiment with an ActionBar from the set of kivy widgets. It is a very early version and not implemented at all, but this is a snippet of how it would be the layout and the result can be seen on the image below. The only element being used for now are the icons for the action buttons so we can have an idea of how it would look like.  The behavior of each one of the items will be defined on the callbacks. The NavigationToolbar2Kivy extends from NavigationToolbar2 which is the base class.

def _init_toolbar(self):
        basedir = os.path.join(rcParams['datapath'], 'images')
        actionbar = ActionBar(pos_hint={'bottom': 1.0})
        actionview = ActionView()
        for text, tooltip_text, image_file, callback in self.toolitems:
            if text is None:
                # insert a separator
            fname = os.path.join(basedir, image_file + '.png')
            action_button = ActionButton(text=text, icon=fname)
        self.canvas.add_widget(actionbar, canvas='after')

Navigation Toolbar Kivy MPL

Kivy matplotlib backend with right text positioning and rendering.

July 8th, 2015 No comments

In order to fix the problem of the layout of the text inside the canvas, an important function had to be overwritten with the information of the bounding box for each text inside it. The function is get_text_width_height_descent in this, one calculates the width and height and return them. Inside matplotlib these values are important to calculate the positioning of the elements according to the layout set by the user. Additionally, in the draw_text method transformations and styling is applied to the text. At the end we can have a working backend with different fonts and styles that are mapped between matplotlib and kivy capabilities.

Another inconvenient in the rendering of the graphs were some glitches while drawing. I was calculating u and v to create the mesh for the polygons when this was not really necessary. After some debugging and analysis of the vertices the final implementation generate the meshes and lines for all the elements in the canvas as follow:

Screenshot from 2015-07-07 12:18:28 example mpl kivy

As can be seen, now it is getting closer to how the static image implementation looks like from the previous post.

Kivy backend using Line and Mesh graphics instructions

June 26th, 2015 2 comments

This is the first prototype for the backend, points are extracted from the path an transformed into polygons or lines. Line and Mesh are used in the kivy side to render these objects in a widget canvas. Labels are used for displaying text. Below some examples can be found. The lines are not well defined and the next is to optimize this drawing as well as the text. Some attributes should be added to the labels, positioning is another problem.

matplotlib examples kivy matplotlib kivy matplotlib kivy matplotlib kivy

Read more…

Writing a matplotlib renderer for Kivy

June 24th, 2015 No comments

A Renderer is a class that knows all the graphics instructions to draw in a canvas. The first implementation involved to use the canonical agg renderer to get a figure which we could texture in a rectangle, this is fully explained in a previous post. The objective of my implementation is to have a backend implemented using kivy graphics instructions. The RendererBase class defines all the required methods to do so. RendererKivy extends from it and implements draw_path, other 5 different methods can be implemented but the most important is draw_path.

In this method all the required information to draw on the canvas is provided however there is another class as well required to change the style of elements rendered. This class is GraphicsContext which is a middle class between a renderer and an Artist. Artist is one of the layers in the hierarchical architecture of matplotlib, the other two layers are backend and scripting. Basically, everything that can be drawn in a canvas is an Artist object such as Axis, Tick, Figure, etc. A GraphicsContextKivy is defined which extends from GraphicsContextBase and specifically translates matplotlib context instructions such as line width, line style, caps, joints, colors, etc. into the equivalent in Kivy. As can be seen in the figure below the lines are dashed and the foreground of the canvas was changed.

backend kivy

At the moment there are three issues: the first one is that kivy implements caps for lines {‘square’, ’round’, ‘none’} and matplotlib {‘butt’, ‘projecting’, ’round’}. the second issue is that dashes in kivy are supported depending on the line width and finally, kivy does not support dynamic values for dash offset and dash length. The renderer, receives this object GraphicsContext and applies such styles defined there into kivy context and vertex instructions. As can be seen in the figure a very simple drawing of the information received in the draw_path is performed. Basically lines are created with all the vertex received but a path is more complex than that and represents a series of possibly disconnected, possibly closed, line and curve segments. The next post will be about this class Path and which kivy instructions are being used to implement the renderer.

Connecting events between kivy and matplotlib

June 15th, 2015 No comments

Matplotlib provides a list of events that can be connected to an external backend. This list of events can be found in, the events are:

events = [

In order to connect these events to kivy events, we first need to know the corresponding kivy events that can be match with the ones in the previous list:

widget_events = [



keyboard_events = [



window_events = [



attribute_events = [
'mouse_pos', #from Window


The definition for each mpl event and how it is connected to each kivy event will be explained below:

– ‘button_press_event’ :
On FigureCanvasKivy ‘on_touch_down’ will be triggered when a user touches the widget. A call to FigureCanvasBase will be performed on ‘button_press_event’ with the corresponding touch.x and touch.y arguments.

Read more…

Categories: GSOC2015, kivy, matplotlib Tags: ,

Backend for kivy in matplotlib, first steps

June 11th, 2015 1 comment

A backend in matplotlib is a class that creates a link between matplotlib and any frontend framework in which the data can be rendered. Matplotlib provides a template which works as an excellent starting point for anyone who would like to develop a backend. It is a class which by itself works as a backend but do nothing. The very first thing I have been doing the last three days is reading the comments on this file and analyzing how backends for other frameworks are implemented.

The first objective towards implementing a fully functional backend in kivy is to write one with a canonical renderer such as Agg. The first class I modified from the list of classes that the file provides is FigureCanvas which I renamed FigureCanvasKivyAgg. This class extends from a FigureCanvasAgg and a Kivy Widget. The reason why it extends from FigureCanvasAgg is because this class returns an Agg renderer which will contain the graphical information of the graph. Additionally, it extends from Widget because it is handy to add a widget when someone wants to embed matplotlib graphs or use it with pyplot to provide a fully functional App.

Example of a graph rendered in kivypython ../../../examples/mpl/ -dmodule://backend_kivy

In FigureCanvasKivyAgg two methods were overridden. The first one is draw which defines the context in which the renderer will be placed. From the FigureCanvasAgg I get the rgba buffer in order to place that in a texture which can be then added to a widget, as you can see in the following snippet.

texture = Texture.create(size=(w, h))
texture.blit_buffer(buffer_rgba, colorfmt='rgba', bufferfmt='ubyte')
with self.canvas:
    Rectangle(texture=texture, pos=self.pos, size=(w, h))

The second method is blit, in which given a bounding box defines the rectangular area of the graph to be drawn.

self.blitbox = bbox

FigureCanvasKivyAgg can be embed in any Kivy application given it is a Widget

Read more…

Categories: GSOC2015, kivy, matplotlib Tags: ,

Canvas to handle strokes and stroke processing.

June 5th, 2015 No comments

During my milestone 1 period, we came up with 4 new classes for ink processing.
StrokePoint: Class with coordinates x and y. This is the native structure for the StrokeCanvas behavior.
StrokeRect: Logical Rectangle which purpose is to bound a stroke generated in the StrokeCanvas. Provides methods to:
Know if a point is contained in a rectangle.
Know if another rectangle overlap itself.
Stroke: The stroke contains a list of points. The list of points form a line. A stroke have different drawing attributes:
color → change color of Stroke.
width → change the size of the graphic line.
is_highlighter → changes the visibility.
A stroke provides:
get_bounds method to get the enclosed rectangle in which a stroke is.
A StrokeCanvas contains a list of strokes. A StrokeCanvas provides:
Events to access to the strokes created when they are added or removed.
A StrokeCanvas is the visual representation of a Stroke using Lines.
Event to access to the mode when this is changed.

stroke_canvas_kivyThe branch for this can be found at: and you need the colors from here: although these colors are going to change eventually for more descriptive ones.

Categories: GSOC2015, kivy, python Tags:

Tentative Matplotlib Integration

June 1st, 2015 No comments

The purpose of this post is to introduce the main goal of my google summer of code project. The second goal is to support ink processing in a more easier way. Both together can make a difference from other backends implementations. First, I am going to start by summarizing what I know so far about how matplotlib works. The package matplotlib.pyplot is the root of a tree hierarchy, they call it “state-machine environment”. The next step is to create a figure which internally will create the structure to handle the rest of the objects inside the figure. The next level in the hierarchy is Axes, Axis and Artist.

Axes is the whole figure area where the Axis and plot are going to be rendered. As I can see it Axes is kind of a subplot since a Figure can handle more than one Axes but it needs at least one. Axes relevant methods are set_title(), set_xlabel() and set_ylabel(). Axis refers to the coordinates of the graph two main attributes of this class are Locator and Formatter. This class handles the ticks and labels over the coordinates as well as the mapping with the plotting area. Finally, Artist is the class that takes care of the style of the graph –> color, line styles, fonts, etc.

GIven this, a backend is an abstract class that allows to render matplotlib plots using different frontend platforms. I am going to be working on writting one for Kivy starting next week. There are two types of backends: user interface and non-interactive. The user interface one provides ways to visually interact with the data using different interaction techniques usually mouse and keyboard. The non-interactive are the ones that export the plot to a hard format such as png, pdf or svg. There are two rendering engines one given by vector renderers and one given by raster renderers. The main difference between both is that vector use primitive geometric elements such as lines and polygons and raster which are an array of pixels. The very first one can scale and the second one are resolution dependent.

For the implementation of kivy backend I am gonna start implementing a RendererBase which needs a GraphicsContext. To the best of my knowledge while creating the Agg implementation I would pass Agg’s graphics context otherwise I would pass for this purpose. The methods to implement in this class are draw_path, draw_image, draw_gouraud_triangle, there are some other methods as well that can be implemented for optimization reasons.

A GraphicsContext needs to be instantiated and mapped to the matplotlib base classes methods and attributes. For instance map the color of a line with a function that gives what is that color in the kivy context. Another example could be to tell matplotlib use normal line or anti aliased implementation. FigureCanvas should map kivy canvas in addition with the set of events that would need to be overwritten in the FigureCanvas implementation. FigureManager creates the window for the look of it. There is a class called timer which seems to handle the delay time between events.

For the Show() one can overwrite the default mainloop to use the kivy mainloop

A very first outline can be seen here: Read more…

Categories: GSOC2015 Tags: ,