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

Community Tip - Did you know you can set a signature that will be added to all your posts? Set it here! X

HTML button in 2D canvas


HTML button in 2D canvas

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


My guess is 'No'.


Widgets are essential to create 2D elements.

There is no control over HTML, only CSS.

Thank you for the clarification. 


Into the net I found Is there any chance to use this api into Vuforia Studio?

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.
  my_msg_data['title']='Test Popup';
  my_msg_data['template']="Test Pupup funciton = " + my_comp;
  var alertPopup= $ionicPopup.alert( my_msg_data);
  alertPopup.then(function() {console.warn("then branch of popup called");} );


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

  // An elaborate, custom popup
  var myPopup = ${
    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 (!$ {
            //don't allow the user to close unless he enters wifi password
          } else {
            return $;

  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 



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.closePopover = function() {
//Cleanup the popover when we're done with it!
$scope.$on('$destroy', function() {
// Execute action on hide popover
$scope.$on('popover.hidden', function() {
// Execute action
// Execute action on remove popover
$scope.$on('popover.removed', function() {
// Execute action