|| Inicio || » Refactorización Funci… »

Elm: Elementos Visuales

Última modificación: 25 de Noviembre de 2016, y ha tenido 135 vistas

Etiquetas utilizadas: || ||

These icons link to social bookmarking sites where readers can share and discover new web pages.
  • BarraPunto
  • Del.icio.us
  • Digg
  • email
  • Facebook
  • Google
  • LinkedIn
  • PDF
  • Reddit
  • Slashdot
  • Twitter

Vimos en la entrada anterior cómo podemos tratar con elementos de texto dentro de las páginas web que vayamos generando (existe un tipo de dato llamado Text que permite manipularlos, y algunas funciones para convertirlos en Element, un tipo que puede ser renderizado directamente en el navegador). A continuación vamos a mostrar cómo podemos incluir otros tipos de elementos gráficos que pueden combinarse entre sí y con los textos.

Las formas gráficas visuales arbitrarias vienen definidas a partir de lo que se llaman Foms, que pueden ser rotadas, trasladadas, coloreadas y estilizadas con diversas operaciones, así como agrupadas con el fin de obtener elementos compuestos más complejos. Además, existen estructuras simples, llamadas Shapes y Paths, con las que se pueden construir las formas anteriores.

El siguiente diagrama resume el conjunto de tipos, librerías y funciones que permiten manipular los objetos visuales con los que se puede trabajar directamente en Elm:

A continuación analizaremos con algún detalle algunos de los ejemplos que se ofrecen en la distribución actual de Elm relacionados con estas librerías.

import Color exposing (..)
import Graphics.Collage exposing (..)
import Graphics.Element exposing (..)
    
main : Element
main =
  collage 400 420
    [ move (40,-55) blueSquare
    , move (40, 55) redSquare
    , ngon 4 75
    |> filled clearGrey
    |> move (-120,10)
    , ngon 5 50
    |> filled clearGrey
    |> move (-60,10)
, rotate (degrees 20) (toForm (show "Aqui puede ir cualquier elemento")) ] blueSquare : Form blueSquare = traced (dashed blue) square redSquare : Form redSquare = traced (solid red) square square : Path square = path [ (50,50), (50,-50), (-50,-50), (-50,50), (50,50) ] clearGrey : Color clearGrey = rgba 111 111 111 0.6

Hemos importado las librerías exponiéndolas por completo (con exposing (..)) para facilitar la comprensión de los ejemplos aunque, como se indicó en la entrada anterior, no es la opción más recomendable.

Comenzamos (aunque en el código aparece en último lugar) con la definición de una función, square, que genera un cuadrado de lado 100 unidades y centrado en el origen (con estas librerías, el origen siempre se sitúa en el centro del área de dibujo). Este cuadrado se ha formado como un Path que conecta los 4 vértices del mismo. Posteriormente, tanto en bluesquare como en redsquare se usa la función traced para convertirlos en Forms (con distintos tipos de líneas de contorno).

Paralelamente, se ha definido un color con trasnparencia, clearGrey, que se utiliza para la generación de dos polígonos Shapes. La función rgb devuelve un color a partir de la cantidad de rojo, verde y azul que combinemos (toma valores entre \(0\) y \(255\)), mientras que la función rgba añade un cuarto argumento, entre \(0\) y \(1\), que indica la cantidad de transparencia que se le asigna al color (\(0\): completamente opaco, \(1\): completamente transparente).

Además, se ha añadido una cadena que ha sido convertida en Element (por medio de show), para posteriormente ser convertida en Form (usando toForm), una vez convertida en Form puede ser rotada. Observa que la notación que se ha usado para generar esta forma ha sido con paréntesis. 

Recuerda que show es simplemente la composición siguiente de funciones:

show value = leftAligned (Text.monospace (Text.fromString (toString value)))

Por último, la función main hace uso de collage para construir un Element que agrupa las formas anteriores.

A continuación mostramos un código que genera formas a partir de una función:

import Color exposing (..)
import Graphics.Collage exposing (..)
import Graphics.Element exposing (..)
    
main : Element
main =
    collage 150 150 (List.map forma [0..11])
    
forma : Int -> Form
forma n =
    let
      angle = degrees (30 * toFloat n)
    in
      circle 10
      |> filled (hsl angle 0.7 0.5)
      |> move (45 * cos angle, 45 * sin angle)

La función forma recibe como dato de entrada un entero y devuelve una forma circular donde la posición y el color que usa dependen de ese entero, distribuyendo los círculos uniformemente en una circunferencia de radio \(45\) (la función hsl también devuelve colores, pero ahora en función de la tonalidad, saturación y luminosidad). La función main aplica la función anterior a los elementos de la lista [\(0\)..\(11\)] consiguiendo una distribución uniforme de círculos con colores distintos.

Puedes encontrar un curioso ejemplo del uso de gradientes radiales en el ejemplo radial gradient, que genera la siguiente figura:

En el ejemplo fancier layout puedes ver cómo se usa la función flow para generar un layout específico en los resultados que se muestran.

import Graphics.Element exposing (..)

main : Element main =
flow down (List.map (width 150) content)
content : List Element content = [ show "Bears, Oh My!" , image 200 200 "/imgs/yogi.jpg" , image 472 315 "/imgs/shells.jpg" ]

La función flow recibe una dirección y una lista de elementos, y devuelve una distribución de esos elementos siguiendo la dirección indicada:

flow right [a,b,c]
+---+---+---+
| a | b | c |
+---+---+---+

Admite como posibles direcciones: up, down, right, left, inward y outward

En centering puedes encontrar un ejemplo de cómo usar un container de una forma directa y útil.

Con un poco de trabajo e imaginación se pueden conseguir resultados como el que sigue (extraído del tutorial de shapes de la McMaster Outreach):

Se recomienda echar un vistazo a la documentación de las librerías involucradas para tener una idea de las diferentes opciones que tenemos para manipular elementos visuales: Graphics.Elements, Graphics.Collage, Graphics.Input, Graphics.Input.Field y Text.

Puedes utilizar este código para generar un pequeño programa que te permite jugar con Elementos Visuales si lo cargas en el editor online de Elm (en clase analizaremos cómo está hecho cuando veamos la entrada dedicada a Señales). El código es una modificación de un código de esta página.

|| Inicio || » Refactorización Funci… »