I have been using the example code from SmartFace.io to work as follows:
pick(
myCars,
selectedIndex,
function(e) {Pages.NewPage.Label1.text = myCars[e.index]; selectedIndex = e.index; },
function() {},
function() {}
);
However the picker just doesn't want to show in the emulator. I have also tryied putting this code in a sepparate function and call it from a OnPress event of an ImageButton but still nothing.
I am trying this on an iPhone 4S so maybe that is the issue...
Any hint on what I am doing incorrectly would be greatly appreciated.
Thanks
Gerry
I just add a TextButton and Label to Page1 and write these codeLines. and it works; Maybe, some other codes breaks the functions.
var myCars = ["Audi", "Volvo", "Volkswagon"];
var selectedIndex = 0;
/**
* Creates action(s) that are run when the user press the key of the devices.
* #param {KeyCodeEventArguments} e Uses to for key code argument. It returns e.keyCode parameter.
* #this SMF.UI.Page
*/
function Page1_Self_OnKeyPress(e) {
if (e.keyCode === 4) {
Application.exit();
}
}
/**
* Creates action(s) that are run when the page is appeared
* #param {EventArguments} e Returns some attributes about the specified functions
* #this SMF.UI.Page
*/
function Page1_Self_OnShow() {
//Comment following block for removing navigationbar/actionbar sample
//Copy this code block to every page onShow
header.init(this);
header.setTitle("Page1");
header.setRightItem("RItem");
header.setLeftItem();
/**/
}
/**
* Creates action(s) that are run when the object is pressed from device's screen.
* #param {EventArguments} e Returns some attributes about the specified functions
* #this SMF.UI.TextButton
*/
function Page1_TextButton1_OnPressed(e){
pick(
myCars,
selectedIndex,
function(e) {Pages.NewPage.Label1.text = myCars[e.index]; selectedIndex = e.index; },
function() {},
function() {}
);
}
Related
I'm finding that in MS Edge when I use the debugger; statement or a breakpoint, the scope of this is always the global scope (e.g. the Window object) regardless of what the scope of this is where the code is actually breaking.
For example, the following code is inside a constructor (thus this is not the global object!):
this.myString = "hello";
// returns the current function scope [object Object]
console.log(this);
// returns "hello"
console.log(this.myString);
var fakeThis = this;
/* In this breakpoint, typing:
* `this` returns [object Window]
* `this.myString` returns undefined
* `fakeThis` returns the correct function scope
* `fakeThis.myString` returns "hello".
*/
debugger;
Is this a known bug with the MS Edge console or is there something specific that might be causing this?
Can't reproduce the problem on my side (using Microsoft Edge 44.18362.1.0), it seems that everything works well on my side, the screenshot like this, and the sample code as below:
<p id="demo"></p>
<script>
// Constructor function for Person objects
function Person(first, last, age, eye) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eye;
this.myString = "hello";
// returns the current function scope [object Object]
console.log(this);
// returns "hello"
console.log(this.myString);
var fakeThis = this;
/* In this breakpoint, typing:
* `this` returns [object Window]
* `this.myString` returns undefined
* `fakeThis` returns the correct function scope
* `fakeThis.myString` returns "hello".
*/
console.log(this);
console.log(this.myString);
console.log(fakeThis);
console.log(fakeThis.myString);
debugger;
}
// Create a Person object
var myFather = new Person("John", "Doe", 50, "blue");
// Display age
document.getElementById("demo").innerHTML = "My father is " + myFather.age + ".";
</script>
please try to clear the cache and history, then re-test your code. Also, you could create a new page to test above code, check whether they are working on your side.
I'm trying to include Inspect element right click into my electron app, I found a previous post about this but this is 4 years old and I don't know where to include this. I already managed to get devtools to open automatically but now I want to add right click inspect element. My question is.
How and where do I add inspect element as right click to work globally throughout my app and how do I make dev-tools open with a shortcut. currently I automatically open Devtools in the main.js script but when I click it away I got no way of bringing it back. Thanks for the help in advance.
Add the following code to your window's renderer process code.
Note that you may have to adapt the first two lines, depending on which API elements are already defined...
const { remote, webFrame } = require ('electron');
const { getCurrentWebContents, Menu, MenuItem } = remote;
//
let rightClickPosition;
//
const contextMenu = new Menu ();
const menuItem = new MenuItem
(
{
label: 'Inspect Element',
click: () =>
{
let factor = webFrame.getZoomFactor ();
let x = Math.round (rightClickPosition.x * factor);
let y = Math.round (rightClickPosition.y * factor);
getCurrentWebContents ().inspectElement (x, y);
}
}
);
contextMenu.append (menuItem);
//
window.addEventListener
(
'contextmenu',
(event) =>
{
event.preventDefault ();
rightClickPosition = { x: event.x, y: event.y };
contextMenu.popup ();
},
false
);
References:
webFrame.getZoomFactor()
contents.inspectElement(x, y)
menu.popup(options)
As for how to have devTools open with a shortcut, this would automatically happen if your menu bar contains a submenu with a menu item whose role is toggledevtools. For instance, in your main process code, adding this to your menu template would provide a Toggle Developer Tools menu item with standard keyboard shortcut:
{
label: "Developer",
submenu:
[
{ role: 'reload' },
{ role: 'toggledevtools' }
]
}
Reference: Menu Item Roles
UPDATE:
It appears there is a more powerful and flexible way of handling a contextual menu at the webContents level, by listening to a 'context-menu' event, documented since Electron 1.0.2.
One important feature is that the zoom factor doesn't need to be taken into account any more, the x and y coordinates returned in params are just always right.
Reference: webContents Event: 'context-menu'
Here is some alternative renderer process code using this method:
const { getCurrentWebContents, Menu, MenuItem } = require ('electron').remote;
//
let webContents = getCurrentWebContents ();
//
let rightClickPosition;
//
const contextMenu = new Menu ();
const menuItem = new MenuItem
(
{
label: 'Inspect Element',
click: () =>
{
webContents.inspectElement (rightClickPosition.x, rightClickPosition.y);
}
}
);
contextMenu.append (menuItem);
//
webContents.on
(
'context-menu',
(event, params) =>
{
rightClickPosition = { x: params.x, y: params.y };
contextMenu.popup ();
}
);
Could some genius help on this issue to sort it out!!! It will be much appreciated
Actually I have flash music player loaded by means of config file named config.xml
Flash player Action script example
**myUltimateMp3Player.loadConfig("config.xml");**
import flash.external.ExternalInterface;
stop();
// ExternalInterface receive
if (ExternalInterface.available) {
ExternalInterface.addCallback("sendTextFromHtml", null, function(val:String):Void {
myUltimateMp3Player.loadConfig(val); });
}
I'm tried to embed the flash dynamically using Swf object,so when a click event handled from a list from html, the corresponding config.xml should be loaded on the flash player.
Sample HTML code:
$( document ).on( "click", "#Musiclist li", function() {
var c = "youtube-playlist";
$("#media-" + c).remove();
createMedia(c);
var id=this.id;
var idxml=id+".xml";
var swfPanel="media-" + c;
var flashvars = {};
var params = {};
params.swliveconnect = "true";
params.allowfullscreen = "true";
params.allowscriptaccess = "always";
var attributes = {};
attributes.id = "flashobj";
attributes.name = "flashobj";
swfobject.embedSWF("source.swf", "flashcontent", "100%", "100%", "9.0.0", "swf/expressInstall.swf", flashvars, params, attributes,callbackFn);
});
callback function
//This function is invoked by SWFObject once the <object> has been created
var callbackFn = function (e){
//Only execute if SWFObject embed was successful
if(!e.success || !e.ref){ return false; }
swfLoadEvent(function(){
var obj=e.ref;
obj.sendTextFromHtml("config.xml");
alert("The SWF has finished loading!");
});
};
Function to hold timer for SWF's PercentLoaded value and waits until it hits "100"
function swfLoadEvent(fn){
//Ensure fn is a valid function
if(typeof fn !== "function"){ return false; }
//This timeout ensures we don't try to access PercentLoaded too soon
var initialTimeout = setTimeout(function (){
//Ensure Flash Player's PercentLoaded method is available and returns a value
if(typeof e.ref.PercentLoaded !== "undefined" && e.ref.PercentLoaded()){
//Set up a timer to periodically check value of PercentLoaded
var loadCheckInterval = setInterval(function (){
//Once value == 100 (fully loaded) we can do whatever we want
if(e.ref.PercentLoaded() === 100){
//Execute function
fn();
//Clear timer
clearInterval(loadCheckInterval);
}
}, 1500);
}
}, 200);}
So I cant figure it out what I'm doing wrong,
The error getting was,
Uncaught ReferenceError: e is not defined
If I'm not using the swfLoadEvent Timer,
The error getting was,
Uncaught TypeError: Object # has no method 'sendTextFromHtml'
e is not a global variable. try modifying your swfLoadEvent function to pass a reference to the swf as an argument:
function swfLoadEvent(swf, fn){
swf.sendTextFromHtml("config.xml");
...
}
which then gets invoked as
swfLoadEvent(e.ref, function(){
...
});
As per answer of the question Ember.js draggable and droppable jqueryUI / native Drag and drop mixin.
I have implemented JQUERY UI drag, drop, resize mixins in EmberJS. But my problem is i want the same view to do drag and resize. I tried to implement in different ways. You can check in this jsfiddle http://jsfiddle.net/codejack/TGwxf/1/ The view gets UI behaviour of last called mixin only.
Is there any way to get more than 1 behaviour in drag,drop,resize for same view?
EDIT I found out the reason is the 2nd mixin overrides the uievents,uiOptions,uiType variables. But still dont know how to avoid that... only way i can see is writing own Widgets with own events...any way to solve that?
Though the #user1128571 gave a solution which partly solves the problem, here is how i corrected the issue. I added different mixins for Interactions as that will solve the problem.
https://github.com/thecodejack/jquery-ui-ember/blob/master/js/app.js#L104
check the github pages of the module to know how exactly it works
You might want the JQ.Widget to look like this, warning it's not pretty:
Here, JQ.UiBase is the same thing as JQ.Widget
JQ.UiBase = Ember.Mixin.create({
uiWidgets: {},
uiAttributes: {},
// ----------------------------------------------------------------------------
// setup and teardown
didInsertElement: function(){
this._super();
this._createUiWidgets();
},
willDestroyElement: function(){
this._super();
// implement tear down
},
// ----------------------------------------------------------------------------
// #Private
// #Function: for each $.ui specified in the view, create a $.ui widget
// add ui widgets to uiWidgets hash, ui widget setting to uiAttributes hash
_createUiWidgets: function(){
var widgetTypes = this._gatherWidgetTypes();
uiWidgets = this.get('uiWidgets'),
uiAttributes = this.get('uiAttributes'),
thisView = this;
widgetTypes.forEach( function( widget ){
var options = thisView.get( widget + 'Options' ) || {},
handlers = thisView._registerEventHandlers( widget ),
attributes = $.extend( options, handlers ),
uiWidget = $.ui[widget]( attributes, thisView.$() );
uiWidgets[widget] = uiWidget;
uiAttributes[widget] = attributes;
});
},
// #Function: collects named $.ui events from Widget mixin
// for each event, if there is an associated callback, wrap it in a function and call the view's context
// #Return: a hash map $.ui event to callback function defined in view
_registerEventHandlers: function( widget_name ){
var widgetName = widget_name + 'Events',
events = this.get( widgetName ) || [],
thisView = this,
eventHandlers = {};
if ( events.length === 0 ) return;
// note the iterator is not scoped to the view
events.forEach( function( event ){
var callBack = thisView.get( event );
if ( callBack ){
eventHandlers[ event ] = function ( event, ui ){ callBack.call( thisView, event, ui ); };
};
});
return eventHandlers;
},
// TODO --> find alternate implementation that does not break if structure of ui mixins or namespace change
_gatherWidgetTypes: function() {
var nameSpace = 'JQ',
widgetTypes = [];
Ember.Mixin.mixins(this).forEach( function( mixin ){
// find widget with correct namespace
if ( mixin.toString().substring(0,2) === nameSpace ){
// console.log( 'gather: ', mixin, ' --> ', mixin.mixins[1] )
// access widget mixin and check widget mixin have properties
if ( mixin.mixins && mixin.mixins[1] && mixin.mixins[1].properties ){
if ( mixin.mixins[1].properties.widgetType ) widgetTypes.push( mixin.mixins[1].properties.widgetType)
}
}
});
return widgetTypes;
},
});
And then your resizable mixin would look like this:
JQ.Resizable = Ember.Mixin.create( JQ.UiBase, {
widgetType: 'resizable',
resizableOptions: { 'aspectRatio': 1/1 },
resizableEvents: [ 'resize' ],
resize: function( event, ui ){
// do stuff
},
});
The most important function here is the _gatherWidgetTypes, which gathers all JQ-namespaced mixins in the ember object. In my opinion, it's bit of a hack and I ended up not using the JQ.UiBase after making it, favoring to mix logic to create the widget and specifying the event handlers and options into one mixin, which ended up looking cleaner, but that's just me.
I want to make "jQuery UI TAB" blink (like notification).
I have diffrent tabs (Inbox | Sent | Important). My timer function checks if there is a new message in inbox, if so, I want the Inbox tab to start blinking/ flashing unless its clicked open.
Have tried diffrent options like .effect(..), .tabs(fx: {..}) but nothing seems to work :(
Any idea if its possible or not?
Yes it's definitely possible.
To give me some practice, I've written a jQuery blinker plugin for you:
jQuery:
(function($){
// **********************************
// ***** Start: Private Members *****
var pluginName = 'blinker';
var blinkMain = function(data){
var that = this;
this.css(data.settings.css_1);
clearTimeout(data.timeout);
data.timeout = setTimeout(function(){
that.css(data.settings.css_0);
}, data.settings.cycle * data.settings.ratio);
};
// ***** Fin: Private Members *****
// ********************************
// *********************************
// ***** Start: Public Methods *****
var methods = {
init : function(options) {
//"this" is a jquery object on which this plugin has been invoked.
return this.each(function(index){
var $this = $(this);
var data = $this.data(pluginName);
// If the plugin hasn't been initialized yet
if (!data){
var settings = {
css_0: {
color: $this.css('color'),
backgroundColor: $this.css('backgroundColor')
},
css_1: {
color: '#000',
backgroundColor: '#F90'
},
cycle: 2000,
ratio: 0.5
};
if(options) { $.extend(true, settings, options); }
$this.data(pluginName, {
target : $this,
settings: settings,
interval: null,
timeout: null,
blinking: false
});
}
});
},
start: function(){
return this.each(function(index){
var $this = $(this);
var data = $this.data(pluginName);
if(!data.blinking){
blinkMain.call($this, data);
data.interval = setInterval(function(){
blinkMain.call($this, data);
}, data.settings.cycle);
data.blinking = true;
}
});
},
stop: function(){
return this.each(function(index){
var $this = $(this);
var data = $this.data(pluginName);
clearInterval(data.interval);
clearTimeout(data.timeout);
data.blinking = false;
this.style = '';
});
}
};
// ***** Fin: Public Methods *****
// *******************************
// *****************************
// ***** Start: Supervisor *****
$.fn[pluginName] = function( method ) {
if ( methods[method] ) {
return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 ));
} else if ( typeof method === 'object' || !method ) {
return methods.init.apply( this, arguments );
} else {
$.error( 'Method ' + method + ' does not exist in jQuery.' + pluginName );
}
};
// ***** Fin: Supervisor *****
// ***************************
})( jQuery );
See it in action here
The plugin and the fiddle are pretty raw in that I haven't tried to integrate with jQuery-ui-tabs. This may be easy or hard, I don't know, but providing each tab is addressable by class or id then it shouldn't be too difficult.
Something you may need to consider is stopping a blinking tab when it is clicked. For this you may wish to call the .blinker('stop') method directly (with a .on('click') handler) or from an appropriate jQuery-ui-tabs callback.
API
The plugin is properly written in jQuery's preferred pattern. It puts just one member in the jQuery.fn namespace and .blinker(...) will chain like standard jQuery methods.
Methods :
.blinker('init' [,options]) : Initialises selected element(s) with blinker behaviour. Called automatically with .blinker(options), or just .blinker() in its simplest form.
.blinker('start') : causes selected element(s) to start blinking between two styles as determined by plugin defaults and/or options.
.blinker('stop') : causes selected element(s) to stop blinking and return to their natural CSS style(s).
Options : a map of properties, which determine blinker styles and timing:
css_0 : (optional) a map of css properties representing the blink OFF-state.
css_1 : a map of CSS properties representing the blink ON-state.
cycle : the blink cycle time in milliseconds (default 2000).
ratio : ON time as a proportion of cycle time (default 0.5).
By omitting css_0 from the options map, the OFF state is determined by the element(s)' natural CSS styling defined elsewhere (typically in a stylesheet).
Default values are hard-coded for css_1.color, css_1.backgroundColor, cycle time and ratio. Changing the default settings programmatically is not handled, so for different default styling the plugin will need to be edited.
jQuery comes by default with a slew of effects to pick from. You can easily use them wherever you see the need for them and they can be applied like so:
$('#newmsg').effect("pulsate", {}, 1000);
Demo
yes... this is what you need...!!!
this is javascript
if(newmessage==true){
$('#chat-86de45de47-tab').effect("pulsate", {}, 1000);
}
i think it's