Implemented position sensor capability.

config/google-config.js

@@ -0,0 +1,3 @@
+export default {
+	apiKey: 'AIzaSyDhY6kAsHFQ5I-zrEu7I__TZmwFU0mJWl8',
+};

config/webpack-development.js

@@ -1,19 +1,16 @@
 import path from 'path';
 import webpack from 'webpack';
 
-export const basePath = path.join(__dirname, '..');
-export const distributionPath = path.join(basePath, 'dist');
+const basePath = path.join(__dirname, '..');
 
 export default {
-	// devtool: 'cheap-module-eval-source-map',
 	devtool: 'source-map',
 	entry: [
 		'webpack-dev-server/client?http://10.220.20.140:3000',
 		'webpack/hot/only-dev-server',
 		'./app',
 	],
 	output: {
-		path: distributionPath,
 		filename: 'bundle.js',
 		publicPath: '/static/',
 	},
@@ -29,11 +26,12 @@ export default {
 			loaders: ['style', 'css?sourceMap', 'sass?sourceMap', 'import-glob'],
 			exclude: /node_modules/,
 			include: basePath,
+		}, {
+			test: /\.(png|woff|woff2|eot|ttf|svg|jpeg|jpg)$/,
+			loader: 'url-loader?limit=1000000',
 		}],
 	},
-	sassLoader: {
-		// includePaths: [path.resolve(__dirname, './gfx')],
-	},
+	sassLoader: {},
 	plugins: [
 		new webpack.HotModuleReplacementPlugin(),
 	],

config/webpack-production.js

@@ -1,20 +1,21 @@
+import path from 'path';
 import ExtractTextPlugin from 'extract-text-webpack-plugin';
 import HtmlWebpackPlugin from 'html-webpack-plugin';
 
