oriolrius.cat

Des del 2000 compartiendo sobre…

Tag: gui

A pair of themes for ExtJS

Reading time: 1 – 2 minutes

I’m a ExtJS JavaScript framework believer, but there other interesting and famous JavaScript frameworks like Bootstrap and jQuery. IMHO ExtJS is more focused on web applications than public web. In this post I want to share two ExtJS themes that helps to improve UI look and feel.

The first one is a bootstrap look and feel for ExtJS:

extjs-bootstrap

if you want to test it take a look to demo site. The theme is opensource and you can find the source in github.

The second and last one is Clifton theme.

clifton-theme

IMHO is a nice theme although it’s not really free. It costs around 320€, but in some professional projects it could be a really low price if you consider the effort to get a professional look and feel . You can try it in demo page.

Apunts sobre Clutter

Reading time: < 1 minute Acabo d'obrir una secció al wiki on aniré posant els meus apunts personals sobre Clutter, així doncs, si a algú l'interessa el tema pot seguir-los des d'allà.

Conceptes de Clutter

Reading time: 6 – 9 minutes

Des de fa uns mesos m’he posat a fons amb Clutter, es tracta d’una API més una ABI programada en C per crear interficies d’usuari. Malgrat tractar-se en escència d’una API per crear espais 3D amb objectes 2D, té la capacitat de poder moure els objectes en la coordenada Z. Així doncs, és pot aprofitar la potència d’OpenGL de forma transparent i senzilla i sense haver-se de preocupar de com representar objectes 2D en espais 3D, cosa gens senzilla per un neofit en el món dels gràfics com jo.

Clutter usa el seu propi reactor d’events, però en certs casos pot usar Gobject, Glib i Gtk també. És fàcilment integrable amb DBUS i amb GStreamer. En escència m’ofereix tot el que em cal per un projecte que porto entre mans. Pels que encara no ho tingueu clar, l’interficie gràfica que usa Moblin esta programada amb Clutter com a llibreria gràfica. De fet, és aquest projecte el que li ha donat molta força a Clutter que disposa de 29 programadors a temps complet, dels quals 14 no són d’intel (intel és qui promociona amb més força ‘moblin’).

Bé doncs, aquest impuls que ha patit moblin l’han portat a la versió 0.9.8 que és realment potent i ja gairebé igual que la versió 1.0 que hauria de sortir en breu. Tot i que fins ara Clutter s’ha caracteritzat pel retard en la sortida de les noves versions esperem que aquest cop no sigui així.

Abans d’entrar a definir quins són els elements que té aquesta llibreria, comentar que també disposa de binding de python cosa que pels ‘no-programadors’, com jo, és tota una alegria. També s’ha de dir que a dia d’avui, no hi ha bindings oficials per la branca 0.9 de Clutter que és l’experimental, o futura 1.0. Així doncs, jo només he provat el Clutter fins a la seva versió 0.8, malgrat la segueixo amb lupa la versió 0.9.x; a l’espera de poder començar a fer coses amb ella quan tingui els bindings de python.

Anem al motiu central de l’article, repassar els conceptes que usa Clutter fins a la verió 0.8:

  • Stages: una aplicació de Clutter conté almenys un ‘stage’, aquests contenen actors que són: imatges, rectangles, textos, etc. Un ‘stage’ es comporta de forma semblant a un ‘canvas’ (tapís).
  • Stage Widget: Podem contenir un ‘stage’ dintre d’un objecte finestre de GTK+. En aquests casos es pot usar GTK com a reactor d’events.
  • Actors:  són formes 2D mostrades en un espai 3D. Aquestes formes poden ser; per exemple, formes geomètriques, imatges, textos, etc. Si el que cal és tenir actors tridimencionals en aquest espai el que caldrà és instanciar directament l’API d’OpenGL.  Per mostrar un actor en un ‘stage’ cal fer-ho a través d’un ‘container’.
  • Transformations: es refereix a les transformacions que li podem fer a un ‘actor’ al mostrar-lo:
    • Scaling: aumentar o disminuir la seva mida aparent, no la real.
    • Rotation: es pot rotar sobre els seus eixos X, Y i Z.
    • Clipping: fixar l’objecte sobre el ‘canvas’ això ens permet per exemple, crear una zona d’scrolling al seu intererior.
    • Movement: desplaçar les coordenades de posició de l’objecte.
  • Containers: en si mateix és un tipus especial d’actor, compost per altres actors fills que es posicionen en l’espai respecte la posició del seu contenedor. De fet, si ens hi fixem el propi ‘stage’ és un ‘actor’ de tipus ‘container’. Escencialment hi ha dos tipus de ‘containers’: ClutterContainer i ClutterGroup.
  • Events: la classe ‘actor’ emet una serie de senyals que podem capturar per enllaçar amb funcions, les senyals són:
    • button-press-event: emès quan l’usuari prem el botó del ratolí sobre l’actor.
    • button-release-event: emès quan l’usuari deixa anar el botó del ratolí sobre l’actor.
    • motion-event: quan el ratolí es mou per sobre l’objecte.
    • enter-event: emès a l’entrar sobre la superficie de l’actor.
    • leave-event: emès al sortir de la superficie de l’actor.
  • Timelines: es poden usar per canviar la posició o aparença d’un actor al llarg del temps. Les línies de temps es poden usar soles o amb combinació dels ‘effects’ i els ‘behaviours’. Per cada ‘frame’ que s’ha de dibuixar en el temps s’emet una senyal anomenada ‘new-frame‘, obviament la podem connectar a alguna funció. Al crear una línia de temps hem d’espificar dos paràmetres: la quantitat total de ‘frames’ que tindrà i els ‘frames per segon’ a la que es reproduirà.
  • Score: podem agrupar diverses ‘timelines’ en un ‘score’, això ens permet posar en marxa o parar diverses ‘timelines’ a la vegada.
  • Effects: són una serie de funcions que podem aplicar sobre els actors usant una ‘timeline’ amb l’objectiu de canviar les propietats al llarg del temps, usant un simple càlcul numèric. Sovint aquesta és la forma més simple de crear una animació. És important recordar que els efectes només poden afectar a un actor en una ‘timeline’ i no podem canviar els efectes al llarg del temps, per fer això cal fer-ho amb un ‘behaviour’.
  • Behaviours: tenen la capacitat de canviar una propietat específica d’un actor al llarg del temps aplicant un simple càlcul numèric. A diferència dels ‘effects’ amb els ‘behaviours’ podem controlar més d’un actor a la vegada i canviar els paràmetres dels càlculs que es fan al llarg de la ‘timeline’. Un exemple ben senzill d’aplicació d’això seria que podem fer que la funció que es crides al llarg del temps detecti que s’ha acabat l’efecte aplicat i el faci tornar a començar automàticament, simplement canviant el paràmetre de l’efecte que s’esta aplicant. Els ‘behaviours’ que té Clutter per defecte són:
    • ClutterBehaviourBspline: mou l’actor a través una línia ‘bezier‘.
    • ClutterBehaviourDepth: mou un actor a l’eix Z.
    • ClutterBehaviourEllipse: mou un actor al llarg d’una el·lipse.
    • ClutterBehaviourOpacity: canvia l’opacitat d’un actor.
    • ClutterBehaviourPath: mou un actor al llarg d’un camí definit per una serie de punts.
    • ClutterBehaviourRotate: rotar un actor.
    • ClutterBehaviourScale: canvia la mida aparent d’un actor.

