Showing results for 
Search instead for 
Did you mean: 
Showing results for 
Search instead for 
Did you mean: 

Display SVG as 3D Image on Hololens

Level 7

Display SVG as 3D Image on Hololens

Hello, to make a long story short I need multiline preformated text to display on 3D Image like:

$scope.render_html_to_canvas = function(html, can, x, y, width, height) {
     var ctx = can.getContext('2d');
     var xmlsrc='<svg xmlns="" width="'+width+'" height="'+height+'">' +
                        '<foreignObject width="100%" height="100%">' +
                        '</foreignObject>' +
     var data = "data&colon;image/svg+xml;charset=utf-8,"+encodeURIComponent(xmlSrc);
     var img = new Image();

this code works perfect in a preview and mobile, but on hololens it sometimes causes restart of Vuforia Viewer and sometimes nothing....
Can anyone advise me on how to improve it for hololens?


Re: Display SVG as 3D Image on Hololens

Hi @mziemniewicz ,

I am not sure what your code does actually in detail and if all these steps are necessary to manage this task. Therefore, may be, here my answer will not be this what you are asking for.

Therefore could your pride the simples demo project where we can see what is the effect of you current code  when it works so the thing about some alternatives

About dynamic source of image I could remember a projected where I had some images in  an repository  and used some REST API call like this one:

//////////////// get File form Thingworx Repository RESP API
$scope.getFileFromRepository = function(name,image_id) {
var req = {
"url":'/Thingworx/Things/My_images-File/Services/LoadImage?Appkey="dfab15de-cfbd-4429-98df-7201d728457f" HTTP/1.1',
"Host": '',
"Authorization": 'Basic Og==',
"Content-Type": 'application/json',
"Cache-Control": 'no-cache',
"Postman-Token": '5xxxxxxx-9xxx-5xxx-xxxx-d8xxxx1xxxx',
  "headers": {
    "authorization": "Basic Og==",
    "content-type": "application/json",
    "cache-control": "no-cache",
    "postman-token": "cxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxxx6"
  "processData": false,
  "data": "{\"path\":\"/webcam/"+ name +"\"}"
    var ret_str='data&colon;image/gif;base64,'[0].Content;

Where I call it  from an interval callback

$interval( function(){
 if( global_count_int1 > 7)  global_count_int1=0;
    global_count_int1++;    //this count is contained by the image adress/link
    	{ url_source="pic_0"+global_count_int1+".gif";
    if( WEB_SERVER )  
      var url_source="http://localhost:8080/webcam/pic_0"+global_count_int1+".gif";
      var url_source= "app/resources/Uploaded/pic_0"+global_count_int1+".gif";
    $scope.$applyAsync(function() {
    //this parameter could also be used for direct linking to any image sources
                      ); //end applyAsync
    }//finish else USE_REPOSITORY
          , 3100);

And this will call the generared url from repository (if USE_REPOSITORY=true)


So this will change the displayed picture after 3.1 sec


This code above so far I remember was also working on the HoloLens.


When I looked second time on your code - I think you will write some dynamic html and then try to create a picture of it and to set to a image widget. 

May be , it could be a good idea to generate the picture anywhere outside the HoloLens - for example on the Thingworx server and then read it from there....