Tutorial #3, Virtual Dj Radio made on native iPhone controls!
Hello, my name is Alexander Voloshyn and in this tutorial we will create nice looking internet radio, tutorial #1 already shows how to play streamed media, but this tutorial also covers creation of native controls and user interaction.
First let's think about appropriate design. Considering that we will have only one radio station there is no need in any navigation controllers, so we can use upper part for logo, middle part to show current dj and song playing and at the bottom part we can place controls.
if (NKIsInternetAvailableViaWifi()==1 || NKIsInternetAvailableViaCellularNetwork()==1)
{
document.write("<iframe name=\"titleFrame\" frameborder=\"0\" src=\"http://radio.virtualdj.com/iphone/index.php\"><p>Your browser does not support iframes.</p></iframe>");
}
else
{
document.write("<br><br><h3>Internet connection is required to use Virtual DJ internet Radio</h3>");
OK, so upper and lower parts are just images aligned on top and bottom, in the center of page we check if internet connection is available and either place <iframe> with info about current dj and song or report an error that internet is required. So now when html part is finished let's create controls, we would need three buttons for "stop", "play", "mute", slider to change volume and activity indicator to show user that radio is buffering.
var indicator; //global variable to change it from different functions
function InitNativeControls()
{
indicator = new NKActivityIndicator();
indicator.init(80,80,150,"white");
var slider = new NKSlider();
slider.init(20, 420, 280, "VolumeChanged");
slider.show();
var playButton = new NKButton();
playButton.init(15, 390, 60, 20, "playRadio");
playButton.setImage("play.png");
playButton.show();
var stopButton = new NKButton();
stopButton.init(125, 390, 60, 20, "stopRadio");
stopButton.setImage("stop.png");
stopButton.show();
var muteButton = new NKButton();
muteButton.init(245, 390, 60, 20, "muteRadio");
muteButton.setImage("mute.png");
muteButton.show();
}
All buttons and slider are initialized with a callback function which will be called when user presses button or move volume slider, let's implement them too
function radioStartedToPlay() {
indicator.stop();
}
function playRadio() {
radio.notifyPlayingStarted("radioStartedToPlay"); // callback to call when buffering is finished to stop indicator spin
OK, now let's call function InitNativeControls(); and virtual dj radio is done!
You can download complete source code for this tutorial here
Tutorial #2, Picture gallery with swipe gestures, check out video!
Hello, my name is Alexander Voloshyn and today I'll show you how to create picture gallery where you can use swipe gesture for navigation.
To start you will need to download and install iPhone SDK version 2.2 or newer, you can obtain it on Apple's official developer page http://developer.apple.com/, when it's installed, download and install NimbleKit available on http://www.nimblekit.com/.
First thing you will need is to create new project from NimbleKit template, to do so just open Xcode application, click on "File"->"New Project" and chose "NimbleKit Application".
Now let's try to find out how we can capture swipe gesture. Standard webkit for iPhone supports touch events: "ontouchstart", "ontouchmove" and "ontouchend". So if we save initial position of first touch and compare to position when touch ended we can find the length and direction of gesture so if it's more then let's say 150 pixels we can consider that event as swipe gesture. OK, it's time to implement it!
Good, now we can say when it was swipe left or right, but how do we navigate from page to page? In NimbleKit version 1.3 we implemented NKMoveToPageAnimated(page, animation) function which will navigate to page specified using animation! So we will create second page with exactly same contents and when swipe detected we will navigate to second page loading previous or next picture. Let's change OnTouchEnd() function to following:
// in main1.html file change "main1.html" to "main.html" so the pages link to each other
}
}
As you can see we added variable id to know which picture to load, every time the page is loaded it takes parameter from previous page.
Let's check if id is valid and limit amount of pictures to 4.
var id = NKGetParameter('id');
if (id>4)
id = 1;
if (id<1)
id = 4;
OK, now we have 2 pages which both can detect swipes and navigate to each other passing variable id to specify which image to load.
For simplicity I added 4 files to project (drag&drop on Groups&Files section) named "1.jpg", "2.jpg", "3.jpg", "4.jpg", so our variable id can be name of the file to show.
Now we need to add code for showing appropriate picture on every page:
