Author Topic: advanced progres bar  (Read 408 times)

keilmillerjr

  • Global Moderator
  • Hero Member
  • *****
  • Posts: 863
    • View Profile
Re: advanced progres bar
« Reply #15 on: April 14, 2019, 01:23:08 PM »
how does one use it in a theme, hard coded?

it just breaks the theme the way it is..thats all :D


but also thanks, for what you are doing to!.

Not sure what you mean by hard coded. Its just a simple function, not a class. It returns a value. Untested because i wrote it on my iphone. On my way right not with measurements to make extension cords and such to hook up computer. Excited to be back on attract.

jedione

  • Hero Member
  • *****
  • Posts: 631
  • punktoe
    • View Profile
Re: advanced progres bar
« Reply #16 on: April 14, 2019, 02:16:24 PM »
im glad your exited.....your services are needed.

i guess all i was saying was , that the code was not working.. i can see what it does
it looks kind of explanatory..   its probley something simple...  ill wait for you to get your stuff all handled..

thanks
« Last Edit: April 14, 2019, 04:44:38 PM by jedione »
help a friend....

rand0m

  • Sr. Member
  • ****
  • Posts: 193
    • View Profile
Re: advanced progres bar
« Reply #17 on: April 14, 2019, 09:20:12 PM »
Here is the code I am using
Code: [Select]
//Indicator Bar
local indicator_bar = fe.add_image( "images/indicator_bar.png", 36, 180, 12,760 );
local indicator_graph = fe.add_image( "images/indicator_graph.png", 38, 180, 8, 760 );
local indicator_position = fe.add_image( "images/circle.png", 20, 0, 42, 42 );

Indicator_bar is the outline in red color, indicator_graph is the red filler, its a pixel 1x1 and indicator_position is the circle where first alphabet of title is displayed.

Code: [Select]
//Get First Letter of Title and Adjust Non-Alphabetical Chars
function first_letter ()
{
local first_char = rstrip(fe.game_info(Info.Title)).slice(0,1);
local expression = regexp("[a-zA-Z]");
if (expression.match(first_char) == true) return first_char
else return "#";
}

Keil made this part, its function is to display every Alphabet (A-Z) as it is and display every Non-Alphabet (0-9, symbols) as "#". This follows the same scheme most often applied in emulation related websites/ apps, it keeps things organized (e.g. much better suited for scrolling by next/ previous letter) and user knows exactly where an item could be found. I was using a very long/ blunt code before, listing every non-alphabet character. This code works beautifully, thanks Keil :D and welcome back.

Code: [Select]
local indicator_text = fe.add_text( "[!first_letter]",22, 0, 40, 40);
indicator_text.font="BebasNeue Book.ttf";
indicator_text.set_rgb(193,9,16);
indicator_text.style = Style.Bold;
indicator_text.align = Align.MiddleCentre;
indicator_text.charsize = 38;

This displays the first character of title on Indicator_position (circle), we get the "[!first_letter]" from Keil's reg expression code, rest is simple text manipulation.

Code: [Select]
function on_indextransition( ttype, var, ttime )
{
   indicator_graph.height = (indicator_bar.height)/(fe.list.size) * (fe.list.index+1)
   indicator_position.y = (indicator_bar.height - 34)/(fe.list.size) * (fe.list.index+1) + 176
   indicator_text.y = (indicator_bar.height - 34)/(fe.list.size) * (fe.list.index+1) + 176
}
fe.add_transition_callback( this, "on_indextransition" )

This is the main code which adjusts indicator bar location, I have added (-34) and ( +176) to get a desired result but its a temporary fix.
« Last Edit: April 15, 2019, 07:09:16 AM by rand0m »

keilmillerjr

  • Global Moderator
  • Hero Member
  • *****
  • Posts: 863
    • View Profile
Re: advanced progres bar
« Reply #18 on: April 15, 2019, 04:35:14 AM »
Woke up early. Ran extension cords. Zip tied cables. iMac is a go.

Created a test layout and started a new progress module. Revised the issues with my firstLetter function. Sorry, iPhone coding isn’t easy. Also created a function to create percentage of progression through a list.

I think I am going to create two classes: progress bar and indicating characters. Will do a little more work creating the classes and then to be continued on next day off.

zpaolo11x

  • Sr. Member
  • ****
  • Posts: 357
    • View Profile
    • My deviantart page
