Can I mix HTML markup with generated elements?

Please post public support tickets here. Note: for private support tickets, please send an email to support@cshtml5.com instead.
rkmore
Posts: 55
Joined: Mon Dec 07, 2015 1:53 pm

Can I mix HTML markup with generated elements?

Postby rkmore » Wed Mar 16, 2016 6:08 pm

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!

JS-Support @Userware
Site Admin
Posts: 1142
Joined: Tue Apr 08, 2014 3:42 pm

Re: Can I mix HTML markup with generated elements?

Postby JS-Support @Userware » Thu Mar 17, 2016 10:19 am

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!

shrikant
Posts: 2
Joined: Tue Jan 10, 2017 4:29 am

Re: Can I mix HTML markup with generated elements?

Postby shrikant » Tue Jan 10, 2017 4:35 am

which kendo event is used in ExecuteJavaScriptAsync for webcam?

JS-Support @Userware
Site Admin
Posts: 1142
Joined: Tue Apr 08, 2014 3:42 pm

Re: Can I mix HTML markup with generated elements?

Postby JS-Support @Userware » Tue Jan 10, 2017 6:22 am

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

shrikant
Posts: 2
Joined: Tue Jan 10, 2017 4:29 am

Re: Can I mix HTML markup with generated elements?

Postby shrikant » Wed Jan 11, 2017 1:57 am

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?

JS-Support @Userware
Site Admin
Posts: 1142
Joined: Tue Apr 08, 2014 3:42 pm

Re: Can I mix HTML markup with generated elements?

Postby JS-Support @Userware » Wed Jan 11, 2017 10:35 am

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


Return to “Technical Support”

Who is online

Users browsing this forum: No registered users and 44 guests

 

 

cron