JavaScript -> Auto-updating Image

[puggsoy]

Remember how my sig used to have the daily Dilbert comic strip? That linked to an image that automatically updated itself, grabbing the image directly from the Dilbert website. Unfortunately, the way Dilbert's RSS worked changed, and apparently broke that.

I recently found a script by the same guy, which I'm pretty sure works. Thing is, I don't think there's an actual implementation of it anywhere that I link from. So I was wondering, anybody know how exactly I would go about doing something like this? Here's the code, it's in JavaScript.

Code:

<script>
    var now = new Date();
    var day = now.getDate();
    var month = now.getMonth() + 1;
    var year = now.getFullYear()%100;
    var dayofweek = (now.getDay() == 0) ? 's' : 'd';
    if (day < 10) day = '0' + day;
    if (month < 10) month = '0' + month;
    document.write('<img src="http://thedilbertstore.com/images/periodic_content/dilbert/dt' + year + '' + month + '' + day + dayofweek + 'hct.jpg">');
</script>

Ideally I would want to be able to put it in a file or something and link it from my Dropbox, if possible. If an actual web domain is required that could be a bit tricky for me. Either way, I just want to know how to do this at all.

[PatientZero]

That script is actually pretty simple when you break it down.

All the code is doing is redirecting to an image located in the "http://thedilbertstore.com/images/periodic_content/dilbert/" directory and adding the filename based on the current date.
So long as the file names still follow the same pattern I think you should be able to remove the <img> tag from it and reference the javascript file as if it were an image, currently it's outputting html.
So uh, the last line would be;

Code:

document.write('http://thedilbertstore.com/images/periodic_content/dilbert/dt' + year + '' + month + '' + day + dayofweek + 'hct.jpg');

and you'd reference it as

Code:

[img]http://whatever.butt/yourcode.js[/img]

Personally I'd want to test that myself to be sure, I haven't worked much in Javascript so I might get getting wires crossed.
Assuming you've got it in a public folder I think it should work in dropbox, since I'm pretty sure javascript is run client-side and it's just spitting out a url.

Of course if anyone is more well versed in Javascript I'd listen to them if they say I'm talking garbage here.

[puggsoy]

That actually looks like a pretty obvious thing to try, now that you mention it. Unfortunately no dice, though. It looks like it's simply writing the URL to the image, rather than the image itself. It's close though, and perhaps with a bit of Google magic I can figure out what exactly needs to go in document.write().

In any case thanks a lot, this helped me understand what's going on a bit more clearly. At the very least, I know how to get the image's URL.

[PatientZero]

Out of curiosity, how were you doing it before?
If you were using a different javascript file there's probably some clues in there on how to output it in a way you can use.

Annoyingly I'm pretty sure I used to have a .js file hanging around that did exactly what you're after (with a little tweaking) but that's long gone after so many reinstalls and system changes.

[puggsoy]

Previously, I linked to an .aspx file that a guy had at his domain. This script is from the same guy, but the .aspx isn't there any more and I can't find any related code.

By the way, I looked around a bit and figured out that PHP can do this sort of thing. It could be that JavaScript can't even do this and it needs to be done with PHP. But from my understanding that needs to be compiled, plus I'd need to translate this to PHP, which would be a pain

[PatientZero]

PHP?
I can give that a quick stab if you like, I think I remember the syntax well enough.

Code:

<?php
    $day = date(d);
    $month = date(j);
    $year = date(Y);
    $dayofweek = date(w);
    if ($day < 10){
       $day = '0' + $day;
    }
    if ($month < 10) {
        $month = '0' + $month;
    }
    $url = "http://thedilbertstore.com/images/periodic_content/dilbert/dt".$year.$month.$day.$dayofweek."hct.jpg";
    echo($url);
?>

[note: I might have got this wrong somewhere, it's totally untested and I haven't done this in over a year now]

This (should) be doing exactly what the other script did, although I had to go with best guesses on what format the date was in and the year is kind of confusing if you wanted to take into account leap years.

