The W3C Pointer Events specification allows you to develop for a single event model that supports various input types. Instead of writing code for multiple event types, or having to use feature detection on page load that forces one event model over the other, Pointers allows you to write one event model that works everywhere. To make the transition easy, Pointer Events builds upon the Event Model of Mouse Events. This means that code that’s written for mouse events is going to be very easy to upgrade to Pointers.
There’s a lot of great content out there on how to implement pointers. Microsoft’s original post on pointer event implementation in IE10 and Windows 8 Apps is a great place to start learning about Pointers. To see an example of how to convert a current mouse based app into a pointers based app, I suggest you check out my channel 9 video on pointers. In this post I want to focus on a different aspect of pointers. Along with the multiple input support, and ease of implementation, Pointer Events also provide a wealth of new data values that can be quite useful in your applications. This post will look in depth at that data.
The code samples will all use the W3C spec pointer names such as “pointermove” and “pointerup”, however in practice this spec is not finalized, so the working code samples will be using the prefixed version such as “MSPointerMove” and “MSPointerUp”.
 Let’s look at an example you might implement for the Mouse Event Model:
1 2 3 4 5 6 7 8 9 |
|
This same code will also run with Pointer Events:
1 2 3 4 5 6 7 8 |
|
Every value and method will run the same. The main difference is that Pointers aren’t single threaded as Mouse Events are (you can only have one mouse pointer on the screen at a time). So if you have two Pointers on the screen, say two fingers on your touch screen, or one finger and one mouse, this event will be fired twice.
The “upgrade” comes in all the additional data that is available when you use Pointer Events.
The Event Type
Since a Pointer Event will be fired no matter what type of input you are using, it’s sometimes important to know what type of input is firing the Event. While accessing the event object, you can retrieve the pointer type like so:
1 2 3 4 5 6 |
|
The type will return one of three value types:
-mouse: movement with a mouse -pen: movement with a pressure sensitive pen (not a capacitive stylus) -touch: any input from the touch screen
Note that the original spec, and what is implemented In IE10, provides number values that correspond with the input types. The value will return either a 2(touch), 3(pen) or 4(mouse).
For implementing pointers today, I actually check for both the string value or the number to be sure I support both the current implementation and the final spec:
1 2 3 4 5 6 7 8 9 |
|
New Values for All Pointer Types
There is a range of new values packed into the Pointer Event Object that is common across all pointer types. Each of these expose new values that provide valuable data for interaction development
PointerID: each pointer interaction is given a unique ID within your page and session. This number will be consistent across events for each interaction. For Example, a “pointerdown” event may be given a PointerID of 127, the subsequent “pointermove” and “pointerend” events will all have the same PointerID. This could be helpful for tracking which finger is doing what when there are multiple touch screen pointers on the screen at once. You can access the value as below:
1 2 3 4 5 |
|
isPrimary: When multiple Pointer Events are on the screen at once, one of them will be assigned as the primary pointer. If one of them is of the Pointer type of mouse, it will be the primary, otherwise the first pointer to fire an event will be designated as the primary. This could be helpful for a developer who is building an application that is intended for a single pointer input. There is one catch, when you are using multiple pointer types on the screen at the same time, the first pointer of each type will be a primary pointer, and thus will allow you to have multiple primary pointers on the screen at the same time. The value can be accessed as such:
1 2 3 4 5 |
|
button/buttons: This isn’t a new value for pointers, but in pointers you get new information. With both a mouse and a pen, the user has buttons that can be pressed. Weather those buttons are being pressed, and which button is pressed can be determined in these two values.
The entire list of values can be found in the most recent version of the spec, and keep in mind, not all values are implemented in IE10 (or any other browser) at this point.
Pen Specific Values
There are some values that are only applicable to the pointer type of Pen. Keep in mind the pen type refers to a mechanical stylus that works with supported screen types. Capacitive styus like the types used with iPads or Surface RT register as pointer types of touch, which will be discussed next.
The following values provide data in the Pointer Event Object for pens:
tiltX/tiltY: When you hold a pen there is generally an angle associated with it. If you were to hold the pen by the end and lower it perfectly straight on the screen, the tilt would be 0, but if you were to hold it in writing position, it would have a tilt value like 90. The tilt values are returned in degrees and be accessed as such:
1 2 3 4 5 6 7 |
|
Pressure: Much of the data provided from a pen type pointer event is actually data provided from the pen to the screen. Another one of those is pressure. This is a value that reports how hard a pen is being pressed against the screen. The value is reported as a number between x and x. The value is accessed as below:
1 2 3 4 5 6 7 |
|
New Data for Touch
The Pointer Spec provides for detail touch data that just doesn’t exist in any other touch model on the web. Most significantly the actual width and height of a the touch area. Being so new, my testing showed that this value is often returned as 0 depending on the touch screen and driver installed on the device. Accessing this data follows the same patteren as the other new data:
1 2 3 4 5 6 7 |
|
Keep in mind this is related to touch pointers only, so a mouse or pen will always return 0 for these values.
Mobile Implementations
The only mobile browser that has implemented Pointers is IE10 for Windows Phone 8. Since the phone OS doesn’t support a mouse or mechanical stylus, the only pointer type that returns is touch. The user agent does accurately report the pointer type, but many of the other new pointer values (such as width and height) are currently reported as 0s.
The Sample App
I’ve been working on a sample app that helps illustrate the rich data reported through pointers. It’s a simple canvas resized to your page that shows a report from each touch point of the key data values, additionally, the new data is used to effect the drawing on the screen to make a more accurate drawing surface.
Test the app here in IE 10 or any future browser that supports pointer events, or view this video of the app in action.
Next Steps
The Pointer Event Specification is not yet finalized so changes could occur at any time (and it has changed since the version implemented in ie10). If you interested in the work that is going on around Pointers, join the working group mailing list, and encourage others in the browser maker community to implement the Pointer Even Specification in every browser.


Beagle.prototype.v1
This is a mock of what the interface looks like with the current React templates. Please comment by posting an issue.
This is a mock of what the interface looks like with the current React templates. Please comment by posting an issue.
These are the default alerts.
Example data:
This is a separate, stand alone notification banner
Example data:
Example data:
This is the Publication data box
Example data:
This is the Citation Graph section
Example data:
This is the Alternative Metrics section
Example data:
This is what Tags look like.
Example data:
This is the champion email box
This is the Annotations box
Example data:
This is the Cite box
A resuable list component
Example data:
A resuable mini component, inside Publications List
Example data:
A resuable list component
Example data:
A resuable mini component, inside Tags List
Example data:
Abstract text
Example data:
Figures taken directly from the PDF
Example data:
Links to all supplementary Information
Example data:
Adds an icon with a title for linking out
Example data:
Shows each section title and links to each section anchor
Example data:
Term Frequency–Inverse Document Frequency. Currently, this is just a list of words, although the data structure will most likely change.
Example data:
Website, media, and email for an author
Example data:
This is the Sign In // Sign Up component. It is unclear how we are going to do this; most data and capabilities are available to the user without needing to sign in. However note taking, annotation, and saving papers is not possible without signing in. If we're doing it in a modal, use it at this scale; otherwise, remove all other panels from the side panel and display just this.
The Sign Out button, which should be at the bottom of the sidebar.


Police investigate after van is set on fire
Fire service called out in early hours of this morning
by Max ChannonPolice in Plymouth are investigating a van fire in the early hours of this morning.
Firefighters were called to Northesk Street at Stoke Village at 12.33am by a resident who initially thought a house was on fire.
A spokesperson for Devon and Somerset Fire and Rescue Service said: "A fire appliance from Camels Head dealt with a van fire on a private driveway, just after midnight, following a call from a concerned resident of Northesk Street who reported smelling smoke and initially thought a house was on fire.
"Our crew were on scene within minutes of the call and confirmed at 01:00hrs that they had extinguished it using a hose reel jet, small tools and a thermal imaging camera to check for hotspots.
"After making the vehicle and area safe, duty of care was left with the Police as the cause of the fire was confirmed as deliberate ignition."
Devon and Cornwall Police have been approached for comment.


Leviticus 11:3
Whatsoever parteth the hoof, and is cloven-footed, and cheweth the cud, among the beasts, that shall ye eat.


Before @ should at least have upper, lower, or number characters
After @ should at least have one upper, lower, or number characters
It should have "." after "@"
A lowercase letter
A capital (uppercase) letter
A number
Minimum 8 characters


{% extends 'base.html' %} {% block title %}Oops{% endblock %} {% block main %}
someone dropped the Ice Cream...
image credits below!


to the website-portfolio of ARYAMAN SIROHI
I am a cse branch fresher from Visakhapatnam, Andhra Pradesh. I have always enjoyed learning about logic-based topics, but dived into programming very late(a huge regret) and am trying my best to make up for the lost time. I particularly enjoy coding in python due to its simple syntax, but what I enjoy the most is correctly solving competitive programming problems. The dopamine rush that provides is really something else!!! I have also liked web-dev, because it has allowed me to create an entirely unique site, and is a skill I have rapidly improved at even during the creation of the website.


Sales Of Cookies
Home page
New Cookie Stand :
Stand Location
Minimum Customers
Maximum Customers
Avg Cookie / Sale
Sales Factor


Money Play. How should Red play 21?
pips Red=160 White=151
(CorrectAnswer= 0/0, ErrorScore= 0)
The play made over the table was the truly awful 24/23, 13/11 which is a big blunder. It creates weaknesses and does little to improve Red's position.
There are two valid plans: a) make the 5-pt with 7/5, 6/5 or b) hit and split with 24/23, 6/4*.
Both plays have their merits with making the 5-pt coming out ahead by a couple of thousandths. I'd make the 5-pt because I like the long-term asset.
There are two valid plans: a) make the 5-pt with 7/5, 6/5 or b) hit and split with 24/23, 6/4*.
Both plays have their merits with making the 5-pt coming out ahead by a couple of thousandths. I'd make the 5-pt because I like the long-term asset.
Cube analysis 2-ply cubeless equity +0.611 (Money: +0.603) 0.696 0.257 0.028 - 0.304 0.070 0.003 Cubeful equities: 1. Double, pass +1.000 2. Double, take +1.089 (+0.089) 3. No double +0.897 (-0.103) Proper cube action: Double, pass


---
layout: post
title: Bonne Année 2011
categories:
- Personnel
tags:
- '2011'
status: publish
type: post
published: true
meta:
ratings_users: '0'
ratings_score: '0'
ratings_average: '0'
_edit_last: '1'
tmac_last_id: '256453811449786368'
---
happy new year 2011


{% load staticfiles %}
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of It is a long established fact that a reader will be distracted by the


This website is for a client of mine that owns a new app called Tourist. The app aims to open up the tourism market by putting the control in the hands of consumers. It was important to my client to maintain a similar look and feel as the app itself. The app originally didn't have a logo, and the color scheme was just that light blue. I felt that it needed a bit more oomph, plus a slightly darker color for the text, so I added in the orange as the blue's direct color complement. My client liked the change so much they designed their logo using the same orange and changed the color scheme of the app to match!
This website has to cater to three main audiences. The first are potential tourists, meaning people from all over the world looking to take a tour on demand. The language had to be simple so as not to allienate non-English-speaking tourists, and the site had to simply show how to use the app. That's where the step-by-step path using app screenshots came into play.
The next two audiences are prospective guides and referrers. You can access info about becoming a guide and a referrer directly from the homepage, with fixed navigation buttons right at the top.
Some other development choices include having two different menus for the homepage and any other page. It looked a bit silly having a navigation button for "About" when that was the first thing on the homepage, so using some PHP "if/else" language, I was able to have different menus for the different pages.
I also got to play around with animations a bit on this website. My client wanted the header to be very narrow, but still show the app's logo and tagline. I decided to keep the header tall initially with all the info they requested, and once you scroll down the site, the header shrinks, stays fixed to the top, and the tagline info disappears. It was a bit difficult to ensure this looked flawless on every device size, but the media queries hold up! After developing this, I noticed that when you click on one of the frontpage nav buttons like "How it Works", the header hides the top part of the section. I fixed this by adding a hidden :before pseudotag to each section, and giving it a height to push it down from the top along with an equal negative top margin so it doesn't actually take on that height.
Overall, the site was fun and challenging to design and build. I think it does a great job catering to all three audiences as well as make my client proud to use it!


