/////////////////////////////////////////////////

//————————————–

//   YAPI – Yet Another Page Indicator

//   HUD  – Head Up Display

//

//————————————–

// Author: Jappie Toutenhoofd

//————————————–

// Install:

//  – Set this script on event Position-Changed.

// Upgrade:

// – Delete old Hud-item.

//————————————–

//

// Features in v4.2

//  – Full Map   (optional)

//  – Set on any Container

//  – Fade out   (optional)  by TrianguloY

//  – max Frames Per Second

// new

//  – IMG-cache             (by TrianguloY)

//  – Config in item.tag not in script

//  – Styles: MAP – HUD has container ratio

//             PI – HUD has item      ratio

////////////////////////////////////////////////

// Create HUD shortcut – called when not found

function Initialsetup()

{ var config    = {};

  config.view  = {};

  config.view.HUD_style=”PI”;    // MAP or PI (MAP or PageIndicator-style)

  config.view.Full_Map=false;  // Draw all items (true or false)

config.color  = {};

 config.color.BG=0x33000000;  // Background

  config.color.HUD=0x77FFFFFF; // Current view

  config.color.PNL=0xEEFF1122; // Default for items in full map

  config.fading = {};

  config.fading.opt_Fade=false;    // true or false

  config.fading.timeUntilFade=1.9; // in seconds

  config.fading.timeFading=0.5;    // in seconds

  config.max_FPS=16; // max Frames Per Second

  config.runId=0;    // internal use

  var newHud = d.addShortcut(“HUD”,new Intent(),0,0);

  newHud.setTag(JSON.stringify(config));

  d.setItemZIndex(newHud.getId(),d.getItems().getLength());

  var pe = newHud.getProperties().edit();

  pe.setBoolean(“i.onGrid”,false);

  pe.setString(“i.pinMode”,”XY”);

  pe.setBoolean(“i.enabled”,false);

  pe.setBoolean(“s.iconVisibility”,false);

  pe.setBoolean(“s.labelVisibility”,false);

  pe.commit();

  return newHud;

}

// Create Image on cell-size

var d   = LL.getEvent().getContainer();

var hud =  d.getItemByLabel(“HUD”);

if (hud==null) { hud=Initialsetup();}

var cnf = JSON.parse(hud.getTag())||{};

if( !(“runId” in cnf)){ alert(“Oops, delete HUD \nSorry, this version is old or corrupt.”);}

// prevent event flouding

if ((LL.getEvent().getDate() – cnf.runId) < (1000 / cnf.max_FPS) )

  {return;}

var hudW = hud.getWidth();

var hudH = hud.getHeight();

var hud_ratio = hudW / hudH;

var bb   = d.getBoundingBox();

var cntW = bb.getRight() – bb.getLeft();

var cntH = bb.getBottom() – bb.getTop();

var cnt_ratio = cntW / cntH;

if (hud_ratio > cnt_ratio)

{ // Container is higher

  var cnt_scale = hudH / cntH;

}else{ // Container is wider

  var cnt_scale = hudW / cntW;

}

var p   = new Paint();

p.setAntiAlias(true);

if(cnf.view.HUD_style==”PI”)

{ // PageIndicator-style

var img = LL.createImage((cntW*cnt_scale),(cntH*cnt_scale));

}else

{ // Map-style

    var img = LL.createImage( hudW,hudH);

}

hud.setBoxBackground(img, “n”);

var c   = img.draw();

if(c==null)alert(img);

if(cnf.runId!= 0 && cnf.fading.opt_Fade == true)

{//don’t refresh

  c.drawBitmap(hud.getBoxBackground(“s”).bitmap, 0, 0, null);

}else

  {//refresh

    // Outer Hud base on BoundingBox

    p.setStyle(Paint.Style.FILL);

    p.setColor(cnf.color.BG);

    c.drawRect(0, 0, (cntW * cnt_scale), (cntH * cnt_scale), p);

    p.setStyle(Paint.Style.STROKE);

    p.setColor(cnf.color.HUD);

    p.setStrokeWidth(3);

    c.drawRect(0, 0, (cntW * cnt_scale), (cntH * cnt_scale), p);

    // Map based on Items

    if ( cnf.view.Full_Map )

    { var Mitems = d.getItems();

      for( var mi=0;mi

      {

        var cMi = Mitems.getAt(mi);

        if ( cMi.getProperties().getString(“i.pinMode”) == “NONE”)

        {

          // Map item size

          if (cMi.getProperties().getBoolean(“i.onGrid”))

          {

            var ItmL = (cMi.getCell().getLeft() * cMi.getParent().getCellWidth() ) – bb.getLeft();

            var ItmT = (cMi.getCell().getTop()  * cMi.getParent().getCellHeight()) – bb.getTop() ;

          }else{

            var ItmL = cMi.getPositionX() – bb.getLeft();

            var ItmT = cMi.getPositionY() – bb.getTop() ;

          }

          var ItmR = ItmL + ( cMi.getWidth() * cMi.getScaleX() );

          var ItmB = ItmT + ( cMi.getHeight() * cMi.getScaleY() );

          p.setStyle( Paint.Style.FILL);

          p.setColor(ItemColor(cMi));

          c.drawRect(ItmL * cnt_scale , ItmT * cnt_scale , ItmR * cnt_scale , ItmB * cnt_scale , p);

        } // pinMode

      } // for

    } // Full_Map

    hud.setBoxBackground(copyImage(img),”s”);

  }//refresh

// Inner Hud based on Current View

  var VwL = d.getPositionX() – bb.getLeft();

  var VwT = d.getPositionY() – bb.getTop() ;

  var VwR = VwL + ( d.getWidth()  / d.getPositionScale());

  var VwB = VwT + ( d.getHeight() / d.getPositionScale());

  p.setStyle(Paint.Style.FILL);

  p.setColor(cnf.color.HUD);

  c.drawRect(VwL * cnt_scale , VwT * cnt_scale , VwR * cnt_scale , VwB * cnt_scale , p);

  img.save();

  img.update();

//fade out

  hud.getProperties().edit().setInteger(“i.alpha”,255).commit();

  cnf.runId = LL.getEvent().getDate();

  hud.setTag(JSON.stringify(cnf));

  if (cnf.fading.opt_Fade)

  { var blowUp_Alpha = 255+((255 / cnf.fading.timeFading) * cnf.fading.timeUntilFade)

    setTimeout(function(){fadeOut(hud, blowUp_Alpha, cnf.runId);},(1000/ cnf.max_FPS) );

  } // opt_fade

  function fadeOut(hud,alpha,runId)

  { var old = JSON.parse(hud.getTag());

 if(old.runId != runId){return;}

    alpha-=255/ cnf.max_FPS / cnf.fading.timeFading;

    hud.getProperties().edit().setInteger(“i.alpha”,alpha>255?255:alpha<0?0:alpha).commit();

    if (alpha<=0)

    { cnf.runId = 0;

      hud.setTag(JSON.stringify(cnf));

      return;

    }

    setTimeout(function() {fadeOut(hud,alpha,runId);},(1000/cnf.max_FPS));

  } // fu fadeOut

  function copyImage(src)

  { var bmp_orig = src.getBitmap();

    var img_copy = LL.createImage(bmp_orig.getWidth(), bmp_orig.getHeight());

    img_copy.draw().drawBitmap(bmp_orig, 0, 0, null);

    img_copy.update();

    return img_copy;

  }

  function ItemColor(ItemC)

  { var Cimg = null;

    var px = 0x00000000;

    if ((ItemC.getType() == “Shortcut” || ItemC.getType() == “Folder”)

    && (ItemC.getProperties().getBoolean(“s.iconVisibility”)))

    { Cimg = ItemC.getCustomIcon()||ItemC.getDefaultIcon();

      try{var bmp = Cimg.getBitmap();}catch(e){alert(ItemC);}

      px  = bmp.getPixel(Cimg.getWidth()* .41, Cimg.getHeight()* .71);

      if (Color.alpha(px) < 255)

      {px = bmp.getPixel(Cimg.getWidth()* .62, Cimg.getHeight()* .37);

      }

      if (Color.alpha(px) < 255)

      {px = bmp.getPixel(Cimg.getWidth()* .48, Cimg.getHeight()* .51);

      }

    } // icon visible

    if (ItemC.getType() != ” StopPoint” ||  ItemC.getType() != “Unlocker” || Color.alpha(px) < 99 )

    { Cimg = ItemC.getBoxBackground(“n”);

      if (Cimg != null && !Cimg.isNinePatch())

      {var bmp = Cimg.getBitmap();

        px  = bmp.getPixel(Cimg.getWidth()* .5, Cimg.getHeight()* .5);

      }

    } // non stoppoint

    if (Color.alpha(px) < 50)

    {px = ItemC.getProperties().getBox(‘i.box’).getColor(‘c’,’n’);

    }

    if (Color.alpha(px) < 50)

    {px  = cnf.color.PNL;

    }

    return px;

  }

]]>

YAPI-HUD v3 with FadeOut

Thanks go to TrianguloY for the FadeOut.

Max_FPS is experimental.

]]>

YAPI-HUD v2 Optional Full Map.

]]>

Little spin-off of my other project (YAPI-HUD).

5 months ago Jay M requested and got a rondom colored App-drawer.

Here is a matching color App-drawer…

..or Flat-UI drawer if you like.

{why can’t I link to this, from mobile app}

]]>

YAPI-HUD

Yet Another Page Indicator

Head Up Display – style

Scripted with Canvas Paint.

]]>