Skip to content

Commit

Permalink
Modernize the appeance of the device in the Accelerometer panel.
Browse files Browse the repository at this point in the history
  • Loading branch information
@TimBarham
TimBarham committed Oct 18, 2016
1 parent ab67e67 commit 706fbbe
Show file tree
Hide file tree
Showing 6 changed files with 195 additions and 43 deletions.
7 changes: 6 additions & 1 deletion src/plugins/cordova-plugin-device-motion/3d.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,8 +56,13 @@ ThreeD.prototype.setPoints = function(Points){
for(var value=Points.length;--value>=0;) POLYMESH[value] = Points[value].slice();
}
ThreeD.prototype.loadMesh = function(array){
if(POLYMESH = array.split(";")) for(i=POLYMESH.length;--i>=0;) POLYMESH[i] = POLYMESH[i].split(",");
if (Array.isArray(array)) {
POLYMESH = JSON.parse(JSON.stringify(array));
} else {
if(POLYMESH = array.split(";")) for(i=POLYMESH.length;--i>=0;) POLYMESH[i] = POLYMESH[i].split(",");
}
}

ThreeD.prototype.getPoints = function(){ return POLYMESH; }

ThreeD.prototype.setCenter = function(x,y){ CENTERX = x|0; CENTERY = y|0; }
Expand Down
1 change: 1 addition & 0 deletions src/plugins/cordova-plugin-device-motion/device-mesh.json
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion src/plugins/cordova-plugin-device-motion/draw.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ function Drawing(){
Drawing.prototype.initialize = function(canvas){
CANVAS = canvas.getContext("2d");
CANVAS.lineJoin = "round";
CANVAS.lineWidth = 1;
CANVAS.lineWidth = 0.75;
}
Drawing.prototype.loadTextures = function(textures){ TEXTURES = textures; }
Drawing.prototype.setFillColor = function(r,g,b){ CANVAS.fillStyle = "rgb("+(r>255?255:(r<0?0:r|0))+", "+(g>255?255:(g<0?0:g|0))+", "+(b>255?255:(b<0?0:b|0))+")"; }
Expand Down
185 changes: 185 additions & 0 deletions src/plugins/cordova-plugin-device-motion/generate-device-mesh.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,185 @@
// Copyright (c) Microsoft Corporation. All rights reserved.

// This is not used at runtime, but can be used at design time (simple run from node from the command line) to generate
// device-mesh.json

var fs = require('fs');

var cornerRadius = 6;
var mainX = 40;
var mainY = 70;
var displayX = 35;
var displayY = 56;
var innerX = mainX - cornerRadius;
var innerY = mainY - cornerRadius;

var speakerX = 15;
var speakerHeight = 3;

// Edge doesn't come completely to the front to help avoid artifacts from the way draw.js renders
var z = 5;
var fudge = 0.5;
var edgeZ = z - fudge;
var displayZ = z;

var deviceMesh = [
// Display
[-displayX + 0.5, -displayY + 0.5, displayZ, displayX - 0.5, -displayY + 0.5, displayZ, displayX - 0.5, displayY - 0.5, displayZ, 255, 255, 255, -1, 0],
[-displayX + 0.5, -displayY + 0.5, displayZ, displayX - 0.5, displayY - 0.5, displayZ, -displayX + 0.5, displayY - 0.5, displayZ, 255, 255, 255, -1, 0],

// Speaker
[-speakerX + 0.5, -innerY + 0.5, displayZ, speakerX - 0.5, -innerY + 0.5, displayZ, speakerX - 0.5, -innerY + speakerHeight - 0.5, displayZ, 80, 80, 80, -1, 0],
[-speakerX + 0.5, -innerY + 0.5, displayZ, speakerX - 0.5, -innerY + speakerHeight - 0.5, displayZ, -speakerX + 0.5, -innerY + speakerHeight - 0.5, displayZ, 80, 80, 80, -1, 0],

// Above display
frontBlackTriangle(-innerX, -mainY, innerX, -mainY, innerX, -innerY),
frontBlackTriangle(-innerX, -mainY, innerX, -innerY, -innerX, -innerY),

frontBlackTriangle(-mainX, -innerY + speakerHeight, mainX, -innerY + speakerHeight, mainX, -displayY),
frontBlackTriangle(-mainX, -innerY + speakerHeight, mainX, -displayY, -mainX, -displayY),

frontBlackTriangle(-mainX, -innerY, -speakerX, -innerY, -speakerX, -innerY + speakerHeight),
frontBlackTriangle(-mainX, -innerY, -speakerX, -innerY + speakerHeight, -mainX, -innerY + speakerHeight),

frontBlackTriangle(mainX, -innerY, speakerX, -innerY + speakerHeight, speakerX, -innerY),
frontBlackTriangle(mainX, -innerY, mainX, -innerY + speakerHeight, speakerX, -innerY + speakerHeight),

// Left of the display
frontBlackTriangle(-mainX, -displayY, -displayX, -displayY, -displayX, displayY),
frontBlackTriangle(-mainX, -displayY, -displayX, displayY, -mainX, displayY),

// Right of the display
frontBlackTriangle(displayX, -displayY, mainX, -displayY, mainX, displayY),
frontBlackTriangle(displayX, -displayY, mainX, displayY, displayX, displayY),

// Bottom of the display
frontBlackTriangle(-mainX, displayY, mainX, displayY, mainX, innerY),
frontBlackTriangle(-mainX, displayY, mainX, innerY, -mainX, innerY),

frontBlackTriangle(-innerX, innerY, innerX, innerY, innerX, mainY),
frontBlackTriangle(-innerX, innerY, innerX, mainY, -innerX, mainY),

// Back main
backBlackTriangle(-mainX, -innerY, mainX, innerY, mainX, -innerY),
backBlackTriangle(-mainX, innerY, mainX, innerY, -mainX, -innerY),

// Back top
backBlackTriangle(-innerX, -mainY, innerX, -innerY, innerX, -mainY),
backBlackTriangle(-innerX, -innerY, innerX, -innerY, -innerX, -mainY),

// Back bottom
backBlackTriangle(-innerX, mainY, innerX, mainY, innerX, innerY),
backBlackTriangle(-innerX, innerY, -innerX, mainY, innerX, innerY),

// Left side
edgeTriangle(-mainX, -innerY, -edgeZ, -mainX, -innerY, edgeZ, -mainX, innerY, edgeZ),
edgeTriangle(-mainX, innerY, edgeZ, -mainX, innerY, -edgeZ, -mainX, -innerY, -edgeZ),

// Right side
edgeTriangle(mainX, -innerY, -edgeZ, mainX, innerY, edgeZ, mainX, -innerY, edgeZ),
edgeTriangle(mainX, innerY, edgeZ, mainX, -innerY, -edgeZ, mainX, innerY, -edgeZ),

// Top
edgeTriangle(-innerX, -mainY, edgeZ, -innerX, -mainY, -edgeZ, innerX, -mainY, -edgeZ),
edgeTriangle(innerX, -mainY, edgeZ, -innerX, -mainY, edgeZ, innerX, -mainY, -edgeZ),

// Top
edgeTriangle(-innerX, mainY, edgeZ, innerX, mainY, -edgeZ, -innerX, mainY, -edgeZ),
edgeTriangle(innerX, mainY, edgeZ, innerX, mainY, -edgeZ, -innerX, mainY, edgeZ)
];

// We'll actually do double this many, as we will come in from both ends of the arc (since it is symmetrical).
var cornerSegments = 8;

// Append corners
var x_Prev = innerX + cornerRadius;
var y_Prev = innerY;
var altX_Prev = innerX;
var altY_Prev = innerY + cornerRadius;

for (var i = 1; i <= cornerSegments; i++) {
var angle = i / cornerSegments / 2 * Math.PI / 2;

var dX = Math.cos(angle) * cornerRadius;
var dY = Math.sin(angle) * cornerRadius;

var x = innerX + dX;
var y = innerY + dY;
var altX = innerX + dY;
var altY = innerY + dX;

// Front face bottom left corner
deviceMesh.push(frontBlackTriangle(-x, y, -x_Prev, y_Prev, -innerX, innerY));
deviceMesh.push(frontBlackTriangle(-innerX, innerY, -altX_Prev, altY_Prev, -altX, altY));

// Front face top left corner
deviceMesh.push(frontBlackTriangle(-innerX, -innerY, -x_Prev, -y_Prev, -x, -y));
deviceMesh.push(frontBlackTriangle(-altX, -altY, -altX_Prev, -altY_Prev, -innerX, -innerY));

// Front face bottom right corner
deviceMesh.push(frontBlackTriangle(innerX, innerY, x_Prev, y_Prev, x, y));
deviceMesh.push(frontBlackTriangle(altX, altY, altX_Prev, altY_Prev, innerX, innerY));

// Front face top right corner
deviceMesh.push(frontBlackTriangle(x, -y, x_Prev, -y_Prev, innerX, -innerY));
deviceMesh.push(frontBlackTriangle(innerX, -innerY, altX_Prev, -altY_Prev, altX, -altY));

// Back face bottom left corner
deviceMesh.push(backBlackTriangle(-x, y, -innerX, innerY, -x_Prev, y_Prev));
deviceMesh.push(backBlackTriangle(-innerX, innerY, -altX, altY, -altX_Prev, altY_Prev));

// Back face top left corner
deviceMesh.push(backBlackTriangle(-innerX, -innerY, -x, -y, -x_Prev, -y_Prev));
deviceMesh.push(backBlackTriangle(-altX, -altY, -innerX, -innerY, -altX_Prev, -altY_Prev));

// Back face bottom right corner
deviceMesh.push(backBlackTriangle(innerX, innerY, x, y, x_Prev, y_Prev));
deviceMesh.push(backBlackTriangle(altX, altY, innerX, innerY, altX_Prev, altY_Prev));

// Back face top right corner
deviceMesh.push(backBlackTriangle(x, -y, innerX, -innerY, x_Prev, -y_Prev));
deviceMesh.push(backBlackTriangle(innerX, -innerY, altX, -altY, altX_Prev, -altY_Prev));

// Bottom left corner edge
deviceMesh.push(edgeTriangle(-x_Prev, y_Prev, -edgeZ, -x_Prev, y_Prev, edgeZ, -x, y, edgeZ));
deviceMesh.push(edgeTriangle(-x_Prev, y_Prev, -edgeZ, -x, y, edgeZ, -x, y, -edgeZ));
deviceMesh.push(edgeTriangle(-altX, altY, edgeZ, -altX_Prev, altY_Prev, edgeZ, -altX_Prev, altY_Prev, -edgeZ));
deviceMesh.push(edgeTriangle(-altX, altY, -edgeZ, -altX, altY, edgeZ, -altX_Prev, altY_Prev, -edgeZ));

// Top right corner edge
deviceMesh.push(edgeTriangle(x_Prev, -y_Prev, -edgeZ, x_Prev, -y_Prev, edgeZ, x, -y, edgeZ));
deviceMesh.push(edgeTriangle(x_Prev, -y_Prev, -edgeZ, x, -y, edgeZ, x, -y, -edgeZ));
deviceMesh.push(edgeTriangle(altX, -altY, edgeZ, altX_Prev, -altY_Prev, edgeZ, altX_Prev, -altY_Prev, -edgeZ));
deviceMesh.push(edgeTriangle(altX, -altY, -edgeZ, altX, -altY, edgeZ, altX_Prev, -altY_Prev, -edgeZ));

// Bottom right corner edge
deviceMesh.push(edgeTriangle(x, y, edgeZ, x_Prev, y_Prev, edgeZ, x_Prev, y_Prev, -edgeZ));
deviceMesh.push(edgeTriangle(x, y, -edgeZ, x, y, edgeZ, x_Prev, y_Prev, -edgeZ));
deviceMesh.push(edgeTriangle(altX_Prev, altY_Prev, -edgeZ, altX_Prev, altY_Prev, edgeZ, altX, altY, edgeZ));
deviceMesh.push(edgeTriangle(altX_Prev, altY_Prev, -edgeZ, altX, altY, edgeZ, altX, altY, -edgeZ));

// Top left corner edge
deviceMesh.push(edgeTriangle(-x, -y, edgeZ, -x_Prev, -y_Prev, edgeZ, -x_Prev, -y_Prev, -edgeZ));
deviceMesh.push(edgeTriangle(-x, -y, -edgeZ, -x, -y, edgeZ, -x_Prev, -y_Prev, -edgeZ));
deviceMesh.push(edgeTriangle(-altX_Prev, -altY_Prev, -edgeZ, -altX_Prev, -altY_Prev, edgeZ, -altX, -altY, edgeZ));
deviceMesh.push(edgeTriangle(-altX_Prev, -altY_Prev, -edgeZ, -altX, -altY, edgeZ, -altX, -altY, -edgeZ));

x_Prev = x;
y_Prev = y;
altX_Prev = altX;
altY_Prev = altY;
}

function frontBlackTriangle(x1, y1, x2, y2, x3, y3) {
return [x1, y1, z, x2, y2, z, x3, y3, z, 40, 40, 40, -1, 0];
}

function backBlackTriangle(x1, y1, x2, y2, x3, y3) {
return [x1, y1, -z, x2, y2, -z, x3, y3, -z, 40, 40, 40, -1, 0];
}

function edgeTriangle(x1, y1, z1, x2, y2, z2, x3, y3, z3) {
return [x1, y1, z1, x2, y2, z2, x3, y3, z3, 128, 128, 128, -1, 0];
}

fs.writeFileSync('device-mesh.json', JSON.stringify(deviceMesh, null));
1 change: 1 addition & 0 deletions src/plugins/cordova-plugin-device-motion/sim-host-panels.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
#accelerometer-help {
font-size: 0.9em;
text-align: center;
padding: 1.5em 0;
margin-left: auto;
margin-right: auto;
}
Expand Down
42 changes: 1 addition & 41 deletions src/plugins/cordova-plugin-device-motion/sim-host.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,47 +38,7 @@ var _mouseDown,
_alpha,
_beta,
_gamma,
_shape =
//
// The front side
//
// x, y, z x, y, z x, y, z
// for some strange reason for y -100 is top, 100 is bottom
'-30,30,10, 30,30,10, 30,60,10, 100,100,100,-1,0;' + // top left, top right, bottom right - of the right triangle
'-30,30,10, 30,60,10, -30,60,10, 100,100,100,-1,0;' + // top left, right bottom, left bottom - of the left triangle
// front side 'the phone display'
'-20,-50,11, 20,-50,11, 20,20,11, 100,100,100,-1,0;' +
'-20,-50,11, 20,20,11, -20,20,11, 100,100,100,-1,0;' +
// below the display
'-30,30,10, 30,20,10, 30,30,10, 0,0,0,-1,0;' +
'-30,30,10, -30,20,10, 30,20,10, 0,0,0,-1,0;' +
// above the display
'-30,-60,10, 30,-60,10, 30,-50,10, 0,0,0,-1,0;' +
'-30,-60,10, 30,-50,10, -30,-50,10, 0,0,0,-1,0;' +
// left of the display
'-30,-50,10, -20,-50,10, -20,20,10, 0,0,0,-1,0;' +
'-30,-50,10, -20,20,10, -30,20,10, 0,0,0,-1,0;' +
// right of the display
'20,-50,10, 30,-50,10, 30,20,10, 0,0,0,-1,0;' +
'20,-50,10, 30,20,10, 20,20,10, 0,0,0,-1,0;' +


// back side, opposite side to the above one
'-30,-60,-10, 30,60,-10, 30,-60,-10, 0,0,0,-1,0;' +
'-30,-60,-10, -30,60,-10, 30,60,-10, 0,00,-1,0;' +
// right side
'30,-60,-10, 30,60,-10, 30,60,10, 50,50,80,-1,0;' +
'30,-60,-10, 30,60,10, 30,-60,10, 50,50,80,-1,0;' +
// left side
'-30,-60,-10, -30,60,10, -30,60,-10, 50,50,80,-1,0;' +
'-30,-60,-10, -30,-60,10, -30,60,10, 50,50,80,-1,0;' +

// top
'30,-60,-10, -30,-60,10, -30,-60,-10, 50,80,50,-1,0;' +
'30,-60,-10, 30,-60,10, -30,-60,10, 50,80,50,-1,0;' +
// bottom
'30,60,-10, -30,60,-10, -30,60,10, 80,50,50,-1,0;' +
'30,60,-10, -30,60,10, 30,60,10, 80,50,50,-1,0';
_shape = require('./device-mesh.json');

var G_CONSTANT = 9.81;

Expand Down

0 comments on commit 706fbbe

Please sign in to comment.