Chester Billiards League
2019-2020
Fixture Schedule and Match Results
Postponed Match
Week 5:
Upton A v Ewloe B no date set at present
| Week 1 : 17th September 2019 | ||||
|---|---|---|---|---|
| Eastham Home Guard | 8 | v | 2 | Waverton A |
| Ewloe A | 8 | v | 2 | Upton A |
| Waverton B | 2 | v | 8 | Upton C |
| Upton B | 2 | v | 8 | Ewloe B |
| Week 2: 24th September 2019 | ||||
| Upton C | 8 | v | 2 | Eastham Home Guard |
| Ewloe B | 6 | v | 4 | Ewloe A |
| Upton B | 2 | v | 8 | Upton A |
| Waverton B | 4 | v | 6 | Waverton A |
| Week 3: 1st October 2019 | ||||
| Eastham Home Guard | 6 | v | 4 | Ewloe B |
| Upton A | 6 | v | 4 | Waverton B |
| Ewloe A | 8 | v | 2 | Upton C |
| Waverton A | 8 | v | 2 | Upton B |
| Week 4: 8th October 2019 | ||||
| Upton B | 4 | v | 6 | Eastham Home Guard |
| Waverton B | 2 | v | 8 | Ewloe A |
| Upton C | 6 | v | 4 | Upton A |
| Ewloe B | 6 | v | 4 | Waverton A |
| Week 5: 15th October 2019 | ||||
| Eastham Home Guard | 4 | v | 6 | Waverton B |
| Ewloe A | 8 | v | 2 | Upton B |
| Waverton A | 2 | v | 8 | Upton C |
| Upton A | P | v | P | Ewloe B |
| Competition Week : 22nd October 2019 | ||||
| INDIVIDUAL MATCHES | ||||
| Week 6: 29th October 2019 | ||||
| Ewloe A | 8 | v | 2 | Eastham Home Guard |
| Waverton A | 6 | v | 4 | Upton A |
| Upton C | 2 | v | 8 | Ewloe B |
| Upton B | 4 | v | 6 | Waverton B |
| Week 7: 5th November 2019 | ||||
| Eastham Home Guard | 8 | v | 2 | Upton A |
| Ewloe A | 8 | v | 2 | Waverton A |
| Upton B | 0 | v | 10 | Upton C |
| Waverton B | 8 | v | 2 | Ewloe B |
| Competition Week : 12th November 2019 | ||||
| INDIVIDUAL MATCHES | ||||
| Week 8: 19th November 2019 | ||||
| Waverton A | 2 | v | 8 | Eastham Home Guard |
| Upton A | 0 | v | 10 | Ewloe A |
| Upton C | 2 | v | 8 | Waverton B |
| Ewloe B | 4 | v | 6 | Upton B |
| Week 9: 26th November 2019 | ||||
| Eastham Home Guard | 6 | v | 4 | Upton C |
| Ewloe A | 4 | v | 6 | Ewloe B |
| Upton A | 10 | v | 0 | Upton B |
| Waverton A | 0 | v | 10 | Waverton B |
| Week 10: 3rd December 2019 | ||||
| Ewloe B | 6 | v | 4 | Eastham Home Guard |
| Waverton B | 2 | v | 8 | Upton A |
| Upton C | 2 | v | 8 | Ewloe A |
| Upton B | 2 | v | 8 | Waverton A |
| Week 11: 10th December 2019 | ||||
| Eastham Home Guard | 6 | v | 4 | Upton B |
| Ewloe A | 2 | v | 8 | Waverton B |
| Upton A | 6 | v | 4 | Upton C |
| Waverton A | 6 | v | 4 | Ewloe B |
| Week 12: 17th December 2019 | ||||
| Waverton B | 6 | v | 4 | Eastham Home Guard |
| Upton B | 2 | v | 8 | Ewloe A |
| Upton C | 8 | v | 2 | Waverton A |
| Ewloe B | 6 | v | 4 | Upton A |
| Week 13: 7th January 2020 | ||||
| Eastham Home Guard | 8 | v | 2 | Ewloe A |
| Upton A | 4 | v | 6 | Waverton A |
| Ewloe B | 6 | v | 4 | Upton C |
| Waverton B | 8 | v | 2 | Upton B |
| Week 14: 14th January 2020 | ||||
| Upton A | 8 | v | 2 | Eastham Home Guard |
| Waverton A | 8 | v | 2 | Ewloe A |
| Upton C | 4 | v | 6 | Upton B |
| Ewloe B | 8 | v | 2 | Waverton B |


