Print
Category: Tips and Tricks
Hits: 350

QooL GameQ Monitor V3 is a query server status customizable. in order to get the status It uses latest PHP GameQ class. To be honest it can query not only quake 3 server but a long list of server how documentated in the Austin Bischoff Github.

Monitor alsi uses PHP,  Pure Javascript, HTML and CSS using Visual Studio Code as editor.

It is customizable, not full responsive but enoght on different screesize.

  

MAIN FEATURES

- Custom Servers List

- Connect to Quake 3

- Auto Refresh (see settigns)

- Skins

- Custom CSS or URL

- Different Boxes size 

- Search (Server, Player, Map 3)

Other features

- Image Zoom

- ESC Key

 



 

CUSTOM SERVERS LIST

In order to use your favorite custom servers list, QooL Monitor offers there are 3 ways:

  1. Write a comma separated list in the textarea
  2. Type an url to a remote file that contains the comma separated list
  3. Use a url to a remote file as argument in the url
1# Comma Separated List

If you never customize the list, you will not see the default list of server...you can click on Load QooL Fav button to load an example. You can edit the list removing, adding, sorting. You can click on preview to show the new list before save or save to confirm.
Server type can be quake3 or quakelive. the list is a simple comma separated:

Description, Type, Server Address. Port

- EXAMPLE
QooL7,quake3,quakearea.com,27960
Starfish FFA,quakelive,213.136.94.235,27960

2# URL to a remote file in the textarea

Other way is to create a text file with inside the list and put it accessible via http or https (store in a webserver or share it wth your cloud). Put the url file in the textarea instead of the list some examples:

3# Argument Link in the URL

You can leave the list of server in the text area and use your file as argument in the url
Examples

 



 

CONNECT TO THE SERVER

If you configure your pc as explained here, you will be able to click on the "Play Icon" and connect to the server quake 3.

Others games are not tested/supported.

QooL Monitor will use a custom URI Scheme, something like the well-known http:// ... or ftp://. In my case I created qool:// so to connect to the server qool7.quakearea.com, QooL Monitor will create in the "Play Icon" the link qool://qool7.quakearea.com

In order to create the URI SCHEME PROTOCOL in your PC you can run my QooLRun.exe,  maybe as administrator:

- Type "qool" in the URI Scheme field 

- Click on "Create URI Scheme"

QooLRun is my own vb net application created ad hoc for this scope.

QooLRun.exe has 2 main features:

  1. Initial setup (create the URI scheme protocol and set the quake3 client to run)
    QooL Run make easy the registration of a new URI Scheme.
  2. It will be the "bridge" between the monitor webpage and your quake3 client.
    When the uri scheme like qool://serveraddress:port is invoked, QooLRun.exe will be launched from windows and it will run the specified Quake3 client.


QooLRun will write in the Windows Registry something like this:

Windows Registry Editor Version 5.00

[HKEY_CLASSES_ROOT\qool]
@="URL:qool Protocol"
"URL Protocol"=""

[HKEY_CLASSES_ROOT\qool\DefaultIcon]
@="C:\\tools\\QooLRun\\QooLRun.exe"

[HKEY_CLASSES_ROOT\qool\shell]

[HKEY_CLASSES_ROOT\qool\shell\open]

[HKEY_CLASSES_ROOT\qool\shell\open\command]
@="\"C:\\tools\\QooLRun\\QooLRun.exe\"  \"%1\" \"%2\" \"%3\" \"%4\" \"%5\" \"%6\" \"%7\" \"%8\" \"%9\" "

 

 

 



 

SKINS

Not sure if the right name is skin but it looks so. Some colors skins are ready to use. Just open the settings and choice one. Not always the resul is full visible, so a refresh page is suggest.

The skin is also selectable using the url argument s=skinname. The below link will open the monitor with the red skin.

https://www.quakearea.com/mon/#s=red 

https://www.quakearea.com/mon/#s=white

 

 



 

CUSTOM CSS OR URL

In the settings there is a textare where you can add your custom css or a link to an external file css.

For example you could use a skin and change the background. the below example will set the background.

