Using Crosswalk screen APIs
There are many challenges when developing HTML5 applications for mobile devices. One of the biggest is making the application work well on a small screen, with the same look and feel as a native application. Some of the most common screen-related issues on mobile devices are:
- Fitting the application to the "real" screen width and height.
- Locking the screen orientation to the one preferred for the application.
- Showing an application in fullscreen mode with no system toolbars.
- Using different layouts or assets depending on screen size.
- Showing a launch screen while an application is loading.
A number of solutions for such issues have surfaced over the last few years, either as de facto "standards" (e.g. the <meta name="viewport">
element), vendor-specific browser extensions (e.g. Mozilla's implementation of screen.lockOrientation), or application-specific work-arounds in JavaScript and CSS (e.g. this rotation hack). Recently, work has started on creating formal standards based on these interim solutions. However, many browsers and web views lag behind these standards.
By contrast, one major benefit of Crosswalk is that many of these evolving standards are implemented and available for use right now. In this article, I'll describe how to resolve some of the issues listed above using Crosswalk by optimising a simple side-scrolling HTML5 game for mobile screens.
Aside: measuring the screen in HTML5 applications
One major complexity when working with HTML5 and CSS is figuring out how CSS pixels and physical pixels on the screen relate to each other. For the purposes of this article, I've glossed over these issues, as they can mostly be ignored if you aren't too concerned about how consistent a game appearson different devices. However, there are other situations where it is important to understand these nuances; for example, if you want your game to look identical on different devices, you will have to pay attention to screen densities.
To help in these situations, the screen measurements page explains the terminology, including units and measurements, which are relevant when dealing with heterogenous screens in detail.
You may also find it useful to refer to this article about working with the <canvas>
element on HiDPI (aka retina) displays.
The game
The game used in this article is a side-scrolling dodge game set in space. The code is available on github.
The layout of the game looks like this (shown in a Chrome browser on a Linux desktop machine):
The container element for the whole game is sized using CSS, and is 750 pixels across by 450 pixels down. It is positioned relative to the top-left of the browser window.
Inside the container are a

for the game screen, consisting of a controls

on the left and a <canvas>
for the play area on the right; and another

for the "game over" screen, which is initially hidden.
The controls

is sized relative to the container, and take up 20% of its width (150px) and 100% of its height (450px). The elements inside the controls area are positioned using the CSS flexbox. The CSS flexbox is the first example of a useful feature which is available in Crosswalk, but not in older browsers. It's very handy for laying out game controls, as you can vertically and horizontally align elements inside a flex element.
<canvas>
elements have to have a pixel width and height specified for them (you can't size them in CSS). For this first version of the game, the <canvas>
is sized to 600 pixels across and 450 pixels down. This is then put in the right-hand side of the game screen.
The sprites for the ship and the asteroids are loaded from PNG graphic files and drawn to the canvas. If you are unfamiliar with how to do this, see this <canvas>
tutorial.
The gameplay is nothing special, but is just there to demonstrate the effect of applying various screen-related techniques to the game. The game is touch-enabled, though, so it will work on a touchscreen devices like phones.
Notes on the game layout
The layout elements in the HTML file index.html
:
<!DOCTYPE html>

<meta charset="utf-8">
<title>space dodge game</title>
<link rel="stylesheet" href="base.css">

Score

<canvas id="play-area" width="600" height="450"></canvas>

<button id="restart">Restart</button>

The CSS stylesheet:
* {
user-select: none;
-webkit-user-select: none;
user-drag: none;
-webkit-user-drag: none;
}
body {
margin: 0;
}
#container {
position: relative;
top: 0;
left: 0;
width: 750px;
height: 450px;
}
#game-screen, #finish-screen {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #11F;
}
#finish-screen {
z-index: 100;
}
#play-area {
float: right;
width: 80%;
}
#controls {
height: 100%;
width: 20%;
padding: 5%;
text-align: center;
box-sizing: border-box;
float: left;
}
.vbox {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
p, button {
font-family: sans-serif;
font-size: 1.5em;
}
#control-up, #control-down {
margin: 1em 0;
}
#finish-screen > * {
text-align: center;
}
#score, #final-score {
color: white;
}
[data-visible="false"] {
display: none !important;
}
Some remarks about the code:
The margins are removed from the
body
element with:body { margin: 0; }
This makes it easier to do accurate positioning and sizing of elements inside the body.
The outer element with ID
container
contains all of the other game elements. Its size is sets in CSS, which constrains the size of the whole game.There are two separate "screens" inside the container (elements with the IDs
game-screen
andfinish-screen
).finish-screen
is hidden initially, but is placed on top ofgame-screen
by setting az-index
of 100. When the game ends,finish-screen
is shown, which obscures thegame-screen
element underneath it.<canvas>
elements must have their height and width attributes set to define the size of the canvas in pixels. This can't be done in CSS. In the code above, the height and width are fixed; but they can be set dynamically based on the size of the screen (see later).The container has
position: relative
set in the CSS, and the child screens haveposition: absolute
. This enables the child screens to be aligned with the top-left corner of the container.float
properties are used to position the controls to the left of the canvasplay-area
.
The HTML and CSS for the game so far are naive, representing a first pass at a working layout. There is plenty of room for optimisation and improvement.
Running it yourself
If you are interested in following along with the article, rather than just looking at screenshots, you can checkout the project and build an Android package for it by following the steps below.
Download the latest stable Crosswalk Android bundle:
$ wget https://download.01.org/crosswalk/releases/crosswalk/android/stable/${XWALK-STABLE-ANDROID-X86}/crosswalk-${XWALK-STABLE-ANDROID-X86}.zip
If you want to run the version of the game designed to work with Crosswalk 8, fetch one of the Crosswalk Android canary bundles from the download page.
Unzip the bundle, e.g. on Linux:
$ unzip crosswalk-${XWALK-STABLE-ANDROID-X86}.zip
Check out the code for the Crosswalk samples from github:
$ git checkout https://github.com/crosswalk-project/crosswalk-samples.git
The game used in this tutorial is in the
space-dodge-game
directory.Use
make_apk.py
to build a Crosswalk package from the checked-out crosswalk-samples project:$ cd crosswalk-${XWALK-STABLE-ANDROID-X86} $ python make_apk.py --manifest=/path/to/crosswalk-samples/space-dodge-game/<version>
Replace
<version>
with whichever version of the game you want to run;master
is the version of the game before optimisation, and there are four other versions for different Crosswalk versions and techniques. See theREADME.md
file in thespace-dodge-game
directory for details.Once you have built a package for the game, you can deploy it to Android using
adb
:$ adb install space_dodge_game_<IP_ADDRESS>_x86.apk
or
$ adb install space_dodge_game_<IP_ADDRESS>_arm.apk
depending on your target hardware.
For more details about building and running Crosswalk applications on Android, see the Getting started pages.
Issue 1: The game sometimes displays in portrait orientation
If the game is packaged and deployed to a small screen device in its initial state, this is what it looks like:
It's obvious that it doesn't take up enough of the screen. The reason is that the game is in portrait orientation, when it should be in landscape. By rotating the device (so the game rotates), you can see an immediate improvement:
However, the game shouldn't accidentally rotate if the screen orientation changes, as it does at the moment: it should always display in landscape mode.
Crosswalk provides an easy fix for this, as it implements the Screen Orientation API. Among other things, this enables an application to lock itself to a particular orientation at run time.
To use this, add the following code to the main JavaScript entry point for your application. This depends on the application, but for the space dodge game, it's at the top of the main.js
file, triggered once the DOM is ready:
document.addEventListener('DOMContentLoaded', function () {
// check whether the runtime supports screen.lockOrientation
if (screen.lockOrientation) {
// lock the orientation
screen.lockOrientation('landscape');
}
// ...rest of the application code...
};
If you run the application now, you'll notice that the game rotates to landscape when it starts. Its appearance is the same as if the physical device were rotated to landscape. An application can also be locked to portrait orientation using this approach (screen.lockOrientation('portrait')
).
If you prefer, there are a couple of other ways to fix an application's orientation:
Use the
orientation
field in the manifest (this only works for Crosswalk 8 or later).For example, the following manifest would force the application to landscape orientation:
{ "name": "space_dodge_game", "version": "<IP_ADDRESS>", "start_url": "index.html", "orientation": "landscape" }
You could then build an application package for Android from this manifest with:
$ python make_apk.py --manifest=/projects/space_dodge_game/manifest.json
Install it on an Android target as described in the Getting started pages.
Using the
orientation
field in the manifest has exactly the same effect as usingscreen.lockOrientation
in your application code: the application rotates to the requested orientation after the application starts. Butscreen.lockOrientation
has the advantage of being supported by other runtimes (e.g. Firefox OS), so may be a better choice if you need your application to work cross-platform.The
orientation
manifest field is defined in the W3C Manifest for web application specification.Use the
--orientation
option when runningmake_apk.py
. Note that this won't work unless you are usingmake_apk.py
to package your application. If you're using the embedding API, usescreen.lockOrientation
or the manifest approach.For example:
$ python make_apk.py --manifest=/projects/space_dodge_game/manifest.json \ --orientation=landscape
This is really a hack, as it actually modifies the
AndroidManifest.xml
to rotate Crosswalk itself, rather than the application being rotated by Crosswalk. But it's a viable alternative for older versions of Crosswalk which don't support theorientation
field in the manifest and where you prefer not to usescreen.lockOrientation
.This also has the same effect as using the
orientation
field, rotating the application after it has started.The
orientation
manifest field is defined in the W3C Manifest for web application specification.
Issue 2: The status bar is distracting
The next issue is that the toolbar is still visible, which is a distraction while playing a game. There are two ways to make the application occupy the whole screen, hiding the status bar (on Android):
Use the
display
field inmanifest.json
(this only works for Crosswalk 8 or later).For example, here's a manifest which sets fullscreen, and also retains the landscape orientation applied in the previous step:
{ "name": "space_dodge_game", "version": "<IP_ADDRESS>", "start_url": "index.html", "display": "fullscreen", "orientation": "landscape" }
Build and deploy to the device as usual.
The
display
manifest field is defined in the W3C Manifest for web application specification.Use the
--fullscreen
option with themake_apk.py
script.For example:
$ python make_apk.py --manifest=/projects/space_dodge_game/manifest.json \ --orientation=landscape --fullscreen
This is a useful option if you are using an older version of Crosswalk which doesn't support the
display
field in the manifest. See the Getting started pages for more information about usingmake_apk.py
.
Using either the display
field or the --fullscreen
option has the same effect: the application displays in fullscreen, hiding the system status bar on Android:
You may be familiar with the fullscreen API, which enables an application to request that all or part of its user interface occupy the whole device screen. However, the fullscreen API has a different purpose from the approaches covered above: it requires some user activity to trigger the fullscreen request after an application is running.
In the case of a Crosswalk application, you can use the fullscreen API, providing the user interacts with the application (e.g. push a button or make a gesture) to trigger the fullscreen request. But it is not possible to automatically make the application go fullscreen without user interaction using this API.
Issue 3: The game doesn't fit the screen
The game is now consistently bigger because it's always displayed fullscreen and in landscape orientation. But there's a lot of whitespace around it, and it's not visually appealing. It would be nicer if the game fitted the whole screen.
The area occupied by the application is called its viewport. On a mobile device, this is the area under or between any toolbars on the screen (e.g. the status bar on Android) if the application is running in "windowed" mode; or the whole device screen if it is running in "fullscreen" mode. What we're aiming for here is "fullscreen" mode, to get the game to fill the whole of the device screen.
There are a few approaches we could take:
Scale the application to fit the smallest dimension (width or height), keeping aspect ratio and centering it in the viewport. The game has the same number of pixels, but they are scaled to fit into the viewport.
Do the same as above, but instead of scaling, physically change the size of all the game elements. This would make the canvas larger (in pixels) on a large screen and smaller on a small screen. The disadvantage of this approach is that you have to scale the image assets used in the game to ensure that they keep the same proportions: for example, if you have an image which is 40px square on a 400px square game area, then change the game canvas to 600px square, you will have to scale the image to 60px square. The advantage of this approach is that you're not scaling everything, just sprites; but the disadvantage is that it's more complicated to implement, as you have to track the size of the sprites (on screen) in isolation from their actual size (in the file).
Change the dimensions of the game, while keeping the size of the
<canvas>
the same. The area occupied by the game could be made physically larger, and perhaps make the controls larger too, while leaving the<canvas>
element the same size. The reason for doing this is that the<canvas>
is sensitive to size changes, as described in the previous bullet point.
For this game, the canvas is already too big for small screens, so the third approach is not really practical. (That approach only works if you know your game is only going to be played on a small range of screens, which can all fit the canvas at the size you specify. Similar to how old PC games were designed to fit devices with at least a 640x400 pixel screen, which was the size of most mid range monitors.)
This leaves approaches 1 and 2, which are covered shortly. However, before getting onto those, there is a preparatory step which helps with measuring the actual size of the screen, making it more consistent between devices.
Preparation: Make the viewport fit the screen
A few years ago, when designing mobile phones, manufacturers realised that if 90% of websites were shown in a small screen, they would not fit. This is because websites used to be designed primarily for desktop screens; mobile sites were often separate from the main site, with reduced functionality or even written in a different markup language. But users wanted to be able to access the "real" website from a phone, rather than a mobile-specific site; and they wanted to do this without compromising the site's appearance. Manufacturers resolved this by equipping their mobile browsers with a default "zoom out", to make websites intended for desktops display (reasonably) well in mobile browsers. Most phone browsers still work this way: for example, the HTC One X I have for testing reports its width as 980px, while its actual physical width is 360px.
Around the same time, web developers and designers changed their approach, designing websites which would display differently depending on device capabilities. These techniques are now known as responsive web design, and encompass a range of approaches including use of media queries and delivering different images to different screens. Contemporary developers also often employ a mobile first philosophy, ensuring a website is highlighy functional first and foremost on small form factors, with added bells and whistles (typically, more and larger graphics) on bigger form factors.
Where these two roads meet is at an awkward crossroads: developers are trying hard to provide sites tailored specifically for small screen devices; but small screen devices apply an artificial zoom which makes device screens appear larger than they are. As a result, the mobile version of a site could be bypassed (the site calculates that it is being viewed on a desktop browser); and the desktop site end up being delivered to a screen that is too small to display it properly.
A solution was initially developed by Apple, taking the form of an ad hoc HTML <meta>
element named viewport
. This could be used to ask a mobile browser to change various aspects of its viewport. For example, the page could ask the browser to set the viewport width to the device's real physical width with:
<meta name="viewport" content="width=device-width">
Or prevent the user zooming the page in and out (e.g. with pinch gestures):
<meta name="viewport" content="width=device-width, user-scalable=no">
Other vendors followed suit and added support for this <meta>
viewport element to their browsers.
By using the <meta>
viewport element, a developer could now prevent the browser from applying its default zoom to an HTML page. This would in turn mean that a web site or app could get a correct reading for the device's physical screen dimensions, enabling media queries to be applied accurately to select the best CSS for the screen.
The <meta>
viewport element is not a standard: it is not implemented consistently across browsers, and the syntax for declaring its content also varies between browsers. However, there are currently attempts to formalise viewport rules in a CSS specification. For now, though, the existing syntax works well for Crosswalk, and can be used as a stop-gap.
To apply a viewport meta element to the space dodge game in this article, add it to the
of the index.html
file. This instructs the browser to use its physical width as the viewport width, without zooming:
<!DOCTYPE html>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>space dodge game</title>
<link rel="stylesheet" href="base.css">

... rest of HTML file ...
The result is this:
Note how the game is now filling the whole screen, and looks roughly the right size: the buttons are nice and big, and the graphics clear. However, the screen size on this device is 640px wide by 360px down, so the game canvas is spilling over the edges of the screen.
By contrast, it doesn't take up enough space on a larger screen. Here it is on a Nexus 7:
In the next sections, I describe two ways to alter the size of the game to fit better into the screen.
Approach 1: Scale the game
The aim here is to scale the whole game (in CSS) so that it retains its aspect ratio but fits in the screen. The first step is to figure out the optimum position and size for the element which contains the whole game.
Here is the algorithm in pseudo-code:
Find the width and height of the viewport (which is the same as the screen dimensions, thanks to the viewport meta applied previously).
Find the width and height of the application container.
Find the ratio of viewport height to container height (scaleHeight).
Find the ratio of screen width to container width (scaleWidth).
Choose the smallest of scaleHeight and scaleWidth, and use this as the scale factor for both width and height (scaleBoth).
Work out the newHeight and newWidth of the container by multiplying its width and height by scaleBoth.
Work out a top and left offset for the container, as follows:
- left = (1 / scaleBoth) * ((viewport width - container newWidth) / 2)
- top = (1 / scaleBoth) * ((viewport height - container newHeight) / 2)
Note that the offsets are being scaled, so that they are in proportion to the scaled game.
Apply the scaling and offsets to the whole game container using CSS transforms.
By implementing this pseudo-code in JavaScript, a scale can be applied to the whole container:
var scale = function () {
var container = document.querySelector('#container');
var containerWidth = container.offsetWidth;
var containerHeight = container.offsetHeight;
var viewportWidth = document.documentElement.clientWidth;
var viewportHeight = document.documentElement.clientHeight;
var scaleWidth = viewportWidth / containerWidth;
var scaleHeight = viewportHeight / containerHeight;
var scaleBoth = (scaleHeight < scaleWidth) ? scaleHeight : scaleWidth;
var newContainerWidth = containerWidth * scaleBoth;
var newContainerHeight = containerHeight * scaleBoth;
var left = (viewportWidth - newContainerWidth) / 2;
left = parseInt(left * (1 / scaleBoth), 10);
var top = (viewportHeight - newContainerHeight) / 2;
top = parseInt(top * (1 / scaleBoth), 10);
// scale the whole container
var transform = 'scale(' + scaleBoth + ',' + scaleBoth + ') ' +
'translate(' + left + 'px, ' + top + 'px)';
container.style['-webkit-transform-origin'] = 'top left 0';
container.style['-webkit-transform'] = transform;
container.style['transform-origin'] = 'top left 0';
container.style['transform'] = transform;
};
window.onresize = scale;
scale();
To give an example of the CSS transforms which will be applied, consider the case where the scale is 2.05 and the top and left offsets are 0px and 40px respectively. The resulting CSS transforms would be:
-webkit-transform-origin: 0 0 0;
transform-origin: 0 0 0;
-webkit-transform: scale(2.05, 2.05) translate(40px, 0px);
transform: scale(2.05, 2.05) translate(40px, 0px);
Setting the transform origin to top left 0
ensures that the transforms are applied from the top-left corner of the container. The scale(2.05, 2.05)
function changes the scaling of the container; and the translate(40px, 0px)
function moves the container to the correct position on screen (40 pixels from the left-hand edge). Here's the result on a ZTE Geek:
Notice how the application is fitted vertically, then centered horizontally.
This approach is good because it is simple. However, as the scaling is applied to the whole application, it can cause some blurring, especially when scaling up. The next section describes a more complex alternative which uses resizing plus selective scaling of game assets.
Approach 2: Resize the game
This approach requires a more extensive reworking of the CSS for the game, as it affects the positioning, size and appearance of every element. It's tempting to ignore this approach, as the scaling approach of the previous section works pretty well. But there's actually good discipline involved in making this alternative approach work.
The first step is to make the container occupy the whole screen. In the olden days, this would have meant measuring the screen, then manually setting the width and height CSS properties of the container (in JavaScript). However, Crosswalk supports a handy CSS feature which means you don't have to do this any more: viewport-percentage lengths. These allow you to specify the dimensions of elements in terms of a percentage of the viewport dimensions. As the application is now fullscreen, the viewport fills the whole screen; so the container can fill 100% of the device's height and width using this CSS rule:
#container {
position: relative;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
}
Note the vw
(viewport percentage width) and vh
(viewport percentage height) suffixes to the container's width and height settings. Here's what the game looks like on a ZTE Geek with this change to the container sizing:
Not bad for a first pass. But the bottom of the canvas has disappeared off-screen; and the buttons look squashed. We'll fix this in a minute.
Note that viewport-percentage lengths don't work well for testing in a desktop browser, as desktop environments often have toolbars on the browser and on the desktop itself. This means that the viewport height can be considerably larger than the amount of space inside the browser window. However, you could try experimenting with Chrome's device emulation support if you want a quick way to test your app without a mobile or tablet.
At this point in testing, I realised something. When I first wrote the game, I concentrated on getting it to look right in a desktop browser. This meant that I didn't necessarily do everything "properly". For example, with a fixed width container, I could arrange the control buttons easily: setting a few margins and a bit of padding seemed to work.
However, once I started thinking about resizing everything, it became clear that I hadn't done things the "right way". I needed to make some fixes so that the buttons and score would be positioned and sized correctly. This could be done easily in CSS, without having to resort to JavaScript.
I changed this rule:
#control-up, #control-down {
margin: 20% 0;
}
to:
#control-down {
margin: 0.5em 0 0 0;
}
(set the top margin of the "down" button to a fixed amount so it stays close to the "up" button").
I also changed this rule:
#controls {
height: 100%;
width: 20%;
padding: 5%;
text-align: center;
box-sizing: border-box;
float: left;
}
to:
#controls {
height: 100%;
width: 20%;
padding: 0.5em;
text-align: center;
box-sizing: border-box;
float: left;
}
(padding changed from 5%
to 0.5em
). This fixes the spacing of the controls so that they stay a reasonable distance apart as the screen size changes.
Here's the result:
The buttons now look right, but the canvas is too tall for the screen (remember, its pixel height is set as an attribute on the canvas, not in CSS). This currently means you can move the spaceship off the bottom of the screen. The canvas needs to be resized to fit in the space to the right of the controls, while maintaining its aspect ratio.
To do this, I applied the technique from the previous section, where I scaled the whole game to fit the screen. But in this case, just the canvas is scaled to fit into the area to the right of the controls. In addition, the canvas scaling should be done using its width and height attributes, rather than scaling it in CSS. (This is a bit confusing, as the height and width attributes of a canvas are different from the CSS height and width of its <canvas>
element.)
First, I added a new parent element for the canvas (the

with ID play-area-container
below):

