Wikipedia:Reference desk/Archives/Computing/2015 March 7

Welcome to the Wikipedia Computing Reference Desk Archives
The page you are currently viewing is an archive page. While you can leave answers for any questions shown below, please ask new questions on one of the current reference desk pages.

March 7

Convert copy-protected VOB files to hi-res FLAC

I bought some CD/DVD packs that have a regular CD and a DVD with high-resolution VOB files. About the first of February, I converted a few of the VOB files to FLAC files. This worked then. Now I'm trying to hi-res FLAC files. Then I was able to copy the files from DVD to my computer. Now I can't do that, and I get "Error Code 0x80030309 Copy Protection Error Error". The conversion program says that it can't convert them because they are protected. (It wasn't this way about 5 weeks ago.) I googled for the error and there were matches, but I don't know if they are trustworthy. Is there a trust-worthy way to convert the copy-protected VOB files from the DVD to high-res FLAC files? Bubba73 ^{You talkin' to me?} 02:31, 7 March 2015 (UTC)

DVD drives will refuse to read encrypted sectors unless DVD playing software has authenticated itself to the drive, but the drive can't tell which software is reading the disc, so if you start playing the DVD, then pause the player and copy the VOB files, it should work.

The files you copy will still be encrypted, but it may be that only the video track is encrypted. Either that or whatever conversion utility you used decrypted the audio for you. -- BenRG (talk) 04:27, 7 March 2015 (UTC)

Javascript to change image transparency ?

[1] lists code for IE and Netscape. Does this mean there's no standard code to do this in all browsers ? StuRat (talk) 05:08, 7 March 2015 (UTC)

That document is dated 2002. Here's a more recent thread. Setting .style.opacity works in all current browsers. You might still need the IE-specific code if you want to support IE8 and earlier. -- BenRG (talk) 07:04, 7 March 2015 (UTC)

Thanks ! StuRat (talk) 18:22, 7 March 2015 (UTC)

Resolved

Javascript debug help needed

The following code is supposed to make a rainbow slowly fade in, by displaying the files rainbow_0.png - rainbow_100.png, which each have a different level of transparency:

     var opacity = 0;
     var rainbowTimerFunc = function() {
       document.getElementById('rainbowDiv').innerHTML = 'rainbow_'+ opacity +'.png';
       document.getElementById("rainbowDiv").style.backgroundImage = "url('rainbow_' + opacity + '.png')";
       opacity = opacity + 10;
       if (opacity > 100) {opacity = 0}
     };

It's called once a second, and the "innerHTML" line I added for debugging purposes does print out the correct file names. However, no images appear. I am able to display an image manually, by coding in one file name, such as:

       document.getElementById("rainbowDiv").style.backgroundImage = "url('rainbow_50.png')";

So, what did I do wrong ? StuRat (talk) 06:53, 7 March 2015 (UTC)

The most obvious problem is that you've mixed up single and double quotes in "url('rainbow_' + opacity + '.png')". It should be, e.g., "url('rainbow_" + opacity + ".png')". -- BenRG (talk) 07:07, 7 March 2015 (UTC)

Yes, that fixed it. Unfortunately instead of doing a smooth fade-in, it seems to blank out in between each update, at least under Google Chrome, so it flashes on and off, in quite an annoying way. StuRat (talk) 08:13, 7 March 2015 (UTC)

When you're changing the backgroundImage of rainbowDiv, the browser will try to display the image immediately. If the image is already in the cache, it will - but if it isn't (if it hasn't been referred to already) the browser can't display it, and will instead display blank. It will then tell the cache system to load the image (which it does in a background thread). Only once the image is loaded will the browser display it. Even loading an image from the local disk will likely leave a big enough delay for the blank to flash - loading from a slower medium like the network will naturally leave a much longer delay. When people are writing pages that animate through several images, they typically want to make sure the images are loaded before they try to display them. This is done either with offscreen images on the HTML or by adding new image elements to the page in JavaScript. It can then verify an image is loaded with the complete property and binding a callback on its onload property if it isn't. -- Finlay McWalterᚠTalk 10:17, 7 March 2015 (UTC)

Thanks. That seems like an odd default behavior, to replace the current image with a blank, until the new image is loaded. The other odd thing is that when it cycles back around to the same image again it still flashes, so apparently it's not cached. StuRat (talk) 16:23, 7 March 2015 (UTC)

Come to think of it, I had a problem with my browser displaying old images long ago, and I may have set my browser to not cache images then. Is there any way, with this setting, to prevent flickering when replacing the displayed image ? (One method I can think of it to display both images on top of each other, so the new image is on top, and not delete the old image until you are certain the new image is displayed. However, if the new image is partially transparent, that could be ugly.) StuRat (talk) 18:39, 7 March 2015 (UTC)

If you don't want to see the image before it's ready, don't try to display it until you know it's loaded. You need to separate the image load logic from the display, and don't flip the displayed image until you're confident the image can be displayed. -- Finlay McWalterᚠTalk 19:15, 7 March 2015 (UTC)

HTML command to load all images ?

Is there a way to say "load all these images into the cache, don't do anything else until that's done, then keep them loaded" ? StuRat (talk) 18:26, 7 March 2015 (UTC)

The browser API (html/css/js) is pretty low level, and expects you to do this kind of heavy lifting yourself. That's why there are so many frameworks built on top of it. But as you're starting out, it's a good idea to do that work yourself, so you get a proper understanding of how this kind of thing (which is really fundamental) actually works. -- Finlay McWalterᚠTalk 19:15, 7 March 2015 (UTC)

Yea, I think I'll try the approach of loading all the images at the start, displayed on top of each other, and use the z-index to control which one displays. That seems like the only way to ensure a smooth animation, when the time to load each image is variable. That does mean I can't use transparency, though, unless the opaque portion of each later displayed image completely covers the visible portions of all the early ones. StuRat (talk) 20:03, 7 March 2015 (UTC)

Add a copy of each image into individual children of a non-displayed (display:hidden) DIV. When the onload callback on each has fired, then you know they're all cached, and you can safely use the same url on your "live" image with confidence that it's in cache. I'll try to work up an example later, but I'm busy now. -- Finlay McWalterᚠTalk 20:08, 7 March 2015 (UTC)

Thanks, but a couple questions:

1) In what ways is that approach better than my idea ?

