Esempio GUI (TUI) con CDK/NCurses in C

Tecnicamente la libreria CDK non fornisce una GUI (Graphic User Interface) bensi' una TUI (Text User Interface)

L'esempio riportato e' preso integralmente dai file di esempio; a differenza dei casi precedenti questo tool mette insieme sia lo slider che la progress bar quindi e' tutto integrato in un solo comando

Per modificare il valore dello slider si usano le frecce cursore alto/basso
----------------------------------------------------------

#include <cdk/cdk.h>

int main (int argc, char **argv)
{
   /* *INDENT-EQLS* */
   CDKSCREEN *cdkscreen = 0;
   CDKSLIDER *widget    = 0;
   WINDOW *cursesWin    = 0;
   const char *title    = "<C></U>ProgressBar";
   const char *label    = "</B>Valore:";
   char temp[256];
   const char *mesg[5];
   int selection;

   CDK_PARAMS params;
   int high;
   int inc;
   int low;

   CDKparseParams (argc, argv, &params, "h:i:l:w:" CDK_MIN_PARAMS);
   high = CDKparamNumber2 (&params, 'h', 100);
   inc = CDKparamNumber2 (&params, 'i', 1);
   low = CDKparamNumber2 (&params, 'l', 1);

   /* Set up CDK. */
   cursesWin = initscr ();
   cdkscreen = initCDKScreen (cursesWin);

   /* Start CDK Colors. */
   initCDKColor ();

   /* Create the widget. */
   widget = newCDKSlider (cdkscreen,
 CDKparamValue (&params, 'X', CENTER),
 CDKparamValue (&params, 'Y', CENTER),
 title, label,
 A_REVERSE | COLOR_PAIR (29) | ' ',
 CDKparamNumber2 (&params, 'w', 50),
 low, low, high,
 inc, (inc * 2),
 CDKparamValue (&params, 'N', TRUE),
 CDKparamValue (&params, 'S', FALSE));

   /* Is the widget null? */
   if (widget == 0)
   {
      /* Exit CDK. */
      destroyCDKScreen (cdkscreen);
      endCDK ();

      printf ("Cannot make the widget. Is the window too small?\n");
      return 1;
   }

   /* Activate the widget. */
   selection = activateCDKSlider (widget, 0);

   /* Check the exit value of the widget. */
   if (widget->exitType == vESCAPE_HIT)
   {
      mesg[0] = "<C>Nessun valore selezionato";
      mesg[1] = "",
      mesg[2] = "<C>Un tasto per continuare.";
      popupLabel (cdkscreen, (CDK_CSTRING2) mesg, 3);
   }
   else if (widget->exitType == vNORMAL)
   {
      sprintf (temp, "<C>E'stato selezionato %d", selection);
      mesg[0] = temp;
      mesg[1] = "",
mesg[2] = "<C>Un tasto per continuare.";
      popupLabel (cdkscreen, (CDK_CSTRING2) mesg, 3);
   }

   /* Clean up. */
   destroyCDKSlider (widget);
   destroyCDKScreen (cdkscreen);
   endCDK ();
   return 0;
}

Compilare SDL da riga di comando

il programma di esempio di SDL deve essere modificato nella riga di include in quanto  il file .h si trova in una sottodirectory (si devono installare le librerie di sviluppo indicate qui)

per la compilazione si deve poi usare la stringa

gcc -Wall -O3 -lSDL SDLTest.c -o SDLTest
-------------------------------------------------

#include <stdio.h>
#include <SDL/SDL.h>

#define WIDTH 640
#define HEIGHT 480
#define BPP 4
#define DEPTH 32

void setpixel(SDL_Surface *screen, int x, int y, Uint8 r, Uint8 g, Uint8 b)
{
    Uint32 *pixmem32;
    Uint32 colour;  

    colour = SDL_MapRGB( screen->format, r, g, b );
  
    pixmem32 = (Uint32*) screen->pixels  + y + x;
    *pixmem32 = colour;
}