These experiments eventually led to the creation of the startup Mugtug with my long-time friend Charles Pritchard. We’re developing Darkroom in HTML5 <canvas>. Darkroom is a non-destructive photo-sharing app, combining the powers of pixel-based filters with vector-based typography and drawing.
<canvas> brings Javascript programmers full-control of the colors, vectors and pixels on their screens—the visual makeup of the monitor.
The following examples deal with one area in <canvas> that hasn’t gotten much attention; creating text-effects. The variety of text-effects that can be created in <canvas> are as vast as you can imagine—these demos cover a sub-section of what is possible. Although we’re dealing with “text” in this article, the methods can be applied to any vector objects; creating exciting visuals in games, and other applications:
window.requestAnimationFrame
to create the feeling of motion.One of my favorite additions to CSS3 specs (along with border-radius, web-gradients, and others) is the ability to create shadows. It’s important to realize the differences between CSS and <canvas> shadows, specifically:
CSS uses two methods; box-shadow for box-elements, such as div, span, and so on; and text-shadow for text content.
<canvas> has one type of shadow; it’s used for all the vector objects; ctx.moveTo, ctx.lineTo, ctx.bezierCurveTo, ctx.quadradicCurveTo, ctx.arc, ctx.rect, ctx.fillText, ctx.strokeText, and so on. To create a shadow in <canvas>, tap into these four properties:
To get things started, let’s see how <canvas> can emulate CSS effects. Searching through Google images for “css text-shadow” led to a few great demos for us to emulate; Line25, and Stereoscopic, and Shadow 3D.
The stereoscopic 3D effect (see Anaglyph image for more) is an example of a simple line of code, put to great use. With the following line of CSS, we can create the illusion of depth when viewed with 3D red/cyan glasses (the kind they give you at 3D movies):
text-shadow: -0.06em 0 0 red, 0.06em 0 0 cyan;
There are two things to notice when converting this string to <canvas>:
(1) There is no shadow-blur (the third value), so there is no reason to actually run shadow, as fillText would create the same results:
var text = “Hello world!” ctx.fillStyle = “#000” ctx.fillText(text, -7, 0); ctx.fillStyle = “red” ctx.fillText(text, 0, 0); ctx.fillStyle = “cyan” ctx.fillText(text, 7, 0);
(2) EM’s aren’t supported in <canvas> so they’ll have to be converted to PX’s. We can find the conversion ratio for converting between PT, PC, EM, EX, PX and so-forth by creating an element with the same font-properties in DOM, and setting the width to the format to be measured; or instance, to capture the EM -> PX conversion, we’d measure the DOM element with a “height: 1em”, the resulting offsetHeight would be how many PX’s are in each EM.
var font = “20px sans-serif” var d = document.createElement(”span”); d.style.cssText = “font: “ + font + “ height: 1em; display: block” // the value to multiply PX’s by to convert to EM’s var EM2PX = 1 / d.offsetHeight;
In a more complex example, such as the Neon effect found on Line25, the shadowBlur property must be used to emulate the effect properly. Since the Neon effect relies on multiple shadows, we run into a problem; in <canvas> each vector object can only have one shadow. So, in order to draw multiple shadows, you must draw multiple versions of the text on top of itself. This results in alpha multiplication, and ultimately jagged edges.
I tried running ctx.fillStyle = “rgba(0,0,0,0)”
or “transparent”
to hide the text, while displaying the shadow... however, this attempt was futile;
since the shadow is a multiplication of the fillStyle alpha, the shadow can never
be more opaque than the fillStyle.
Luckily, there is a way around this, we can draw the shadow offset from the text, keeping them separated (so they’re not overlapping), and thereby hiding the text off the side of the screen:
var text = “Hello world!” var blur = 10; var width = ctx.measureText(text).width + blur * 2; ctx.textBaseline = “top” ctx.shadowColor = “#000” ctx.shadowOffsetX = width; ctx.shadowOffsetY = 0; ctx.shadowBlur = blur; ctx.fillText(text, -width, 0);
To clean this up a bit we can prevent the fillText from being drawn in the
first place (while allowing the shadow to be drawn) by adding a clipping path.
In order to create a clipping path surrounding the text, we need to know the
height of the text (called the “em-height” historically the height
of the letter “M” on a printing press), and the width of the text.
We can get the width using ctx.measureText().width
, however,
ctx.measureText().height
doesn’t exist.
Luckily, through CSS hack-ardry ( seeTypographic Metrics
for more ways to fix older implementations of <canvas> using CSS measurements),
we can find the height of the text through measuring the offsetHeight
of a <span>
with the same font-properties:
var d = document.createElement(”span”); d.font = “20px arial” d.textContent = “Hello world!” var emHeight = d.offsetHeight;
From there, we can create a rectangle to use as a clipping path; enclosing the “shadow” while removing the dummy-shape.
ctx.rect(0, 0, width, emHeight); ctx.clip();
Tying it all together, and optimizing as we go—if a shadow has no blur, fillText can be used to the same effect, saving us from setting up the clipping mask:
var width = ctx.measureText(text).width; var style = shadowStyles[text]; // add a background to the current effect ctx.fillStyle = style.background; ctx.fillRect(0, offsetY, ctx.canvas.width, textHeight - 1) // parse text-shadows from css var shadows = parseShadow(style.shadow); // loop through the shadow collection var n = shadows.length; while(n--) { var shadow = shadows[n]; var totalWidth = width + shadow.blur * 2; ctx.save(); ctx.beginPath(); ctx.rect(offsetX - shadow.blur, offsetY, offsetX + totalWidth, textHeight); ctx.clip(); if (shadow.blur) { // just run shadow (clip text) ctx.shadowColor = shadow.color; ctx.shadowOffsetX = shadow.x + totalWidth; ctx.shadowOffsetY = shadow.y; ctx.shadowBlur = shadow.blur; ctx.fillText(text, -totalWidth + offsetX, offsetY + metrics.top); } else { // just run pseudo-shadow ctx.fillStyle = shadow.color; ctx.fillText(text, offsetX + (shadow.x||0), offsetY - (shadow.y||0) + metrics.top); } ctx.restore(); } // drawing the text in the foreground if (style.color) { ctx.fillStyle = style.color; ctx.fillText(text, offsetX, offsetY + metrics.top); } // jump to next em-line ctx.translate(0, textHeight);
Since you're not going to want to enter all these <canvas> commands manually, I’ve included a simple text-shadow parser in the demo source; this way you can feed it CSS commands and have it generate <canvas> commands. Now, our <canvas> elements have a whole range of styles it can tie into. These same shadow-effects can be used on any vector object, from WebFonts to complex shapes imported from SVGs, to generative vector shapes, and so on!
View Text-Shadows in <canvas> effects.
In writing this section of the article, the Stereoscopic example made me curious. How hard it would be to create a 3D-movie-screen effect using <canvas> and two images taken from slightly different perspectives? Apparently, not too hard. The following kernel combines the red channel of the first image (data) w/ the cyan channel of the second image (data2):
data[i] = data[i] * 255 / 0xFF; data[i+1] = 255 * data2[i+1] / 0xFF; data[i+2] = 255 * data2[i+2] / 0xFF;
Visit the Stereoscopic demo to see how to create images to be enhanced with 3D glasses (cyan/magenta). Now, someone just needs to duct-tape two iPhones to their forehead, click “record video” at the same time, and we could make our own 3D movies in HTML5. Any volunteers?
Chaining multiple effects in <canvas> can be simple, but a basic knowledge of the globalCompositeOperation (GCO) is required. To compare the operations to GIMP (or Photoshop): there are 12 GCO’s in <canvas> darker, and lighter can be thought of as layer blend-modes; the other 10 operations are applied to the layers as alpha masks (one layer removes the pixels of the other layer). The globalCompositeOperation ties “layers” (or in our case, strings of code) together, combining them in new and exciting ways:
The globalCompositeOperation chart shows GCO modes at work; this chart uses a large portion of the color-spectrum and multiple levels of alpha transparency in order to see in detail what to expect. I would recommend checking out Mozilla’s globalCompositeOperation reference for textual descriptions. For further research, you can learn how the operation work in Porter Duff’s Compositing Digital Images.
My favorite mode is globalCompositeOperation=”lighter”. Lighter mixes the appended pixels similar to how light mixes; when red, green and white light are at full-intensity, we see white-light. It’s a exciting feature to play around with, especially when the <canvas> is set to a low globalAlpha; enabling finer control, and smoother edges. Lighter has been put to many uses, my recent favorite being a HTML5 desktop background creator found at http://weavesilk.com/. One of my demos, Breathing Galaxies (JS1k), also uses the lighter mode—drawing patterns from these two examples you start to see what effect this mode yields.
NOTE: There is some missing support for some of the GCO modes across the browsers that needs to be sorted out. There are six-modes that work across browsers (in Chrome, Safari, Firefox, and Opera): source-over, source-atop, destination-over, destination-out, lighter, and xor. Hopefully this will be sorted out in coming releases, for more information visit globalCompositeOperation browser handling.
In the following demo, we’re going to achieve a Photoshop-like neon-rainbow-glow with a jittered outline, by chaining effects together using the globalCompositeOperation (source-in, lighter, and darker). This demo is a progression of the “Text-Shadows in <canvas>” demo, using the same strategy in separating the shadow from the text (see previous section):
View Neon-Rainbow Jitter effect.
function neonLightEffect() { var text = "alert('"+String.fromCharCode(0x2665)+"')"; var font = "120px Futura, Helvetica, sans-serif"; var jitter = 25; // the distance of the maximum jitter var offsetX = 30; var offsetY = 70; var blur = getBlurValue(100); // save state ctx.save(); ctx.font = font; // calculate width + height of text-block var metrics = getMetrics(text, font); // create clipping mask around text-effect ctx.rect(offsetX - blur/2, offsetY - blur/2, offsetX + metrics.width + blur, metrics.height + blur); ctx.clip(); // create shadow-blur to mask rainbow onto (since shadowColor doesn't accept gradients) ctx.save(); ctx.fillStyle = "#fff"; ctx.shadowColor = "rgba(0,0,0,1)"; ctx.shadowOffsetX = metrics.width + blur; ctx.shadowOffsetY = 0; ctx.shadowBlur = blur; ctx.fillText(text, -metrics.width + offsetX - blur, offsetY + metrics.top); ctx.restore(); // create the rainbow linear-gradient var gradient = ctx.createLinearGradient(0, 0, metrics.width, 0); gradient.addColorStop(0, "rgba(255, 0, 0, 1)"); gradient.addColorStop(0.15, "rgba(255, 255, 0, 1)"); gradient.addColorStop(0.3, "rgba(0, 255, 0, 1)"); gradient.addColorStop(0.5, "rgba(0, 255, 255, 1)"); gradient.addColorStop(0.65, "rgba(0, 0, 255, 1)"); gradient.addColorStop(0.8, "rgba(255, 0, 255, 1)"); gradient.addColorStop(1, "rgba(255, 0, 0, 1)"); // change composite so source is applied within the shadow-blur ctx.globalCompositeOperation = "source-atop"; // apply gradient to shadow-blur ctx.fillStyle = gradient; ctx.fillRect(offsetX - jitter/2, offsetY, metrics.width + offsetX, metrics.height + offsetY); // change composite to mix as light ctx.globalCompositeOperation = "lighter"; // multiply the layer ctx.globalAlpha = 0.7 ctx.drawImage(ctx.canvas, 0, 0); ctx.drawImage(ctx.canvas, 0, 0); ctx.globalAlpha = 1 // draw white-text ontop of glow ctx.fillStyle = "rgba(255,255,255,0.95)"; ctx.fillText(text, offsetX, offsetY + metrics.top); // created jittered stroke ctx.lineWidth = 0.80; ctx.strokeStyle = "rgba(255,255,255,0.25)"; var i = 10; while(i--) { var left = jitter / 2 - Math.random() * jitter; var top = jitter / 2 - Math.random() * jitter; ctx.strokeText(text, left + offsetX, top + offsetY + metrics.top); } ctx.strokeStyle = "rgba(0,0,0,0.20)"; ctx.strokeText(text, offsetX, offsetY + metrics.top); ctx.restore(); };
The Zebra Reflection effect was inspired by WebDesignerWall’s excellent resource on how to spice up your page with CSS. This takes the idea a little bit further, creating a “reflection” for the text—such as what you might see in iTunes. The effect combines the fillColor (white), createPattern (zebra.png), and linearGradient (shine); this illustrates the ability to apply multiple fill types to each vector object:
View Zebra Reflection effect.
function sleekZebraEffect() { // inspired by - http://www.webdesignerwall.com/demo/css-gradient-text/ var text = "Sleek Zebra..."; var font = "100px Futura, Helvetica, sans-serif"; // save state ctx.save(); ctx.font = font; // getMetrics calculates: // width + height of text-block // top + middle + bottom baseline var metrics = getMetrics(text, font); var offsetRefectionY = -20; var offsetY = 70; var offsetX = 60; // throwing a linear-gradient in to shine up the text var gradient = ctx.createLinearGradient(0, offsetY, 0, metrics.height + offsetY); gradient.addColorStop(0.1, '#000'); gradient.addColorStop(0.35, '#fff'); gradient.addColorStop(0.65, '#fff'); gradient.addColorStop(1.0, '#000'); ctx.fillStyle = gradient ctx.fillText(text, offsetX, offsetY + metrics.top); // draw reflected text ctx.save(); ctx.globalCompositeOperation = "source-over"; ctx.translate(0, metrics.height + offsetRefectionY) ctx.scale(1, -1); ctx.font = font; ctx.fillStyle = "#fff"; ctx.fillText(text, offsetX, -metrics.height - offsetY + metrics.top); ctx.scale(1, -1); // cut the gradient out of the reflected text ctx.globalCompositeOperation = "destination-out"; var gradient = ctx.createLinearGradient(0, offsetY, 0, metrics.height + offsetY); gradient.addColorStop(0.0, 'rgba(0,0,0,0.65)'); gradient.addColorStop(1.0, '#000'); ctx.fillStyle = gradient; ctx.fillRect(offsetX, offsetY, metrics.width, metrics.height); // restore back to original transform state ctx.restore(); // using source-atop to allow the transparent .png to show through to the gradient ctx.globalCompositeOperation = "source-atop"; // creating pattern from <image> sourced. ctx.fillStyle = ctx.createPattern(image, 'repeat'); // fill the height of two em-boxes, to encompass both normal and reflected state ctx.fillRect(offsetX, offsetY, metrics.width, metrics.height * 2); ctx.restore(); };
The <canvas> specs doesn’t touch on the subject of “inner” vs. “outer” shadows. In fact, at first appearance, you may expect “inner” shadow isn’t supported. This is not the case. It’s just a bit tricker to enable ;) As proposed in a recent post from F1LT3R, you can create inner-shadows using the unique properties of clockwise vs. anti-clockwise winding rules. To do this, you create an “inner-shadow” by drawing container rectangle, and then, using opposite winding rules, draw a cutout shape—creating the inverse of the shape.
The following example allows for the inner-shadow and fillStyle to be stylized with color+gradient+pattern simultaneously. You can specify pattern rotation individually; notice the zebra stripes are now perpendicular to each-other. A clipping mask the size of the bounding-box is used removing the need for a super-large container to enclose the cutout shape—improving the speed by preventing the unnecessary parts of the shadow from being processed.
View Inner-shadow effect.
function innerShadow() { function drawShape() { // draw anti-clockwise ctx.arc(0, 0, 100, 0, Math.PI * 2, true); // Outer circle ctx.moveTo(70, 0); ctx.arc(0, 0, 70, 0, Math.PI, false); // Mouth ctx.moveTo(-20, -20); ctx.arc(30, -30, 10, 0, Math.PI * 2, false); // Left eye ctx.moveTo(140, 70); ctx.arc(-20, -30, 10, 0, Math.PI * 2, false); // Right eye }; var width = 200; var offset = width + 50; var innerColor = "rgba(0,0,0,1)"; var outerColor = "rgba(0,0,0,1)"; ctx.translate(150, 170); // apply inner-shadow ctx.save(); ctx.fillStyle = "#000"; ctx.shadowColor = innerColor; ctx.shadowBlur = getBlurValue(120); ctx.shadowOffsetX = -15; ctx.shadowOffsetY = 15; // create clipping path (around blur + shape, preventing outer-rect blurring) ctx.beginPath(); ctx.rect(-offset/2, -offset/2, offset, offset); ctx.clip(); // apply inner-shadow (w/ clockwise vs. anti-clockwise cutout) ctx.beginPath(); ctx.rect(-offset/2, -offset/2, offset, offset); drawShape(); ctx.fill(); ctx.restore(); // cutout temporary rectangle used to create inner-shadow ctx.globalCompositeOperation = "destination-out"; ctx.fill(); // prepare vector paths ctx.beginPath(); drawShape(); // apply fill-gradient to inner-shadow ctx.save(); ctx.globalCompositeOperation = "source-in"; var gradient = ctx.createLinearGradient(-offset/2, 0, offset/2, 0); gradient.addColorStop(0.3, '#ff0'); gradient.addColorStop(0.7, '#f00'); ctx.fillStyle = gradient; ctx.fill(); // apply fill-pattern to inner-shadow ctx.globalCompositeOperation = "source-atop"; ctx.globalAlpha = 1; ctx.rotate(0.9); ctx.fillStyle = ctx.createPattern(image, 'repeat'); ctx.fill(); ctx.restore(); // apply fill-gradient ctx.save(); ctx.globalCompositeOperation = "destination-over"; var gradient = ctx.createLinearGradient(-offset/2, -offset/2, offset/2, offset/2); gradient.addColorStop(0.1, '#f00'); gradient.addColorStop(0.5, 'rgba(255,255,0,1)'); gradient.addColorStop(1.0, '#00f'); ctx.fillStyle = gradient ctx.fill(); // apply fill-pattern ctx.globalCompositeOperation = "source-atop"; ctx.globalAlpha = 0.2; ctx.rotate(-0.4); ctx.fillStyle = ctx.createPattern(image, 'repeat'); ctx.fill(); ctx.restore(); // apply outer-shadow (color-only without temporary layer) ctx.globalCompositeOperation = "destination-over"; ctx.shadowColor = outerColor; ctx.shadowBlur = 40; ctx.shadowOffsetX = 15; ctx.shadowOffsetY = 10; ctx.fillStyle = "#fff"; ctx.fill(); };
From these examples you can see, using globalCompositeOperation, we can chain-effects together, producing more elaborate effects (utilizing masking and blending). The screen is your oyster ;)
In <canvas>, going from the unicode character 0x2708:
... to this shaded example:
... can be achieved by multiple calls to ctx.strokeText()
with a thin lineWidth (0.25),
while slowly decreasing the x-offset and alpha; giving our vector elements the feeling of motion.
By mapping the elements XY position to a sine/cosine wave, and cycling through colors using the HSL property, we can create more interesting effects, such as this “biohazard” example:
HSL is a newly supported format in the CSS3 specs. Where HEX was designed for computers, HSL is designed to be human readable.
Illustrating the ease of HSL; to cycle through the color-spectrum, we’d simply increment the “hue” from 360; the hue is mapped to the spectrum in cylindric fashion.  Saturation controls how bright or vivid a color is; grey’s are created with a saturation of 0%, and vivid colors are created using a value of 100%.
Since HSL is a recent standard, you may wish to continue supporting older browsers, which is possible via color-space conversion. The following code accepts an HSL object { H: 360, S: 100, L: 100} and outputs a RGB object { R: 255, G: 255, B: 255 }. From there, you can use those values to create your rgb or rgba string. For more in depth information see Wikipedia’s insightful article on HSL.
// HSL (1978) = H: Hue / S: Saturation / L: Lightness HSL_RGB = function (o) { // { H: 0-360, S: 0-100, L: 0-100 } var H = o.H / 360, S = o.S / 100, L = o.L / 100, R, G, B, _1, _2; function Hue_2_RGB(v1, v2, vH) { if (vH < 0) vH += 1; if (vH > 1) vH -= 1; if ((6 * vH) < 1) return v1 + (v2 - v1) * 6 * vH; if ((2 * vH) < 1) return v2; if ((3 * vH) < 2) return v1 + (v2 - v1) * ((2 / 3) - vH) * 6; return v1; } if (S == 0) { // HSL from 0 to 1 R = L * 255; G = L * 255; B = L * 255; } else { if (L < 0.5) { _2 = L * (1 + S); } else { _2 = (L + S) - (S * L); } _1 = 2 * L - _2; R = 255 * Hue_2_RGB(_1, _2, H + (1 / 3)); G = 255 * Hue_2_RGB(_1, _2, H); B = 255 * Hue_2_RGB(_1, _2, H - (1 / 3)); } return { R: R, G: G, B: B }; };
In the past, to create animations in Javascript, there was two choices; setTimeout
,
and setInterval
.
window.requestAnimationFrame
, is the new standard here to replace
both; saving the world electricity (and your computer a few heartbeats) by
allowing the browser to regulate animations based on available resources.
Some important features include:
At the time of writing, vender specific prefixes are required to use requestAnimationFrame
.
Paul Irish created a shim layer that has cross-vender support, in
requestAnimationFrame for
smart animating:
// shim layer with setTimeout fallback window.requestAnimFrame = (function(){ return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(/* function */ callback, /* DOMElement */ element){ window.setTimeout(callback, 1000 / 60); }; })();
Taking that a bit further, the more ambitious might tie this together with a poly-fill such as requestAnimationFrame.js (there are a few features to be worked out) that would support older browsers to a further extent, while switching to this new standard.
The following example shows how to create an animation, sending thousands of calls to strokeText through a low alpha without stalling the browser. The controls are a bit strange, but it produces some cool results:
View Spaceage effect.
(function animate() { var i = 50; while(i--) { if (n > endpos) return; n += definition; ctx.globalAlpha = (0.5 - (n + startpos) / endpos) * alpha; if (doColorCycle) { hue = n + color; ctx.strokeStyle = "hsl(" + (hue % 360) + ",99%,50%)"; // iterate hue } var x = cos(n / cosdiv) * n * cosmult; // cosine var y = sin(n / sindiv) * n * sinmult; // sin ctx.strokeText(text, x + xoffset, y + yoffset); // draw rainbow text } timeout = window.requestAnimationFrame(animate, 0); })();
With support from across browser vendor-sphere, there is no question about the future of <canvas> it can be ported to the iPhone/Android/Desktop executables using PhoneGap, or Titanium.
Source-code can be found in CanvasTextEffects.zip
{% endblock %}


admin
Lesson
List of Lesson
Chapter
List of Chapter
Signout
Admin Name
Admin
Lesson
List of Lesson
Chapter
List Chapter
Lesson Page
Lesson
List of Lesson
Lesson Title
Content
Image Url
Action


Hi
Finally got my emontx and base finished and running using the 1ct sketches to post to emoncms. I know I should be able to work this out, but is there a simple way to slow down the number of samples to, say, once every couple of minutes?
Also I calibrated the tx easily using a plug in meter next to the current clamp/voltage sensor and a load. However now I've hooked up to the main supply I'm getting some very strange PF readings. The nearest mains socket for the voltage sensor is some way away from the current clamp and I suspect this is causing the problem. How close to you need to get the voltage sampling point to the current clamp to ensure accurate readings?
Thanks
Chris
Re: Adjusting sample rate
Hi Chris,
Good work getting your emonTx up and running. The post rate can easily be slowed down by increasing the ammount of time the emonTx sleeps or delays in between readings. See line 140-150 of emonTx singleCT voltage.
Are you using the latest version of the emonTx 1CT voltage example for github? Calibaration was greatly improved with an update last night.
I have never investiagted the effects of plugging in the AC adapter some way from the CT. My inital thoughs are it shouldnt make too much difference. I'll try and look into it.
Re: Adjusting sample rate
Thanks Glyn
I'll give thpost rate change a try. Do I need to make any corresponding changes to the emonbase sketch too?
I was using the version from github from a couple of days ago. The calibration seemed pretty close out of the box so haven't made any changes to the coefficients.
I'll do some more investigating re the strange readings. It was very stable monitoring a resistive load (kettle) on an extension lead modified to enable voltage and current readings. When I tried to monitor the main leads from my supply meter the power factor seemed unusual (0.4) and the power redings were fluctuatiing wildly. The only thing I could think of is that my distribution board is about 10 meters from my meter and therefore the only available socket for the mains adaptor is effectively 20 meters away from the current clamp.
Cheers
Chris
Re: Adjusting sample rate
No changes should be needed to emonBase. The emonBase forwards any data received from emonTx up to emoncms as and when it receives it.
Definitely somthing wrong here. It should make no difference where the AC-AC monitor is plugged in, the waveform should be the same. Start by double checking all the components are soldered in the right place in the emonTx. Component diagram here: http://openenergymonitor.org/emon/node/209
If you using the AC-AC adapter obtained from us then I would highly recomend using the new calibration. In my tests I found significant discrepancy when using the older calibration. Have you got a plug in energy monitor you can test and calibrate the system against?
Re: Adjusting sample rate
Pretty sure I am using the latest calibration - I must have picked up your updates just as you posted them.
I suspect that I've got a bad joint somewhere as all components are in the right place, I did use a plug in meter originally and, as i said, the calibration was pretty much spot on straight away. All I've done since is moved the kit and wired up to the main meter input to the house - so perhaps something has come loose in the move:-(
Anyway, thanks for the advice. I'll go through everything again and try it out later on. Will let you know how it goes.
Chris
Re: Adjusting sample rate
Glyn
I couldn't find anything wrong so set it all up again and its working fine. I'm posting to an account on your demo emoncms site to test it all and all looks good. Awsome result:-)
BTW Is there an easy way to convert the std kwh and kwh day functions in emoncms to just sum positive readings (ie ignore PV generated output being fed back to the grid)??
Cheers
Chris


{% extends "default.html" %} {% block dynamicSwitchCustom %}
{% endblock %} {% block "contents" %}
The list contains configuration and their respective variables that can be used with {{ $names.company.lower }} devices. Some of which will automatically appear for devices with supervisor v7.0.0 and greater. While they may not automatically populate in the Configuration dashboard, most of these variables can still be used with older supervisor versions, so be sure to check the *Supported by* context for each configuration.
In addition to these values, there may be device-type specific configuration variables that can be set. For example, these are a few of the values that apply to Raspberry Pi devices, corresponding to the contents of the Raspberry Pi config.txt file.
Warning: Wrong configuration may potentially leave a device inaccessible. Be sure to try your changes in a controlled environment before applying them to production devices.
| Variable Name | Description | Will reboot | Type | Default |
|---|
You can find more information on updating config.txt through configuration variables in our Advanced Boot Configuration Guide. In addition to the dashboard, this configuration can be also be set using the API or any of its clients, including the SDK and CLI.
{% endblock %}


Graph vertical background areas
Vertical background ranges can be created with a custom start, end, className, and color.


Elder Filaur:
Do you want a Giant's Codex?
Very well. Which one did you have in mind?
Trade 667 Mineral Fragments for Giant's Codex: Oblivion.
Trade 1000 Mineral Fragments for Giant's Codex: Discipline.


{% extends "tutorial.html" %} {% block pagebreadcrumb %}{{ tut.title }}{% endblock %} {% block head %} {% endblock %} {% block iscompatible %} //return !!Modernizr.gamepads return !!navigator.getGamepads || !!navigator.webkitGetGamepads || !!navigator.webkitGamepads || !!navigator.mozGetGamepads || !!navigator.mozGetGamepads; {% endblock %} {% block html5badge %} {% endblock %} {% block content %}
{% include "warning.html" %}
Let the novices keep their keyboards for adventure games, their precious multi-touchy-feely fingertips for fruit cutting, and their fancy newfangled motion sensors for pretending they can dance like Michael Jackson. (Newsflash: They can't.) But you're different. You're better.  For you, the games begin and end with a gamepad in your hands.
But wait. Aren't you out of luck if you want to support a gamepad in your web app? Not anymore. The brand new Gamepad API comes to the rescue, allowing you to use JavaScript to read the state of any gamepad controller attached to your computer. It's so fresh off the presses, that it only landed in Chrome 21 last week – and it's also on the verge of being supported in Firefox (currently available in a special build).
That turned out to be pretty great timing, because we get a chance to use it recently in the Hurdles 2012 Google doodle. This article will briefly explain how we added Gamepad API to the doodle, and what we learned during the process.
Ephemeral as they are, interactive doodles tend to be pretty complex under the hood. So that it's easier to demonstrate what we're talking about, we took the gamepad code from the doodle, and put together a simple gamepad tester. You can use it to see whether your USB gamepad works correctly – and also look under the hood to examine how it's done.
We embedded it straight below, or you can access the gamepad tester separately.
As of early August 2012:
Generally, any modern gamepad that is supported by your system natively should work. We tested various gamepads from off-brand USB controllers on a PC, through PlayStation 2 gamepads connected via a dongle to a Mac, all the way to Bluetooth controllers paired with a Chrome OS notebook.
This is a photo of some controllers we used for testing our doodle – "Yes, mom, that really is what I do at work." If your controller doesn't work, or if the controls are mapped incorrectly, please file a bug against Chrome or Firefox . (Please test in the absolutely newest version of each browser to make sure it's not already fixed.)
Note: Some gamepads have a switch at the back telling them to use a different mode of operation. Toggling that might make them work better.
Note: Some gamepads have a compatibility mode switch up front that makes four-axis d-pad and the left analogue stick switch places (logically).
Easy enough in Chrome:
var gamepadSupportAvailable = !!navigator.webkitGetGamepads || !!navigator.webkitGamepads;
It does not seem possible to detect this in Firefox just yet – everything is event-based, and all the event handlers need to be attached to window, which prevents a typical technique of detecting event handlers from working.
But we're sure that is temporary. The ever-so-awesome Modernizr already tells you about the Gamepad API, so we recommend this for all your current and future detecting needs:
var gamepadSupportAvailable = Modernizr.gamepads;
Even if you connect the gamepad, it won't manifest itself in any way unless the user presses any of its buttons first. This is to prevent fingerprinting, although proves to be a bit of a challenge for user experience: you can't ask the user to press the button or provide gamepad-specific instructions because you have no idea whether they connected their controller.
Once you clear that hurdle (sorry...), however, more await.
Chrome's implementation of the API exposes a function – navigator.webkitGetGamepads()
– you can use to get a list of all the gamepads currently plugged into to the system, alongside with their current state (buttons + sticks). The first connected gamepad will be returned as the first entry in the array, and so on.
(This function call just recently replaced an array you could access directly – navigator.webkitGamepads[]
. As of early August 2012, accessing this array is still necessary in Chrome 21, while the function call works in Chrome 22 and newer. Moving forward, the function call is the recommended way to use the API, and will slowly trickle to all the installed Chrome browsers.)
The so-far-implemented part of the spec requires you to continuously check the state of connected gamepads (and compare it to the previous one if necessary), instead of firing events when things change. We relied on requestAnimationFrame() to set up polling in the most efficient and battery-friendly way. For our doodle, even though we already have a requestAnimationFrame()
loop to support animations, we created a second completely separate one – it was simpler to code and shouldn't affect performance in any way.
Here is the code from the tester:
/**
* Starts a polling loop to check for gamepad state.
*/
startPolling: function() {
// Don't accidentally start a second loop, man.
if (!gamepadSupport.ticking) {
gamepadSupport.ticking = true;
gamepadSupport.tick();
}
},
/**
* Stops a polling loop by setting a flag which will prevent the next
* requestAnimationFrame() from being scheduled.
*/
stopPolling: function() {
gamepadSupport.ticking = false;
},
/**
* A function called with each requestAnimationFrame(). Polls the gamepad
* status and schedules another poll.
*/
tick: function() {
gamepadSupport.pollStatus();
gamepadSupport.scheduleNextTick();
},
scheduleNextTick: function() {
// Only schedule the next frame if we haven't decided to stop via
// stopPolling() before.
if (gamepadSupport.ticking) {
if (window.requestAnimationFrame) {
window.requestAnimationFrame(gamepadSupport.tick);
} else if (window.mozRequestAnimationFrame) {
window.mozRequestAnimationFrame(gamepadSupport.tick);
} else if (window.webkitRequestAnimationFrame) {
window.webkitRequestAnimationFrame(gamepadSupport.tick);
}
// Note lack of setTimeout since all the browsers that support
// Gamepad API are already supporting requestAnimationFrame().
}
},
/**
* Checks for the gamepad status. Monitors the necessary data and notices
* the differences from previous state (buttons for Chrome/Firefox,
* new connects/disconnects for Chrome). If differences are noticed, asks
* to update the display accordingly. Should run as close to 60 frames per
* second as possible.
*/
pollStatus: function() {
// (Code goes here.)
},
If you only care about one gamepad, getting its data might be as simple as:
var gamepad = navigator.webkitGetGamepads && navigator.webkitGetGamepads()[0];
If you want to be a bit more clever, or support more than one player simultaneously, you will need to add a few more lines of code to react to more complex scenarious (two or more gamepads connected, some of them getting disconnected mid-way, etc.). You can look at the source code of our tester, function pollGamepads()
, for one approach on how to solve this.
Firefox uses an alternative, better way described in the Gamepad API spec. Instead of asking you to poll, it exposes two events – MozGamepadConnected
and MozGamepadDisconnected
– which are fired whenever a gamepad gets plugged in (or, more precisely, plugged in and "announced" by pressing any of its buttons) or unplugged. The gamepad object that will continue to reflect its future state is passed as the .gamepad
parameter of the event object.
From the tester source code:
/**
* React to the gamepad being connected. Today, this will only be executed
* on Firefox.
*/
onGamepadConnect: function(event) {
// Add the new gamepad on the list of gamepads to look after.
gamepadSupport.gamepads.push(event.gamepad);
// Start the polling loop to monitor button changes.
gamepadSupport.startPolling();
// Ask the tester to update the screen to show more gamepads.
tester.updateGamepads(gamepadSupport.gamepads);
},
In the end, our initialization function in the tester, supporting both approaches, looks like this:
/**
* Initialize support for Gamepad API.
*/
init: function() {
// As of writing, it seems impossible to detect Gamepad API support
// in Firefox, hence we need to hardcode it in the third clause.
// (The preceding two clauses are for Chrome.)
var gamepadSupportAvailable = !!navigator.webkitGetGamepads ||
!!navigator.webkitGamepads ||
(navigator.userAgent.indexOf('Firefox/') != -1);
if (!gamepadSupportAvailable) {
// It doesn't seem Gamepad API is available – show a message telling
// the visitor about it.
tester.showNotSupported();
} else {
// Firefox supports the connect/disconnect event, so we attach event
// handlers to those.
window.addEventListener('MozGamepadConnected',
gamepadSupport.onGamepadConnect, false);
window.addEventListener('MozGamepadDisconnected',
gamepadSupport.onGamepadDisconnect, false);
// Since Chrome only supports polling, we initiate polling loop straight
// away. For Firefox, we will only do it if we get a connect event.
if (!!navigator.webkitGamepads || !!navigator.webkitGetGamepads) {
gamepadSupport.startPolling();
}
}
},
Every gamepad connected to the system will be represented by an object looking something like this:
id: "PLAYSTATION(R)3 Controller (STANDARD GAMEPAD Vendor: 054c Product: 0268)"
index: 1
timestamp:<PHONE_NUMBER>8498
buttons: Array[8]
0: 0
1: 0
2: 1
3: 0
4: 0
5: 0
6: 0.03291
7: 0
axes: Array[4]
0: -0.01176
1: 0.01961
2: -0.00392
3: -0.01176
The top few fields are simple metadata:
id
: a textual description of the gamepadindex
: an integer useful to tell different gamepads attached to one computer aparttimestamp
: the timestamp of the last update of the button/axes state (currently only supported in Chrome)Today's gamepads are not exactly what your grandpa might have used to save the princess in the wrong castle – they typically have at least sixteen separate buttons (some discrete, some analogue), in addition to two analogue sticks. Gamepad API will tell you about all the buttons and analogue sticks that are reported by the operating system.
Once you get the current state in the gamepad object, you can access the buttons via .buttons[]
and sticks via .axes[]
arrays. Here's a visual summary of what they correspond to:
The spec asks the browser to map first sixteen buttons and four axes to:
gamepad.BUTTONS = {
FACE_1: 0, // Face (main) buttons
FACE_2: 1,
FACE_3: 2,
FACE_4: 3,
LEFT_SHOULDER: 4, // Top shoulder buttons
RIGHT_SHOULDER: 5,
LEFT_SHOULDER_BOTTOM: 6, // Bottom shoulder buttons
RIGHT_SHOULDER_BOTTOM: 7,
SELECT: 8,
START: 9,
LEFT_ANALOGUE_STICK: 10, // Analogue sticks (if depressible)
RIGHT_ANALOGUE_STICK: 11,
PAD_TOP: 12, // Directional (discrete) pad
PAD_BOTTOM: 13,
PAD_LEFT: 14,
PAD_RIGHT: 15
};
gamepad.AXES = {
LEFT_ANALOGUE_HOR: 0,
LEFT_ANALOGUE_VERT: 1,
RIGHT_ANALOGUE_HOR: 2,
RIGHT_ANALOGUE_VERT: 3
};
The extra buttons and axes will be appended to the ones above. Please note that neither sixteen buttons nor four axes are guaranteed, though – be ready for some of them to simply be undefined.
The buttons can take values from 0.0 (not pressed) to 1.0 (pressed completely). The axes go from -1.0 (completely left or up) through 0.0 (center) to 1.0 (completely right or down).
Ostensibly, every button could be an analogue one – this is somewhat common for shoulder buttons, for example. Therefore, it is best to set a threshold rather than just compare it bluntly to 1.00 (what if an analogue button happens to be slightly dirty? It might never reach 1.00). In our doodle we do it this way:
gamepad.ANALOGUE_BUTTON_THRESHOLD = .5;
gamepad.buttonPressed_ = function(pad, buttonId) {
return pad.buttons[buttonId] &&
(pad.buttons[buttonId] > gamepad.ANALOGUE_BUTTON_THRESHOLD);
};
You can do the same to turn analogue sticks into digital joysticks. Sure, there is always the digital pad (d-pad), but your gamepad might not have one. Here's our code to handle that:
gamepad.AXIS_THRESHOLD = .75;
gamepad.stickMoved_ = function(pad, axisId, negativeDirection) {
if (typeof pad.axes[axisId] == 'undefined') {
return false;
} else if (negativeDirection) {
return pad.axes[axisId] < -gamepad.AXIS_THRESHOLD;
} else {
return pad.axes[axisId] > gamepad.AXIS_THRESHOLD;
}
};
In some cases, like a flight simulator game, continuously checking and reacting to stick positions or button presses makes more sense... but for things like Hurdles 2012 doodle? You might wonder: Why do I need to check for buttons every single frame? Why can't I get events like I do for keyboard or mouse up/down?
Good news is, you can. Bad news is – in the future. It's in the spec, but not implemented in any browser yet.
In the meantime, your way out is comparing the current and previous state, and calling functions if you see any difference. For example:
if (buttonPressed(pad, 0) != buttonPressed(oldPad, 0)) {
buttonEvent(0, buttonPressed(pad, 0) ? 'down' : 'up');
}
Tip: Compare timestamps of the current and previously polled gamepad data (the timestamp field). If they're defined (Firefox doesn't support it yet) and identical, it means the state didn't change from the last time you looked at it, and no further work is necessary. From the tester source code:
for (var i in gamepadSupport.gamepads) {
var gamepad = gamepadSupport.gamepads[i];
// Don't do anything if the current timestamp is the same as previous
// one, which means that the state of the gamepad hasn't changed.
// This is only supported by Chrome right now, so the first check
// makes sure we're not doing anything if the timestamps are empty
// or undefined.
if (gamepadSupport.prevTimestamps[i] &&
(gamepad.timestamp == gamepadSupport.prevTimestamps[i])) {
continue;
}
gamepadSupport.prevTimestamps[i] = gamepad.timestamp;
gamepadSupport.updateDisplay(i);
}
Since without a gamepad, our today's doodle's preferred input method is the keyboard, we decided for the gamepad to emulate it rather closely. This meant three decisions:
The doodle only needs three buttons – two for running, and one for jumping – but the gamepad is likely to have many more. We therefore mapped all the sixteen known buttons and two known sticks onto those three logical functions in a way we thought made most sense, so that people could run by: alternating A/B buttons, alternating shoulder buttons, pressing left/right on the d-pad, or swinging either stick violently left and right (some of those will, of course, be more efficient than the others). For example:
newState[gamepad.STATES.LEFT] =
gamepad.buttonPressed_(pad, gamepad.BUTTONS.PAD_LEFT) ||
gamepad.stickMoved_(pad, gamepad.AXES.LEFT_ANALOGUE_HOR, true) ||
gamepad.stickMoved_(pad, gamepad.AXES.RIGHT_ANALOGUE_HOR, true),
newState[gamepad.STATES.PRIMARY_BUTTON] =
gamepad.buttonPressed_(pad, gamepad.BUTTONS.FACE_1) ||
gamepad.buttonPressed_(pad, gamepad.BUTTONS.LEFT_SHOULDER) ||
gamepad.buttonPressed_(pad, gamepad.BUTTONS.LEFT_SHOULDER_BOTTOM) ||
gamepad.buttonPressed_(pad, gamepad.BUTTONS.SELECT) ||
gamepad.buttonPressed_(pad, gamepad.BUTTONS.START) ||
gamepad.buttonPressed_(pad, gamepad.BUTTONS.LEFT_ANALOGUE_STICK),
We treated each analogue input as a discrete one, using the threshold functions described previously.
We went as far as bolting the gamepad input onto the doodle, instead of baking it in – our polling loop actually synthesizes necessary keydown and keyup events (with a proper keyCode) and sends them back to DOM:
// Create and dispatch a corresponding key event.
var event = document.createEvent('Event');
var eventName = down ? 'keydown' : 'keyup';
event.initEvent(eventName, true, true);
event.keyCode = gamepad.stateToKeyCodeMap_[state];
gamepad.containerElement_.dispatchEvent(event);
And that's all there is to it!
We hope this helps to shed some light on this new API – still a bit precarious, but already a lot of fun.
In addition to the missing pieces of the API (e.g. events) and broader browser support, we're also hoping to eventually see things like rumble control, access to built-in gyroscopes, etc. And, more support for different types of gamepads – please file a bug against Chrome and/or file a bug against Firefox if you see find one that works incorrectly or not at all.
But before that, go and play with our Hurdles 2012 doodle and see how much more fun it is on the gamepad. Oh, did you just say you could do better than 10.7 seconds? Bring it.


Home
Sales
Welcome to the best damn cookie shop at this address!!
Seattle
Tokyo
Dubai
Paris
Lima
Salmon Cookies!


Login to your account.
Forgot Password ?
Don't have account?
Sign up here
Create a Free Account
Already have an account?
Sign in
Name
Last Name
Date
Time
ID
Nickname


Remixed from Stephen Mayeux's Presentation / Github Repository
FCC provides HTML and CSS tutorial that can be supplemented with Code Academy.
jQuery and JavaScript modules in FCC are considered by some to be less introductory, other free resources may be optimal for beginners.
Don't restrict yourself to one resource; experimentation is essential to learning!


Exactor is a framework for writing automated acceptance tests of the kind advocated by Extreme Programming.
Customers or testers write acceptance tests using a simple plain text format.
Programmers write the commands specified by the customer tests and connect them to the application being tested.


FleetApi.Unit
Defines a FleetApi.Unit
struct, representing a service in a fleet cluster.
The following fields are public:
name
- unique identifier of entity.options
- list of UnitOption entities.desiredState
- state the user wishes the unit to be in (“inactive”, “loaded”, or “launched”).currentState
- state the unit is currently in (same possible values as desiredState).machineID
- ID of machine to which the unit is scheduled.
Summary↑
| from_map(unit_map) |
Types ↑
t :: %FleetApi.Unit{currentState: term, desiredState: term, machineID: term, name: term, options: term}
Functions
Specs:
- from_map(%{String.t => any}) :: FleetApi.Unit.t


DeviceManager
final class DeviceManager : NSObject
Undocumented
-
Undocumented
Declaration
Swift
static let deviceServiceUUID: String
-
Undocumented
Declaration
Swift
static let writeCharacteristicUUID: String
-
Undocumented
Declaration
Swift
static let notifyCharacteristicUUID: String
-
Undocumented
Declaration
Swift
static let controlpointLengthCharacteristicUUID: String
-
Undocumented
Declaration
Swift
let peripheral: CBPeripheral
-
Undocumented
Declaration
Swift
var deviceName: String? { get }
-
Undocumented
Declaration
Swift
var onStateChanged: ((DeviceManager, DeviceManagerState) -> Void)?
-
Undocumented
Declaration
Swift
var onDebugMessage: ((DeviceManager, String) -> Void)?
-
Undocumented
Declaration
Swift
var onAPDUReceived: ((DeviceManager, Data) -> Void)?
-
Undocumented
Declaration
Swift
fileprivate(set) var state: DeviceManagerState { get set }
-
Undocumented
Declaration
Swift
init(peripheral: CBPeripheral)
-
Undocumented
Declaration
Swift
func bindForReadWrite()
-
Undocumented
Declaration
Swift
func exchangeAPDU(_ data: Data)
-
Undocumented
Declaration
Swift
func peripheral(_ peripheral: CBPeripheral, didDiscoverServices error: Error?)
-
Undocumented
Declaration
Swift
func peripheral(_ peripheral: CBPeripheral, didDiscoverCharacteristicsFor service: CBService, error: Error?)
-
Undocumented
Declaration
Swift
func peripheral(_ peripheral: CBPeripheral, didUpdateNotificationStateFor characteristic: CBCharacteristic, error: Error?)
-
Undocumented
Declaration
Swift
func peripheral(_ peripheral: CBPeripheral, didUpdateValueFor characteristic: CBCharacteristic, error: Error?)
-
Undocumented
Declaration
Swift
func peripheral(_ peripheral: CBPeripheral, didWriteValueFor characteristic: CBCharacteristic, error: Error?)


I had a lot of ideas on what to write about initially, but none of them really got my attention. In lieu of a more in depth look at a specific method, syntax or concept in Ruby, I thought it might be more interesting to see what kind of challenges might crop up in attempting to recreate functionality I already have in a BASH script in Ruby. Then I wrote a metric ton of content on my process. Great.
This post has some SEO jargon in it which may cause your synaptic receptors to shut down. Do not panic: this is a perfectly normal response to discussions of sitemap indices.
One of my first encounters with how empowering and freeing code can be came in the form of a few problems I had with doing work in the SEO world:
For the uninitiated, XML sitemaps and sitemap indices are documents we supply to search engines so they can find new URLs and crawl old ones. A sitemap index is sitemaps of sitemaps, and each "child sitemap" of an index can contain up to 50,000 individual URLs that you want Googlebot (and those other sites too, I guess) to crawl, cache and index in Search Engine Results Pages (lovingly called "SERPs"). That's as many as 2,500,000,000 URLs for a single index!
At that scale it is easy to lose track of what is actually in the files themselves and ensure we're doing a good job sharing with our search engine friends.
Before I start projects like these, I like to start with a set of statements that lay out the problem (like above), the goals and a set of steps we think we can follow to achieve the goals.
Our problem defines our goal, and our goal influences our steps. The steps also help track progress while writing code. Both the goals and the steps act as tests for the success or failure of our code. This is often how Product teams like to think about solving problems, too.
Later, we'll also define additional features we want from our code.
I didn't know much about code other than HTML, CSS, and a little JavaScript, but using the terminal and BASH felt like they had low barriers to entry and learn, so those were the tools I chose. Right now, however, they feel like they can be improved upon and probably teach me in the process. Off we go to Ruby!


public class Pipeline
extends java.lang.Object
Pipeline
manages a directed acyclic graph of PTransforms
, and the
PCollections
that the PTransforms
consume and produce.
Each Pipeline
is self-contained and isolated from any other
Pipeline
. The PValues
that are inputs and outputs of each of a
Pipeline's
PTransforms
are also owned by that
Pipeline
. A PValue
owned by one Pipeline
can be read only by
PTransforms
also owned by that Pipeline
. Pipelines
can safely be executed concurrently.
Here is a typical example of use:
// Start by defining the options for the pipeline.
PipelineOptions options = PipelineOptionsFactory.create();
// Then create the pipeline. The runner is determined by the options.
Pipeline p = Pipeline.create(options);
// A root PTransform, like TextIO.Read or Create, gets added
// to the Pipeline by being applied:
PCollection<String> lines =
p.apply(TextIO.read().from("gs://bucket/dir/file*.txt"));
// A Pipeline can have multiple root transforms:
PCollection<String> moreLines =
p.apply(TextIO.read().from("gs://bucket/other/dir/file*.txt"));
PCollection<String> yetMoreLines =
p.apply(Create.of("yet", "more", "lines").withCoder(StringUtf8Coder.of()));
// Further PTransforms can be applied, in an arbitrary (acyclic) graph.
// Subsequent PTransforms (and intermediate PCollections etc.) are
// implicitly part of the same Pipeline.
PCollection<String> allLines =
PCollectionList.of(lines).and(moreLines).and(yetMoreLines)
.apply(new Flatten<String>());
PCollection<KV<String, Integer>> wordCounts =
allLines
.apply(ParDo.of(new ExtractWords()))
.apply(new Count<String>());
PCollection<String> formattedWordCounts =
wordCounts.apply(ParDo.of(new FormatCounts()));
formattedWordCounts.apply(TextIO.write().to("gs://bucket/dir/counts.txt"));
// PTransforms aren't executed when they're applied, rather they're
// just added to the Pipeline. Once the whole Pipeline of PTransforms
// is constructed, the Pipeline's PTransforms can be run using a
// PipelineRunner. The default PipelineRunner executes the Pipeline
// directly, sequentially, in this one process, which is useful for
// unit tests and simple experiments:
p.run();
| Modifier and Type | Class and Description |
|---|---|
static class |
Pipeline.PipelineExecutionException
|
static interface |
Pipeline.PipelineVisitor
For internal use only; no backwards-compatibility guarantees.
|
| Modifier | Constructor and Description |
|---|---|
protected |
Pipeline(PipelineOptions options) |
| Modifier and Type | Method and Description |
|---|---|
<OutputT extends POutput> |
apply(PTransform<? super PBegin,OutputT> root)
Like
apply(String, PTransform) but the transform node in the Pipeline
graph will be named according to PTransform.getName() . |
<OutputT extends POutput> |
apply(java.lang.String name,
PTransform<? super PBegin,OutputT> root)
|
static <InputT extends PInput,OutputT extends POutput> |
applyTransform(InputT input,
PTransform<? super InputT,OutputT> transform)
For internal use only; no backwards-compatibility guarantees.
|
static <InputT extends PInput,OutputT extends POutput> |
applyTransform(java.lang.String name,
InputT input,
PTransform<? super InputT,OutputT> transform)
For internal use only; no backwards-compatibility guarantees.
|
PBegin |
begin()
Returns a
PBegin owned by this Pipeline. |
static Pipeline |
create()
Constructs a pipeline from default
PipelineOptions . |
static Pipeline |
create(PipelineOptions options)
Constructs a pipeline from the provided
PipelineOptions . |
CoderRegistry |
getCoderRegistry()
Returns the
CoderRegistry that this Pipeline uses. |
void |
replaceAll(java.util.List<org.apache.beam.sdk.runners.PTransformOverride> overrides)
For internal use only; no backwards-compatibility guarantees.
|
PipelineResult |
run()
Runs this
Pipeline according to the PipelineOptions used to create the Pipeline via create(PipelineOptions) . |
PipelineResult |
run(PipelineOptions options)
Runs this
Pipeline using the given PipelineOptions , using the runner specified
by the options. |
void |
setCoderRegistry(CoderRegistry coderRegistry)
Deprecated.
this should never be used - every
Pipeline has a registry throughout its
lifetime. |
java.lang.String |
toString() |
void |
traverseTopologically(Pipeline.PipelineVisitor visitor)
For internal use only; no backwards-compatibility guarantees.
|
protected Pipeline(PipelineOptions options)
public static Pipeline create()
PipelineOptions
.public static Pipeline create(PipelineOptions options)
PipelineOptions
.public PBegin begin()
PBegin
owned by this Pipeline. This serves as the input of a root PTransform
such as Read
or Create
.public <OutputT extends POutput> OutputT apply(PTransform<? super PBegin,OutputT> root)
apply(String, PTransform)
but the transform node in the Pipeline
graph will be named according to PTransform.getName()
.apply(String, PTransform)
public <OutputT extends POutput> OutputT apply(java.lang.String name, PTransform<? super PBegin,OutputT> root)
PTransform
, such as Read
or Create
, to this Pipeline
.
The node in the Pipeline
graph will use the provided name
. This name is used
in various places, including the monitoring UI, logging, and to stably identify this node in
the Pipeline
graph upon update.
Alias for begin().apply(name, root)
.
@Internal public void replaceAll(java.util.List<org.apache.beam.sdk.runners.PTransformOverride> overrides)
Replaces all nodes that match a PTransformOverride
in this pipeline. Overrides are
applied in the order they are present within the list.
After all nodes are replaced, ensures that no nodes in the updated graph match any of the overrides.
public PipelineResult run()
Pipeline
according to the PipelineOptions
used to create the Pipeline
via create(PipelineOptions)
.public PipelineResult run(PipelineOptions options)
Pipeline
using the given PipelineOptions
, using the runner specified
by the options.public CoderRegistry getCoderRegistry()
CoderRegistry
that this Pipeline
uses.@Deprecated public void setCoderRegistry(CoderRegistry coderRegistry)
Pipeline
has a registry throughout its
lifetime.@Internal public void traverseTopologically(Pipeline.PipelineVisitor visitor)
Invokes the PipelineVisitor's
Pipeline.PipelineVisitor.visitPrimitiveTransform(org.apache.beam.sdk.runners.TransformHierarchy.Node)
and
Pipeline.PipelineVisitor.visitValue(org.apache.beam.sdk.values.PValue, org.apache.beam.sdk.runners.TransformHierarchy.Node)
operations on each of this
Pipeline's
transform and value nodes, in forward
topological order.
Traversal of the Pipeline
causes PTransforms
and
PValues
owned by the Pipeline
to be marked as finished,
at which point they may no longer be modified.
Typically invoked by PipelineRunner
subclasses.
@Internal public static <InputT extends PInput,OutputT extends POutput> OutputT applyTransform(InputT input, PTransform<? super InputT,OutputT> transform)
Like applyTransform(String, PInput, PTransform)
but defaulting to the name
provided by the PTransform
.
@Internal public static <InputT extends PInput,OutputT extends POutput> OutputT applyTransform(java.lang.String name, InputT input, PTransform<? super InputT,OutputT> transform)
Applies the given PTransform
to this input InputT
and returns
its OutputT
. This uses name
to identify this specific application
of the transform. This name is used in various places, including the monitoring UI,
logging, and to stably identify this application node in the Pipeline
graph during
update.
Each PInput
subclass that provides an apply
method should delegate to
this method to ensure proper registration with the PipelineRunner
.
public java.lang.String toString()
toString
in class java.lang.Object


(selected—refer to my CV for the full list)
2021/22 // HafenCity University Hamburg
Concept, lecture, SQL/Python tutorial (online course)
2020-2022 // HafenCity University Hamburg
Concept, lecture, QGIS tutorial (online course)
2019-2020 // Freie Universität Berlin, Cluster of Excellence "Matters of Activity"
Concept, lecture, tutorial (Onsite course, online block course, workshop)
March 2014 // Universidad Politécnica de Madrid (UPM)
Concept, lecture, Java & GIS tutorial (block course)


Actor Kim Woo Bin to make first public appearance after battle with cancer
by germainejActor Kim Woo Bin will be making his first public appearance after his fight with cancer.
Kim Woo Bin was diagnosed with nasopharyngeal cancer in May of 2017, but he's now returning to the public eye after 2 years and 6 months. The actor is set to appear at the '40th Blue Dragon Film Awards', which is being held in Paradise City, Incheon on November 21 KST.
In related news, Kim Woo Bin is expected to make his big-screen return in an upcoming sci-fi movie about aliens also starring Ryu Jun Yeol and Kim Tae Ri.
Stay tuned for updates on Kim Woo Bin.


|
Scientific Fortran Tools (SciFT)
1.2
|
The RealList class is a template class that provides linked lists. It stores a list of values and provides iterator-based access as well as insertions and removals. RealList features both STL-style iterators and Java-style iterators. For developers who already know STL, have the advantage of familiarity. More...
Public Member Functions | |
| generic | init => initList |
| generic | assignment => copyList |
| procedure | initlist |
| procedure | copylist |
| final | destroylist |
| procedure | str |
| procedure | show |
| procedure | tofstream |
| generic | size => ssize |
| procedure | isempty |
| generic | append => appendValue, appendFArray |
| procedure | prepend |
| procedure | insert |
| generic | erase => eraseFromPtr, eraseFromPos |
| procedure | erasefromptr |
| procedure | erasefrompos |
| procedure | eraseallexcept |
| procedure | eraseallexceptfirst |
| procedure | eraseallexceptlast |
| procedure | clear |
| generic | at => atFromPtr, atFromPos |
| generic | replace => replaceFromPtr, replaceFromPos |
| procedure | ptr |
Public Attributes | |
| integer | nitems = 0 |
| class(reallistiterator), pointer | begin => null() |
| class(reallistiterator), pointer | end => null() |
Private Member Functions | |
| procedure, private | ssize |
| procedure, private | appendvalue |
| procedure, private | appendfarray |
| procedure, private | atfromptr |
| procedure, private | atfrompos |
| procedure, private | replacefromptr |
| procedure, private | replacefrompos |
The RealList class is a template class that provides linked lists. It stores a list of values and provides iterator-based access as well as insertions and removals. RealList features both STL-style iterators and Java-style iterators. For developers who already know STL, have the advantage of familiarity.
Here's an example of a List that stores integers ...
{.c}
... and a RealList that stores Atom values:
{.c}
Finally, you can use the first one thus:
{.f90}
Definition at line 168 of file RealList.f90.
| generic reallist::reallist::append | ( | ) |
Definition at line 187 of file RealList.f90.
|
private |
Definition at line 189 of file RealList.f90.
|
private |
Definition at line 188 of file RealList.f90.
| generic reallist::reallist::assignment | ( | ) |
Definition at line 175 of file RealList.f90.
| generic reallist::reallist::at | ( | ) |
Definition at line 199 of file RealList.f90.
|
private |
Definition at line 201 of file RealList.f90.
|
private |
Definition at line 200 of file RealList.f90.
| procedure reallist::reallist::clear | ( | ) |
Definition at line 198 of file RealList.f90.
| procedure reallist::reallist::copylist | ( | ) |
Definition at line 178 of file RealList.f90.
|
final |
Definition at line 179 of file RealList.f90.
| generic reallist::reallist::erase | ( | ) |
Definition at line 192 of file RealList.f90.
| procedure reallist::reallist::eraseallexcept | ( | ) |
Definition at line 195 of file RealList.f90.
| procedure reallist::reallist::eraseallexceptfirst | ( | ) |
Definition at line 196 of file RealList.f90.
| procedure reallist::reallist::eraseallexceptlast | ( | ) |
Definition at line 197 of file RealList.f90.
| procedure reallist::reallist::erasefrompos | ( | ) |
Definition at line 194 of file RealList.f90.
| procedure reallist::reallist::erasefromptr | ( | ) |
Definition at line 193 of file RealList.f90.
| generic reallist::reallist::init | ( | ) |
Definition at line 174 of file RealList.f90.
| procedure reallist::reallist::initlist | ( | ) |
Definition at line 177 of file RealList.f90.
| procedure reallist::reallist::insert | ( | ) |
Definition at line 191 of file RealList.f90.
| procedure reallist::reallist::isempty | ( | ) |
Definition at line 186 of file RealList.f90.
| procedure reallist::reallist::prepend | ( | ) |
Definition at line 190 of file RealList.f90.
| procedure reallist::reallist::ptr | ( | ) |
Definition at line 205 of file RealList.f90.
| generic reallist::reallist::replace | ( | ) |
Definition at line 202 of file RealList.f90.
|
private |
Definition at line 204 of file RealList.f90.
|
private |
Definition at line 203 of file RealList.f90.
| procedure reallist::reallist::show | ( | ) |
Definition at line 181 of file RealList.f90.
| generic reallist::reallist::size | ( | ) |
Definition at line 184 of file RealList.f90.
|
private |
Definition at line 185 of file RealList.f90.
| procedure reallist::reallist::str | ( | ) |
Definition at line 180 of file RealList.f90.
| procedure reallist::reallist::tofstream | ( | ) |
Definition at line 183 of file RealList.f90.
| class(reallistiterator), pointer reallist::reallist::begin => null() |
Definition at line 170 of file RealList.f90.
| class(reallistiterator), pointer reallist::reallist::end => null() |
Definition at line 171 of file RealList.f90.
| integer reallist::reallist::nitems = 0 |
Definition at line 169 of file RealList.f90.


There was some problem with the Google Earth Plug-in.
Try reloading the page.
If that doesn't help, you can re-install the Google Earth Plug-in using this link .


tlm::tlm_extension_base Class Reference
#include <tlm_core/tlm_2/tlm_generic_payload/tlm_gp.h>
List of all members.
Detailed Description
Definition at line 56 of file tlm_gp.h.
Constructor & Destructor Documentation
| virtual tlm::tlm_extension_base::~tlm_extension_base |
( |
|
) |
[inline, protected, virtual] |
Member Function Documentation
| virtual void tlm::tlm_extension_base::copy_from |
( |
tlm_extension_base const & |
|
) |
[pure virtual] |
| virtual void tlm::tlm_extension_base::free |
( |
|
) |
[inline, virtual] |
| static unsigned int tlm::tlm_extension_base::register_extension |
( |
const std::type_info & |
|
) |
[static, protected] |
The documentation for this class was generated from the following file:
- tlm_core/tlm_2/tlm_generic_payload/tlm_gp.h


|
BL3 SDK
0.0.1
Borderlands 3 Class Documentation
|
#include <BL3_NavigationSystem_classes.hpp>
Static Public Member Functions | |
| static UClass * | StaticClass () |
| Static Public Member Functions inherited from UNavAreaBase | |
| static UClass * | StaticClass () |
| Static Public Member Functions inherited from UObject | |
| static FChunkedFixedUObjectArray & | GetGlobalObjects () |
| template<typename T > | |
| static T * | FindObject (const std::string &name) |
| static UClass * | FindClass (const std::string &name) |
| template<typename T > | |
| static T * | GetObjectCasted (std::size_t index) |
| static UClass * | StaticClass () |
Public Attributes | |
| float | DefaultCost |
| float | FixedAreaEnteringCost |
| struct FColor | DrawColor |
| struct FNavAgentSelector | SupportedAgents |
| unsigned char | bSupportsAgent0: 1 |
| unsigned char | bSupportsAgent1: 1 |
| unsigned char | bSupportsAgent2: 1 |
| unsigned char | bSupportsAgent3: 1 |
| unsigned char | bSupportsAgent4: 1 |
| unsigned char | bSupportsAgent5: 1 |
| unsigned char | bSupportsAgent6: 1 |
| unsigned char | bSupportsAgent7: 1 |
| unsigned char | bSupportsAgent8: 1 |
| unsigned char | bSupportsAgent9: 1 |
| unsigned char | bSupportsAgent10: 1 |
| unsigned char | bSupportsAgent11: 1 |
| unsigned char | bSupportsAgent12: 1 |
| unsigned char | bSupportsAgent13: 1 |
| unsigned char | bSupportsAgent14: 1 |
| unsigned char | bSupportsAgent15: 1 |
| unsigned char | UnknownData00 [0x6] |
| class UObject * | GbxNavArea |
| EHavokNavMaterial | HavokNavMaterial |
| unsigned char | UnknownData01 [0x7] |
| TArray< class UGbxNavLayerBase * > | IgnoreLayers |
| class UClass * | EffectiveArea |
| Public Attributes inherited from UNavAreaBase | |
| unsigned char | UnknownData00 [0x8] |
| Public Attributes inherited from UObject | |
| void * | VTableObject |
| int32_t | ObjectFlags |
| int32_t | InternalIndex |
| class UClass * | Class |
| FName | Name |
| class UObject * | Outer |
Additional Inherited Members | |
| Public Member Functions inherited from UObject | |
| std::string | GetName () const |
| std::string | GetFullName () const |
| bool | IsA (UClass *cmp) const |
| void | ProcessEvent (class UFunction *function, void *parms) |
| void | ExecuteUbergraph (int EntryPoint) |
| Static Public Attributes inherited from UObject | |
| static FUObjectArray * | GObjects |
|
inlinestatic |
| unsigned char bSupportsAgent0 |
| unsigned char bSupportsAgent1 |
| unsigned char bSupportsAgent10 |
| unsigned char bSupportsAgent11 |
| unsigned char bSupportsAgent12 |
| unsigned char bSupportsAgent13 |
| unsigned char bSupportsAgent14 |
| unsigned char bSupportsAgent15 |
| unsigned char bSupportsAgent2 |
| unsigned char bSupportsAgent3 |
| unsigned char bSupportsAgent4 |
| unsigned char bSupportsAgent5 |
| unsigned char bSupportsAgent6 |
| unsigned char bSupportsAgent7 |
| unsigned char bSupportsAgent8 |
| unsigned char bSupportsAgent9 |
| float DefaultCost |
| struct FColor DrawColor |
| class UClass* EffectiveArea |
| float FixedAreaEnteringCost |
| class UObject* GbxNavArea |
| EHavokNavMaterial HavokNavMaterial |
| TArray<class UGbxNavLayerBase*> IgnoreLayers |
| struct FNavAgentSelector SupportedAgents |
| unsigned char UnknownData00[0x6] |
| unsigned char UnknownData01[0x7] |


Several months back, my psyciatrist prescribed me clonazepam for 'acute anxiety.' I noticed immediately that the bottle had a yellow sticker on it--a dead give away that this drug is DEA controlled and can be used recreationally. A few months later when anxiety was no longer an issue for me I decided to try out the clonazepam for its recreational effects.
I took triple the recommended dose for 'acute anxiety,' swallowing the pills as I would normally to cope with anxiety. Within ten minutes the psychoactive effects set in. My head felt light and hollow, not unlike the feeling of going up on weed. My motions seemed smooth and magically fluid and I became impervious to stress. It was as if I had entered cloud nine. The world was like a dream that I was literally walking through. The effects lasted close to six hours. I have taken the same triple dose three times and so far have encountered no tolerance.
Clonazepam produces a nice high, the only problem is getting ahold of the stuff. If I hadn't been prescribed it, I never would have had these experiences. Good luck finding clonazepam and happy tripping.
Experience Reports are the writings and opinions of the individual authors who submit them.
Some of the activities described are dangerous and/or illegal and none are recommended by Erowid.


move the whole stack of donuts to another tower without stacking a larger donut on a smaller donut
-- click one tower and then another to move a donut --


FundHer is an initiative to financially support female candidates for office at the state and local level by combining volunteer hours with small-dollar donations to make people aware of and excited about the elections that will directly impact their lives the most.
I conceptualized, designed and built a custom responsive
site for this project from scratch using HTML5 & CSS.
Fork Monkey is a subscription-based service that connects foodies with unique dining experiences in their hometown or when they travel.
For this site I conceptualized UX and user flow and selected relevant plugins. I also had significant design and branding input, and contributed all copy.
I built this example static site to serve as a template for any professional wanting an elegant and straightforward web presence. It's a custom responsive site I built from scratch using HTML5 & CSS.


--- layout: post title: Amazon Mechanical Turk and international access? date: 2007-09-28 00:00:00 categories: digital-media software-development ---
I received this email from Amazon a week or so back:
You are receiving this email because you registered with Amazon Mechanical Turk as a Requester with an address outside of the United States. We regret to inform you that Amazon Mechanical Turk will no longer support international Requester accounts starting October 1, 2007. On this date your Requester account will be closed.
A real shame, as we had a couple of interesting projects we were thinking might be a good fit with it over the last few months. But also a bit of a wake-up call: the lesson here is that unless a provider of APIs is going to commit to an SLA, or even their future availability, then it's probably foolish to rely on them. A semantic web of collaborating services is a lofty goal, but we'll still need commitments (probably underpinned by commercial relationships) to realise it.


Work Day Scheduler
A simple calendar app for scheduling your work day
Schedule
9AM
Save
10AM
Save
11AM
Save
12PM
Save
1 PM
Save
2 PM
Save
3 PM
Save
4 PM
Save
5 PM
Save


Welcome to Pan-IIT Odia Association
This is the association of Odia students and faculty members / staffs of all the Indian Institute of Technology ( IITs). Currently the constituent associations are Utkala Association IITM, Utkala Parivar IITK, Kalinga Samaj IITKGP, Utkala Parishad IITB, Odia Parivar IITD, and Utkala Samaj IITG. The objective of the association is to organize various activities & functions to celebrate the culture and tradition of ODISHA. Also to take meaningful initiatives to build a prosperous ODISHA.


Is your Technology Workshop.
Original. Simple. Creative.
Original. Simple Ideas. Creative Solutions.
We Design your Brand and conceptualize your theme. We customize according to client request.
We Develop and customize web applications according to your Business' needs.
Your idea can be Customized into your perfect Android or iOS mobile application.
24/7 I.T support. Computer & Helpdesk and Anti-virus alert response .
Quick response Network Support. Network, Surveilance & Security .
24/7 Server Support. Microsoft, Linux & Unix .
Traditional Marketing & Advertising strategies and concepts to drive your business image.
Increase your customer.Let us market your product cheaper and quicker on the internet.
We can host or solicit for your business the best web hosting services on the internet.
Our vision is to improve SME business activities and increase business activities in and around home. Creating newer opportunities with the use of IT solutions for Papua New Guineans.
To enable Entreprenuers to use app solutions that will strategically increase the eCommerce activities and web presence of local SMEs and subsequently create free use of internet for simple SMEs in PNG.


#GP(0) | For an illegal memory operand effective address in the CS, DS, ES, FS or GS segments. |
#GP(0) | For an illegal memory operand effective address in the CS, DS, ES, FS or GS segments. |
#SS(0) | For an illegal address in the SS segment. |
#PF(fault-code) | For a page fault. |
#NM | If TS bit in CR0 is set. |
|


|
CivilOctave
|
Use of Octave (MatLAB) in Civil Engineering Problems
To run this program, you need to install GNU octave
on your computer. To know how to obtain it, visit: https://www.gnu.org/software/octave/
Once you have GNU Octave working, go to folder where code for an example is present. For example to run code correspond to example L01, go to folder Example/L01, ( for example on GNU/Linux you may do so by: cd Example/L01
). The code is in file main.m
, and data is in file input.mat
. To store results in file output.txt
, type command:
octave main.m > output.txt
or in following form, if we wish to produce pdf using LaTeX from folder (tex, if available) using run.sh
octave main.m > output.tex
View file output.txt in any text editor, or main.pdf (in tex folder) in pdf viewer.
Authors acknowledge used of function written by Sachin Shanbhag.
http://sachinashanbhag.blogspot.in/2012/11/exporting-matrices-in-octavematlab-to.html
https://docs.google.com/open?id=0Bww3OZktvGQucmxnd1FJNElCVGc
#Sage Use of Sage in Civil Engineering Problems
Requirement-:


| View source on GitHub |
LinearSDCA
Stochastic Dual Coordinate Ascent helper for linear estimators.
tf.compat.v1.estimator.experimental.LinearSDCA
tf.compat.v2.estimator.experimental.LinearSDCA
Objects of this class are intended to be provided as the optimizer argument
(though LinearSDCA objects do not implement the tf.train.Optimizer
interface)
when creating tf.estimator.LinearClassifier
or tf.estimator.LinearRegressor
.
SDCA can only be used with LinearClassifier
and LinearRegressor
under the
following conditions:
sparse_combiner
argument in the estimator constructor should be "sum".real_feature_column = numeric_column(...) sparse_feature_column = categorical_column_with_hash_bucket(...) linear_sdca = tf.estimator.experimental.LinearSDCA( example_id_column='example_id', num_loss_partitions=1, num_table_shards=1, symmetric_l2_regularization=2.0) classifier = tf.estimator.LinearClassifier( feature_columns=[real_feature_column, sparse_feature_column], weight_column=..., optimizer=linear_sdca) classifier.train(input_fn_train, steps=50) classifier.evaluate(input_fn=input_fn_eval)
Here the expectation is that the input_fn_*
functions passed to train and
evaluate return a pair (dict, label_tensor) where dict has example_id_column
as key
whose value is a Tensor
of shape [batch_size] and dtype string.
num_loss_partitions defines sigma' in eq (11) of [3]. Convergence of (global)
loss is guaranteed if num_loss_partitions
is larger or equal to the product
(#concurrent train ops/per worker) x (#workers)
. Larger values for
num_loss_partitions
lead to slower convergence. The recommended value for
num_loss_partitions
in tf.estimator
(where currently there is one process
per worker) is the number of workers running the train steps. It defaults to 1
(single machine).
num_table_shards
defines the number of shards for the internal state
table, typically set to match the number of parameter servers for large
data sets.
The SDCA algorithm was originally introduced in [1] and it was followed by the L1 proximal step [2], a distributed version [3] and adaptive sampling [4]. [1] www.jmlr.org/papers/volume14/shalev-shwartz13a/shalev-shwartz13a.pdf [2] https://arxiv.org/pdf/1309.2375.pdf [3] https://arxiv.org/pdf/1502.03508.pdf [4] https://arxiv.org/pdf/1502.08053.pdf Details specific to this implementation are provided in: https://github.com/tensorflow/estimator/tree/master/tensorflow_estimator/python/estimator/canned/linear_optimizer/doc/sdca.ipynb
__init__
__init__( example_id_column, num_loss_partitions=1, num_table_shards=None, symmetric_l1_regularization=0.0, symmetric_l2_regularization=1.0, adaptive=False )
Construct a new SDCA optimizer for linear estimators.
example_id_column
: The column name containing the example ids.num_loss_partitions
: Number of workers.num_table_shards
: Number of shards of the internal state table, typically
set to match the number of parameter servers.symmetric_l1_regularization
: A float value, must be greater than or
equal to zero.symmetric_l2_regularization
: A float value, must be greater than zero and
should typically be greater than 1.adaptive
: A boolean indicating whether to use adaptive sampling.get_train_step
get_train_step( state_manager, weight_column_name, loss_type, feature_columns, features, targets, bias_var, global_step )
Returns the training operation of an SdcaModel optimizer.


--- layout: post title: Conference paper accepted tags: - News - Research ---
I'm happy to share that our paper Multivariate time Series Anaysis for Driving Style Classification using neural Networks and Hyperdimensional Computing authored by Kenny Schlegel, myself, Peer Neubert and Peter Protzel has been accepted to the 32nd IEEE Intelligent Vehicles Symposium 2021. If you are interested in this research, you can find the source code on Github. I will share a link to the paper once it is published.


s6-networking
Software
skarnet.org
The s6-taiclockd program
s6-taiclockd is a server for the
TAICLOCK protocol.
It's a long-lived program listening to the network and answering
to TAICLOCK clients such as s6-taiclock.
Interface
s6-taiclockd [ -i ip ] [ -p port ]
- s6-taiclockd listens to all network addresses on UDP
port 4014.
- Whenever it receives a TAICLOCK request, it answers
immediately with the TAI time given by its local system clock.
- It runs until killed by a signal.
Options
- -i ip : bind to ip instead
of all available addresses. ip can be IPv4 or IPv6.
- -p port : bind to port
port instead of 4014.


1)
The students
had
to give a surprise English test today.
2)
Richard
may
join us for the movie.
3)
Judy
will
write a letter to the principal.
4)
Can
you turn down the volume of the radio?
5)
Mr. Smith
could
be faster than Mr. Brown for this job.
6)
Where
are
you going?
7)
Shall
I teach you swimming?
8)
Kim
was
lost in the jungle.
9)
I
am
taking the dog for a walk.
10)
The boys
were
tired after the game yesterday.
may
were
will
are
am
could
had
was
can
shall