2) Would that approach work if browser caching is disabled, as it is in my case ?

I've also considered using animated GIF's, but those have their own limitations, like only 256 colors per frame, no transparency at all (I think), and huge file sizes, again making loading an issue. StuRat (talk) 21:21, 7 March 2015 (UTC)

A working example is here, with the javascript here. Shift-reload it a few times, and note how the images are loaded (displayed in a list below the image) in a slightly different order each time (and almost never the order they're requested in). To answer your specific questions:

1. just because you added all your images in a big pile doesn't mean they've loaded yet, or that they load in the order you think they will. If you start to display them before using verifying they're done loading, you will display blank or broken images. Strictly, my code is wrong too, as I'm not handling cases where images fail to load.
2. I don't know. Disabling the cache is a daft thing to do.

-- Finlay McWalterᚠTalk 23:16, 7 March 2015 (UTC) I'm off to bed now

It can be instructive to use a debugging proxy such as Fiddler (software) to see exactly what is happening in the HTTP traffic. The browser developer tools (typically accessed by pressing F12) are good for this too. AndrewWTaylor (talk) 17:56, 8 March 2015 (UTC)

A very nice things about proxies like Fiddler and other software like it (or built-in features of browser debug suites) is that you can deliberately induce a slow connection. It's all to easy to develop a site using a fast machine with a local server and thus to unwittingly make a bunch of assumptions about how things work - assumptions that don't hold when the user has a slower connection than you might hope, or when errors happen. My (simple-as-I-could-do) example slideshow above is a good example - if one of the images fails to load, the whole slideshow will never start. That's a failure mode that will essentially never happen in a normal dev environment unless one knows to deliberately induce it. -- Finlay McWalterᚠTalk 18:19, 8 March 2015 (UTC)

UPDATE: Following your suggestions, I wrote some code that does the following:

1) Loads all the pics I want in the animation, positioned on top of each other, but initially in hidden mode.

2) Once they are all loaded, I start a loop timer. At each step, I:

2a) Make one pic visible.

2b) Make the previous pic hidden.

This seems to work great, with no blanking between pics, fairly consistent timing between frames, and I only load each pic once. Are there any down sides to this approach ? StuRat (talk) 06:18, 10 March 2015 (UTC)

The only downside is: it downloads 100 images. Why not load the last one and animate its opacity via CSS (or jQuery)? -- [[User:Edokter]] {{talk}} 09:29, 10 March 2015 (UTC)

Fade in/out examples (one using JavaScript, one using CSS3 animation) are here. -- Finlay McWalterᚠTalk 15:30, 10 March 2015 (UTC)

Yes, I should have said that I already did that fade in/fade out method on the rainbow by varying the transparency on a single image. Now I am experimenting with true animation, where each frame has different content, like a bird flapping it's wings. I notice your javascript fading looks choppy, but presumably more frames with less delay between each would solve that, and I assume the javascript method has wider browser support. Does the CSS3 animation also work with multiple images, swapping them rather than fading in and out ? StuRat (talk) 16:16, 10 March 2015 (UTC)

Neither content nor background-image are animatable, which means they can't be animated with CSS3 transitions (although I'm sure there are any number of tricksy schemes people can come up with). My JS animation looks a little choppy because it's only updating at 10Hz (because the code reads window.setInterval(fade_func, 100), where 100 is 100ms); lower that number to say 20 (and concomitantly divide the per-frame increment) and it should look smoother. As far as I know, the browser will do CSS animations at the display's native framerate. The CSS will also look a bit better at either end because I set it to use easing (which I was too lazy to do in JS). -- Finlay McWalterᚠTalk 17:25, 10 March 2015 (UTC)

An additional complicating factor, in the case of fading in and out, is that human visual perception of brightness changes is not linear. That is, twice as many photons don't cause twice as many nerves to fire. StuRat (talk) 23:10, 10 March 2015 (UTC)

More ram = longer battery running time?

More ram = longer battery running time? — Preceding unsigned comment added by Llaanngg (talk • contribs) 16:44, 7 March 2015 (UTC)

When using a HDD, swapping memory, yes. The different is the energy consumption of the additional RAM module to the operating or idleing HDD. Note: The CPU is delayed in waiting for the drive. --Hans Haase (有问题吗) 18:03, 7 March 2015 (UTC)