HOW TO: Tech Tree preview in your browser

S

salaminizer

Colorado Internacional
Joined
Aug 12, 2006
Messages
221
Location
Porto Alegre, Brasil
Hello, once again I'm here with this weird XSLT stuff. As I mentioned in the other how to, I was looking into how to preview the tech tree without loading Civ4. Once again I began thinking the wrong way, I was going to use tables, but in the end I used CSS to position the images.

Objective: preview the tech tree in your browser (for some reason I don't know why, we will have to stick with IE7 to avoid Java)

What do I need? for the complete eye-candy, besides the CIV4TechInfos, you will need a PHP-enabled host. IE7 is needed if you don't want to generate an HTML from the XML (it's still faster than running Civ4, but the tutorial will cover the shorter task - in the end I'll teach how to use SAXON to generate the HTML and be able to view it in Firefox).

What do I need to know? This time, nothing if all you want is a preview of the tech tree. Because we all use the same iGridX and iGridY, you only need the files I'm giving you.

1. The image generator script

I'm using PHP to generate the images in real time, but you can use static images and use the tooltip to know the tech - PHP lets us see the tech key though.

Code: 
<?php
header("Content-type: image/png");
$im = @imagecreate(180, 60)
    or die("Cannot Initialize new GD image stream");
$background_color = imagecolorallocate($im, 180, 180, 255);
$text_color = imagecolorallocate($im, 0, 0, 0);
imagestring($im, 5, 5, 5,  $_GET["caption"], $text_color);
$b = imagesetthickness($im,1);
$b = imagerectangle($im, 0,0,179,59, $text_color);
imagepng($im);
imagedestroy($im);
?>

We pass the Tech description as a GET parameter.

2. The XSLT stylesheet

This one is quite simple (I named it viewtree.xsl)

Spoiler :
Code: 
<xsl:stylesheet 
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
    xmlns:xs="http://www.w3.org/2001/XMLSchema"
    xmlns:civ="x-schema:CIV4TechnologiesSchema.xml"
    version="1.0">

<xsl:output method="html" indent="yes"/>

<xsl:template match="/">
<html>
<head>
</head>
<body>
	<xsl:apply-templates />
</body>
</html>
</xsl:template> 

<xsl:template match="civ:TechInfos">
	<xsl:apply-templates>
		<!--<xsl:sort select="iCost" data-type="number"/>-->
	</xsl:apply-templates>
</xsl:template>

<xsl:template match="civ:TechInfo">
	<img>
	<xsl:attribute name="src"><xsl:text>techimage.php?caption=</xsl:text><xsl:value-of select="civ:Type"/></xsl:attribute>
	<xsl:attribute name="style">
	<xsl:text> left: </xsl:text>
	<xsl:value-of select="civ:iGridX * 180 + 75*civ:iGridX "/>
	<xsl:text>; position: absolute; top:</xsl:text>
	<xsl:value-of select="civ:iGridY * 30"/>	
	</xsl:attribute>
	<xsl:attribute name="title">
	<xsl:value-of select="civ:Type"/>
	<xsl:text> - iGridX: </xsl:text>
	<xsl:value-of select="civ:iGridX"/>
	<xsl:text> - iGridY: </xsl:text>
	<xsl:value-of select="civ:iGridY"/>
	</xsl:attribute>	
	</img>
</xsl:template>

</xsl:stylesheet>

Again we use the "civ:" prefix.
What's happening here: we apply the template to the TechInfo tag, which simply becomes an image with source from techimage.php?caption=TECH, a tooltip with iGridX and iGridY and positioned accordingly.

I tried to get the tech tree as similar as possible to the in-game one. The horizontal spacing seems alright, however, the vertical spacing is not that easy to reproduce. Anyway, it should give you a good idea of the spacing between the techs.

DON'T HAVE PHP? Replace the contents between xsl:attribute name="src" and the closing tag with <xsl:text>yourimage.jpg</xsl:text>. A better alternative: replace <img> with <div>, and remove the src attribute.

To view the final result, we still need to add the line in the XML to tell the browser to use our stylesheet:

Code: 
<?xml version="1.0"?>
<?xml-stylesheet type="text/xsl" href="viewtree.xsl"?>
<!-- edited with XMLSpy v2005 rel. 3 U (http://www.altova.com) by Soren Johnson (Firaxis Games) -->
<!-- edited with XMLSPY v2004 rel. 2 U (http://www.xmlspy.com) by Jon Shafer (Firaxis Games) -->
<!-- Sid Meier's Civilization 4 -->
<!-- Copyright Firaxis Games 2005 -->
<!-- -->
<!-- Tech Infos -->

IMPORTANT! In order to view the file in IE, we need a copy of CIV4TechnologiesSchema.xml IN THE SAME FOLDER of the CIV4TechInfos.xml and the .xsl file.

Now simply open CIV4TechInfos.xml in IE! I've added the .xsl file and the .php file as attachments to the topic, and I also have a live demo of the tech preview at http://www.rhdev.net/CIV4TechInfos.xml - AGAIN, won't work with Firefox.

Viewing the tree using Firefox
Somehow Firefox simply removes the references to left and top in the inline CSS so all the images are put on top of each other. So instead of simply opening the XML in Firefox, we need an extra step, which requires the Java Runtime Environment.

Download SAXON, a XSLT processsor, and extract the JAR file anywhere you want. You will have to add the JAR file to your CLASSPATH now. You can do that doing the following steps: Control Panel -> System -> Advanced -> Environment Variables. Now if you don't have CLASSPATH in your System variables, add it and make it point to the JAR file.

Now, run cmd and go to the directory where your CIV4TechInfos.xml is located (place the .xsl there as well). To generate the HTML, enter:

Code: 
java net.sf.Transform -s:CIV4TechInfos.xml -xsl:viewtree.xsl -o:output.html

There's also a .NET version of SAXON, but I don't know how to use it :p
 

Attachments

  • treepreview.zip
    921 bytes · Views: 270
Dear Salaminizer, I would really appreciate a more comprehensive tutorial. Actually, I'm really lost about how many file I must create and the resulting folder structure. Keep in mind that there is foreigners too in these fora. Please, be more explicit and add screenshots of the different steps or provide an utility instead. I'm really sorry but I don't have enough time to make guesses.
 
I got it to work!

Steps:
1. Ensure ...\XML\Technologies\ folder has both: CIV4TechnologiesSchema.xml and CIV4TechInfos.xml files.
2. Download the treepreview.zip attachment in post 1 and put it in the ...\XML\Technologies\ folder as well.
3. Edit your CIV4TechInfos.xml. Make sure the top two lines are this:
Code: 
<?xml version="1.0"?>
<?xml-stylesheet type="text/xsl" href="viewtree.xsl"?>
4. Open CIV4TechInfos.xml with Internet Explorer.
 
Must your method be added to the steps described by salamanizer ?
Have I to put viewtree.xsl in the technologies folder as well ?

Please, a step-by-step tutorial will be great !

I have :
IE7
PHP
salamanizer's archive
schema put in folder and comments in techinfos.xml
my technology chart ready

All I need is the understanding of the way to make it works !
 
salaminizer said:
DON'T HAVE PHP? Replace the contents between xsl:attribute name="src" and the closing tag with <xsl:text>yourimage.jpg</xsl:text>. A better alternative: replace <img> with <div>, and remove the src attribute.
Click to expand...

I am confused by this line... (i used smeagols 4 step process and attempted to replace the text as described in the above note since i do not have php) could you add an example that shows the better alternative? Or maybe add a separate file for the non-php'rs to download?

what are you using to edit the xsl sheet? i tried notepad but not having luck --- this is the error i am getting - i copied the scheme file from BTS (Beyond the Sword\Assets\XML\Technologies)

The XML page cannot be displayed
Cannot view XML input using XSL style sheet. Please correct the error and then click the Refresh button, or try again later.


--------------------------------------------------------------------------------

Error opening input file: 'CIV4TechnologiesSchema.xml'. Access is denied. Error processing resource 'CIV4TechnologiesSchem...
Click to expand...
 
hey, I saw your PM.

I have uploaded the XSL file that will show the tech Type as text instead of images.

You simply put this file in the same folder where Civ4TechInfos.xml is located, then open Civ4TechInfos and add this line right after the 1st line (so it will be the second line):

Code: 
<?xml-stylesheet type="text/xsl" href="viewtree.xsl"?>

--

If you want to view more information about a tech in the tree, you can change his part of the code:

Code: 
<xsl:attribute name="title">
	<xsl:value-of select="civ:Type"/>
	<xsl:text> - iGridX: </xsl:text>
	<xsl:value-of select="civ:iGridX"/>
	<xsl:text> - iGridY: </xsl:text>
	<xsl:value-of select="civ:iGridY"/>
	</xsl:attribute>[/CODE}

here we're telling the browser to show the type, iGridX and iGridY as the text tooltip. you can add any other tag you want, for example, <xsl:value-of select="civ:Era"/>.
 

Attachments

  • viewtree.zip
    590 bytes · Views: 93
thanks for your quick response... unfortunately i am still getting the same error... also weird is that i downloaded that viewtree zip twice but it still shows zero views in you post?

I am working in a mod directory...
Firaxis Games\Sid Meier's Civilization 4\Beyond the Sword\Mods\A Song of Ice and Fire2\Assets\XML\Technologies

with these 4 files
viewtree
techimage.php
CIV4TechInfos
CIV4TechnologiesSchema <- copied from bts

added line to techinfos as instructed
<?xml version="1.0"?>
<?xml-stylesheet type="text/xsl" href="viewtree.xsl"?>
<!-- edited with XMLSpy v2005 rel. 3 U (http://www.altova.com) by Soren Johnson (Firaxis Games) -->
<!-- edited with XMLSPY v2004 rel. 2 U (http://www.xmlspy.com) by Jon Shafer (Firaxis Games) -->
<!-- Sid Meier's Civilization 4 -->
<!-- Copyright Firaxis Games 2005 -->
<!-- -->
<!-- Tech Infos -->
Click to expand...

this is the error i get when right clicking CIV4TechInfos and selecting open with ie7

The XML page cannot be displayed
Cannot view XML input using XSL style sheet. Please correct the error and then click the Refresh button, or try again later.


--------------------------------------------------------------------------------

Error opening input file: 'CIV4TechnologiesSchema.xml'. Access is denied. Error processing resource 'CIV4TechnologiesSchem...
Click to expand...


i am going to try and spend some time to figure this out... if this error is not repeatable for you - i am not quite sure what i could be doing wrong... do you have a link for free php that you recommend?
 
I'm not really sure about what's happening, it says it cannot open the technologiesschema file, are you using Vista/7 or have that UAC thing turned on?
I'm using XP and I also tried setting the schema file to "read only", but it still works fine, so the only thing that occurs to me is the UAC, especially if your mod is in the Program Files folder.

other than that I don't know, but it doesn't use PHP anymore, so any free host would do just fine with the file I uploaded.
 
salaminizer said:
I'm not really sure about what's happening, it says it cannot open the technologiesschema file, are you using Vista/7 or have that UAC thing turned on?
I'm using XP and I also tried setting the schema file to "read only", but it still works fine, so the only thing that occurs to me is the UAC, especially if your mod is in the Program Files folder.

other than that I don't know, but it doesn't use PHP anymore, so any free host would do just fine with the file I uploaded.
Click to expand...
I am using xp sp3...

not sure what uac is

when you say free host... what do you mean? is there another thing i need to do to host?
 
UAC is User Account Control, something that was added in Windows Vista and continue to exists in Windows 7, and generally causes file access problems. but it shouldn't be your case.

by free host I meant something like geocities, a place where you can upload your files and access them e.g. www.myhost.com/CIV4TechInfos.xml
 
salaminizer said:
by free host I meant something like geocities, a place where you can upload your files and access them e.g. www.myhost.com/CIV4TechInfos.xml
Click to expand...

hmmm... I am really missing something then... I thought we would be able to right click on the file on our local harddrive.


salaminizer said:
What do I need? for the complete eye-candy, besides the CIV4TechInfos, you will need a PHP-enabled host. IE7 is needed if you don't want to generate an HTML from the XML (it's still faster than running Civ4, but the tutorial will cover the shorter task - in the end I'll teach how to use SAXON to generate the HTML and be able to view it in Firefox).
Click to expand...

where would i get a php enabled host?
 
You must log in or register to reply here.

Similar threads

ZombiVoziKombi
Alpha Centauri original tech tree poster, scanned
Replies
4
Views
874
ZombiVoziKombi
ZombiVoziKombi
M
[LP] Civ6 - How To Add New Language?
Replies
0
Views
2K
Manias
M
Recursive
  • Locked
New Version - 3.1.1 (January 1, 2023)
8 9 10
Replies
186
Views
31K
Recursive
Recursive
Cherenkov
HK Level T160 tech tree win. Share your sub 150 secrets :)
Replies
4
Views
2K
EscapedGoat
E
Cacaso
Brainstorm changes in the tech tree
Replies
4
Views
1K
Cacaso
Cacaso
Top Bottom