I am using Three.js to try and implement a cross platform 3D model viewer. At the moment I have got it working and embedded in my XAML and C# application for Win 8.1 and Windows Phone 8.1 with a WebView. At the moment I am using C# code to load models (triangle meshes) from files on the device as well as a bundled file. The problem is that this means that I have to invoke a JavaScript function from C# for every triangle that I want to add and this makes the UI unresponsive for a while. I have tried to run the script async and to run the loader async but it does not really help because the all the JS function calls need to be handled by the Core Dispatcher otherwise I get an invalid thread access exception. In the beginning I did not realize this and thought it would be simpler and of higher performance to do loading in C#. I will now probably have to redo the loader in JS...
What I need to ask now is for some information as of how I should access the files from of JavaScript. I know Windows RT supports its file access API from JS but I am guessing this is more for entire JS applications because it does not seem to work from inside the WebView*. I would also prefer something more cross platform though as this also needs to work for Windows Desktop, iOS, Android and probably Mac and Linux too, so what would be my best option for this?
*I have tried the JS at http://msdn.microsoft.com/en-us/library/windows/apps/windows.storage.pickers.fileopenpicker.aspx in my WP 8.1 application but no file selector appears. My the WebView does seem to freeze up though but I also don't get any exceptions or so popping up.
PS. I have a sort of feeling that it might come down to me having to copy files to a temp folder that JS can access. This would not be ideal as copying will waste time but if it's my only option then I will probably have to go for it. If this my only option I would appreciate some help with implementing it because JavaScript is really not my language and I'm only using it because of Three.JS...
As soon are you're using the WebView you end up in a situation where you need to post messages back and forward between your host app (the C# code, assuming you didn't rewrite it) and the website you're hosting in the WebView. The two basically function in isolation from each other.
Can you not load your geometry using the documentation of the Three.js format? It looks to be available here: https://github.com/mrdoob/three.js/wiki/JSON-Geometry-format-4
That way you can proxy the entire geometry across vs. each individual triangle.
I'm already aware of this
http://blogs.msdn.com/b/windowsappdev/archive/2012/03/15/combining-xaml-and-directx.aspx
But I'm not clear if this is possible since the example is a single page game.
I want to construct a complete XAML/C# application with multiple XAML pages, used to deliver content. But on one of the pages the user navigates to I want to render something using DirectX3D in the full screen.
Can I do this? If so can I build my full XAML/C# project and then just add a single page that uses SwapChainBackgroundPanel?
Any advice is appreciated.
It's unfortunately impossible at the moment with SwapchainBackgroundPanel, because your root visual element must be the SwapChainBackgroundPanel. (and add your other UIElements, frames, widgets etc. on top). You can achieve this with SurfaceImageSource, but at the cost of much more memory bandwidth (and most ARM based devices lack decent memory bandwidth).
Windows 8.1 leaked info and dumps of the 8.1 winmds seem to indicate that this is going to change soon however :).
I've read about the LowProfileImageLoader. It will only load the image when the user can see it and will avoid blocking the UI thread.
I added it and tested on my application. All 25 images are from the exact same URL. With the default image it took a little to load but all other images were cached, and the scroll got super fast.
With the LowProfileImageLoader the images were not cached, it was loading 1 by 1 even though it was the exact same image. And when I scrolled down then up it would load the image all over again. And it takes a long time to load them.
Do I have to configure something to keep the images on cache? How do I configure this LowProfileImageLoader?
From what I understood by looking at a windows phone mango video presentation, images are automatically cached without you doing anything.
Video I'm talking about: http://www.wpcentral.com/multitasking-mango-demoed-detail
I don't want to use flash because it won't allow me to dynamically modify (add, remove) the pictures through my application so I thought about javascript (JQuery Plugins). but the problem is visitors can save the pictures and I don't want that to happen! .. so any ideas ?
Edit
I really appreciate your help and honesty but is JavaScript to have a dynamic modifiable SlideShow for my websites ? .. I don't care about screenshots, what's important is the original picture that I think will be downloaded to the visitor temp files!
The best you can do is a mild deterrent. I've written an HTML5 slideshow used by many. It offers right-click warning to those using it, but it is best referred to as a warning rather than a protection.
First off, if a browser can display an image, any viewer can get them too - no matter what you do - that's just the way the web works. If you really need them protected, then you need to use a significant semi-transparent watermark that touches important parts of the image or limit the viewing only to people who you trust.
If you're interested in a mild deterrent that can still be bypassed quickly by anyone who understands how a browser works, but might slow down non-sophisticated users, then you can implement a couple forms of click protection that make it harder to right-click save your images. Right click protection works best when the actual image you are displaying is not the top level image. This can be done by displaying a transparent image over the top of your slides. This will not be seen, but if a viewer succeeds in getting to a right-click-save menu, all they will succeed in saving is the empty transparent image on top. You can literally use a 1x1 transparent gif image which is tiny and then scale it up to the size of your image to cover it. It will not be seen, but it will defeat right-click save.
It is also common to also put in some javascript that attempts to intercept the right-click operation to prevent that, though this protection is blocked by more and more browsers now (like Firefox 4+) and is far from foolproof. It should not be relied upon.
In the end, these extra steps are only a mild deterrent and will only work with non-sophisticated viewers who aren't very determined. Because, even with the maximum protection in place, one can still look at the media list in the browser and see all the image URLs in the web page or look at the source or DOM or network trace of the web page to see what the URL is of the images that are being displayed. Once the URLs are known, the images can be saved easily. The danger of this kind of protection is that content owners believe it's real protection and they put images at risk that they shouldn't (without good watermarks on them). But, if you fully understand what you're getting (and not getting), you can do it.
It is impossible to Really protect them. If the user can see the image, then the user's browser has downloaded it. So the user has the image on their computer and can do anything they want with it.
There are lots of ways of making it harder for the user though. Disabling right clicking is one way.
If you really need to hide them badly you could use the data uri scheme too, but it really won't stop someone who really wants to get it:
http://en.wikipedia.org/wiki/Data_URI_scheme
You will not be able to protect your images unless you use a watermark which not what you're looking for as I understand you.
You need to remember that the user will always have his printscreen button and many tools that can do the job and that you can't control anyway
Break up your images into pieces, or possibly even embed them in larger junk images. Then use CSS to display the multiple overlapping divs with appropriate background styles to position the pieces where they need to be so to the user they look like one image, kinda like how google maps looks like one large image but is actually made up of many small ones. The user won't know the difference, but if they try to save them locally they'll just get one piece at a time.
Of course, that only works until they realize they can do a print-screen, but it's something. :-)
It is impossible to completely protect your images.
Seriously, if the user can see it in their browser they can save it to their computer.
You are fighting a losing battle here.
Even if you watermark your images, a good graphics program can countact that.
The best thing to do is only display small, low quality images that people wouldn't want to keep anyway.
I am using ASP.NET's "handler" to show images in an application. I need to play files of audio and video like I do with the image: I recover it from database and show it on an aspx page. Can I create a "handler" for the video and the audio? I don't want that a dialog box is opened asking to the user if he wants to play or save the video file.
I want to play it like YouTube does.
Maybe I can use silverlight for that.
Thank you!
It consists of two parts.
A handler or something that streams the video under the hood.
A client (can be implemented in Silverlight or Flash) that's on an standard HTML page that fetches the video from the handler and displays it.
It's certainly possible to write a handler that pulls video/audio content out of a database and streams it to the client. That would work much the same was as your existing image one.
The way to stop the dialog is to present your video within a video viewing control on the web page. For example, a silverlight control with a MediaElement in it.
Check out this guide to writing a silverlight media player: http://www.learn-silverlight-tutorial.com/StreamingMediaUsingSilverlight.cfm
This won't necessarily be the most performant way of serving video content, if you want lots of performance, look into buying commercial media streaming solution that can be integrated with your site.