salaminizer
Colorado Internacional
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.
We pass the Tech description as a GET parameter.
2. The XSLT stylesheet
This one is quite simple (I named it viewtree.xsl)
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:
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:
There's also a .NET version of SAXON, but I don't know how to use it
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 :
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.htmlThere's also a .NET version of SAXON, but I don't know how to use it
