Page 1 of 1

Can I mix HTML markup with generated elements?

Posted: Wed Mar 16, 2016 6:08 pm
by rkmore
I am desperately trying to figure out how to integrate camera support (it is the last thing I need and my project will be done!)

It seems that the only way to do this is to be able to mix HTML markup with the generated markup. It seems that I need to be able to insert and integrate something like:

<input type="file" accept="image/*" capture="camera">

Is there any way to do this?

Or even better could we get an extension or plugin or example that allows taking and uploading a picture? I have seen several discussions concerning this and is seems like a really natural thing to want to do!

Re: Can I mix HTML markup with generated elements?

Posted: Thu Mar 17, 2016 10:19 am
by JS-Support @Userware
Dear rkmore,

Yes, mixing HTML markup with the generated elements is very easy to do.


EDIT (2017): There is now an even simpler way, which is to use the "HtmlPresenter" class, like this:

Code: Select all

<HtmlPresenter Html="&lt;canvas id=&quot;demo_canvas&quot; Style=&quot;width:100%;height:100%&quot; /&gt;"/>



Here is some simple code that you can use to insert the HTML-based <input> tag into the XAML visual tree:

- just create a new class that inherits from "Control", and call the "SetHtmlRepresentation" method in its constructor, as show below:

Code: Select all

namespace Application1
{
    public class MyControl : Windows.UI.Xaml.Controls.Control
    {
        public MyControl()
        {
            CSharpXamlForHtml5.DomManagement.SetHtmlRepresentation(this, "<input type='file' accept='image/*' capture='camera'>");
        }
    }
}


- then, use the control is your XAML code, as show in the following example (where you need to replace "Application1" with the namespace of your application):

Code: Select all

<Page
    x:Class="Application1.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Application1">
    <Canvas>
        <local:MyControl/>
    </Canvas>
</Page>



If you want, you can interact with the HTML <input> element from within C#, by calling the "CSHTML5.Interop.GetDiv(this)" method AFTER the control has been added to the visual tree (for example in the Loaded event), and then passing the result to the method: CSHTML5.Interop.ExecuteJavaScript("enter your JS with parameter {0}", TheParameterGoesHere)

You can see a complete example by looking at the source code of the ArcGIS Mapping Extension.


Regards,
JS-Support

PS: I cannot wait to see your finished app!

Re: Can I mix HTML markup with generated elements?

Posted: Tue Jan 10, 2017 4:35 am
by shrikant
which kendo event is used in ExecuteJavaScriptAsync for webcam?

Re: Can I mix HTML markup with generated elements?

Posted: Tue Jan 10, 2017 6:22 am
by JS-Support @Userware
shrikant wrote:which kendo event is used in ExecuteJavaScriptAsync for webcam?

Hi shrikant,

Can you please elaborate on what you mean by "which kendo event"? How is Kendo UI related to the webcam? Are you referring to Apache Cordova?

Thanks.
Regards,
JS-Support

Re: Can I mix HTML markup with generated elements?

Posted: Wed Jan 11, 2017 1:57 am
by shrikant
Can i access the Laptop/computer internal camera to use in my Human Resources web application and we need that the user can take the employees picture using the computer camera. this is posible?

Re: Can I mix HTML markup with generated elements?

Posted: Wed Jan 11, 2017 10:35 am
by JS-Support @Userware
shrikant wrote:Can i access the Laptop/computer internal camera to use in my Human Resources web application and we need that the user can take the employees picture using the computer camera. this is posible?


Hi,

Yes, this is possible using Apache Cordova. Just add the JS libraries to your project and call them using Interop.ExecuteJavaScript("...")

We plan to post a lot of examples about Apache Cordova in 2017/2018. If you need it in the short term, please contact us and we can make a precise quote and timescale to assist you so that you can have it implemented very quickly.

Thanks.
Regards,
JS-Support