I have a timer control on my page and an image handler which is set on every timer refresh. After about two minutes of running my page the page crashes on chrome with the "Aw Snap message". Can anybody help me out ??
JS Code.
var t
function set_coordinates_up(event) {
//Get final co-ordinates
var pos_x = event.offsetX ? (event.offsetX) : event.pageX - document.getElementById("divCar").offsetLeft;
var pos_y = event.offsetY ? (event.offsetY) : event.pageY - document.getElementById("divCar").offsetTop;
var hdf = document.getElementById('HiddenField1')
//Store event information in hidden feild
if (hdf != null) hdf.value = t + " " + pos_x + " " + pos_y;
}
function set_coordinates_down(event) {
//Get initial co-ordinates
var pos_x = event.offsetX ? (event.offsetX) : event.pageX - document.getElementById("divCar").offsetLeft;
var pos_y = event.offsetY ? (event.offsetY) : event.pageY - document.getElementById("divCar").offsetTop;
t = pos_x + " " + pos_y
}
check if your tab is leaking memory for some reason by opening up Chromes Task manager... probable reasons would be an infinite loop somewhere.
Chrome pages usually crash (Snap!) when there is low memory on the system. I would worry about that too.. Make sure you dont have many other processes running either.
Keep us updated.
Related
We have run our Robot Framework environment nearly one year without any problems, but now we get the error message:
TimeoutException: Message: Timed out waiting for page load.
Stacktrace:
at Utils.initWebLoadingListener/< (file:///tmp/tmp77bOby/webdriver-py-profilecopy/extensions/fxdriver#googlecode.com/components/driver-component.js:9089)
at WebLoadingListener/e (file:///tmp/tmp77bOby/webdriver-py-profilecopy/extensions/fxdriver#googlecode.com/components/driver-component.js:5145)
at WebLoadingListener/< (file:///tmp/tmp77bOby/webdriver-py-profilecopy/extensions/fxdriver#googlecode.com/components/driver-component.js:5153)
at fxdriver.Timer.prototype.setTimeout/<.notify (file:///tmp/tmp77bOby/webdriver-py-profilecopy/extensions/fxdriver#googlecode.com/components/driver-component.js:625)
What could be problem? I checked the disk space and there are disk space left.
A timeout error can have a laundry list of possible issues. Loading a page after a year of smooth operation narrows it down a little, but there are still many possibilities. Connection speeds sometimes change, sometimes the page you're loading up has added features that cause it to take longer to load or was just written poorly so it loads slowly... you get the idea. Without the code of the page or your code to look at, I can only suggest two fixes.
First, in the code of Selenium2Library, there is a timeout variable somewhere that can be set with Set Selenium Timeout. The default is 5 seconds, but if your page is taking longer to load, then increasing it might solve your problem. This assumes that your page loads at a reasonable rate in manual testing and that opening it is the least of your concerns.
Second, it's possible that you're testing an AngularJS application, not a normal website. If that's true, then you're going to want to use ExtendedSelenium2Library, not Selenium2Library. ExtendedSelenium2Library is better-equipped to deal with AngularJS applications and includes code to wait for Angular applications to load.
The old webdriver.xpi is buggy about page load handling. Timers are not correctly canceled, resulting in random windows switches and memory leaks. I copy here some replacement code that may be useful to anybody.
var WebLoadingListener = function(a, b, c, d) {
if ("none" == Utils.getPageLoadStrategy()) {
b(!1, !0);
} else {
this.logger = fxdriver.logging.getLogger("fxdriver.WebLoadingListener");
this.loadingListenerTimer = new fxdriver.Timer;
this.browser = a;
var self = this;
var e = function(a, c) {
self.destroy ();
b(a, c);
};
this.handler = buildHandler(a, e, d);
a.addProgressListener(this.handler);
-1 == c && (c = 18E5);
this.loadingListenerTimer.setTimeout(function() {
e(!0);
}, c);
WebLoadingListener.listeners [this.handler] = this;
goog.log.warning(this.logger, "WebLoadingListener created [" + Object.keys (WebLoadingListener.listeners).length + "] " + d.document.location);
}
};
WebLoadingListener.listeners = {};
WebLoadingListener.removeListener = function(a, b) {
if (b.constructor !== WebLoadingListener) {
b = WebLoadingListener.listeners [b];
}
b.destroy ();
};
WebLoadingListener.prototype.destroy = function() {
if (this.browser) {
this.loadingListenerTimer.cancel();
this.browser.removeProgressListener && this.handler && this.browser.removeProgressListener(this.handler);
delete WebLoadingListener.listeners [this.handler]
this.loadingListenerTimer = undefined;
this.browser = undefined;
goog.log.warning(this.logger, "WebLoadingListener destroyed [" + Object.keys (WebLoadingListener.listeners).length + "]");
}
};
enter code here
I am working on a website offering a personal list of peaks for mountain lovers.
I am stuck on the function (pathRequest) of a Google map polyline since ages.
I cannot understand as this code is a copy from a lot of sources and a shame Firefox debug is not acting well with the Google map... getting things worst.
Here's the page :
http://www.mes-sommets.fr/ajouter-un-sommet/
To test, you need to enter "adresse départ" (start)and"adresse arrivée" (end) + "manuel"mode in option"itinéraire"`.
Bug is showing when clicking on "adresse arrivée" in autocomplete.
For the two options :
- automatique (google map direction service) -- OK
- manuel (polyline) -- KO
Then I am calling the same functions :
- distance calculation getDistance(path)
- elevation calculation plotElevation(results, status)
Mode automatique (google map direction service) :
var path = result.routes[0].overview_path;
getDistance(path);
Mode manuel (polyline) :
var polyline_path = polyline.getPath();
getDistance(polyline_path);
Function getDistance :
function getDistance(path) {
var m = google.maps.geometry.spherical.computeLength(path);
var km = m / 1000;
document.getElementById("ninja_forms_field_34").value = km.toFixed(2) + " km";
var pathRequest = {
'path': path,
'samples': 256 }
elevator.getElevationAlongPath(pathRequest, plotElevation);
};
Function plotElevation :
function plotElevation(results, status) { if (status ==
google.maps.ElevationStatus.OK) {
var deniv_positif = 0;
var deniv_negatif = 0;
var elev = results[0].elevation;
for (var i = 0; i < results.length; i++) {
if ( (results[i].elevation - elev) > 0 ) {
deniv_positif = deniv_positif + (results[i].elevation - elev);
}
else {
deniv_negatif = deniv_negatif + (results[i].elevation - elev);
}
elev = results[i].elevation;
}
document.getElementById("ninja_forms_field_31").value = "+" + deniv_positif.toFixed(0) + " / " + deniv_negatif.toFixed(0) + " m" ;
} }
Any advice would be great, if I did not put enough code, please tell me. Hope it is OK.
Best regards,
Benjamin
The only thing I can see is this.
The DirectionsRoute overview_path is "an array of LatLngs"
The ElevationService getElevationAlongPath function expects the PathElevationRequest to have an Array for its path.
All good so far...
However, the Polyline getPath function returns an MVCArray, not just an Array.
Usually they seem pretty interchangeable to me, but this might be one place where they're not.
You could try calling the getArray function on the MVCArray to convert it into an Array and see if that makes any difference.
var polyline_path = polyline.getPath();
getDistance(polyline_path.getArray());
I'm using the fullcalendar resourceviews fork version 1.6.1.6...
I used an older version which had the resources on the top and the times on the left axis.
But now it is different. The times are on the top and the resources are on the left axis. It's not that good anymore. Is there a way to change it?
I need the newer version of it because of the refetchResources function.
I modified the resource object (using Ike Lin fullCalendar) and added an array which includes the number of the day, start time and end time like 0 -> 09:00 -> 12:00, 1 10:00 -> 15:30 ...
Then I changed the fullcalendar.js
function updateCells() {
var i;
var headCell;
var bodyCell;
var date;
var d;
var maxd;
var today = clearTime(new Date());
for (i=0; i<colCnt; i++) {
date = resourceDate(i);
headCell = dayHeadCells.eq(i);
if(resources[i].anwesenheit[date.getDay()-1] != null){
var von = resources[i].anwesenheit[date.getDay()-1].von;
var _von = von.substring(0, 5);
var bis = resources[i].anwesenheit[date.getDay()-1].bis;
var _bis = bis.substring(0, 5);
headCell.html(resources[i].name + "<p style='font-weight: normal; font-size: 11px;'>" + _von + " - " + _bis + " Uhr</p>");
} else {
headCell.html(resources[i].name);
}
headCell.attr("id", resources[i].id);
bodyCell = dayBodyCells.eq(i);
if (+date == +today) {
bodyCell.addClass(tm + '-state-highlight fc-today');
}else{
bodyCell.removeClass(tm + '-state-highlight fc-today');
}
setDayID(headCell.add(bodyCell), date);
}
}
This shows the work time from each resource right unter the name of the resource.
Also I added a serverside function to the select function which checks if the resource is available. If yes, then the event will be created, else the event won't be created and I get an error message.
Now I can work with it. It's not exactly what I wanted, but it's nice to use now. It updates the times under the resource name on every day change so I have an overview when a resource is available and when it's not available.
I am currently working on a graphic design program for the iPad and have ran into a little problem using the textField with touch events.
I have to use the textField object to display text on the screen since it is the ONLY text object which I can disable anti-aliasing. (If you know of a way to do it with Spark, it would seriously change my life.)
The scope of my problem is the following:
I have a spark group which contains all the objects the end user adds to the screen (text, images).
Images added are spark:Image
Text added is flash.text.textField
I wrap the textField in a UIComponent then containingGroup.addElement(UIComponent)
Everything works really well until I get to movement.
I am using a view to hold the objects.
I created a spark label called touchPlatform, to which I have added my Begin, Move, End, and Touch_Out events to. I did this so I would not have to add an event listener to each object I add to the screen (performance hit). Below is the basic MXML setup:
<View>
<ContainerGroup/>
<TouchPlatform/>
</View>
Whenever I do something to the TouchPlatform, I mirror those changes to the selected object (Users have a list of objects which are on the screen they can select).
Down to the problem:
It seems the textFields are not reacting to the touch events correctly (not surprising since they are older components). When I drag my finger on the screen, everything works file until I hit a textField. When I enter or exit a text field, it throws a touch_out event.
Reasons why this should not happen:
I am touching the touchPlatform (its higher, it takes up the entire
screen)
Handlers are only on the touchPlatform, not on the textFields themselves
The fired event never tells me the e.target or e.currentTarget is anything other than the touchPlatform. I am doing specific tests asking for the exact object or if the object "is" a textField/label/image/other.
That is my major point of concern. If I could receive a touch_out event where I would receive a textField object as my target, I could simply ignore it. In this case, the return is as valid as possible; it says the event was triggered by the touchPlatform.
I have set the textField.selectable = false.
I have been noticing a problem which I think is a clue to this issue. When a GUI component is added to the screen (lets say a Spark:TextInput), unless I set the skinClass to a mobile version, it will still be selectable and editable even if it has been set enabled=false, its container has been disabled, groups and labels have overlayed it, etc. If you can see it, you can interact with it. The moment I set it to a mobile skin, everything starts working. I'm wondering if this flash component is disrupting the touch event in a similar way.
If anyone knows a solutions to this situation I would greatly appreciate it.
If someone has another simple solution to accomplishing this task, please let me know as well. I need to have this done on Monday, which is in 2.5 days.
Thank you in advance for the help
CODE:
Where Touch Platform gets created and how it is over Workbench Container (the thing that holds all the objects on the screen):
<s:Group height="600" width="100%" creationComplete="touchPlatform_creationCompleteHandler(event)">
<Components:WorkbenchContainer id="wrkBenchContainer">
</Components:WorkbenchContainer>
<s:VGroup>
<s:HGroup id="grpLoading" visible="{properties.loading}">
<s:BusyIndicator id="bsyLoading" symbolColor="#FFFFFF"/>
<s:Label id="lblLoading" text="Loading..." color="#FFFFFF"/>
</s:HGroup>
</s:VGroup>
<s:Label id="touchPlatform" width="100%" height="100%" creationComplete="touchPlatform_creationCompleteHandler(event)"/>
</s:Group>
EVENT HANDLER RESULT FOR TOUCH_OUT ATTACHED TO touchPlatform
public function handleTouchEnd(e:TouchEvent):void{
if(m_layersPanel.lstLayers.selectedIndex == -1)
return;
/*
var stopTouch:Boolean = false;
var reason:String = "";
if(e.stageX > (m_workbenchContainer.width + m_workbenchContainer.x) || e.stageX < 0 || e.stageY < 0 || e.stageY > (m_workbenchContainer.height + m_workbenchContainer.y)){
reason+= "OUT OF BOUNDS X:" + e.stageX + " Y:" + e.stageY + " WX:" + m_workbenchContainer.x + " WY:" + m_workbenchContainer.y + " MaxX:" + m_workbenchContainer.x + m_workbenchContainer.width + " MaxY:" + m_workbenchContainer.y + m_workbenchContainer.height;
stopTouch = true;
}
for(var z:int = 0; z < m_workbench.grpLayers.numElements; z++){
if(e.target == m_workbench.grpLayers.getElementAt(z)){
stopTouch = true;
reason += "TOUCHING OBJECT: " + e.target.toString();
}
}
*/
properties.bounds = "BOUNDS: ID: " + e.touchPointID + " X:" + e.stageX + " Y:" + e.stageY + " WX:" + m_workbenchContainer.x + " WY:" + m_workbenchContainer.y + " MaxX:" + m_workbenchContainer.x + m_workbenchContainer.width + " MaxY:" + m_workbenchContainer.y + m_workbenchContainer.height;
var stopTouch:Boolean = false;
if(e.currentTarget is Label){
reason += "Touched Label";
stopTouch = true;
}else if(e.currentTarget is TextField){
reason += "Touched TextField";
}else{
reason += "Unknown: " + e.currentTarget.toString();
}
if(!(e.currentTarget is Label))
{
properties.status = "TRIP OBJECT: " + e.touchPointID + "- " + reason;
//e.preventDefault();
//e.stopImmediatePropagation();
return;
}else if(e.stageX > (.95 * (m_workbenchContainer.width + m_workbenchContainer.x)) || e.stageX < 10 || e.stageY < 10 || e.stageY > (.95 * (m_workbenchContainer.height + m_workbenchContainer.y))){
properties.status = "OUTSIDE BOUNDS" + reason + e.currentTarget.toString();
}else{
properties.status = "VALID? " + reason + e.currentTarget.toString();
}
/* if(e.target is DoodleText || e.target is DoodleImage)
properties.status = "TOUCHED IMAGE OR TEXT";
else if(e.target is UIComponent){
properties.status = "Touched UI Component";
}else
properties.status = "Out Of Bounds";
else
properties.status = "END TOUCH";
*/
//Primary finger removed
if(primTouchID == e.touchPointID){
primTouchID = -1;
secTouchID = -1;
properties.primaryStatus = "RESET";
properties.secondaryStatus = "RESET";
var obj:DoodleInterface = DoodleInterface(m_layersPanel.lstLayers.selectedItem);
m_undoHandler.addUndo(m_layersPanel.lstLayers.selectedItem,"TRANSFORM",(originalX + "," + originalY + "," + originalWidth + "," + originalHeight), (obj.getActualX() + "," + obj.getActualY() + "," + obj.getActualWidth() + "," + obj.getActualHeight()));
}
//Secondary finger removed
if(secTouchID == e.touchPointID){
secTouchID = -1;
properties.secondaryStatus = "RESET";
}
//Stop Stretching if both primary and secondary fingers have been removed
if(primTouchID == -1 && secTouchID == -1){
stretching = false;
//Ensure Object is Snapped to Grid
var endobj:DoodleInterface = DoodleInterface(m_layersPanel.lstLayers.selectedItem)
endobj.setX(int(endobj.getActualX()));
endobj.setY(int(endobj.getActualY()));
endobj.setWidth(int(endobj.getActualWidth()));
endobj.setHeight(int(endobj.getActualHeight()));
}
m_workbench.refreshSelection();
}
I found the solution. For anyone encountering the same issue, please note that older flash components don't exactly like to play nice with spark components.
As you can see in my above code, I was using a spark label as my touch area. The textFields within the group below the touch area were pushing through the spark label and causing the touch_out event to fire.
I have resolved this by having everyone play by the same rules. Instead of mixing a spark label and a flash textField, I have created changed the touch area from a Spark Label to a Text Field.
I create the textfield in actionscript, set its x,y,width,height, and selectable=false. Then add the textField to a UIComponent, and then add the UIComponent to the same group as before.
From what I can tell, everything is working well.
Below is my code. If anyone has any questions, please let me know.
Touch Platform Creation:
if(grpContainer.containsElement(touchPlatformContainer))
grpContainer.removeElement(touchPlatformContainer);
touchPlatform = new TextField();
touchPlatform.selectable = false;
touchPlatform.width = 1152;
touchPlatform.height = 600;
touchPlatform.x = 0;
touchPlatform.y - 0;
touchPlatformContainer = new UIComponent;
touchPlatformContainer.addChild(touchPlatform);
grpContainer.addElement(touchPlatformContainer);
Same Assignments of Touch Events as before:
touchPlatform.removeEventListener(TouchEvent.TOUCH_BEGIN, m_controlPanel.handleTouchBegin);
touchPlatform.removeEventListener(TouchEvent.TOUCH_MOVE, m_controlPanel.handleTouchMove);
touchPlatform.removeEventListener(TouchEvent.TOUCH_END, m_controlPanel.handleTouchEnd);
touchPlatform.removeEventListener(TouchEvent.TOUCH_OUT, m_controlPanel.handleTouchEnd);
touchPlatform.addEventListener(TouchEvent.TOUCH_BEGIN, m_controlPanel.handleTouchBegin);
touchPlatform.addEventListener(TouchEvent.TOUCH_MOVE, m_controlPanel.handleTouchMove);
touchPlatform.addEventListener(TouchEvent.TOUCH_END, m_controlPanel.handleTouchEnd);
touchPlatform.addEventListener(TouchEvent.TOUCH_OUT, m_controlPanel.handleTouchEnd);
I'm trying to implement this solution to "grey out" past events in Fullcalendar, but I'm not having any luck. I'm not too well versed in Javascript, though, so I assume I'm making some dumb mistakes.
I've been putting the suggested code into fullcalendar.js, inside the call for daySegHTML(segs) around line 4587.
I added the first two lines at the end of the function's initial var list (Why not, I figured)—so something like this:
...
var leftCol;
var rightCol;
var left;
var right;
var skinCss;
var hoy = new Date;// get today's date
hoy = parseInt((hoy.getTime()) / 1000); //get today date in unix
var html = '';
...
Then, just below, I added the other two lines inside the loop:
for (i=0; i<segCnt; i++) {
seg = segs[i];
event = seg.event;
classes = ['fc-event', 'fc-event-skin', 'fc-event-hori'];
if (isEventDraggable(event)) {
classes.push('fc-event-draggable');
}
unixevent = parseInt((event.end.getTime()) / 1000); //event date in Unix
if (unixevent < hoy) {classes.push('fc-past');} //add class if event is old
if (rtl) {
if (seg.isStart) {
classes.push('fc-corner-right');
}
...
Running this code results in a rendered calendar with no events displayed and an error message: Uncaught TypeError: Cannot call method 'getTime' of null
The "null" being referred to is, apparently, event.end.getTime(). But I'm not sure I understand what exactly is going wrong, or how things are being executed. As written, it seems like it should work. At this point in the code, from what I can tell, event.end contains a valid IETF timecode, but for some reason it's "not there" when I try to run it through getTime()?
This isn't a mission-critical tweak for me, but would still be nice—and I'd like to understand what's going on and what I'm doing wrong, as well! Any help greatly appreciated!
If you are using FullCalendar2 with Google Calendar, you will need to use the version of the code below. This uses Moment.js to do some conversions, but since FC2 requires it, you'll be using it already.
eventRender: function(event, element, view) {
var ntoday = new Date().getTime();
var eventEnd = moment( event.end ).valueOf();
var eventStart = moment( event.start ).valueOf();
if (!event.end){
if (eventStart < ntoday){
element.addClass("past-event");
element.children().addClass("past-event");
}
} else {
if (eventEnd < ntoday){
element.addClass("past-event");
element.children().addClass("past-event");
}
}
}
As per FullCalendar v1.6.4
Style past events in css:
.fc-past{background-color:red;}
Style future events in css:
.fc-future{background-color:red;}
There's no need to fiddle with fullcalendar.js. Just add a callback, like:
eventRender: function(calev, elt, view) {
if (calev.end.getTime() < sometime())
elt.addClass("greyclass");
},
you just have to define the correct CSS for .greyclass.
Every event has an ID associated with it. It is a good idea to maintain your own meta information on all events based on their ids. If you are getting the events popupated from a backend database, add a field to your table. What has worked best for me is to rely on callbacks only to get the event ids and then set/reset attributes fetched from my own data store. Just to give you some perspective, I am pasting below a section of my code snippet. The key is to target the EventDAO class for all your needs.
public class EventDAO
{
//change the connection string as per your database connection.
//private static string connectionString = "Data Source=ASHIT\\SQLEXPRESS;Initial Catalog=amit;Integrated Security=True";
//this method retrieves all events within range start-end
public static List<CalendarEvent> getEvents(DateTime start, DateTime end, long nParlorID)
{
List<CalendarEvent> events = new List<CalendarEvent>();
// your data access class instance
clsAppointments objAppts = new clsAppointments();
DataTable dt = objAppts.SelectAll( start, end);
for(int i=0; i<dt.Rows.Count; ++i)
{
CalendarEvent cevent = new CalendarEvent();
cevent.id = (int)Convert.ToInt64(dt.Rows[i]["ID"]);
.....
Int32 apptDuration = objAppts.GetDuration(); // minutes
string staffName = objAppts.GetStaffName();
string eventDesc = objAppts.GetServiceName();
cevent.title = eventDesc + ":" + staffName;
cevent.description = "Staff name: " + staffName + ", Description: " + eventDesc;
cevent.start = (DateTime)dt.Rows[i]["AppointmentDate"];
cevent.end = (DateTime) cevent.start.AddMinutes(apptDuration);
// set appropriate classNames based on whatever parameters you have.
if (cevent.start < DateTime.Now)
{
cevent.className = "pastEventsClass";
}
.....
events.Add(cevent);
}
}
}
The high level steps are as follows:
Add a property to your cevent class. Call it className or anything else you desire.
Fill it out in EventDAO class while getting all events. Use database or any other local store you maintain to get the meta information.
In your jsonresponse.ashx, retrieve the className and add it to the event returned.
Example snippet from jsonresponse.ashx:
return "{" +
"id: '" + cevent.id + "'," +
"title: '" + HttpContext.Current.Server.HtmlEncode(cevent.title) + "'," +
"start: " + ConvertToTimestamp(cevent.start).ToString() + "," +
"end: " + ConvertToTimestamp(cevent.end).ToString() + "," +
"allDay:" + allDay + "," +
"className: '" + cevent.className + "'," +
"description: '" +
HttpContext.Current.Server.HtmlEncode(cevent.description) + "'" + "},";
Adapted from #MaxD The below code is what i used for colouring past events grey.
JS for fullcalendar pulling in Json
events: '/json-feed.php',
eventRender: function(event,element,view) {
if (event.end < new Date().getTime())
element.addClass("past-event");
},
other options ....
'event.end' in my Json is a full date time '2017-10-10 10:00:00'
CSS
.past-event.fc-event, .past-event .fc-event-dot {
background: #a7a7a7;
border-color: #848484
}
eventDataTransform = (eventData) => {
let newDate = new Date();
if(new Date(newDate.setHours(0, 0, 0, 0)).getTime() > eventData.start.getTime()){
eventData.color = "grey";
}else{
eventData.color = "blue";
}
return eventData;
}
//color will change background color of event
//textColor to change the text color
Adapted from #Jeff original answer just simply check to see if an end date exists, if it does use it otherwise use the start date. There is an allDay key (true/false) but non allDay events can still be created without an end date so it will still throw an null error. Below code has worked for me.
eventRender: function(calev, elt, view) {
var ntoday = new Date().getTime();
if (!calev.end){
if (calev.start.getTime() < ntoday){
elt.addClass("past");
elt.children().addClass("past");
}
} else {
if (calev.end.getTime() < ntoday){
elt.addClass("past");
elt.children().addClass("past");
}
}
}
Ok, so here's what I've got now, that's working (kind of):
eventRender: function(calev, elt, view) {
var ntoday = new Date();
if (calev.start.getTime() < ntoday.getTime()){
elt.addClass("past");
elt.children().addClass("past");
}
}
In my stylesheet, I found I needed to restyle the outer and inner elements to change the color; thus the elt.children().addclass addition.
The only time check I could get to work, lacking an end time for all day events, was to look at the start time - but this is going to cause problems with multi-day events, obviously.
Is there another possible solution?