Hi, @whity
I have no HMD for testing, but this works on my mobile device.
- A 3D sphere model
- A 3D Gauge or Image or Label placed at the center of the sphere, check Billboard and Always on top
Does this fit you need?
regards,
ClarK
Hi @dsgnrClarK ,
that gif looks pretty neat. I think I described the problem wrong.
It is difficult to have several text lines in front of card board.
When aligning it looks like this:
But after activating billboarding & always on top and changin the perspective, it looks like this:
But I think the 3D-Container should solve the problem.
3D-container is on its way.
Meanwhile, something extraordinary mentioned by @sdidier worth a try.
Nevertheless, 3D SVG Widget is not visible in Vuforia Studio Canvas, difficult to manipulate (size, location).
Also, the SVG Codes is only accessible by text editor, not very convenient.
And, even if 3D-Container is available, 3DLabel won't wrap text still.
So I suppose 3D SVG Widget would be a better solution, if SVG Codes could be controlled by JavaScript in View.js. (Maybe this is only limited by my skill...)
For everyone having problems with displaying many lines of information in one panel i can recommend the use of the 2D Canvas as it helped me alot in my experiences.
Some Code Snippet to try out yourself:
Just put some new 3D image on the Canvas and a Button and use the Buttons Click Event with this:
createInfoPanel('3DImage-1',"PanelHeader",4,{"Temp. Set Value in C°":"25","Temp. Act Value in C°":"24","Roller rpm":"200","Roller Distance in m":"2"});
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
// $scope, $element, $attrs, $injector, $sce, $timeout, $http, $ionicPopup, and $ionicPopover services are available
//createInfoPanel('3DImage-1',"PanelHeader",4,{"Temp. Set Value in C°":"25","Temp. Act Value in C°":"24","Roller rpm":"200","Roller Distance in m":"2"});
$scope.createInfoPanel = function(widget/*STRING WidgetName*/, headertext/*STRING PanelName*/, itemnumber/*Integer Rows to show*/, daten/*JSON*/) {
//Parameter
var bodyHeight = 80 * itemnumber;
var keys = Object.keys(daten);
//Longest String
let allwordlength = [];
for(let i = 0;i<itemnumber;i++){
allwordlength[i]= keys[i].length;
}
let maxnum = Math.max(...allwordlength);
//Constructor
var windowHeight = 1024;
var windowWidth = maxnum > 30 ? 1024 :(maxnum > 25 ? 950 : (maxnum > 20 ? 900 : (maxnum > 17 ? 875 : (maxnum > 16 ? 850 : (maxnum > 10 ? 750 : 700)))));
var headerHeight = 180;
var headerWidth = windowWidth - 80;
var bodyWidth = headerWidth-80;
var borderWidth = 14;
var offset = borderWidth / 2;
//Canvas Start
var canvas = document.createElement("canvas");
canvas.height = windowHeight;
canvas.width = windowWidth;
var ctx = canvas.getContext("2d");
// Color Palette
var bg_orange = "rgba(249, 180, 45, 1)";
// Gradients
var grdorange = ctx.createLinearGradient(0, 0, windowWidth, 0);
grdorange.addColorStop(0, bg_orange);
grdorange.addColorStop(1, "white");
//Header Background Border
ctx.fillStyle = "black";
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(headerWidth, 0);
ctx.lineTo(headerWidth, headerHeight - 80);
ctx.lineTo(headerWidth - 80, headerHeight);
ctx.lineTo(0, headerHeight);
ctx.lineTo(0, 0);
ctx.closePath();
ctx.fill();
//Header Background
ctx.fillStyle = grdorange;
ctx.beginPath();
ctx.moveTo(0 + borderWidth, 0 + borderWidth);
ctx.lineTo(headerWidth - borderWidth, 0 + borderWidth);
ctx.lineTo(headerWidth - borderWidth, headerHeight - 80 - offset);
ctx.lineTo(headerWidth - 80 - offset, headerHeight - borderWidth);
ctx.lineTo(0 + borderWidth, headerHeight - borderWidth);
ctx.lineTo(0 + borderWidth, 0 + borderWidth);
ctx.closePath();
ctx.fill();
//Header Text
ctx.font = "bold 70px Arial"
ctx.fillStyle = "white";
ctx.textAlign = "left";
ctx.shadowColor = "black";
ctx.shadowBlur = 7;
ctx.fillText(headertext, headerWidth / 16, (headerHeight + 2 * borderWidth) / 2 + 10);
ctx.shadowColor = "transparent";
//Body Background Border
ctx.translate(0, headerHeight);
ctx.fillStyle = "black";
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(bodyWidth, 0);
ctx.lineTo(bodyWidth, bodyHeight - 80);
ctx.lineTo(bodyWidth - 80, bodyHeight);
ctx.lineTo(80, bodyHeight);
ctx.lineTo(0, bodyHeight - 80);
ctx.lineTo(0, 0);
ctx.closePath();
ctx.fill();
//Body Background "See Through"
ctx.fillStyle ="#69A2FF";
ctx.globalCompositeOperation = "xor";
ctx.beginPath();
ctx.moveTo(0 + borderWidth, 0);
ctx.lineTo(bodyWidth - borderWidth, 0);
ctx.lineTo(bodyWidth - borderWidth, bodyHeight - 80 - offset);
ctx.lineTo(bodyWidth - 80 - offset, bodyHeight - borderWidth);
ctx.lineTo(80 + offset, bodyHeight - borderWidth);
ctx.lineTo(0 + borderWidth, bodyHeight - 80 - offset);
ctx.lineTo(0 + borderWidth, 0 + borderWidth / 2);
ctx.closePath();
ctx.fill();
//Body Background
ctx.fillStyle = "rgba(105,162,255,0.8)";//Blue
ctx.beginPath();
ctx.moveTo(0 + borderWidth, 0);
ctx.lineTo(bodyWidth - borderWidth, 0);
ctx.lineTo(bodyWidth - borderWidth, bodyHeight - 80 - offset);
ctx.lineTo(bodyWidth - 80 - offset, bodyHeight - borderWidth);
ctx.lineTo(80 + offset, bodyHeight - borderWidth);
ctx.lineTo(0 + borderWidth, bodyHeight - 80 - offset);
ctx.lineTo(0 + borderWidth, 0 + borderWidth / 2);
ctx.closePath();
ctx.fill();
//Body Text Constructor
ctx.globalCompositeOperation = "source-over";
ctx.shadowBlur = 7;
let fontweight = maxnum > 30 ? 38 : (maxnum > 20 ? 42 : (maxnum > 15 ? 46 : (maxnum > 10 ? 48 : 50)));
let margin = maxnum > 30 ? 50 :(maxnum > 25 ? 60 : (maxnum > 20 ? 70 : (maxnum > 15 ? 80 : (maxnum > 10 ? 90 : 100))));
ctx.font = "bold "+fontweight+"px Arial";
ctx.fillStyle = "rgba(255,255,255,1)";
ctx.shadowColor = "black";
//Body Text
for (let i = 1; i <= itemnumber; i++) {
//Data Names
ctx.textAlign = "left";
ctx.fillText(keys[i-1] + ": ", margin, bodyHeight * i / (itemnumber + 1));
//Data Values
ctx.textAlign = "right";
ctx.fillText(daten[keys[i-1]], bodyWidth-margin, bodyHeight * i / (itemnumber + 1));
}
ctx.shadowColor = "transparent";
ctx.translate(0, -headerHeight);
tml3dRenderer.setTexture(widget,canvas.toDataURL());
}
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Final Look:
