angular mood

intuitive moods and emotions

angular-mood provides a library of 100 moods that are spatially organized and color coded to make them easy to navigate and visualize. It is modeled after the excellent MoodMeter app conceived by Dr. Marc Brackett at the Yale Center for Emotional Intelligence.

It was developed by Dr. David Milne from the Positive Computing Lab at the University of Sydney.

Installation

Check out the GitHub repository for source code and installation instructions.

Moods

A mood is a simple json object, like { "name":"restful", "valence":0.5, "arousal":-0.5 }

valence ranges from -1 (extremely unpleasant) to +1 (extremely pleasant).
arousal ranges from -1 (low energy) to +1 (high energy).

Mood Canvas

The mood-canvas directive presents a color-coded 10 x 10 grid of all moods.

The canvas is responsive, so it will always expand to take up the full width of its parent container, and will always be square. The parent container should be a div with no other children.

Attributes

selected	The selected mood. currently `{{mood}} undefined` clear
hovered	The hovered mood. This only needs to be specified if you want to monitor it. currently `{{hoveredMoodInCanvas}} undefined`
counts	A map associating mood names with counts, so that common moods can be emphasized. This only needs to be specified if you would like moods to vary in size. randomize clear
config	A JSON object that configures the canvas, described below. This only needs to be specified if you would like to deviate from the default configuration.

Configuration

The config object can optionally specify any of the following properties:

showAxii	`true` if the canvas should show axis labels (good, bad, low energy, high energy) when no mood is selected, otherwise `false`. Defaults to `true` currently true false
showPrompt	`true` if the canvas should show a prompt (plot mood) when no mood is selected, otherwise `false`. Defaults to `true` currently true false
readOnly	`true` if the canvas should not allow the user to change the selected mood, otherwise `false`. Defaults to `false` currently true false
background	`"light"` if the mood colors need to contrast against a light background, or `"dark"` if they need to contrast against a dark background. Defaults to `"light"` currently light dark

Mood Matrix

The mood-matrix directive shows a 3 x 3 grid of mood names. It is intended to work together with the mood canvas, by showing the names of the moods adjacent to the currently selected or hovered mood.

It is responsive, so it will always expand to take up the full width of its parent container, and will always be 30% as high as it is wide. The parent container should be a div with no other children.

Attributes

selected	The selected mood currently `{{mood}} undefined` clear
hoveredInCanvas	The currently hovered mood in the canvas. This only needs to be specified if the matrix should pan in response to hover events in the canvas. currently `{{hoveredMoodInCanvas}} undefined`
hoveredInMatrix	The currently hovered mood in the matrix. This only needs to be specified if you would like to monitor it. currently `{{hoveredMoodInMatrix}} undefined`
config	A JSON object that configures the matrix, described below. This only needs to be specified if you would like to deviate from the default configuration.

Configuration

You typically use the same configuration object as used by the mood canvas.

readOnly	`true` if the canvas should not allow the user to change the selected mood, otherwise `false`. Defaults to `false` currently true false
background	`"light"` if the mood colors need to contrast against a light background, or `"dark"` if they need to contrast against a dark background. Defaults to `"light"` currently light dark
followCanvasHover	`true` if the matrix should pan to follow hover events in the canvas, otherwise `false`. Defaults to `true` currently true false
inactiveColor	The color of an inactive (unselected, unhovered) emotion. Defaults to `"#ccc"`.

Mood Data

The MoodData service provides the data behind the two widgets described above.

It provides the following methods:

getMoods()
returns an array of all 100 moods.
getNearestMood( valence, arousal )
returns the closest mood to the given coordinates.
getRowAndColumn( valence, arousal )
returns an array containing row and column indexes nearest the given coordinates.
getColor( valence, arousal, background )
returns the appropriate color (as a hex string) for the given coordinates and background (either light or dark).