Shai Raiten's Blog : How To

SignalR Isn’t Working on Samsung Galaxy 3

shair — Tue, 14 May 2013 06:16:21 GMT

I know you think the title is wired, because what is the relation between SignalR (WebSockets) and a specific device such as Samsung Galaxy 3?

ASP.NET SignalR is a new library for ASP.NET developers that makes it incredibly simple to add real-time web functionality to your applications. What is "real-time web" functionality? It's the ability to have your server-side code push content to the connected clients as it happens, in real-time.

While working on a project working with SignalR we faced a problem, the following code start the connection with the hub but the following code isn’t working, neither success or failed message appear.

$.connection.hub.start().done(function () {
alert("Connection Working!");
}).fail(function (e) {
alert("Connection Isn't Working... :-(");
});

Tried to debug the code I didn’t understand why the fail function isn’t invoked… I tired to change the transport layer to polling as part of the testing and it works……

connection.start({ transport: 'longPolling']})

I said to my self this is strange, After all Galaxy 3 supports should WebSockets and beside that this what SignalR should do if the browser isn’t supporting a specific transport layer.

From this part of I’ve understand the problem related to SignalR but still didn’t understand why that same code works on Nexus 4 and some other Android devices.

So I made the following test, I’ve open the Galaxy 3 browser and navigate to “http://www.websocket.org/echo.html” to check support for WebSockets , and surprise something isn’t working as it should – The log field didn’t showed anything (Again on different devices this works just fine).

So first thing I’ve modified jquery.signalR.js file, I’ve added a time out around the WebSockets connection, this solved the problem…

Then after a short search I found this Bug: Persistent Connection fails with IIS8 on Android Stock Browser

And this guy add his fix for the problem here - https://github.com/SignalR/SignalR/commit/6d892a3cdeb94099ed06b978ba66ec13fce521ae

You can download the fix and implementing your own timeout around the connection start.

Enjoy

פיתוח משחקים ב JavaScript - מבוסס על משחק סופר 8 - חלק 5

shair — Sun, 24 Mar 2013 10:56:42 GMT

זהו החלק האחרון בנושא סופר 8 , אני אמשיך להרחיב בנושא JavaScript ופיתוח מחשקים בכללי אבל היום אני רוצה לסגור את הדברים הבסיסיים בפיתוח משחק סופר 8.

בחלק הקודם פיתוח משחקים ב JavaScript - מבוסס על משחק סופר 8 - חלק 4 דיברנו על איך להפוך את המשחק ליותר אינטרקטיבי ע”י הוספת רקעים ואלמנטים נוספים למשחק, ראינו איך אפשר בצורה קלה ונוחה לטעון את כל הגרפיקה (ועוד) בעזרת ספריית PreloadJS ולהתחיל את המשחק כאשר קיבלנו את כל הדברים בנחוצים למשחק.

בפוסט היום נראה איך אפשר לבצע קפיצה של המשתמש (לא רק אנימציה) וכמובן אחר הנושאים החשובים ביותר- התנגשות עם אובייקטים – Collision.

לדוגמא המלאה

בהמשך מהפוסט הקודם נוסיף את הקוד הבא תחת פונקציית handleComplete על מנת לטעון אבן למשחק שלנו:

case "rock":
    var g = new createjs.Graphics()
    g.beginBitmapFill(result);
    g.drawRect(0, 0, 45, 44)
    rock = new createjs.Shape(g);
    rock.y = h - 119;
    rock.x = w;
    rock.height = 44;
    rock.width = 45;
    break;

כעת נשאר להוסיף אותה לאובייקט Stage על מנת שתופיע במשחק:

stage.addChild(sky, ground, hill, sun, player, rock);

עכשיו שיש אבן במשחק בואו נכניס אפשרות תלקפוץ מעליה, על מנת לבצע זאת נירשם ל – stagemousedown על מנת לתפוס לחיצה של העכבר של המשחק, כאשר נקבל פעולה זאת ננגן את פעולה הקפיצה ונשנה את הערך של isJumping ל – true.

נוסיף את הקוד הבא תחת פונקציית handleComplete לפני הפעלת הטיימר – setFPS.

stage.addEventListener("stagemousedown", function () {
    if (isJumping) return;
    play("jump_h");
    gameOver = false;
    isJumping = true;
});

כעת נוסיף את הקוד שישנה את מיקום הדמות על ציר Y כך שנוכל לקפוץ מעל האבן, הקוד הבא אינו הפתרון הנכון יותר אבל לדוגמא שלנו הוא פשוט ועובד, בעיקרון אפשר להוסיף הרבה קוד נוסף לביצוע פעולה זאת על ידי טיימר או מיקום הדמות אבל בשבילנו זה מספיק כרגע.

הקוד בודק שהדמות לא נמצאת באוויר (אין קפיצה כפולה), ומפעיל טיימר של שניה אחת, לאחר אותה שניה הטיימר יחזיר את הדמות לקרקע, אבל לפני זה המאפיין ה – y של השחקן יעלה ב – 4 פיקסלים כלפי מעלה עד לגובה מקסימלי, כאשר הדמות תגיע לגובה מקסימלי הדמות תתחיל בירידה כלפי מטה.

function handleJump() {
    if (isJumping) {
        if (onTheAir == null) {
            onTheAir = setTimeout(function () {
                isJumping = false;
                player.y = playerBaseY;
                onTheAir = null;
                goingDown = false;
                top = false;
            }, 1000);
        }

        if (goingDown && player.y <= playerBaseY) {
            player.y += 4;
        }
        else {
            player.y -= 4;
            if (player.y <= maxJumpHeight)
                goingDown = true;
        }
    }
}

על מנת לבצע את הקוד נוסיף קריאה לפונקציית handleJump תחת tick:

function tick() {
    handleJump();
    ...
}

כעת נוכל לבצע קפיצה בעזרת לחיצה על מקש שמאלי על המשחק.

דבר אחרון שנשאר לנו הוא להתמודד עם התנגשות של שני אובייקטים במשחק, כלומר עם השחקן יתנגש באבן אז הדמות תיפול.

ממליץ לכם לקרוא - Object/Object Intersection, ולהתעניין קצת יותר בנושא כי הוא בהחלט קצת מורכב, הרעיון המרכזי הוא לדעת מתי הדמות או אבן מתנגשות אחת בשניה, יש נוסחאות שונות לחשב את זה (תלוי גם עם הדמות מרובעות או מעגליות).

function checkRectIntersection(r1, r2) {
    var deltax = r1.x - r2.x;
    var deltay = r1.y - r2.y;
    var dist = 25;
    if (Math.abs(deltax) < dist && Math.abs(deltay) < dist) {
        if (Math.sqrt(deltax * deltax + deltay * deltay) < dist) {
            return true;
        }
    }
    return false;
}

עכשיו לחלק הקוד האחרון של המשחק, פונקציית HandleCollision אשר תקרא מתוך פונקציית tick:

function HandleCollisions() {
    var a = getCollideableItemBounds(player);
    var b = getCollideableItemBounds(rock);

    var oppss = checkRectIntersection(a, b);

    if (oppss && !gameOver) {
        console.log(oppss);
        gameOver = true;
        play("fall_h");
    }
}

וסיימנו…. כעת כאשר הדמות תגיע למרחב של האבן המשחק יעצר ודמות תיפול לרצפה, לחיצה על קפיצה תמשיך את המשחק.

לדוגמא המלאה

פיתוח משחקים ב JavaScript - מבוסס על משחק סופר 8 - חלק 4

shair — Sun, 17 Mar 2013 08:51:20 GMT

בפוסט הקודם חלק 3 – פיתוח משחקים ב – JavaScript דיברנו על איך להזיז את הדמות במרחב המשחק ואיך לשנות את כיון התמונה שתתאים לכיון שהדמות הולכת אליו.

בפוסט הזה נדבר על יצירת אווירה (רקע ואלמנטים נוספים) למשחק, לא סתם איך להוסיף תמונות רקע נדבר על איך לגרום לרקע לנוע יחד עם הדמות עלל מנת ליצור תחושה של תנועה מתמשכת.

בפוסט זה נשתמש בספריה נוספת שנקראת – PreloadJS, שגם שייכת לסט הספריות של CreateJS. (עד עכשיו השתמשנו ב – EASEJS שגם משתייכת לשם)

ספריית PreloadJS, מאפשרת טעינה של קבצי מוסיקה, תמונות ברקע ומאפשרת לנו לשלוט מתי כל חלקי המשחק נטענו בהצלחה.

נוסיף לדף שלנו את הקריאה הבאה, אשר תאפשר לנו להשתמש ביכולות הטעינה של PreloadJS.

 <script type="text/javascript" src="js/preloadjs-0.3.0.min.js"></script>

כעת נוסיף פונקצייה חדשה בשם start ונוסיף אליה את הקוד הבא:

function start() {           
    manifest = [
        { src: "assets/sky.png", id: "sky" },
        { src: "assets/ground.png", id: "ground" },
        { src: "assets/logo.png", id: "sun" },
        { src: "assets/hill.png", id: "hill" }
    ];

    loader = new createjs.LoadQueue(false);
    loader.onFileLoad = handleFileLoad;
    loader.onComplete = handleComplete;
    loader.loadManifest(manifest);
}

עפי שניתן לראות בדוגמא מעלה, אנחנו מגדירים קובץ manifest (כמובן זה לא חייב להיות השם), בו אנחנו מגדירים את כל התכנים שאנו מעוניינים לטעון עבור המשחק.

כאשר ההורדה תסתיים נעבור לפונקציית handleComplete, עבור כל תוכן שנטען בהצלחה נגיע ל – handleFileLoad ובה נוסיף את התוכן החדש למערך התמונות שלנו.

var assets = [];
function handleFileLoad(event) {
    assets.push(event.item);
}

לפני שנמשיך לאיך מציגים את התמונות הנוספות אציג את הרקעים שנשתמש בהם:

רצפה		כפי שניתן לראות מהתמונה מדובר על חלק קטן של הריצפה – אנחנו נראה איך לשכפל אותו בצורה קלה על מנת ליצור רצפה רצופה לאורך המשחק.
הרים
שמש (לוגו של Super 8)
שמיים

אחרי שכל הקבצים נטענו והוכנסו למערך assets, אשר להתחיל למקם אותם על המסך.

נוסיף את פונקציית handleComplete, ונרוץ על כל האובייקטים שהוכנסו ל – assets, ספריית PreloadJS לא רק טענה את התמונות ברקע אלא גם שייכה אותם לקבוצות לפי סוג הקובץ וכל אובייקט שנטען קיבל מאפיין ייחודי (id), בשורות הראשונות אנחנו נוציא את מאפיין ה – id של כל אובייקט שנטען ונשתמש בפונקציית getResult על מנת לקבל את האובייקט.

כאשר נגיע לאובייקט – ground, אנחנו רוצים לצייר רצפה לאורך כל אורך המשחק שלנו, אז ראשית ניצור אובייקט חדש מסוג – Shape ונצייר עליו את התמונה, שימו לב שאורך התמונה ה – w שמציין את אורך המשחק (Canvas), התוצאה שאנחנו נראה לא תהיה מריחה של התמונה ל – 600 פיקסלים אלא שיכפול של התמונה לאורך זה.

