Vamos a ver una pequeña aplicación DroidScript completa.
Es un simple reloj y su ciclo de funcionamiento es: inicio/actualizar reloj/dibujar reloj no hace otra cosa. No vamos a usar los controles clásicos: cajas de texto y botones. Dibujaremos nuestro reloj digital en una imagen.
Usaremos un pequeño truco para evitar el parpadeo de la imagen al actualizarla, para ello utilizaremos una imagen [canvas] para dibujar y otra [display] que sera la que mostraremos en pantalla, como display no se borra, si no que se dibuja cada segundo el contenido de canvas, evitamos el parpapedo.
La logica de esta mini aplicación esta bajo el "namespace" (ámbito) de una única variable [sys] que nos facilita el acceso a cualquier atributo o función y es muy flexible para crecer.
Para evitar la redundancia de código hemos creado la función pText que es usada para dibujar cada elemento: hora, minutos, segundos y puntos de separación, también añade una sombra del color especificado a una separación prefijada que con un poco de imaginación podría "customizarse" para
progranar la orientación y la densidad.
Crea una carpeta en DroidScript con el nombre que quieras y copia este fragmento de código
con el mismo nombre de la carpeta en formato .js
/* BIG CLOCK/GRAN RELOJ */
/* DroidScript/Javascript code */
/* cc 2015 */
//
// logica de la aplicación encapsulada en una
// única variable [sys] que nos permiter añadir
// atributos y funciones e incluso eliminarlas
//
// STOP variables globales!!!
var sys={
state:true,
flag:{
dotColor:false
},
color:{
display:"#ff0000",
bg:"#444444",
dots:{
hi:"#ffff00",
low:"#888800"
},
digits:{
hi:"#00ff00",
low:"#ff0000"
},
},
clock:{
time:{
hours:0,
minutes:0,
seconds:0,
ampm:""
},
update:function(){
var now=new Date();
// alert(now.toJSON());
this.time.hours=pad(now.getHours());
this.time.minutes=pad(now.getMinutes());
this.time.seconds=pad(now.getSeconds());
}
}
};
// Toda aplicacion DroidScript empieza aqui.
// Called when application is started.
function OnStart()
{
app.PreventScreenLock( true );
app.SetScreenMode("Full");
//Create a layout with objects vertically centered.
sys.lay = app.CreateLayout( "linear", "VCenter,FillXY" );
// imagen mostrada en pantslla
sys.display=app.CreateImage(null,1,1,"fix,FontAwesome",800,600);
sys.display.SetOnTouchUp(userTouch)
// buffer para dibujar el reloj
sys.canvas=app.CreateImage(null,1,.5,"fix,FontAwesome",800,200);
// añadir display al layout principal
sys.lay.AddChild(sys.display);
//Add layout to app.
app.AddLayout( sys.lay );
sys.display.SetColor(sys.color.display);
update();
}
function update(){
drawClock();
sys.display.DrawImage(sys.canvas,0,.3,1,.4)
// display.DrawImage(canvas,0,.45,1,.5)
if(sys.state)
setTimeout(update,1000);
}
function drawClock(){
var colordots=(sys.flag.dotColor? sys.color.dots.low:sys.color.dots.hi),
// colordigits=sys.color.digits.hi
colordigits=(!sys.flag.dotColor? sys.color.digits.low:sys.color.digits.hi),
time=sys.clock.time,
canvas=sys.canvas;
sys.clock.update();
canvas.SetTextSize(200);
canvas.Save();
canvas.Clear();
canvas.SetColor(sys.color.bg);
//
pText(canvas, time.hours, colordigits, .05, .85, "#000000");
pText(canvas, time.minutes,colordigits,.36,.85, "#000000" );
pText(canvas, time.seconds,colordigits,.68,.85, "#000000" );
pText(canvas, ":", colordots, .31, .75, "#000000" );
pText(canvas, ":", colordots, .62, .75, "#000000" );
canvas.Update()
sys.flag.dotColor= !sys.flag.dotColor;
}
// dibujar en el destino [el] indicado un texto, su posicion,
// el color y el color de sombra.
//
// nota: mejora esta función. Controla el desplazamiento
// x e y de la sombra, su densidad.
//
function pText(el,text,color,x,y,shadowColor){
el.SetPaintColor(shadowColor);
el.DrawText(text,x+.005,y+.02);
el.SetPaintColor(color);
el.DrawText(text,x,y);
}
// añade un cero si num < 10
//
function pad(num){ return num<10? "0"+num:num; }
// en una futura mejora con alarma y otras
// funciones, detectaremos donde libera un
// toque el usuario
//
function userTouch(ev){
// app.ShowPopup(ev.X+"/"+ev.Y);
}
Que disfrutes modificando u aprendiendo más sobre DroidScript con este simple
ejemplo.
Y en siguientes ediciones: SPLASH 3D o como construir intros con texto pseudo 3D.