/*  Quake3 skin - background collections */
    .background {
        background-color: #000000;
        background-image: url(https://www.quakearea.com/site/templates/protostar/images/q3_bg_skin.png),radial-gradient(#ba0e19, #1c0202);
        background-image: url(https://www.quakearea.com/site/templates/protostar/images/q3_bg_skin.png),radial-gradient(#cac9c9, #000000);
        background-image: url(https://www.quakearea.com/site/templates/protostar/images/q3_bg_skin.png),linear-gradient(to right bottom, #43b581, #00b3a2, #00afc0, #00a7d7, #009ce1, #3d8ed1, #5280c0, #5e72ae, #51618e, #455170, #3a4152, #2f3136);
    background-image: url(https://www.quakearea.com/site/templates/protostar/images/q3_bg_skin.png),linear-gradient(to top, #43b581, #00b3a2, #00afc0, #00a7d7, #009ce1, #3d8ed1, #5280c0, #5e72ae, #51618e, #455170, #3a4152, #2f3136);
}

You can also use a link to a css file stored in your cloud or website but not both, I mean you can use css or link and NOT css and link.

Try to copy and paste the following url in the "Custom CSS or URL" field

https://www.quakearea.com/mon/css/skins/style-debug.css

 



 

CUSTOM CSS EXAMPLES

 

Example 01
/* EXAMPLE 1# - Small Boxes */
#myListSearch {
min-height: calc(100% - 184px);
}
#serversStatus.boxes>div {
width: calc(15% - 56px);
}
#serversStatus.boxes>div:not(.emptyBox) {
margin-top: 40px;
margin-bottom: 0px;
}
#serversStatus.boxes>div,
.footer>.boxes>div {
font-size: 90%;
font-weight: 200;
}

  

Example 02
/* EXAMPLE 2# Dirty Background */
.background {
background-image:url(https://www.byman.it/downloads/Netshare/Images/Textures/dirt-png-43617.png), 
linear-gradient(to right bottom, #9b5d03, #6c5600, #454a06, #263b11, #112a15, #0f2410, #0e1f08, #091a00, #1b1c00, #2d1c00, #411600, #550202);
}

 

Eample03
/* EXAMPLE 3# Shtayga Background */
.background {
 background-image: url(https://4.bp.blogspot.com/-Cii7JS0ZT9M/W8NisiKMUrI/AAAAAAAABdY/B_r9iV7WCLMkBNa6Wyj8tG3_MBFFjgZHQCK4BGAYYCw/w1600/idee3.jpg);
 background-size: cover;
 background-attachment: fixed;
}

 

Example 04
/* EXAMPLE 4# Fire background + gradient color red */
/* You should try removing filter and transform */
/* https://mycolor.space/gradient3?ori=to+bottom&hex=%231A0000&hex2=%23370000&hex3=%23622600&submit=submit */
.background {
    background-color: #5d0401;
    background-image:url(../../images/bg_fire.png),url(../../images/bg_fire.png), linear-gradient(to bottom, #1a0000, #200100, #260200, #2b0200, #300200, #360402, #3d0503, #430603, #4b0d04, #531503, #5b1e02, #622600);
    filter: blur(6px);
    transform: scale(1.1);
}

 



 

OTHER FEATURES

 

Image Zoom

Clicking on the image to frame will be scale of 1.3, To unzoom just click again in the the image zoomed or press the ESC key.

 

ESC Key

You can use ESC key to close the settings panel, the side menu panel, to unzoom, to reset the search. It use an history and go back 1 action at time.

 



 

SCREENSHOTS

 

GENERAL


Images : 8
Folder : /site/images/lightbox/QooL_Monitor

 

SKIN

  


Images : 16
Folder : /site/images/lightbox/QooL_Monitor/Skin

 

CUSTMCSS

  


Images : 5
Folder : /site/images/lightbox/QooL_Monitor/CustomCSS

 

BOXES SIZE

  


Images : 8
Folder : /site/images/lightbox/QooL_Monitor/BoxesSize

 

  

- have fun - 

 


Simple Disqus Comments