לבסוף נוסיף את אובייקט ה – ground ל – stage (כפי שעשינו בפוסטים קודמים) ונתחיל את שעון המשחק.

דוגמא 1

function handleComplete() {
    buildPlayerSprite();

    for (var i = 0; i < assets.length; i++) {
        var item = assets[i];
        var _id = item.id;
        var result = loader.getResult(_id);

        if (item.type == createjs.LoadQueue.IMAGE) {
            var bmp = new createjs.Bitmap(result);
        }

        switch (_id) {          
            case "ground":
                ground = new createjs.Shape();
                var g = ground.graphics;
                g.beginBitmapFill(result);
                g.drawRect(0, 0, w, 79);
                ground.y = h - 79;
                break;          
        }
    }

    stage.addChild(ground, player);

    player.gotoAndPlay("walk_h");
    
    var fieldValue = id("fps");
    var fps = parseInt(fieldValue.value);

    createjs.Ticker.setFPS(fps);
    createjs.Ticker.useRAF = true;
    createjs.Ticker.addEventListener("tick", tick);
}

דוגמא 1

הבעיה כרגע אין לי תחושה של התקדמות, השחקן מתקדם אבל הרצפה לא, על מנת לעשת זאת נצטרך להזיז את הרצפה יחד עם הדמות על מנת ליצור את האפקט.

בתוך פונקציית tick, נוסיף את השורה הבאה – אשר תזיז את הרצפה 10 פיקסלים לאחור.

function tick() {
          var outside = w + 20;
        var position = player.x + player.vX;

        player.x = (position >= outside) ? -200 : position;
        ground.x = (ground.x - 10);

    }
    stage.update();
}

דוגמא – 2

עכשיו אפשר לראות את הרצפה מתקדמת יחד עם תזוזת הדמות אבל היא חתוכה בהתחלה שלה, מה שצריך לעשות הוא להגדיל את רוחב הרצפה בצורה הבאה:

case "ground":
    ground = new createjs.Shape();
    var g = ground.graphics;
    g.beginBitmapFill(result);
    g.drawRect(0, 0, w+330, 79);
    ground.y = h - 79;
    break;

פשוט הוספתי עוד 330 פיקסלים לרוחב התמונה, אבל גם זה לא פתור את הבעיה, אחרי הכל הרצפה עדיין תעלם מהמסך, נוסיף את השורה הבא תחת פונקציית tick ובעזרת מודולו של תוספת הרוחב שהוספנו נדאג שה – x לעולם לא יצא מגבולות המסך.

ground.x = (ground.x - 10) % 330;

דוגמא - 3

כעת שהבנו את הדוגמא הבסיסית נוסיף את שאר האובייקט למשחק:

* שימו לב שנרשמתי ל - stage.addEventListener("stagemousedown, אשר יאפשר לנו לדעת מתי לחצו על ב – Canvas ונוכל לבצע פעולות קפיצה.

function handleComplete() {
    buildPlayerSprite();

    for (var i = 0; i < assets.length; i++) {
        var item = assets[i];
        var _id = item.id;
        var result = loader.getResult(_id);

        if (item.type == createjs.LoadQueue.IMAGE) {
            var bmp = new createjs.Bitmap(result);
        }

        switch (_id) {
            case "sky":
                var g = new createjs.Graphics()
                g.beginBitmapFill(result);
                g.drawRect(0, 0, w * 2, h)
                sky = new createjs.Shape(g);
                break;
            case "ground":
                ground = new createjs.Shape();
                var g = ground.graphics;
                g.beginBitmapFill(result);
                g.drawRect(0, 0, w + 330, 79);
                ground.y = h - 79;
                break;
            case "hill":
                hill = new createjs.Shape(new createjs.Graphics().beginBitmapFill(result).drawRect(0, 0, w, 159));
                hill.x = 0;
                hill.scaleX = 3;
                hill.y = 163;
                break;
            case "sun":
                var g = new createjs.Graphics();
                g.beginBitmapFill(result);
                g.drawRect(0, 0, 129, 129);
                sun = new createjs.Shape(g);
                sun.x = w;
                sun.y = 37;
                break;
        }
    }

    stage.addChild(sky, ground, hill, sun, player);

    player.gotoAndPlay("walk_h");
    stage.addEventListener("stagemousedown", function () {
        play("jump_h");
    });

    var fieldValue = id("fps");
    var fps = parseInt(fieldValue.value);

    createjs.Ticker.setFPS(fps);
    createjs.Ticker.useRAF = true;
    createjs.Ticker.addEventListener("tick", tick);
}

לבסוף נשנה את פונקציית tick, שתזיז את שאר האובייקטים במשחק.

ב – tick יש חישוב של outside , כלומר מתי האובייקט נמצא מחוץ למסך, כאשר נראה שאובייקט יצא החוצה נוכל להחזיר אותו ע”י שינוי מאפיין - x

function tick() {
    if (_action.indexOf("walk") != -1 || _action.indexOf("jump") != -1) {

        var outside = w + 20;
        var position = player.x + player.vX;

        player.x = (position >= outside) ? -200 : position;

        sky.x = (sky.x - 5) % w;
        hill.x = (hill.x - 2) % w;
        ground.x = (ground.x - 10) % 330;

        sun.x = (sun.x - 1);
        if (sun.x <= -135) { sun.x = outside + 50; }

    }
    stage.update();
}

לדוגמא המלאה

פיתוח משחקים ב JavaScript - מבוסס על משחק סופר 8 - חלק 3

shair — Thu, 14 Mar 2013 07:14:10 GMT

בפוסט הקודם חלק 2 בפיתוח משחקים ב – JavaScript דיברנו על מה זה Sprite ואיך בעזרת ספרייה EASEJS להציג רצף תמונות מאותו מקבץ תמונות על מנת להציג אנימציה למשתמש.

בפוסט הזה נדבר על איך להזיז את הדמות במרחב על פי הפעולה שהדמות מבצעת.

המשימה הראשונה שלנו היא להזיז את הדמות במרחב המשחק, על מנת לבצע זאת נשנה את פונקציית tick באופן הבא:

ראשית, נגדיר תחום משחק – תחום המשחק ימנע מהדמות שלנו לבצע מגבולות המשחק.

בתוך פונקציית tick נוסיף את הקוד הבא:

if (player.x >= id("gameCanvas").width - playerWH) {
    // You reached the end -  We need to walk left
}

if (player.x < playerWH) {
    // You reached the end -  We need to walk right
}

הקוד הנ”ל יבוצע כאשר מאפיין ה – x של הדמות שלנו (player) גדול מרוחב אובייקט ה – gameCanvas, וכאשר מאפיין ה – x של הדמות קטן מרוחב הדמות.

עכשיו נזיז את הדמות במרחב לפי תנאים אלו:

if (player.x >= id("gameCanvas").width - playerWH) {
    // You reached the end -  We need to walk left
    player.direction = -90;
}

if (player.x < playerWH) {
    // You reached the end -  We need to walk right
    player.direction = 90;
}

הקוד הנ”ל משנה את כיון הדמות ל – 90 מעלות או 90- מעלות לפי כיון ההליכה של הדמות.

מה שנשאר לנו עכשיו זה להזיז את הדמות ע”י שינוי מאפיין ה – x של אובייקט player, נוסיף את הקוד הבא לאחר לפי הקריאה ל – stage.update, הקוד אחראי על שינוי מאפיין ה – x בהתאם לכיון הדמות.

vX – תאוצה על ציר – x , ניתן לשינוי וישפיע את התקדמות הדמות במרחב.

player.direction == 90 ? player.x += player.vX : player.x -= player.vX;

עכשיו עומדת לפנינו בעיה, כאשר הדמות זזה לכיון ימין של המסך היא לא מתהפכת.

דוגמא באתר

אפשר ליצור גרפיקה תואמת לכיוונים השונים אבל זה לא פתרון יעיל, גם שימוש ב – scaleX ישפיע באופן רע על ביצועי המשחק, על מנת להפוך את הדמות נשתמש בפונקציית addFlippedFrames שכל מטרתה היא הפיכת הדמות בצורה אופקית ו\או אנכית.

נוסיף את השורה הבאה לפני קריאה ל - player = new createjs.BitmapAnimation.

//( spriteSheet  horizontal  vertical  both ) 
createjs.SpriteSheetUtils.addFlippedFrames(playerSprite, true, false, false);

פונקציית addFlippedFrames תשכפל את כל התמונות ב – Sprite ותהפוך אותם בצורה אופקית ו\או בצורה אנכית.

כעת בקריאה לפעולה של הדמות (Jump, Walk וכו) נוכל לראות שכל הפעולות של הדמות (animations) שוכפלו ונוסף לשום הפעולה – h_.

על מנת לבצע הליכה שמאלה נקרא לפונקציית gotoAndPlay ונעביר את הפעולה עם סיומת h_

function tick() {
    if (_action.indexOf("walk") != -1) {
        if (player.x >= id("gameCanvas").width - playerWH) {
            // You reached the end -  We need to walk left
            player.direction = -90;
            player.gotoAndPlay("walk")
        }

        if (player.x < playerWH) {
            // You reached the end -  We need to walk right
            player.direction = 90;
            player.gotoAndPlay("walk_h");
        }

        // Moving the sprite based on the direction & the speed
        player.direction == 90 ? player.x += player.vX : player.x -= player.vX;

    }
    stage.update();
}

דוגמא באתר

פיתוח משחקים ב JavaScript - מבוסס על משחק סופר 8 - חלק 2

shair — Sun, 10 Mar 2013 12:22:00 GMT

בפוסט הקודם חלק 1 – פיתוח משחקים ב – JavaScript דיברנו על פיתוח משחקים ב – JavaScript בעזרת ספרית EASEJS, ספריה המאפשרת לנו לעבוד עם אוביקט Canvas של HTML 5 בצורה קלה ונוחה.

בפוסט הקודם הדגמתי איך בצורה קלה נוכל להשתמש באוביקט Stage על מנת להכיל את כל האלמנטים של המשחק ושימוש ב – Ticker על מנת לעדכן את האלמנטים בתוך לולאת המשחק.

הפוסט הזה ירחיב את הנושא ונתקדם למימוש פעולות של השחקן עד ידי הפעלת אנימציה ספציפית לכל פעולה.

לפני שאנחנו נכנסים לקוד צריך להבין להכיר אוביקט חשוב שנקרא – Sprite:

Sprite הוא תמונה דו מימדית המכילה מקבץ של תמונות (כל מקבץ תמונות מתאר פעולה של השחקן – בדוגמא מטה) שנמצאות בשימוש ולשלב אותם לתמונה אחת גדולה שהיא מעין מפה של כל התמונות בייחד. כך התמונה הגדולה נטענת פעם אחת בלבד בעת העליה והצגת התמונות מתבצעת על ידי הצגת חלק מסויים בלבד של אותה תמונה גדולה לפי מיקום על הציר הרוחבי והאופקי.

בעזרת Sprite נוכל ליצור אנימציה בצורה קלה על ידי איור של המצבים השונים שהמשתמש הולך לראות במשחק, השאלה הגדולה איך הופכים את ה – Sprite למשהו שקל לעבוד איתו במשחק שלנו?

ראשית נתחיל בטעינת התמונה, כאשר טעינת התמונה הסתיימה נקרא לפונקציית start.

<script type="text/javascript">
var stage, player, playerImage, _action;
var playerWH = 64;
var frequency = 4;

function init() {
    playerImage = new Image();
    playerImage.src = "assets/Player.png";
    playerImage.onload = start;
}
</script>

חשוב לבצע טעינה לפני התחלת האנימציה, כפי שאנחנו יודעים Sprite יכול להכיל המון המון תמונות ועל כך משקל התמונה יכול להיות גדול, לכן חשוב לוודא שטעינת התמונה הסתיימה לפני שממשיכים לאנימציה.

בפוסט הקודם השתמשנו ב – Bitmap לטעינת התמונה, אבל עכשיו אנחנו לא מעוניינים להוסיף למשחק את כל התמונה אלא רק חלקים ממנה. על מנת לעשות זאת נשתמש באובייקט SpriteSheet שמגיע כחלק מ – EASEJS וכל מטרתו היא טעינה של Sprite.

כפי שניתן לראות מהדוגמא מטה, אנחנו מתחילים ביצירת Stage שיאכלס את האובייקט שלנו, לאחר מכן אנחנו יוצרים אובייקט SpriteSheet ומגדירים את images לתמונה של השחקן, תחת אובייקט frames נגדיר את גודל הדמות (במקרה שלנו 64x64 פיקסלים), ולבסוף והחשוב ביותר וכאן נראה את הכח של SpriteSheet היא הגדרת המצבים של הדמות.

function start() {
    stage = new createjs.Stage(id("gameCanvas"));

    var playerSprite = new createjs.SpriteSheet({
        animations:
        {
            "walk": [0, 9, null],
            "fall": [10, 21, null],
            "jump": [22, 32, null],
            "gamgam": [34, 64, null],
            "stand": [44, 44, null],
            "special_combo": [22, 32, "gamgam"]
        },
        images: [playerImage],
        frames:
            {
                height: playerWH,
                width: playerWH,
                regX: 0,
                regY: 0,
            }
    });
}

בדוגמאת הקוד מעלה נוכל לראות הגדרת מצבים של השחקן (קפיצה, נפילה, עמידה וכו) על ידי ציון התחלת רצף התמונות וסופו.

כפי שניתן לראות בתמונה מטה פעולת “הליכה” מתחילה מתמונה מספר 0 עד תמונה 9.

לאחר שהגדרנו את המצבים השונים נוכל פשוט לקרוא לפעולה בשמה, כלומר – נגן walk או אם נגמר הזמן נגן fall.

“שם הפעולה” : [מיקום תמונת ראשונה, מיקום תמונה אחרונה, פעולה הבאה, תדירות]

ראו דוגמא ל – special_combo, אשר מבצע רצף תמונות של קפיצה ולאחר מכן ממשיך עם פעולת gamgam

דוגמאת קוד באתר

לבסוף על מנת שנוכל לנגן את הפעולות נשתמש באובייקט נוסף בשם BitmapAnimation, אובייקט זה יודע לקבל SpriteSheet ומאפשר קריאה לאנימציות בעזרת פונקציית gotoAndPlay.

תחת הקוד הקודם נוסיף יצירה של BitmapAnimation, נגדיר נקודת התחלה של הדמות, נוכל גם לקבוע מאיזה תמונה להתחיל (currentFrame), ולבסוף נקרא לפונקציית gotoAndPlay ונעביר את שם הפעולה שאנחנו מעוניינים לנגן.

player = new createjs.BitmapAnimation(playerSprite);
player.x = id("gameCanvas").width / 2;
player.y = id("gameCanvas").height - playerWH;
//player.currentFrame = 2;
player.gotoAndPlay("walk");

stage.addChild(player);

createjs.Ticker.setFPS(60);
createjs.Ticker.addEventListener("tick", tick);
}

