Skip to main content
10-Marble
September 21, 2021
Solved

Dynamic Model Change + 3D Image Change

Hi.

I am currently making a content that changes 3D models via dropdown list menu.
I followed the instructions from this link.
http://support.ptc.com/help/vuforia/studio/en/index.html#page/Studio_Help_Center/Intermediate_DynamicModelLoad.html

I would like to add 3D Image per model (specifically for Model Description). So basically, if i have 5 models, i should also use 5 images. But it doesnt allow me to bind 3D image to my list as it is already bind to my model-1.

Is there a way that when i choose one item from the drop down list, that the 3D model and at the same time the 3D image will change?? 

Thank you in advance for the help.

21-Topaz I
September 21, 2021

Hi, @Adrian_G. 

here attached a simple project with demo. It is a little different approuch as @Suraj_Patil  suggested but there are many ways the achieve this functionality and this is one possible option. Because I am not sure if the assigment will work inside the json defintion /possibly it work / but did not test my self. Here the relevant code;

////
$scope.populateModelList = function() {

 $scope.my_json=[
 //

 {
 display: "Ventil_3_sequneces",
 value: "app/resources/Uploaded/Ventil_3_sequneces_publish.pvz"
 },
 {
 display: "Anim Door",
 value: "app/resources/Uploaded/anim_door2.pvz",
 },
 {
 display: "Test Assembly",
 value: "app/resources/Uploaded/test_asm.pvz"
 }
 ];
 
 $scope.mapArray=[]
$scope.mapArray["app/resources/Uploaded/Ventil_3_sequneces_publish.pvz"]="app/resources/Default/vu_alert1.svg"
$scope.mapArray["app/resources/Uploaded/anim_door2.pvz"]="app/resources/Default//vu_alert2.svg"
$scope.mapArray["app/resources/Uploaded/test_asm.pvz"]="app/resources/Default//vu_alert3.svg"

$scope.view.wdg['select-1']['list'] =$scope.my_json; 
};
 
$scope.valueChange = function()
//this function is called in the change evetn of the list widget
{
 $scope.setWidgetProp('image-1' ,'imgsrc',$scope.mapArray[$scope.view.wdg['select-1']['value']]);
}

 
/////////////////////////////////
$scope.$on('$ionicView.afterEnter', function() {$scope.populateModelList();
 $scope.allWidgetToConsole(); 
 });
 //=============================================================================

3 replies

16-Pearl
September 21, 2021

yes its possible by using same code u mentioned in ur link by just hide/show command line used in javascript as below:

 

$scope.populateModelList = function() {

$scope.app.params.modelSelect = [
{
display: "Chessboard",
value: "app/resources/Uploaded/Chessboard.pvz"

$scope.view.wdg["3D-Image1"].visible = true

$scope.view.wdg["3D-Image2"].visible = false

$scope.view.wdg["3D-Image3"].visible = false
},
{
display: "Blue Pump",
value: "app/resources/Uploaded/blue_pump.pvz"

$scope.view.wdg["3D-Image1"].visible = false

$scope.view.wdg["3D-Image2"].visible = true

$scope.view.wdg["3D-Image3"].visible = false


},
{
display: "Fan",
value: "app/resources/Uploaded/Fan.pvz"

$scope.view.wdg["3D-Image1"].visible = false

$scope.view.wdg["3D-Image2"].visible = false

$scope.view.wdg["3D-Image3"].visible = true


}
];

}

$scope.populateModelList();

Translate
21-Topaz I
September 21, 2021

Hi, @Adrian_G. 

here attached a simple project with demo. It is a little different approuch as @Suraj_Patil  suggested but there are many ways the achieve this functionality and this is one possible option. Because I am not sure if the assigment will work inside the json defintion /possibly it work / but did not test my self. Here the relevant code;

////
$scope.populateModelList = function() {

 $scope.my_json=[
 //

 {
 display: "Ventil_3_sequneces",
 value: "app/resources/Uploaded/Ventil_3_sequneces_publish.pvz"
 },
 {
 display: "Anim Door",
 value: "app/resources/Uploaded/anim_door2.pvz",
 },
 {
 display: "Test Assembly",
 value: "app/resources/Uploaded/test_asm.pvz"
 }
 ];
 
 $scope.mapArray=[]
$scope.mapArray["app/resources/Uploaded/Ventil_3_sequneces_publish.pvz"]="app/resources/Default/vu_alert1.svg"
$scope.mapArray["app/resources/Uploaded/anim_door2.pvz"]="app/resources/Default//vu_alert2.svg"
$scope.mapArray["app/resources/Uploaded/test_asm.pvz"]="app/resources/Default//vu_alert3.svg"

$scope.view.wdg['select-1']['list'] =$scope.my_json; 
};
 
$scope.valueChange = function()
//this function is called in the change evetn of the list widget
{
 $scope.setWidgetProp('image-1' ,'imgsrc',$scope.mapArray[$scope.view.wdg['select-1']['value']]);
}

 
/////////////////////////////////
$scope.$on('$ionicView.afterEnter', function() {$scope.populateModelList();
 $scope.allWidgetToConsole(); 
 });
 //=============================================================================
Translate
Adrian_G.10-MarbleAuthor
10-Marble
September 22, 2021

Hi guys!

@Suraj_Patil  thank you for the reply. I tried your method and it works perfectly fine.
Thank you for the code. This might be useful for other situations too.

@RolandRaytchev  Thanks. I also tried your method and it also gave me the result i wanted. I will be using ur method as this might help me lessen the code when multiple models are included.

Once again, thank you guys!
You are all the best!

Translate