void DrawScreen(SDL_Surface* screen, int h)
{ 
    int x, y, ytimesw;
  
    if(SDL_MUSTLOCK(screen)) 
    {
        if(SDL_LockSurface(screen) < 0) return;
    }

    for(y = 0; y < screen->h; y++ ) 
    {
        ytimesw = y*screen->pitch/BPP;
        for( x = 0; x < screen->w; x++ ) 
        {
            setpixel(screen, x, ytimesw, (x*x)/256+3*y+h, (y*y)/256+x+h, h);
        }
    }

    if(SDL_MUSTLOCK(screen)) SDL_UnlockSurface(screen);
  
    SDL_Flip(screen); 
}


int main(int argc, char* argv[])
{
    SDL_Surface *screen;
    SDL_Event event;
  
    int keypress = 0;
    int h=0; 
  
    if (SDL_Init(SDL_INIT_VIDEO) < 0 ) return 1;
   
    if (!(screen = SDL_SetVideoMode(WIDTH, HEIGHT, DEPTH, SDL_FULLSCREEN|SDL_HWSURFACE)))
    {
        SDL_Quit();
        return 1;
    }
  
    while(!keypress) 
    {
         DrawScreen(screen,h++);
         while(SDL_PollEvent(&event)) 
         {      
              switch (event.type) 
              {
                  case SDL_QUIT:
             keypress = 1;
             break;
                  case SDL_KEYDOWN:
                       keypress = 1;
                       break;
              }
         }
    }

    SDL_Quit();
  
    return 0;
}

Compilare GTK in Code::Blocks in Debian

Come compilare GTK con Code::Blocks sotto Debian

(attenzione agli apici che sono inversi)

Compiler
-------------------------------------------------
`pkg-config –cflags gtk+-2.0 gmodule-export-2.0`
`pkg-config –cflags libglade-2.0`

Linker
--------------------------------------------------------------
`pkg-config –libs gtk+-2.0 gmodule-export-2.0`
`pkg-config –libs libglade-2.0`

altrimenti a linea di comando
gcc `pkg-config –cflags libglade-2.0 –libs gtk+-2.0` `pkg-config –libs gtk+-2.0 gmodule-export-2.0` main.c

Compilare ncurses e cdk

Esempi di compilazione di sorgenti ncurses e cdk sotto Debian

per entrambe le librerie si possono scaricare i pacchetti gia' compilati (sia libreria che dev)

Nel caso di ncurses
gcc -Wall hello.c -l ncurses -o hello
---------------------------------------------------------------
#include <ncurses.h>

int main()
{
initscr(); /* Start curses mode  */
printw("Hello World !!!"); /* Print Hello World  */
refresh(); /* Print it on to the real screen */
getch(); /* Wait for user input */
endwin(); /* End curses mode  */

return 0;
}

---------------------------------------------------------------

Per compilare CDK si devono unire le librerie ncurses e cdk

gcc -Wall hello_ex.c -lcdk -lncurses -o hello_ex

