Graalians

Graalians (https://www.graalians.com/forums/index.php)
-   Creative Corner (https://www.graalians.com/forums/forumdisplay.php?f=17)
-   -   Script: Image Viewer (https://www.graalians.com/forums/showthread.php?t=5891)

Emera 04-27-2012 12:12 PM

Script: Image Viewer
 
1 Attachment(s)
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 (
imagestemp.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_listparams[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 = {
      
widthheight
    
};
    
screenwidth width 2;
    
screenheight 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;
      
5;
      
5;
      
hScrollBar vScrollBar "dynamic";
      
      new 
GuiTreeViewCtrl("Image_Viewer_List") {
        
profile GuiBlueTreeViewProfile;
        
width 170;
        
fitparentwidth true;
        
0;
      }
    }
    
    new 
GuiScrollCtrl("Image_Viewer_Picture_Scroll") {
      
profile GuiBlueScrollProfile;
      
width 500;
      
height 390;
      
190;
      
5;
      
hScrollBar vScrollBar "dynamic";
      
      new 
GuiShowImgCtrl("Image_Viewer_Picture") {
        
0;
      }
    }
    
    new 
GuiTextEditCtrl("Image_Viewer_Search") {
      
profile GuiBlueTextEditProfile;
      
width 150;
      
height 25;
      
5;
      
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;
      
160;
      
400;
      
text "Apply";
      
hint "<b>Apply the selected image to your character</b>";
    }
    
    new 
GuiButtonCtrl("Image_Viewer_Button2") {
      
profile GuiBlueButtonProfile;
      
width 75;
      
height 25;
      
160 width 5;
      
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 = {
      
widthheight
    
};
    
screenwidth width 2;
    
screenheight height 2;
    
canresize canmaximize canminimize canmove visible false;
    
bringtofront();
    
isexternal false;
    
text "GIV - Help Page";
    
    new 
GuiMLTextCtrl("Image_Help_Text") {
      
profile GuiBlueMLTextProfile;
      
width 140;
      
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 = {
      
widthheight
    
};
    
screenwidth width 2;
    
screenheight 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;
      
Image_Error_Window.width width 5;
      
60;
      
text "Close";
    }
    
    new 
GuiMLTextCtrl("Image_Error_Text") {
      
profile GuiBlueMLTextProfile;
      
width 240;
      
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 (
filesparams[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(codeKey) {
  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(featimg) {
  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;
    }
  }



Dylan 04-27-2012 12:20 PM

Nice!

Cigam 04-27-2012 12:26 PM

Excellent job Emera :)

Rok 04-27-2012 01:38 PM

AHH TOO MUCH CODE!!! *dies*

Emera 04-27-2012 02:03 PM

Quote:

Posted by Rok (Post 103222)
AHH TOO MUCH CODE!!! *dies*

That's nothing :P

Thanks guise.

Rok 04-27-2012 02:05 PM

Quote:

Posted by Emera (Post 103225)
That's nothing :P

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

Elusive 04-27-2012 04:25 PM

Nifty! Good job!

Tizzee 04-27-2012 04:45 PM

ooo cool!

Maxy 04-27-2012 05:11 PM

bit confused on how to use it

simple words? :)

PerfectDark 04-27-2012 05:24 PM

Quote:

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 :P (Someone was going to ask, I had a feeling)

Emera 04-27-2012 09:11 PM

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 (
imagestemp.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_listparams[1]);
    }
    break;
    
  case 
"getheightandwidth":
    
temp.imagewidth getimgwidth(params[1]);
    
temp.imageheight getimgheight(params[1]);
    
    
triggerclient("gui"name"setwidthandheight"temp.imagewidthtemp.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 = {
      
widthheight
    
};
    
screenwidth width 2;
    
screenheight 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;
      
5;
      
5;
      
hScrollBar vScrollBar "dynamic";
      
      new 
GuiTreeViewCtrl("Image_Viewer_List") {
        
profile GuiBlueTreeViewProfile;
        
width 170;
        
fitparentwidth true;
        
0;
        
sort();
        
sortmode 1;
      }
    }
    
    new 
GuiScrollCtrl("Image_Viewer_Picture_Scroll") {
      
profile GuiBlueScrollProfile;
      
width 500;
      
height 390;
      
190;
      
5;
      
hScrollBar vScrollBar "dynamic";
      
      new 
GuiShowImgCtrl("Image_Viewer_Picture") {
        
0;
      }
    }
    
    new 
GuiTextEditCtrl("Image_Viewer_Search") {
      
profile GuiBlueTextEditProfile;
      
width 150;
      
height 25;
      
5;
      
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;
      
160;
      
400;
      
text "Apply";
      
hint "<b>Apply the selected image to your character</b>";
    }
    
    new 
GuiButtonCtrl("Image_Viewer_Button2") {
      
profile GuiBlueButtonProfile;
      
width 75;
      
height 25;
      
160 width 5;
      
400;
      
text "Help";
      
hint "<b>Open the help window.</b>";
    }
    
    new 
GuiTextCtrl("Image_Viewer_StatusText") {
      
profile GuiBlueTextProfile;
      
width 250;
      
320;
      
402;
      
text "Status: None";
    }
  }
  
  
//HELP WINDOW
  
new GuiWindowCtrl("Image_Help_Window") {
    
profile GuiBlueWindowProfile;
    
width 250;
    
height 260;
    
clientrelative true;
    
clientextent = {
      
widthheight
    
};
    
screenwidth width 2;
    
screenheight height 2;
    
canresize canmaximize canminimize canmove visible false;
    
bringtofront();
    
isexternal true;
    
text "GIV - Help Page";
    
    new 
GuiMLTextCtrl("Image_Help_Text") {
      
profile GuiBlueMLTextProfile;
      
width 240;
      
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 = {
      
widthheight
    
};
    
screenwidth width 2;
    
screenheight 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;
      
Image_Error_Window.width width 5;
      
60;
      
text "Close";
    }
    
    new 
GuiMLTextCtrl("Image_Error_Text") {
      
profile GuiBlueMLTextProfile;
      
width 240;
      
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 (
filesparams[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(imgoimagewidthimageheight);
}

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

function 
onKeyPressed(codeKey) {
  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(featimg) {
  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(iwh) {
  
with(Image_Viewer_Picture) {
    
width w;
    
height h;
    
image i;
  }



Higbey 04-27-2012 10:14 PM

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?

callimuc 04-27-2012 10:55 PM

Quote:

Posted by Higbey (Post 103399)
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

Emera 04-27-2012 11:45 PM

Quote:

Posted by Higbey (Post 103399)
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?

MrSimons 04-27-2012 11:56 PM

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


All times are GMT. The time now is 02:59 AM.

Powered by vBulletin/Copyright ©2000 - 2026, vBulletin Solutions Inc.