Git in Netbeans — Push or Push to Upstream

Netbeans’ Git client is a bit different that others (like TortoiseSVN) and offers additional option for push/pull commands (starting from version 7.3). It is Push to Upstream and Pull from Upstream. What is the difference from regular “non-upstream” versions. Not to big. Second (“upstream”) ones offer dirrect execution of command, without displaying any dialog (if properly configured). While regular (“non-upstream”) always opens Push to Remote Repository dialog.

So, after initial configuration, it is more convinient to use Push to Upstream instead of Push.

It is always a few clicks less, right? :]

Read More “Git in Netbeans — Push or Push to Upstream”

noUiSlider — a jQuery Range Slider [updated]

Twitter Bootstrap is my main framework for creating websites and mobile PhoneGap application and it actually has anything I need, except a good slider.

Note, that I’m talking about a bar and a knob on it, which you can drag to set the value. I’m not talking about any kind of image slider, gallery or presentation. As most people know, Bootstrap has such thing, which is called Bootstrap Carousel.

I tired to use jQuery UI’s slider, as it is quite small (39,4 kB of minified JS and CSS code). This is not very much, when compared to whole jQuery UI library size. But it is way too much, when we thing that this 40 kB of code does nothing that building a simple slider (I’m not using jQuery UI at all). Plus: it works more than poorly on mobile devices with Android 2.x.x (a bit better on Android 4.1.x).

So, I was urgent need for an alternative. Thanks to Stack Overflow, I came across noUiSlider — jQuery Range Slider. And immediately felt in love with it.

Read More “noUiSlider — a jQuery Range Slider [updated]”

When you should NOT user jQuery.load function in your PhoneGap application

In most more complex PhoneGap applications developers split app contents into several files. When these are truly separate “screen” of application, and are accessible via normal <a href=""> links, everything is fine.

Problems arise, when you want to split contents of one “screen” into several files. For example to have tabs, where each tab content is stored in external separate file. In this case, content is loaded on tab’s tab (or preloaded during application init) using AJAX (which can be used to request local files as well).

If you rely on jQuery and want to use .load() or .ajax() function, read this post to avoid common pitfalls.

Read More “When you should NOT user jQuery.load function in your PhoneGap application”

Pause and resume events in PhoneGap application

If you use pause and resume events in your PhoneGap application, keep in mind, that these are fired for every situation, when your application goes to background.

Not only, when user presses Home button, but also when for example a calendar notice popus up.

Turning device screen off and on again also counts as loosing your app to background, so it will also cause PhoneGap to fire pair of pause and resume events.

Using Ripple Emulator for Windows to test PhoneGap applications

Though Ripple Emulator is mainly produced for testing Blackberry applications, you can easily use it for testing PhoneGap apps, build for any platform supported by PhoneGap. But, it is still Blackberry-oriented tool and so it is its documentation, so you may face some missing parts and blackholes, when reading it. Especially, when you’re building your apps in the cloud, using PhoneGap Build.

The aim of this post is to fix as many of these as possible and save you some time.

Read More “Using Ripple Emulator for Windows to test PhoneGap applications”

Function is not defined, when using setInterval or setTimeout

Javascript can be challenging and is full of traps for the beginners. Today I was caught into one of such traps and I was struggling with Uncaught ReferenceError, functionName() is not defined error, for way to long. Solution seems easier than I was thinking, so I wrote this short memo to future myself to avoid falling into the same trap again.

Read More “Function is not defined, when using setInterval or setTimeout”

Some issues about links in PhoneGap applications

It is uncommon and not to often to place external links (leading to an external pages) inside application built with PhoneGap. However, if you decide to do so, read this article to get knowledge about issues you may run into. If you target Android 2.x as well, you’ll also find some interesting information here.

There are generally two things, you should consider about links in PhoneGap applications. One about external links and second about links under overlay.

External links

Links to external pages replaces (covers) entire are of your application and thus made it nearly completely unusable to the user.