Score

<canvas id="play-area" width="600" height="450"></canvas>

<button id="restart">Restart</button>

I modified the CSS so it's play-area-container
and not play-area
which is sized to fit the right-hand section of the game by changing:
#play-area {
float: right;
width: 80%;
}
to:
#play-area-container {
float: right;
width: 80%;
height: 100%;
}
#play-area {
position: relative;
box-sizing: border-box;
border: 2px solid darkblue;
}
I added a border to play-area
so you can see where the play area really is, as it now won't necessarily fill its parent. This allows the player to see where the asteroids are going to come from (it might not be the right-hand edge of the screen any more). I also changed play-area
to use position: relative
, so it can be positioned relative to its parent (i.e. play-area-container
).
Then I used a variant of the scale algorithm from the previous section to fit the canvas into the play-area-container
:
// the canvas element
var playArea = document.querySelector('#play-area');
// factor by which to modify canvas width and height
var scaleCanvas = 1;
var fitCanvas = function () {
var container = document.querySelector('#play-area-container');
var containerWidth = container.offsetWidth;
var containerHeight = container.offsetHeight;
var playAreaWidth = playArea.width;
var playAreaHeight = playArea.height;
var scaleWidth = containerWidth / playAreaWidth;
var scaleHeight = containerHeight / playAreaHeight;
scaleCanvas = (scaleHeight < scaleWidth) ? scaleHeight : scaleWidth;
var newPlayAreaWidth = playAreaWidth * scaleCanvas;
var newPlayAreaHeight = playAreaHeight * scaleCanvas;
var left = (containerWidth - newPlayAreaWidth) / 2;
var top = (containerHeight - newPlayAreaHeight) / 2;
// resize and position the canvas
playArea.width = parseInt(newPlayAreaWidth, 10);
playArea.height = parseInt(newPlayAreaHeight, 10);
playArea.style.top = top + 'px';
playArea.style.left = left + 'px';
};
window.onresize = fitCanvas;
fitCanvas();
Note that this changes the canvas width and height attributes then positions it, rather than scaling the canvas in CSS.
This is the result on a ZTE Geek (canvas size is "shrunk" to 480px by 360px):
Resize the sprites
One side-effect of changing the canvas size is that the sprites are no longer in the same proportions as they were. Previously, the canvas was 600px wide and 450px high; the sprite for the spaceship is 75px wide by 44px tall, which is 12.5% of the canvas width and 10% of its height. But now the canvas size has changed; and the spaceship is now 16% of the width of the canvas and 12% of its height (i.e. it is relatively larger). This makes the game harder, as the asteroids will reach the ship sooner (they haven't got so far to travel). Conversely, on a large screen, the game is too easy: the spaceship takes up less of the canvas and the asteroids are further away.
The solution is to draw the images onto a larger area of the canvas, so that their dimensions are always in the same ratio to the canvas dimensions. In the previous code fragment, I laid the foundation for this by recording the canvas scale factor in a variable outside the fitCanvas()
function:
// factor by which to modify canvas width and height
var scaleCanvas = 1;
After the first call to fitCanvas()
, scaleCanvas
is set to the canvas scale factor. To scale the sprites up, we can apply the same factor to the size of the sprites when they are drawn. In the code for the game, the images were previously written to the canvas like this:
ctx.drawImage(image, x, y, image.width, image.height);
(ctx
is the canvas' 2D context)
This code can be modified as follows to draw the image at the correct scale:
ctx.drawImage(
image,
x,
y,
image.width * scaleCanvas,
image.height * scaleCanvas
);
The result is as follows (on the ZTE Geek again):
Compare with the previous screenshot and you should be able to see that the ship and asteroids are slightly smaller in this screenshot (80% of the size of the previous one).
The distances moved by the game objects are described in terms of multiples of their height (each control press moves the ship three times its own height per second, and asteroids move 3-5 times their width per second). This means that there is no need to modify any of the movement code, providing the scaled heights and widths are used in the calculations, for example:
// the ship height on screen is the Image height of the
// loaded graphics file * the canvas scale factor
var shipHeight = shipImg.height * scaleCanvas;
// get the number of seconds since the last animation frame
var timeDelta = (currentTime - lastTime) / 1000;
// calculate movement on the y axis;
// the player moves three times their own height per second;
// direction = 1 for down, -1 for up
var moveY = direction * shipHeight * timeDelta * 3;
Any other code which refers to the height and width of the sprites (such as the code for collision testing) will also have to apply the canvas scale. The simplest approach is to add functions for fetching the scaled height of the ship and the asteroids, then using those whenever the height and width of an Image
object are required. For example:
// img is an Image object loaded with a ship or asteroid graphics
// file
function getImgWidth(img) {
return img.width * scaleCanvas;
}
function getImgHeight(img) {
return img.height * scaleCanvas;
}
The movement code could then be rewritten as:
// get the number of seconds since the last animation frame
var timeDelta = (currentTime - lastTime) / 1000;
// calculate movement on the y axis;
// the player moves three times their own height per second;
// direction = 1 for down, -1 for up
var moveY = direction * getImgHeight(shipImg) * timeDelta * 3;
Depending on the game and the environment, it may be possible to cache the width and height calculations. However, you have to be careful with this, ensuring that you invalidate the cached values if canvasScale
changes (for example, if you resize the game when the window size changes). In my code, fitCanvas()
is called each time the onresize
event fires on the screen. This happens at least twice on a mobile device, while Crosswalk locks the screen orientation to landscape. For this reason, and to keep things simple, I dynamically get the height and width of the image each time, as this is relatively inexpensive for the two images I'm using.
Issue 4: Sprites blur on large screens
Having applied the lessons in the previous section, one other possible issue is the potential for blurring due to scaling. If you take a close look at this image:
you may notice that it appears blurry. This image was copied from a screenshot of a large browser window, where the sprite graphic was being scaled up to twice its original size, making it blur.
One solution is to provide a larger graphic which can scale with less blurring, and use this graphic when the canvas is scaled up (scaleCanvas > 1
). The src
attribute of the ship and asteroid Image
objects can then be set inside the fitCanvas()
function, depending on scaleCanvas
:
// player ship image (to draw onto canvas)
var ship = new Image();
// asteroid image (to draw onto canvas)
var asteroid = new Image();
// the canvas element
var playArea = document.querySelector('#play-area');
// factor to modify canvas width and height by
var scaleCanvas = 1;
var fitCanvas = function () {
var container = document.querySelector('#play-area-container');
var containerWidth = container.offsetWidth;
var containerHeight = container.offsetHeight;
var playAreaWidth = playArea.width;
var playAreaHeight = playArea.height;
var scaleWidth = containerWidth / playAreaWidth;
var scaleHeight = containerHeight / playAreaHeight;
scaleCanvas = (scaleHeight < scaleWidth) ? scaleHeight : scaleWidth;
var newPlayAreaWidth = playAreaWidth * scaleCanvas;
var newPlayAreaHeight = playAreaHeight * scaleCanvas;
var left = (containerWidth - newPlayAreaWidth) / 2;
var top = (containerHeight - newPlayAreaHeight) / 2;
// resize and position the canvas
playArea.width = parseInt(newPlayAreaWidth, 10);
playArea.height = parseInt(newPlayAreaHeight, 10);
playArea.style.top = top + 'px';
playArea.style.left = left + 'px';
// use a double-sized image if the canvas is being scaled up
if (scaleCanvas > 1) {
ship.src = 'rocket2x.png';
asteroid.src = 'asteroid2x.png';
// reset the scale so that the double-sized images are scaled
// down to the same size as the original image
scaleCanvas /= 2;
}
// otherwise use the original-sized image
else {
ship.src = 'rocket.png';
asteroid.src = 'asteroid.png';
}
};
window.onresize = fitCanvas;
fitCanvas();
Compare the double-sized image when scaled down slightly (on the left) with the smaller image scaled up to twice its original size (on the right):
As you can see here, the large image scaled down is far less blurry than the small image scaled up.
Depending on how large the images are, it might make sense to use larger images at all scales. But if you are trying to keep the size of the assets down, using different images for different scales may be a more viable approach.
Issue 5: We need a launch screen
Applications can sometimes take a while to load, due to network latency and/or sheer size and number of resources. This problem gets worse as the application grows and is especially problematic for games, where there are often a large number of graphical, audio and video assets in use. In such cases, a common technique is to show a screen with introductory images or text while the resources are loading, commonly known as a "loading" or "launch" screen. Frameworks often provide APIs to support this, or developers may add their own code to handle it.
Crosswalk 8 and later provides baked-in support for launch screens, via an xwalk_launch_screen
in the application manifest. This enables you to set background and foreground images and colours, differentiated according to screen orientation and pixel density if desired, with little or no programming. Full details of its capabilities are on the launch screen page.
The steps below explain how to add a launch screen to the example game.
First, add a foreground image
fg.png
. This is a simple graphic composed of the name of the game plus the rocket sprite, with a transparent background (I've added a blue background to the graphic here so the white letters show up):I made the image relatively small (320px by 240px), as it should fit small mobile screens.
To activate the launch screen, add an
xwalk_launch_screen
field to themanifest.json
file:{ "name": "space_dodge_game", "version": "<IP_ADDRESS>", "start_url": "index.html", "orientation": "landscape", "display": "fullscreen", "xwalk_launch_screen": { "ready_when": "custom", "landscape": { "background_color": "#11f", "image": "fg.png" } } }
The
ready_when
property specifies when to stop showing the launch screen. By setting this tocustom
, the launch screen can be closed programmatically once all the assets are loaded. This is the typical mode you would want to use for launch screens in an HTML5 game, as you will often be doing some initialisation work in JavaScript before the game is usable. In the next step, we'll add the code which does this.The
landscape
property specifies the background colour andimage
(foreground image) to use for the launch screen when in landscape mode. Any image paths are relative tomanifest.json
, and the foreground image will be centered on the background.As the application will always be in landscape orientation (
"orientation": "landscape"
is set in the manifest), there's no need for aportrait
property. Note that you may use thedefault
key to specify the settings for all orientations; and can specify different backgrounds and images for different orientations and screen densities. See this explanation for more details about the available launch screen options.The final step is to modify the JavaScript to close the launch screen.
When the
ready_when
property is set tocustom
, the launch screen can be closed by calling the Crosswalk-specificwindow.screen.show()
method. For this game, I added an artificial 5 second timeout before calling thewindow.screen.show()
method (otherwise the game loads so quickly that you only see a flash of the launch screen). The code looks like this:setTimeout(function () { // check that the window.screen.show method is available if (window.screen.show) { window.screen.show(); } gameLoop(); }, 5000);
The
gameLoop()
function starts the animation loop for the game, once the launch screen has been closed.
Now the application can be packaged as usual with make_apk.py
and installed on a target. This is what the launch screen looks like on a ZTE Geek:
Summary
Fitting an HTML5 application into a mobile screen has been challenging in the past; the advent of new APIs and configuration options is gradually making things easier. Crosswalk provides pioneering support for such features: viewport management; advanced layout with CSS flexbox and viewport percentage lengths; manifest options for orientation, display and launch screens; plus many others. The result is a rich runtime environment for all applications, especially games.


{% block docuactive %} class="active" {% endblock %} {% block leftsidebar %}
{{ documentary.description }}
Download
Back to documentaries
This documentary cannot be previewed, but you can download it and view on your own computer.


General Info
Form 2
Tax Documents
Sign Out
Save
Primary Taxpayer
First Name
Last Name
Social Security Number
Date of Birth
Filing Status
Single
Married Filing Jointly
Married Filing Separately
Head of Household
Qualifying Widow(er)
Secondary Taxpayer
First Name
Last Name
Social Security Number
Date of Birth
Mailing Address
Street
Apt #
City
State
AL
AK
AR
AZ
CA
CO
CT
DC
DE
FL
GA
HI
IA
ID
IL
IN
KS
KY
LA
MA
MD
ME
MI
MN
MO
MS
MT
NC
NE
NH
NJ
NM
NV
NY
ND
OH
OK
OR
PA
RI
SC
SD
TN
TX
UT
VT
VA
WA
WI
WV
WY
Zip Code
Other Info
State Residency
Full year resident of this state
Full year resident of another state
Part year resident of this state
Which State?
AL
AK
AR
AZ
CA
CO
CT
DC
DE
FL
GA
HI
IA
ID
IL
IN
KS
KY
LA
MA
MD
ME
MI
MN
MO
MS
MT
NC
NE
NH
NJ
NM
NV
NY
ND
OH
OK
OR
PA
RI
SC
SD
TN
TX
UT
VT
VA
WA
WI
WV
WY
Other State
AL
AK
AR
AZ
CA
CO
CT
DC
DE
FL
GA
HI
IA
ID
IL
IN
KS
KY
LA
MA
MD
ME
MI
MN
MO
MS
MT
NC
NE
NH
NJ
NM
NV
NY
ND
OH
OK
OR
PA
RI
SC
SD
TN
TX
UT
VT
VA
WA
WI
WV
WY
From
To
Check all that apply:
Taxpayer or spouse is blind
Taxpayer or spouse is deceased
Contribute $3 to the Presidential Election Campaign Fund
Taxpayer or spouse is disabled
Mobile Phone
*Standard data rates apply
Email
For completed tax return and signature pages
Back
General Info
Next


{{> header.html}}
Hi, {{userName}}
Add people you know - follow their activity and posts:
John Depp
Olivos, Buenos Aires, Argentina
Thank you, CannaSOS Team


DTN2 uses OpenSSL to perform the cryptographic operations. In order to provide the Cryptographic Message Syntax (CMS) support required for BSP, we require OpenSSL version 1.0.0. For directions on installing OpenSSL see the OpenSSL homepage.
To configure DTN2 with BSP enabled:
$ ./configure --with-bsp LIBS="-ldl" --with-openssl=<path to openssl>
By default, OpenSSL is installed in /usr/local/ssl. Now DTN2 should build as usual.
We can also use OpenSSL to generate the RSA keys needed for BSP.
To generate an RSA key pair and save the private key to the file privkey.pem:
$ openssl genrsa -out privkey.pem <key length in bits>
To display the public key:
$ openssl rsa -in privkey.pem -modulus
To generate a self-signed certificate (for testing):
$ openssl req -new -x509 -key privkey.pem -out cert.pem
The format we use for RSA private keys:
$ cat privkey.pem cert.pem > RSA_enc_priv_key.pem
Once DTN2 has been compiled with BSP, it can be configured using the security command at the tcl shell. To list all the security commands, with a brief description of each:
dtn% help security
To turn on one of the security blocks for outgoing bundles:
dtn% security outgoing <bab|pib|pcb|esb> <ciphersuite number>
To use the ciphersuites defined in BSP:
dtn% security outgoing bab 1 dtn% security outgoing pib 2 dtn% security outgoing pcb 3 dtn% security outgoing esb 4
To turn off one of the blocks, use a ciphersuite number 0:
dtn% security outgoing pib 0
To turn off all of the security blocks for outgoing bundles:
dtn% security outgoing reset
We can also require all incoming bundles to have certain security blocks:
dtn% security incoming <bab | pib | pcb> [allowed ciphersuite number]
To use the ciphersuites defined in BSP:
dtn% security incoming bab 1 dtn% security incoming pib 2 dtn% security incoming pcb 3
To turn off the requirements for a particular block, use a ciphersuite value of 0:
dtn% security incoming pib 0
To turn off the requirements for all the blocks:
dtn% security incoming reset
To display the current security configuration for outgoing and incoming bundles:
dtn% security listpolicy
To set a 20-byte symmetric key, which is used by BAB, use the command:
dtn% security setkey <host> <ciphersuite number> <key>
Example:
dtn% security setkey node1.dtn 1 abcd1234abcd1234abcd1234abcd1234abcd1234
We could also use the wildcard * in place of the EID.
To display all the symmetric keys:
dtn% security dumpkeys
To erase all the symmetric keys:
dtn% security flushkeys
The default directory for storing public key certificates is /usr/local/ssl/certs/. To change the directory where certificates are stored (the name must end with "/"):
dtn% security certdir <directory containing certificates>
The default directory for storing private keys is /usr/local/ssl/private/. To change the directory where private keys are stored (the name must end with "/"):
dtn% security privdir <directory containing private keys>
To set the file name for public and private keys:
dtn% security keypaths [pub_keys_enc | priv_keys_dec | priv_keys_sig | pub_keys_ver] <ciphersuite number> <file name>
For example, if our RSA signature key is stored in "my_priv_key.pem", we would set this via:
dtn% security keypaths priv_keys_sig 2 my_priv_key.pem
The RSA private keys for signature and encryption must have the private key, followed by the certificate for that key. If the value <NODE> is used in the file name, it will be replaced with the EID.
To list the directories and file names for the public and private keys:
dtn% security listpaths
The default values for these variables are as follows.
certdir = /usr/local/ssl/certs/ privdir = /usr/local/ssl/private/ priv_keys_dec: (cs num 3) => RSA_enc_priv_key.pem (cs num 4) => RSA_enc_priv_key.pem pub_keys_enc: (cs num 3) => RSA_enc_cert_<NODE>.pem (cs num 4) => RSA_enc_cert_<NODE>.pem pub_keys_ver: (cs num 2) => RSA_sig_cert_<NODE>.pem priv_keys_sig: (cs num 2) => RSA_sig_priv_key.pem


Source code for bruch
# Authors: Tom Lambert (lambertt) and Yuuma Odaka-Falush (odafaluy)
from __future__ import print_function
from pprint import pprint
from fraction_tests import test_fraction
from prime_tests import test_prime
from fraction import Fraction
[docs]class Bruch(Fraction):
"""A derivative of the Fraction-class without other implementations.
For UnitTests see FractionTests.
"""
[docs] def __init__(self, zaehler, nenner):
"""Initializes a new instance.
:param zaehler: The numerator of the instance to crate.
:param nenner: The denominator of the instance to create.
"""
Fraction.__init__(zaehler, nenner)
[docs]def run_test(class_name, fx):
"""Runs a given unit-test and prints the result.
:param class_name: The class name which will be tested. It will be printed ith the results.
:param fx: The test-function to execute.
:return: A result-object with the result of the tests.
"""
print("Testing " + class_name + " class:")
r = fx()
print("Number of run tests: " + str(r.testsRun))
if len(r.errors) > 0:
print("Errors :")
print(r.errors)
else:
print("No errors occurred.")
if len(r.failures) > 0:
print("Failures :")
pprint(r.failures)
else:
print("No failures occurred.")
[docs]def main():
"""The main program. It runs unittests to test the main-modules."""
print("The implemented unit tests will be executed.")
print
run_test("Fraction", test_fraction)
print
run_test("Prime", test_prime)
print
print("All tests run.")
if __name__ == "__main__":
main()


THE GREEN MILE A film review by Mark R. Leeper
Capsule: In a Louisiana prison in 1935 a black giant sentenced to death adds a touch of magic to the death row cell block. Frank Darabont returns to writing/directing a Stephen King prison story with THE GREEN MILE. He spends three hours on his film and gives us some moving moments, but the dramatic payoff is never strong enough to justify the length and the artificiality of his new work. What Darabont did naturally in THE SHAWSHANK REDEMPTION seems far more contrived here. This is a decent film when a very good film was expected. Rating: 6 (0 to 10), high +1 (-4 to +4)
Five years ago Frank Darabont released THE SHAWSHANK REDEMPTION a film he wrote and directed based on a Stephen King story set in a prison. I picked that as the best film of its year. Now Darabont returns to that territory with what promised to be a powerful Stephen King story, but one which is not compelling enough to justify the film's three-hour length. Certainly the payoff, when it comes, is moving. But it is undercut by the introduction of mystical elements and by heavy-handed stylistic touches. The addition of supernatural elements to a gritty story of human experience seems ill-conceived.
At a home for the elderly one resident Paul Edgecomb (Dabbs Greer) has a number of strange behaviors. Every day he gets out and takes a walk in the woods. Seeing the film TOP HAT on television reduces him to tears. Finally he tells his story in private to a friend. In 1935 he was the lead guard on death row at a Cold Mountain Penitentiary in Louisiana (here he is played by Tom Hanks). The team of guards was made up of decent men most of whom just wanted the best for the convicts under their care. The one exception is the sadistic Percy Wetmore (Doug Hutchison), the governor's wife's nephew.  It was under his auspices political appointments like Percy's were made. The governor that year was Long's handpicked replacement when three years earlier in the middle of his term Long vacated the office for a seat in the US Senate. Long was at the height of his power at the point this film was set. Change was fast in coming, however. This film is set in July. A little over a month after the events of this film, on the night of September 8th, 1935, Dr. Carl Austin Weiss assassinated Long in the State Capitol Building in Baton Rouge.]
The story really begins when John Coffey (Michael Clarke Duncan)a huge black man is brought to the cell block having been convicted of raping and murdering two young girls. Paul cannot believe that this giant child-man who is afraid of the dark could be a murderer. The film slowly develops the stories of some of the inmates and guards. For a long time the script neglects Coffey whose angel-like presence is felt over the entire cell-block but who does little to interact with people.
Darabont's script apparently wanted to carry over from the novel the feeling that the viewer really knows the inmates as individuals and cares about them. But the characterization comes slowly and too frequently characters are dispatched quickly. The one inmate not well characterized is Coffey, the one who would be most interesting to know. Our reactions to Coffey come mostly from stereotypes borrowed from other films. That is the problem with too many of the main characters. We do not really understand Percy at the end of the film. Nor do we really understand Wild Bill.(Sam Rockwell of JERRY AND TOM), a wild animal of a man. Even Paul is not a character of much depth or wisdom. He is simply a good and decent man.
Almost the entire film is shot with a heavy yellowish filter that blocks out any bright light and artificially casts a pallor on the film and calls attention to itself. In THE SHAWSHANK REDEMPTION Darabont's team created a prison that looked like a prison of the period. This is a longer film and most of the film takes place in the one cell block and the room of the electric chair. While the confinements are not claustrophobic, they do start to become tiresome after a while.
Tom Hanks is reasonable as the decent and likable prison guard, a welcome change from usual negative stereotypes. A man with grown children, he looks a little young for the role and the accent never sounds exactly right. His second in command is David Morse as Brutus "Brutal" Howell. Morse is a large quiet actor familiar from THE CROSSING GUARD. He his tall and calm image gives him the air of a blond Gary Cooper. James Cromwell has been a familiar face for many years, but since BABE he has been getting more major roles. Here he plays a prison warden with the requisite dignity. Another familiar face in a very small role is Gary Sinese.
The lineage of THE GREEN MILE is excellent, but the film itself is only decent and probably could have been more effective at a two hour length. I rate is a favorable but disappointed 6 on the 0 to 10 scale and a high +1 on the -4 to +4 scale.
Mark R. Leeper<EMAIL_ADDRESS>Copyright 1999 Mark R. Leeper
The review above was posted to the
rec.arts.movies.reviews newsgroup (de.rec.film.kritiken for German reviews).
The Internet Movie Database accepts no responsibility for the contents of the
review and has no editorial control. Unless stated otherwise, the copyright
belongs to the author.
Please direct comments/criticisms of the review to relevant newsgroups.
Broken URLs inthe reviews are the responsibility of the author.
The formatting of the review is likely to differ from the original due
to ASCII to HTML conversion.
Related links: index of all rec.arts.movies.reviews reviews


There are no deeds like your deeds.
9 All the nations that you have made will come and bow before you, Lord.
They will honor your name.
10 For you are great and do wonderful things;
you only are God.
11 Teach me your ways, Yahweh. Then I will walk in your truth.
Unite my heart to reverence you.
12 Lord my God, I will praise you with my whole heart;
I will glorify your name forever.
13 For great is your covenant faithfulness toward me;
you have rescued my life from the depths of sheol.
14 God, the arrogant have risen up against me.


We have placed cookies on your computer to help make this website better. You can change your cookies settings at any time and can find out about cookies here. If you continue using this site we will assume you accept these cookies.


Nov. 25 (UPI) -- Thomas Rhett says fatherhood has changed what kind of music he creates.
The 29-year-old country music singer discussed his daughters while attending the 2019 American Music Awards with his pregnant wife, Lauren Akins, Sunday in Los Angeles.
Rhett and Akins have two daughters, Willa Grey, 4, and Ada James, 2, and are expecting another baby girl.
"I try to make sure that every song I write, my 2-year-old can listen to, so that's changed a lot of things," Rhett said during the AMAs red carpet livestream.
"We're about to have three girls, so our house is going to be even more crazy than it already is," he added.
Rhett wore a floral-print suit and burgundy T-shirt to match Akins' red and blue striped gown. He cradled Akins' baby bump as they posed for photos on the red carpet.
"@amas with my big honey & little honey number 3," Akins wrote on Instagram.
Rhett performed his single "Look What God Gave Her" during the ceremony. The song appears on Rhett's fourth studio album, Center Point Road, released in May.
"Don't Give Up on Me" singer Andy Grammer also attended the AMAs with his pregnant wife, singer and actress Aijia Grammer. The couple announced in October they are expecting their second daughter.
Grammer said in tweet Sunday that appearing on the red carpet with his pregnant wife was "sweet."
"It takes what could be a stuffy situation and brings a double dose of humanity and sweetness," he posted. "I just jumped around excited pointing at her belly. I can't wait to have another little girl. Can you tell? #amas."
Moments from the 2019 American Music Awards
(0) Leave a comment upi.com/6962391
Latest Headlines
Music // 14 hours ago Taylor Swift wins big at the 2019 American Music Awards Nov. 24 (UPI) -- Taylor Swift won big at the 47th annual American Music Awards on Sunday, taking home awards for Artist of the Year, Artist of the Decade and Favorite Album - Pop/Rock.
Music // 2 days ago Luke Combs' 'What You See is What You Get' tops the U.S. album chart Nov. 23 (UPI) -- Luke Combs' "What You See is What You Get" is No. 1 on the U.S. album chart.
Music // 2 days ago TXT to release 'Dream Chapter: Magic' box sets in U.S. Nov. 22 (UPI) -- K-pop group TXT will release "Sanctuary" and "Arcadia" box sets of its debut studio album, "The Dream Chapter: Magic."
Music // 2 days ago American Music Awards 2019: How to watch Nov. 22 (UPI) -- The 47th annual American Music Awards are set to take place live on Sunday from Los Angeles.
Music // 2 days ago Jason Aldean returns with new album '9' Nov. 22 (UPI) -- Country music singer Jason Aldean released his ninth studio album, "9," ahead of his "We Back" tour.
Music // 2 days ago French Montana hospitalized for cardiac issues Nov. 22 (UPI) -- "Twisted" rapper French Montana was rushed to a hospital after experiencing an elevated heart rate, stomach pains and nausea.
Music // 3 days ago Selena Gomez announces new album to release in January 2020 Nov. 21 (UPI) -- Selena Gomez announced Thursday that she will release her next album early next year.
Music // 3 days ago Girl's Day's Minah releases 'Butterfly' video Nov. 21 (UPI) -- K-pop star Minah released a soft and romantic music video for her new solo single "Butterfly."
Music // 3 days ago Taylor Swift feud with record label spotlights ownership rights LOS ANGELES, Nov. 21 (UPI) -- The ongoing feud between pop sensation Taylor Swift and her former label, Big Machine Records, casts a glaring spotlight on music ownership rights -- and how record labels expect to recoup their investments.
Music // 3 days ago Coldplay to put touring on hold over environmental concerns Nov. 21 (UPI) -- Coldplay frontman Chris Martin announced the band will not be touring in support of their new album "Everyday Life," citing how tours impact the environment.


I have learnt that I do value things, I always thought I was an unemotional person and fully logical but recently I have noticed a change in how I act and think. I am becoming emotional, I am becoming human.
I learn that I am able to change my perspective on things and how my brain adapts to certain situations.
I learnt that I am more calmer and relaxed after I have participated in mindfulness meditation.
Coders need to be able to work with, and explain what they do to employers, clients, consumers and co-workers that don’t understand what they do. Writing clean, effective code is great, but when you pair it with strong empathy and communication skills you get good results. I think being able to be self aware of what you are doing will heavily influence the outcome of what you are wanting because you are aware of what you can do and cant do and how far you can go.
Probably how much it has helped and influenced my learning in general like I am able to apply core techniques as well as thoughts to better understand the material I am trying to grasp.
I think for me the most challenging aspects of the core learning was actually talking to somebody as well as listening because I have never been somebody to talk to and who talks. I'm super unsociable so the majority of the core learning were difficult.
I think you are doing it because the tech industry look more for core skills and how well you communicate and interact with other people rather than your technical capabilities so I think you are training that side of us to be prepared for a new environment as well as giving us a higher possibility of getting a job.
I feel it could be a bit more engaging, I think maybe incorporate challenges or little tasks to complete to actually put the core skills you are learning to use. Forcing us to create habits. I don't think it's a waste of time but preferably id rather do the technical side of things because it seems more fun.
I want to get the technical skills out of doing this course so I am able to build some of my projects that I have banked in my mind but that's not my full goal because I know valuing money and chasing it will only leave me depressed so I will create some things and make enough money to travel, live life and be happy with my person. Happiness is key to a good life.
I think my strengths and limitations haven't changed, I still believe my determination and ambition mixed with my creativity and dedication will be able to take me a long way but my limitation being shy and lesser in communication will definitely hinder me behind a bit.
I think communicating with others and working in groups is going to be very challenging for me, anything with people is a challenge but I am willing to do anything to overcome that.
I really would like to improve myself and become a better person, I want to strip my limitations and make them my strengths. I want to work on communication, team work and anything to do with people. I am not a people person but I really would like to try and make changes so I am able to do that.
I expect myself to work productively and on track all of the time, I don't want to get off track and will have to catch up on time. I expect the best, nothing less of myself because higher thoughts highly influences the outcome. I will seek help when I come across something I can't achieve myself, I am very independent so I will try my best before outsourcing which can be a problem sometimes. I am dedicated and ready to put in the time and effort to pump this bootcamp out and get the skills and most out of the experience I came here for.


Eat out
(1874 Offers)
Fitness
(765 Offers)
Activities
(1874 Offers)
Salon
(1874 Offers)
Movies
(1874 Offers)
Spa
(1874 Offers)
Hobbies
(1874 Offers)
View more


Namespace Droplet.Core.Inp.Options
Classes
FlowRoutingExtensions
Static class that contains all of the extension methods for the FlowRouting enum.
FlowRoutingOption
The Flow Routing Option for an inp project.
FlowUnitsExtensions
Public static class that holds extension methods for the FlowUnitsOption class and extends the FlowUnits enumeration
FlowUnitsOption
Options class for FlowUnits
InfiltrationMethodsExtensions
Container class that holds all of the extension methods for the infiltration methods option enum InfiltrationMethods
InfiltrationOption
The InfiltrationMethods option
InpOption
A class that holds the Option Data for an inp option
OptionsExtensions
ProjectOptions
Class that contains the project options
Enums
FlowRouting
The different options for the FlowRoutingOption that can be selected
FlowUnits
The different possible flow units that can be used in the simultaion and results
US Units. CFS: cubic feet per second GPM: gallons per minutes MGD: million gallons per day
SI Units. CMS: cubic meters per second LPS: liters per second MLD: million liters per day
InfiltrationMethods
Different Infiltration Methods that the SWMM5 engine provides


2 March 2011 - The Ministry of Health of Indonesia has announced a new confirmed case of human infection with avian influenza A (H5N1) virus.
A 26 year old female from Karawang District, West Java Province developed symptoms on 30 January. She was hospitalized on 3 February, and was treated with oseltamivir, but died on 8 February.
Initial investigations indicate the case bought poultry meat at a traditional market and took home chickens that were slaughtered after purchase and prepared at the market.
Laboratory tests have confirmed infection with the H5N1 avian influenza virus.
Of the 172 cases confirmed to date in Indonesia, 142 have been fatal.


@(playerName : String, crewMembers : String, kittenImg : String, crew : Array[String])
You have been chosen by the Queen of England to find a northern water way to China to acquire much needed fidget spinners. You are given a small ship with a crew of 10 people. Most of your sailor friends believe that your best chance of success is to sail northwest above North America. However, some of your crew believe you should try going east over Russia or north over the top of the world instead.
@member
}


Given an integer K, we have to construct an array of length N in such a way that, first element is always 1 and last element is always X, another integer given as input.
Each element in the array must be [1, K] and the adjacent elements must not be the same.
We have to find out the number of ways to construct such arrays.
Example:
N = 4
K = 3
X = 2
ans = 3
Possible arrays:
[1, 2, 3, 2]
[1, 2, 1, 2]
[1, 3, 1, 2]
We can try to visualise the construction of the array in the form of a tree.
Consider the tree below for the above example:
At each level, we branch out to form a possible valid array value. The blue circles, represent the array ending that are equal to X, thus valid and the green ones are invalid.
Let a
be the array to represent in the number of valid arrays of length i and b
represent the number of invalid arrays of length i.
We can derive the following overlapping subproblems in the problem.
1. a[i] = b[i-1]
This makes sense as, if we can make M arrays of length i-1 that are invalid then the same number of arrays can be made of length i that are valid. Just append the valid number at the end.
2. b[i] = (a[i-1] * (k-1)) + (b[i-1] * (k-2))
First part says, if the last number was a valid array ending, then we have k-1 numbers to use.
Second part says, if the last number was one of the invalid numbers, then we have k-2 numbers to use, 1 invalid and 1 valid numbers have to be subtracted.
a[n-1] should give us the answer.


MPIMapView
open class MPIMapView : WKWebView, WKNavigationDelegate
This class contains methods that help to display and interact with a Mappedin venue
-
Undocumented
Declaration
Swift
public var venueData: MPIData?
-
Undocumented
Declaration
Swift
public var currentMap: MPIMap?
-
Undocumented
Declaration
Swift
public var delegate: MPIMapViewDelegate?
-
Undocumented
Declaration
Swift
public init(frame: CGRect)
-
Undocumented
Declaration
Swift
required public init?(coder aDecoder: NSCoder)
-
Loads the map based on the options passed in
MPIMapView
Declaration
Swift
open func loadVenue(options: MPIOptions.Init, showVenueOptions: MPIOptions.ShowVenue? = nil)
Parameters
options
The options
MPIOptions.Init
to load theMPIMapView
withReturn Value
void
-
Sets the map of the mapview to the
MPIMap
passed inDeclaration
Swift
open func setMap(map: MPIMap, completionCallback: ((String?) -> Void)? = nil)
Parameters
map
The
MPIMap
to set theMPIMapView
tocompletionCallback
Callback when the
MPIMapView
has completed setting the map, contains an error string as the first parameter if it fails, defaults to nullReturn Value
return void
-
Sets the map of the mapview to the
MPIMap
passed inDeclaration
Swift
open func setMap(mapId: String, completionCallback: ((String?) -> Void)? = nil)
Parameters
mapId
The id of
MPIMap
to set theMPIMapView
tocompletionCallback
Callback when the
MPIMapView
has completed setting the map, contsains an error string as the first paerameter if it failsReturn Value
return void
-
Highlight polygons
Declaration
Swift
open func setPolygonColor(polygon: MPIPolygon, color: String, textColor: String? = nil, opacity: Double = 1.0)
-
Sets the color of the
MPIPolygon
Declaration
Swift
open func setPolygonColor(polygonId: String, color: String, textColor: String? = nil, opacity: Double = 1.0)
Parameters
polygonId
The id of the
MPIPolygon
to change the colorcolor
The color to set the
MPIPolygon
to, e.g ‘black’, ‘#CDCDCD’textColor
The color to set the textColor of the legacyLabels, e.g ‘black’, ‘#CDCDCD’
opacity
The opacity of the
MPIPolygon
, e.g 0 to 1.0Return Value
void
-
Clears all
Declaration
Swift
open func clearAllPolygonColors(completionCallback: ((String?) -> Void)? = nil)
Parameters
completionCallback
Callback for when the mapview is finished clearing all polygon colors, contains an error string as the first parameter if it failed, defaults to null
Return Value
void
-
BlueDot
Declaration
Swift
open func enableBlueDot(options: MPIOptions.BlueDot? = nil)
-
Disables the blue dot so it does not appear on the mapview
Declaration
Swift
open func disableBlueDot()
Return Value
void
-
Updates the position of the blue dot on the mapview
Declaration
Swift
open func updatePosition(position: MPIPosition)
Parameters
position
The
MPIPosition
of the blue dotReturn Value
void
-
Navigation
Declaration
Swift
open func getDirections(to: MPINavigatable, from: MPINavigatable, accessible: Bool = true, directionsCallback: @escaping (MPIDirections) -> Void)
-
Draws a path on the
MPIMapView
Declaration
Swift
open func drawPath(path: [MPINode], pathOptions: MPIOptions.Path? = nil)
Parameters
path
A list of
MPINode
that the path will be drawn frompathOptions
Path options to customize how the path is drawn, defaults to null
Return Value
void
-
Remove all paths on the
MPIMapView
Declaration
Swift
open func removeAllPaths(completionCallback: ((String?) -> Void)? = nil)
Parameters
completionCallback
Callback when the
MPIMapView
has completed removing all the paths, contains an error string as the first parameter if it fails, defaults to nullReturn Value
void
-
Draws a journey on the [MPIMapView]
Declaration
Swift
open func drawJourney(directions: MPIDirections, options: MPIOptions.Journey? = nil)
Parameters
directions
The directions for the journey
options
journey options, include setting a connectionTemplateString and pathOptions
Return Value
void
-
Remove all paths and connection tooltips on the
MPIMapView
Declaration
Swift
open func clearJourney()
Return Value
void
-
Camera
Declaration
Swift
public func focusOn(focusOptions: MPIOptions.Focus)
-
Adds an interactive polygon (allows it to be clickable)
Declaration
Swift
public func addInteractivePolygon(polygon: MPIPolygon)
Parameters
polygon
The
MPIPolygon
to make interactiveReturn Value
void
-
Adds an interactive polygon (allows it to be clickable)
Declaration
Swift
public func addInteractivePolygon(polygonId: String)
Parameters
polygonId
The id of the polygon to make interactive
Return Value
void
-
Removes all labels
Declaration
Swift
open func removeAllLabels()
Return Value
void
-
Undocumented
Declaration
Swift
public func webView(_ webView: WKWebView, didCommit navigation: WKNavigation!)
-
Called when page has finished loading
Declaration
Swift
public func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!)
-
Called if page has failed to load
Declaration
Swift
public func webView(_ webView: WKWebView, didFail navigation: WKNavigation!, withError error: Error)


This PWG face-to-face meeting will be held on August 18-20, 2020, only via Zoom teleconference (Virtual F2F).
There is no registration fee or RSVP survey for this meeting.
Note:All times are local to the venue - Eastern Daylight Time (EDT) (UTC−04:00).
Discussions at PWG face-to-face meetings are covered by the PWG Policy on Intellectual Property and Confidentiality - basically everything we discuss is non-confidential and can be included in an open standard.
| Date | Times | Description |
|---|---|---|
| August 18 | 10:00 AM to 11:15 AM | PWG Plenary |
| 11:15 AM to 11:30 AM | IPP WG: Status | |
| 11:30 AM to 12:00 PM | IPP WG: Linux Foundation OpenPrinting GSoC / GSoD Project Status | |
| 12:00 PM to 12:30 PM | Break / Lunch | |
| 12:30 PM to 1:00 PM | IPP WG : INFRA Cloud Proxy Registration v1.0 | |
| 1:00 PM to 2:00 PM | IPP WG : Job Accounting with IPP v1.0 | |
| August 19 | 10:00 AM to 12:00 PM | IDS WG : Status and Discussion · PWG Hardcopy Device Security Guidelines - Slides |
| 12:00 PM to 12:30 PM | Break / Lunch | |
| 12:30 PM to 1:00 PM | IPP WG : IPP Encrypted Jobs and Documents v1.0 | |
| 1:00 PM to 2:00 PM | IPP WG : IPP Enterprise Printing Extensions v2.0 | |
| August 20 | 10:00 AM to 10:20 AM | IPP WG : IPP Production Printing Extensions v2.0 |
| 10:20 AM to 12:00 PM | IPP WG : IPP Driverless Printing Extensions v2.0 | |
| 12:00 PM to 12:30 PM | Break / Lunch | |
| 12:30 PM to 1:45 PM | IPP WG: 3D Printing Liaison: Status and Guidance | |
| 1:45 PM to 2:00 PM | IPP WG : Next Steps |


UH Groupings
Login Here
Logout
What is a UH Grouping?
Administration
Admin
Memberships
Memberships
Groupings
Groupings


CYPRESS
City of Toronto
Address:
PROBLEMS AT THE SITE:
Utility failures
Potholes
City property vandalism
Eroded streets
Tree collapse
Flooded streets
Mould and spore growth
Garbage or any other road-blocking objects
Submit Report
Cancel
FAQ


{% extends "layouts/_block_content.html" %} {% from "components/breadcrumb/_macro.njk" import onsBreadcrumb %} {% from "components/fieldset/_macro.njk" import onsFieldset %} {% from "components/button/_macro.njk" import onsButton %} {% set page_title = "Change email address" %} {% set breadcrumbsData = [ { "text": "Surveys", "url": "/surveys/todo", "id": "b-item-1" }, { "text": "Account", "url": "/my-account", "id": "b-item-2" }, { "text": "Change your contact details", "url": "/my-account/change-account-details", "id": "b-item-3" }, ] %} {% block breadcrumb %} {{ onsBreadcrumb({ "ariaLabel": "Breadcrumbs", "id": "breadcrumbs", "itemsList": breadcrumbsData }) }} {% endblock breadcrumb %} {% block main %}
We’ve sent an email to your new email address
Once you have received it, you need to follow the link in the email to confirm and finish setting up your new account.
Email not arrived? It might be in your spam folder.
If it doesn’t arrive in the next 15 minutes, please call 0300 1234 931
{% endblock main %}


Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here',
Lorem Ipsum is that it has a more-or-less normal distribution of letters,that it has a more-or-less normal distribution as opposed to using 'Content here, content here',
<EMAIL_ADDRESS>111 9999 99


| java.lang.Object | |
| ↳ | com.urbanairship.location.LocationRequestOptions |
High level location requirements to be used for UALocationManager and service.
The class is modeled after the LocationRequest for the Fused Location Provider, but only supports a subset of the options.| Nested Classes | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| class | LocationRequestOptions.Builder | Builder to construct LocationRequestOptions. |
| Constants | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| int | PRIORITY_BALANCED_POWER_ACCURACY | Used with setPriority(int)
to request balanced power and accuracy. |
|||||||||
| int | PRIORITY_HIGH_ACCURACY | Used with setPriority(int)
to request highest level of accuracy. |
|||||||||
| int | PRIORITY_LOW_POWER | Used with setPriority(int)
to request low power location updates. |
|||||||||
| int | PRIORITY_NO_POWER | Used with setPriority(int)
to request location that requires no extra power consumption. |
| Fields | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| public static int | DEFAULT_REQUEST_PRIORITY | Default priority - PRIORITY_BALANCED_POWER_ACCURACY. | |||||||||
| public static float | DEFAULT_UPDATE_INTERVAL_METERS | Default minDistance in meters - 800 meters. | |||||||||
| public static long | DEFAULT_UPDATE_INTERVAL_MILLISECONDS | Default minTime in milliseconds - 5 mins. |
| Public Methods | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| static LocationRequestOptions |
createDefaultOptions()
Creates default request options with
DEFAULT_REQUEST_PRIORITY ,
DEFAULT_UPDATE_INTERVAL_MILLISECONDS , and
DEFAULT_UPDATE_INTERVAL_METERS . | ||||||||||
| boolean | equals(Object o) | ||||||||||
| float |
getMinDistance()
The minimum distance of meters between location updates.
| ||||||||||
| long |
getMinTime()
The minimum time in milliseconds between location updates in milliseconds.
| ||||||||||
| int |
getPriority()
The priority of the request.
| ||||||||||
| String | toString() |
|
[Expand]
Inherited Methods | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
|
From class
java.lang.Object
|
Used with setPriority(int)
to request balanced power and accuracy.
Used with setPriority(int)
to request highest level of accuracy.
Used with setPriority(int)
to request low power location updates.
Used with setPriority(int)
to request location that requires no extra power consumption.
Default priority - PRIORITY_BALANCED_POWER_ACCURACY.
Default minDistance in meters - 800 meters.
Default minTime in milliseconds - 5 mins.
Creates default request options with DEFAULT_REQUEST_PRIORITY
,
DEFAULT_UPDATE_INTERVAL_MILLISECONDS
, and
DEFAULT_UPDATE_INTERVAL_METERS
.
The minimum distance of meters between location updates.
The minimum time in milliseconds between location updates in milliseconds.
The priority of the request.


| Faculty | 4 | |
|---|---|---|
| Students | 5 | |
| Visitor | 1 | |
| Total | 10 |
| Id
|
Name
|
Id Number
|
Category
|
Date
|
Start Time
|
End Time
|
|---|


|
Olagarro
0.1
Olagarro utility library documentation
|
Represents a value in the future. More...
Public Member Functions | |
| T | result () const |
| Returns operation's result or blocks until it is calculated. More... | |
Represents a value in the future.
This class stores a concurrent operation's value, allowing its user to safely access it. This class is no meant to be created directly but to get from concurrence module's operations such launchJob() or concurrentFor(). For example:
If veryHeavyOperation() has finished when call to heavyOpValue.result() is done, result() method will return its value immediately. If in the other hand function is still working, calling result() will block that thread until its value is calculated. That is, calling result() can block the thread which calls it.
We can use Future objects with containers, like the following example:
Same as with launchJob() function, Future works with concurrentFor() and concurrentReductorFor() functions. First one only returns Future<void> (just to wait for it) but second function returns Future<OperationResultType> object.
|
inline |


First Name
Last Name
Email
Phone Number
Home Address
Work Address
City
Have an Account? Sign In Instead


{% load static from staticfiles %}
Visitor tracking began on {{ track_start_time|date:"Y-m-d H:i:s" }}
The start time precedes the oldest tracked visitor, thus the stats are not complete for the specified range.


{% extends "members/base.html" %} {% load members_extras %} {% block content %}
Credit note: {{ credit_note.id }}
Issued: {{ credit_note.update_date }}
Amount: {{ credit_note.amount }}
{{ credit_note.reference }}
Special case: Treat as paid
{{ invoice.note }}
Email count: {{ invoice.email_count }}


2 writes to PipelineLength
System.Management.Automation (2)
engine\InvocationInfo.cs (1)
96
PipelineLength
= (int)SerializationUtilities.GetPropertyValue(psObject, "InvocationInfo_PipelineLength");
engine\pipeline.cs (1)
1032
myInfo.
PipelineLength
= _commands.Count;
4 references to PipelineLength
System.Management.Automation (4)
engine\InvocationInfo.cs (1)
428
RemotingEncoder.AddNoteProperty<int>(psObject, "InvocationInfo_PipelineLength", () => this.
PipelineLength
);
engine\NativeCommandProcessor.cs (3)
522
bool soloCommand = this.Command.MyInvocation.
PipelineLength
== 1;
655
if (this.Command.MyInvocation.PipelinePosition < this.Command.MyInvocation.
PipelineLength
)
1458
if (this.Command.MyInvocation.PipelinePosition == this.Command.MyInvocation.
PipelineLength
)


Potential participants looking for mindfulness groups in the community (ie, outside the NHS) can search for local teachers on the British Association of Mindfulness-Based Approaches (BAMBA)'s Register at: https://bamba.org.uk/ which lists teachers who meet the minimum standards outlined in the national Good Practice Guidelines.


Search for expert by first name, last name, course, industry, or skill set.
Filter for expert by skillset, OSU courses, and/or industry. Select 'All' to not filter by the criteria.


"GNAT "only in Matthew 23:24, a small two-winged stinging fly of the genus Culex, which includes mosquitoes. Our Lord alludes here to the gnat in a proverbial expression probably in common use, “who strain out the gnat;” the words in the Authorized Version, “strain at a gnat,” being a mere typographical error, which has been corrected in the Revised Version. The custom of filtering wine for this purpose was common among the Jews. It was founded on Leviticus 11:23. It is supposed that the “lice,” Exodus 8:16 (marg. R.V., “sand-flies”), were a species of gnat.
"GNAT "only in Matthew 23:24, a small two-winged stinging fly of the genus Culex, which includes mosquitoes. Our Lord alludes here to the gnat in a proverbial expression probably in common use, “who strain out the gnat;” the words in the Authorized Version, “strain at a gnat,” being a mere typographical error, which has been corrected in the Revised Version. The custom of filtering wine for this purpose was common among the Jews. It was founded on Leviticus 11:23. It is supposed that the “lice,” Exodus 8:16 (marg. R.V., “sand-flies”), were a species of gnat.


Jordan played on two Olympic gold medal-winning American basketball teams. He won a gold medal as a college player in the 1984 Summer Olympics. The team was coached by Bob Knight and featured players such as Patrick Ewing, Sam Perkins, Chris Mullin, Steve Alford, and Wayman Tisdale. Jordan led the team in scoring, averaging 17.1 ppg for the tournament. |
|---|


Quadratic Equation Solver
Formula
$$ ax^2+bx+c=0$$
has the solutions:
$$x=\frac{-b\pm\sqrt{b^2-4ac\ }}{2a}$$
the discriminant is given by:
$$\Delta = b^2 - 4ac$$
Input
a=
b=
c=
Results and Graph


pdfmake follows a declarative approach.
It basically means, you'll never have to calculate positions manually or use commands like: writeText(text, x, y) or moveDown, as you would with a lot of other libraries.
The most fundamental concept to be mastered is the document-definition-object which can be as simple as:
var docDefinition = { content: 'This is an sample PDF printed with pdfMake' };
or become pretty complex (having multi-level tables, images, lists, paragraphs, margins, styles etc...).
As soon as you have the document-definition-object, you're ready to create and open/print/download the PDF:
// open the PDF in a new window pdfMake.createPdf(docDefinition).open(); // print the PDF pdfMake.createPdf(docDefinition).print(); // download the PDF pdfMake.createPdf(docDefinition).download('optionalName.pdf');
pdfmake makes it possible to style any paragraph or its part:
var docDefinition = { content: [ // if you don't need styles, you can use a simple string to define a paragraph 'This is a standard paragraph, using default style', // using a { text: '...' } object lets you set styling properties { text: 'This paragraph will have a bigger font', fontSize: 15 }, // if you set pass an array instead of a string, you'll be able // to style any fragment individually { text: [ 'This paragraph is defined as an array of elements to make it possible to ', { text: 'restyle part of it and make it bigger ', fontSize: 15 }, 'than the rest.' ] } ] };
If you reuse the same styles across the document, you should probably leverage styles dictionary:
var docDefinition = { content: [ { text: 'This is a header', style: 'header' }, 'No styling here, this is a standard paragraph', { text: 'Another text', style: 'anotherStyle' }, { text: 'Multiple styles applied', style: [ 'header', 'anotherStyle' ] } ], styles: { header: { fontSize: 22, bold: true }, anotherStyle: { italic: true, alignment: 'right' } } };
To have a deeper understanding of styling in pdfmake, style inheritance and local-style-overrides check STYLES1, STYLES2 and STYLES3 in playground.
By default paragraphs are rendered as a vertical stack of elements (one below another). It is possible however to divide available space into columns.
var docDefinition = { content: [ 'This paragraph fills full width, as there are no columns. Next paragraph however consists of three columns', { columns: [ { // auto-sized columns have their widths based on their content width: 'auto', text: 'First column' }, { // star-sized columns fill the remaining space // if there's more than one star-column, available width is divided equally width: '*', text: 'Second column' }, { // fixed width width: 100, text: 'Third column' }, { // percentage width width: '10%', text: 'Last column' } ], // optional space between columns columnGap: 10 }, 'This paragraph goes below all columns and has full width' ] };
Column content is not limited to a simple text. It can actually contain any valid pdfmake element. Make sure to look at the COLUMNS examples in playground.
Conceptually tables are similar to columns. They can however have headers, borders and cells spanning over multiple columns/rows.
var docDefinition = { content: [ { table: { // headers are automatically repeated if the table spans over multiple pages // you can declare how many rows should be treated as headers headerRows: 1, widths: [ '*', 'auto', 100, '*' ], body: [ [ 'First', 'Second', 'Third', 'The last one' ], [ 'Value 1', 'Value 2', 'Value 3', 'Value 4' ], [ { text: 'Bold value', bold: true }, 'Val 2', 'Val 3', 'Val 4' ] ] } } ] };
All concepts related to tables are explained in TABLES example in playground.
pdfMake supports both numbered and bulleted lists:
var docDefinition = { content: [ 'Bulleted list example:', { // to treat a paragraph as a bulleted list, set an array of items under the ul key ul: [ 'Item 1', 'Item 2', 'Item 3', { text: 'Item 4', bold: true }, ] }, 'Numbered list example:', { // for numbered lists set the ol key ol: [ 'Item 1', 'Item 2', 'Item 3' ] } ] };
Page headers and footers in pdfmake can be: static or dynamic.
var docDefinition = { header: 'simple text', footer: { columns: [ 'Left part', { text: 'Right part', alignment: 'right' } ] }, content: (...) };
For dynamically generated content (including page numbers and page count) you can pass a function to the header or footer:
var docDefinition = { footer: function(currentPage, pageCount) { return currentPage.toString() + ' of ' + pageCount; }, header: function(currentPage, pageCount) { // you can apply any logic and return any valid pdfmake element return { text: 'simple text', alignment: (currentPage % 2) ? 'left' : 'right' }; }, (...) };
The background-layer will be added on every page.
(...) var docDefinition = { background: 'simple text', content: (...) };
It may contain any other object as well (images, tables, ...) or be dynamically generated:
(...) var docDefinition = { background: function(currentPage) { return 'simple text on page ' + currentPage }, content: (...) };
Any element in pdfMake can have a margin:
(...) // margin: [left, top, right, bottom] { text: 'sample', margin: [ 5, 2, 10, 20 ] }, // margin: [horizontal, vertical] { text: 'another text', margin: [5, 2] }, // margin: equalLeftTopRightBottom { text: 'last one', margin: 5 } (...)
You could have figured out by now (from the above examples), that if you set the content key to an array, the document becomes a stack of paragraphs.
You'll quite often reuse this structure in a nested element, like in the following example:
var docDefinition = { content: [ 'paragraph 1', 'paragraph 2', { columns: [ 'first column is a simple text', [ // second column consists of paragraphs 'paragraph A', 'paragraph B', 'these paragraphs will be rendered one below another inside the column' ] ] } ] };
The problem with an array is that you cannot add styling properties to it (to change fontSize for example).
The good news is - array is just a shortcut in pdfMake for { stack: [] }, so if you want to restyle the whole stack, you can do it using the expanded definition:
var docDefinition = { content: [ 'paragraph 1', 'paragraph 2', { columns: [ 'first column is a simple text', { stack: [ // second column consists of paragraphs 'paragraph A', 'paragraph B', 'these paragraphs will be rendered one below another inside the column' ], fontSize: 15 } ] } ] };
This is simple. Just use the { image: '...' } node type.
JPEG and PNG formats are supported.
var docDefinition = { content: [ { // you'll most often use dataURI images on the browser side // if no width/height/fit is provided, the original size will be used image: 'data:image/jpeg;base64,...encodedContent...' }, { // if you specify width, image will scale proportionally image: 'data:image/jpeg;base64,...encodedContent...', width: 150 }, { // if you specify both width and height - image will be stretched image: 'data:image/jpeg;base64,...encodedContent...', width: 150, height: 150 }, { // you can also fit the image inside a rectangle image: 'data:image/jpeg;base64,...encodedContent...', fit: [100, 100] }, { // if you reuse the same image in multiple nodes, // you should put it to to images dictionary and reference it by name image: 'mySuperImage' }, { // under NodeJS (or in case you use virtual file system provided by pdfmake) // you can also pass file names here image: 'myImageDictionary/image1.jpg' } ], images: { mySuperImage: 'data:image/jpeg;base64,...content...' } };
You can set pageBreak on any element to: 'after' or 'before' (depending on where you want the break to occur).
images and table examples use this attribute:
(...) 'You can also fit the image inside a rectangle', { image: 'fonts/sampleImage.jpg', fit: [100, 100], pageBreak: 'after' }, (...)and
(...) { text: 'noBorders:', fontSize: 14, bold: true, pageBreak: 'before', margin: [0, 0, 0, 8] }, (...)
var docDefinition = { // a string or { width: number, height: number } pageSize: 'A5', // by default we use portrait, you can change it to landscape if you wish pageOrientation: 'landscape', // [left, top, right, bottom] or [horizontal, vertical] or just a number for equal margins pageMargins: [ 40, 60, 40, 60 ], };
If you set pageSize to a string, you can use one of the following values:
Hmmm... let me know what you need ;)
The goal is quite simple - make pdfmake useful for a looooooooot of people and help building responsive HTML5 apps with printing support.
There's one thing on the roadmap for v2 (no deadline however) - make the library hackable, so you can write plugins to:
pdfmake is based on a truly amazing library pdfkit (credits to @devongovett).
Thanks to all contributors.


|
Click here if you're having trouble viewing this email.
|
|
Your first source for news that matters to you.
|
|
|
|
|
WELCOME TO COLLEGE INSIDER!
This new, weekly update will give you the inside edge on news that impacts your practice.
|
|
|
|
|
THANKS TO OUR 2015 PREMIER PARTNERS
|
|
|
|
DIAMOND
$500,000 AND ABOVE
|
|
|
|
|
|
|
INDICATION
QVAR® (beclomethasone dipropionate HFA) Inhalation Aerosol is indicated for the maintenance treatment of asthma as prophylactic therapy in patients 5 years of age or older. QVAR is also indicated for asthma patients requiring systemic corticosteroid administration, where
adding QVAR may reduce or eliminate the need for systemic corticosteroids.
Important Limitation of Use: QVAR Inhalation Aerosol is NOT indicated for the relief of acute bronchospasm.
IMPORTANT SAFETY INFORMATION
- QVAR is contraindicated in the primary treatment of status asthmaticus or other acute episodes of asthma where intensive measures are required
- QVAR is also contraindicated in patients with known hypersensitivity to beclomethasone dipropionate or any of the ingredients in QVAR
- Localized infections with Candida albicans have occurred in the mouth and pharynx in some patients receiving QVAR. Advise rinsing of mouth after use. If oropharyngeal candidiasis develops, QVAR may need to be temporarily interrupted under close medical supervision
- Instruct patients to contact their physicians immediately for re-evaluation if episodes of asthma that are not responsive to bronchodilators occur during the course of treatment with QVAR
- Particular care is needed in patients who are transferred from systemically active corticosteroids to QVAR because of the possibility of deaths due to adrenal insufficiency. Patients should be tapered when switching from systemic corticosteroids to QVAR
- Patients who are on drugs that suppress the immune system, such as corticosteroids, are more susceptible to infections than healthy individuals and should avoid exposure to chicken pox or measles. Inhaled
corticosteroids should be used with caution, if at all, in patients with untreated active or quiescent tuberculosis infection of the respiratory tract; untreated systemic fungal, bacterial, parasitic, or viral infections; or ocular herpes simplex
|
|
|
- Inhaled corticosteroids may produce inhalation induced bronchospasm with an immediate increase in wheezing after dosing that may be life-threatening. If this occurs with QVAR, it should be treated immediately with an inhaled, short-acting bronchodilator. Treatment with QVAR should be discontinued and alternate therapy instituted
- Hypersensitivity reactions, such as urticaria, angioedema, rash, and bronchospasm, may occur after administration of QVAR. Discontinue QVAR if such reactions occur
- It is possible that systemic corticosteroid effects such as hypercorticism and adrenal suppression may appear in a small number of patients, particularly at higher than recommended doses. If such changes occur, reduce the
QVAR dose slowly, consistent with accepted procedures for reducing systemic corticosteroids and for management of asthma symptoms
- Orally inhaled corticosteroids, including QVAR, may cause a reduction in growth velocity when administered to pediatric patients. Routinely monitor the growth of pediatric patients receiving QVAR. To minimize the systemic effects, titrate to the lowest dosage that effectively controls symptoms
- Decreases in bone mineral density have been observed with long-term administration of products containing inhaled corticosteroids. Patients with major risk factors for decreased bone mineral content should be monitored and treated with established standards of care
- Glaucoma, increased intraocular pressure, and cataracts have been reported following the long-term administration of inhaled corticosteroids. Therefore, close monitoring
is warranted in patients with a change in vision or with a history of increased intraocular pressure, glaucoma, and/ or cataracts
- Common side effects of QVAR and placebo in clinical trials included, but were not limited to, headache (12% and 9% respectively), pharyngitis (8% and 4% respectively), oral symptoms inhalation route (3% and 2% respectively), and sinusitis (3% and 2% respectively)
|
|
|
|
Please click here for the full Prescribing Information.
REFERENCE: 1. Fingertip Formulary®. Glen Rock, NJ: Fingertip Formulary, LLC; May 2015.

This email was sent to *|EMAIL|*
why did I get this? *|LIST:DESCRIPTION|*
forward to a friend unsubscribe from this list update subscription preferences
Our mailing address is:
American College of Allergy, Asthma and Immunology
85 West Algonquin Road, Suite 550
Arlington Heights, IL 60005 USA
|
|
|
|
|


1.5.0
components/test : Test component
HTMLElement
:
returns test component's node
*
elements/test : Test elements
HTMLElement
:
returns test element's node
*
constants/routes.js : Routes constant
HTMLElement
:
The matched component with the URL
*
containers/app/action.js : TEST action factory
(any)
the payload of the action
Object
:
the test action object
*
containers/app/epic.js : test epic
Array
:
an array of actions to be dispatched
*
containers/home/action.js : HOME_TEST action factory
(any)
the payload of the action
Object
:
the test action object
*
containers/home/epic.js : test epic
Array
:
an array of actions to be dispatched
*
containers/app/action.js : TEST_SUCCESS action factory
(any)
the payload of the action
Object
:
the testSuccess action object
*
containers/home/action.js : HOME_TEST_SUCCESS action factory
(any)
the payload of the action
Object
:
the testSuccess action object
*
containers/app/action.js : TEST_ERROR action factory
(any)
the payload of the action
Object
:
the testError action object
*
containers/home/action.js : HOME_TEST_ERROR action factory
(any)
the payload of the action
Object
:
the testError action object
*
containers/app/action.js : TEST_CANCEL action factory
(any)
the payload of the action
Object
:
the testCancel action object
*
containers/home/action.js : HOME_TEST_CANCEL action factory
(any)
the payload of the action
Object
:
the testCancel action object
*
containers/app : App container
Extends React.Component
containers/app/reducer.js : app reducer
(Object
= initialState
)
the state of the app container
(Object)
the redux action instance
Object
:
returns the new state
*
containers/home : Home container
Extends React.Component
containers/home/reducer.js : home reducer
(Object
= initialState
)
the state of the home container
(Object)
the redux action instance
Object
:
returns the new state
*
hoc/asyncComponent : calls the component asynchronously
(Promise)
a promise to load the file that returns a component
class
:
the loaded react component or null
*
hoc/cleanOnUnmount/action.js : RESET action factory
Object
:
the reset action object
*
hoc/cleanOnUnmount : maps state to props function
(Object)
the state of the container
Object
:
state
*
hoc/reduxConnect : maps state to props function
(Object)
the state of the container
Object
:
state
*
hoc/cleanOnUnmount : connects state and actions to the component
(Object)
the react component that needs to be connected to the actions and state
(Object)
the action factories of the component
(Object
= mapStateToProps
)
the state factory function
class
:
returns a react component
*
hoc/cleanOnUnmount : creates a wrapper over the component and dispatches the reset action on componentWillUnmount
(Object)
the react component that needs to be connected to the actions and state
(Object)
the action factories of the component
(Object)
the state factory function
class
:
returns the wrapped react component
*
hoc/passPropsToChild : passes properties to a single component
(class)
the child component
(Object)
the properties to be assigned to the component
Function
:
a factory returning the component with assigned properties
*
hoc/passPropsToChildren : passes properties to a multiple component
(Set)
a set of child components
(Object)
the properties to be assigned to the components
Function
:
a factory returning the components with assigned properties
*
hoc/reduxConnect : connects state and actions to the component
(Object)
the react component that needs to be connected to the actions and state
(Object)
the action factories of the component
(Object
= mapStateToProps
)
the state factory function
class
:
returns a react component
*
hoc/cleanOnUnmount/reducer.js : the cleanOnUnmount HOC reducer factory
(Function)
the current reducers factory of the component
Function
:
combination of the current reducer factory and the new (with reset functionality) reducer factory
*


Health Chain
Logout
Dashboard
Create New Patient
List of Patients
Dashboard
List of Patients
List of Patients
Medical Record
Please enter the following details.
Type of Interaction
Visit
Scheduled Appointment
Phone call
Date of issue
Notes
Prescription
Outcome
Resolved
Another visit required
Referred to hospital
Medical Record
Interaction Dates
Medical Record
Interaction Type:
Date of issue:
Notes:
Prescription:
Outcome:
Ready to Leave?
×
Select "Logout" below if you are ready to end your current session.


Input 1 (has value)
Input 2 (hidden)
Input 3 (should get focus)
Input 4 - should get focus when collapsible is opened.
Open collapsible.
Input 5 - inject element with autofocus.
inject autofocus input here
Elements in the iframe below should not get the focus.