Design efficient forms by avoiding repeated actions, asking for only the necessary information and guide users by showing them how far along they are in multi-part forms.
Make sure your forms have no repeated actions, only as many fields as necessary, and take advantage of autofill, so that users can easily complete forms with pre-populated data.
Look for opportunities to pre-fill information you already know, or may anticipated to save the user from having to provide it. For example, pre-populate the shipping address with the last shipping address supplied by the user.
Progress bars and menus should accurately convey overall progress through multi-step forms and processes.
If you place a disproportionately complex form in an earlier step, users are more likely to abandon your site before they go through the entire process.
Users often need more context when scheduling appointments and travel dates, to make things easier and prevent them from leaving your site to check their calendar app, provide a visual calendar with clear labeling for selecting start and end dates.
Streamline information entry by using the right input type. Users appreciate websites that automatically present number pads for entering phone numbers, or automatically advance fields as they entered them. Look for opportunities to eliminate wasted taps in your forms.
datalist
element.HTML5 introduced a number of new input types. These new input types give hints to the browser about what type of keyboard layout to display for on-screen keyboards. Users are more easily able to enter the required information without having to change their keyboard and only see the appropriate keys for that input type.
The datalist
element isn’t an input type, but a list of suggested input values to associated with a form field. It lets the browser suggest autocomplete options as the user types. Unlike select elements where users must scan long lists to find the value they’re looking for, and limiting them only to those lists, datalist
element provides hints as the user types.
Favorite Type of Chocolate
<input type="text" name="fav-choc" id="frmFavChocolate" list="chocType">
<datalist id="chocType">
<option value="white">
<option value="milk">
<option value="dark">
</datalist>
Remember
datalist
values are provided as suggestions, and users are not restricted to the suggestions provided.Forms are hard to fill out on mobile. The best forms are the ones with the fewest inputs. Good forms provide semantic input types. Keys should change to match the user's input type; users pick a date in a calendar. Keep your user informed. Validation tools should tell the user what they need to do before submitting the form.
label
s on form inputs, and ensure they're visible when the field is in focus.placeholder
s to provide guidance about what you expect.name
's for elements and include the autocomplete
attribute.The label
element provides direction to the user, telling them what information is needed in a form element. Each label
is associated with an input element by placing it inside the label
element, or by using the "for
" attribute. Applying labels to form elements also helps to improve the touch target size: the user can touch either the label or the input in order to place focus on the input element.
Address
<input type="text" name="ship-address" required id="frmAddressS"
placeholder="123 Any Street" autocomplete="shipping street-address">
Try full sample
Labels and inputs should be large enough to be easy to press. In portrait viewports, field labels should be above input elements, and beside them in landscape. Ensure field labels and the corresponding input boxes are visible at the same time. Be careful with custom scroll handlers that may scroll input elements to the top of the page hiding the label, or labels placed below input elements may be covered by the virtual keyboard.
The placeholder attribute provides a hint to the user about what’s expected in the input, typically by displaying the value as light text until the the user starts typing in the element.
<input type="text" placeholder="MM-YYYY" ...>
Remember
Users appreciate when websites save them time by automatically filling common fields like names, email addresses and other frequently used fields, plus it helps to reduce potential input errors – especially on virtual keyboards and small devices.
Browsers use many heuristics to determine which fields they can auto-populate based on previously specified data by the user, and you can give hints to the browser by providing both the name attribute and the autocomplete attribute on each input element.
For example, to hint to the browser that it should auto-complete the form with the users name, email address and phone number, you should use:
Name
<input type="text" name="name" id="frmNameA"
placeholder="Full name" required autocomplete="name">
Email
<input type="email" name="email" id="frmEmailA"
<EMAIL_ADDRESS>required autocomplete="email">
Confirm Email
<input type="email" name="emailC" id="frmEmailC"
<EMAIL_ADDRESS>required autocomplete="email">
Phone
<input type="tel" name="phone" id="frmPhoneNumA"
placeholder="+1-555-555-1212" required autocomplete="tel">
Try full sample
| Content type | name attribute |
autocomplete attribute |
|---|---|---|
| Name | name fname mname lname
|
name
|
email
|
email
|
|
| Address | address city region province state zip zip2 postal country
|
street-address locality region postal-code country
|
| Phone | phone mobile country-code area-code exchange suffix ext
|
tel
|
| Credit Card | ccname cardnumber cvc ccmonth ccyear exp-date card-type
|
cc-name cc-number cc-csc cc-exp-month cc-exp-year cc-exp cc-type
|
The autocomplete
attributes should be prefixed with either shipping
or billing
, depending on the context.
Remember
On some forms, for example the Google home page where the only thing you want the user to do is fill out a particular field, you can add the autofocus
attribute. When set, desktop browsers immediately move the focus to the input field, making it easy for users to quickly begin using the form. Mobile browsers ignore the autofocus
attribute, to prevent the keyboard from randomly appearing.
Be careful using the autofocus attribute because it will steal keyboard focus and potentially preventing the backspace character from being used for navigation.
<input type="text" autofocus ...>
Real-time data validation doesn't just help to keep your data clean, but it also helps improve the user experience. Modern browsers have several built-in tools to help provide real-time data validation and may prevent the user from submitting an invalid form. Visual cues should be used to indicate whether a form has been completed properly.
pattern
, required
, min
, max
, etc.The pattern
attribute specifies a regular expression used to validate an input field. For example, to validate a US Zip code (5 digits, sometimes followed by a dash and an additional 4 digits), we would set the pattern
like this:
<input type="text" pattern="^\d{5,6}(?:[-\s]\d{4})?$" ...>
Common regular expression patterns
| Description | Regular expression |
|---|---|
| Postal address | [a-zA-Z\d\s\-\,\#\.\+]+
|
| Zip Code (US) | ^\d{5,6}(?:[-\s]\d{4})?$
|
| IP Address (IPv4) | ^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$
|
| IP Address (IPv6) | ^(([0-9a-fA-F]{1,4}:){7,7}[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,7}:|([0-9a-fA-F]{1,4}:){1,6}:[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,5}(:[0-9a-fA-F]{1,4}){1,2}|([0-9a-fA-F]{1,4}:){1,4}(:[0-9a-fA-F]{1,4}){1,3}|([0-9a-fA-F]{1,4}:){1,3}(:[0-9a-fA-F]{1,4}){1,4}|([0-9a-fA-F]{1,4}:){1,2}(:[0-9a-fA-F]{1,4}){1,5}|[0-9a-fA-F]{1,4}:((:[0-9a-fA-F]{1,4}){1,6})|:((:[0-9a-fA-F]{1,4}){1,7}|:)|fe80:(:[0-9a-fA-F]{0,4}){0,4}%[0-9a-zA-Z]{1,}|::(ffff(:0{1,4}){0,1}:){0,1}((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9]).){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])|([0-9a-fA-F]{1,4}:){1,4}:((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9]).){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9]))$
|
| IP Address (both) | ^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)|(([0-9a-fA-F]{1,4}:){7,7}[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,7}:|([0-9a-fA-F]{1,4}:){1,6}:[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,5}(:[0-9a-fA-F]{1,4}){1,2}|([0-9a-fA-F]{1,4}:){1,4}(:[0-9a-fA-F]{1,4}){1,3}|([0-9a-fA-F]{1,4}:){1,3}(:[0-9a-fA-F]{1,4}){1,4}|([0-9a-fA-F]{1,4}:){1,2}(:[0-9a-fA-F]{1,4}){1,5}|[0-9a-fA-F]{1,4}:((:[0-9a-fA-F]{1,4}){1,6})|:((:[0-9a-fA-F]{1,4}){1,7}|:)|fe80:(:[0-9a-fA-F]{0,4}){0,4}%[0-9a-zA-Z]{1,}|::(ffff(:0{1,4}){0,1}:){0,1}((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9]).){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])|([0-9a-fA-F]{1,4}:){1,4}:((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9]).){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9]))$
|
| Credit Card Number | ^(?:4[0-9]{12}(?:[0-9]{3})?|5[1-5][0-9]{14}|3[47][0-9]{13}|3(?:0[0-5]|[68][0-9])[0-9]{11}|6(?:011|5[0-9]{2})[0-9]{12}|(?:2131|1800|35\d{3})\d{11})$
|
| Social Security Number | ^\d{3}-\d{2}-\d{4}$
|
| North American Phone Number | ^(?:(?:\+?1\s*(?:[.-]\s*)?)?(?:\(\s*([2-9]1[02-9]|[2-9][02-8]1|[2-9][02-8][02-9])\s*\)|([2-9]1[02-9]|[2-9][02-8]1|[2-9][02-8][02-9]))\s*(?:[.-]\s*)?)?([2-9]1[02-9]|[2-9][02-9]1|[2-9][02-9]{2})\s*(?:[.-]\s*)?([0-9]{4})(?:\s*(?:#|x\.?|ext\.?|extension)\s*(\d+))?$
|
If the required
attribute is present, then the field must contain a value before the form can be submitted. For example, to make the zip code required, we’d simply add the required attribute:
<input type="text" required pattern="^\d{5,6}(?:[-\s]\d{4})?$" ...>
For numeric input types like number or range as well as date/time inputs, you can specify the minimum and maximum values, as well as how much they should each increment/decrement when adjusted by the slider or spinners. For example, a shoe size input would set a minumum size of 1 and a maximum size 13, with a step of 0.5
<input type="number" min="1" max="13" step="0.5" ...>
The maxlength
attribute can be used to specify the maximum length of an input or textbox and is useful when you want to limit the length of information that the user can provide. For example, if you want to limit a filename to 12 characters, you can use the following.
<input type="text" id="83filename" maxlength="12" ...>
In some cases, you may want to allow the user to submit the form even if it contains invalid input. To do this, add the novalidate
attribute to the form element, or individual input fields. In this case, all pseudo classes and JavaScript APIs will still allow you to check if the form validates.
<form role="form" novalidate>
Email address
<input type="email" ...>
</form>
Remember
When the built-in validation plus regular expressions aren’t enough, you can use the Constraint Validation API, a powerful tool for handling custom validation. The API allows you to do things like set a custom error, check whether an element is valid, and determine the reason that an element is invalid:
| API | Description |
|---|---|
setCustomValidity()
|
Sets a custom validation message and the customError property of the ValidityState object to true . |
validationMessage
|
Returns a string with the reason the input failed the validation test. |
checkValidity()
|
Returns true if the element satisfies all of its constraints, and false otherwise. |
validity
|
Returns a ValidityState object representing the validity states of the element. |
If a field fails validation, use setCustomValidity()
to mark the field invalid and explain why the field didn’t validate. For example, a sign up form might ask the user to confirm their email address by entering it twice. Use the blur event on the second input to validate the two inputs and set the appropriate response. For example:
if (input.value != primaryEmail) {
// the provided value doesn't match the primary email address
input.setCustomValidity('The two email addresses must match.');
console.log("E-mail addresses do not match", primaryEmail, input.value);
} else {
// input is valid -- reset the error message
input.setCustomValidity('');
}
Try full sample
Because not all browsers will prevent the user from submitting the form if there is invalid data, you should catch the submit event, and use the checkValidity()
on the form element to determine if the form is valid. For example:
form.addEventListener("submit", function(evt) {
if (form.checkValidity() === false) {
evt.preventDefault();
alert("Form is invalid - submission prevented!");
return false;
} else {
// To prevent data from being sent, we've prevented submission
// here, but normally this code block would not exist.
evt.preventDefault();
alert("Form is valid - submission prevented to protect privacy.");
return false;
}
});
Try full sample
It’s helpful to provide a visual indication on each field that indicates whether the user has completed the form properly before they’ve submitted the form. HTML5 also introduces a number of new pseudo-classes that can be used to style inputs based on their value or attributes.
| Pseudo-class | Use |
|---|---|
:valid
|
Explicitly sets the style for an input to be used when the value meets all of the validation requirements. |
:invalid
|
Explicitly sets the style for an input to be used when the value does not meet all of the validation requirements. |
:required
|
Explicitly sets the style for an input element that has the required attribute set. |
:optional
|
Explicitly sets the style for an input element that does not have the required attribute set. |
:in-range
|
Explicitly sets the style for a number input element where the value is in range. |
:out-of-range
|
Explicitly sets the style for a number input element where the value is out of range. |
Validation happens immediately which means that when the page is loaded, fields may be marked as invalid, even though the user hasn’t had a chance to fill them in yet. It also means that as the user types, and it’s possible they’ll see the invalid style while typing. To prevent this, you can combine the CSS with JavaScript to only show invalid styling when the user has visited the field.
input.dirty:not(:focus):invalid {
background-color: #FFD9D9;
}
input.dirty:not(:focus):valid {
background-color: #D9FFD9;
}
var inputs = document.getElementsByTagName("input");
var inputs_len = inputs.length;
var addDirtyClass = function(evt) {
sampleCompleted("Forms-order-dirty");
evt.srcElement.classList.toggle("dirty", true);
};
for (var i = 0; i < inputs_len; i++) {
var input = inputs[i];
input.addEventListener("blur", addDirtyClass);
input.addEventListener("invalid", addDirtyClass);
input.addEventListener("valid", addDirtyClass);
}
Try full sample
Important
While requestAutocomplete
was designed to help users fill out any form, today its most common use is in eCommerce where shopping cart abandonment on the mobile web can be as high as 97%. Imagine 97% of people in a supermarket, with a cart brimming full of things that they want, flipping their cart over and walking out.
requestAutocomplete
can greatly simplify the checkout process and improve the user experience.requestAutocomplete
is available, hide the checkout form and move people directly to the confirmation page.Rather than the site relying on a particular payment provider, requestAutocomplete
requests payment details (such as name, address and credit card information) from the browser, which are optionally stored by the browser much like other auto-complete fields.
The ideal experience will show the requestAutocomplete
dialog instead of loading the page that displays the checkout form. If all goes well, the user shouldn’t see the form at all. You can easily add requestAutocomplete
to existing forms without having to change any field names. Simply add the autocomplete
attribute to each form element with the appropriate value and add the requestAutocomplete()
function on the form element. The browser will handle the rest.
var doRAC = document.getElementById("doRAC");
doRAC.addEventListener("click", doRequestAutocomplete);
form = document.getElementById("usrForm");
form.addEventListener("autocompleteerror", requestAutocompleteError);
form.addEventListener("autocomplete", requestAutocompleteCompleted);
if (form.requestAutocomplete) {
isRACSupported(true, "");
} else {
isRACSupported(false, "Please complete the form manually.");
}
Try full sample
The requestAutocomplete
function on the form
element indicates to the browser that it should populate the form. As a security feature, the function must be called via a user gesture like a touch or mouse click. A dialog is then displayed asking the user permission to populate the fields and which details they want to populate it with.
function requestAutocompleteCompleted(evt) {
console.log("requestAutocomplete Completed", evt);
form.classList.toggle("hidden", false);
}
function requestAutocompleteError(evt) {
console.log("requestAutocomplete Error", evt);
isRACSupported(false, "An error occured attempting to autocomplete the form.");
}
Try full sample
Upon completion of requestAutocomplete
, the function will either fire the autocomplete
event if it finished successfully, or autocompleteerror
if it was unable to complete the form. If it completed successfully and the form validates to your needs, simply submit the form and proceed to the final confirmation.
Remember
Touchscreens are available on more and more devices, ranging from phones up to desktop screens. When your users choose to interact with your UI, your app should respond to their touch in intuitive and beautiful ways.
Have you ever touched or clicked an element on a web page and questioned whether the site actually detected it?
Simply altering the color of elements as users touch parts of your UI gives a basic reassurance that your site is working. Not only does this alleviate frustation, but can also give a snappy and responsive feel to your site.
The fastest way to support touch is to change the UI in response to a DOM element’s change in state.
DOM elements can be in one of the following states, default, focus, hover, and active. To change our UI for each of these states, we need to apply styles to the following pseudo classes :hover
, :focus
and :active
as shown below:
.btn {
background-color: #4285f4;
}
.btn:hover {
background-color: #296CDB;
}
.btn:focus {
background-color: #0F52C1;
/* The outline parameter surpresses the border
color / outline when focused */
outline: 0;
}
.btn:active {
background-color: #0039A8;
}
See Pseudo classes for touch states:
On most mobile browsers hover and/or focus states will apply to an element after it’s been tapped.
Consider carefully what styles you set and how they will look to the user after they finish their touch.
Bear in mind that anchor tags and buttons may have different behaviour in different browsers, so assume in some cases hover will remain and in others focus will remain.
Unfortunately, Safari on iOS does not apply the active state by default, to get it working you need to add a touchstart
event listener to the document body or to each element.
You should do this behind a user agent test so it’s only run on iOS devices.
Adding a touch start to the body has the advantage of applying to all elements in the DOM, however this may have performance issues when scrolling the page.
window.onload = function() {
if(/iP(hone|ad)/.test(window.navigator.userAgent)) {
document.body.addEventListener('touchstart', function() {}, false);
}
};
The alternative is to add the touch start listeners to all the interactable elements in the page, alleviating some of the performance concerns.
window.onload = function() {
if(/iP(hone|ad)/.test(window.navigator.userAgent)) {
var elements = document.querySelectorAll('button');
var emptyFunction = function() {};
for(var i = 0; i < elements.length; i++) {
elements[i].addEventListener('touchstart', emptyFunction, false);
}
}
};
Once you add styles for the different states, you’ll notice that most browsers implement their own styles to respond to a user’s touch, you should override these defaults when you’ve added your own styles.
Remember
When mobile devices first launched, a number of sites didn’t have styling for the active state. As a result, many browsers add a highlight color or style to elements when a user touches them.
Safari and Chrome add a tap highlight color which can be prevented with the -webkit-tap-highlight-color
CSS property:
/* Webkit / Chrome Specific CSS to remove tap
highlight color */
.btn {
-webkit-tap-highlight-color: transparent;
}
Internet Explorer on Windows Phone has a similar behavior, but is suppressed via a meta tag:
<meta name="msapplication-tap-highlight" content="no">
The Firefox -moz-focus-inner
pseudo class includes an outline on touchable elements. You can remove this outline by setting the border: 0
.
If you are using a <button>
element, you get a gradient applied to your button which you can remove by setting background-image: none
.
/* Firefox Specific CSS to remove button
differences and focus ring */
.btn {
background-image: none;
}
.btn::-moz-focus-inner {
border: 0;
}
Suppress the outline color when an element is focused using outline: 0
.
.btn:focus {
outline: 0;
// Add replacement focus styling here (i.e. border)
}
Some mobile browsers will select text if the user long presses on the screen. This can result in a bad user experience if the user accidentally presses down on a button for too long. You can prevent this from happening using the user-select
CSS property.
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
Remember
| Class | Example | Description |
|---|---|---|
| :hover | This state is entered when a is cursor placed over an element. Changes in UI on hover are helpful to encourage users to interact with elements. | |
| :focus | When you tab through elements on a page, you are moving the focus from one element to the next. The focus state allows the user to know what element they are currently interacting with; also allows users to navigate your UI easily using a keyboard. | |
| :active | This is the state an element has when it's being selected, for example a user clicking or touching an element. |
If you have an idea for custom interactions and gestures for your site, there are two topics to keep in mind: how to support the range of mobile browsers and how to keep your frame rate high. In this article, we'll look at exactly these topics.
Depending on what you would like to do with touch, you’re likely to fall into one of two camps:
There are trade offs to be had with both.
If the user will only be able to interact with one element, you might want all touch events to be given to that one element, as long as the gesture initially started on the element itself. For example, moving a finger off the swipable element can still control the element.
If, however, you expect users to interact with multiple elements at the same time (using multi-touch), you should restrict the touch to the specific element.
Touch events and mouse events are implemented on most mobile browsers.
The event names you need to implement are touchstart
, touchmove
, touchend
and touchcancel
.
For some situations, you may find that you would like to support mouse interaction as well; which you can do with the mouse events: mousedown
, mousemove
, and mouseup
.
For Windows Touch devices, you need to support Pointer Events which are a new set of events. Pointer Events merge mouse and touch events into one set of callbacks. This is currently only supported in Internet Explorer 10+ with the prefixed events MSPointerDown
, MSPointerMove
, and MSPointerUp
and in IE 11+ the unprefixed events pointerdown
, pointermove
, and pointerup
.
Touch, mouse and Pointer Events are the building blocks for adding new gestures into your application (see Touch, mouse and Pointer events).
Include these event names in the addEventListener()
method, along with the event’s callback function and a boolean. The boolean determines whether you should catch the event before or after other elements have had the opportunity to catch and interpret the events (true
means we want the event before other elements).
// Check if pointer events are supported.
if (window.PointerEventsSupport) {
// Add Pointer Event Listener
swipeFrontElement.addEventListener(pointerDownName, this.handleGestureStart, true);
} else {
// Add Touch Listener
swipeFrontElement.addEventListener('touchstart', this.handleGestureStart, true);
// Add Mouse Listener
swipeFrontElement.addEventListener('mousedown', this.handleGestureStart, true);
}
This code first checks to see if Pointer Events are supported by testing for window.PointerEventsSupport
, if Pointer Events aren’t supported, we add listeners for touch and mouse events instead.
The value window.PointerEventSupport
is determined by looking for the existence of window.PointerEvent
or the now deprecated window.navigator.msPointerEnabled
objects. If they are supported we use varibles for event names, which use the prefixed or unprefixed versions depending on the existence of window.PointerEvent
.
var pointerDownName = 'MSPointerDown';
var pointerUpName = 'MSPointerUp';
var pointerMoveName = 'MSPointerMove';
if(window.PointerEvent) {
pointerDownName = 'pointerdown';
pointerUpName = 'pointerup';
pointerMoveName = 'pointermove';
}
// Simple way to check if some form of pointerevents is enabled or not
window.PointerEventsSupport = false;
if(window.PointerEvent || window.navigator.msPointerEnabled) {
window.PointerEventsSupport = true;
}
In the short snippet of code above you may have noticed that we only add the starting event listener, this is a conscious decision.
By adding the move and end event listeners once the gesture has started on the element itself, the browser can check if the touch occured in a region with a touch event listener and if it’s not, can handle it faster by not having to run any additional javascript.
The steps taken to implement this are:
Below is a snippet of our handleGestureStart
method which adds the move and end events to the document:
// Handle the start of gestures
this.handleGestureStart = function(evt) {
evt.preventDefault();
if(evt.touches && evt.touches.length > 1) {
return;
}
// Add the move and end listeners
if (window.PointerEventsSupport) {
// Pointer events are supported.
document.addEventListener(pointerMoveName, this.handleGestureMove, true);
document.addEventListener(pointerUpName, this.handleGestureEnd, true);
} else {
// Add Touch Listeners
document.addEventListener('touchmove', this.handleGestureMove, true);
document.addEventListener('touchend', this.handleGestureEnd, true);
document.addEventListener('touchcancel', this.handleGestureEnd, true);
// Add Mouse Listeners
document.addEventListener('mousemove', this.handleGestureMove, true);
document.addEventListener('mouseup', this.handleGestureEnd, true);
}
initialTouchPos = getGesturePointFromEvent(evt);
swipeFrontElement.style.transition = 'initial';
}.bind(this);
The end callback we add is handleGestureEnd
which removes the move and end events from the document when the gesture has finished:
// Handle end gestures
this.handleGestureEnd = function(evt) {
evt.preventDefault();
if(evt.touches && evt.touches.length > 0) {
return;
}
isAnimating = false;
// Remove Event Listeners
if (window.PointerEventsSupport) {
// Remove Pointer Event Listeners
document.removeEventListener(pointerMoveName, this.handleGestureMove, true);
document.removeEventListener(pointerUpName, this.handleGestureEnd, true);
} else {
// Remove Touch Listeners
document.removeEventListener('touchmove', this.handleGestureMove, true);
document.removeEventListener('touchend', this.handleGestureEnd, true);
document.removeEventListener('touchcancel', this.handleGestureEnd, true);
// Remove Mouse Listeners
document.removeEventListener('mousemove', this.handleGestureMove, true);
document.removeEventListener('mouseup', this.handleGestureEnd, true);
}
updateSwipeRestPosition();
}.bind(this);
Mouse events follow this same pattern since it’s easy for a user to accidentally move the mouse outside of the element, which results in the move events no longer firing. By adding the move event to the document, we’ll continue to get mouse movements regardless of where they are on the page.
You can use the Show potential scroll bottlenecks feature in Chrome DevTools to show how the touch events behave:
With this enabled you can see where touch events are bound and ensure your logic for adding and removing listeners is working as you’d expect.
If you expect your users to use multiple elements at once, you can add the move and end events listeners directly to the elements themselves. This applies to touch only, for mouse interactions you should continue to apply the mousemove
and mouseup
listeners to the document.
Since we only wish to track touches on a particular element, we can add the move and end listeners for touch and pointer events to the element straight away:
// Check if pointer events are supported.
if (window.PointerEventsSupport) {
// Add Pointer Event Listener
elementHold.addEventListener(pointerDownName, this.handleGestureStart, true);
elementHold.addEventListener(pointerMoveName, this.handleGestureMove, true);
elementHold.addEventListener(pointerUpName, this.handleGestureEnd, true);
} else {
// Add Touch Listeners
elementHold.addEventListener('touchstart', this.handleGestureStart, true);
elementHold.addEventListener('touchmove', this.handleGestureMove, true);
elementHold.addEventListener('touchend', this.handleGestureEnd, true);
elementHold.addEventListener('touchcancel', this.handleGestureEnd, true);
// Add Mouse Listeners
elementHold.addEventListener('mousedown', this.handleGestureStart, true);
}
In our handleGestureStart
and handleGestureEnd
function, we add and remove the mouse event listeners to the document.
// Handle the start of gestures
this.handleGestureStart = function(evt) {
evt.preventDefault();
var point = getGesturePointFromEvent(evt);
initialYPos = point.y;
if (!window.PointerEventsSupport) {
// Add Mouse Listeners
document.addEventListener('mousemove', this.handleGestureMove, true);
document.addEventListener('mouseup', this.handleGestureEnd, true);
}
}.bind(this);
this.handleGestureEnd = function(evt) {
evt.preventDefault();
if(evt.targetTouches && evt.targetTouches.length > 0) {
return;
}
if (!window.PointerEventsSupport) {
// Remove Mouse Listeners
document.removeEventListener('mousemove', this.handleGestureMove, true);
document.removeEventListener('mouseup', this.handleGestureEnd, true);
}
isAnimating = false;
lastHolderPos = lastHolderPos + -(initialYPos - lastYPos);
}.bind(this);
Now that we have the start and end events taken care of we can actually respond to the touch events.
For any of the start and move events, you can easily extract x
and y
from an event.
The following code snippet checks whether the event is from a touch event by looking for targetTouches
, if it is then it extracts the clientX
and clientY
from the first touch. If the event is a mouse or pointer event then we extract clientX
and clientY
directly from the event itself.
function getGesturePointFromEvent(evt) {
var point = {};
if(evt.targetTouches) {
// Prefer Touch Events
point.x = evt.targetTouches[0].clientX;
point.y = evt.targetTouches[0].clientY;
} else {
// Either Mouse event or Pointer Event
point.x = evt.clientX;
point.y = evt.clientY;
}
return point;
}
Each touch event has three lists containing touch data (see also Touch lists):
touches
: list of all current touches on the screen, regardless of DOM element they are on.targetTouches
: list of touches currently on the DOM element the event is bound to.changedTouches
: list of touches which changed resulting in the event being fired.In most cases, targetTouches
gives you everything you need.
Since the event callbacks are fired on the main thread, we want to run as little code as possible in the callback to keep our frame rate high, preventing jank.
Use requestAnimationFrame
to change the UI in response to an event. This gives you an opportunity to update the UI when the browser is intending to draw a frame and will help you move some work out of your callback.
A typical implementation is to save the x
and y
coordinates from the start and move events and request an animation frame in the move event callback.
In our demo, we store the initial touch position in handleGestureStart
:
// Handle the start of gestures
this.handleGestureStart = function(evt) {
evt.preventDefault();
if(evt.touches && evt.touches.length > 1) {
return;
}
// Add the move and end listeners
if (window.PointerEventsSupport) {
// Pointer events are supported.
document.addEventListener(pointerMoveName, this.handleGestureMove, true);
document.addEventListener(pointerUpName, this.handleGestureEnd, true);
} else {
// Add Touch Listeners
document.addEventListener('touchmove', this.handleGestureMove, true);
document.addEventListener('touchend', this.handleGestureEnd, true);
document.addEventListener('touchcancel', this.handleGestureEnd, true);
// Add Mouse Listeners
document.addEventListener('mousemove', this.handleGestureMove, true);
document.addEventListener('mouseup', this.handleGestureEnd, true);
}
initialTouchPos = getGesturePointFromEvent(evt);
swipeFrontElement.style.transition = 'initial';
}.bind(this);
The handleGestureMove
method stores the y
position before requesting an animation frame if we need to, passing in our onAnimFrame
function as the callback:
var point = getGesturePointFromEvent(evt);
lastYPos = point.y;
if(isAnimating) {
return;
}
isAnimating = true;
window.requestAnimFrame(onAnimFrame);
It’s in the onAnimFrame
function that we change our UI to move the elements around. Initially we check to see if the gesture is still on-going to determine whether we should still animate or not, if so we use our initial and last y positions to calculate the new transform for our element.
Once we’ve set the transform, we set the isAnimating
variable to false
so the next touch event will request a new animation frame.
function onAnimFrame() {
if(!isAnimating) {
return;
}
var newYTransform = lastHolderPos + -(initialYPos - lastYPos);
newYTransform = limitValueToSlider(newYTransform);
var transformStyle = 'translateY('+newYTransform+'px)';
elementHold.style.msTransform = transformStyle;
elementHold.style.MozTransform = transformStyle;
elementHold.style.webkitTransform = transformStyle;
elementHold.style.transform = transformStyle;
isAnimating = false;
}
The CSS property touch-action
allows you to control the default touch behavior of an element. In our examples, we use touch-action: none
to prevent the browser from doing anything with a users’ touch, allowing us to intercept all of the touch events.
/* Pass all touches to javascript */
-ms-touch-action: none;
touch-action: none;
touch-action
allows you to disable gestures implemented by a browser. For example, IE10+ supports a double-tap to zoom gesture. By setting a touch-action of pan-x | pan-y | manipulation
you prevent the default double-tap behavior.
This allows you to implement a double-tap gesture yourself. In the case of IE10+, it also eliminates the 300ms click delay.
Below is a list of the available parameters for touch-action.
Remember
touch-action: pan-x
or touch-action: pan-y
are great for being explicit in your intention that a user should only ever scroll vertically or horizontally on an element.The definitive touch events reference can be found here: w3 Touch Events.
These events are the building blocks for adding new gestures into your application:
Each touch event includes three list attributes:
touchstart
event-- list of the touch points that just became active with the current event.touchmove
event-- list of the touch points that have moved since the last event.touchend
and touchcancel
events-- list of the touch points that have just been removed from the surface.


{%extends 'base.html'%} {% load bootstrap3 %} {% load static%} {% block content %} {{block.super}}
Police Contact : {{police.contacts}}
Neighbourhood (located) : {{police.neighborhood_contact}}


Services
Tax Incentives
National Register
Compliance
Conservation
Portfolio
Commercial
Residential
Mixed
Cultural
News
About
Contact
left
right
right


Landing Page
Special Projects
This story is part of a series of specially designed stories that represents some of the best journalism The Post has to offer. Check out the rest of the special projects here.
MEAGAN HALL
08.24.17
After students left campus at the end of Spring Semester, the Ohio University Police Department saw a sharp drop in alcohol-related reports — over May and June, the department responded to only three incidents.
The first incident took place at about midnight on May 12. An OUPD officer stationed on Hudson Drive saw a 19-year-old man kicking a door at the Alpha Gamma Delta house on University Terrace.
As the officer approached, he witnessed the man removing a screen from a basement window on the house. The man was unsteady on his feet and smelled like alcohol, according to the OUPD report.
The officer issued the man a court summons for underage drinking and criminal mischief, and the man was transported to the Southeastern Ohio Regional Jail.
Officers found one male student stumbling along Richland Avenue a little after midnight on June 18. Another man was reportedly passed out on the intersection of Congress Street and Washington Street about two hours later. Both men were transported to Southeastern Ohio Regional Jail.
OUPD officers received two reports of marijuana paraphernalia left on university property during May.
On May 4, an electric company worker discovered marijuana paraphernalia in the attic space above the third floor in Perkins Hall, according to an OUPD report.
In the second incident, staff at the OU Golf Course located “possible controlled substances” in a golf cart. The OUPD report classifies the incident as illegal possession of marijuana.
The department’s public radio log for May and June listed 69 incident entries. Forty-one of those incidents involved traffic violations. The department also received five reports of theft, several of which were bike thefts.
Elsewhere in Athens County, Athens County Sheriff's deputies responded to theft reports involving a variety of items — and a bit of drama.
Athens County Sheriff’s deputies responded to a series of alleged thefts between two neighbors on May 16.
The first neighbor told deputies the second neighbor had stolen $20 from her. In an attempt to get her to return the money, the first neighbor stole the second neighbor’s bike; to try to get her own bike back, the second neighbor went ahead and stole the first neighbor’s bike.
Deputies mediated the dispute and the neighbors returned the bikes to each other. Because the deputies could not determine whether $20 was stolen, they left without taking further action.
A similar series of thefts allegedly took place on June 27.
Deputies arrived at a residence at about 9 p.m. in response to a complaint that someone was smoking indoors, according to a sheriff’s report. The woman who reported the incident said the man who was smoking had taken her keys, and she had taken his reacher-grabber in turn, offering to trade the reacher-grabber for the keys.
Deputies retrieved the keys from the man. He claimed that he had only taken them to roll up the car windows for her.
“Further complaints were also logged in regard to profanity, time spent on the telephone, and TV show selection in the home but were found not to be criminal in nature,” according to the report.
The deputies returned to patrol without taking any action.
The Sheriff’s Office responded to another non-criminal dispute on June 25, when someone reported a fight between a girlfriend and a boyfriend.
Upon arriving, the deputies learned that the incident was only a verbal argument, and the two were fighting because the boyfriend had drank the last Faygo Moon Mist.
“Both parties were advised to separate if they could not get along and also to purchase more Faygo so there would be no incidents,” according to the report.
BackLanding Page
This story is part of a series of specially designed stories that represents some of the best journalism The Post has to offer. Check out the rest of the special projects here.


plugin.xml
.
The following elements are checked:
<name>
<action>, <group>
<separator, <synonym>, <override-text>
org.jetbrains.annotations.Nls
specifying required capitalization
Please see Capitalization in IntelliJ Platform UI Guidelines for more information.


Why I don't feel like a programmer:
I use a mac at work
Real programmers don't like Apple.
Real programmers embrace all the manual dirty work they have to do configuring and trouble shooting basic functions on this or that linux distro.

I use package managers
Mac has homebrew.
At home on Fedora, I just use the software manager GUI. If I want something not through it, I have to look up instructions. I don't even know what my package manager is.
I use my mouse
Real programmers only use the keyboard.
Also, they can type without looking.
Not me.
I forget how to use FZF in vim every time my manager shows me
ctrl + p. ctrl + p. This time I'll remember.
I don't know how to write a bash script
Did you know bash doesn't have types? An int and a string are the same thing. What does that even mean? Idk.
Or an awk script
I can't process files fast. Wouldn't that be fun? My coworker is going to make a text editing mini war for us all. Bet I won't succeed.
Or use that JSON processing thing
Like you pipe JSON into it and process it and get answers. In goes JSON, out comes object.key[2]. This was a problem when I wanted to find out if our users ever request a certain field from one of our GraphQL endpoints - I needed to process a lot of logfile. Which reminds me,
I have to copy pasta and double check the steps every time to 1) SSH, or 2) deploy
scp
is an alien concept. And every other tool that Julia Evans has a cute cartoon explaining. I don't know the syntax or the rules and I'm scared to screw anything up. Maybe that's a good thing, on second thought. At least in some ways.
Or know how to set up a server
It has to like, connect to the internet or something right? And have some software running on it? At least an OS? An operating system counts as software right?
Or know how to explain what a server is
I asked my friend if the software her company uses is just for them, or available for anyone to use. She said, "It's on a server...whatever that means.". I said, yeah I don't know - a computer that does stuff? Maybe without you? Then her roommate explained like a textbook: a server is a specialized computer that whatever whatever I don't know I don't remember, I was busy being sad that I didn't really know what a server was.
I've never managed my own memory
I don't know how a computer works. There's memory and nands and ands and ors and nors. I've never used C or C++ or C# or C- or C%.
I prefer doing to planning
I don't want to think through every possible outcome and option, I just want to make stuff.
That's too waterfall-y. But it means I run up against lots of impossible solutions, and spend time trying plan A then ditching in favour of plan B then returning to plan A. Seems like a waste of time. I'm scatterbrained.
I prefer doing to reading
I don't want to read through the whole React docs every time there's an update, I just want to make stuff.
I don't care much about history
Who is Luna Lovegood? I mean Eva Rotwell? I mean...the girl? The famous one? Who wrote a program, or maybe she didn't?
I use google services
And skype, and whatsapp, and I have a facebook account - multiple facebook accounts.
Real programmers are wary of that stuff.
Real programmers use discord, and signal, and tox, and the onion, and tor, and maybe the onion is actually just the logo for tor, and..?
I'm just a web developer.
I'm just a front end developer.
I don't have an engineering degree.
But I'm a web developer who can't even do CSS.
Isn't that, like, all web developers are good for? CSS?
I don't need long chunks of uninterrupted time.
Real programmers get in a state of flow.
Real programmers need quiet and space to produce genius inventions. I just make forms. No genius required.
I have no right to complain about noise or interruptions.
I don't play video games.
Ack! They all play video games. And chess. And ping pong. I'm an alien! They play chess because they focus and get in flow state and analyse...just like the last point.
Anyway.
That's better
Anyway, I feel a bit better now. I can still be a programmer if all of the above is true. I'm not static (I can still learn things). I can't learn everything at once (and I'm still fresh enough in programming - 4 years isn't a very long time!) I am just me and I can use my strengths of curiousity and desire to make nice things ❤ And that's enough!
Buhbye now.
PS - Don't forget to be nice to your less nerdy co-workers. Don't show surprise when they could be about to have a learning opportunity. Make them feel welcome and valued no matter their background and methods. In short, be kind to one another. 😃 ❤
PPS - I picked up a couple advent of code puzzles, because I thought that might be a fun way to feel a little bit more like a programmer again. I think it's working. 😃
PPPS - Did you forget the first PS already? Go back to it! 😉


