I'm trying to open a website on a button click from my app. Its just a simple help button that should open the site's help page. Nothing too fancy. But I'm having a lot of trouble getting it to load.
Here is my code relating to this:
var helpButton = $.help;
var webview = Titanium.UI.createWebView(URL_HELP);
helpButton.addEventListener('click', function() {
try {
var helpWin = Titanium.UI.createWindow();
helpWin.add(webview);
helpWin.open({modal:true});
} catch (e) {
Ti.API.error("Error: " + e);
}
});
The error is never getting caught as well. On the button click, it loads a new window, but is left loading perpetually. I'm not sure what the problem is, or where to go from here.
Please help, and let me know if you have any other questions or ideas.
first of all try to create webview having it's properties set to required values.following code is working fine for me.
var webview = Titanium.UI.createWebView({
url: 'http://stackoverflow.com/tour',
top: 0,
left: 0,
width: "100%",
height: "100%"
});
you can try this with your url.
Note: instead of creating webview global to this file you can create it after create window in help button click event if you only want to show help page. so you code should look something like this. you can also use $.help.addEventListener instead of assigning it to a separate variable.
$.help.addEventListener('click', function() {
try {
var helpWin = Titanium.UI.createWindow();
var webview = Titanium.UI.createWebView({
url: URL_HELP,
top: 0,
left: 0,
width: "100%",
height: "100%"
});
helpWin.add(webview);
helpWin.open({modal:true});
} catch (e) {
Ti.API.error("Error: " + e);
}
});
Related
I dynamically created a BrowserView in the renderer process. To be more specific, when a button is clicked, the following function is invoked to create and show the BrowserView:
const showBrowserView = async () => {
const view = new remote.BrowserView();
remote.getCurrentWindow().addBrowserView(view);
view.setBounds({ x: 0, y: 0, width: 1000, height: 1000 });
view.setAutoResize({ width: true, height: true })
await view.webContents.loadURL(`https://www.google.com`);
}
My question is, is there any way to see the console output of this BrowserView?
If you want to see the dev tools of the particular browser view you could use
https://www.electronjs.org/docs/api/web-contents#contentsopendevtoolsoptions
Or if you want to get the console out put events, you could use
https://www.electronjs.org/docs/api/web-contents#event-console-message
Both these are available through the webcontent object.
I'm attempting to create a custom popup while using the angular-leaflet-directive. I'm opening the popup from the leaflet.draw on:create event. Here:
map.on('draw:created', function(e) {
layer = e.layer;
drawnItems.addLayer(layer);
var newComment = "Enter Comment";
var newID = "ID";
var newGeoJsonFeat = layer.toGeoJSON();
newGeoJsonFeat.properties = {"comment":newComment, "id":newID};
console.log(newGeoJsonFeat);
onEachFeature(newGeoJsonFeat,layer);
layer.openPopup();
});
Then I'm using #blackjid's logic as seen here: https://github.com/tombatossals/angular-leaflet-directive/issues/238 to bind the custom popup
function onEachFeature(feature, layer) {
// Create get the view template
var popupContent = '<div ng-include="\'partials/popup_newfeat.html\'"></div>';
console.log("assigning popup");
// Bind the popup
// HACK: I have added the stream in the popup options
layer.bindPopup(popupContent,{
closeButton: false,
maxHeight: 300,
feature: feature
});
};
$scope.$on('leafletDirectiveMap.popupopen', function(event, leafletEvent){
// Create the popup view when is opened
var feature = leafletEvent.leafletEvent.popup.options.feature;
var newScope = $scope.$new();
newScope.stream = feature;
$compile(leafletEvent.leafletEvent.popup._contentNode)(newScope);
});
Long story short, Everything works fine except the popup container isn't resizing properly to fit the new content. The height seems right, but the width is off.
I tried using:
.leaflet-popup-content {
width:auto !important;
}
Which will probably suffice, but this causes the popup anchor to shift to the bottom left of the popup for some reason. AutoPan is also broken when clicking near the top of the map.
Does anyone know where and how I can get popup.update() to fire? I believe thats what needs to happen, but I don't know where to implement it. I've tried calling it after layer.openPopup() like so:
onEachFeature(newGeoJsonFeat,layer);
layer.openPopup();
layer.getPopup().update();
});
But that doesn't seem to do anything. Any help is greatly appreciated!
You need to use the 'leafletEvent'. Try this:
myApp.controller('YourController', ['$scope', 'leafletEvent', function($scope) {
// after all your crazy custom popup stuff ...
leafletData.getMap().then(function(map) {
layer.getPopup().update();
});
}]);
I ended up storing the image width in the properties of the GeoJson, and then setting the minWidth to that value in the bindPopup function.
layer.bindPopup(popupContent,{
closeButton: true,
closeOnClick: false,
minWidth: feature.properties.width,
autoPanPadding: L.point(20,20),
keepInView: false,
feature: feature
});
I have created a back button to take me to the previous page. See code bellow:
var backbutton = Titanium.UI.createButton({
title:'back',
bottom: 10,
left: 10,
zIndex:2
});
win3.add(backbutton);
I add a addEventListener to backbutton. See code bellow:
backbutton.addEventListener('click',function() {
var win = Titanium.UI.createWindow({
url:'alarmgroups.js',
title:'Sensor/Larm Objekt'
});
win.open({modal:true});
win3.close();
win3.hide();
});
Know I wonder what the problem could be.
When Im using the code above It makes the Application crash.
Im using zIndex on every .js page that I have in my project, but I dont know if Its right to do so.
I use win.open({modal:true}); and after that code I run win3.close(); and win3.hide();. win3 Its my current window.
Does anyone having a solution on how to create a back button for Android?
You have two native solutions to create a back button on android, the first one is adding a back button to the action bar:
To achieve this, you have to edit the android's action bar in the window's open event.
(Note: do not use modal:true while opening the window)
var window = Ti.UI.createWindow({
title: "test",
backgroundColor: "white",
});
window.addEventListener('open', function({
window.activity.actionBar.onHomeIconItemSelected = function() { window.close(); };
window.activity.actionBar.displayHomeAsUp = true;
});
window.open();
The second way, is overriding the android's back button of the current window.
var window = Ti.UI.createWindow({
title: "test",
backgroundColor: "white",
});
window.addEventListener('androidback', function({
window.close();
});
window.open();
Try this :
var win = Ti.UI.createWindow({
title:'Hello world',
backgroundColor:'#fff',
fullscreen:false
});
win.addEventListener('androidback',function() {
// do something
});
Also,here is the link : Android Back Button in Titanium.
Thanks.
When I run the app on the device I get no error (well nothing occurs at all) as there is no debug console but when I run the app in the browser I get "Titanium is not defined"
Is there a js file I need to include?
I got the camera code from here:
http://www.mindfiresolutions.com/Capture-Image-with-device-camera-in-IPhoneAndroid-application-using-Titanium-1912.php
I call it from an html file from webview.
I created a new project from scratch and I get he same error. This is so frustrating:
in html:
<!doctype html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width;initial-scale=1.0 maximum-scale=1.0; user scalable=0;">
<title>Notes</title>
<script language="JavaScript" type="text/javascript">
function play(locid) {
Ti.App.fireEvent('play', {
locid : locid
});
}
</script>
</head>
<body>
<a id="Home" onclick ="play(125)" title = "" > hello </a>
</body>
</html>
in app.js:
Ti.App.addEventListener('play', function(e)
{
alert(e.locid);
});
Uncaught ReferenceError: Ti is not defined in the HTML file!!!
That code has a number of things preventing it from working as a standalone app.js. I want to address a couple of the concerns brought up by it, and then I'll directly address the app.js so you can get on your way.
First, "Ti.UI.currentWindow" is how you get a reference to a window in a situation like this:
In the file "app.js", you have:
var win = Ti.UI.createWindow({
url: 'win.js'
});
win.open();
And in "win.js", you have:
var win = Ti.UI.currentWindow;
win.add(Ti.UI.createLabel({
text: 'Hello, world!', textAlign: 'center',
color: '#000'
}));
But structuring your apps like that isn't the recommended approach anymore. If you're starting fresh, start right -- with Alloy. http://docs.appcelerator.com/titanium/3.0/#!/guide/Alloy_Quick_Start
If all you really care about is getting the example to work, below is the code updated to work:
//Define the current window
var myWin = Ti.UI.createWindow({
backgroundColor: 'white'
});
//Define the button to activate camera
var cameraBtn = Ti.UI.createButton({
title: 'Click to activate Camera',
top: 10 //Set the button position on the screen
});
cameraBtn.addEventListener('click', function () {
//Activate camera
Ti.Media.showCamera({
success: function (event) {
//Holds the captured image
var capturedImg = event.media;
// Condition to check the selected media
if (event.mediaType == Ti.Media.MEDIA_TYPE_PHOTO) {
//Define an image view with captured image
var imgView = Ti.UI.createImageView({
left: 10,
width: 250,
height: 250,
image: capturedImg //Set captured image
});
//Add the image to window for displaying
myWin.add(imgView);
}
},
cancel: function () {
//While cancellation of the process
},
error: function (error) {
// If any error occurs during the process
}
});
});
myWin.add(cameraBtn);
myWin.open();
use "Titanium" instead of "Ti" in WebView HTML code.
i'm using phantom js to screen shot a page
http://code.google.com/p/phantomjs/wiki/QuickStart#Rendering
it has a feature called clipRect
http://code.google.com/p/phantomjs/wiki/Interface#clipRect_(object)
can someone show me how i would modify the following code to us clipRect so i only get a partial screenshot and not the whole thing?
if (phantom.state.length === 0) {
if (phantom.args.length !== 2) {
console.log('Usage: rasterize.js URL filename');
phantom.exit();
} else {
var address = phantom.args[0];
phantom.state = 'rasterize';
phantom.viewportSize = { width: 600, height: 600 };
phantom.open(address);
}
} else {
var output = phantom.args[1];
phantom.sleep(200);
phantom.render(output);
phantom.exit();
}
If you are trying to get a screenshot of a particular element, you could get the necessary information for clipRect from getBoundingClientRect as per the bottom of this article:
page.clipRect = page.evaluate(function() {
return document.getElementById(THE_ELEMENT_YOU_WANT).getBoundingClientRect();
});
From the fine manual:
clipRect (object)
This property defines the rectangular area of the web page to be rasterized when render() is invoked. If no clipping rectangle is set, render() will process the entire web page.
Example: phantom.clipRect = { top: 14, left: 3, width: 400, height: 300 }
So try setting clipRect right before you call render:
var output = phantom.args[1];
phantom.sleep(200);
phantom.clipRect = { top: 14, left: 3, width: 400, height: 300 }
phantom.render(output);
phantom.exit();
You'd have to figure out where the upper left corner (top and left) is and how big (width and height) you want the clipping rectangle to be.
You can probably set the clipRect any time before render() is called but start with that and see what happens.
What was happening is i was using brew and it was installing v 1.0.0 where clipRect and almost every other function wasn't supported as v 1.0.0 is the oldest version.
If you follow these instructions: http://code.google.com/p/phantomjs/wiki/BuildInstructions#Mac_OS_X
then right click on the complied file and click show/view contents (on mac) then copy the executable bin/phantomjs.app/Contents/MacOS/phantomjs to some directory in your PATH.
Feel free to post on here i'm monitoring this and i can help if needed.