The two main considerations are that this is again literally just writing out the URL, you'd want to replace the simple echo tag there with the redirect, just use $url wherever you want it, and the other consideration is that php is server-side, so you need to upload it to a webserver that runs php (I think that code is technically PHP5?)

[puggsoy]

Ah, right. I don't have my own website or anything of the sort so that could be a problem. I have looked around though and doing it through JavaScript doesn't seem to work. I even found a redirect command, still fruitless.

So yeah, it could be that I might have to leave this. I might look around some more, but if I can't get it working I'll just have to leave my signature Dilbert-less, or have a static comic.

[Phaze]

Well a few things first.

In PHP/ASPX and such it's meant to grab the image data and output that directly from the PHP file iirc (it's like how you sometimes save images with a ".php" extension, though header magic can make it output as a regular image file).

Second, compilation is unnecessary in PHP, the interpreter just reads the code outright.

Third, I'm willing to take a stab at this for you and put it on PhazePages, assuming my host won't complain (I don't think they would, the site is pretty resource light considering NOTHING IS ON IT ). God knows I need to start being useful EVENTUALLY. Who knows, maybe I'll finally start working on Mask '_;

I've done something similar to this with Boo Mansion's Duelist Card thing before; I'd link it but I dunno if I'll have the ghost of Booton hounding my ass because I'm hosting BMTCG cards offsite whenever I put it up ¦D

It was actually much more complex than this job since I had to assemble an image from several composite images, allow recoloring and such, whereas this one is just 'replaying' the image data, I suppose. I could probably have a 'cache' image on-site too to prevent bandwidth consumption from the Dilbert comics site, too. Just retrieve it once per day. If you want I'll post the code in here when I'm done.

Oh, and a final note; even if you got the JavaScript for this working per se, I don't think it'd work in your sig on tSR. Security and general maliciousness concerns!

[PatientZero]

If I'm understanding you right, and this is more for my own personal reference here (haven't used php in a few years now), are you saying that by setting the header to treat the file like an image and just "repeating" the data from the image via PHP you can then reference that directly wherever you'd reference the original image?
That's roughly what I was considering with this problem but I wasn't sure about the process or specific syntax for "pretend to be this picture".

Just to get some layman's terms here with the concept of the whole "compiling" and "server-side/client-side" business covered on the off-chance that the technical terms are getting a bit confusing for people who don't know them, PHP is just a server-side scripting language, all that means is you don't have to compile it in any way, but when you access it the code is run on the server before giving you whatever the output (if any) is.
(This is an important distinction because, for example, php accessing a database is likely to include the location and login details for it, but because that's all on the server-side the user can't see it in the page source.)

Also I'm a big dummy and hadn't even considered the security issue of allowing arbitrary code to be run that way, which is stupid because I know I've actually exploited that loophole myself more than a few times.

I'd be interested in seeing the code for it myself if/when you can put something together, it's an interestingly convoluted problem from my perspective and I'm always down with learning how magic tricks are done.

[Phaze]

If I'm understanding you right, and this is more for my own personal reference here (haven't used php in a few years now), are you saying that by setting the header to treat the file like an image and just "repeating" the data from the image via PHP you can then reference that directly wherever you'd reference the original image?
That's roughly what I was considering with this problem but I wasn't sure about the process or specific syntax for "pretend to be this picture".

[jargon]

Also I'm a big dummy and hadn't even considered the security issue of allowing arbitrary code to be run that way, which is stupid because I know I've actually exploited that loophole myself more than a few times.

I'd be interested in seeing the code for it myself if/when you can put something together, it's an interestingly convoluted problem from my perspective and I'm always down with learning how magic tricks are done.