{% extends "account/base.html" %} {% load material_form i18n %} {% load account %} {% block head_title %}{% trans "Password Reset" %}{% endblock %} {% block content %} {{ block.super }}
{% trans "Forgotten your password?  %}


A landing page template freshly redesigned for Bootstrap 4
| Hello/Hi/Hey | ||
| Good morning | Good afternoon | Good evening |
| Goodbye/Bye. |
| See you later/tomorrow/next week. |
| Have a nice day. |
| Thank you. You too. |
|
A: How is the weather today?
B: The weather is great/ fine/ good/ okay/ bad/ terrible. It is sunny/ raining/ snowing/ windy/ cloudy. |


Contents
Short Descriptions
See the program descriptions in the BIND-9.16.1 section.
BIND Utilities is not a separate package, it is a collection of the client side programs that are included with BIND-9.16.1. The BIND package includes the client side programs nslookup, dig and host. If you install BIND server, these programs will be installed automatically. This section is for those users who don't need the complete BIND server, but need these client side applications.
This package is known to build and work properly using an LFS-9.1 platform.
Download (FTP): ftp://ftp.isc.org/isc/bind9/9.16.1/bind-9.16.1.tar.xz
Download MD5 sum: 2c7f119c71a839f937fcc2788eaa2ecd
Download size: 4.3 MB
Estimated disk space required: 112 MB
Estimated build time: 0.6 SBU
libcap-2.33 with PAM and libxml2-2.9.10
User Notes: http://wiki.linuxfromscratch.org/blfs/wiki/bind-utils
Install BIND Utilities by running the following commands:
./configure --prefix=/usr --without-python && make -C lib/dns && make -C lib/isc && make -C lib/bind9 && make -C lib/isccfg && make -C lib/irs && make -C bin/dig
This portion of the package does not come with a test suite.
Now, as the root
user:
make -C bin/dig install
--without-python
: This
option eliminates the need for an unused python module.
make -C lib/...: These commands build the libraries that are needed for the client programs.
make -C bin/dig: This command builds the client programs.
See the program descriptions in the BIND-9.16.1 section.
Last updated on 2020-03-23 16:46:15 -0500


Knockout
JS
Rich client-side interactivity without messy event handlers
MVVM pattern - object-oriented JS and declarative bindings
IE6+ FF2+ Chrome Safari Opera ...
MIT License
Basic binding
First Name:
First Name:
Observables
First Name:
First Name:
More binding
First Name:
First Name:
Last Name:
Last Name:
Computed values
First Name:
First Name:
Last Name:
Last Name:
Lists (Shopping Cart)
Price calculations
-
Add/Remove
Items in your shopping cart (
)
-
Remove
Add
Load/Save
Items in your shopping cart (
)
-
Remove
Add
Save
Custom Bindings
The value is greater than 10!
Rouben Meschian
rmeschian@gmail.com


| Package | Description |
|---|---|
| org.nd4j.nativeblas |
| Modifier and Type | Class and Description |
|---|---|
static class |
Nd4jCpu.add
This is one of auto-broadcastable operations.
|
static class |
Nd4jCpu.assign
This is one of auto-broadcastable operations.
|
static class |
Nd4jCpu.bitwise_and
This operation applies bitwise AND
PLEASE NOTE: This operation is applicable only to integer data types
\tparam T
|
static class |
Nd4jCpu.bitwise_or
This operation applies bitwise OR
PLEASE NOTE: This operation is applicable only to integer data types
\tparam T
|
static class |
Nd4jCpu.bitwise_xor
This operation applies bitwise XOR
PLEASE NOTE: This operation is applicable only to integer data types
\tparam T
|
static class |
Nd4jCpu.boolean_and |
static class |
Nd4jCpu.boolean_or |
static class |
Nd4jCpu.boolean_xor |
static class |
Nd4jCpu.cyclic_rshift_bits
This operation shift individual bits of each element in array, shifting to the right
PLEASE NOTE: This operation is applicable only to integer data types
\tparam T
|
static class |
Nd4jCpu.cyclic_shift_bits
This operation shift individual bits of each element in array, shifting to the left
PLEASE NOTE: This operation is applicable only to integer data types
\tparam T
|
static class |
Nd4jCpu.divide
This is one of auto-broadcastable operations.
|
static class |
Nd4jCpu.divide_no_nan
This is one of auto-broadcastable operations.
|
static class |
Nd4jCpu.floordiv
This is one of auto-broadcastable operations.
|
static class |
Nd4jCpu.floormod
This is one of auto-broadcastable operations.
|
static class |
Nd4jCpu.igamma
Broadcastable igamma implementation
igamma(a, x) = gamma(а, x) / Gamma(a) - Gamma distribution function P(a,x)
Gamma(a) = int from 0 to infinity { t ^ {a - 1} e^{-t}dt }
gamma(a, x) = int from 0 to x { t ^ {a - 1} e^{-t}dt }
\tparam T
|
static class |
Nd4jCpu.igammac
Broadcastable igammac implementation
igammac(a, x) = Gamma(a,x)/Gamma(а) - Gamma distribution function Q(a,x)
Gamma(a) = int from 0 to infinity { t ^ {a - 1} e^{-t}dt }
Gamma(a, x) = int from x to infinity { t ^ {a - 1} e^{-t}dt }
\tparam T
|
static class |
Nd4jCpu.maximum
This is one of auto-broadcastable operations.
|
static class |
Nd4jCpu.minimum
This is one of auto-broadcastable operations.
|
static class |
Nd4jCpu.mod |
static class |
Nd4jCpu.multiply
This is one of auto-broadcastable operations.
|
static class |
Nd4jCpu.Pow
Broadcastable pow implementation
\tparam T
|
static class |
Nd4jCpu.realdiv
This is one of auto-broadcastable operations.
|
static class |
Nd4jCpu.reversedivide
This is one of auto-broadcastable operations.
|
static class |
Nd4jCpu.reversemod
This is one of auto-broadcastable operations.
|
static class |
Nd4jCpu.reversesubtract
This is one of auto-broadcastable operations.
|
static class |
Nd4jCpu.rshift_bits
This operation shift individual bits of each element in array to the right: >>
PLEASE NOTE: This operation is applicable only to integer data types
\tparam T
|
static class |
Nd4jCpu.shift_bits
This operation shift individual bits of each element in array to the left: <<
PLEASE NOTE: This operation is applicable only to integer data types
\tparam T
|
static class |
Nd4jCpu.squaredsubtract
This is one of auto-broadcastable operations.
|
static class |
Nd4jCpu.subtract
This is one of auto-broadcastable operations.
|
static class |
Nd4jCpu.tf_atan2
Special atan2 op impl for TF's args order
\tparam T
|
static class |
Nd4jCpu.truncatediv
\tparam T
|
Copyright © 2020. All rights reserved.


Sites & Apps
Qlimited Instrument Services - Website - Link
QLimited Instrument Services provide gas monitors for sale and hire, this website is built using Node.js with Express to connect to a MongoDB database hosted remotely. The site uses a completely custom built CMS and backend built by myself to allow the administrator to add and update products as well as files which are hosted seperately on Cloudinary.
The site is responsive for use on both mobile, desktop and laptop and uses the companies colour theme throughtout to raise awareness of the brand.
This website was built on a very limited budget in my spare time, it is hosted on Heroku and leverages Google Analytics to provide real-time usage data.
Included below are projects loaded from my github page, many of these include side projects, introductions to new frameworks and applications I am actively working on.


libtecla libtecla
NAME
libtecla - An interactive command-line input library.
SYNOPSIS
@CC@ ... -ltecla -lcurses
DESCRIPTION
The tecla library provides programs with interactive command line edit-
ing facilities, similar to those of the unix tcsh shell. In addition to
simple command-line editing, it supports recall of previously entered
command lines, TAB completion of file names or other tokens, and in-
line wild-card expansion of filenames. The internal functions which
perform file-name completion and wild-card expansion are also available
externally for optional use by the calling program.
The various parts of the library are documented in the following man
pages:
tecla - Use level documentation of the
command-line editing facilities
provided by gl_get_line().
gl_get_line - The interactive line-input module.
gl_io_mode - How to use gl_get_line() in an
incremental, non-blocking fashion.
cpl_complete_word - The word completion module.
ef_expand_file - The filename expansion module.
pca_lookup_file - A directory-list based filename
lookup and completion module.
In addition there is one optional application distributed with the
library:
enhance - Add command-line editing to third
party applications.
THREAD SAFETY
If the library is compiled with -D_POSIX_C_SOURCE=199506L, reentrant
versions of as many functions as possible are used. This includes using
getpwuid_r() and getpwnam_r() instead of getpwuid() and getpwnam() when
looking up the home directories of specific users in the password file
(for ~user/ expansion), and readdir_r() instead of readdir() for read-
ing directory entries when doing filename completion. The reentrant
version of the library is usually called libtecla_r.a instead of libte-
cla.a, so if only the latter is available, it probably isn't the cor-
rect version to link with threaded programs.
Reentrant functions for iterating through the password file aren't
available, so when the library is compiled to be reentrant, TAB comple-
tion of incomplete usernames in ~username/ expressions is disabled.
This doesn't disable expansion of complete ~username expressions, which
can be done reentrantly, or expansion of the parts of filenames that
follow them, so this doesn't remove much functionality.
The terminfo functions setupterm(), tigetstr(), tigetnum() and tputs()
also aren't reentrant, but very few programs will want to interact with
multiple terminals, so this shouldn't prevent this library from being
used in threaded programs.
LIBRARY VERSION NUMBER
The version number of the library can be queried using the following
function.
void libtecla_version(int *major, int *minor, int *micro);
On return, this function records the three components of the libtecla
version number in *major, *minor, *micro. The formal meaning of the
three components is as follows.
major - Incrementing this number implies that a change has
been made to the library's public interface, which
makes it binary incompatible with programs that
were linked with previous shared versions of the
tecla library.
minor - This number is incremented by one whenever
additional functionality, such as new functions or
modules, are added to the library.
micro - This is incremented whenever modifications to the
library are made which make no changes to the
public interface, but which fix bugs and/or improve
the behind-the-scenes implementation.
TRIVIA
In Spanish, a "tecla" is the key of a keyboard. Since this library cen-
ters on keyboard input, and given that I wrote much of the library
while working in Chile, this seemed like a suitable name.
FILES
libtecla.a - The tecla library.
libtecla.h - The tecla header file.
~/.teclarc - The tecla personal customization file.
SEE ALSO
gl_get_line, tecla, gl_io_mode, ef_expand_file,
cpl_complete_word, pca_lookup_file, enhance
AUTHOR
Martin Shepherd<EMAIL_ADDRESS>ACKNOWLEDGMENTS
Markus Gyger - Lots of assistance, including help with
shared libraries, configuration information,
particularly for Solaris; modifications to
support C++ compilers, improvements for ksh
users, faster cursor motion, output
buffering, and changes to make gl_get_line()
8-bit clean.
Mike MacFaden - Suggestions, feedback and testing that led
to many of the major new functions that were
added in version 1.4.0.
Tim Eliseo - Many vi-mode bindings and fixes.
libtecla


We got methodologies!
- integrate revolutionary content
- morph bricks-and-clicks platforms
- morph cutting-edge e-markets
- optimize efficient paradigms
- deploy real-time relationships
- incubate mission-critical mindshare
- reinvent next-generation architectures
- monetize plug-and-play content
- productize 24/365 action-items


Our Story
Bringing meaning back to the phrase “neighborhood bar," The Garage on Motor Ave has become a second home for Angelenos.
Our bartender can often be seen shooting the breeze with the locals, and makes a point to learn each of their names and favorite drinks.
It's this laid back vibe that keeps our regulars coming back week after week. With an extensive selection of craft beers on tap, as well as a crave-worthy food selection, we’ve got you covered.
So relax on our patio or watch your favorite team every Sunday on one of our 28 HD TVs.


InteractionManager Class
The interaction manager deals with mouse and touch events. Any DisplayObject can be interactive if its interactive parameter is set to true This manager also supports multitouch.
Constructor
Item Index
Methods
Methods
collectInteractiveSprite
-
displayObject
-
iParent
Collects an interactive sprite recursively to have their interactions managed
Parameters:
-
displayObject
DisplayObjectthe displayObject to collect
-
iParent
DisplayObjectthe display object's parent
hitTest
-
item
-
interactionData
Tests if the current mouse coordinates hit a sprite
Parameters:
-
item
DisplayObjectThe displayObject to test for a hit
-
interactionData
InteractionDataThe interactionData object to update in the case there is a hit
onMouseDown
-
event
Is called when the mouse button is pressed down on the renderer element
Parameters:
-
event
EventThe DOM event of a mouse button being pressed down
onMouseMove
-
event
Is called when the mouse moves across the renderer element
Parameters:
-
event
EventThe DOM event of the mouse moving
onMouseOut
-
event
Is called when the mouse is moved out of the renderer element
Parameters:
-
event
EventThe DOM event of a mouse being moved out
onMouseUp
-
event
Is called when the mouse button is released on the renderer element
Parameters:
-
event
EventThe DOM event of a mouse button being released
onTouchEnd
-
event
Is called when a touch is ended on the renderer element
Parameters:
-
event
EventThe DOM event of a touch ending on the renderer view
onTouchMove
-
event
Is called when a touch is moved across the renderer element
Parameters:
-
event
EventThe DOM event of a touch moving across the renderer view
onTouchStart
-
event
Is called when a touch is started on the renderer element
Parameters:
-
event
EventThe DOM event of a touch starting on the renderer view
rebuildInteractiveGraph
()
private
removeEvents
()
private
setTarget
-
target
Sets the target for event delegation
Parameters:
-
target
WebGLRenderer | CanvasRendererthe renderer to bind events to
setTargetDomElement
-
domElement
Sets the DOM element which will receive mouse/touch events. This is useful for when you have other DOM elements on top of the renderers Canvas element. With this you'll be able to delegate another DOM element to receive those events
Parameters:
-
domElement
DOMElementthe DOM element which will receive mouse and touch events
update
()
private
updates the state of interactive objects
Properties
currentCursorStyle
String
The css style of the cursor that is being used
interactionDOMElement
HTMLCanvasElement
private
Our canvas
interactiveItems
Array
private
An array containing all the iterative items from the our interactive tree
last
Number
mouseOut
Boolean
Is set to true when the mouse is moved out of the canvas
mouseoverEnabled
Boolean
onMouseDown
Function
onMouseMove
Function
onMouseOut
Function
onMouseUp
Function
onTouchEnd
Function
onTouchMove
Function
onTouchStart
Function
pool
Array
Tiny little interactiveData pool !
resolution
Number
touches
Object
An object that stores current touches (InteractionData) by id reference


SEECS Academics Club
Admin
Profile
Settings
Help
Logout
Dashboard
Reports
App Tour
Shortcodes
Drops
Login
Signup
Vizitor
555K
Likes
66.66
Orders
15.55
Some Stats
Another Chart


CITRANATAL B-CALM- ascorbic acid, calcium citrate, iron, cholecalciferol, pyridoxine hydrochloride, and folic acid
Mission Pharmacal Company
Disclaimer: This drug has not been found by FDA to be safe and effective, and this labeling has not been approved by FDA. For further information about unapproved drugs, click here.
A prescription prenatal supplement with 1 mg folic acid and a high level of vitamin B6 which may act as an antiemetic.
CitraNatal B-Calm® is a prescription prenatal multivitamin/mineral tablet with B6, along with two vitamin B6 tablets. The prenatal tablet contains Ferr-Ease®, a patented dualiron delivery comprising both a quick release and slow release iron. The prenatal tablet is white, coated, modified oval, and is debossed with "0832" on one side and is blank on the other. The B6 25 mg tablets are white to off-white, uncoated, round, and are debossed with "B" on one side and "6" on the other.
| Each prenatal tablet contains: | |
| Vitamin C (Ascorbic acid) | 120 mg |
| Calcium (Calcium citrate) | 120 mg |
| Iron (Carbonyl iron, Ferrous gluconate) | 20 mg |
| Vitamin D3 (Cholecalciferol) | 400 IU |
| Vitamin B6 (Pyridoxine HCl) | 25 mg |
| Folic Acid | 1 mg |
| Each vitamin B6 tablet contains: | |
| Vitamin B6 (Pyridoxine HCl) | 25 mg |
CitraNatal B-Calm® is a multivitamin/mineral prescription drug indicated for use in improving the nutritional status of women prior to conception, throughout pregnancy, and in the postnatal period for both lactating and nonlactating mothers. CitraNatal B-Calm® may be used in conjunction with a physician prescribed regimen to help minimize pregnancy related nausea and vomiting.
This product is contraindicated in patients with a known hypersensitivity to any of the ingredients.
Accidental overdose of iron-containing products is a leading cause of fatal poisoning in children under 6.  In case of accidental overdose, call a doctor or poison control center immediately.
Folic acid alone is improper therapy in the treatment of pernicious anemia and other megaloblastic anemias where vitamin B12 is deficient.
Folic acid in doses above 0.1 mg daily may obscure pernicious anemia, in that hematologic remission can occur while neurological manifestations remain progressive.
Allergic sensitization has been reported following both oral and parenteral administration of folic acid.
One tablet every eight hours, beginning with "Tablet 1", or as directed by a physician.
Six child-resistant blister packs of 5 multivitamin/multimineral tablets and 10 vitamin B6 tablets each - NDC 0178-0832-30.
To report a serious adverse event or obtain product information, call<PHONE_NUMBER>.
50310 C01 Rev 008110
Ferr-Ease®
Dual-iron delivery
Trademark of Mission Pharmacal Company
U.S. Patent No. 6,521,247
MISSION PHARMACAL COMPANY
San Antonio, TX USA 78230 1355
missionpharmacal.com
Copyright © 2011 Mission Pharmacal Company.
All rights reserved.
*March of Dimes does not endorse specific products or brands. March of Dimes is a registered trademark of the March of Dimes Foundation.
Rx Only
NDC 0178-0832-30
The gentle option for
additional B6
CitraNatalB-Calm®
Rx Prenatal Vitamin and two 25 mg each Vitamin B6 tablets
A prescription
prenatal supplement
with 1 mg of folic
acid and a high level
of vitamin B6 which
may act as an
antiemetic.
march of dimes®
Mission Pharmacal is a proud
supporter of the March of Dimes.*
Mission®
PHARMACAL
CONTAINS
Six 5-day Blister Packs
|
CITRANATAL B-CALM
ascorbic acid, calcium citrate, iron, cholecalciferol, pyridoxine hydrochloride, and folic acid kit | ||||||||||||||||||||||||
| ||||||||||||||||||||||||
| ||||||||||||||||||||||||
| ||||||||||||||||||||||||
| ||||||||||||||||||||||||
| ||||||||||||||||||||||||
| ||||||||||||||||||||||||
| ||||||||||||||||||||||||
| ||||||||||||||||||||||||
| ||||||||||||||||||||||||
| ||||||||||||||||||||||||
| ||||||||||||||||||||||||
| ||||||||||||||||||||||||
| ||||||||||||||||||||||||
| ||||||||||||||||||||||||
| ||||||||||||||||||||||||
| ||||||||||||||||||||||||
|
| Labeler - Mission Pharmacal Company (008117095) |
| Establishment | |||
| Name | Address | ID/FEI | Business Operations |
|---|---|---|---|
| Mission Pharmacal Company | 927726893 | MANUFACTURE(0178-0832) |
| Establishment | |||
| Name | Address | ID/FEI | Business Operations |
|---|---|---|---|
| Nutra-Med Packaging, Inc. | 022004902 | PACK(0178-0832) |


--- title: "SOC830 Lab 10: Correlations & Simple Regression" lastmod: 2018-12-28T00:00:00.000Z draft: false type: docs maths: true output: blogdown::html_page: toc: true linktitle: "Lab 10: Correlations & Simple Regression" menu: docs: parent: SOC830(SOCI702) weight: 55 ---
This tenth lab introduces 1) how to produce a matrix of bivariate correlations, 2) how to create scatterplots, and 3) how to conduct a simple regression model.
We will use four packages for this lab. Load them using the following code:
library(dplyr)
library(sjlabelled)
library(sjmisc)
library(sjPlot)
Also, run the following code. Otherwise, you will see scientific notations (e.g., 2e-16) instead of numbers in the R output.
options(digits=5, scipen=15)
This lab uses a new dataset, the Crime Rates Datasets of NSW Local Government Areas (NSW Crime). Download the data file in the course website(iLearn) and put it in your working directory. Then, run the following code:
crime <- readRDS("nsw-lga-crime.RDS")
The dataset is loaded as crime.
In most cases, your dataset contains cases with many missing values. Missing values can reduce the statistical power of analyses and produce biased estimates, which could lead to invalid conclusions. There are several ways to handle missing values, but this lab introduces only the listwise deletion (also known as complete-case analysis) which is the most frequently used method in handling missing data.
Listwise deletion removes any case in a dataset if the case has a missing value on any variable in the analysis. Suppose that we are investigating the relationships across six variables: sexual offence rates (sexoff), the median age of residents (medage), unemployment rates (unemploy), median house prices (housmedprice), regions of LGAs(region2), and urban or rural LGAs (urban). The first step of this analysis is to create a dataset which includes only LGAs that have no missing values on these six variables so that we can investigate all the relationships based on the same set of LGAs.
First, we create a new dataset (crime2) which has the six variables of our choice as well as identification numbers (code) and LGA names (name). Note that code and name have no missing values and thus does not affect the listwise deletion process. ‘select()
’ is used for choosing variables that will be included in a new dataset. If you are not familiar with this function, go to Creating a dataset of specific variables.
crime2 <- crime %>%
select(code, name, medage, unemploy, housmedprice, sexoff, region2, urban)
Second, we make a new variable (mark), which will show whether cases have missing values on any of the six variables. We tentatively assign 0 to all the cases. ‘mutate()
’ is used for creating a new variable. If you are not familiar with this function, go to Computing variables.
crime2 <- crime2 %>%
mutate(mark = 0)
Third, we replace 0 with 1 only when cases do not have missing values on all the six variables. Thus, 1 indicates cases with no missing values, and 0 indicates those with missing values. ‘replace(variable, condition, value)
’ will change the value of variable
into value
when condition
is met. ‘complete.cases(data)
’ identifies cases with no missing values in data
. Taken together, the code assigns 1 to cases only when they have no missing values.
crime2 <- crime2 %>%
mutate(mark = replace(mark, complete.cases(crime2), 1))
Finally, we keep only cases with no missing values. ‘filter()’ is used for selecting complete cases. If you are not familiar with this function, go to Creating a dataset of a sub-group.
crime2 <- crime2 %>%
filter(mark == 1)
We will use this newly created dataset in the remaining analyses.
housmedprice has a huge range (47500 – 2800000), which makes it a little bit complicated to interpret regression outputs. Therefore, reducing the range would be helpful. An easy way to achieve this goal is to divide the value by numbers. In this example, we divide it by 10,000. The following code performs this task and assigns a new variable label.
crime2 <- crime2 %>%
mutate(housmedprice = housmedprice/10000)
crime2$housmedprice <- set_label(crime2$housmedprice, label = "Median sale price of house ($10,000)")
Let’s examine the relationship between two continuous variables, median house prices (housmedprice) and sexual offence rates (sexoff). To compute correlation coefficients of two continuous variables, use ‘cor(data$variable1, data$variable2, method = “pearson”, use = “complete.obs”)
’. This shows a Pearson correlation coefficient based on complete cases (which has no missing values on two variables of your choice). The following codes compute the correlation coefficient of housmedprice and sexoff.
cor(crime2$sexoff, crime2$housmedprice, method = "pearson", use = "complete.obs")
## [1] -0.52149
The output shows that the correlation coefficient is -0.52149.
We visualise the relationship using ‘plot_scatter(data, independent, dependent)
’. We assume that median house prices influence sexual offence rates. Thus, housmedprice is an independent, and sexoff is a dependent variable. Thus, the following codes show a scatterplot of housmedprice and sexoff.
plot_scatter(crime2, housmedprice, sexoff, colors = "#8B1A1A88", dot.size = 3, fit.line = "lm")
Note that ‘colors
’ assign the colour of dots (I assigned a transparent colour in the above code so that we can easily notice overlapped dots), ‘dot.size
’ set the size of them, and ‘fit.line = “lm”
’ adds a linear fitted line to the scatterplot.
‘cor()
’ allows us to compute a correlation coefficient between only two variables. But what if we want to calculate correlation coefficients across many variables of our choice simultaneously? The correlation matrix could be an easy solution. It is a way of presenting multiple correlation coefficients in a single table. Variables are arrayed across the left (in the first column) and across the bottom (in the last row). Correlation coefficients for each relationship appear in the corresponding cell of the table.
To produce a correlation matrix, we need to create a new dataset (corr.crime) consisting of variables across which correlation coefficients are computed. In the following example, we calculated them across four variables: medage, unemploy, housmedprice, sexoff. Therefore, we select these variables from the complete-case dataset we made (crime2).
corr.crime <- crime2 %>%
select(medage, unemploy, housmedprice, sexoff)
Let’s check which variables are included in corr.crime.
names(corr.crime)
## [1] "medage" "unemploy" "housmedprice" "sexoff"
The output confirms that the variables we selected are included. It also shows the order of variables: medage is in the leftmost column, and sexoff is in the rightmost column. Next, we will change this order so that we can read correlation coefficients easily. sexoff (4th) should come first, then unemploy (2nd), then housmedprice (3rd), and finally medage (1st). The following code performs this task. ‘c(4, 2, 3, 1)
’ tells R this new order.
corr.crime <- corr.crime[,c(4,2,3,1)]
Now, let’s make a correlation matrix using ‘sjp.corr(data)
’.
sjp.corr(corr.crime)
## Computing correlation using pearson-method with listwise-deletion...
The output shows all the coefficients across the four variables of our choice. Also, colours tell the coefficient indirectly. Red colours indicate negative, and blue colours suggest positive correlations. The darker a colour is, the stronger the relationship is.
Regression analysis is a more advanced way to examine the relationship between two variables. Let’s examine the relationship between median house prices (housmedprice) and sexual offence rates (sexoff) again using a regression model. ‘lm(dependent ~ independent, data = data name)
’ is used for computing regression coefficients. Also, you need to assign a model name using ‘model name <-
’. In the following code, we assign a model name as model.1.
model.1 <- lm(sexoff ~ housmedprice, data = crime2)
After running this code, you do not see any R output. To see regression outputs, run ‘summary(model name)
’. It will show the output.
summary(model.1)
##
## Call:
## lm(formula = sexoff ~ housmedprice, data = crime2)
##
## Residuals:
## Min 1Q Median 3Q Max
## -184.6 -61.3 -17.5 55.5 348.4
##
## Coefficients:
## Estimate Std. Error t value Pr(>|t|)
## (Intercept) 267.818 12.446 21.52 < 0.0000000000000002 ***
## housmedprice -0.919 0.154 -5.99 0.000000037 ***
## ---
## Signif. codes: 0 '***' 0.001 '**' 0.01 '*' 0.05 '.' 0.1 ' ' 1
##
## Residual standard error: 87.6 on 96 degrees of freedom
## Multiple R-squared: 0.272, Adjusted R-squared: 0.264
## F-statistic: 35.9 on 1 and 96 DF, p-value: 0.0000000367
In the output, the intercept is 267.818, which means that sexual offence rates will be 267.8 if the median sale price of houses is $0. The coefficient of housmedprice is -0.919, which means that for each additional $10,000 in the median sale price of houses, sexual offence rates will decrease by 0.919. This negative effect of housmedprice is statistically significant at α = .05 because the p-value (0.000000037) is much less than .05. Thus, the regression equation of this model is \(sexoff = -.919 × housmedprice + 267.8\). The coefficient of determination (Multiple R-squared) is 0.272, which means that 27.2% of the total variance in sexual offence rates is explained by the median house price.
The R codes you have written so far look like:
################################################################################
# Lab 10: Correlations & Simple Regression
# 27/05/2019
# SOC830, SOCI702, SOCX830
################################################################################
# Load packages
library(dplyr)
library(sjlabelled)
library(sjmisc)
library(sjPlot)
# Avoid scientific notation
options(digits=5, scipen=15)
# Load datasets
crime <- readRDS("nsw-lga-crime.RDS")
# Creating a Dataset of Complete Cases
crime2 <- crime %>%
select(code, name, medage, unemploy, housmedprice, sexoff, region2, urban)
crime2 <- crime2 %>%
mutate(mark = 0)
crime2 <- crime2 %>%
mutate(mark = replace(mark, complete.cases(crime2), 1))
crime2 <- crime2 %>%
filter(mark == 1)
# Changing the Scale of Variables
crime2 <- crime2 %>%
mutate(housmedprice = housmedprice/10000)
crime2$housmedprice <- set_label(crime2$housmedprice, label = "Median sale price of house ($10,000)")
# Computing and Visualising Correlation Coefficients
cor(crime2$sexoff, crime2$housmedprice, method = "pearson", use = "complete.obs")
plot_scatter(crime2, housmedprice, sexoff, colors = "#8B1A1A88", dot.size = 3, fit.line = "lm")
# Producing a Correlation Matrix
corr.crime <- crime2 %>%
select(medage, unemploy, housmedprice, sexoff)
names(corr.crime)
corr.crime <- corr.crime[,c(4,2,3,1)]
sjp.corr(corr.crime)
# Simple Regression Analysis
model.1 <- lm(sexoff ~ housmedprice, data = crime2)
summary(model.1)


