Amaury Medeiros

Finally, scroll is done.

2011-08-06T17:19:00.000-07:00

It's been a while since the last time I posted here. I spent this time to continue working on VScroll and HScroll. Good news: they're ready. I've read a chapter of the Red Book of OpenGL that helped me a lot on the implementation of Scrollers. The most annoying part of that is OpenGL uses a different coordinates system from the usual.

After some reading and testing, I solved the problem I was having in the last post using glOrtho. The results can be seen on the pictures below. The next step is beggining the implementation of collapsible branches.

It's scrolling :)

2011-07-10T17:36:00.000-07:00

From the last post to now, I could progress more. After the entire scrollbar appears on the screen, the next step was the scroll itself also appears. So the correct size to the scroll is now being calculated and it's being drawn on the screen (when it's necessary). The color of the scroll is different from the bar, so we can see it better.

To drag, move and drop the scroll with pointer, I used some previous work from another PySoy student: Juhani Åhman. Thank him for it. The limits of the scroll are set, so you can't drag the bar beyond the limits it should be dragged. The pictures below show how HScroll looks right now.

As you can see, they're not ready. The total content is being displayed but the screen should show just the content that's inside the widget area and as the scroll rolls, the content should change. I'm trying to make those changes to make the widget work as expected. The expected behaviour of the widget can be visualized below.

Last night and today, Arc made some changes in PySoy properties. He told me to take a look at the widgets I'm writting to see how I'm using them. The result: I made a bit cleanup in the code, changed some attributes' visibility and remove some that were obsolete.

I'd like to thank my mentor, David, again for the help he's giving me. Mid-term is coming and I think I'll have to change my timeline a bit.

OpenGL and Scrollbar

2011-07-07T10:33:00.000-07:00

In the previous post, I said the only thing that was missing for V/HScroll widgets was the scrollbar. So I ran into Gtk/Gdk examples to start the bar implementation. After some tests outside PySoy, I decided to try to integrate the example with the PySoy code. I waste some time doing that and discovered I'm not able to do it. Arc Riley told me I have to implement the bar using OpenGL.

Then I started to read an OpenGL tutorial. My mentor, David, said me I had to use Vertex Buffer Object (VBO) and told me to look at some examples in PySoy's code. After that, we shared the VScroll file, using Gobby, and he explained me a lot about OpenGL and VBO.

Yesterday (actually today), before I get to sleep, the first version of the bar appeared! It's a blank rectangle, placed on the right side of the widgets. The next step is to configure the viewport correctly and make the scroll actually roll.

Test Improvements

2011-06-26T12:01:00.000-07:00

This week David told me to change the HScroll/VScroll tests to better visualize they working. He said I could use canvas to do so. At first I faced some problems, because canvas wasn't rendering as expected. After some debug, I found an inconsistency in the Container code. Containers were rendering their children with their own width/height instead of doing this resize using the children's width/height.

After fix Container render method, I had to overrode render method for VScroll and HScroll, to render their children in the correct position. After that, the test seemed more representative and I believe the only thing is missing for VScroll/HScroll is the scroll bar. VScroll render method is shown below.

def override render (x: int, y : int, width : int, height : int)      
    // Render each child widget in order              
    var _x = x              
    var _y = y            
    for widget in self.children  
            widget.render(_x, _y, widget.width, widget.height)

resize_children

2011-06-20T13:56:00.000-07:00

I started to write the resize_children method for HScroll and VScroll. They can be seen below. This code snippet represents the HScroll one. The widgets are resized and the scroll bar is shown only if it's necessary. The scroll size is also calculated on this method, according to the widgets that are on the viewport.

The scroll is not actually implemented yet. I need to figure out how to put a scroll on the screen firtst. Currently, the method is working in an abstract way. I hope to discuss with my mentor, David, this week, to find how to finish this method.

def override resize_children (x: int, y : int, width : int, height : int)
  // Arbitrary bar size. Replace it for actual size
  // after implement Scroll Bar
  scrollBarSize : soy.atoms.Size = new soy.atoms.Size(self.size.width, 10.0, 0.0)
        
  var totalWidth = 0.0
  for widget in self.children
      totalWidth += widget.width
      if widget.size.height > self.size.height
          widget.size.height = self.size.height
      widget.size.height -= scrollBarSize.height

  var scrollWidth = ((double)scrollBarSize.width)/totalWidth * scrollBarSize.width
       
  // Change the viewPort only if widgets total size are greater than HScroll size
  var viewPortWidth = totalWidth <= self.size.width ? self.size.width : totalWidth
  //                                         bar not needed      bar needed
  var viewPortHeight = totalWidth <= self.size.width ? self.size.height : self.size.height - scrollBarSize.height

  self.viewPort = new soy.atoms.Size(viewPortWidth, viewPortHeight, 0.0)

It's time to scroll

2011-06-16T13:05:00.000-07:00

Today I gave the first step to Scrollable Widgets coding. Talking to Arc Riley, he said it would be a better idea to make two Scrollable Widgets, instead of one: HScroll and VScroll. So I created these classes, inheriting from Container.

The resize_children method will differ from VBox/HBox, because it will not actually resize_children. The idea is this method just resize the widgets subtracting the size the scroll bar will fill. The rest of the children's content can be viewed scrolling the bar, that will be calculated using this method.

Almost Free!

2011-06-09T13:43:00.000-07:00