Per fer aquesta referència m’he basat amb la informació de la guia ‘Programming with Clutter‘ escrita per Murray Cumming.

Interficie Web del pfSense: un detall de qualitat

Reading time: 1 – 2 minutes

De fet, aquest article és una tonteria però quan trobes un detall de qualitat com el que vull comentar en aquest cas dona gust perdre un estona per donar-lo a coneixer. Com passa sovint avui en dia moltíssims sistemes porten una interficie de configuració via web. Imagino que és obvi, ja que és un sistema de GUI fàcil de programar i a més assegura una molt bona compatibilitat amb tot tipus de clients i de plataformes.

Doncs bé, sovint al configurar la IP i el port en alguna d’aquestes interficies passa algo lògic, és a dir, la comucació entre el client d’accés a la GUI (navegador) i el servidor de la GUI (servidor HTTP). Obviament una forma senzilla de solucionar això seria programar el codi HTML perquè al cap d’un temps es fes un refresh que redirigís la connexió cap al nou port o la nova IP.

Però malgrat la solució és senzilla també és algo elavorada. Doncs mai havia trobat una interficie de configuració via web que tingués en compte aquests detalls. Fins fa unes setmanes que vaig trobar-me amb la interficie del pfSense que si que ho fa, mireu mireu:

redireccio-port.png

kvpnc: client universal d’VPN per kde

Reading time: 1 – 2 minutes

GUI per clients d’VPN universal, suporta openVPN, cisco VPN client, FreeS/WAN (Linux 2.4.x), ipsec-tools support (Linux 2.6.x/BSD native), PPTP support (pptpclient). A més s’encarrega de fer la gestió de certificats i perfils dins d’un mateix tipus d’VPN. Realment molt útil si com jo heu de tenir a mà múltiples sistemes de connexió remots per diferents empreses i entorns de xarxa molt canviants.

screenshot-kvpnc.png

Val la pena que hi doneu un cop d’ull a la infinitat de funcionalitats que ofereix el programa. A més de ben segur que el podeu fer correr amb l’idioma que més us agradi i, com no, esta suportat al portage de gentoo. Així que ja només queda que proveu l’kvpnc i a veure si us agrada tan com a mi.

EveryGUI – creant GUI per linies de comandes

Reading time: 1 – 2 minutes

Gràcies a delicious fa un temps vaig veure que en pancake havia trobat una aplicació per GTK+ que no coneixia només que per QT (QSA). La idea és afegir una interficie gràfica d’usuari (GUI) a les aplicacions de línies de comandes que ens interessin. A través d’un designer podem modelar-los la GUI al nostre gust i després connectar els events dels components afegits a la GUI per llençar i capturar les sortides de les ordres del CLI.

everygui.png

A la pàgina de EveryGUI teniu més informació i captures de pantalla on es pot veure prou bé la qualitat de l’aplicació.

pantalles multi-touch

Reading time: < 1 minute

Això no ho he vist al 3GSM, sinó fa una estona tot repassant el bloglines, que cada dia té la cua més llarga per culpa del congrés, però realment m’ha deixat flipadíssim. M’ha obert al cap a milers i milers d’idees a aplicar als quioscos de movilpoint i al desktop. De fet, jo diria que quan aquesta tecnologia estigui madura i el software estigui pensat per soportar-la revolucionarà el concepte d’interficie d’usuari. Tot i que jo diria que això almenys trigarà 3 anys a passar. No us perdeu el video: