3 Commentsto YAPI-HUD v3 with FadeOut

1. Anonymous says:

   August 20, 2014 at 6:48 pm

   < ![CDATA[

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

   
   

   //———————————————

   
   

   //   YAPI    – Yet Another Page Indicator

   
   

   // HUD-style – Head Up Display

   
   

   //

   
   

   //———————————————

   
   

   // set this script on event Position-Changed

   
   

   //———————————————

   
   

   //

   
   

   // Features in v3

   
   

   // – Full Map (optional)

   
   

   // – Set on any Container

   
   

   // – Fade out (by TrianguloY)

   
   

   // – FPS (experimental)

   
   

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

   
   

    

   
   

   /* config */

   
   

   var  BG_color = 0x33000000; 

   
   

   var HUD_color = 0x7700FF00;

   
   

   var PNL_color = 0xEEFF1122;

   
   

   var Full_Map = true; // true or false

   
   

   var opt_Fade = true; // true or false

   
   

   var timeUntilFade = 1.4; //in seconds

   
   

   var timeFading = 1.4; //in seconds

   
   

   var max_FPS = 20;

   
   

   /* end-config */

   
   

   
   

   // Create Image on cell-size

   
   

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

   
   

   
   

   if (d.getItemByLabel(“HUD”)==null) { Initialsetup();}

   
   

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

   
   

   
   

   if ((LL.getEvent().getDate() – hud.getTag()) < (1000 / max_FPS) ) {return;}

   
   

   
   

   var hudW = hud.getWidth();

   
   

   var hudH = hud.getHeight();

   
   

   var hud_ratio = hudW / hudH;

   
   

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

   
   

   hud.setBoxBackground(img, “n”);

   
   

   var p = new Paint();

   
   

   p.setAntiAlias(true);

   
   

   var c = img.draw();

   
   

   
   

   // Outer Hud base on BoundingBox

   
   

   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;

   
   

   }

   
   

   
   

   p.setStyle(Paint.Style.FILL);

   
   

   p.setColor(BG_color);

   
   

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

   
   

   
   

   p.setStyle(Paint.Style.STROKE);

   
   

   p.setColor(HUD_color);

   
   

   p.setStrokeWidth(3);

   
   

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

   
   

   
   

   // Map based on Items

   
   

   if ( 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() ); 

   
   

   
   

   // Map item color

   
   

     var Cimg = null;

   
   

      var px = 0x00000000;   

   
   

        if (

   
   

   (cMi.getType() == “Shortcut”

   
   

   ||  cMi.getType() == “Folder”

   
   

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

   
   

   )

   
   

   {

   
   

          Cimg = cMi.getCustomIcon()||cMi.getDefaultIcon();

   
   

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

   
   

               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 (cMi.getType() != ” StopPoint” ||  cMi.getType() != “Unlocker” || Color.alpha(px) < 99 )

   
   

          {

   
   

           Cimg = cMi.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 = cMi.getProperties().getBox(‘i.box’).getColor(‘c’,’n’);

   
   

   }

   
   

         if (Color.alpha(px) < 50)

   
   

           {

   
   

           px  = PNL_color;

   
   

           } 

   
   

       p.setStyle( Paint.Style.FILL);

   
   

        p.setColor(px);

   
   

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

   
   

      } // pinMode

   
   

   } // for

   
   

   } // Full_Map

   
   

   
   

   
   

   
   

   // Inner Hud based on Current View

   
   

   //drawRect ( Left, Top, Right, Bottom, Paint)

   
   

   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(HUD_color);

   
   

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

   
   

   
   

   img.update();

   
   

   
   

   
   

   //fade out

   
   

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

   
   

   
   

   var sestok = LL.getEvent().getDate();

   
   

   hud.setTag(sestok);

   
   

   
   

   if (opt_Fade)

   
   

   {

   
   

   setTimeout(function(){fadeOut(hud,255+255/timeFading*timeUntilFade,sestok);},(1000/ max_FPS) );

   
   

   } // opt_fade

   
   

   
   

   function fadeOut(hud,alpha,sestok)

   
   

   {

   
   

   if(hud.getTag() !=sestok)return;

   
   

   
   

   alpha-=255/ max_FPS /timeFading;

   
   

   
   

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

   
   

   
   

   if(alpha< =0)return;

   
   

   
   

   setTimeout(function() {fadeOut(hud,alpha,sestok);},(1000/ max_FPS) );

   
   

   
   

   } // fu fadeOut

   
   

   
   

   
   

   // Create HUD shortcut

   
   

   function Initialsetup()

   
   

   {

   
   

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

   
   

   newHud.setTag(0);

   
   

   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();

   
   

   }

   ]]>
   

   Reply
2. Anonymous says:

   August 21, 2014 at 4:13 am

   < ![CDATA[

   Ok, now it’s perfect and I can stop bothering you about the fade out. Great job.

   ]]>

   Reply
3. Anonymous says:

   August 23, 2014 at 12:15 pm

   < ![CDATA[

   I find myself copy-ing my own script with different values for different cases.

   
   

   
   

   ToDo:

   
   

   – Move ‘config’ to ‘first initiation’ and store the values in the item.tag.

   
   

   – Read item.tag when YAPI is rendered.

   
   

   – Make interactions for coloors, options and fade-times.

   ]]>

   Reply