Developing the CFC map (HTML, JavaScript, PERL)

Oop..! I blaim the hot weather :mischief:

Seperate issue: For ages the CGI script kept spitting out "missing data" and it took me several hours to realise I had forgotten to add method="POST" to the form :lol:

:wallbash:

Pre-release demo now uploaded, but don't expect anything special. It's rather weak, messy, buggy (i.e. resize the map in mozilla) ... but it works and is easy to insult, which is where the project hopefully begins :D

Contributions now welcome! :thumbsup:

There are lots of image/html/css imperfections *hint* ;)
 
I'm getting a runtime error here in Firefox and IE:

Code: 
Line: 69
Error: 'parent.dat.document.forms.0x' is null or not an object.
 
That's non-critical. Hit the post button top-left and parent.dat.document.forms.0x will then exist.

Fixed it anyway :thumbsup:
 
It's a guestbook, but you post stickies to the world map.

Nice map Plexus, but I like uniformity. Does the map come with a theme? :D :mischief:
 
Updated. It's now pretty much how I wanted the tech-demonstration to be.

Who remembers their project development module? There's supposed to be lots of planning, questions and ideas.

How far is this going to go? Which technologies are to be used etc..

The argument against using client-side JS is that you cannot know which browsers are being used, or which features disabled... but I don't see a way of getting the coordinates without JS. Am I right or have I overlooked something?

Should people be able to move their pins or edit the entry? Does it need need to come with hacks that plug it into various BBS? Should it have it's own BBS? How much support should their be for old browsers... really, anything & everything that pops into your head! What are your thoughts? :cool:
 
Oh, and we need a new pin because I borrowed the current one :lol:
 
Doing it without javascript is preferable. Some people (like me ;)) keep it disabled, because of the inherent security risk present with javascript implementations.

The only way I can think of doing it without javascript, would be a map comprised of 1x1 pixels, with each pixel having an href pointing to a form that you fill in. A serious pain in the butt though, so using javascript would be far easier.
 
Would form fields for lattitude & longtitude work? How many people actually know their position? I certainly don't... I'm not even sure how it would be worked out :undecide:

It makes a big difference because if JS is used for the (essential) map, it might as well be used everywhere. But if there is an escape from JS for the map, then all the functions/subroutines get moved server side for maximum compatibility.

I don't mind, because (1) I am very experienced with JS programs - think HTA etc., and (2) I enjoy excuses to practice PERL - I haven't very much experience :(

Re: 1x1 pixel idea. We can generate lots of styled A tags (with a loop in PERL) and overlay them on an image of the world. How might that work with zooming? It would be a big download even to cover a small map.
 
This is the closest I could come to 1x1 pixel A tags. It's interlaced in MSIE, and OK in Mozilla.

Code: 
<style>
A	{
width:1px;
height:1px;
background-color:red;
font-size:0px;
padding:0px;
margin:0px;
border:none;

}

IMG	{height:1px;width:1px;border:none;}

BODY	{font-size:0px;}
</style>

<body>
<script>
for (var i=0;i<999;i++) document.write('<a href="?"><img></a>');
</script>


</body>
 
I can code HTML/Javascript/Perl/whatever. ;) Is my help needed in this project? Also I'm not sure if I understood how you plan to implement this population map... how you identify the users, for example, and will this service be hosted on a good enough server with Perl support? :p
 
Code: 
I can code HTML/Javascript/Perl/whatever.
Yay! :thumbsup:

will this service be hosted on a good enough server with Perl support?
Click to expand...
I was planning to let BBS admins download it and install it on their own servers.

But, for ourselves, we have a sourceforge.net account with shell access and PERL/PHP/SSI/mySQL/Python etc.. and I have uploaded a working prototype (mostly JavaScript).

how you identify the users
Click to expand...
If it's a stand alone product then we don't need to: just like a guestbook, but if it's intergrated with any community then we can take their BBS userID and use that.

With a tiny modification to almost any BBS (i.e. vBulletin), the map can recieve the userID either in the QUERY_STRING or POST_DATA. If vBulletin generated the link <a href="/map/showmap?user=43786">Sign Population Map</a> then we have the userID and can link back to their profile. Ok, it's not secure but it's a start :p

Even if modifications to the backend are not possible (i.e. EZBoard), the same can be done with JavaScript.
var userID = document.getElementById('link_to_profile').innerHTML.split('?')[1];
document.write('<a href="/map/showmap?user='+userID+'">');

There are probably better ways. What are your thoughts?
 
At least I don't want any Javascript crap to be integrated on that site. ;)

Since I don't know too well how vBulletin works, I'll assume here that the population map will be a stand-alone program. One thing is for sure: we have to generate the map image dynamically (in other words: the pins have to be integrated on the image.) At least in my browser the prototype image doesn't display correctly.

There should be separate pages for viewing the map and registering to it. On the registration page user should be able to click on his location on the map and after that enter his name, user id, additional comments etc. Then in the main page should be a list of registered users along with some additional info (their country etc.) On the other hand, I have no idea how to program the server-side script to recognize which country you clicked on the registration page. :confused: (Actually, knowing how programs like Paint Shop Pro work would help in this project.)
 