בדוגמא שבאתר תוכלו לשנות הקצב הריענון, תדירות ואת התאוצה של הדמות.

switch (_id) {
    case "fps":
        createjs.Ticker.setFPS(parseInt(value));
        break;
    case "velocity":
        player.vX = parseInt(value);
        break;
    case "frequency":
        frequency = parseInt(value);
        start();
        break;
}

דוגמאת קוד באתר

איך להגדיר ימי חופש של סבב פיתוח - יום שישי במקום ראשון

shair — Sun, 03 Mar 2013 10:42:00 GMT

אחד השינויים ב – TFS 11 מאפשר לנו להגדיר קבוצות פיתוח והגדרה של סבבי פיתוח עם תאריך התחלה וסיום (Sprint, Iteration וכו).

כאשר מתחילים לתכנן סבב פיתוח נראה חישוב של סה”כ ימי העבודה בסבב הנוכחי, אך סה”כ הימים לא יסתדר לכם כי הוא מחשב שיום ראשון אינו יום עבודה.

זאת שאלה שאני מקבל מהרבה לקוחות – איך אני משנה את תצוגת ה – Backlog שתתאים לימי המנוחה בארץ (שישי ושבת ולא שבת וראשון).

לדוגמא – אם הגדרנו סבב פיתוח מה – 3 לפברואר עד ה – 14 לפברואר – מדובר על 12 ימים סה”כ ו-10 ימי פיתוח אבל אנחנו נראה סה”כ 9 ימי פיתוח. (שני ימי ראשון + יום שבת = שלושה ימי חופש).

על מנת לסגר את TFS 11 שיתמוך בימי החופש בארץ נצטרך להשתמש בפקודת – witadmin שתאפשר לנו לשלוף את קובץ ההגדרות עבור ניהול הפרוייקט.

witadmin exportcommonprocessconfig /collection:http://tfsServer:8080/tfs /f:e:\projectConfig.xml /p:ProjectName

לאחר שהרצנו פקודה זאת ניפתח את הקובץ ונחפש את הטקסט הבא:

  <Weekends>
    <DayOfWeek>Sunday</DayOfWeek>
    <DayOfWeek>Saturday</DayOfWeek>
  </Weekends>
</CommonProjectConfiguration>

נשנה את הערך - Sunday ל – Friday, נשמור את הקובץ.

  <Weekends>
    <DayOfWeek>Friday</DayOfWeek>
    <DayOfWeek>Saturday</DayOfWeek>
  </Weekends>
</CommonProjectConfiguration>

לבסוף יש להריץ את אותה הפקודה אך במקום export נכתוב import:

witadmin importcommonprocessconfig /collection:http://tfsServer:8080/tfs /f:e:\projectConfig.xml /p:ProjectName

עכשיו אפשר להתחיל לעבוד!

תהנו!

הרצת בדיקות על דפדפנים שונים עם Coded UI Testing

shair — Thu, 21 Feb 2013 00:05:53 GMT

לאחרונה נתקלתי במספר טענות שלא ניתן להריץ בדיקות Coded UI על דפדפנים שונים למעט Internet Explorer, אז רק להבהיר – אכן אפשר!

אתם צריכים את הדברים הבאים על מנת שהתוסף יעבוד ויאפשר לכם להריץ בדיקות Coded UI על דפדפנים שונים:

Visual Studio 2012 Update 1
Chrome 21+
Firefox 15+
IE 9/10
Windows 7,8 and Server 2008 R2 SP1

במידה ואתם עובדים עם Visual Studio 2010 אין צורך לשדרג את השרת, רק להתקין Visual Studio 2012 שיכול לעבוד במקביל עם Visual Studio 2010.

ראשית יש להוריד את Selenium components for Coded UI Cross Browser Testing או תוכלו להשתמש ב – Visual Studio Extension

Tools –> Extensions and Updates… –> Online –> Search for = Cross Browser

לאחר ההתקנה יש להוריד את הדברים הבאים:
- Chrome Driver
- Selenium dot net bindings

אחרי שסיימתם להוריד יש להעתיק את התוכן שלהם לספריה המצויינת מטה, מ – Selenium יש להעתיק את התוכן של net40)

"C:\Program Files\Common Files\microsoft shared\VSTT\11.0\UITestExtensionPackages" (for 32 bit machines)
"C:\Program Files (x86)\Common Files\microsoft shared\VSTT\11.0\UITestExtensionPackages" (for 64 bit machines)

אחרי שסיימנו עם ההתקנות כל מה שנשאר הוא להקליט בדיקה בעזרת Coded UI ולשנות את הערך של BrowserWindow.CurrentBrowser לדפדפן שאתם מעוניינים להריץ עליו את הבדיקה.

[TestMethod]
public void Simple_CUIT_For_WebSite()
{
    BrowserWindow.CurrentBrowser = "chrome"; //"firefox"
    //Coded UI Methods.....
}

סיימתם, עכשיו בדיקות Coded UI יכולות לרוץ על FireFox ו – Google Chrome

תהנו!

Run Windows Store Apps From Desktop

shair — Thu, 07 Feb 2013 14:09:49 GMT

When customers ask me how they can run Windows Store app from Desktop usually the answer is – You Can’t, but if you really want there is a way to do that.

The reason I usually answer is You Can’t is because – In order to run Windows Store app from Desktop you need to install Windows App Certification Kit, this pack contains “microsoft.windows.softwarelogo.appxlauncher.exe” file that can run a Windows Store app by his application model id.

So if you plan on publishing your app you can’t assume the ACK is installed on the client machine.

Again, if you really want… Let me show you.

Download Demo Project

Step 1: Getting Started

First create a WPF project and add the following reference:

“C:\Program Files (x86)\Windows Kits\8.0\App Certification Kit\microsoft.windows.softwarelogo.shared.dll”

Step 2: Getting Windows App List

The reason you need to add reference to “Microsoft.Windows.Softwarelogo.Shared.dll” so we can receive the program inventory xml file, this file contains the complete list of all installed Windows Store apps.

Under my PC here is the file location - "C:\\Users\\Shai\\AppData\\Local\\Microsoft\\AppCertKit\\programinventory_e25bb752-e7cf-4fb2-8194-874ba9b91c7b.xml"

As I said this file contains all Windows Store app installed on you machine, each Program element under that file will show all the information regarding that specific app.

So, how do you get the file location?

It’s very simple, using GlobaldataAccessor method from softwarelogo.shared.dll you can get the Program Inventory Location string.

string itemValue = GlobalDataAccessor.GetItemValue("ProgramInventoryLocation", "PRE_PROCESS");

Once you got this file all you need is parsing the XML and create a collection on Apps.

I’ve create a ProductInfo class that will represent each Program in the file, as you can see from the code below I simply taking the attributes and elements from the Program element.