Today I have delivered two projects here at the university. Tomorrow I have a test and after that I will just have one more test, on the 15th. Soon I'll be fully dedicated to PySoy.

HBox and VBox Tests

2011-06-01T23:37:00.000-07:00

This week I'm testing VBox and HBox. I noticed there was a few errors on the libsoy-side implementation of them. I think I fixed this errors, modifying some methods from Container and Widget classes.

I also wrote two test files. One for VBox and another one (similar) for HBox. The tests reflects the functionality of VBox and HBox to resize their children when their size change.

The bindings for PySoy were also tested. An output is shown below.

>>> w = soy.widgets.Window()

>>> hbox = soy.widgets.HBox(w)

>>> vbox = soy.widgets.VBox(hbox)

>>> vb2 = soy.widgets.VBox(hbox)

>>> bigger = soy.atoms.Size((640, 480, 0))

>>> vbox.size = soy.atoms.Size((750,500, 0))

>>> vb2.size = soy.atoms.Size((250,500, 0))

>>> vbox.size

>>> hbox.size

>>> hbox.size = bigger

>>> vbox.size

>>> vb2.size

PySoy Interactive Widgets API

2011-05-21T13:01:00.000-07:00

AI wrote down a simple API to guide me while developing the widgets on my GSoC project. It's a bit small, but I think it will help me a lot to save time when I start to code the widgets. The community bonding period ends on Monday, so It's better I'll be ready for start coding.

The API can (and probably will be) incremented along the project. Its first version can be seen below.

HBox

HBox are containers for other widgets and displays them horizontally.

Example

>>> # Creates a simple HBox and insert two widgets on it. The widgets are displayed horizontally.

>>> hBox = HBox()

>>> widgetA = Widget(hBox)

>>> widgetB = Widget(hBox)

VBox

VBox are containers for other widgets and displays them vertically.

Example

>>> # Creates a simple VBox and insert two widgets on it. The widgets are displayed vertically

>>> vBox = VBox()

>>> widgetA = Widget(vBox)

>>> widgetB = Widget(vBox)

Scrollable

Scrollable are widgets with on-demand scroll bars. If the content of the widget doesn't fit the viewport, a scroll bar is displayed so the content is visible.

Properties

horizontalScrollBar - Define the horizontal scrollbar of a scrollable widget.

verticalScrollBar - Define the vertical scrollbar of a scrollable widget.

alwaysOn - Define if the scrollbars are always visible or just displayed when it's necessary. Default value is False.

Example

>>> # Creates two scrollbars, create a scrollable widget and set the vertical and horizontal bars.

>>> scrollBar1 = soy.widgets.ScrollBar()

>>> scrollBar2 = soy.widgets.ScrollBar()

>>> scrollable = soy.widgets.Scrollable(window, alwaysOn=True)

>>> scrollable.horizontalScrollBar = scrollBar1

>>> scrollable.verticalScrollBar = scrollBar2

Branches

Collapsable branches, or just branches, are nodes used in a tree model. They can be expanded or collapsed.

Example

>>> # Creates a Branch and insert two nodes on it. In this case, the nodes are contacts.

>>> branchFamily = Branch(vBox)

>>> contactWJ = Contact('Walter Junior')

>>> contactWJ.picture = '../img/default.png'

>>> branchFamily['Walter Junior'] = contactWJ

>>> branchFamily['Mark'] = Contact('Mark R')

Text Input

A text input widget is basically a widget where the user can write text on.

Properties

size - Define the size of the text input area.

lineWrap - Define if the text input will use line wrap or continuous line.

text - The current text in a text input.

Example

>>> # Creates a text input inside a window, set its size and set the line wrap to True.

>>> w = soy.widgets.Window()

>>> sentBox = soy.widgets.TextInput(w)

>>> sentBox.size = soy.atoms.Size((300, 100, 0))

>>> sentBox.lineWrap = True

Text Display

A text display widget is used to display any kind of text in games and applications.

Properties

size - Define the size of the text display area.

text - The current text in a text display.

Example

>>> # Creates a text display inside a window and set its size. After that, change its text to 'test'.

>>> w = soy.widgets.Window()

>>> display = soy.widgets.TextDisplay(w)

>>> display.size = soy.atoms.Size((300, 100, 0))

>>> display.text = 'test'

GSoC 2011 - PySoy's Interactive Widgets

2011-05-13T13:18:00.000-07:00

Recently, I've been accepted as a Google Summer of Code student under the Python Software Foundation (PSF). To be more specific, I'll be working with the PySoy project (#pysoy @ irc.freenode.net). My project aims, mostly, building a set of themeable interactive widgets for PySoy to make possible to build a buddy list and chat windows, which users will use to comunicate in and out PySoy's based games.

Since April 25th we're on community bounding period. In this period, they don't recommend us to code. My mentor, David Czech, is a bit busy, these days, so I used this time to read the source and the documentation of the project. I focused a bit more in the soy.widgets.* module, since it's there I'll code most part of the project.

I also used this time to provide the necessary paperwork to prove I'm a regularly enrolled student. I'm still waiting the answer from the officer of my undergraduate program to get this papers done.

I made a fresh Ubuntu 11.04 install at my PC. At the moment, I'm having some troubles to get the examples running fine. Apparently, "Thread.usleep(...)" calls are causing segmentation fault. I'm looking for answers, but I couldn't find one yet.