You can use this form through Camunda Tasklist by setting the formKey of a BPMN User Task to: embedded:app:forms/task-form-upload.html
embedded:app:forms/task-form-upload.html


Just roll the mouse over me.
Or me to see a color change.
Once upon a time there was a man who lived in a pizza parlor. This man just loved pizza and ate it all the time. He went on to be the happiest man in the world. The end.
Move the mouse over a paragraph.
Like this one or the one above.


| Name | Item Name | Item Price |
|---|---|---|
| Installation | Installation | $0.00 |
| Repair & Preventive Maintenance | Repair & Preventive Maintenance | $0.00 |
| Instrument relocation | Instrument relocation | $0.00 |
| MultiQuant data process and review | MultiQuant data process and review | $0.00 |
| Targetlynx data process and review | Targetlynx data process and review | $0.00 |


Create a Friend Account
This new acount will grant you access to a number of web based resources at the University of Michigan
By your use of these resources, you agree to abide by Responsible Use of Information Resources (SPG 601.07), in addition to all relevant state and federal laws.


Francis Geng
UC Berkeley, Class of 2023
EECS & Data Science
fgeng (at) berkeley.edu
Hello and welcome! My name is Francis Geng. Feel free to read below for more information about me, or take a look at my work experience, teaching, projects, and coursework.
For a quick summary of all of these, check out my resume or LinkedIn.
Skills
- Languages: Python, Java, SQL, Ruby, HTML/CSS, R
- Libraries: Pandas, scikit-learn, TensorFlow, PyTorch, Numpy, Matplotlib
Coursework
- In Progress (Fall 2021):
- CS 170: Efficient Algorithms and Intractable Problems
- CS 188: Artificial Intelligence
- EECS 126: Probability and Random Processes
- EECS 127: Optimization Models in Engineering
- Completed:
- CS 61A: Structure and Interpretation of Computer Programs (A+)
- CS 61B: Data Structures and Programming Methodology
- CS 70: Discrete Mathematics and Probability Theory
- EECS 16A/B: Designing Information Devices and Systems I/II (A)
- Data 100: Principles & Techniques of Data Science (A+)
- CS 370: Adaptive Instruction Methods in Computer Science (A+)
About Me
Hello! My name is Francis, and I am a EECS and Data Science student at UC Berkeley. (To be continued...)