Re: advanced progres bar
« Reply #19 on: April 15, 2019, 05:48:47 AM »
This is all good if your list is always sorted by name. If you have filters sorted by different criteria it gets tricky really fast. The magic token [OrderValue] can't be retrieved through fe.game_info, so one has to tweak the "first letter" function to keep track of this, and for years sorting an entirely new list should be used with years and not letters.

zpaolo11x

  • Sr. Member
  • ****
  • Posts: 357
    • View Profile
    • My deviantart page
Re: advanced progres bar
« Reply #20 on: April 15, 2019, 06:56:32 AM »
This is my code contribution.

There's a "gameletter" function that acts differently if the list is sorted by name or manufacturer (returns the first letter), by category (returns the main category) or by year (returns the decade in the form 198x).

There is a routine in the on_transition section that, when transitioning to a new list, dynamically builds a table of "sort items" that are letters or years or categories according to the sort order, and changes it every time so the list is always consistent with the sort order. A small tweak can be done to space each "section" proportionally to the number of games in that slot but if there are few games then the category name will not fit, so I let it out

Code: [Select]
function gameletter( offset ) {
   if (fe.filters.len() > 0){

      if (fe.filters[fe.list.filter_index].sort_by == Info.Year){
         local s = fe.game_info( Info.Year, offset )
         s = s.slice (0,3)+"x"
         return s
      }
      else if (fe.filters[fe.list.filter_index].sort_by == Info.Manufacturer){
         local s = fe.game_info( Info.Manufacturer, offset )
         return s.slice(0,1)
      }
      else if (fe.filters[fe.list.filter_index].sort_by == Info.Category){
         local s = fe.game_info( Info.Category, offset )
         if (s == "") return "?"
         s = split( s, "/" )
         return strip(s[0])
         }
      else {
         local s = fe.game_info( Info.Title, offset )
         if (s.find("The ") == 0) s = s.slice(4,s.len())
         local s2 = s.slice(0,1)
         if ("1234567890".find (s2) != null ){
            s2="#"
         }
         return s2
      }
   }
}


local flw = fe.layout.width
local flh = fe.layout.height
local gamename = fe.add_text("[Title]\n[SortValue]",0,0,flw,flh/10)
gamename.charsize = gamename.height*0.25

local accent = fe.add_text ("[!gameletter]",0,flh*0.5,flw,flh*0.25)
accent.charsize = flh*0.25


local keys = null

fe.add_transition_callback( this, "on_transition" )

function on_transition( ttype, var, ttime ) {

   if (ttype == Transition.ToNewSelection){
      local l1 = gameletter(0)
      local l2 = gameletter(var)

      if (l1 != l2){
         keys [l1].alpha = 128
         keys [l2].alpha = 255
      }
   }

   if (ttype == Transition.ToNewList){
      local tableorder = []
      local tableletter = {}

      for (local i = 0 ; i < fe.list.size ; i++){
         local s =  (gameletter (i-fe.list.index))
         try { tableletter[s]++ }
         catch (err) {
            tableletter[s] <- 1
            tableorder.push (s)
         }
      }

      keys = {}
      local i = 0
      local x0 = 0

      foreach (key in tableorder){
         local key_obj = fe.add_text(key,x0,flh*0.5,flw/tableorder.len(),50)
         key_obj.charsize = 50
         key_obj.alpha = ((tableletter[key] > 0) ? 128 : 0)
         key_obj.set_bg_rgb (100+50*(i%2),100+50*(i%2),100+50*(i%2))
         i++
         x0 = x0 + flw/tableorder.len()
         keys[key] <- key_obj
      }

      keys [gameletter(0)].alpha = 255
   }

}

rand0m

  • Sr. Member
  • ****
  • Posts: 193
    • View Profile
Re: advanced progres bar
« Reply #21 on: April 15, 2019, 07:34:38 AM »
This is all good if your list is always sorted by name. If you have filters sorted by different criteria it gets tricky really fast. The magic token [OrderValue] can't be retrieved through fe.game_info, so one has to tweak the "first letter" function to keep track of this, and for years sorting an entirely new list should be used with years and not letters.

[SortName] works if we use it to get text directly but can't get in through game info.

zpaolo11x

  • Sr. Member
  • ****
  • Posts: 357
    • View Profile
    • My deviantart page
Re: advanced progres bar
« Reply #22 on: April 15, 2019, 07:41:29 AM »
This is all good if your list is always sorted by name. If you have filters sorted by different criteria it gets tricky really fast. The magic token [OrderValue] can't be retrieved through fe.game_info, so one has to tweak the "first letter" function to keep track of this, and for years sorting an entirely new list should be used with years and not letters.

[SortName] works if we use it to get text directly but can't get in through game info.