crystal said:
At least I don't want any Javascript crap to be integrated on that site. ;)
Click to expand...

I understand that, but there are a number of JS functions that have to be solved without JS before it can be discounted.

1. How to get new coordinates without JS?
2. How to display name & comment over the pin without JS?
3. How to generate the image without DOM?

At least in my browser the prototype image doesn't display correctly.
Click to expand...
Without seeing it, you don't know what it's trying to show :(

There are buttons (top-left) for navigating the prototype.

Which browser is that? I used DOM (standards compliant) and tested in Mozilla/MSIE (with JS enabled).

On the registration page user should be able to click on his location on the map and after that enter his name, user id, additional comments etc.
Click to expand...
Can that be solved without JS?

I looked at millions of <a href=""> tags, but the filesize would be huge and it doesn't work in IE. For some reason it interlaces each line

Actually, knowing how programs like Paint Shop Pro work would help in this project.
Click to expand...
PaintShop Pro runs client side, like JavaScript ;)

PERL is completely server-side; it will never interact with elements in the browser.
 
This is the prototype in MSIE.

1. Buttons at the top
2. Map in the middle
3. Guestbook at the bottom

How it works...

1. Downloads guestbook
2. Extracts values (name, comment, coordinates)
3. Floats pins (position:absolute;top:__px;left:__px;) over the map
4. Onmouseover event makes a comment_box appear with the message as shown

How PERL might do it...

1. Extract values (name:comment, coordinates)
2. Generate HTML for floating pins (position:absolute;top:__px;left:__px;)
3. Use title="" to display name: comment
 

Attachments

  • screen.png
    screen.png
    20.1 KB · Views: 69
Crystal, can you explain something to me about PERL. On page 1 I posted a simple PERL script for recording data.

I have changed it (untested) and have some questions...

1. Is it OK to merge the @lines = <FILE>; because in the page 1 post it's seperate.
2. Is flock needed?
3. Is a test to see if flock worked also needed?

Here is my latest file...

#!/usr/bin/perl

$profile = "http://forums.civfanatics.com/member.php?u=";
$output = "/home/groups/g/gu/guestaphics/htdocs/demo/read.html";
$home = "http://guestaphics.sourceforge.net/demo/read.html";

# ^^
# You may need to edit the above lines
######################################################################

&error('Essential data was not received') unless $ENV{'CONTENT_LENGTH'};

# Input

read(STDIN, $buffer, $ENV{'CONTENT_LENGTH'});
@pairs = split(/&/, $buffer);
foreach $pair (@pairs) {
($name, $value) = split(/=/, $pair);
$value =~ tr/+/ /;
$value =~ s/%([a-fA-F0-9][a-fA-F0-9])/pack("C", hex($1))/eg;
$value =~ s/<!--(.|\n)*-->//g;
$value =~ s/<([^>]|\n)*>//g;
$INPUT{$name} = $value;
}

# Check

&error('There were no coordinates') unless $INPUT{'x'} && $INPUT{'y'};
&error('Too many fields were left blank') unless $INPUT{'name'} && $INPUT{'message'};

# Output

open (DB,">$output") || &error('The server couldn\'t open a database');
flock (DB, 2);
@lines = <DB>;
foreach $line (@lines) {
if ($line =~ /<!--store-->/) {
print DB ( "<!--store-->\n"
. "<table><tr>"
. "<td id=\"coord\">$INPUT{'x'}\;$INPUT{'y'}</td>"
. "<td id=\"flag\"><img src=\"flags/$INPUT{'flag'}.png\"></td>"
. "<td id=\"name\"><a href=\"$profile$INPUT{'uid'}\">$INPUT{'name'}</a></td>"
. "<td id=\"message\">$INPUT{'message'}</td>"
. "</tr></table>\n");
} else { print DB ("$line");}
}
flock (DB, 8);
close (DB);

# Success

print ("Content-Type: text/html\n\n"
. "<html><head><title>Success</title></head>\n"
. "<body><h1>Thank you for pinning</h1>\n"
. "Your are now represented in our community map.\n"
. "<a href=\"$home\">Continue..</a></body></html>\n");

exit;

# Errors

sub error($){
$error = shift;

print ("Content-Type: text/html\n\n"
. "<html><head><title>Error</title></head>\n"
. "<body><h1>An error occurred</h1>\n"
. "$error, and your submission has been discarded.\n"
. "<a href=\"$home\">Continue..</a></body></html>\n");

exit;
}
Click to expand...
 
You must log in or register to reply here.

Similar threads

W
Scripting Runtime Information
Replies
19
Views
2K
LilBudyWizer
LilBudyWizer
O
Tool - Civ4 BTS Map Validator
Replies
0
Views
374
onkelm
O
FXS_Gilgamesh
The Modern Age livestream is coming December 17th!
20 21 22
Replies
420
Views
27K
Evolena
Evolena
GeneralZift
CCS: Alternate Victory Conditions
Replies
0
Views
227
GeneralZift
GeneralZift
O
Tool - Civ4 Map-Editor V3 - third test release
Replies
15
Views
1K
herve.moravio_aposto
H
Back
Top Bottom