-import developmentConfig, { basePath } from './webpack-development';
+const basePath = path.join(__dirname, '..');
+const distributionPath = path.join(basePath, 'dist');
 
 export default {
-	...developmentConfig,
+	devtool: 'source-map',
 	entry: [
 		'./app',
 	],
 	output: {
-		...developmentConfig.output,
+		path: distributionPath,
 		publicPath: '/',
 		filename: 'static/bundle.js',
 	},
 	module: {
-		...developmentConfig.module,
 		loaders: [{
 			test: /\.js$/,
 			loaders: ['babel'],
@@ -29,6 +30,9 @@ export default {
 			// loaders: ['style', 'css?sourceMap', 'sass?sourceMap'],
 			exclude: /node_modules/,
 			include: basePath,
+		}, {
+			test: /\.(png|woff|woff2|eot|ttf|svg|jpeg|jpg)$/,
+			loader: 'url-loader?limit=1000000',
 		}],
 	},
 	plugins: [

gfx/css/components/capabilities/position-sensor-capability-component.scss

@@ -0,0 +1,26 @@
+.position-sensor-capability-component {
+	height: 300px;
+	margin: -15px;
+
+	.marker-component {
+		position: absolute;
+		width: 40px;
+		height: 40px;
+		top: -40px;
+		left: -20px;
+		background-image: url("../images/map-marker-icon.png");
+		background-size: contain;
+
+		.marker-component-text {
+			position: absolute;
+			left: 0;
+			top: -30px;
+			padding: 4px 8px;
+			background-color: rgba(255, 255, 255, 0.5);
+			color: #000;
+			font-size: 18px;
+			border-radius: 3px;
+			white-space: nowrap;
+		}
+	}
+}

package.json

@@ -25,6 +25,7 @@
     "classnames": "^2.2.5",
     "express": "^4.14.0",
     "extract-text-webpack-plugin": "^1.0.1",
+    "google-map-react": "^0.17.0",
     "highcharts": "^4.2.6",
     "highcharts-more": "^0.1.2",
     "html-webpack-plugin": "^2.22.0",
@@ -76,6 +77,7 @@
     "react-hot-loader": "^1.3.0",
     "sass-loader": "^4.0.0",
     "style-loader": "^0.13.1",
+    "url-loader": "^0.5.7",
     "webpack-dev-middleware": "^1.6.1",
     "webpack-hot-middleware": "^2.12.2"
   }

src/CumulocityPlatform.js

@@ -397,7 +397,7 @@ export default class CumulocityPlatform extends AbstractPlatform {
 	}
 
 	_mapMeasurementType(type) {
-		if (typeof CumulocityPlatform.easurementTypeMapping[type] === 'undefined') {
+		if (typeof CumulocityPlatform.measurementTypeMapping[type] === 'undefined') {
 			return AbstractPlatform.MeasurementType.UNSUPPORTED;
 		}
 

views/DeviceView.js

@@ -211,28 +211,44 @@ class DeviceView extends Component {
 		const modelToBackgroundMap = {
 			RaspPi: '/gfx/images/devices/raspberry.jpg',
 		};
-		const typeToBackgroundMap = {
-			c8y_Linux: '/gfx/images/devices/computer.jpg',
-			Light: '/gfx/images/devices/light.jpg',
-			Motion: '/gfx/images/devices/motion.jpg',
-			Relay: '/gfx/images/devices/relay.jpg',
+		const capabilityToBackgroundMap = {
+			[AbstractPlatform.CapabilityType.LIGHT]: '/gfx/images/devices/light.jpg',
+			[AbstractPlatform.CapabilityType.MOTION]: '/gfx/images/devices/motion.jpg',
+			[AbstractPlatform.CapabilityType.RELAY]: '/gfx/images/devices/relay.jpg',
+			[AbstractPlatform.CapabilityType.POSITION]: '/gfx/images/devices/position.jpg',
 		};
-		let backgroundImage = null;
 
-		backgroundImage = Object.keys(modelToBackgroundMap).reduce((background, pattern) => {
-			const regexp = new RegExp(pattern);
+		// search for capabilities
+		let backgroundImage = info.capabilities.reduce((background, capability) => {
+			if (background !== null) {
+				return background;
+			}
+
+			const matchingCapabilityType = Object.keys(capabilityToBackgroundMap).find(
+				(capabilityType) => capabilityType === capability.type
+			) || null;
 
-			if (regexp.test(info.model)) {
-				background = modelToBackgroundMap[pattern]; // eslint-disable-line
+			if (matchingCapabilityType) {
+				return capabilityToBackgroundMap[matchingCapabilityType];
 			}
 
 			return background;
-		}, backgroundImage);
+		}, null);
+
+		if (backgroundImage === null) {
+			backgroundImage = Object.keys(modelToBackgroundMap).reduce((background, pattern) => {
+				const regexp = new RegExp(pattern);
+
+				if (regexp.test(info.model)) {
+					background = modelToBackgroundMap[pattern]; // eslint-disable-line
+				}
+
+				return background;
+			}, null);
+		}
 
 		if (backgroundImage === null) {
-			backgroundImage = typeof typeToBackgroundMap[info.type] !== 'undefined'
-				? typeToBackgroundMap[info.type]
-				: typeToBackgroundMap[Object.keys(typeToBackgroundMap)[0]];
+			backgroundImage = '/gfx/images/devices/computer.jpg';
 		}
 
 		return backgroundImage;

views/components/capabilities/PositionSensorCapabilityComponent.js

@@ -1,8 +1,29 @@
 import React, { Component, PropTypes } from 'react';
 import { connect } from 'react-redux';
 
+import GoogleMap from 'google-map-react';
+
+import googleConfig from '../../../config/google-config';
 import AbstractPlatform from '../../../src/AbstractPlatform';
 
+function Marker({
+	text,
+}) {
+	return (
+		<div className="marker-component">
+			{text ? <div className="marker-component-text">{text}</div> : null}
+		</div>
+	);
+}
+
+Marker.propTypes = {
+	text: PropTypes.string,
+};
+
+Marker.defaultProps = {
+	text: '',
+};
+
 class PositionSensorCapabilityComponent extends Component {
 
 	static propTypes = {
@@ -24,15 +45,22 @@ class PositionSensorCapabilityComponent extends Component {
 	}
 
 	renderContents() {
+		const {
+			lat,
+			lng,
+			alt,
+		} = this.props.capability.info;
+
 		return (
-			<div>
-				POSITION
-				<ul>
-					<li><strong>Latitude:</strong> {this.props.capability.info.lat}</li>
-					<li><strong>Longitude:</strong> {this.props.capability.info.lng}</li>
-					<li><strong>Altitude:</strong> {this.props.capability.info.alt}</li>
-				</ul>
-			</div>
+			<GoogleMap
+				bootstrapURLKeys={{
+					key: googleConfig.apiKey,
+				}}
+				center={[lat, lng]}
+				zoom={10}
+			>
+				<Marker lat={lat} lng={lng} text={`Altitude: ${Math.round(alt * 10) / 10}m`} />
+			</GoogleMap>
 		);
 	}