(nel caso di Debian si deve modificare la riga di include presente nel pacchetto originale degli esempi di CDK per farlo puntare alla directory corretta ovvero #include <cdk.h> diventa #include <cdk/cdk.h>

---------------------------------------------------------------

#include <cdk/cdk.h>

int main (int argc, char **argv)
{
   CDKSCREEN *cdkscreen;
   CDKLABEL *demo;
   WINDOW *cursesWin;
   const char *mesg[4];

   CDK_PARAMS params;

   CDKparseParams (argc, argv, &params, CDK_MIN_PARAMS);

   /* Set up CDK. */
   cursesWin = initscr ();
   cdkscreen = initCDKScreen (cursesWin);

   /* Start CDK Colors. */
   initCDKColor ();

   /* Set the labels up. */
   mesg[0] = "</5><#UL><#HL(30)><#UR>";
   mesg[1] = "</5><#VL(10)>Hello World!<#VL(10)>";
   mesg[2] = "</5><#LL><#HL(30)><#LR>";

   /* Declare the labels. */
   demo = newCDKLabel (cdkscreen,
      CDKparamValue (&params, 'X', CENTER),
      CDKparamValue (&params, 'Y', CENTER),
      (CDK_CSTRING2) mesg, 3,
      CDKparamValue (&params, 'N', TRUE),
      CDKparamValue (&params, 'S', TRUE));

   setCDKLabelBackgroundAttrib (demo, COLOR_PAIR (2));


   /* Draw the CDK screen. */
   refreshCDKScreen (cdkscreen);
   waitCDKLabel (demo, ' ');

   /* Clean up. */
   destroyCDKLabel (demo);
   destroyCDKScreen (cdkscreen);
   endCDK ();
return(0);
   //ExitProgram (EXIT_SUCCESS);
}

---------------------------------------------------------------

In Code::Blocks gli switch di compilazione si devono inserire come nell'esempio riportato in immagine

Installare VirtualBox Guest Additions con Guest Linux

Nel caso in cui la distribuzione che si voglia installarea all'interno di VirtualBox non sia fornita di apposito pacchetto pre-compilato (come Debian per esempio) e' necessario compilare il pacchetto a mano.

Per esempio in CentOs 5.8 si devono installare
yum install gcc kernel-devel kernerl-headers

Successivamente si deve montare il disco con le Guest Additions (Menu' Dispositivi/Guest Additions) e lanciare il comando VBoxLinuxdditions-x86.run

Esempio GUI con PyQt/QtDesigner

Un ulteriore metodo di generare la GUI di prova mediante PyQt e' quella di avvalersi di QtDesigner (da non confondersi con QtCreator che e' relativo al C ed e' un ambiente di sviluppo completo)

Dopo aver composto l'interfaccia grafica si salva il file (.ui) che non e' altro che un Xml con le informazioni di impaginazione

Successivamente con il comando
puic4.bat -x progressbar.uic > progressbar.py

si puo' generare del codice Python/PyQt per creare la finestra come richiesto

il codice autogenerato dal comando sopra riportato
progressbar.py
---------------------------------------------------
# -*- coding: utf-8 -*-

# Form implementation generated from reading ui file 'c:\Documents and Settings\l.innocenti\Desktop\qt\progressbar.ui'
#
# Created: Mon Aug 27 15:05:35 2012
#      by: PyQt4 UI code generator 4.9.4
#
# WARNING! All changes made in this file will be lost!

from PyQt4 import QtCore, QtGui

try:
    _fromUtf8 = QtCore.QString.fromUtf8
except AttributeError:
    _fromUtf8 = lambda s: s

class Ui_MainWindow(object):

       
    def setupUi(self, MainWindow):
        MainWindow.setObjectName(_fromUtf8("MainWindow"))
        MainWindow.resize(351, 117)
        self.centralwidget = QtGui.QWidget(MainWindow)
        self.centralwidget.setObjectName(_fromUtf8("centralwidget"))
        self.horizontalSlider = QtGui.QSlider(self.centralwidget)
        self.horizontalSlider.setGeometry(QtCore.QRect(10, 10, 331, 21))
        self.horizontalSlider.setOrientation(QtCore.Qt.Horizontal)
        self.horizontalSlider.setObjectName(_fromUtf8("horizontalSlider"))
        self.progressBar = QtGui.QProgressBar(self.centralwidget)
        self.progressBar.setGeometry(QtCore.QRect(10, 70, 341, 23))
        self.progressBar.setProperty("value", 24)
        self.progressBar.setObjectName(_fromUtf8("progressBar"))
        self.label = QtGui.QLabel(self.centralwidget)
        self.label.setGeometry(QtCore.QRect(10, 40, 331, 20))
        self.label.setAlignment(QtCore.Qt.AlignCenter)
        self.label.setObjectName(_fromUtf8("label"))
        MainWindow.setCentralWidget(self.centralwidget)
        self.actionCambia_valore = QtGui.QAction(MainWindow)
        self.actionCambia_valore.setObjectName(_fromUtf8("actionCambia_valore"))

        self.retranslateUi(MainWindow)
        QtCore.QObject.connect(self.horizontalSlider, QtCore.SIGNAL("valueChanged(int)"), self.azione)
        QtCore.QMetaObject.connectSlotsByName(MainWindow)

    def retranslateUi(self, MainWindow):
        MainWindow.setWindowTitle(QtGui.QApplication.translate("MainWindow", "Progress Bar", None, QtGui.QApplication.UnicodeUTF8))
        self.label.setText(QtGui.QApplication.translate("MainWindow", "0", None, QtGui.QApplication.UnicodeUTF8))
        self.actionCambia_valore.setText(QtGui.QApplication.translate("MainWindow", "cambia_valore", None, QtGui.QApplication.UnicodeUTF8))


    def azione(self):
        s = self.horizontalSlider.value()
        self.label.setText(str(s))
        self.progressBar.setValue(s)

if __name__ == "__main__":
    import sys
    app = QtGui.QApplication(sys.argv)
    MainWindow = QtGui.QMainWindow()
    ui = Ui_MainWindow()
    ui.setupUi(MainWindow)
    MainWindow.show()
    sys.exit(app.exec_())
---------------------------------------------------
Il problema fondamentale e' che il programma di conversione e' molto buono per generare il codice dei componenti visuali ma non gestisce bene la creazione degli eventi in particolare quelli custom
Per questo motivo e' necessario editare e modificare il codice a mano (evidenziato in giallo)


Progressbar.ui
----------------------------------------------------
<?xml version="1.0" encoding="UTF-8"?>
<ui version="4.0">
 <class>MainWindow</class>
 <widget class="QMainWindow" name="MainWindow">
  <property name="geometry">
   <rect>
    <x>0</x>
    <y>0</y>
    <width>351</width>
    <height>117</height>
   </rect>
  </property>
  <property name="windowTitle">
   <string>Progress Bar</string>
  </property>
  <widget class="QWidget" name="centralwidget">
   <widget class="QSlider" name="horizontalSlider">
    <property name="geometry">
     <rect>
      <x>10</x>
      <y>10</y>
      <width>331</width>
      <height>21</height>
     </rect>
    </property>
    <property name="orientation">
     <enum>Qt::Horizontal</enum>
    </property>
   </widget>
   <widget class="QProgressBar" name="progressBar">
    <property name="geometry">
     <rect>
      <x>10</x>
      <y>70</y>
      <width>341</width>
      <height>23</height>
     </rect>
    </property>
    <property name="value">
     <number>24</number>
    </property>
   </widget>
   <widget class="QLabel" name="label">
    <property name="geometry">
     <rect>
      <x>10</x>
      <y>40</y>
      <width>331</width>
      <height>20</height>
     </rect>
    </property>
    <property name="text">
     <string>0</string>
    </property>
    <property name="alignment">
     <set>Qt::AlignCenter</set>
    </property>
   </widget>
  </widget>
  <action name="actionCambia_valore">
   <property name="text">
    <string>cambia_valore</string>
   </property>
  </action>
 </widget>
 <resources/>
 <connections>
  <connection>
   <sender>horizontalSlider</sender>
   <signal>sliderMoved(int)</signal>
   <receiver>actionCambia_valore</receiver>
   <slot>trigger()</slot>
   <hints>
    <hint type="sourcelabel">
     <x>175</x>
     <y>20</y>
    </hint>
    <hint type="destinationlabel">
     <x>175</x>
     <y>58</y>
    </hint>
   </hints>
  </connection>
 </connections>
</ui>

----------------------------------------------------

Esempio GUI con PyGTK/Glade

In questa versione dell'esempio di GUI l'interfaccia non e' stata creata da codice bensi' mediante il GUI Designer di GTK ovvero Glade

Per iniziare a creare l'interfaccia deve essere prima aggiunto una form (ovvero un TopLevel) a cui deve essere aggiunta una Box (in questo caso un VBox) per impacchettare i Widgets e successivamente si aggiungono i Widgets
Il nome della finestra di TopLevel e' stato definito come MainWindow (nome che servira' per la referenziazione)

In Properties/Signal si puo' definire l'evento che si vuole catturare

Il salvataggio dell'interfaccia puo' avvenire in due formati (GtkBuilder e Libglade). Nell'esempio riportato di seguito e' stato scelto LibGlade

Il programma in Python...il codice e' abbastanza autoesplicativo
---------------------------------------------------
 import sys
try:
    import pygtk
    pygtk.require("2.0")
except:
    pass
try:
    import gtk
    import gtk.glade
except:
    sys.exit(1)


class ProgressBar:

    def __init__(self):

      
        self.gladefile = "progressbar.glade"
        self.wTree = gtk.glade.XML(self.gladefile)
        self.window = self.wTree.get_widget("MainWindow")
        self.window.show()
        if (self.window):
            self.window.connect("destroy", gtk.main_quit)

        dic = { "on_hscale1_value_changed" : self.cambia_valore}
        self.wTree.signal_autoconnect(dic)
      
    def cambia_valore(self, widget):
        a = self.wTree.get_widget("hscale1").get_value()
        self.wTree.get_widget("label1").set_text(str(int(a)))
        self.wTree.get_widget("progressbar1").set_fraction(a/100)


      
if __name__ == "__main__":
    hwg = ProgressBar()
    gtk.main()
---------------------------------------------------
progressbar.glade
---------------------------------------------------
 <?xml version="1.0" encoding="UTF-8"?>
<glade-interface>
  <!-- interface-requires gtk+ 2.24 -->
  <!-- interface-naming-policy project-wide -->
  <widget class="GtkWindow" id="MainWindow">
    <property name="can_focus">False</property>
    <property name="title" translatable="yes">Progress Bar</property>
    <property name="default_width">250</property>
    <property name="default_height">80</property>
    <child>
      <widget class="GtkVBox" id="vbox1">
        <property name="visible">True</property>
        <property name="can_focus">False</property>
        <child>
          <widget class="GtkHScale" id="hscale1">
            <property name="visible">True</property>
            <property name="can_focus">True</property>
            <property name="adjustment">0 0 110 1 1 10</property>
            <property name="lower_stepper_sensitivity">off</property>
            <property name="upper_stepper_sensitivity">off</property>
            <property name="restrict_to_fill_level">False</property>
            <property name="round_digits">1</property>
            <property name="digits">0</property>
            <property name="draw_value">False</property>
            <signal name="change_value" handler="on_hscale1_change_value" swapped="no"/>
            <signal name="value_changed" handler="on_hscale1_value_changed" swapped="no"/>
          </widget>
          <packing>
            <property name="expand">True</property>
            <property name="fill">True</property>
            <property name="position">0</property>
          </packing>
        </child>
        <child>
          <widget class="GtkLabel" id="label1">
            <property name="visible">True</property>
            <property name="can_focus">False</property>
            <property name="label" translatable="yes">0</property>
          </widget>
          <packing>
            <property name="expand">True</property>
            <property name="fill">True</property>
            <property name="position">1</property>
          </packing>
        </child>
        <child>
          <widget class="GtkProgressBar" id="progressbar1">
            <property name="visible">True</property>
            <property name="can_focus">False</property>
          </widget>
          <packing>
            <property name="expand">True</property>
            <property name="fill">True</property>
            <property name="position">2</property>
          </packing>
        </child>
      </widget>
    </child>
  </widget>
</glade-interface>
---------------------------------------------------