Search Unity

  1. Unity support for visionOS is now available. Learn more in our blog post.
    Dismiss Notice

Gallery function

Discussion in 'Immediate Mode GUI (IMGUI)' started by alexander, Apr 17, 2008.

  1. alexander

    alexander

    Joined:
    Mar 28, 2008
    Posts:
    180
    Hi,

    I just want to create a gallery.
    I've got a folder with about 15 pics and when I'm clicking in my menu on the gallery-button, I would be gladly to see the pics - perhaps 3-4 a row - minimzed to e.g. 200-160 (original up to 1440x900).

    Haven't found anything like this in the forum, script archive or the tutorials.

    Has anyone an idea or a similar project?

    Thanks
    Alexander
     
  2. TJB

    TJB

    Joined:
    Mar 20, 2007
    Posts:
    146
    Here's a script that should do what you're looking for:

    Code (csharp):
    1. var imagesize = 100;
    2. private var vscroll = 0.0;
    3. private var maxscroll = 0.0;
    4. var gallery : Texture[];
    5. private var picture : Texture;
    6. private var maxpic = false;
    7.  
    8. function OnGUI () {
    9.     if (maxpic == false) {
    10.         var xpos = 10;
    11.         var ypos = 10;
    12.         ypos -= vscroll;
    13.         for (var element in gallery) {
    14.             if (GUI.Button(Rect(xpos,ypos,imagesize,imagesize),element)) {
    15.                 maxpic = true;
    16.                 picture = element;
    17.             }
    18.            
    19.             if (xpos+(2*imagesize)+40 < Screen.width) xpos += imagesize+10;
    20.             else {
    21.                 xpos = 10;
    22.                 ypos += imagesize+10;
    23.             }
    24.         }
    25.        
    26.         if(ypos+vscroll+10+imagesize > Screen.height) maxscroll = ypos+vscroll-Screen.height+10+imagesize;
    27.         else maxscroll = 0;
    28.        
    29.         vscroll = GUI. VerticalScrollbar (Rect (Screen.width - 30, 10, 100, Screen.height-200), vscroll, maxscroll/5, 0.0, maxscroll+(maxscroll/5));
    30.         imagesize = GUI.VerticalSlider (Rect (Screen.width - 28, Screen.height-180, 100, 170), imagesize, 200, 50);
    31.     }
    32.    
    33.     else { 
    34.         GUI.Label(Rect((Screen.width-Screen.height)/2,0,Screen.height,Screen.height),picture);
    35.         if (GUI.Button(Rect(10,Screen.height-40,70,30),"Back")) maxpic = false;
    36.     }
    37. }
    It shows you a gallery, lets you resize the previews and you click on a picture to maximize it. Just drop the pictures in the gallery array.

    Note: The pictures will only display as large as their resolution.
     
  3. bigkahuna

    bigkahuna

    Joined:
    Apr 30, 2006
    Posts:
    5,434
    That's a very nice script!
     
  4. alexander

    alexander

    Joined:
    Mar 28, 2008
    Posts:
    180
    Thank you TJB
    I haven't got the time today, but sounds very good.
    I will tell you if it's working as I want it.

    :)

    have a nice weekend
     
  5. TJB

    TJB

    Joined:
    Mar 20, 2007
    Posts:
    146
    Decided to add a new function. Now you can simply drop all your pictures in a folder on the web and they will load from there. Just do this:
    -Rename your pics to be sequential eg) pic1.jpg, pic2.jpg
    -Enable the boolean uploadpicsfromsite.
    -Type the address of the folder the pics are in in galleryurl
    -Type the tag in front of your pictures number into maintag
    -Type the extension (with the dot) in picformat
    -Set the gallery array size to the maximum number of pictures you ever want to view

    Here's the new script:
    Code (csharp):
    1. var imagesize = 100;
    2. var maxsize = 200;
    3. var minsize = 50;
    4. private var vscroll = 0.0;
    5. private var maxscroll = 0.0;
    6. var gallery : Texture[];
    7. private var picture = 0;
    8. private var maxpic = false;
    9.  
    10. var uploadpicsfromsite = false;
    11. var galleryurl = "www.mypage.com/pics/";
    12. var maintag = "pic";
    13. var picformat = ".jpg";
    14.  
    15. function Start () {
    16.     if (uploadpicsfromsite) {
    17.         var picnum = 1;
    18.         var picnumstr = "";
    19.         for(var element in gallery) {
    20.             picnumstr = picnum.ToString();
    21.             var pic = new WWW (galleryurl+maintag+picnumstr+picformat);
    22.             yield(pic);
    23.             element = pic.texture;
    24.             picnum++;
    25.         }
    26.     }
    27. }  
    28.  
    29. function OnGUI () {
    30.     if (maxpic == false) {
    31.         var xpos = -imagesize;
    32.         var ypos = 10;
    33.         ypos -= vscroll;
    34.        
    35.         vscroll = GUI. VerticalScrollbar (Rect (Screen.width - 30, 10, 100, Screen.height-200), vscroll, maxscroll/5, 0.0, maxscroll+(maxscroll/5));
    36.         imagesize = GUI.VerticalSlider (Rect (Screen.width - 28, Screen.height-180, 15, 170), imagesize, maxsize, minsize);
    37.        
    38.         elemnum = 0;
    39.         for (var element in gallery) {
    40.             if (element.width > 10) {
    41.                 if (xpos+(2*imagesize)+40 < Screen.width) xpos += imagesize+10;
    42.                 else {
    43.                     xpos = 10;
    44.                     ypos += imagesize+10;
    45.                 }
    46.                 if (GUI.Button(Rect(xpos,ypos,imagesize,imagesize),element)) {
    47.                     maxpic = true;
    48.                     picture = elemnum;
    49.                 }
    50.                 elemnum++;
    51.             }
    52.         }
    53.  
    54.         if(ypos+vscroll+10+imagesize > Screen.height) maxscroll = ypos+vscroll-Screen.height+10+imagesize;
    55.         else maxscroll = 0;
    56.     }
    57.    
    58.     else { 
    59.         GUI.Box(Rect(0,0,Screen.width,Screen.height),gallery[picture]);
    60.         if (GUI.Button(Rect(10,Screen.height-40,70,30),"Back")) maxpic = false;
    61.         if (GUI.Button(Rect(90,Screen.height-40,40,30),"<")  picture>0) picture--;
    62.         if (GUI.Button(Rect(140,Screen.height-40,40,30),">")  gallery[picture+1].width>10) picture++;
    63.     }
    64. }
    There's a couple other tweaks. Let me know if you have any problems... haven't tried it outside of the editor yet.
     
  6. alexander

    alexander

    Joined:
    Mar 28, 2008
    Posts:
    180
    Nice Add-On.
    But my pics will be saved local at the hdd.

    But I will test this - sounds interesting for special live ticker-functions...

    thx again
     
  7. alexander

    alexander

    Joined:
    Mar 28, 2008
    Posts:
    180
    update:

    hi

    modified TJBs code to following:
    Code (csharp):
    1.  
    2.     var haupt : Texture = gallery[0];
    3.     Label(Rect(10, 7, 820, 625), haupt);
    4.  
    5.     if (maxpic == false) {
    6.         var iImageCount = gallery.length;
    7.  
    8.         scrollPosition = BeginScrollView (Rect (832, 10, 192, 620), scrollPosition, Rect (0, 0, 170, (imagesize*iImageCount + 10*(iImageCount+1) + 2)));
    9.  
    10.         Box (Rect (0,0,170,(imagesize*iImageCount + 10*(iImageCount+1))), "");     
    11.  
    12.  
    13.         var xpos = 170/2 - imagesize/2;
    14.         var ypos = 10;
    15.        
    16.  
    17.         for (var element in gallery) {
    18.             if (Button(Rect(xpos,ypos,imagesize,imagesize),element)) {
    19.                 print(element.name);
    20.  
    21.                
    22.                 //maxpic = true;
    23.                 //Label(Rect(10, 17, 820, 625), element);
    24.                 //haupt = gallery[1];
    25.                 //Label(Rect(0, 0, 820, 625), element);
    26.                 //haupt = picture;
    27.             }
    28.  
    29.             if (xpos) {
    30.                 xpos = 170/2 - imagesize/2;
    31.                 ypos += imagesize+10;
    32.             }
    33.         }
    34.         EndScrollView ();
    35.     }
    36.  
    37. }
    38.  
    These lines are only a little part of the the whole code. So ignore the brackets...

    When I'm clicking on a preview-button it should be shown, this element from the gallery-array in the "haupt"-label.
    For testing if it goes in the "if"-part, I'm printing the element's name of the preview-picture... and it comes in the console... But not the picture.
    The picture in the "haupt"-part is still standing on the first picture of the gallery-array, which I allocated in the first 2 lines.

    I've commented my trys out.
    I also tried to retrieve per extern functions.


    SendMassage("bla",element)

    function bla(haupt:Texture){
    print("blubb");
    and so on

    An all I get is "blubb"... :-(
    Somebody's got an idea?
     
  8. alexander

    alexander

    Joined:
    Mar 28, 2008
    Posts:
    180
    It works!!!

    With an awake() - function, where the first allocation stands.