public class ProductInfo : INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;

        private void NotifyPropertyChanged(String propertyName = "")
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
            }
        }

        private string _Status;
        public string Status
        {
            get { return _Status; }
            set
            {
                if (value != this._Status)
                {
                    this._Status = value;
                    NotifyPropertyChanged("Status");
                }
            }
        }

        public string LogoUrl { get; set; }
        public string ProductName { get; set; }
        public string ProductVendor { get; set; }
        public string ProductLanguage { get; set; }
        public string ProductVersion { get; set; }
        public string RootDirPath { get; set; }
        public string Id { get; set; }
        public string PackageFullName { get; set; }

        public ProductInfo(XmlNode xNode)
        {
            var attrib = xNode.Attributes["Name"];
            if (attrib != null && !string.IsNullOrEmpty(attrib.Value)) ProductName = attrib.Value;

            attrib = xNode.Attributes["Version"];
            if (attrib != null && !string.IsNullOrEmpty(attrib.Value)) ProductVersion = attrib.Value;

            attrib = xNode.Attributes["Language"];
            if (attrib != null && !string.IsNullOrEmpty(attrib.Value)) ProductLanguage = attrib.Value;

            attrib = xNode.Attributes["Publisher"];
            if (attrib != null && !string.IsNullOrEmpty(attrib.Value)) ProductVendor = attrib.Value;

            attrib = xNode.Attributes["RootDirPath"];
            if (attrib != null && !string.IsNullOrEmpty(attrib.Value)) RootDirPath = attrib.Value;

            attrib = xNode.Attributes["Id"];
            if (attrib != null && !string.IsNullOrEmpty(attrib.Value)) Id = attrib.Value;

            var node = xNode.SelectSingleNode("/Log/ProgramList/Program[@Id='" + this.Id + "']/Indicators/PackageManifestIndicator/Properties/Logo");
            if (node != null && !string.IsNullOrEmpty(node.InnerText))
            {
                var imgUrl = System.IO.Path.Combine(RootDirPath, node.InnerText);
                if (File.Exists(imgUrl))
                    LogoUrl = imgUrl;
            }

            node = xNode.SelectSingleNode("/Log/ProgramList/Program[@Id='" + this.Id + "']/Indicators/PackageManifestIndicator/PackageManifest");
            if (node != null && !string.IsNullOrEmpty(node.Attributes["PackageFullName"].InnerText))
            {
                PackageFullName = node.Attributes["PackageFullName"].InnerText;
            }
        }
    }

And now, let’s connect the two part together, the first thing is getting the ProgramInventorylocation and after that just load that Xml file and parse it to objects with the information you want.

private void BuildAppsList()
{
    string itemValue = GlobalDataAccessor.GetItemValue("ProgramInventoryLocation", "PRE_PROCESS");

    XmlNodeList list = null;
    var reportDoc = new XmlDocument();
    reportDoc.Load(itemValue);
    ProductList = new ObservableCollection<ProductInfo>();

    list = reportDoc.GetElementsByTagName("Program");
    if (list.Count < 1)
    {
        throw new XmlException();
    }
    foreach (XmlNode node in list)
    {
        ProductInfo item = new ProductInfo(node);
        ProductList.Add(item);
    }

    dbTable.ItemsSource = ProductList;
}

Step 3: Get App User Model Id

Now after you got all Windows Store app installed on your machine it’s time to run them. In order to run a Windows Store app you’ll need to obtain the AppUserModelId, the reason you need to AppUserModelId is because the appxlauncher.exe needs this value in order to launch the application. (Package Name is not enough).

After completing Step 2 we got the App Package Full Name, we need to use this value to find the AppUserModelId from registry.

HKEY_CURRENT_USER\Software\Classes\ActivatableClasses\Package\**PackageFullName**\Server

So let’s add the following method, this method receive a packageFullName string and perform a search in the registry for the AppUserModelId.

public static string GetAppUserModelId(string packageFullName)
{
    string str = string.Empty;
    using (RegistryKey key = Registry.CurrentUser.CreateSubKey(string.Format(@"SOFTWARE\Classes\ActivatableClasses\Package\{0}\Server\",
                                                                               packageFullName)))
    {
        if (key == null) return str;

        var appKeys = from k in key.GetSubKeyNames()
                        where !k.StartsWith("BackgroundTransferHost")
                        select k;

        foreach (var appKey in appKeys)
        {
            using (RegistryKey serverKey = key.OpenSubKey(appKey))
            {
                if (serverKey.GetValue("AppUserModelId") != null)
                {
                    str = serverKey.GetValue("AppUserModelId").ToString();
                    serverKey.Close();
                    break;
                }
            }
        }
    }

    return str;
}

Step 4: Running Windows Store App

After we have the AppUserModelId string for a specific Windows Store app we can run it.

You can test it by opening command line and write the following:

C:\Program Files (x86)\Windows Kits\8.0\App Certification Kit\Microsoft.Windows.SoftwareLogo.AppxLauncher.exe “AppUserModelId”

Start App Button

private void StartApp_Click(object sender, RoutedEventArgs e)
{
    var product = ((System.Windows.Controls.Button)sender).Tag as ProductInfo;
    var appUserModelId = Helpers.GetAppUserModelId(product.PackageFullName);

    var exec = @"C:\Program Files (x86)\Windows Kits\8.0\App Certification Kit\Microsoft.Windows.SoftwareLogo.AppxLauncher.exe";

    if (!File.Exists(exec))
    {
        System.Windows.MessageBox.Show("Please install Windows App Certification Kit for Windows RT");
    }

    var processInfo = new ProcessStartInfo()
    {
        Arguments = appUserModelId,
        UseShellExecute = false,
        CreateNoWindow = true,
        FileName = exec
    };

    Process.Start(processInfo);
}

Step 5: Get Application Status