{% extends "saas/base_dashboard.html" %} {% block body_top_template %} {% include "saas/_body_top_template.html" %} {% endblock %} {% block saas_title %} {% trans organization=organization.printable_name %}{{organization}} Payment Processor{% endtrans %} {% endblock %} {% block saas_content %}
You will be able to create charges and payout funds with this processor.
You will be able to create test charges using Stripe test credit cards.
If you already have a Stripe account, we recommend that you first login into your Stripe account before clicking the button below.
The configuration variables STRIPE_CLIENT_ID, STRIPE_PUB_KEY and STRIPE_PRIV_KEY are invalid. You will need to retrieve the StripeConnect ClientID, and the pair of publishable/private API keys for your Stripe account on stripe.com.
Once you have those keys, write them in the credentials configuration file and restart the server.
{% trans organization=organization.printable_name %}Connect a payment processor to create charges on behalf of {{organization}}.{% endtrans %}
{% endblock %}


BETA
This is a new service – your feedback will help us to improve it.
- Case #: NCL12384
- IP 8383
Cars R Us Ltd.
- 0188383
- Due on 10-12-2015
- Case #: NCL12384
- IP 1234
Some Random Company Ltd.
- 0188383
- Due on 10-12-2015
- Case #: NCL12384
- IP 1234
Bonker dogs Ltd.
- 0188383
- Due on 10-12-2015
- Case #: NCL12384
- IP 8383
Cars R Us Ltd.
- 0188383
- Due on 10-12-2015
- Case #: NCL12384
- IP 1234
Some Random Company Ltd.
- 0188383
- Due on 10-12-2015
- Case #: NCL12384
- IP 1234
Bonker dogs Ltd.
- 0188383
- Due on 10-12-2015
- Case #: NCL12384
- IP 8383
Cars R Us Ltd.
- 0188383
- Due on 10-12-2015
- Case #: NCL12384
- IP 1234
Some Random Company Ltd.
- 0188383
- Due on 10-12-2015
- Case #: NCL12384
- IP 1234
Bonker dogs Ltd.
- 0188383
- Due on 10-12-2015