Yes, [SortName] from what I get from the tutorials should give the field that is used to sort the list, like the "sort_by" attribute in the list. I don't know why it is in the magic token :D What I meant was [SortValue] (OrderValue is a typo) which again is not through game_info

FrizzleFried

  • Sr. Member
  • ****
  • Posts: 187
    • View Profile
    • Idaho Garagecade
Re: advanced progres bar
« Reply #23 on: April 15, 2019, 08:22:49 AM »
Here is the code I pilfered from MarkC74's "The Invaders" theme... modified a bit...

Code: [Select]
// Progress Bar

if ( my_config["progress"] == "On" )
{
fe.add_image( "images/bar_h.png", flx*0.30, fly*0.595, flw*0.40, flh*0.070 );
local list_inc = fly*0.393 / (fe.list.size-1);
local current_pos = flx*0.100 + (fe.list.index * list_inc);
local list_pos_image = fe.add_image( "images/circle.png", current_pos, fly*0.603, flw*0.032, flh*0.055 );
local list_label = fe.add_text( "[Title]",current_pos, fly*0.595, flw*0.0375, flh*0.060);
list_label.font="captain"
colors( list_label, my_config["list_color"], 0 );

function progress_bar( ttype, var, ttime )
{
current_pos = flx*0.358 + (fe.list.index*list_inc);
list_pos_image.x = current_pos+2;
list_label.x = current_pos;
return false;
}
fe.add_transition_callback( "progress_bar" );
}

Here is the result...

https://youtu.be/xR1Mh8IGQKo


Not a great demo... but the slider at the bottom does work (there are over 1000 roms so it doesn't move much in the demo)...
Visit my arcade blog ... www.idahogaragecade.com (updated 04-05-19)

zpaolo11x

  • Sr. Member
  • ****
  • Posts: 357
    • View Profile
    • My deviantart page
Re: advanced progres bar
« Reply #24 on: April 15, 2019, 10:06:52 AM »
Playing with my own code...

jedione

  • Hero Member
  • *****
  • Posts: 631
  • punktoe
    • View Profile
Re: advanced progres bar
« Reply #25 on: April 15, 2019, 11:21:57 AM »
somthing going to give,,,,,nice work

here is code for my theme and results...

Code: [Select]
###################################################################################################
# progress bar
local back = fe.add_image( "artwork/white.png", flx*0.180, fly*0.992, flw*0.620, flh*0.003 );
back.set_rgb (255,255,255);

back.alpha = 40;

local front = fe.add_image( "artwork/white.png", flx*0.180, fly*0.992, flw*0.620, flh*0.002 );
front.set_rgb (0,255,0);

front.alpha = 200;

fe.add_transition_callback( this, "on_transition" )

function on_transition( ttype, var, ttime ) {
    front.width = (back.width)/(fe.list.size) * (fe.list.index+1)
}

local list_inc = fly*0.965 / (fe.list.size-1);
local current_pos = flx*0.100 + (fe.list.index * list_inc);
local   list_pos_image = fe.add_image( "", current_pos, fly*0.968, flw*0.010, flh*0.021);
local list_label = fe.add_text( "[Title]",current_pos, fly*0.936, flw*0.0215, flh*0.050);
list_label.charsize = 36;
list_label.font="TRAJANUS"
list_label.set_rgb (0,255,0);

list_label.alpha = 190
//l.align = Align.Left;

function progress_bar( ttype, var, ttime ){
current_pos = flx*0.179 + (fe.list.index*list_inc);
list_pos_image.x = current_pos+2;
list_label.x = current_pos;
return false;
}
fe.add_transition_callback( "progress_bar" );

####################################################################################################

results....preview:  https://youtu.be/lg1gA9azSRs
help a friend....

jedione

  • Hero Member
  • *****
  • Posts: 631
  • punktoe
    • View Profile
Re: advanced progres bar
« Reply #26 on: April 17, 2019, 07:31:28 AM »
@t zpaolo11x

thank you just had time to use your code,,,,,it is bad ass ...thanks you

now i soon can release the aura4k like i have wanted to,  with this style bar... :)

help a friend....

zpaolo11x

  • Sr. Member
  • ****
  • Posts: 357
    • View Profile
    • My deviantart page
Re: advanced progres bar
« Reply #27 on: April 17, 2019, 07:55:27 AM »
thank you just had time to use your code,,,,,it is bad ass ...thanks you

That's great! In the meantime I'm coding my own flavors of progress bars inside my theme, but I think I'll post the update after Easter vacations :D