If you use direct link (<a href="http://www.acrid.pl/">acrid.pl</a>) and user taps it, contents of destination page (or eventually an error message) will cover entire application area, completely replacing contents of your mobile application. What is more important, device’s back button won’t work in this case, meaning that your application is actually dead upon user taps such link.

There is no going back and leaving app, going to home screen to restart your application again, will restore it from memory in previous state — that is, with external webpage open, not with contents of your application. The only option user have to get back to your application is to force to close it from task manager and hard-restart it. This is not wanted behavior in most situations.

To avoid these problems, always open links to external webpages using specific Javascript code. For example:

window.open(url, '_system', 'location=yes');

Part location=yes is important. Leaving third parameter empty will result in above mentioned behavior.

This code is tested to work in Android. According to PhoneGap documentation and blog, it should work in other platforms as well.

For your own convinience and purity of your code, you should consider enclosing this in a handy function:

function openUrl(url)
{
    window.open(url, '_system', 'location=yes');
}

and call it using either jQuery binding:

$('#btnAcrid').click(function()
{
    openUrl('http://acrid.pl/');
});

or direct linking:

Visit <a href="#" onclick="openUrl('http://acrid.pl/');">this page</a> for more information.

Either way is good and prevents your application from falling into above mentioned problems.

Overlayed links

PhoneGap app under Android 2.x ignores full-page overlays and allows tapping links below it.

If you’re using any Javascript library to replace dully Javascript alert(), confirm() and prompt() functions with cool looking modal dialog boxes — like Twitter Bootstrap, Apprise and many more — keep your eye on some trobules you may run into under Android 2.x.

I tested this issue on two different versions of Android and on two separate mobile devices:

  • GSmart Rola G1317D with Android 2.2.2,
  • LG GT540 with Android 2.3.3 and CyanogenMod.

Under first one, user were able to tap links below full-page overlay, but nothing happened as a result of this.

Under LG GT540 with Android 2.3.3 and CyanogenMod, tapping links below overlay sometimes resulted in opening target link. If such link wasn’t “secured” using method described above, again entire content of mobile application was replaced by external webpage content, making application unusable.

Android 4.x is free of this problem (tested under Samsung Galaxy Nexus with Android 4.2.2). You can’t tap at all anything below full-page overlay.

I wasn’t able to further investigate, whether this problem is caused by PhoneGap, used Javascript library (Bootstrap, Apprise, etc.), Android system or CyanogenMod mode.

Mobile ads in PhoneGap applications build with PhoneGap Build [updated]

Adding a mobile ads to monetize your mobile applications is a quite easy task, when you’re compiling your applications locally. And there were many articles written about this (like the one at PhoneGap Wiki).

But, when you compile in-the-cloud, using PhoneGap Build only, things are getting much more complicated.

Read More “Mobile ads in PhoneGap applications build with PhoneGap Build [updated]”

AJAX and JSON cross-domain calls from PhoneGap application

This is just as quick as possible example on getting you to the subject, without unnecessary blah, blah. Only pure detail on how to sent AJAX / JSON calls (cross-domain!) from your PhoneGap application. With references to other intresting and more comprehensive sources in the end.

BTW: You don’t even need a response server ready to get started! Example is based on JSON Test — Simple testing for JSON-based applications service.

This article assumes that you’re using jQuery in PhoneGap application.

Read More “AJAX and JSON cross-domain calls from PhoneGap application”

Capturing desktop video with VideoLAN VLC

Camtasia Studio is powerful, feature-packed, probably best to use and best know software for Windows and Mac for capturing what you’re seeing and doing on screen and for creating mentoring videos with professional polish.

I would use it myself and recommend it to anyone, if it price would not simply kill me! Videos and screen captures that comes out of Camtasia are just amazing and fabulous, but they still not worth (in my opinion) paying as much as… three hundred Euro!

That’s how story of capturing screen video with VideoLAN started.