The last thing you might want is to know the App execution state, in order to do that you need to use IPackageDebugSettings - Enables debugger developers control over the lifecycle of a Windows Store app, such as when it is suspended or resumed. (http://msdn.microsoft.com/en-us/library/hh438393(v=vs.85).aspx)

for that create a PackageStatushelper class with the following code:

public class PackageStatusHelper
{
    [ComImport, Guid("B1AEC16F-2383-4852-B0E9-8F0B1DC66B4D")]
    public class PackageDebugSettings
    {
    }

    public enum PACKAGE_EXECUTION_STATE
    {
        PES_UNKNOWN,
        PES_RUNNING,
        PES_SUSPENDING,
        PES_SUSPENDED,
        PES_TERMINATED
    }

    [ComImport, Guid("F27C3930-8029-4AD1-94E3-3DBA417810C1"), InterfaceType(ComInterfaceType.InterfaceIsIUnknown)]
    public interface IPackageDebugSettings
    {
        int EnableDebugging([MarshalAs(UnmanagedType.LPWStr)] string packageFullName, [MarshalAs(UnmanagedType.LPWStr)]
                                                              string debuggerCommandLine, IntPtr environment);
        int DisableDebugging([MarshalAs(UnmanagedType.LPWStr)] string packageFullName);
        int Suspend([MarshalAs(UnmanagedType.LPWStr)] string packageFullName);
        int Resume([MarshalAs(UnmanagedType.LPWStr)] string packageFullName);
        int TerminateAllProcesses([MarshalAs(UnmanagedType.LPWStr)] string packageFullName);
        int SetTargetSessionId(int sessionId);
        int EnumerageBackgroundTasks([MarshalAs(UnmanagedType.LPWStr)] string packageFullName, 
                                                      out uint taskCount, out int intPtr, [Out] string[] array);
        int ActivateBackgroundTask(IntPtr something);
        int StartServicing([MarshalAs(UnmanagedType.LPWStr)] string packageFullName);
        int StopServicing([MarshalAs(UnmanagedType.LPWStr)] string packageFullName);
        int StartSessionRedirection([MarshalAs(UnmanagedType.LPWStr)] string packageFullName, uint sessionId);
        int StopSessionRedirection([MarshalAs(UnmanagedType.LPWStr)] string packageFullName);
        int GetPackageExecutionState([MarshalAs(UnmanagedType.LPWStr)] string packageFullName,
                                            out PACKAGE_EXECUTION_STATE packageExecutionState);
        int RegisterForPackageStateChanges([MarshalAs(UnmanagedType.LPWStr)] string packageFullName, 
                               IntPtr pPackageExecutionStateChangeNotification, out uint pdwCookie);
        int UnregisterForPackageStateChanges(uint dwCookie);
    }

    public static PACKAGE_EXECUTION_STATE GetPackageExecutionState(string packageFullName)
    {
        PACKAGE_EXECUTION_STATE packageExecutionState = PACKAGE_EXECUTION_STATE.PES_UNKNOWN;
        PackageDebugSettings settings = new PackageDebugSettings();
        IPackageDebugSettings settings2 = (IPackageDebugSettings)settings;
        try
        {
            if (settings2.GetPackageExecutionState(packageFullName, out packageExecutionState) != 0)
            {
                System.Windows.MessageBox.Show("Failed to get package execution state.", "GetPackageExecutionState");
            }
        }
        catch (Exception ex)
        {
            System.Windows.MessageBox.Show(ex.Message, "GetPackageExecutionState");
        }
        return packageExecutionState;
    }
}

And from the application you can just call the GetPackageExecutionState passing the Package Full Name

private void GetAppStatus_Click(object sender, RoutedEventArgs e)
{
    var btn = (System.Windows.Controls.Button)sender;
    var product = btn.Tag as ProductInfo;
    var status = PackageStatusHelper.GetPackageExecutionState(product.PackageFullName);

    switch (status)
    {
        case PackageStatusHelper.PACKAGE_EXECUTION_STATE.PES_RUNNING:
            btn.Foreground = new SolidColorBrush(Colors.Green);
            btn.Content = "Running";
            break;
        case PackageStatusHelper.PACKAGE_EXECUTION_STATE.PES_SUSPENDED:
            btn.Foreground = new SolidColorBrush(Colors.Orange);
            btn.Content = "Suspended";
            break;
        case PackageStatusHelper.PACKAGE_EXECUTION_STATE.PES_TERMINATED:
            btn.Foreground = new SolidColorBrush(Colors.Red);
            btn.Content = "Terminated";
            break;
        default:
            btn.Foreground = new SolidColorBrush(Colors.Gray);
            btn.Content = "Unkown";
            break;
    }
}

Download Demo Project

Enjoy

Windows App Cert Kit Failed - The bytecode generation test detected the following errors

shair — Thu, 07 Feb 2013 06:48:39 GMT

In the past couple of weeks I’ve worked on Cordova (PhoneGap) application for Windows 8, just before we intent to publish it to the store I’ve encountered a problem – “bytecode generation test detected“.

To give your app the best chance of getting certified you should run the some tests, beside checking for bugs and making sure your application works as expected you should use the App Cert Kit - Windows 8 apps must use the new Windows App Certification Kit to become certified and eligible for sale in the Windows Store

“Windows 8 App Cert Kit”

The Windows App Certification Kit (ACK) is used to validate compliance with certification requirements, and replaces the Windows Software Logo Kit (WSLK) used for validation in the Windows 7 Software Logo program. Desktop, desktop device, and Windows Store apps can be certified; however, plug-in, ActiveX, and other web apps cannot be certified. The Windows ACK is included in the Windows Software Development Kit (SDK) and the Windows SDK for Windows Store apps.

Looking at the How to fix section didn’t help me to understand the problem, but after couple of minutes exploring this I found out that the main reason for those errors is not JavaScript Syntax Errors but Encoding. The reason I know this is not a JavaScript Syntax problem is because some CSS files was also in that list and of course Visual Studio didn’t said anything about Syntax Errors.

So just open the files maintained in the error report using notepad (or other editor support Save + Encoding)

Click on Save As and make sure to select “UTF-8” in the encoding box.

Once you finished going over all the problematic files rerun the App Cert Kit and those errors should disappear.

Enjoy

WinRT Toast Notification From Desktop Application

shair — Wed, 30 Jan 2013 18:33:04 GMT

The post title maintained Toast Notification but after reading this post we'll be able to perform API calls to WinRT from your Desktop application.

As you know WinRT exposing API’s for three developer languages: C#, C++ and JavaScript, this means that from each language you’ll be able to perform WinRT calls. The idea is based on Windows Metadata File (winmd) that expose those APIs that can be consumed across a variety of technologies and languages.

Download Demo Project

So why not using those calls from a desktop application? for example one of the great features of Windows 8 is Toast Notifications, Toast is a super cool replacement for Message box dialog that block your screen and can be very enjoying…

A toast notification is a transient message to the user that contains relevant, time-sensitive information and provides quick access to related content in an app. It can appear whether you are in another app, the Start screen, the lock screen, or on the desktop. Toasts should be viewed as an invitation to return to your app to follow up on something of interest. Toast notifications are an optional part of the app experience and are intended to be raised only when your app is not the active foreground app.

let’s say that we want to send Toast from your Desktop application instead of displaying annoying message boxes, let’s see how you can do it.

Step 1: Getting Started With Windows.winmd

Let’s start with empty WPF application, let’s try to load Windows.winmd file located here:

C:\Program Files (x86)\Windows Kits\8.0\References\CommonConfiguration\Neutral\Windows.winmd

You’ll receive below error message saying this file isn't compatible with your current project.

You need to edit your csproj file and add TargetPlatformVersion element.

Locate the PropertyGroup and add additional element : <TargetPlatformVersion>8.0</TargetPlatformVersion>

<?xml version="1.0" encoding="utf-8"?>
<Project ToolsVersion="4.0" DefaultTargets="Build" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
  <Import Project="$(MSBuildExtensionsPath)\$(MSBuildToolsVersion)\Microsoft.Common.props" Condition="Exists('$(MSBuildExtensionsPath)\$(MSBuildToolsVersion)\Microsoft.Common.props')" />
  <PropertyGroup>
    <Configuration Condition=" '$(Configuration)' == '' ">Debug</Configuration>
    <Platform Condition=" '$(Platform)' == '' ">AnyCPU</Platform>
    <ProjectGuid>{20DAA4E0-DE45-4FB6-8650-44FFDBA78F25}</ProjectGuid>
    <OutputType>WinExe</OutputType>
    <AppDesignerFolder>Properties</AppDesignerFolder>
    <RootNamespace>DesktopAppNotificationDemo</RootNamespace>
    <AssemblyName>DesktopAppNotificationDemo</AssemblyName>
    <TargetFrameworkVersion>v4.5</TargetFrameworkVersion>
    <TargetPlatformVersion>8.0</TargetPlatformVersion>
    <FileAlignment>512</FileAlignment>
    <ProjectTypeGuids>{60dc8134-eba5-43b8-bcc9-bb4bc16c2548};{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}</ProjectTypeGuids>
    <WarningLevel>4</WarningLevel>
    <PublishUrl>publish\</PublishUrl>

Now if you try to load Windows.winmd you’ll success, using the Object Browser you can explore the different API’s available in WinRT.

Step 2: API Code Pack

In order to display toasts, a desktop application must have a shortcut on the Start menu. Also, an AppUserModelID must be set on that shortcut.
The shortcut should be created as part of the installer. The following code shows how to create a shortcut and assign an AppUserModelID using Windows APIs.
You must download and include the Windows® API Code Pack for Microsoft® .NET Framework to allow Toast Notification from desktop application.

Windows® API Code Pack for Microsoft® .NET Framework provides a source code library that can be used to access some features of Windows 7 and Windows Vista from managed code. These Windows features are not available to developers today in the .NET Framework.

First thing after the application is loaded you need to make sure the application has a shortcut under Start menu referring to your desktop AppUserModelID.

private const String APP_ID = "Shai Raiten - DesktopAppNotificationDemo";
private bool IsAppLinkExists()
{
    string defaultPath = string.Format(@"{0}\Microsoft\Windows\Start Menu\Programs\{1}.lnk",
        Environment.GetFolderPath(Environment.SpecialFolder.ApplicationData),
        APP_ID);

    return File.Exists(defaultPath) == false ? CreateApplicationShortcut(defaultPath) : true;
}

In case there is no shortcut you’ll need to create one:

private bool CreateApplicationShortcut(string defaultPath)
{
    string exePath = Process.GetCurrentProcess().MainModule.FileName;
    var newShortcut = (IShellLinkW)new CShellLink();

    // Create a shortcut to the exe
    ShellHelpers.ErrorHelper.VerifySucceeded(newShortcut.SetPath(exePath));
    ShellHelpers.ErrorHelper.VerifySucceeded(newShortcut.SetArguments(""));

    // Open the shortcut property store, set the AppUserModelId property
    var newShortcutProperties = (IPropertyStore)newShortcut;

    using (PropVariant appId = new PropVariant(APP_ID))
    {
        ShellHelpers.ErrorHelper.VerifySucceeded(newShortcutProperties.SetValue(SystemProperties.System.AppUserModel.ID, appId));
        ShellHelpers.ErrorHelper.VerifySucceeded(newShortcutProperties.Commit());
    }

    // Commit the shortcut to disk
    var newShortcutSave = (IPersistFile)newShortcut;

    ShellHelpers.ErrorHelper.VerifySucceeded(newShortcutSave.Save(defaultPath, true));
    return true;
}

Step 3: Toast

If you not familiar with Toast under Windows 8 I’ll recommend you to read about the methods and events of ToastNotification class (Windows).

After completing all previous steps creating Toast is a simple task, all you need to do is create new Toast template using ToastNotificationManager and modify the Toast template xml with your data.

private void btnSend_Click(object sender, RoutedEventArgs e)
{
    var toastXml = ToastNotificationManager.GetTemplateContent(ToastTemplateType.ToastImageAndText02);

    var textFields = toastXml.GetElementsByTagName("text");
    textFields[0].AppendChild(toastXml.CreateTextNode(txtTitle.Text));
    textFields[1].AppendChild(toastXml.CreateTextNode(txtDescription.Text));

    String imagePath = "file:///" + System.IO.Path.GetFullPath("me.png");
    XmlNodeList imageElements = toastXml.GetElementsByTagName("image");
    imageElements[0].Attributes.GetNamedItem("src").NodeValue = imagePath;

    ToastNotification toast = new ToastNotification(toastXml);

    if (cal.SelectedDate != null)
        toast.ExpirationTime = cal.SelectedDate;

    // You must specifiy AppUserModelId == APP_ID to send toast notification.
    ToastNotificationManager.CreateToastNotifier(APP_ID).Show(toast);

    lblStatus.Text = "Toast Sent!";
}

Step 4: Toast Events

Toast as we already understand is more than just a MessageBox, you’ll be able to send information to your users and get their response, for example in this demo if the user click on the Toast I’ll like to open the browser to that specific Uri.

All you need to do is register to the Toast events before sending the toast.

toast.Activated += toast_Activated;
toast.Dismissed += toast_Dismissed;
toast.Failed += toast_Failed;

void toast_Failed(ToastNotification sender, ToastFailedEventArgs args)
{
    Dispatcher.Invoke(() =>
    {
        lblStatus.Text = string.Format("Toast Failed - Error Code: {0}", args.ErrorCode.Message);
    });
}

void toast_Dismissed(ToastNotification sender, ToastDismissedEventArgs args)
{
    Dispatcher.Invoke(() =>
    {
        lblStatus.Text = args.Reason.ToString();
    });
}

void toast_Activated(ToastNotification sender, object args)
{
    Dispatcher.Invoke(() =>
    {
        Activate();
        lblStatus.Text = "Toast Activated";
        Process.Start("http://tinyurl.com/shai-rai");
    });
}

Take Notice – You can use more WinRT API’s by adding Windows.winmd to your desktop application.

Download Demo Project

Enjoy

Windows Store App - Resize Image (JavaScript)

shair — Wed, 31 Oct 2012 19:05:21 GMT

In this post I’ll demonstrate how to change picture size using JavaScript while constraining the image proportions.

Resize image functionality can be used in several scenarios in Windows Store app, for example: if your app allow the user to download images from the web you might want to resize the image to reduce space usage. Also if you whish to share this image using Roaming Storage you need to make sure the image size is small enough so the Roaming sync will not failed.

The first steps for this demo is using FileOpenPicker to allow the user to choose what picture he want to resize.

Download Demo Project

Create new JavaScript Navigation app.
Open package.appxmanifest and add “Pictures Library” capability. (We’ll use this later)

Open home.html file located under pages->home and add the following code:

     <div class="preview">

        <div class="btnBrowse">

            <button id="btnBrowse">Pick a Image</button>

        </div>

        <div class="previewImage">

            <img id="previewImage" style="max-height: 400px" src="#" />

        </div>

        <div id="imageDetails"></div>

    </div>

The above code added a button, img and div elements to home.html page, the button will invoke the FileOpenPicker, img element will display the selected image and the imageDetails div will display the image properties.

Open home.js and add the following code jus under the “use strict” statement:

      function $(query) {

          return document.querySelector(query);

      }

      function toDateTime(date) {

          var dateTime = new Date(Date.parse(date));

          if (dateTime.getDate()) {

              var month = dateTime.getMonth() + 1;

              var day = dateTime.getDate();

              var year = dateTime.getFullYear();

              var hours = dateTime.getHours();

              var minutes = dateTime.getMinutes();

              var ampm = hours < 12 ? "am" : "pm";

              return "{0}/{1}/{2} {3}:{4} {5}".format(month, day, year, hours < 10 ? "0" + hours : hours, minutes < 10 ? "0" + minutes : minutes, ampm);

          }

          else

              return date;

      }

      String.prototype.format = function () {

          var str = this;

          for (var i = 0; i < arguments.length; i++) {

              var reg = new RegExp("\\{" + i + "\\}", "gm");

              str = str.replace(reg, arguments[i]);

          }

          return str;

      };

Those functions are helpers for our project.

Under ready function add the following code:

    $("#btnBrowse").addEventListener("click", this.openFilePicker.bind(this), false);

We’re adding event listener for click event on “btnBrowse” button, now let implement the FileOpenPicker.

Add the following code under the close statement of ready function:

    selectedImage:null,

    openFilePicker: function () {

        var that = this;

        // Create the picker object and set options

        var fp = Windows.Storage.Pickers.FileOpenPicker();

        // Users expect to have a filtered view of their folders depending on the scenario.

        // For example, when choosing a documents folder, restrict the filetypes to documents for your application.

        fp.fileTypeFilter.replaceAll([".png", ".bmp", ".jpg", ".jpeg"]);

        fp.suggestedStartLocation = Windows.Storage.KnownFolders.picturesLibrary;

        fp.commitButtonText = "Select";

        fp.viewMode = Windows.Storage.Pickers.PickerViewMode.thumbnail;

        // Open the picker for the user to pick a file

        fp.pickSingleFileAsync().done(function (file) {

            if (file != null) {

                that.selectedImage = file;

                $("#previewImage").src = URL.createObjectURL(file, { oneTimeOnly: true });

                file.properties.getImagePropertiesAsync().then(function (imgProp) {

                    $("#imageDetails").innerHTML = "Width: {0}<br/>Height: {1}<br/>Date Taken: " +

                        "{2}<br/>Camera Model: {3}".format(

                        imgProp.width, imgProp.height, toDateTime(imgProp.dateTaken), imgProp.cameraModel);

                    $("#width").value = imgProp.width;

                    $("#height").value = imgProp.height;

                    $("#btnResize").disabled = false;

                });

            }

            else {

                $("#width").textContent = 0;

                $("#height").textContent = 0;

                $("#btnResize").disabled = true;

            }

        });

    },

Once you click on the “Pick a Image” button the file picker dialog will appear allowing you to select a single image. As pickSingleFileAsync return a promise, after the FileOpenPicker dialog is closed we received the file you pick.
First we assign the file to selectedImage object, using URL.createObjectURL we transform the file into blob and assign to the image.src property and finally we call – getImagePropertiesAsync function to retrieve image properties so we can display them on the html page.

When if you run the application you can pick and image using the “Pick a Image” button and the result should be like that:

Open home.html page and add the following code under the preview div element:

    <div class="resizeOptions">

        <div>Max Width:

            <input type="number" id="width" />

        </div>

        <div>Max Height:

            <input type="number" id="height" />

        </div>

        <div>

            <button id="btnResize" disabled="disabled">Resize Image</button>

        </div>

    </div>

We add two input elements allowing you to define the desire size of the image and a button element to invoke the resize function.

Open home.js and add the following code under the $("#btnBrowse").addEventListener statement.

    $("#btnResize").addEventListener("click", this.resizeImage.bind(this), false);

We’re adding event listener for click event on “btnResize” button, now let implement the resizeImage function.

We don’t want to change the original image in our case so the resizeImage will open the FileSavePicker allowing the user to choose where he want to save the resized image.

    resizeImage: function () {

        var that = this;

        var width = $("#width").value != "" ? parseInt($("#width").value) : 0;

        var height = $("#height").value != "" ? parseInt($("#height").value) : 0;

        if (width === 0 || height === 0) {

            var msg = new Windows.UI.Popups.MessageDialog("Please enter width and height values");

            msg.showAsync().done("");

            return;

        }

        var fs = new Windows.Storage.Pickers.FileSavePicker();

        fs.suggestedStartLocation = Windows.Storage.KnownFolders.picturesLibrary;

        fs.defaultFileExtension = this.selectedImage.fileType;

        fs.fileTypeChoices.insert(this.selectedImage.fileType, [this.selectedImage.fileType]);

        fs.suggestedFileName = "Resize Demo-" + this.selectedImage.name;

        fs.pickSaveFileAsync().done(function (targetFile) {

            //copy selected image to new file

            that.selectedImage.copyAndReplaceAsync(targetFile).then(function () {

                //call resize function on the new file.

                that._resize(width, height, targetFile).done(function () {

                    var msg = new Windows.UI.Popups.MessageDialog("File Resize Completed!");

                    msg.showAsync().done("");

                });

            });

        });

    },

The above code check is the input elements for width and height are not empty and then open the FileSavePicker, once the user choose a target file we’ll use the copyAndReplaceAsync function to copy the selected image to the target file the user has selected, finally we call the _resize function passing the width, height and the copied image object.

Now to the final part, let’s implement the resize function, add the following code after resizeImage close statement:

    _resize: function (maxWidth, maxHeight, imgFile) {

        var originalWidth;

        var originalHeight;

        var encoder;

        var fileStream;

        var count = 0;

        var that = this;

        return new WinJS.Promise(function (complete) {

            var memStream = new Windows.Storage.Streams.InMemoryRandomAccessStream();

            imgFile.openAsync(Windows.Storage.FileAccessMode.readWrite).then(function (stream) {

                fileStream = stream;

                return Windows.Graphics.Imaging.BitmapDecoder.createAsync(fileStream);

            }).then(function (decoder) {

                that._scale(decoder, memStream, maxWidth, maxHeight).then(function () {

                    // Overwrite the contents of the file with the updated image stream.

                    memStream.seek(0);

                    fileStream.seek(0);

                    fileStream.size = 0;

                    return Windows.Storage.Streams.RandomAccessStream.copyAsync(memStream, fileStream);

                })

                .done(function () {

                    // Finally, close each stream to release any locks.

                    memStream && memStream.close();

                    fileStream && fileStream.close();

                });

            }

            );

        });

    }

the _resize function calling the openAsync function on the target file to obtaint he file stream then creating stream decoder using Windows.Graphics.Imaging.BitmapDecoder. Once we have the image decoder we can scale the image (I’ll talk about that in the next code example), after the scale function has completed we copy the memoryStream (where we did the scale changes) into the fileStream (target file) after the copy is complete we close both streams. it’s important to close the streams otherwise those streams are locked for other processes. (unless you open the stream only for read).

The last part and the most important one is _scale function, this function will change the image size based on use max-height and max-width while keeping the image proportion.

    _scale: function (decoder, memStream, maxWidth, maxHeight) {

        return new WinJS.Promise(function (complete, error) {

            var originalHeight = decoder.pixelHeight;

            var originalWidth = decoder.pixelWidth;

            if (originalHeight <= maxHeight || originalWidth <= maxWidth)

                complete();

            else {

                Windows.Graphics.Imaging.BitmapEncoder.createForTranscodingAsync(memStream, decoder).then(function (_encoder) {

                    var encoder = _encoder;

                    var nPercent = 0;

                    var nPercentW = 0;

                    var nPercentH = 0;

                    nPercentW = (maxWidth / originalWidth);

                    nPercentH = (maxHeight / originalHeight);

                    if (nPercentH < nPercentW)

                        nPercent = nPercentH;

                    else

                        nPercent = nPercentW;

                    var destWidth = (originalWidth * nPercent);

                    var destHeight = (originalHeight * nPercent);

                    encoder.bitmapTransform.scaledWidth = destWidth;

                    encoder.bitmapTransform.scaledHeight = destHeight;

                    // Attempt to generate a new thumbnail to reflect any rotation operation.

                    encoder.isThumbnailGenerated = true;

                    encoder.flushAsync().done(function () {

                        complete();

                    });

                })

            }

        })

    },

First we need to check the max-height or max-width are not smaller or equal to the original size.Before changing the image size we’ll use “createForTranscodingAsync” function - creates a new BitmapEncoder and initializes it using data from an existing BitmapDecoder. We do some math to calculate the new image size and to set the new size we need to call the encoder and change the scaleWidth and scaleHeight properties located under bitmapTransform object.

Full Code:

(

&#

&#

&#

&#

&#

&#

&#

&#

&#

&#

&#

&#

&#

&#

ng-right:4px;max-height:200px;width:97.5%;background-color:#f4f4f4;"> 4;"> style="color:#0000ff;">function () { "use strict"; 160; function $(query) { return document.querySelector(query); } 160; function toDateTime(date) { var dateTime = new Date(Date.parse(date)); if (dateTime.getDate()) { var month = dateTime.getMonth() + 1; var day = dateTime.getDate(); var year = dateTime.getFullYear(); var hours = dateTime.getHours(); var minutes = dateTime.getMinutes(); var ampm = hours < 12 ? "am" : "pm"; return "{0}/{1}/{2} {3}:{4} {5}".format(month, day, year, hours < 10 ? "0" + hours : hours, minutes < 10 ? "0" + minutes : minutes, ampm); } else return date; } 160; String.prototype.format = function () { var str = this; for (var i = 0; i < arguments.length; i++) { var reg = new RegExp("\\{" + i + "\\}", "gm"); str = str.replace(reg, arguments[i]); } return str; }; 160; var ERR_OPERATION_UNSUPPORTED = -2003292287; // The operation is unsupported 160; WinJS.UI.Pages.define("/pages/home/home.html", { // This function is called whenever a user navigates to this page. It // populates the page elements with the app's data. ready: function (element, options) { $("#btnBrowse").addEventListener("click", this.openFilePicker.bind(this), false); $("#btnResize").addEventListener("click", this.resizeImage.bind(this), false); }, selectedImage: null, openFilePicker: function () { var that = this; // Create the picker object and set options var fp = Windows.Storage.Pickers.FileOpenPicker(); // Users expect to have a filtered view of their folders depending on the scenario. // For example, when choosing a documents folder, restrict the filetypes to documents for your application. fp.fileTypeFilter.replaceAll([".png", ".bmp", ".jpg", ".jpeg"]); fp.suggestedStartLocation = Windows.Storage.KnownFolders.picturesLibrary; fp.commitButtonText = "Select"; fp.viewMode = Windows.Storage.Pickers.PickerViewMode.thumbnail; // Open the picker for the user to pick a file fp.pickSingleFileAsync().done(function (file) { if (file != null) { that.selectedImage = file; $("#previewImage").src = URL.createObjectURL(file, { oneTimeOnly: true }); file.properties.getImagePropertiesAsync().then(function (imgProp) { $("#imageDetails").innerHTML = "Width: {0}<br/>Height: {1}<br/>Date Taken: {2}<br/>Camera Model: {3}".format( imgProp.width, imgProp.height, toDateTime(imgProp.dateTaken), imgProp.cameraModel); 160; $("#width").value = imgProp.width; $("#height").value = imgProp.height; $("#btnResize").disabled = false; }); } else { $("#width").value = 0; $("#height").value = 0; $("#btnResize").disabled = true; } }); }, resizeImage: function () { var that = this; var width = $("#width").value != "" ? parseInt($("#width").value) : 0; var height = $("#height").value != "" ? parseInt($("#height").value) : 0; 160; if (width === 0 || height === 0) { var msg = new Windows.UI.Popups.MessageDialog("Please enter width and height values"); msg.showAsync().done(""); return; } 160; var fs = new Windows.Storage.Pickers.FileSavePicker(); fs.suggestedStartLocation = Windows.Storage.KnownFolders.picturesLibrary; fs.defaultFileExtension = this.selectedImage.fileType; fs.fileTypeChoices.insert(this.selectedImage.fileType, [this.selectedImage.fileType]); fs.suggestedFileName = "Resize Demo-" + this.selectedImage.name; fs.pickSaveFileAsync().done(function (targetFile) { //copy selected image to new file that.selectedImage.copyAndReplaceAsync(targetFile).then(function () { //call resize function on the new file. that._resize(width, height, targetFile).done(function () { var msg = new Windows.UI.Popups.MessageDialog("File Resize Completed!"); msg.showAsync().done(""); }); 160; }); }); }, 160; _scale: function (decoder, memStream, maxWidth, maxHeight) { return new WinJS.Promise(function (complete, error) { var originalHeight = decoder.pixelHeight; var originalWidth = decoder.pixelWidth; if (originalHeight <= maxHeight || originalWidth <= maxWidth) complete(); else { Windows.Graphics.Imaging.BitmapEncoder.createForTranscodingAsync(memStream, decoder).then(function (_encoder) { var encoder = _encoder; 160; var nPercent = 0; var nPercentW = 0; var nPercentH = 0; 160; nPercentW = (maxWidth / originalWidth); nPercentH = (maxHeight / originalHeight); if (nPercentH < nPercentW) nPercent = nPercentH; else nPercent = nPercentW; 160; var destWidth = (originalWidth * nPercent); var destHeight = (originalHeight * nPercent); encoder.bitmapTransform.scaledWidth = destWidth; encoder.bitmapTransform.scaledHeight = destHeight; 160; // Attempt to generate a new thumbnail to reflect any rotation operation. encoder.isThumbnailGenerated = true; encoder.flushAsync().done(function () { complete(); }); }) } }) }, _resize: function (maxWidth, maxHeight, imgFile) { var originalWidth; var originalHeight; var encoder; var fileStream; var count = 0; var that = this; return new WinJS.Promise(function (complete) { var memStream = new Windows.Storage.Streams.InMemoryRandomAccessStream(); imgFile.openAsync(Windows.Storage.FileAccessMode.readWrite).then(function (stream) { fileStream = stream; return Windows.Graphics.Imaging.BitmapDecoder.createAsync(fileStream); }).then(function (decoder) { that._scale(decoder, memStream, maxWidth, maxHeight).then(function () { // Overwrite the contents of the file with the updated image stream. memStream.seek(0); fileStream.seek(0); fileStream.size = 0; return Windows.Storage.Streams.RandomAccessStream.copyAsync(memStream, fileStream); }) .done(function () { // Finally, close each stream to release any locks. memStream && memStream.close(); fileStream && fileStream.close(); }); } ); }); } }); })();

Download Demo Project

Quality Center Migration To TFS 2012 RC

shair — Tue, 10 Jul 2012 17:00:00 GMT

As Sela Group continues to move hundreds of customers from Quality Center to TFS we have upgrade our migration tool called – Scrat to support migration to TFS 2012 RC.

The migration process is Easy, Fast and doesn't required any special customization it’s just a simple wizard application that will allow you to migrate everything from Quality Center to TFS.

Requirements, Bugs, Test Cases, Attachments, Links between items and more.

Just download the trial version and follow my steps:

Step 1: Define Migration Plan

After installing Scrat the first page will ask you for two things, a configuration file that will save all completed items and migration settings and the second is defining what items would you like to migrate from Quality Center to TFS (Requirements, Bugs and Test Cases).

The configuration file will also allow you to repeat the migration process for Failed items and will skip the work items that previously migrate successfully.

Step 2: Connecting Quality Center and TFS

The connections page will ask you to connect to a specific Team Project under TFS 2010 or 2012 and connect to specific Project in Quality Center.

Step 3: User Mapping

Quality Center allow users to work without LDAP users this means that we need to create a mapping between Quality Center users to TFS Users, you will use this page to define which user from Quality Center will be translate to LDAP user in TFS.

Step 4: Area Mapping

Area Mapping is one of the important steps in Scrat, Areas will allow you to keep Quality Center folders hierarchy as Areas in TFS.

At the picture below you can see Scrat presenting the folders hierarchy, you can also modify and add new values before creating those areas in TFS.

After Scrat will finish Area creation you will see the same folders hierarchy in TFS but as Areas.

Step 5: Fields Mapping

In this steps you’ll map Quality Center fields to TFS Fields, this page will show also Customize fields in Quality Center and TFS.

Fields that you’ll not choose will not be copied during the migration.

Step 6: Data Mapping

After you choose fields for the migration you might have to define new values for those fields, it’s more than possible that the field values will be different from Quality Center and TFS.

You can also prepare for the migration by defining the proper values and fields before you start migrating.

Step 7: State Mapping

Just before you’ll start the migration we need to define one more thing, the States.

As you know TFS doesn't allow you to open Work Item and change the State field to any field that you like, you have to save the work item and than change the state again, furthermore State field in TFS works on Work Flow mechanism that force the user to work based on the state flow.

This means that we also need to define the flow for each state from Quality Center.

Step 8: Migration

In this page all you need to to is click “Start” to begin the migration, but you can also choose to migrate based on a specific filter, expend the advanced option and choose as many fields as you like to help you filtering the items for the migration.

When the migration is completed you can see those items in TFS:

Step 9: Test Suites Hierarchy – Just for Test Cases

The migration process is the same for all items except Test Case, there you will have additional Page allowing you to build the Test Suites hierarchy for Microsoft Test Manager.

First you need to create a plan or select an existing one, this will create new Test Plan in Microsoft Test Manager.

Then select the desire Test Suites to create(you don’t need to create all just those you want) and click start.

After the process is done you can enter Microsoft Test Manager and you’ll see the same Suites hierarchy as in Quality Center, and each suite has his Test Cases assigned to it.

Test Case after the migration:

Enjoy.

How To: Bing Maps Custom Tile Overlay - Google Maps

shair — Sun, 24 Jun 2012 20:39:00 GMT

I got a question from a friend who wanted to replace Bing Maps Tiles with Google Maps Tiles.
You might ask yourself why? If you want Google Tiles just replace Bing Control and work with Google Maps….. In this case I want to work with Bing Map Control because the benefits I get in Metro Applications in Windows 8 for C#, C++, VB.NET and JavaScript.
And I also want Google Maps language support.

Download Demo Project

Currently Bing Maps doesn't support any language except English, and I want to display the map with the user natural language.

Google \ Bing Preview

Google - Hebrew	Google - English	Bing – Only English

Before we jump to the solution let’s talk about the common ground between Bing and Google Maps.

Each tile consists of 256 x 256 pixels
Each succeeding zoom level divides the map into 4 N tiles, where N refers to the zoom level. For example:

at zoom level 1,each map divides the world up into a 2x2 grid for a total of 4 tiles;
at zoom level 2, each map divides up the world into a 4x4 grid for a total of 16 tiles, etc
(From “Tile Coordinates” Google API) – Zoom Level 2 (4x4)
(From “Tile Coordinates and Quadkeys” MSDN) – Zoom Level 3 (8x8)

I order to replace the tile we need to have Google map url that will return the specific tile based on the X, Y, and Zoom level – and we have it here:

Google Maps –> calling "https://mts0.google.com/vt/hl=he&src=api&x=2&s=&y=1&z=3” will return: (X = 2 , Y = 1 , Zoom = 3)

So what is the problem? The problem is that in order to replace Tiles in Bing Maps you need to pass the “QuadKey” value. - MapTileLayer Class

As you can see from the code example below the TileSource gets the url of the custom tile with a parameter called - {quadkey}

C#

MapTileLayer tileLayer = new MapTileLayer();
tileLayer.TileSource = "http://www.microsoft.com/maps/isdk/ajax/layers/lidar/{quadkey}.png";
map.TileLayers.Add(tileLayer);

JavaScript

function addTileOverlay() {
    var options = { uriConstructor: "http://www.microsoft.com/maps/isdk/ajax/layers/lidar/{quadkey}.png"};
    var tileSource = new Microsoft.Maps.TileSource(options);
    var tilelayer = new Microsoft.Maps.TileLayer({ mercator: tileSource });
    map.entities.push(tilelayer);
}

What is QuadKey? - A quadkey uniquely identifies single tiles at particular levels of detail

To optimize the indexing and storage of tiles, the two-dimensional tile XY coordinates are combined into one-dimensional strings called quadtree keys, or “quadkeys” for short. Each quadkey uniquely identifies a single tile at a particular level of detail, and it can be used as an key in common database B-tree indexes. To convert tile coordinates into a quadkey, the bits of the Y and X coordinates are interleaved, and the result is interpreted as a base-4 number (with leading zeros maintained) and converted into a string. For instance, given tile XY coordinates of (3, 5) at level 3, the quadkey is determined as follows:

tileX = 3 = 011 2
tileY = 5 = 101 2
quadkey = 100111 2 = 213 4 = “213”

Quadkeys have several interesting properties. First, the length of a quadkey (the number of digits) equals the level of detail of the corresponding tile. Second, the quadkey of any tile starts with the quadkey of its parent tile (the containing tile at the previous level). As shown in the example below, tile 2 is the parent of tiles 20 through 23, and tile 13 is the parent of tiles 130 through 133:

So now that we understand what is QuadKey we understand that we need to translate this value into Google Map X,Y and Zoom, we can use the following method to convert the QuadKey into x,y and level values.

public static void QuadKeyToTileXY(string quadKey, out int tileX, out int tileY, out int levelOfDetail)
{
    tileX = tileY = 0;
    levelOfDetail = quadKey.Length;
    for (int i = levelOfDetail; i > 0; i--)
    {
        int mask = 1 << (i - 1);
        switch (quadKey[levelOfDetail - i])
        {
            case '0':
                break;
            case '1':
                tileX |= mask;
                break;
            case '2':
                tileY |= mask;
                break;
            case '3':
                tileX |= mask;
                tileY |= mask;
                break;
            default:
                throw new ArgumentException("Invalid QuadKey digit sequence.");
        }
    }
}

But you don’t need to do that because the quadkey is automatically translated into those values, so instead of setting a static url for TileOverlay we will set a function called convert that received the quadkey object.

Solution:

function convert(quadkey) {
    return "https://mts0.google.com/vt/hl=he&src=api&x=" + quadkey.x + "&s=&y=" + quadkey.y + "&z=" + quadkey.levelOfDetail;
}

function addTileOverlay() {
      var options = { uriConstructor: convert };
    var tileSource = new Microsoft.Maps.TileSource(options);
    var tilelayer = new Microsoft.Maps.TileLayer({ mercator: tileSource });
    map.entities.push(tilelayer);
}

Bing Map without Google Tiles:

Bing Maps with Google Tiles:

Download Demo Project

How To: Bing Maps For Windows 8 Metro Apps - JavaScript

shair — Fri, 22 Jun 2012 14:16:16 GMT

In my last post I talked about Bing Map for C#, but you can also do the same of JavaScript projects using Bing Maps SDK.

Download Demo Project

Step 1: Maps Developer Account

Before you can use Bing Sdk from Windows 8 Metro App you need Maps Developer Account, open http://www.bingmapsportal.com/, create or enter with existing Windows Live account. Choose “Create or view keys” and create new Key for your application.

Step 2: Create Bing Maps Metro Application

Download the latest bits - Bing Maps SDK for Metro style apps
Open Visual Studio 2012 RC, and create JavaScript Blank Project.
“Add Reference” –> select “Bing Maps for JavaScript (Beta)….” and click OK.

Step 3: Add Map Control

Inside default.html we add a div element under the body, this will be the map holder.

<body>
     <div id="mapdiv"></div>
</body>

Now we need to load the map into that control, be just before we need to load the map module, in order to 
do that we’ll call Maps.loadMoudle and set a callback to another method called – initMap.

app.onactivated = function (args) {
    if (args.detail.kind === activation.ActivationKind.launch) {
        if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
        } else {
        }
        args.setPromise(WinJS.UI.processAll().then(function () {
            Microsoft.Maps.loadModule('Microsoft.Maps.Map', { callback: initMap });
        }));
    }
};

After the Maps module is loaded the initMap function will place the Map into the mapdiv element, the function 
below defines several default values such as:

```
Bing Map credentials
```
```
Center location
```
```
Map type
```
```
Zoom
```

Finally we obtain the mapdiv element and define a new object called map defined from new Map that receive the 
div and the options.

function initMap() {
    try {
        var mapOptions =
        {
            credentials: "AvOW5Fz4QTsubTTdmaVnseeZnAQ0JYwbx_6zdMdgHk6iF-pnoTE7vojUFJ1kXFTP",
            center: new Microsoft.Maps.Location(50, 50),
            mapTypeId: Microsoft.Maps.MapTypeId.road,
            zoom: 5
        };

        var mapDiv = document.querySelector("#mapdiv");
        map = new Microsoft.Maps.Map(mapDiv, mapOptions);
    }
    catch (e) {
        var md = new Windows.UI.Popups.MessageDialog(e.message);
        md.showAsync();
    }
}

Step 4: Basics

I’ve added couple of buttons on the right side to help us controlling the map view.

Zoom – The JS map control has built in Zoom in and Zoom out but you can still change the zoom from code:

var zoomValue = map.getZoom();
map.setView({ zoom: zoomValue + 2 });

Map Type - there are 3 types of maps : Aerial, Road and Birdseye.

function changeMapType() {
    var type = map.getMapTypeId();
    switch (type) {
        case Microsoft.Maps.MapTypeId.aerial:
            type = Microsoft.Maps.MapTypeId.road;
            break;
        case Microsoft.Maps.MapTypeId.road:
            type = Microsoft.Maps.MapTypeId.birdseye;
            break;
        default:
            type = Microsoft.Maps.MapTypeId.aerial;
            break;
    }
    map.setView({ center: map.getCenter(), mapTypeId: type });
}

Set Current Location – Using Geolocator to find current location, then using map SetView to center map based on the new location (Make sure you enable “Location” as application capability.)

function centerPosition() {
    var geolocator = new Windows.Devices.Geolocation.Geolocator();
    geolocator.getGeopositionAsync().then(function (loc) {
        var mapCenter = map.getCenter();
        mapCenter.latitude = loc.coordinate.latitude;
        mapCenter.longitude = loc.coordinate.longitude;

        map.setView({ center: mapCenter, zoom: 18 });
    });
}

Step 5: Push Pin

In step 4 we used “Geolocator” to find our current position, then we center the map based on the new position.

Instead of just centering the map we’ll like to add a PushPin directly on our location.

function addPushPin(location) {
    map.entities.clear();       
    var pushpin = new Microsoft.Maps.Pushpin(location, null);
    map.entities.push(pushpin);
}

function centerPosition() {
    var geolocator = new Windows.Devices.Geolocation.Geolocator();
    geolocator.getGeopositionAsync().then(function (loc) {
        var mapCenter = map.getCenter();
        mapCenter.latitude = loc.coordinate.latitude;
        mapCenter.longitude = loc.coordinate.longitude;

        map.setView({ center: mapCenter, zoom: 15 });

        addPushPin(mapCenter);
    });
}

Step 6: Tap and Pin

One more functionality I’ll would like to add is “Tap”, this mean the user click tap on the map (or mouse click) and this will place a Push Pin where the user clicked.

Instead of using the standard PushPin image I want to load my own image as pin, so I add a
“star.png” file to images folder.

Also I add new event listener for click on the mapDiv element calling new function called – “tapped”

var mapDiv = document.querySelector("#mapdiv");
mapDiv.addEventListener('click', tapped, false);
map = new Microsoft.Maps.Map(mapDiv, mapOptions);

When tapped event is fired we can use the tapped event arguments to get the relative position of the tap position by calling the tryPixelToLocation method from the map control, then after we received the location where the user clicked we can add a push pin and center the map based on the the new location.

function tapped(location) {
    var mapCenter = map.getCenter();
    var pos = map.tryPixelToLocation(new Microsoft.Maps.Point(location.clientX, location.clientY),
                                      Microsoft.Maps.PixelReference.control);
    mapCenter.latitude = pos.latitude;
    mapCenter.longitude = pos.longitude;
    map.setView({ center: mapCenter });

    var pin = new Microsoft.Maps.Pushpin({ latitude: pos.latitude, longitude: pos.longitude }, {
        icon: '/images/star.png',
        anchor: new Microsoft.Maps.Point(8, 8)
    });

    map.entities.clear();
    map.entities.push(pin);
}

Download Demo Project

How To: Bing Maps For Windows 8 Metro Apps - C#

shair — Sun, 17 Jun 2012 15:14:00 GMT

Bing Maps SDK is available for Visual Studio 2012 RC and Windows 8 release preview, Bing Maps SDK is easy fast and cool control that you can use in your Metro App.

Download Demo Project

Step 1: Maps Developer Account

Copy and save that key, create a resource in App.xaml called “BingCredentials” with the key value.

<x:String x:Key="BingCredentials">AnJwk78cjoJfBMQXAxC85FwLiLPwmy6paQ1TsTJVg_-62hNraRRUzXRz1RELKfHa</x:String>

Step 2: Create Bing Maps Metro Application

Download the latest bits - Bing Maps SDK for Metro style apps
Open Visual Studio 2012 RC, and create a Blank Project.
“Add Reference” –> select “Bing Maps for C#….” and click OK.

After adding the Bing Maps reference to our project you will see a “Warning” icon on the Bing binary, the reason is Bing Maps doesn't support “Any CPU” configuration.

You need to change the project configuration as describe here - http://msdn.microsoft.com/en-us/library/hh855146.aspx

C#, Visual Basic: ARM, x86 or x64
C++: ARM, Win32 or x64

Read the reference API docs: Bing Maps SDK

Step 3: Add Map Control

Now open “MainPage.xaml” and just drag the “Map” control from ToolBox or add the following xaml code:

xmlns:Maps="using:Bing.Maps"

<Maps:Map Credentials="{StaticResource BingCredentials}" />

Run the application, using Touch or Mouse you can move the map and zoom in and out.

Step 4: Basics

I’ve added couple of buttons on the right side to help us controlling the map view.

Zoom – the map control have a “ZoomLevel” double property, the zoom range is 0-20.

private void btnZoomOut_Click(object sender, RoutedEventArgs e)
{
    var zoom = map.ZoomLevel - 2;
    map.SetZoomLevel(zoom < minZoom ? minZoom : zoom);
}

private void btnZoomIn_Click(object sender, RoutedEventArgs e)
{
    var zoom = map.ZoomLevel + 2;
    map.SetZoomLevel(zoom > maxZoom ? maxZoom : zoom);
}

MapType – there are 3 types of maps : Aerial, Road and Birdseye.

private void btnChangeMapType_Click(object sender, RoutedEventArgs e)
{
    switch (map.MapType)
    {
        case Bing.Maps.MapType.Aerial:
            map.MapType = Bing.Maps.MapType.Birdseye;
            break;
        case Bing.Maps.MapType.Birdseye:
            map.MapType = Bing.Maps.MapType.Road;
            break;
        default:
            map.MapType = Bing.Maps.MapType.Aerial;
            break;
    }
}

Set Current Location – Using Geolocator to find current location, then using map SetView to center map based on the new location.

Make sure you enable “Location” as application capability.

private async void btnSetLocation_Click(object sender, RoutedEventArgs e)
{
    Geolocator geolocator = new Geolocator();
    var pos = await geolocator.GetGeopositionAsync();
    Location location = new Location(pos.Coordinate.Latitude, pos.Coordinate.Longitude);
         
    //Center map view on current location.            
    map.SetView(location, 15.0f);
}

Step 5: Push Pin

In step 4 we used “Geolocator” to find our current position, then we center the map based on the new position.

Instead of just centering the map we’ll like to add a PushPin directly on our location.

First we add the “PushPin” control as a child of the Map, you can create any user control for that (if you want new image etc…)

<Maps:Map x:Name="map" Margin="60,0,0,0" Credentials="{StaticResource BingCredentials}" ShowScaleBar="True" ZoomLevel="5" Grid.Row="1" ShowTraffic="False" >
    <Maps:Map.Children>
        <Maps:Pushpin x:Name="pushPin" />
    </Maps:Map.Children>
</Maps:Map>

Now, in order to place the PushPin on the desire location you need to use the MapLayer.SetPosition, passing the pushpin control and the location value.

private async void btnSetLocation_Click(object sender, RoutedEventArgs e)
{
    Geolocator geolocator = new Geolocator();
    var pos = await geolocator.GetGeopositionAsync();
    Location location = new Location(pos.Coordinate.Latitude, pos.Coordinate.Longitude);

    //Center map view on current location.
    MapLayer.SetPosition(pushPin, location);
    map.SetView(location, 15.0f);
}

Step 6: Tap and Pin

One more functionality I’ll would like to add is “Tap”, this mean the user click tap on the map (or mouse click) and this will place a Push Pin where the user clicked.

First I’ve create a new User Control called – CustomPin that only contains Xaml for star shape.

    <Canvas>
        <Path x:Name="border" 
        Stretch="Fill" Data="F1 M 0,217.042L 227.5,217.042L 297.875, 0L 367.542,217L 595.542,217L 410.208,353.667L 480.708,
        569.667L 297.208,436.667L 116.208,568.167L 185.708,352.667L 0,217.042 Z" Width="25" Height="25"  Margin="-12.5,-12.5,0,0"
        Fill="Yellow" Stroke="Red">
        </Path>
    </Canvas>

In MainPage constructor we add the new User control inside the Map children collection, we can also add this directly from Xaml.

        private CustomPin pin;
        public MainPage()
        {
            this.InitializeComponent();
            pin = new CustomPin();
            map.Children.Add(pin);
        }

We need to add a “Tapped” event for Map control

<Maps:Map x:Name="map" Margin="60,0,0,0" Credentials="{StaticResource BingCredentials}" ShowScaleBar="True" ZoomLevel="5" Grid.Row="1" ShowTraffic="False" Tapped="map_Tapped">
    <Maps:Map.Children>
        <Maps:Pushpin x:Name="pushPin" />
    </Maps:Map.Children>
</Maps:Map>

When tapped event is fired we can use the tapped event arguments to get the relative position of the tap position by called the
GetPosition method, this will give us the pixel position on the Map control not the actual location. So we need to translate the 
pixel position to location.

We can do that by calling the TryPixelToLocation method from the map control, then after we recived the location where the user 
clicked we can add a push pin and center the map based on the the new location.

private void map_Tapped(object sender, TappedRoutedEventArgs e)
{
    var pos = e.GetPosition(map);
    Location location;
    map.TryPixelToLocation(pos, out location);

    MapLayer.SetPosition(pin, location);
    map.SetView(location);
}

Download Demo Project

Enjoy