Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Update templates to fit within 288px #2

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Update templates to fit within 288px #2

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
101 changes: 50 additions & 51 deletions templates/setup_templates.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,7 @@
var STEP = "auto";

// Width of the graph in pixels
// Let's use 400 for "normal" graphs and 170 for "small" graphs
var SIZE = 400;
var SIZE = 288;

var xScale;
var yScale;
Expand All @@ -20,52 +19,48 @@

<script id="grid-setup-post" type="text/graphie">

//////////////////////////////////////////////////////////////
// Setup grid, ticks, and labels and initialize graph.
function setup() {
var dimensions = [SIZE, SIZE];
var range = [X_RANGE, Y_RANGE];
var step = STEP;
if (step === "auto") {
step = _.map(range, function(extent, i) {
return Perseus.Util.tickStepFromExtent(
extent, dimensions[i]);
});
}
var gridConfig = _.map(range, function(extent, i) {
return Perseus.Util.gridDimensionConfig(
step[i],
extent,
dimensions[i]);
});
var scale = _.pluck(gridConfig, "scale");
xScale = scale[0];
yScale = scale[1];
var paddedRange = _.map(range, function(extent, i) {
var padding = 25 / scale[i];
return [extent[0], extent[1] + padding];
});
graphInit({
gridRange: range,
range: paddedRange,
scale: scale,
axisArrows: "<->",
labelFormat: function(s) {
return "\\small{" + s + "}";
},
gridStep: _.pluck(gridConfig, "gridStep"),
tickStep: _.pluck(gridConfig, "tickStep"),
labelStep: 1,
unityLabels: _.pluck(gridConfig, "unityLabel")
});
style({
clipRect: [[X_RANGE[0], Y_RANGE[0]],
[X_RANGE[1] - X_RANGE[0],
Y_RANGE[1] - Y_RANGE[0]]]
});

label([0, Y_RANGE[1]], "y", "above");
label([X_RANGE[1], 0], "x", "right");
//////////////////////////////////////////////////////////////
// Setup grid, ticks, and labels and initialize graph.
function setup() {
var dimensions = [SIZE, SIZE];
var range = [X_RANGE, Y_RANGE];
var step = STEP;
if (step === "auto") {
step = _.map(range, function(extent, i) {
return Perseus.Util.tickStepFromExtent(
extent, dimensions[i]);
});
}
var gridConfig = _.map(range, function(extent, i) {
return Perseus.Util.gridDimensionConfig(
step[i],
extent,
dimensions[i]);
});
var scale = _.pluck(gridConfig, "scale");
xScale = scale[0];
yScale = scale[1];
graphInit({
gridRange: range,
range: range,
scale: scale,
axisArrows: "<->",
labelFormat: function(s) {
return "\\small{" + s + "}";
},
gridStep: _.pluck(gridConfig, "gridStep"),
tickStep: _.pluck(gridConfig, "tickStep"),
labelStep: 1,
unityLabels: _.pluck(gridConfig, "unityLabel")
});
style({
clipRect: [[X_RANGE[0], Y_RANGE[0]],
[X_RANGE[1] - X_RANGE[0],
Y_RANGE[1] - Y_RANGE[0]]]
});

label([10/xScale, Y_RANGE[1]], "y", "below");
label([X_RANGE[1]-10/yScale, 0], "x", "above");
}

</script>
Expand All @@ -75,7 +70,7 @@
var range = RANGE;

/* The output's largest side is limited to this many pixels */
var size = 400;
var size = 288;

setup();
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
Expand Down Expand Up @@ -105,7 +100,7 @@
var LABEL_DEGREES = false; // ignored if LABEL_THETA is false

// Width of the graph in pixels
var SIZE = 400;
var SIZE = 288;

setup();
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
Expand All @@ -115,6 +110,10 @@
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
// Setup grid, ticks, and labels and initialize graph.
function setup() {
var PADDING = 35;
if (LABEL_THETA) {
SIZE -= PADDING * 2;
}
var dimensions = [SIZE, SIZE];
var range = [[-R_MAX, R_MAX], [-R_MAX, R_MAX]];

Expand All @@ -129,7 +128,7 @@
var paddedRange = range;
if (LABEL_THETA) {
paddedRange = _.map(range, function(extent, i) {
var padding = 35 / scale[i];
var padding = PADDING / scale[i];
return [extent[0] - padding, extent[1] + padding];
});
}
Expand Down