My Account
Sign In
Register
Home
Rubber Conveyor
Add new item
×
Name:
Description:
Price:
Product Category
Rubber Conveyor
Connection of belts
Adhesion
Filter by Price
filter
Lenght
5m
10m
15m
20m
50m
-$20
Rubber conveyor belt (black, gumena, nova)
1000KM
$550KM
add to cart
new
Rubber conveyor belt (green, gumena, nova)
250KM
add to cart


.
Milenial Investment Account:
Fantasticio Romero Gutierrez
2100 23 24<PHONE_NUMBER>556
Money invested:
?€
Coeficient:
0.00
Current amount:
0.00


The LoggingSetup module automates the process of configuring an application
to use UIA events, and configures TI-RTOS modules to capture user-specified
information such as CPU Load, Task Load and Task Execution so that it can
be displayed by System Analyzer. It also automates the creation of
infrastructure modules such as loggers, the ServiceManager and RTA modules
to enable the capture and upload of the events over a user-specified
transport.
Both JTAG and Non-JTAG transports are supported.
The following configuration script demonstrates the use of the LoggingSetup
module in the XDC configuration file for the application:
Example 1: Configuring an application to use the default settings provided
by LoggingSetup. The following default settings are automatically applied:
Example 2: Use all the default settings of LoggingSetup, except use the
minimal footprint logger, LoggerMin. The following settings will be applied:
| enum LoggingSetup.LoggerType |
|
Enum of the type of loggers that can be used
values of type LoggingSetup.LoggerType
const LoggingSetup.LoggerType_MIN;
// LoggerMin - Minimal footprint logger
(JTAG only)
const LoggingSetup.LoggerType_STOPMODE;
// LoggerStopMode (JTAG only)
const LoggingSetup.LoggerType_JTAGRUNMODE;
// LoggerRunMode JTAG (c6x only)
const LoggingSetup.LoggerType_RUNMODE;
// LoggerRunMode ETHERNET upload
const LoggingSetup.LoggerType_IDLE;
// LoggerIdle - Upload in Idle loop
const LoggingSetup.LoggerType_STREAMER2;
// LoggerStreamer2 - Application manages
logger buffers
| enum LoggingSetup.TimestampSize |
|
values of type LoggingSetup.TimestampSize
const LoggingSetup.TimestampSize_AUTO;
// Use the logger's default timestamp size
const LoggingSetup.TimestampSize_NONE;
// No timestamps logged with events
const LoggingSetup.TimestampSize_32b;
// 32-bit timestamps
const LoggingSetup.TimestampSize_64b;
// 64-bit timestamps
| config LoggingSetup.benchmarkLogging // module-wide |
|
Enable logging of benchmark events
LoggingSetup.benchmarkLogging = Bool false;
DETAILS
If this is false, the events will be disabled. Otherwise the events
will be enabled.
| config LoggingSetup.countingAndGraphingLogging // module-wide |
|
Enable logging of counting and graphing events
LoggingSetup.countingAndGraphingLogging = Bool false;
DETAILS
If this is false, the events will be disabled. Otherwise the events
will be enabled.
| config LoggingSetup.cpuId // module-wide |
|
CPU ID to put in the packet header as the endpoint ID
LoggingSetup.cpuId = Int 0;
DETAILS
Not required for C6X or C7X devices (uses DNUM).
| config LoggingSetup.enableContextAwareFunctionProfiler // module-wide |
|
Enable System Analyzer's Context Aware Function Profiler
LoggingSetup.enableContextAwareFunctionProfiler = Bool false;
DETAILS
Setting to true enables function entry and exit logging
in order to generate function profiling information.
This requires that the compiler's function entry and exit
hook functions be enabled.
| config LoggingSetup.enableTaskProfiler // module-wide |
|
Enable System Analyzer's Task Profiler
LoggingSetup.enableTaskProfiler = Bool false;
DETAILS
Setting enableTaskProfiler to true enables task, hwi and swi
entry and exit logging in order to generate profiling
information
| config LoggingSetup.loadHwiLogging // module-wide |
|
Enable Hardware Interrupt (Hwi) event logging
LoggingSetup.loadHwiLogging = Bool false;
DETAILS
If this is false, the Hwi load events will be disabled.
Otherwise the events will be enabled.
Use the
loadLoggingRuntimeControl parameter
to determine whether the state can be modified during runtime.
| config LoggingSetup.loadLogger // module-wide |
|
User-created logger used for the Load module Log events
DETAILS
Leave null to have LoggingSetup automatically create
the loadLogger if required.
| config LoggingSetup.loadLoggerSize // module-wide |
|
Size (in MAUs) of the packet used to upload the Load module Log events
LoggingSetup.loadLoggerSize = SizeT 512;
| config LoggingSetup.loadLogging // module-wide |
|
Enable CPU load event logging
LoggingSetup.loadLogging = Bool true;
DETAILS
If loadLogging is false, CPU Load events will be disabled, otherwise the events
will be logged.
Use the
loadLoggingRuntimeControl parameter
to determine whether the state can be modified during runtime.
| config LoggingSetup.loadLoggingRuntimeControl // module-wide |
|
Specify whether load logging can be enabled / disabled at runtime
LoggingSetup.loadLoggingRuntimeControl = Bool false;
DETAILS
This determines what
Diags settings are
applied to the module's Diags mask.
If 'false', the Diags bits will be configured as
ALWAYS_ON, meaning they can't be changed at runtime. If 'true', the
bits will be configured as 'RUNTIME_ON'.
Use the
loadLogging parameter
to determine whether the event is ON or OFF. For example, the
following two lines set the Load module's events to 'ALWAYS_ON'.
LoggingSetup.loadLogging = true;
LoggingSetup.loadLoggingRuntimeControl = false;
| config LoggingSetup.loadSwiLogging // module-wide |
|
Enable Software Interrupt (Swi) event logging
LoggingSetup.loadSwiLogging = Bool false;
DETAILS
If this is false, the Swi load events will be disabled.
Otherwise the events will be enabled.
Use the
loadLoggingRuntimeControl parameter
to determine whether the state can be modified during runtime.
| config LoggingSetup.loadTaskLogging // module-wide |
|
Enable Task load logging
LoggingSetup.loadTaskLogging = Bool false;
DETAILS
If this is false, the Task load events will be disabled.
Otherwise the events will be enabled.
Use the
loadLoggingRuntimeControl parameter
to determine whether the state can be modified during runtime.
| config LoggingSetup.loggerType // module-wide |
|
Configures the type of logger to use
| config LoggingSetup.mainLogger // module-wide |
|
Logger used for application Log events
DETAILS
Leave null to have LoggingSetup automatically create
the mainLogger if required.
| config LoggingSetup.mainLoggerSize // module-wide |
|
Size (in MAUs) of packet used for application Log
events
LoggingSetup.mainLoggerSize = SizeT 1024;
| config LoggingSetup.mainLogging // module-wide |
|
Enable logging of application code
LoggingSetup.mainLogging = Bool true;
DETAILS
If mainLogging is false, application logging will be disabled, otherwise
it will be enabled. Use the
mainLoggingRuntimeControl parameter
to determine whether the state can be modified during runtime.
Together, these two configuration parameters will be used to
initialize the
xdc.runtime.Main Diags mask.
The table below shows the initial values of the
xdc.runtime.Main Diags mask settings, based on mainLogging and
mainLoggingRuntimeControl configuration. These settins only
apply to Diags masks that have not been set in the application's
configuration file. For example, this configuration code would
cause xdc.runtime.Main's USER1 Diags mask to be unaffected by
the settings of mainLogging and mainLoggingRuntimeControl:
Diags.setMaskMeta('xdc.runtime.Main', Diags.USER1, Diags.RUNTIME_ON);
Diags Mask Settings for xdc.runtime.Main
| | mainLoggingRuntimeControl |
| true | false |
| mainLogging | true | RUNTIME_ON |
ALWAYS_ON |
| false | RUNTIME_OFF | ALWAYS_OFF |
| config LoggingSetup.mainLoggingRuntimeControl // module-wide |
|
Specify whether application logging can be enabled / disabled
at runtime
LoggingSetup.mainLoggingRuntimeControl = Bool true;
DETAILS
This parameter, together with
mainLogging, determine the
initial
xdc.runtime.Diags settings applied to
xdc.runtime.Main.
If 'false' and
mainLogging is true, the diags bits will
be configured as ALWAYS_ON, meaning they can't be changed at runtime.
If 'true', the bits will be configured as 'RUNTIME_ON'.
Use the
mainLogging parameter
to determine whether the event is ON or OFF. For example, the
following two lines set the xdc.runtime.Main events to
initially be 'RUNTIME_ON'.
LoggingSetup.mainLogging = true;
LoggingSetup.mainLoggingRuntimeControl = true;
| config LoggingSetup.maxEventSize // module-wide |
|
For Snapshot events with loggers that support the writeMemoryRange API,
this specifies the maximum event size (in Maus) that
can be written with a single event. Must be less than or equal to
the logger's buffer size - 64
LoggingSetup.maxEventSize = SizeT 128;
DETAILS
The logger's writeMemoryRange API checks to see if the event size required to
write the block of memory is larger than maxEventSize. If so, it will
split the memory range up into a number of smaller blocks and log the
blocks using separate events with a common snapshot ID in order to
allow the events to be collated and the original memory block to be
reconstructed on the host.
| config LoggingSetup.memorySectionName // module-wide |
|
Memory section name for the buffer managed by the static instance
(default is null)
LoggingSetup.memorySectionName = String null;
DETAILS
By default the local 'dataMemory' in the platform is used (typically
SRAM or L2SRAM).
The available memory section names for your device can be determined by
either looking in the MEMORY CONFIGURATION section of the .map file
that is generated when you build your application or from the Platform
file that your application is using.
| config LoggingSetup.multicoreEventCorrelation // module-wide |
|
Set to true for multi-core applications
LoggingSetup.multicoreEventCorrelation = Bool false;
DETAILS
When set to true, the LoggingSetup module will automatically
include the
LogSync module. The LogSync module is
required for events from multiple CPU cores to be correlated with each other.
SEE
| config LoggingSetup.numCores // module-wide |
|
Number of cores running the same image with an instance in shared
memory
LoggingSetup.numCores = Int 1;
DETAILS
A common use case is to have the same binary image (e.g. .out file)
run on multiple cores of a multi-core device. This causes a problem if
the logger's buffers are in shared memory (e.g. DDR). Since the image is
the same for all the cores, each core will attempt to write to the same
buffer in the shared memory. To avoid this, either place the logger's
buffers in non-shared memory, or set the numCores parameter to
the number of cores on the device.
Note: Use the
bufSection along with the Program.sectMap to
place a logger instance's buffer into specific memory.
Setting numCores to a value greater than 1 signals the logger to
statically set aside additional memory ((x numCores), allowing each
core to have the logger's configured buffer size amount of memory.
Warning: Setting this parameter to a value greater than one should only
be done when there is a single image used on multiple cores of a
multi-core device AND the logger instance's buffer is in shared memory.
While functionally it will still work, memory will be wasted if both
these conditions are not met.
The default is 1, which means do not reserve any additional memory
for the logger.
| config LoggingSetup.profileLogging // module-wide |
|
Enable logging of function profiling events
LoggingSetup.profileLogging = Bool false;
DETAILS
If this is false, the events will be disabled. Otherwise the events
will be enabled.
| config LoggingSetup.snapshotLogging // module-wide |
|
Enable logging of snapshot events
LoggingSetup.snapshotLogging = Bool false;
DETAILS
If this is false, the events will be disabled. Otherwise the events
will be enabled.
| config LoggingSetup.syncLoggerSize // module-wide |
|
Size (in MAUs) of the logger used for the LogSync
modules' sync point events
| config LoggingSetup.sysbiosHwiLogging // module-wide |
|
Enable the SYSBIOS Hwi and Clock modules' event logging
LoggingSetup.sysbiosHwiLogging = Bool false;
DETAILS
If false, Hwi and Clock events will be disabled, otherwise the events
will be enabled.
Use the
sysbiosHwiLoggingRuntimeControl parameter
to determine whether the state can be modified during runtime.
| config LoggingSetup.sysbiosHwiLoggingRuntimeControl // module-wide |
|
Specify whether Hwi and Clock logging can be enabled / disabled at
runtime
LoggingSetup.sysbiosHwiLoggingRuntimeControl = Bool false;
DETAILS
This parameter, together with
sysbiosHwiLogging, determine the
initial
Diags settings applied to
the SYSBIOS Hwi and Clock modules. For example, the following two
lines set the Hwi and Clock modules' events to 'ALWAYS_ON'.
LoggingSetup.sysbiosHwiLogging = true;
LoggingSetup.sysbiosHwiLoggingRuntimeControl = false;
| config LoggingSetup.sysbiosLogger // module-wide |
|
Logger used for SYSBIOS modules' Log events
DETAILS
Leave null to have LoggingSetup automatically create
the sysbiosLogger if required.
| config LoggingSetup.sysbiosLoggerSize // module-wide |
|
Size (in MAUs) of the packet used for the TI-RTOS modules' Log events
LoggingSetup.sysbiosLoggerSize = SizeT 1024;
| config LoggingSetup.sysbiosSemaphoreLogging // module-wide |
|
Enable the SYSBIOS Semaphore module's event logging
LoggingSetup.sysbiosSemaphoreLogging = Bool false;
DETAILS
If false, Semaphore events will be disabled, otherwise the events
will be enabled.
Use the
sysbiosSemaphoreLoggingRuntimeControl parameter
to determine whether the state can be modified during runtime.
| config LoggingSetup.sysbiosSemaphoreLoggingRuntimeControl // module-wide |
|
Specify whether Semaphore logging can be enabled / disabled at runtime
LoggingSetup.sysbiosSemaphoreLoggingRuntimeControl = Bool false;
DETAILS
This parameter, together with
sysbiosSemaphoreLogging, determine the
initial
Diags settings applied to
the SYSBIOS Semaphore module. For example, the following code
initializes the Semaphore module's events to 'RUNTIME_OFF'.
LoggingSetup.sysbiosSemaphoreLogging= false;
LoggingSetup.sysbiosSemaphoreLoggingRuntimeControl = true;
| config LoggingSetup.sysbiosSwiLogging // module-wide |
|
Enable SYSBIOS Swi module's event logging
LoggingSetup.sysbiosSwiLogging = Bool false;
DETAILS
If false, Swi events will be disabled, otherwise the events
will be enabled.
Use the
sysbiosSwiLoggingRuntimeControl parameter
to determine whether the state can be modified during runtime.
| config LoggingSetup.sysbiosSwiLoggingRuntimeControl // module-wide |
|
Specify whether Swi logging can be enabled / disabled at runtime
LoggingSetup.sysbiosSwiLoggingRuntimeControl = Bool false;
DETAILS
This parameter, together with
sysbiosSwiLogging, determine the
initial
Diags settings applied to
the SYSBIOS Swi module. For example, the following two
lines initialize the Swi module's events to 'RUNTIME_OFF'.
LoggingSetup.sysbiosSwiLogging = false;
LoggingSetup.sysbiosSwiLoggingRuntimeControl = true;
| config LoggingSetup.sysbiosTaskLogging // module-wide |
|
Enable the SYSBIOS Task module's event logging
LoggingSetup.sysbiosTaskLogging = Bool true;
DETAILS
If false, Task events will be disabled, otherwise the events
will be enabled.
Use the
sysbiosTaskLoggingRuntimeControl parameter
to determine whether the state can be modified during runtime.
| config LoggingSetup.sysbiosTaskLoggingRuntimeControl // module-wide |
|
Specify whether Task logging can be enabled / disabled at runtime
LoggingSetup.sysbiosTaskLoggingRuntimeControl = Bool true;
DETAILS
This parameter, together with
sysbiosTaskLogging, determine the
initial
Diags settings applied to
the Task module. For example, the following two
lines initialize the Task module's events to
'ALWAYS_ON'.
LoggingSetup.sysbiosTaskLogging = true;
LoggingSetup.sysbiosTaskLoggingRuntimeControl = false;
| config LoggingSetup.timestampSize // module-wide |
|
Size of the timestamps logged with the events. Set to TimestampSize_NONE
to disable timestamps