I posted my first version of this on the official Graal Forums, but grew tired of bashed about. Since I find this to be a much more friendly community, I'll be posting things here from now on.

This is a GUI Image Viewer. It can view any image files that have been uploaded to your server. All you have to do is type in the folder name (relative to levels/*) in the bottom left hand corner of the GUI window, and if it finds image files in that folder, it will list them in the left pane. Clicking on the images listed will show them in the right pane. Larger images that are bigger than the right pane can also be viewed since the right pane is scrollable making it easier to view images like tiles.

If you navigate to heads, bodies or hats, you can set your characters head, body or hat image by selecting an image and hitting the apply button to the right of the search bar.

If you have any questions or would like to suggest something to be added to this or a lazy clump of code fixed, post a message here and I'll get right to it. Images of the GUI have been attached.

PHP Code:

function onCreated() {
  this.allowedfiles = {
    ".png", ".gif", ".bmp", ".jpeg", ".jpg", ".apng", ".mng"
  };
}

function onActionServerSide() {
  switch (params[0]) {
  case "getfolder":
    temp.folder.loadFolder("levels/" @ params[1] @ "/*", false);
    
    if (temp.folder == NULL) {
      triggerclient("gui", name, "error");
    } else {
      for (images: temp.folder) {
        temp.filebase = extractfilebase(images);
        temp.imagesuffix = images.substring(temp.filebase.length());
        
        if (imagesuffix in this.allowedfiles) {
          temp.image_list.add(images);
        }
      }
      
      waitfor(temp.image_list.add, "", 1);
      triggerclient("gui", name, "addfiles", temp.image_list, params[1]);
    }
    break;
    
  case "setfeat":
    {
      switch (params[1]) {
      case "body":
        {
          player.body = params[2];
          break;
        }
      case "head":
        {
          player.head = params[2];
          break;
        }
      }
    }
  }
}

//#CLIENTSIDE

function onCreated() {
  DrawGUI();
}

function DrawGUI() {

  //MAIN GUI
  new GuiWindowCtrl("Image_Viewer_Window") {
    profile = GuiBlueWindowProfile;
    width = 700;
    height = 430;
    clientrelative = true;
    clientextent = {
      width, height
    };
    x = screenwidth / 2 - width / 2;
    y = screenheight / 2 - height / 2;
    canresize = canmaximize = visible = false;
    isexternal = false;
    text = "GUI Image Viewer [Version: 2.1.0] By: Emera";
    
    new GuiScrollCtrl("Image_Viewer_Window_Scroll") {
      profile = GuiBlueScrollProfile;
      width = 180;
      height = 390;
      x = 5;
      y = 5;
      hScrollBar = vScrollBar = "dynamic";
      
      new GuiTreeViewCtrl("Image_Viewer_List") {
        profile = GuiBlueTreeViewProfile;
        width = 170;
        fitparentwidth = true;
        x = y = 0;
      }
    }
    
    new GuiScrollCtrl("Image_Viewer_Picture_Scroll") {
      profile = GuiBlueScrollProfile;
      width = 500;
      height = 390;
      x = 190;
      y = 5;
      hScrollBar = vScrollBar = "dynamic";
      
      new GuiShowImgCtrl("Image_Viewer_Picture") {
        x = y = 0;
      }
    }
    
    new GuiTextEditCtrl("Image_Viewer_Search") {
      profile = GuiBlueTextEditProfile;
      width = 150;
      height = 25;
      x = 5;
      y = 400;
      hint = "<b>Help:</b> Enter a filename that contains the images you wish to view. It must be relative to levels/*";
    }
    
    new GuiButtonCtrl("Image_Viewer_Button1") {
      profile = GuiBlueButtonProfile;
      width = 75;
      height = 25;
      x = 160;
      y = 400;
      text = "Apply";
      hint = "<b>Apply the selected image to your character</b>";
    }
    
    new GuiButtonCtrl("Image_Viewer_Button2") {
      profile = GuiBlueButtonProfile;
      width = 75;
      height = 25;
      x = 160 + width + 5;
      y = 400;
      text = "Help";
      hint = "<b>Open the help window.</b>";
    }
  }
  
  //HELP WINDOW
  new GuiWindowCtrl("Image_Help_Window") {
    profile = GuiBlueWindowProfile;
    width = 150;
    height = 250;
    clientrelative = true;
    clientextent = {
      width, height
    };
    x = screenwidth / 2 - width / 2;
    y = screenheight / 2 - height / 2;
    canresize = canmaximize = canminimize = canmove = visible = false;
    bringtofront();
    isexternal = false;
    text = "GIV - Help Page";
    
    new GuiMLTextCtrl("Image_Help_Text") {
      profile = GuiBlueMLTextProfile;
      width = 140;
      x = y = 5;
      active = false;
      text = "To open a folder, type the folder name into the bottom left search bar. If the image contains a file with an image extension (for example, .PNG), then those files will be listed. If an image doesn't load the first time you click it, that means the image hasn't been downloaded before. Simply click that file again and it will load.";
    }
  }
  
  //ERROR WINDOW
  new GuiWindowCtrl("Image_Error_Window") {
    profile = GuiBlueWindowProfile;
    width = 250;
    height = 90;
    clientrelative = true;
    clientextent = {
      width, height
    };
    x = screenwidth / 2 - width / 2;
    y = screenheight / 2 - height / 2;
    isexternal = false;
    canresize = visible = canclose = canminimize = canmaximize = canmove = false;
    text = "Error (Non-existant / empty folder)";
    
    new GuiButtonCtrl("Image_Error_Button1") {
      profile = GuiBlueButtonProfile;
      width = 100;
      height = 25;
      x = Image_Error_Window.width / 2 - width / 2 - 5;
      y = 60;
      text = "Close";
    }
    
    new GuiMLTextCtrl("Image_Error_Text") {
      profile = GuiBlueMLTextProfile;
      width = 240;
      x = y = 5;
      text = "<center><b>This folder does not exist, or does not contain any image files. Please try and list another folder.";
    }
  }
}

function Image_Viewer_Search.onAction() {
  if (Image_Viewer_Search.text.starts("levels/")) {
    return;
  } else {
    this.imagePath = Image_Viewer_Search.text;
    FetchImageList(Image_Viewer_Search.text);
  }
  Image_Viewer_Search.text = "";
}

function FetchImageList(folder) {
  Image_Viewer_List.clearnodes();
  triggerserver("gui", name, "getfolder", folder);
}

function onActionClientside() {
  if (params[0] == "addfiles") {
    
    for (files: params[1]) {
      Image_Viewer_List.addnode(files);
    }
    Image_Viewer_List.makefirstresponder(true);
    
    if (Image_Viewer_List.nodes.size() == NULL) {
      Image_Error_Window.visible = true;
      Image_Error_Window.makefirstresponder(true);
      Image_Error_Window.bringtofront();
      Image_Viewer_Window.active = false;
    }
  }
}

function Image_Viewer_Button1.onAction() {
  switch (this.imagePath) {
  case "hats":
    {
      temp.img = Image_Viewer_List.getselectednode();
      setPlayerAtt("hat", temp.img);
      break;
    }
  case "bodies":
    {
      temp.img = Image_Viewer_List.getselectednode();
      setPlayerAtt("body", temp.img);
      break;
    }
  case "heads":
    {
      temp.img = Image_Viewer_List.getselectednode();
      setPlayerAtt("head", temp.img);
      break;
    }
  }
}

function Image_Viewer_List.onSelect() {
  temp.imgo = Image_Viewer_List.getselectednode();
  temp.imagewidth = getimgwidth(imgo);
  temp.imageheight = getimgheight(imgo);
  
  with(Image_Viewer_Picture) {
    width = imagewidth;
    height = imageheight;
    image = imgo;
  }
}

function Image_Viewer_Button2.onAction() {
  Image_Help_Window.visible = !Image_Help_Window.visible;
  
  if (Image_Help_Window.visible) {
    Image_Help_Window.bringtofront();
  }
}

function onKeyPressed(code, Key) {
  if (Key == "v") {
    Image_Viewer_Window.visible = !Image_Viewer_Window.visible;
  }
}

function Image_Error_Button1.onAction() {
  Image_Error_Window.visible = false;
  Image_Viewer_Window.active = true;
}

function setPlayerAtt(feat, img) {
  switch (feat) {
  case "hat":
    {
      player.attr[1] = img;
      break;
    }
  case "head":
    {
      triggerserver("gui", name, "setfeat", "head", img);
      break;
    }
  case "body":
    {
      triggerserver("gui", name, "setfeat", "body", img);
      break;
    }
  }
} 


 

Nice!  

Excellent job Emera  

AHH TOO MUCH CODE!!! *dies*  

Posted by Rok

AHH TOO MUCH CODE!!! *dies*

That's nothing

Thanks guise.  

Posted by Emera

That's nothing

Haha I know. I just don't look at code anymore. It frustrates me.  

Nifty! Good job!  

ooo cool!  

bit confused on how to use it

simple words?  

Posted by Emera

This is a GUI Image Viewer. It can view any image files that have been uploaded to your server.

This script lets you look at images that you installed on your server, and lets you set the image if it is a hat, body, head, shield, or sword. You can set it via the Menu. Oh and no, this cannot be used by players on the iphone server (Someone was going to ask, I had a feeling)  

Update

• Windows are now external.
• Added a function for viewing the files.
• Status messages are shown with a text control to the bottom right of the window.

Bugs that have arisen.

• TreeViewCtrl is acting strangely (for me) since I am trying to load a hats folder with more than 1000 files inside it. It takes a while to set the hat. If you also experience this bug, please post here so I know it's not just me!

I'll work on cleaning this up later today if I feel like it.

PHP Code:

function onCreated() {
  this.allowedfiles = {
    ".png", ".gif", ".bmp", ".jpeg", ".jpg", ".apng", ".mng"
  };
}

function onActionServerSide() {
  switch (params[0]) {
  case "getfolder":
    temp.folder.loadFolder("levels/" @ params[1] @ "/*", false);
    
    if (temp.folder == NULL) {
      triggerclient("gui", name, "error");
    } else {
      for (images: temp.folder) {
        temp.filebase = extractfilebase(images);
        temp.imagesuffix = images.substring(temp.filebase.length());
        
        if (imagesuffix in this.allowedfiles) {
          temp.image_list.add(images);
        }
      }
      
      waitfor(temp.image_list.add, "", 1);
      triggerclient("gui", name, "addfiles", temp.image_list, params[1]);
    }
    break;
    
  case "getheightandwidth":
    temp.imagewidth = getimgwidth(params[1]);
    temp.imageheight = getimgheight(params[1]);
    
    triggerclient("gui", name, "setwidthandheight", temp.imagewidth, temp.imageheight);
    break;
    
  case "setfeat":
    {
      switch (params[1]) {
      case "body":
        {
          player.body = params[2];
          break;
        }
      case "head":
        {
          player.head = params[2];
          break;
        }
      }
    }
  }
}

//#CLIENTSIDE

function onCreated() {
  DrawGUI();
}

function DrawGUI() {
  //MAIN GUI
  new GuiWindowCtrl("Image_Viewer_Window") {
    profile = GuiBlueWindowProfile;
    width = 700;
    height = 430;
    clientrelative = true;
    clientextent = {
      width, height
    };
    x = screenwidth / 2 - width / 2;
    y = screenheight / 2 - height / 2;
    canresize = canmaximize = visible = false;
    isexternal = true;
    text = "GUI Image Viewer [Version: 2.1.0] By: Emera";
    
    new GuiScrollCtrl("Image_Viewer_Window_Scroll") {
      profile = GuiBlueScrollProfile;
      width = 180;
      height = 390;
      x = 5;
      y = 5;
      hScrollBar = vScrollBar = "dynamic";
      
      new GuiTreeViewCtrl("Image_Viewer_List") {
        profile = GuiBlueTreeViewProfile;
        width = 170;
        fitparentwidth = true;
        x = y = 0;
        sort();
        sortmode = 1;
      }
    }
    
    new GuiScrollCtrl("Image_Viewer_Picture_Scroll") {
      profile = GuiBlueScrollProfile;
      width = 500;
      height = 390;
      x = 190;
      y = 5;
      hScrollBar = vScrollBar = "dynamic";
      
      new GuiShowImgCtrl("Image_Viewer_Picture") {
        x = y = 0;
      }
    }
    
    new GuiTextEditCtrl("Image_Viewer_Search") {
      profile = GuiBlueTextEditProfile;
      width = 150;
      height = 25;
      x = 5;
      y = 400;
      hint = "<b>Help:</b> Enter a filename that contains the images you wish to view. It must be relative to levels/*";
    }
    
    new GuiButtonCtrl("Image_Viewer_Button1") {
      profile = GuiBlueButtonProfile;
      width = 75;
      height = 25;
      x = 160;
      y = 400;
      text = "Apply";
      hint = "<b>Apply the selected image to your character</b>";
    }
    
    new GuiButtonCtrl("Image_Viewer_Button2") {
      profile = GuiBlueButtonProfile;
      width = 75;
      height = 25;
      x = 160 + width + 5;
      y = 400;
      text = "Help";
      hint = "<b>Open the help window.</b>";
    }
    
    new GuiTextCtrl("Image_Viewer_StatusText") {
      profile = GuiBlueTextProfile;
      width = 250;
      x = 320;
      y = 402;
      text = "Status: None";
    }
  }
  
  //HELP WINDOW
  new GuiWindowCtrl("Image_Help_Window") {
    profile = GuiBlueWindowProfile;
    width = 250;
    height = 260;
    clientrelative = true;
    clientextent = {
      width, height
    };
    x = screenwidth / 2 - width / 2;
    y = screenheight / 2 - height / 2;
    canresize = canmaximize = canminimize = canmove = visible = false;
    bringtofront();
    isexternal = true;
    text = "GIV - Help Page";
    
    new GuiMLTextCtrl("Image_Help_Text") {
      profile = GuiBlueMLTextProfile;
      width = 240;
      x = y = 5;
      active = false;
      text = "To open a folder, type the folder name into the bottom left search bar. If the image contains a file with an image extension (for example, .PNG), then those files will be listed. If an image doesn't load the first time you click it, that means the image hasn't been downloaded before. Simply click that file again and it will load. When downloading a file, if the image fails to show and you are notified in the bottom right of the window with a download file message, this means that the image hasn't been downlaoded yet. Simple click the entry again to show the image!";
    }
  }
  
  //ERROR WINDOW
  new GuiWindowCtrl("Image_Error_Window") {
    profile = GuiBlueWindowProfile;
    width = 250;
    height = 90;
    clientrelative = true;
    clientextent = {
      width, height
    };
    x = screenwidth / 2 - width / 2;
    y = screenheight / 2 - height / 2;
    isexternal = true;
    canresize = visible = canclose = canminimize = canmaximize = canmove = false;
    text = "Error (Non-existant / empty folder)";
    
    new GuiButtonCtrl("Image_Error_Button1") {
      profile = GuiBlueButtonProfile;
      width = 100;
      height = 25;
      x = Image_Error_Window.width / 2 - width / 2 - 5;
      y = 60;
      text = "Close";
    }
    
    new GuiMLTextCtrl("Image_Error_Text") {
      profile = GuiBlueMLTextProfile;
      width = 240;
      x = y = 5;
      text = "<center><b>This folder does not exist, or does not contain any image files. Please try and list another folder.";
    }
  }
}

function Image_Viewer_Search.onAction() {
  if (Image_Viewer_Search.text.starts("levels/")) {
    return;
  } else {
    this.imagePath = Image_Viewer_Search.text;
    FetchImageList(Image_Viewer_Search.text);
  }
  Image_Viewer_Search.text = "";
}

function FetchImageList(folder) {
  Image_Viewer_List.clearnodes();
  triggerserver("gui", name, "getfolder", folder);
}

function onActionClientside() {
  if (params[0] == "addfiles") {
    
    for (files: params[1]) {
      Image_Viewer_List.addnode(files);
    }
    Image_Viewer_List.makefirstresponder(true);
    Image_Viewer_List.sort();
    
    if (Image_Viewer_List.nodes.size() == NULL) {
      Image_Error_Window.visible = true;
      Image_Error_Window.makefirstresponder(true);
      Image_Error_Window.bringtofront();
      Image_Viewer_Window.active = false;
    }
  }
}

function Image_Viewer_Button1.onAction() {
  switch (this.imagePath) {
  case "hats":
    {
      temp.img = Image_Viewer_List.getselectednode();
      setPlayerAtt("hat", temp.img);
      break;
    }
  case "bodies":
    {
      temp.img = Image_Viewer_List.getselectednode();
      setPlayerAtt("body", temp.img);
      break;
    }
  case "heads":
    {
      temp.img = Image_Viewer_List.getselectednode();
      setPlayerAtt("head", temp.img);
      break;
    }
  }
}

function Image_Viewer_List.onSelect() {
  temp.imgo = Image_Viewer_List.getselectednode();
  temp.imagewidth = getimgwidth(imgo);
  temp.imageheight = getimgheight(imgo);
  
  if (isdownloading(imgo)) {
    Image_Viewer_StatusText.text = "Downloading" SPC imgo;
  }
  
  ShowFile(imgo, imagewidth, imageheight);
}

function Image_Viewer_Button2.onAction() {
  Image_Help_Window.visible = !Image_Help_Window.visible;
  
  if (Image_Help_Window.visible) {
    Image_Help_Window.bringtofront();
  }
}

function onKeyPressed(code, Key) {
  if (Key == "v") {
    Image_Viewer_Window.visible = !Image_Viewer_Window.visible;
  }
}

function Image_Error_Button1.onAction() {
  Image_Error_Window.visible = false;
  Image_Viewer_Window.active = true;
}

function setPlayerAtt(feat, img) {
  switch (feat) {
  case "hat":
    {
      player.attr[1] = img;
      break;
    }
  case "head":
    {
      triggerserver("gui", name, "setfeat", "head", img);
      break;
    }
  case "body":
    {
      triggerserver("gui", name, "setfeat", "body", img);
      break;
    }
  }
}

function ShowFile(i, w, h) {
  with(Image_Viewer_Picture) {
    width = w;
    height = h;
    image = i;
  }
} 


 

hmmm, would it be possible to make a version that can show images, that you can zoom in on, that would work on iphone? or would that be a different type of coding? sort like the map on era, but with a image , you can pan and scroll in, would that be possible?  

Posted by Higbey

hmmm, would it be possible to make a version that can show images, that you can zoom in on, that would work on iphone? or would that be a different type of coding? sort like the map on era, but with a image , you can pan and scroll in, would that be possible?

Yes it would be  

Posted by Higbey

hmmm, would it be possible to make a version that can show images, that you can zoom in on, that would work on iphone? or would that be a different type of coding? sort like the map on era, but with a image , you can pan and scroll in, would that be possible?

Yes, but why would an iPhone server give players access to an image viewer?  

I don't necessarily understand what it is but it looks like it will help someone...