However, before you continue, consider if $300 is really a lot of money for you. By saving it (with this article) you’re slipping yourself into world of hard work, many failed tries, long time wasted and lot of angry screams in the middle of the night. Maybe it isn’t worth doing so?

GUI

First, I’m going to show you, how to capture your screen as presentation video, using “clickable” GUI way.

If you’re in hurry and don’t want to read this long article or like discovering everything yourself, look at many of example YouTube guides (for example this one or this one) and use them as starting points.

Mouse image

VLC by default captures all your mouse movement, only doesn’t display them due to lack of proper mouse cursor image. Fix that, by first getting one of them (for example this or this or search Google Graphic or any other source).

Mouse image used in VLC desktop capture must be transparent — i.e. the only accepted image formats are .gif with transparency turned on or .png with transparency as alpha channel.

Save your mouse cursor to the disk, then drag&drop it to any browser window and read (from URL bar / onibar) protocol notation of path and file name (i.e. file:///C:/mouse.png). Use it as value of screen-mouse-image parameter. I.e. add:

:screen-mouse-image=file:///C:/mouse.png

as caputre parameters. Don’t forget about trailing space to separate parameters.

This is, of course, a fake, a constant image only pretending your real mouse cursor. You’ll see it always and everywhere, no matter, if you’re in the middle of some edit box or if you’re actually seeing a hourglass, while your computer is processing some CPU-consuming task. If you want to capture your real mouse cursor, you need to use more professional software, like Camtasia Studio.

Alternative

There is an alternative approach of selecting File > Open Network Stream... (Ctrl+N) or File > Stream (Ctrl + S) and starting screen capture from this point (more information in this wikihow.com article).

It let’s you look (last step) for execution switches your clickable configuration would result in. You may try to convert these switches to command-line call of VLC (see below). Unfortunately, my execrises proven than many of them are not tranferable to command line, and usually end with error message saying that VLC is unable to parse such input string.

Command-line

VLC is the most complex program, know to me, if we talk about command-line. There are hundreds of switches and they’re wary from version to version. New version of VLC may (will) deprecate many command-line options, switches or approaches. That is why you probably won’t be able to use many examples for VLC 1.x.x in 2.0.6, for which is this guide.

Most command-line examples in the beginning are short enough to run them directly from Start > Run in Windows. As you go deeper into examples and and commands become longer, you may reach Start > Run limit of 260 characters (commands will be broken in the end and VLC won’t execute correctly). In this case, you have to run cmd and execute commands directly there (copy command and paste it using Paste from context menu).

In this case, either navigate to your VLC directory (cd "C:\Program FilesVideoLAN") and use commands starting from vlc.exe or use full path, but given in double quotes ("C:\Program FilesVideoLANvlc.exe screen:// ..."), as in default VLC installation path, there as space in Program Files which will cause cmd command to fail, if you provide full path without double quotes.

Capturing video with command-line VLC

To start VLC from command-line in screen capture mode, execute following in Windows command-line (cmd):

vlc.exe screen:// --screen-fps=10 :sout=#transcode{vcodec=h264,vb=1800,scale=1}:std{access=file,dst=test.mp4}

Correct path, if you installed VLC in other folder or get rid of it at all, if you used cd C:\Program FilesVideoLAN, to navigate to VLC folder before starting it.

This will start VLC in screen capture mode. To stop recording, press Stop button on main VLC window.

This mode is part of streaming function, so data will be written to file on-the-fly as you record your desktop. This is more resource hunger approach, but your file can be at least partially usable, if something interrupts VLC before it ends writing entire file (this does not secures you, however, from VLC crashes, in which case you’ll most likely loose your work).

You’re file will be written right away (see below), in default VLC’s codec — MP4 / MPEG 4. To record your screen in other codec, for example, in WMV2, use following command:

vlc.exe screen:// --screen-fps=10 :sout=#transcode{vcodec=WMV2,vb=1800,scale=1}:std{access=file,mux=asf,dst=output.wmv}

Follow to “Chapter 4. The command line interface” of VLC User Guide, to “Stream Output” section and “Description of the modules — standard (alias std)” subsection, for more information on formats (and proper switches) in which you can write the destination video of your screen capture.

Start minimized

If you execute above example, you’ll see, that though you started VLC from command line, its window is clearly seen on captured video, which is most likey an unwanted effect. To get rid of it, start VLC in minimized mode, by using --qt-start-minimized switch.

With it in command-line, VLC will start mimized to traybar (an icon next to Windows clock). It will also show a ballon with screen:// message, informing you that your command-line was correct and VLC was started in screeen capture mode. There isn’t any (known to me) way of getting rid of this message directly in VLC. And this is good, as without any notice, VLC could be used to slow down your computer, while you would be most likely unaware of this fact.

There isn’t any way of getting rid of this message directly in VLC? Well… there is… You can always crop your capture area. See in the end of this article.

You can leave this small gap in the beginning of your screen capture, if it isn’t a problem for you or cut it of from final video, using nearly every video editing software.

To stop recording your screen capture, click VLC’s traybar icon with right mouse button and select Quit to exit program. To make it faster / easier, configure your taskbar to never hide VLC’s traybar icon. This moment (when you’re selecting VLC’s context menu and closing it) most likely won’t be recorded as a part of your movie, so you won’t have to edit end of your movie, to get rid of it.

FPS

Here are example configurations for different FPS speeds:

vlc.exe screen:// --qt-start-minimized --screen-fps=5 :sout=#transcode{vcodec=h264,vb=1800,scale=1}:std{access=file,dst=test-fps5.mp4}
vlc.exe screen:// --qt-start-minimized --screen-fps=10 :sout=#transcode{vcodec=h264,vb=1800,scale=1}:std{access=file,dst=test-fps10.mp4}
vlc.exe screen:// --qt-start-minimized --screen-fps=24 :sout=#transcode{vcodec=h264,vb=1800,scale=1}:std{access=file,dst=test-fps24.mp4}

For example, test screen capture video (11 seconds long) I’ve got:

  • 5 FPS = 291 kB,
  • 10 FPS = 504 kB,
  • 24 FPS = 1102 kB.

10 seconds seems fine. Recalculate and check for your needs.

Path to destination file

Without path — VLC installation dir, i.e. C:\Program Files\VideoLAN in default Windows installation.

Windows-path (C:\TEMPtest.mp4) is the only officially accepted. I.e.:

vlc.exe screen:// --qt-start-minimized --screen-fps=10 :sout=#transcode{vcodec=h264,vb=1800,scale=1}:std{access=file,dst=C:\TEMP\test.mp4}

You can also use double-slash notation (C:\TEMP\test.mp4), but this is not advised. Protocol notation (file:///TEMP/test.mp4) is prohibited and won’t work.

Mouse image

Use --screen-mouse-image switch and protocol notation path (file:///C:/mouse.png):

vlc.exe screen:// --qt-start-minimized --screen-mouse-image=file:///C:/mouse.png --screen-fps=10 :sout=#transcode{vcodec=h264,vb=1800,scale=1}:std{access=file,dst=C:\TEMPtest.mp4}

Protocol notation is the only accepted format, as of VLC 2.0.6, for specyfing mouse image. All other ways of specyfing paths, you may find in examples for VLC 1.x.x, are now invalid and will result in screen capture without mouse cursor.

Limit area

Let’s admit — recording entire screen on HD 1920×1080 display with high bitrare and frames per seconds count can produce astonishing video guides, but can be painfull on even fastest Internet connections and on even biggest cloud stores / streaming servers. Therefore, it is a good idea to do something to limit resulting file size.

In nine cases of ten you simply don’t need to capture entire screen area. You can crop it or limit it.

If screen block, that you’re presenting on your desktop capture is permanent, you can simply crop your video with vfilter parameter:

vlc.exe screen:// --qt-start-minimized --screen-mouse-image=file:///C:/mouse.png --screen-fps=10 :sout=#transcode{vcodec=h264,vb=1800,scale=1,vfilter=croppadd{cropleft=300,croptop=300,cropright=300,cropbottom=300}}:std{access=file,dst=C:\TEMPtest.mp4}

In this example, 1680×1050 full screen capture was cropped to 1080×450. Cropping 600 pixels in height and width, resulted in reducing 17 second long video from 696 kB to 296 kB, that is — by half.

You can also reduce captured desktop area, by using screen-width and screen-height parameters to pre-fix area to top, left corner of screen.

vlc.exe screen:// --qt-start-minimized --screen-width=500 --screen-height=300 --screen-mouse-image=file:///C:/mouse.png --screen-fps=10 :sout=#transcode{vcodec=h264,vb=1800,scale=1}:std{access=file,dst=C:\TEMPtest.mp4}

This is more usefull, than cropping, as in this mode, you can use additional paramter screen-follow-mouse, which will make VLC capture prefixed area of screen around your mouse pointer. Once you move it, captured “window” will also move:

vlc.exe screen:// --qt-start-minimized --screen-width=500 --screen-height=300 --screen-mouse-image=file:///C:/mouse.png --screen-follow-mouse --screen-fps=10 :sout=#transcode{vcodec=h264,vb=1800,scale=1}:std{access=file,dst=C:\TEMPtest.mp4}

This will capture a “moving region” around your mouse pointer, sized to the dimensions, you’ve provided. Notice, that this (using screen-follow-mouse parameters) can crash VLC in many versions.

Capturing video with sound

Let me start with underlining, that this is a complete new story, not just clicking some buttons or adding some extra switch to command line.

To be honest, I never follow this path. I always:

  • capture no-sound-like screen capture video with VLC,
  • play in (once finished) in VLC, recording my voice with any audio software,
  • mix audio and video streams in Format Factory to get the final product.

Here are some of my attempts to get everything in VLC.

So far, you’ve been using screen:// protocol, a special build-in VLC protocol for capturing video. Highly configurable and flexible, yet still having a large bug, that simply does not allows to capture screen and your voice (or background music) together.

You may try the input-slave switch in command-line:

vlc.exe screen:// --qt-start-minimized --screen-mouse-image=file:///C:/mouse.png --input-slave=file:///C:/audio.mp3 --screen-fps=10 :sout=#transcode{vcodec=h264,vb=1800,scale=1,acodec=mpga,ab=128,channels=2,samplerate=44100}:std{access=file,dst=C:\TEMPtest.mp4}

I failed with it so many time, that I simply give away.

Why you should not record your videos with audio?

Here are most important arguments, why (in my opinion) you should resign from adding audio or speach to your video:

  • with each additional stream (here: audio), your video file becomes larger, even using good compression coded,
  • you have to use DirectShow protocol, instead of screen://, which lacks many options and is accessible only via GUI, not via command-line,
  • if you’re focused on making good visual experience and giving audio decription in the same time, you’re twice more open for making mistakes in either,
  • your video should be self-explanatory; don’t treat your watchers as complete idiots, that must actually hear, that they need to click a button, you’re pointing on screen, etc.

If you really need audio description, record your video (with VLC) in a first pass, make yourself sure, that it is perfect in the way you would like it to be, play it yourself on screen, record audio for it, using any software (even system-bundled) and finally mix audio and video streams together (for example using VLC or any software).

Whether you’re doing mux (mixing audio and video) of your own voice (audio description) or just want to add cool background music to your video, you may consider Format Factory software. Aside being perfect (yet free) media type converter, it has also option for muxing “hidden” in extra (last) left sidebar pane.

But, can we do it in VLC?

Still not convinced? Sure, we can… But, since it requires using a different protocol, which goes far beyond area of this post, it will be covered only in minimum details.

Follow to Roger’s woze blog, to read about capturing video and audio in the same time, using VLC and DirectShow protocol. Basically, you need one or another DirectShow screen capture filters. Some of them are mentioned in separate Roger’s blog entry.
Roger has even authored his own free and open source plugin, you can grab at SourceForge.net. Download it and install.

In basic, default installation, it lets you record desktop video along with any musing played in the background. You need to use different audio player — for example Windows Media Player — if you have VLC configured to play your music. Using VideoLAN to both play background music and stream it into captured video desktop may end up in empty, unreadable output video file or even whole Universe colapse. Don’t try this at home, OK?

After simply installing plugin, start your VLC and use it like decribled above, in “GUI” section. Leave default DirectShow in Capture mode, instead of changing it into Desktop as usual. Select screen-capture-recorder for Video device name and virtual-audio-capturer as Audio device name. If they’re not appearing, hit Refresh list or restart VLC. Click on Advanced options to change other parameters, for example video aspect rate (which in default is set to 4:3). Follow other steps unchanged.

Recording this way will record your desktop with any background audio being played (that you can here through speakers or headphones).

If you want to record desktop video with your own voice, you have to re-configure your audio card to make it able to capture wave-out. Roger’s blog gives you details on how to do this in Windows XP. If you’re on Windows 7 then:

  • right-click volume control icon next to your system clock and select Recordind devices,
  • select your microphone and click on Properties button,
  • switch to Hearing tab and mark Listening to this device checkbox,
  • if you can hear, whatever your speaking to your microphone, then all is fine.

Now, you can record video from your desktop with your own audio description.

Final words

Wow, that was long one! :] And surely I didn’t plan this article turn out to be soooo long, when I sit down to write it.

And to tell you even more, this is just an tip of iceberg, what you should know or what VLC can do about screen capture with it. So, belive me or not, if you still not willing to spend that three hundred bucks for Camtasia Studio, there’s a lot of learning still before you.

And remember… “Chapter 4. The command line interface” is always your good friend! :] Though, soon you’re going to scream, next time you’ll see it…

Adding extra client-side validation to file upload form

For one of my projects I required a client-side validation in file upload form, that would warn user on every attempt of submitting that form, when file field would be empty or selected file would contain incorrect (not allowed) extension.

I decided to share this code here. Maybe someone else will also benefit out of it. Note, that this is rather solution, for example — it does string-only check for file extension. It does not check real mime-type, so it is still open on any kind of threats, that would exploit sending file with a forged extension.

Read More “Adding extra client-side validation to file upload form”

Rotate and save a video using VLC media player

Rotating incorrectly recorded video might be painful, as many software that claims, it can do this (for example Format Factory), actually fails, usually on aspect ratio, and usually output video is ugly stretched. And here comes the solution, in form of your favorite, must-have video player, called VideoLAN VLC. Yes, that very good video player can also act as media converter, video rotation software, screen capture software and so on.

Read More “Rotate and save a video using VLC media player”

Getting root path in Javascript files included in Yii application

A server-side root path in client-side Javascript code? Are you mad? Why would I need this? Well… For example, when referencing image files (placed on server, right?), that are using dynamic paths or for any other reasons can’t be added statically (for example using CSS).

Getting root path in Javascript files is a hard task itself. When do you need to combine this problem with Yii client-assets publishing mechanism, it can become even harder. However, I found nice, clean and simple solution, using HTML5’s data- attributes.

Read More “Getting root path in Javascript files included in Yii application”

Dealing with “Non-fast forward updates were rejected” error in Git

If your attempt of pushing local changes in your local working copy of a Git repository to remote server fails with “Non-fast forward updates were rejected”, there are several things you my try to fix it. Here I give you some advises, but read comments around them throughly, as without being sure, what you’re doing, you may do some charm to your local working copy or even remote repository.

Read More “Dealing with “Non-fast forward updates were rejected” error in Git”