PHP has a library called GD that allows it to 'draw' images and provide this as output instead of say, a HTML page (as we're used to). It can also copy parts of other images into the image it is creating before serving it. It's a pretty simple process, but you can just serve other images as this specific 'image'. The header magic only really matters when you try to download the file, considering the OS will treat a "php" file as text even though it might be a PNG image. Using PHP to serve images allows you to programmatically define what the image is, which can be handy for dynamic sigs

The fun (for the web dev, at least!) part is when you use the dynamic powers of PHP to define other files! Using code to write code
I wanted to use a PHP file to generate dynamic CSS at one point for a day/night transition depending on when you visit the site, but :effort:

From the client's HTML side though, the extension of the 'image' doesn't really matter as long as the server sends an image; file extensions of URLs only really matter to the web server, as it needs to handle the files a specific way when a client accesses the URL. This is why arbitrary PHP execution exploits can happen when configuration files are .php files (since the programmer naively thinks that this is a good way to prevent leakage of sensitive information within config files. They should use .htaccess or something)

Haha :v
I've never used Javascript in that way, I've only dealt with things like SQL Injection and arbitrary PHP execution vulns (those are fun though).

[puggsoy]

Third, I'm willing to take a stab at this for you and put it on PhazePages, assuming my host won't complain (I don't think they would, the site is pretty resource light considering NOTHING IS ON IT ).

That would be really really awesome and convenient. I'm pretty useless at web development in general (in case that wasn't blindingly obvious already ) and don't really have the time to learn how it all works, not to mention I have nowhere to host this myself.

Either way I'd still like to check out the code when/if you do this.

[Phaze]

That would be really really awesome and convenient. I'm pretty useless at web development in general (in case that wasn't blindingly obvious already ) and don't really have the time to learn how it all works, not to mention I have nowhere to host this myself.

Either way I'd still like to check out the code when/if you do this.

Don't feel bad, I'm useless at reverse engineering!

I'm working on it now, just futzing about to get the current strip ID based on the current day compared to the day/strip ID I have stored in the script (the one for 08-11-2013) and then get the URL for that strip - it seems strips have this weird organizational thing about them, now:
http://dilbert.com/dyn/str_strip/0000000....strip.gif
The first digit of each of those is the same as the ID of the current strip - no date info. A weird organizational structure but I guess it works.

Once I have the URL capable of being computed I just grab the image via GD and output it from the script. I'll then just need to add in the thing to make sure the current cached strip ID isn't the same as the current ID before it goes to retrieve it again.

[PatientZero]

As a point of interest and increasing functionality at the expense of a couple extra lines of code, with the way the naming convention is being generated it could be worth adding a bypass variable to it, so "file.php?id=1337" to display a specific strip, not so useful for the requirement used here but since it's not exactly an unpopular strip and the system has recently changed it could be worthwhile slapping a credit comment in there and offering it up for others to use.

I know low-to-mid level office nerds would have a big hug for you if you did that.

[puggsoy]

I'm working on it now, just futzing about to get the current strip ID based on the current day compared to the day/strip ID I have stored in the script (the one for 08-11-2013) and then get the URL for that strip - it seems strips have this weird organizational thing about them, now:
http://dilbert.com/dyn/str_strip/0000000....strip.gif
The first digit of each of those is the same as the ID of the current strip - no date info. A weird organizational structure but I guess it works.

Once I have the URL capable of being computed I just grab the image via GD and output it from the script. I'll then just need to add in the thing to make sure the current cached strip ID isn't the same as the current ID before it goes to retrieve it again.

Actually, if you check out the JavaScript code I posted, you'll see that there's a date-based system to get the image from thedilbertstore.com. For example today's one is http://thedilbertstore.com/images/period...08dhct.jpg. It is a JPG, but that hardly matters in this case, and it's slightly larger than the one from the homepage.

[Phaze]

not so useful for the requirement used here but since it's not exactly an unpopular strip and the system has recently changed it could be worthwhile slapping a credit comment in there and offering it up for others to use.

I know low-to-mid level office nerds would have a big hug for you if you did that.

I don't understand.

Actually, if you check out the JavaScript code I posted, you'll see that there's a date-based system to get the image from thedilbertstore.com. For example today's one is http://thedilbertstore.com/images/period...08dhct.jpg. It is a JPG, but that hardly matters in this case, and it's slightly larger than the one from the homepage.

Wooooow. I tried that earlier, I messed it up and concluded it didn't work anymore. Silly me

Since I've already done most of the work for the GIF version's URL, I think I'm just going to offer a param for GIF/JPG versions (considering size differs, too).