locked
Video in Template: Help/Is it worth it?

    Question

  • I am looking to put webcam video input into a template, and display the template multiple times, each time with a different CSS filter.

    1. I now know that I need to copy the video to a canvas.  To do that, I think that I need to iterate the DOM to get each canvas element, then set everything up to copy the video to it.  I have no idea how to iterate the DOM (or especially how to do so efficiently and effectively identify each canvas element).  Are there any good references on how to do this?

    2. Is it possible to set the ID of the already-rendered element that was created from the template?  This would be the easiest way to apply a different filter to each canvas using CSS, but it doesn't seem to be working to do something like:

    data-win-bind="id : videoKey"

    I am pretty sure that that won't work, but I can't totally explain why...  If that would work, I don't think I would even need to iterate the DOM, correct?

    I would love any input you all could give!  Thanks!

    Dave

    Sunday, May 13, 2012 1:17 AM

Answers

  • There are many ways to do this.  It is possible to bind to the id tag of an element.

    In this example, a template is rendered with bindings to the textContent, color and id.  The rendered element is queried by id tag and the text content is displayed on the JavaScript console.

    <body>
        <div id="myTemplate" data-win-control="WinJS.Binding.Template">
            <div>
                <div data-win-bind="textContent: name; style.color: color; id: myKey"></div>
            </div>
        </div>
        <div id="myContainer"></div>
    </body>

    (function () {
        "use strict";
    
        var itemToBind = { name: "Jim", myKey: "JimsId", color: "orange" };
    
        WinJS.Utilities.ready(function () {
            WinJS.UI.processAll().then(function () {
    
                var template = document.getElementById("myTemplate").winControl;
                template.render(itemToBind, document.getElementById("myContainer"))
                .done(function () {
                    var content = document.getElementById("JimsId").textContent;
                    console.log(content);
    
                });
            });
    
        });
    
    })();
    I'm not sure of your scenario so I can't provide more help without more information.  Are these canvases rendered in a ListView?  Are there a variable number?  Do you need to change the id's?  Is your problem is creating the CSS selectors and/or accessing specific elements in JavaScript?


    Sunday, May 13, 2012 3:09 PM

All replies

  • There are many ways to do this.  It is possible to bind to the id tag of an element.

    In this example, a template is rendered with bindings to the textContent, color and id.  The rendered element is queried by id tag and the text content is displayed on the JavaScript console.

    <body>
        <div id="myTemplate" data-win-control="WinJS.Binding.Template">
            <div>
                <div data-win-bind="textContent: name; style.color: color; id: myKey"></div>
            </div>
        </div>
        <div id="myContainer"></div>
    </body>

    (function () {
        "use strict";
    
        var itemToBind = { name: "Jim", myKey: "JimsId", color: "orange" };
    
        WinJS.Utilities.ready(function () {
            WinJS.UI.processAll().then(function () {
    
                var template = document.getElementById("myTemplate").winControl;
                template.render(itemToBind, document.getElementById("myContainer"))
                .done(function () {
                    var content = document.getElementById("JimsId").textContent;
                    console.log(content);
    
                });
            });
    
        });
    
    })();
    I'm not sure of your scenario so I can't provide more help without more information.  Are these canvases rendered in a ListView?  Are there a variable number?  Do you need to change the id's?  Is your problem is creating the CSS selectors and/or accessing specific elements in JavaScript?


    Sunday, May 13, 2012 3:09 PM
  • This is the answer!  Thank you for your help!

    Wednesday, May 23, 2012 7:12 PM