I'm programming an App for the Aldebaran's Pepper robot. I'm using Choregraphe and I made an html page for displaying in robots tablet.
I just want to activate an output (that i have to add at the "SHOW APP" box) by pressing a button in the Html page displayed on the tablet of the robot.
How to do this?
index.html
<head>
<script src="/libs/qi/2/qi.js"></script>
<script src="js/script.js"></script>
</head>
<body>
<div class="flex">
<button class="button" onclick="launchEvent1()">First event</button>
<button class="button" onclick="launchEvent2()">Second event</button>
<button class="button" onclick="launchEvent3()">Third event</button>
<button class="home" onclick="launchEventHome()">Home button</button>
</div>
</body>
script.js
session = null
QiSession(connected, disconnected, location.host);
function connected(s) {
console.log("Session connected");
session = s;
//If you want to subscribe so some events (to send info pepper->tablet) call the function here
}
function disconnected(error) {
console.log("Session disconnected");
}
function launchEventHome(){
session.service("ALMemory").then(function (memory) {
memory.raiseEvent("homeEvent", "paramHome");
});
}
function launchEvent1(){
session.service("ALMemory").then(function (memory) {
memory.raiseEvent("event1", "param1");
});
}
function launchEvent2(){
session.service("ALMemory").then(function (memory) {
memory.raiseEvent("event2", "param2");
});
}
function launchEvent3(){
session.service("ALMemory").then(function (memory) {
memory.raiseEvent("event3", "param3");
});
}
On choregraphe, click on "add event from ALMemory" (the plus icon on the left side) and select "add new key". Give it the name you gave it on your .js file (in my case, event1, event2, event3 and homeEvent).
With that, whenever the user clicks on the button on the tablet, it will trigger the event and it will send the param as a dynamic type (param1, 2, etc. depending on which button the user pressed)
What you can do is use the Javascript SDK to raise ALMemory events, and subscribe to those in Choregraphe.
Something like this (left red box):
Related
I'm building an Single Page App where the paypal button is generated on ng-click from a button (Add products).
The problem I'm facing, is that if the user clicks this button several times, the app will generate several buttons one after the other.
This can very well happen as the user might click the button, but then go back and add an extra product, before finish the purchase.
How could I manage to remove all existing buttons before adding the new one?
The function looks like this:
$scope.formulari = function(){
paypal.Button.render({
env: 'production', // Or 'sandbox'
locale: 'es_ES',
style: {
label: 'paypal',
...
And after a few clicks, my initial HTML button <a id="paypal-button"></a> looks like this:
<a id="paypal-button">
<div id="xcomponent-paypal-button-6d3dcbc0c4" class="paypal-button paypal-button-context-iframe paypal-button-label-paypal paypal-button-size-large paypal-button-layout-horizontal" style=""></div>
<div id="xcomponent-paypal-button-46823018c3" class="paypal-button paypal-button-context-iframe paypal-button-label-paypal paypal-button-size-large paypal-button-layout-horizontal" style=""></div>
<div id="xcomponent-paypal-button-41aad29e14" class="paypal-button paypal-button-context-iframe paypal-button-label-paypal paypal-button-size-large paypal-button-layout-horizontal" style=""></div>
<div id="xcomponent-paypal-button-48d3247535" class="paypal-button paypal-button-context-iframe paypal-button-label-paypal paypal-button-size-large paypal-button-layout-horizontal" style=""></div>
</a>
Generating a button on click might not be the way you want to go with an AngularJs structure. Editing your DOM structure is more a jQuery thing and in general you don't want to mix the two (Some explanations of why: 1, 2).
An Angular way to pick this up would be the following (Explanation beneath snippet):
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.articles = ['PC', 'Playstation', 'Xbox'];
$scope.cart = [];
$scope.addArticleToCart = function(article) {
$scope.cart.push(article);
}
$scope.clearCart = function() {
$scope.cart = [];
}
$scope.doPaypalThings = function() {
//REST API stuff
}
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<div ng-repeat="article in articles">
<button ng-click="addArticleToCart(article)">
{{article}}
</button>
</div>
<br>
<div ng-show="cart.length > 0">
<button id="paypal-button" ng-click="doPaypalThings()">
Paypal
</button>
</div>
<br>
<div>
In cart:
</div>
<div ng-repeat="item in cart">
{{item}}
</div>
<br>
<div>
<button ng-click="clearCart()">
Clear cart
</button>
</div>
</div>
</body>
</html>
With this method the button always exists, it just isn't visible until the requirements within the ng-show are met. In the example, the requirement is that there are items in the cart. You will notice that once the requirements are no longer met the button will disappear again.
An opposite of ng-show is ng-hide which can be used in the same way:
ng-hide="cart.length == 0" or ng-hide="cart.length < 1
If you're dead set on using your current method, you can check out this answer here, although it is not Angular.
I am developing React js app with Material UI.
I have implemented onClick in List and List Item.
enter image description here
I want to implement onRightClick event as well.
Please help me.
Use onContextMenu event where you want to show your default context menu, not browser context menu.
there is onContextMenu event in react defined events. if you want to change the rightClick action on your component or part of your component you need to write a custom eventHandler for onContextMenu event.
<div onContextMenu={this.someEvenetHandler}></div>
someEventHandler = (e) => {
"Do stuff here"
}
or something like that.
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react-dom.min.js"></script>
<html>
<head>
<title>Test</title>
</head>
<body>
<div id="app"></div>
<script type="text/jsx">
var App = React.createClass({
handleClick: function(e) {
if (e.type === 'click') {
console.log('Left click');
} else if (e.type === 'contextmenu') {
console.log('Right click');
}
},
render : function(){
return <p onClick={this.handleClick} onContextMenu={this.handleClick} >Something </p>
}
});
React.render(<App />, document.getElementById('app'));
</script>
</body>
</html>
Try running above snippet you will be able to identify left and right click respectively.
According to the react docs, onContextMenu is the correct prop to pass. To prevent the standard functionality, you probably need to add e.preventDefault(); to your callback function.
Essentially, I would like to know the best way to toggle between two img or div on a user click. So, first the play image is visible and when user clicks, play image is hidden and pause image is shown. When user clicks pause image, pause image is hidden and play image is shown.
I tried using an ng-show but I could only figure out how to show both images without hiding the other. So, a play image would be next to the pause image, which is not ideal.
Thanks in advance :)
Code I have tried that does not work:
HTML
<button ng-click="changeStatus" ng-show="checkStatus">Play</button>
<button ng-click="changeStatusAgain" ng-hide="checkStatus">Pause</button>
Controller:
$scope.changeStatus=function(){
$scope.checkStatus = false;
}
$scope.changeStatusAgain=function(){
$scope.checkStatus = true;
}
https://jsfiddle.net/n8nnwtte/
Use the same expression for both and negate it according to your logic.
HTML
<button class="play" ng-show="!song.playing" ng-click="song.togglePlay()">
<button class="pause" ng-show="song.playing" ng-click="song.togglePlay()">
JS
var $scope.song = {
playing: false, // Set the initial state
togglePlay: function() {
$scope.song.playing = !$scope.song.playing; // This would alternate the state each time
// Do something with the song
if ($scope.song.playing) { /*..*/ } else { /*..*/ }
}
};
This assumes you have a song object defined in your scope and that it has a boolean property called playing. So if song.playing is falsy we show the play button and if it's truthy we show the pause button.
The togglePlay() method defined can then be used to alternate the state of song.playing in addition to its role of actually controlling the playback.
JavaScript Toggle (Play/Pause) Sound on Click Event of DOM Element
his post shows how to toggle (play/pause) sound by JavaScript manipulation of onclick event of a DOM element. Browser support of HTML5 audio tag is a must in this example.
https://siongui.github.io/code/javascript-sound/toggle.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript Toggle (Play/Pause) Sound on Click Event of DOM Element</title>
</head>
<body>
<button id="player" type="button"
onclick="javascript:toggleSound();">
Click to Toggle Sound
</button>
<audio id="audio">
<source src="Wat_Metta_Buddha_Qualities.mp3" type="audio/mpeg">
Your browser does not support this audio format.
</audio>
<script type="text/javascript">
function toggleSound() {
var audioElem = document.getElementById('audio');
if (audioElem.paused)
audioElem.play();
else
audioElem.pause();
}
</script>
</body>
</html>
I am using the angular-bootstrap in AngularJS, because I want to use dialogs. In my HTML I have the following code:
<script type="text/ng-template" id="create.html">
<div class="modal-header">
<h3 class="modal-title">Welcome!</h3>
</div>
<div class="modal-body">
<p>Hi</p>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="ok()">OK</button>
</div>
The modal dialog shows up, but nothing happen when I click on the "OK" button.
There is also no error in the console. When I create a button and place it outside the script, then it works. But I need to use the button in the modal dialog.
I have created a factory for the modal dialog, because I want to use it in my controller. Here the function what works fine:
$scope.createGame = function(data){
// Open the modal dialog
ModalFactory.open();
}
Now the modal dialog shows up and the button "OK" appears. When I click on "OK" nothing happen. This is the function I have created for the "OK" button.
$scope.ok = function(data){
// Close the modal dialog
alert("Test");
}
But the triggering of ng-click in that script what you see above doesn't work...
Your function requires a parameter "data" but you are not passing it.
<button class="btn btn-primary" ng-click="ok()">OK</button>
Either Change your function signature like this,
$scope.ok = function(){
// Close the modal dialog
alert("Test");
}
Or Pass the data.
It's always use a different function name rather than just "ok"
I don't know if this makes any sense but I have a form with checkboxes and once the user clicks on the box it will show a hidden message. But once I reload the browser, the checkbox is still checked off but the hidden message is no longer there.
<input type="checkbox" id="CB6" name="" value="">
<table name="hidden" id="hidden" style="display:none;">
<tr>
<td>It works</td>
</tr>
</table>
<script type="text/javascript" language="JavaScript">
$(document).ready(function() {
$('#CB4').click(function() {
if($(this).is(':checked')) {
$('#hiddenRAcost').show();
} else {
$('#hiddenRAcost').hide();
}
});
});
</script>
Is there like an onload function or something when a user reloads the page, it can run that script?
Thanks
<body onload="myFunc()">
...
</body>
Whenever the body loads (or page), myFunc() will run, so you can use this to check.
Just have it look for the checkbox state when the page loads as well as when it is clicked.
Take this code:
if($(this).is(':checked')) {
$('#hiddenRAcost').show();
} else {
$('#hiddenRAcost').hide();
}
And place it directly in your $(document).ready() handler. If you want, you could make it a function and then use that in both the click event handler and the onload.