Semantic zoom for custom controls


  • Hi,

    I have a custom control which is a flex box.

    Everything is working fine except Semantic Zoom especially on simulator/touch device.

    I have implemented semantic zoom for our custom control with the help of this example [HTML SemanticZoom for custom controls sample]

    Semantic zoom is almost working fine on PC but on touch device. I tested on simulator and touch device both but have issues.

    The scenario is (with semantic zoom is implemented): On home page all the flex items are click/touch enabled which means "navigate to corresponding page".

    In PC scenario:

    • Semantic zoom works fine as expected.  Ctrl '+', Ctrl '-', Ctrl  + 'mouse wheel' all working fine as expected.

    In Simulator/Touch device:

    • Pinch and Stretch gestures are working but also performing tapping thus getting navigated to next page.
    • If there is just some click event on an item (e.g. play a sound on tap), view zooms out but also invoked item(which was under the finger while in zoomin view) on pinch .
    • If there is no semantic zoom, multi-touch doesn't do anything which is expected. But while semantic zoom enabled: touch and hold on ItemA with thumb and then touch ItemB with finger behaves like the tap on ItemB, means click/tap method get called which is unexpected. 

    Is there something I'm missing? How to fix this issue. Any help appreciated. Please ask if any other information needed. 


    Manish Zedwal

    Wednesday, July 11, 2012 9:40 AM


All replies

  • Hi Manish,

    How are you adding the onItemInvoked handler in your code?


    Jeff Sanders (MSFT)

    Wednesday, July 11, 2012 1:48 PM
  • Thanks for reply,

    I am doing like this: 

    WinJS.Utilities.query('.flex-item', this._canvas)	
        .forEach(function (flexitem) {		 
        flexitem.addEventListener('MSPointerDown', function (e) { }, false);
        flexitem.addEventListener('MSPointerUp', callbackmethod, false);
        flexitem.addEventListener('MSPointerMove', function () { }, false);

    • Edited by manish.zedwal Wednesday, July 11, 2012 1:57 PM indentation issues
    Wednesday, July 11, 2012 1:53 PM
  • You should be listening for MSGestureTap instead.

    MSPointerDown is fired whenever you touch the element.  See this example for more on gestures:

    Input: Instantiable gestures sample


    Jeff Sanders (MSFT)

    Wednesday, July 11, 2012 2:27 PM
  • Thanks, Let me see what can I extract from the sample.
    Wednesday, July 11, 2012 2:29 PM
  • Hi, In some of the  cases when I'm  trying to click on the HTMLElement which is listening for the MSGestureTap I'm getting JavaScript runtime error: InvalidStateError. What I figured is whenever I attached the listener inside the async, I'm getting this error.  

    Let me tell you the scenario, this is template->render->then: 

    template.render(item).then(function (t) {
    	var img = t.querySelector('.alphabetImage');
    	GS.Commons.onTap(img, function () { GS.Utilities.playSound(item.wordSound); }); // attached MSGesture listener

    Whats achieved inside GS.Commons.onTap is added event listeners for 'MSPointerDown', 'MSGestureTap', 'MSPointerUp', 'MSPointerOut'.

    Second argument for this is just callback method which is used in case of 'MSGestureTap' event triggers. 

    If I'm doing the same thing elsewhere where there is no async, It works fine.

    If you see after crash/break, the target is set to null: 


    Link to the listener code [LINK]


    Manish Zedwal

    Thursday, July 12, 2012 8:52 PM
  • Hi Manish,

    I think we should connect and you can provide a complete example to me.  You can contact me here:  http://blogs.msdn.com/jpsanders/contact.aspx


    Jeff Sanders (MSFT)

    Wednesday, July 25, 2012 8:16 PM