HTML button in 2D canvas

[leonardosella]

Hi everyone, 

I want to disconnect my projects from "drag and drop" widget or buttons.

My idea is to try to implement all buttons/widget/popup with some html code, in this way all the experience will be managed with the javascript file. 

Has anyone some tips? 

Thank you

[dsgnrClarK]

My guess is 'No'.

Widgets are essential to create 2D elements.

There is no control over HTML, only CSS.

[leonardosella]

Thank you for the clarification. 

Into the net I found https://ionicframework.com/docs/api/. Is there any chance to use this api into Vuforia Studio?

[RolandRaytchev]

One possilbe usage is to use $ionicPopup service -  here some examples

/////////////////////////////////////////////
var my_msg_data={
  title: '', // String. The title of the popup.
  cssClass: '', // String, The custom CSS class name
  subTitle: '', // String (optional). The sub-title of the popup.
  template: 'This is component InfoView', // String (optional). The html template to place in the popup body.
  templateUrl: '', // String (optional). The URL of an html template to place in the popup body.
  okText: '', // String (default: 'OK'). The text of the OK button.
  okType: '', // String (default: 'button-positive'). The type of the OK button.
};
$scope.app.TestPopup=function(my_comp){
  my_msg_data['title']='Test Popup';
  my_msg_data['template']="Test Pupup funciton = " + my_comp;
  my_msg_data['okText']='Acknowledge';
  my_msg_data['okType']='button-balanced';
  var alertPopup= $ionicPopup.alert( my_msg_data);
  alertPopup.then(function() {console.warn("then branch of popup called");} );
};

///

$scope.app.TestSecondPopup= function(){
$scope.$applyAsync(function() {$scope.app.showPopupMore();}, 3100);
                                     };
// Triggered on a button click, or some other target
$scope.app.showPopupMore = function() {
  $scope.data = {};

  // An elaborate, custom popup
  var myPopup = $ionicPopup.show({
    template: '<input type="password" ng-model="data.wifi">',
    title: 'Enter Wi-Fi Password',
    subTitle: 'Please use normal things',
    scope: $scope,
    buttons: [
      { text: 'Cancel' },
      {
        text: '<b>Save</b>',
        type: 'button-positive',
        onTap: function(e) {
          if (!$scope.data.wifi) {
            //don't allow the user to close unless he enters wifi password
            e.preventDefault();
          } else {
            return $scope.data.wifi;
          }
        }
      }
    ]
  });

  myPopup.then(function(res) {
    console.log('Tapped!', res);
  });

  $timeout(function() {
     myPopup.close(); //close the popup after 3 seconds for some reason
  }, 15000); //resticted to 15 seconds
 };

 // A confirm dialog
 $scope.showConfirm = function() {
   var confirmPopup = $ionicPopup.confirm({
     title: 'Consume Ice Cream',
     template: 'Are you sure you want to eat this ice cream?'
   });

   confirmPopup.then(function(res) {
     if(res) {
       console.log('You are sure');
     } else {
       console.log('You are not sure');
     }
   });
 };

 // An alert dialog
 $scope.showAlert = function() {
   var alertPopup = $ionicPopup.alert({
     title: 'Don\'t eat that!',
     template: 'It might taste good'
   });

   alertPopup.then(function(res) {
     console.log('Thank you for not eating my delicious ice cream cone');
   });
 };

and test in preview mode 

[RolandRaytchev]

another option is to use $popover srv. Popovers provide an easy way to present or gather
information from the user and are commonly used in the following situations:
– Show more info about the current view
– Select a commonly used tool or configuration
– Present a list of actions to perform inside one of your views

//difference to popup is that we can use html template:

// .fromTemplate() method
var template = '<ion-popover-view><ion-header-bar> <h1 class="title">My Popover
Title</h1> </ion-header-bar> <ion-content> Hello! </ion-content></ion-popoverview>';
$scope.popover = $ionicPopover.fromTemplate(template, {
scope: $scope
});
// .fromTemplateUrl() method
$ionicPopover.fromTemplateUrl('my-popover.html', {
scope: $scope
}).then(function(popover) {
$scope.popover = popover;
});
$scope.openPopover = function($event) {
$scope.popover.show($event);
};
$scope.closePopover = function() {
$scope.popover.hide();
};
//Cleanup the popover when we're done with it!
$scope.$on('$destroy', function() {
$scope.popover.remove();
});
// Execute action on hide popover
$scope.$on('popover.hidden', function() {
// Execute action
});
// Execute action on remove popover
$scope.$on('popover.removed', function() {
// Execute action
});
});