Why does the DrawingArea not redraw? - gtk

Question

I have this code in vala:
using Gtk;
class Elecciones : GLib.Object {
private Gtk.Window ventana;
private Gtk.Entry partido1;
private Gtk.Entry partido2;
private Gtk.Entry partido3;
private Gtk.DrawingArea tabla;
public Elecciones(){
var builder = new Builder();
builder.add_from_file("elecciones.ui");
builder.connect_signals(null);
var ventana = builder.get_object("window1") as Window;
ventana.title = "Grafico electoral";
ventana.destroy.connect(Gtk.main_quit);
var contenedor = builder.get_object("contenedor") as Box;
var caja1 = builder.get_object("caja1") as Box;
var label1 = builder.get_object("label1") as Label;
partido1 = builder.get_object("partido1") as Entry;
var caja2 = builder.get_object("caja2") as Box;
var label2 = builder.get_object("label2") as Label;
partido2 = builder.get_object("partido2") as Entry;
var caja3 = builder.get_object("caja3") as Box;
var label3 = builder.get_object("partido3") as Label;
partido3 = builder.get_object("partido3") as Entry;
var boton = builder.get_object("boton") as Button;
var tabla = builder.get_object("tabla") as DrawingArea;
boton.clicked.connect(()=>{
int v1 = int.parse(partido1.get_text());
int v2 = int.parse(partido2.get_text());
int v3 = int.parse(partido3.get_text());
int total = v1+v2+v3;
int cuadro1 = v1*200/total;
int cuadro2 = v2*200/total;
int cuadro3 = v3*200/total;
string percent1 = (v1*100/total).to_string();
string percent2 = (v2*100/total).to_string();
string percent3 = (v3*100/total).to_string();
ventana.style_updated();
tabla.draw.connect((context)=>{
weak Gtk.StyleContext style_context = tabla.get_style_context();
int height = tabla.get_allocated_height();
int width = tabla.get_allocated_width();
context.set_source_rgba(0.144360,0.284024,0.839825,1);
context.rectangle(30, 0, cuadro1, 100);
context.fill();
context.set_source_rgba(1,1,1,1);
context.select_font_face("serif",Cairo.FontSlant.NORMAL,Cairo.FontWeight.NORMAL);
context.set_font_size(16);
context.move_to(35,30);
context.show_text(percent1+"%");
context.set_source_rgba(0.980442,0.118050,0.000000,1);
context.rectangle(30+cuadro1, 0, cuadro2, 100);
context.fill();
context.set_source_rgba(1,1,1,1);
context.select_font_face("serif",Cairo.FontSlant.NORMAL,Cairo.FontWeight.NORMAL);
context.set_font_size(16);
context.move_to(35+cuadro1,30);
context.show_text(percent2+"%");
context.set_source_rgba(0,0.980442,0.092757,1);
context.rectangle(30+cuadro1+cuadro2,0,cuadro3, 100);
context.fill();
context.set_source_rgba(1,1,1,1);
context.select_font_face("serif",Cairo.FontSlant.NORMAL,Cairo.FontWeight.NORMAL);
context.set_font_size(16);
context.move_to(35+cuadro1+cuadro2,30);
context.show_text(percent3+"%");
return true;
});
});
ventana.show_all();
}
public static int main(string[] args) {
Gtk.init(ref args);
Elecciones elecciones = new Elecciones();
Gtk.main();
return 0;
}
}
And this glade code:
<?xml version="1.0" encoding="UTF-8"?>
<!-- Generated with glade 3.16.0 on Mon May 5 18:42:12 2014 -->
<interface>
<!-- interface-requires gtk+ 3.10 -->
<object class="GtkWindow" id="window1">
<property name="can_focus">False</property>
<property name="default_width">300</property>
<property name="default_height">400</property>
<child>
<object class="GtkBox" id="contenedor">
<property name="visible">True</property>
<property name="can_focus">False</property>
<property name="orientation">vertical</property>
<child>
<object class="GtkBox" id="caja1">
<property name="visible">True</property>
<property name="can_focus">False</property>
<property name="halign">start</property>
<property name="margin_top">20</property>
<child>
<object class="GtkLabel" id="label1">
<property name="visible">True</property>
<property name="can_focus">False</property>
<property name="halign">start</property>
<property name="margin_left">20</property>
<property name="hexpand">True</property>
<property name="label" translatable="yes">Partido 1: </property>
</object>
<packing>
<property name="expand">False</property>
<property name="fill">True</property>
<property name="position">0</property>
</packing>
</child>
<child>
<object class="GtkEntry" id="partido1">
<property name="visible">True</property>
<property name="can_focus">True</property>
<property name="halign">start</property>
<property name="margin_left">10</property>
<property name="margin_right">120</property>
<property name="hexpand">True</property>
</object>
<packing>
<property name="expand">False</property>
<property name="fill">True</property>
<property name="position">1</property>
</packing>
</child>
</object>
<packing>
<property name="expand">False</property>
<property name="fill">True</property>
<property name="position">0</property>
</packing>
</child>
<child>
<object class="GtkBox" id="caja2">
<property name="visible">True</property>
<property name="can_focus">False</property>
<property name="halign">start</property>
<property name="margin_top">20</property>
<child>
<object class="GtkLabel" id="label2">
<property name="visible">True</property>
<property name="can_focus">False</property>
<property name="halign">start</property>
<property name="margin_left">20</property>
<property name="hexpand">True</property>
<property name="label" translatable="yes">Partido 2: </property>
</object>
<packing>
<property name="expand">False</property>
<property name="fill">True</property>
<property name="position">0</property>
</packing>
</child>
<child>
<object class="GtkEntry" id="partido2">
<property name="visible">True</property>
<property name="can_focus">True</property>
<property name="halign">start</property>
<property name="margin_left">10</property>
<property name="margin_right">120</property>
<property name="hexpand">True</property>
</object>
<packing>
<property name="expand">False</property>
<property name="fill">True</property>
<property name="position">1</property>
</packing>
</child>
</object>
<packing>
<property name="expand">False</property>
<property name="fill">True</property>
<property name="position">1</property>
</packing>
</child>
<child>
<object class="GtkBox" id="caja3">
<property name="visible">True</property>
<property name="can_focus">False</property>
<property name="halign">start</property>
<property name="margin_top">20</property>
<child>
<object class="GtkLabel" id="label3">
<property name="visible">True</property>
<property name="can_focus">False</property>
<property name="halign">start</property>
<property name="margin_left">20</property>
<property name="hexpand">True</property>
<property name="label" translatable="yes">Partido 3: </property>
</object>
<packing>
<property name="expand">False</property>
<property name="fill">True</property>
<property name="position">0</property>
</packing>
</child>
<child>
<object class="GtkEntry" id="partido3">
<property name="visible">True</property>
<property name="can_focus">True</property>
<property name="halign">start</property>
<property name="margin_left">10</property>
<property name="margin_right">120</property>
<property name="hexpand">True</property>
</object>
<packing>
<property name="expand">False</property>
<property name="fill">True</property>
<property name="position">1</property>
</packing>
</child>
</object>
<packing>
<property name="expand">False</property>
<property name="fill">True</property>
<property name="position">2</property>
</packing>
</child>
<child>
<object class="GtkButton" id="boton">
<property name="label" translatable="yes">Graficar</property>
<property name="visible">True</property>
<property name="can_focus">True</property>
<property name="receives_default">True</property>
<property name="halign">start</property>
<property name="margin_left">20</property>
<property name="margin_top">20</property>
<property name="hexpand">True</property>
</object>
<packing>
<property name="expand">False</property>
<property name="fill">True</property>
<property name="position">3</property>
</packing>
</child>
<child>
<object class="GtkDrawingArea" id="tabla">
<property name="visible">True</property>
<property name="can_focus">False</property>
<property name="margin_top">20</property>
<property name="margin_bottom">20</property>
</object>
<packing>
<property name="expand">True</property>
<property name="fill">True</property>
<property name="position">4</property>
</packing>
</child>
</object>
</child>
</object>
</interface>
When I click the Graficar button it show a bar with the percent of the 3 text entries. But the problem is that when I write new percent in any entry and click the Graficar button again, it doesn't update the bar with the new dates.

Answer 1

Finaly I have resolved this problem. The problem was that I was sending the signal Draw inside of button signal. Now I put the signal draw outside and put a handler(activado) that draw when click the button. This is the right code:
using Gtk;
class Elecciones : GLib.Object {
private Gtk.Window ventana;
private Gtk.Entry partido1;
private Gtk.Entry partido2;
private Gtk.Entry partido3;
private Gtk.DrawingArea tabla;
private bool activado = false;
public Elecciones(){
var builder = new Builder();
builder.add_from_file("elecciones.ui");
builder.connect_signals(null);
var ventana = builder.get_object("window1") as Window;
ventana.title = "Grafico electoral";
ventana.destroy.connect(Gtk.main_quit);
var contenedor = builder.get_object("contenedor") as Box;
var caja1 = builder.get_object("caja1") as Box;
var label1 = builder.get_object("label1") as Label;
partido1 = builder.get_object("partido1") as Entry;
var caja2 = builder.get_object("caja2") as Box;
var label2 = builder.get_object("label2") as Label;
partido2 = builder.get_object("partido2") as Entry;
var caja3 = builder.get_object("caja3") as Box;
var label3 = builder.get_object("partido3") as Label;
partido3 = builder.get_object("partido3") as Entry;
var boton = builder.get_object("boton") as Button;
var tabla = builder.get_object("tabla") as DrawingArea;
boton.clicked.connect(()=>{
activado = true;
ventana.style_updated();
});
tabla.visible = true;
tabla.draw.connect((context)=>{
if(activado==true){
weak Gtk.StyleContext style_context = tabla.get_style_context();
int height = tabla.get_allocated_height();
int width = tabla.get_allocated_width();
int v1 = int.parse(partido1.get_text());
int v2 = int.parse(partido2.get_text());
int v3 = int.parse(partido3.get_text());
int total = v1+v2+v3;
int cuadro1 = v1*200/total;
int cuadro2 = v2*200/total;
int cuadro3 = v3*200/total;
string percent1 = (v1*100/total).to_string();
string percent2 = (v2*100/total).to_string();
string percent3 = (v3*100/total).to_string();
context.set_source_rgba(0.144360,0.284024,0.839825,1);
context.rectangle(30, 0, cuadro1, 100);
context.fill();
context.set_source_rgba(1,1,1,1);
context.select_font_face("serif",Cairo.FontSlant.NORMAL,Cairo.FontWeight.NORMAL);
context.set_font_size(16);
context.move_to(35,30);
context.show_text(percent1+"%");
context.set_source_rgba(0.980442,0.118050,0.000000,1);
context.rectangle(30+cuadro1, 0, cuadro2, 100);
context.fill();
context.set_source_rgba(1,1,1,1);
context.select_font_face("serif",Cairo.FontSlant.NORMAL,Cairo.FontWeight.NORMAL);
context.set_font_size(16);
context.move_to(35+cuadro1,30);
context.show_text(percent2+"%");
context.set_source_rgba(0,0.980442,0.092757,1);
context.rectangle(30+cuadro1+cuadro2,0,cuadro3, 100);
context.fill();
context.set_source_rgba(1,1,1,1);
context.select_font_face("serif",Cairo.FontSlant.NORMAL,Cairo.FontWeight.NORMAL);
context.set_font_size(16);
context.move_to(35+cuadro1+cuadro2,30);
context.show_text(percent3+"%");
}
return true;
});
tabla.queue_draw();
ventana.show_all();
}
public static int main(string[] args) {
Gtk.init(ref args);
Elecciones elecciones = new Elecciones();
Gtk.main();
return 0;
}
}