data/manual/interfaz/index.html
<!DOCTYPE html>
<!--[if IE 8]><html class="no-js lt-ie9" lang="en" > <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en" > <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Interfaz de usuario - pilas-engine</title>
<link rel="shortcut icon" href="../img/favicon.ico">
<link href='https://fonts.googleapis.com/css?family=Lato:400,700|Roboto+Slab:400,700|Inconsolata:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="../css/theme.css" type="text/css" />
<link rel="stylesheet" href="../css/theme_extra.css" type="text/css" />
<link rel="stylesheet" href="../css/highlight.css">
<script>
// Current page data
var mkdocs_page_name = "Interfaz de usuario";
var mkdocs_page_input_path = "interfaz.md";
var mkdocs_page_url = "/interfaz/";
</script>
<script src="../js/jquery-2.1.1.min.js"></script>
<script src="../js/modernizr-2.8.3.min.js"></script>
<script type="text/javascript" src="../js/highlight.pack.js"></script>
<script src="../js/theme.js"></script>
</head>
<body class="wy-body-for-nav" role="document">
<div class="wy-grid-for-nav">
<nav data-toggle="wy-nav-shift" class="wy-nav-side stickynav">
<div class="wy-side-nav-search">
<a href=".." class="icon icon-home"> pilas-engine</a>
<div role="search">
<form id ="rtd-search-form" class="wy-form" action="../search.html" method="get">
<input type="text" name="q" placeholder="Search docs" />
</form>
</div>
</div>
<div class="wy-menu wy-menu-vertical" data-spy="affix" role="navigation" aria-label="main navigation">
<ul class="current">
<li>
<li class="toctree-l1 ">
<a class="" href="..">Principal</a>
</li>
<li>
<li>
<li class="toctree-l1 ">
<a class="" href="../que_juegos/">Tipos de juegos</a>
</li>
<li>
<li>
<li class="toctree-l1 ">
<a class="" href="../instalacion/">Instalación</a>
</li>
<li>
<li>
<li class="toctree-l1 ">
<a class="" href="../about/">Acerca de ...</a>
</li>
<li>
<li>
<li class="toctree-l1 ">
<a class="" href="../empezando/">Empezando y los primeros pasos con pilas</a>
</li>
<li>
<li>
<li class="toctree-l1 ">
<a class="" href="../actores/">Actores</a>
</li>
<li>
<li>
<li class="toctree-l1 ">
<a class="" href="../actores_personalizados/">Actores personalizados</a>
</li>
<li>
<li>
<li class="toctree-l1 ">
<a class="" href="../grupos/">Grupos</a>
</li>
<li>
<li>
<li class="toctree-l1 ">
<a class="" href="../colisiones/">Colisiones</a>
</li>
<li>
<li>
<li class="toctree-l1 ">
<a class="" href="../etiquetas/">Etiquetas</a>
</li>
<li>
<li>
<li class="toctree-l1 ">
<a class="" href="../fisica/">Fisica</a>
</li>
<li>
<li>
<li class="toctree-l1 ">
<a class="" href="../controles/">Controles</a>
</li>
<li>
<li>
<li class="toctree-l1 ">
<a class="" href="../joystick/">Joystick</a>
</li>
<li>
<li>
<li class="toctree-l1 ">
<a class="" href="../imagen/">Imagen</a>
</li>
<li>
<li>
<li class="toctree-l1 ">
<a class="" href="../sonidos/">Audio: Sonidos y Música</a>
</li>
<li>
<li>
<li class="toctree-l1 ">
<a class="" href="../dibujado_simple_en_pantalla/">Dibujado simple en pantalla</a>
</li>
<li>
<li>
<li class="toctree-l1 ">
<a class="" href="../dibujado_avanzado_con_superficies/">Dibujado avanzado con Superficies</a>
</li>
<li>
<li>
<li class="toctree-l1 ">
<a class="" href="../tareas/">Manejo de tiempo con tareas</a>
</li>
<li>
<li>
<li class="toctree-l1 ">
<a class="" href="../interpolacion/">Interpolaciones</a>
</li>
<li>
<li>
<li class="toctree-l1 ">
<a class="" href="../controlando_la_pantalla/">Controlando la pantalla</a>
</li>
<li>
<li>
<li class="toctree-l1 ">
<a class="" href="../comportamientos/">Comportamientos</a>
</li>
<li>
<li>
<li class="toctree-l1 ">
<a class="" href="../escenas/">Escenas</a>
</li>
<li>
<li>
<li class="toctree-l1 current">
<a class="current" href="./">Interfaz de usuario</a>
<ul>
<li class="toctree-l3"><a href="#interfaz-de-usuario">Interfaz de usuario</a></li>
<li><a class="toctree-l4" href="#clase-boton">Clase: Boton</a></li>
<li><a class="toctree-l4" href="#clase-deslizador">Clase: Deslizador</a></li>
<li><a class="toctree-l4" href="#clase-selector">Clase: Selector</a></li>
<li><a class="toctree-l4" href="#clase-ingresodetexto">Clase: IngresoDeTexto</a></li>
<li><a class="toctree-l4" href="#clase-listaseleccion">Clase: ListaSeleccion</a></li>
</ul>
</li>
<li>
<li>
<li class="toctree-l1 ">
<a class="" href="../menu/">Cómo crear menúes para tu juegos</a>
</li>
<li>
<li>
<li class="toctree-l1 ">
<a class="" href="../mapas_y_plataformas/">Mapas y plataformas</a>
</li>
<li>
<li>
<li class="toctree-l1 ">
<a class="" href="../dialogos/">Diálogos</a>
</li>
<li>
<li>
<li class="toctree-l1 ">
<a class="" href="../camara/">Manejo de Cámara</a>
</li>
<li>
<li>
<li class="toctree-l1 ">
<a class="" href="../eventos/">Eventos</a>
</li>
<li>
<li>
<li class="toctree-l1 ">
<a class="" href="../texto/">Textos</a>
</li>
<li>
<li>
<li class="toctree-l1 ">
<a class="" href="../habilidades/">Habilidades</a>
</li>
<li>
<li>
<li class="toctree-l1 ">
<a class="" href="../depurando/">Depurando</a>
</li>
<li>
<li>
<li class="toctree-l1 ">
<a class="" href="../como_funciona_pilas_por_dentro/">¿Cómo funciona pilas por dentro?</a>
</li>
<li>
<li>
<li class="toctree-l1 ">
<a class="" href="../complementos/">Complementos</a>
</li>
<li>
<li>
<li class="toctree-l1 ">
<a class="" href="../desarrolladores/">Guía para desarrolladores</a>
</li>
<li>
</ul>
</div>
</nav>
<section data-toggle="wy-nav-shift" class="wy-nav-content-wrap">
<nav class="wy-nav-top" role="navigation" aria-label="top navigation">
<i data-toggle="wy-nav-top" class="fa fa-bars"></i>
<a href="..">pilas-engine</a>
</nav>
<div class="wy-nav-content">
<div class="rst-content">
<div role="navigation" aria-label="breadcrumbs navigation">
<ul class="wy-breadcrumbs">
<li><a href="..">Docs</a> »</li>
<li>Interfaz de usuario</li>
<li class="wy-breadcrumbs-aside">
</li>
</ul>
<hr/>
</div>
<div role="main">
<div class="section">
<h1 id="interfaz-de-usuario">Interfaz de usuario</h1>
<p>Los componentes del módulo <code>pilas.interfaz</code> permiten crear botones, listas,
deslizadores y otros tipos de componentes visuales, todos orientados
a construir interfaces de usuario traducionales.</p>
<h2 id="clase-boton">Clase: Boton</h2>
<p>Para crear un botón podemos instalar la clase <code>Boton</code> especificando
un texto.</p>
<pre><code>boton = pilas.interfaz.Boton("Saludar")
</code></pre>
<p>y casi siempre vas a querer asignarle alguna acción cuando se hace
click sobre él, para eso necesitás una función y conectarla:</p>
<pre><code>def saludar():
boton.decir("Hola !!!")
boton.conectar(saludar)
</code></pre>
<p><img alt="" src="../imagenes/interfaz/boton_saludando.png" /></p>
<p>Ten en cuenta que todos los objetos creados siguen siendo actores, así
que se pueden manipular como vimos antes: escalar, rotar, moverse etc...</p>
<h4 id="propiedades">Propiedades</h4>
<ul>
<li><code>texto</code></li>
<li><code>icono</code></li>
</ul>
<h4 id="metodos">Métodos</h4>
<ul>
<li><code>conectar(funcion)</code> - Conecta una función para responder al click de mouse.</li>
<li><code>ocultar()</code></li>
<li><code>mostrar()</code></li>
<li><code>deshabilitar()</code></li>
<li><code>habilitar()</code></li>
</ul>
<h4 id="ejemplo-de-integracion">Ejemplo de integración</h4>
<p>Y para añadir una acción o respuesta al componente, podemos crear una
función y luego vincularla con el evento <code>click</code>. Este ejemplo construye
un botón y realiza un movimiento cada vez que se hace click sobre él:</p>
<pre><code>b = pilas.interfaz.Boton(u"Realizar animación")
def moverse():
b.escala_x = [ 2, 0.8, 1], 0.15
b.escala_y = [0.8, 2, 1], 0.1
d = pilas.azar(-50, 50)
b.rotacion = [d, 1], 0.1
b.conectar(moverse)
</code></pre>
<p>El resultado en pantalla será así:</p>
<p><img alt="" src="../imagenes/interfaz/boton.gif" /></p>
<h2 id="clase-deslizador">Clase: Deslizador</h2>
<p>El deslizador es útil para que el usuario pueda seleccionar
un valor intermedio entre dos números, por ejemplo entre 0 y 1, 0 y
100 etc.</p>
<p>Un ejemplo típico de este componente puedes encontrarlo
en las preferencias de audio de algún programa de sonido, los
deslizadores te permiten regular el grado de volumen.</p>
<p>Esta es una imagen del ejemplo <code>deslizador.py</code> que está
en el directorio <code>ejemplos</code>. Tiene tres deslizadores, y
el usuario puede regular cualquiera de los tres para ver
los cambios en el actor:</p>
<p><img alt="" src="../imagenes/interfaz/deslizador.jpg" /></p>
<p>Para construir un deslizador y asociarlo a una función
puedes escribir algo como esto:</p>
<pre><code>def cuando_cambia(valor):
print("El deslizador tiene grado:", valor)
deslizador = pilas.interfaz.Deslizador()
deslizador.conectar(cuando_cambia)
</code></pre>
<p>Entonces, a medida que muevas el deslizador se imprimirán
en pantalla valores del 0 al 1, por ejemplo 0.25, 0.52777 etc...</p>
<p>Si quieres cambiar los valores iniciales y finales de la
escala de valores, lo mas sencillo es multiplicar el argumento
<code>valor</code> de la función. Por ejemplo, si quieres valores entre
0 y 100:</p>
<pre><code>def cuando_cambia(valor):
valor_entre_cero_y_cien = valor * 100
</code></pre>
<h4 id="propiedades_1">Propiedades</h4>
<ul>
<li><code>progreso</code> - Almacen un valor entre 0 y 100</li>
</ul>
<h4 id="metodos_1">Métodos</h4>
<ul>
<li><code>conectar(funcion)</code> - Conecta una función que se llamará cada vez que muevas el deslizador.</li>
</ul>
<h2 id="clase-selector">Clase: Selector</h2>
<p>El selector te permite seleccionar una opción con
dos valores: habilitado, deshabilitado.</p>
<p>Se puede usar para opciones cómo habilitar o deshabilitar
el modo pantalla completa o algo así.</p>
<p>Para usarlo, se tiene que crear un objeto de la
clase <code>Selector</code> y un texto a mostrar:</p>
<pre><code>selector = pilas.interfaz.Selector("Habilitar pantalla completa.")
</code></pre>
<p>Y luego, se puede consultar el valor del selector mediante el
atributo <code>seleccionado</code>:</p>
<pre><code>if selector.seleccionado:
print("El selector esta seleccionado.")
else:
print("El selector no esta seleccionado.")
</code></pre>
<p>aunque en lugar de consultar la variable, es mucho mejor asociarle
una función para que el selector la llame solamente cuando el
selector cambia de estado (seleccionado/deseleccionado):</p>
<pre><code>def cuando_el_selector_cambia(estado):
print("El selector ahora esta en estado:", estado)
selector.definir_accion(cuando_el_selector_cambia)
</code></pre>
<h4 id="ejemplo-de-integracion_1">Ejemplo de integración</h4>
<p>Para mostrar el componente en funcionamiento tenemos un pequeño ejemplo: un
selector que nos permite alternar el fondo de la escena:</p>
<pre><code>selector = pilas.interfaz.Selector("Definir fondo naranja")
def cambiar_el_fondo(ha_seleccionado):
if ha_seleccionado:
pilas.fondos.Tarde()
else:
pilas.fondos.Blanco()
selector.conectar(cambiar_el_fondo)
</code></pre>
<p>El resultado en pantalla será así:</p>
<p><img alt="" src="../imagenes/interfaz/selector.gif" /></p>
<h4 id="propiedades_2">Propiedades</h4>
<ul>
<li><code>texto</code> - Etiqueta que mostrará el deslizador</li>
<li><code>seleccionado</code> - Almacena True o False, indicando el estado de selección.</li>
</ul>
<h4 id="metodos_2">Métodos</h4>
<ul>
<li><code>conectar(funcion)</code> - Conecta una función que se llamará cada vez que muevas el deslizador.</li>
<li><code>alternar_seleccion()</code></li>
<li><code>seleccionar()</code></li>
<li><code>deseleccionar()</code></li>
</ul>
<h2 id="clase-ingresodetexto">Clase: IngresoDeTexto</h2>
<p>Si quieres solicitar datos, como el nombre del
usuario, puedes usar el objeto <code>IngresoDeTexto</code>. Ya que
muestra una caja y un pequeño cursor para
ingresar texto:</p>
<p><img alt="" src="../imagenes/interfaz/ingreso_de_texto.png" /></p>
<p>Para usar este componente tienes que crearlo y luego leer o escribir el
atributo <code>texto</code>, que contiene la cadena de texto de la caja:</p>
<pre><code>entrada = pilas.interfaz.IngresoDeTexto()
entrada.texto = "Texto inicial"
</code></pre>
<p>Inicialmente, el objeto IngresoDeTexto toma un tamaño y apariencia predeterminado. Pero esto se puede cambiar fácilmente usando argumentos al momento de crear el componente.</p>
<p>Por ejemplo, podríamos enviarle cómo argumento un tamaño mas pequeño y un ícono de búsqueda:</p>
<p>entrada = pilas.interfaz.IngresoDeTexto(ancho=100, icono='iconos/lupa.png')
u otro ícono:</p>
<p>entrada = pilas.interfaz.IngresoDeTexto(ancho=100, icono='iconos/ok.png')
La caja también tiene otros métodos para permitir o prohibir el ingreso de datos.</p>
<p>Por ejemplo, podríamos decirle a la caja que solo permita el ingreso de números,
letras, o poner un límite de cantidad de caracteres. Los métodos
que te permite limitar el ingreso son <code>solo_numeros()</code> y <code>solo_letras()</code>, y el
límite de caracteres está en el atributo <code>limite_de_caracteres</code>:</p>
<h4 id="propiedades_3">Propiedades</h4>
<ul>
<li><code>texto</code></li>
<li><code>icono</code></li>
<li><code>limite_de_caracteres</code></li>
</ul>
<h4 id="metodos_3">Métodos</h4>
<ul>
<li><code>cualquier_caracter()</code></li>
<li><code>solo_numeros()</code></li>
<li><code>solo_letras()</code></li>
</ul>
<h2 id="clase-listaseleccion">Clase: ListaSeleccion</h2>
<p>La lista de selección se utiliza para mostrar al usuario una lista de cadenas, y permitirle seleccionarlas con el mouse.</p>
<p>Para crear un lista de selección, se tiene que crear una lista de cadenas y declarar una función para que sea llamada cuando se termina de seleccionar.</p>
<p>Por ejemplo, el siguiente código muestra una lista e imprime por consola cuando el usuario selecciona con el click del mouse:</p>
<pre><code>def cuando_selecciona(opcion):
print("Ha seleccionado la opcion:", opcion)
consulta = pilas.interfaz.ListaSeleccion(['Uno', 'Dos', 'Tres'], cuando_selecciona)
</code></pre>
<h4 id="ejemplo-de-integracion_2">Ejemplo de integración</h4>
<p>Para mostrar el componente en funcionamiento, hacemos un lista de
tres opciones, y le conectamos una función para avisar la opción
que selecciona el usuario:</p>
<pre><code>pilas.fondos.Pasto()
def cuando_selecciona(opcion_seleccionada):
pilas.avisar("Ha seleccionado la opcion: " + opcion_seleccionada)
opciones = pilas.interfaz.ListaSeleccion(['hola', 'opcion', 'tres'], cuando_selecciona)
</code></pre>
<p>Deberías ver en pantalla lo siguiente:</p>
<p><img alt="" src="../imagenes/interfaz/lista_seleccion.gif" /></p>
</div>
</div>
<footer>
<div class="rst-footer-buttons" role="navigation" aria-label="footer navigation">
<a href="../menu/" class="btn btn-neutral float-right" title="Cómo crear menúes para tu juegos"/>Siguiente <span class="icon icon-circle-arrow-right"></span></a>
<a href="../escenas/" class="btn btn-neutral" title="Escenas"><span class="icon icon-circle-arrow-left"></span> Anterior</a>
</div>
<hr/>
<div role="contentinfo">
<p>
<!-- Copyright etc -->
</p>
</div>
Creado con <em>MkDocs</em>.
<script>
$(document).ready(function() {
$('img').each(function(elemento) {
if (this.src.indexOf('github.io') > 0) {
this.src = this.src.replace('github.io/imagenes', 'github.io/pilas-manual/imagenes');
}
});
});
</script>
<script>
$(document).ready(function() {
String.prototype.endsWith = function(suffix){
return this.indexOf(suffix, this.length - suffix.length) !== -1;
};
$('a').each(function(){
var x=this.href;
if (!this.href.endsWith('html') && this.href.indexOf('#') < 0 && this.href.indexOf('http://') === -1 && this.href.indexOf('https://') === -1) {
if (this.href.endsWith('/')) {
this.href = this.href + "index.html";
} else {
this.href = this.href + "/index.html";
}
}
});
});
</script>
<script>
function alternar_menu() {
var sidebar = document.querySelectorAll(".wy-nav-side")[0];
var left = sidebar.style.left;
if (left === "-300px") {
sidebar.style.left = "0px";
} else {
if (left === "0px") {
sidebar.style.left = "-300px";
} else {
sidebar.style.left = "0px";
}
}
}
$(document).ready(function() {
document.querySelector('ul.wy-breadcrumbs>li>a').onclick = function() {
var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
if (w < 768) {
alternar_menu();
return false;
} else {
return true;
}
}
});
</script>
<style>
.rst-versions {
border: 0 !important;
}
.wy-nav-side {
padding-bottom: 50px;
}
.wy-nav-content-wrap {
background-color: white !important;
}
.wy-nav-content {
background-color: white !important;
}
.star {
display: inline-block !important;
width: 14px !important;
height: 14px !important;
background-image: url('/imagenes/star.png');
margin-bottom: -2px;
margin-left: 4px;
}
</style>
</footer>
<script type="text/javascript">
var dentro_de_pilas_engine = (document.location.href.indexOf('file://') === 0);
// Ocultando la barra de búsqueda
if (dentro_de_pilas_engine) {
var b = document.getElementsByName('q');
b[0].style.display = "none"
}
</script>
<style media="screen">
code {
font-size: 15px !important;
}
</style>
<style>
img {
width: auto !important;
}
pre {
padding: 0px !important;
}
.hljs {
font-size: 15px;
}
td {
padding: 15px;
text-align: center;
}
.wy-menu-vertical li.current {
background: #0B0B0B;
}
.wy-menu-vertical li.on a, .wy-menu-vertical li.current>a {
color: #FFFFFF;
padding: 0.4045em 1.618em;
font-weight: bold;
position: relative;
background: #6C6C6C;
border: none;
border-bottom: none;
border-top: none;
padding-left: 1.618em -4px;
}
.wy-menu-vertical li.current a {
color: rgb(186, 186, 186);
}
.wy-menu-vertical li.current a:hover {
background: #444444;
}
</pre>
</div>
</div>
</section>
</div>
<div class="rst-versions" role="note" style="cursor: pointer">
<span class="rst-current-version" data-toggle="rst-current-version">
<span><a href="../escenas/" style="color: #fcfcfc;">« Previous</a></span>
<span style="margin-left: 15px"><a href="../menu/" style="color: #fcfcfc">Next »</a></span>
</span>
</div>
</body>
</html>