Skip to content

GitLab

A
ardublockly
Commit a633f7b9 authored by Neil Fraser's avatar Neil Fraser
Browse files
Options

Completed Graph demo.

parent 1db43afb
Hide whitespace changes
Inline Side-by-side
Showing with 37 additions and 49 deletions
demos/graph/index.html
View file @ a633f7b9
......@@ -2,7 +2,7 @@
<html>
<head>
<meta charset="utf-8">
<title>Blockly Demo: Graphing Calculator</title>
<title>Blockly Demo: Graph</title>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="../../blockly_compressed.js"></script>
<script type="text/javascript" src="../../blocks_compressed.js"></script>
......@@ -49,7 +49,7 @@
<div id="blocklyDiv"></div>
<h1><a href="https://developers.google.com/blockly/">Blockly</a> &gt;
<a href="../index.html">Demos</a> &gt; Graphing Calculator</h1>
<a href="../index.html">Demos</a> &gt; Graph</h1>
<p>This is a demo of giving instant feedback as blocks are changed.</p>
......@@ -161,7 +161,8 @@ Blockly.Blocks['graph_set_y'] = {
this.setHelpUrl(Blockly.Msg.VARIABLES_SET_HELPURL);
this.setColour(330);
this.appendValueInput('VALUE')
.appendField('y =');
.appendField('y =')
.setCheck('Number');
this.setTooltip(Blockly.Msg.VARIABLES_SET_TOOLTIP);
}
};
......@@ -170,7 +171,7 @@ Blockly.JavaScript['graph_set_y'] = function(block) {
// y variable setter.
var argument0 = Blockly.JavaScript.valueToCode(block, 'VALUE',
Blockly.JavaScript.ORDER_ASSIGNMENT) || '';
return argument0 + ';';
return 'y = ' + argument0 + ';';
};
/**
......@@ -202,9 +203,7 @@ Graph.options_ = {
* https://developers.google.com/chart/interactive/docs/gallery/linechart
*/
Graph.drawVisualization = function() {
var tuple = Graph.getFunction();
var defs = tuple[0];
var formula = tuple[1];
var formula = Blockly.JavaScript.workspaceToCode();
if (formula === Graph.oldFormula_) {
// No change in the formula, don't recompute.
return;
......@@ -212,16 +211,16 @@ Graph.drawVisualization = function() {
Graph.oldFormula_ = formula;
// Create and populate the data table.
var data = google.visualization.arrayToDataTable(Graph.plot(defs + formula));
var data = google.visualization.arrayToDataTable(Graph.plot(formula));
// Create and draw the visualization, passing in the data and options.
new google.visualization.LineChart(document.getElementById('visualization')).
draw(data, Graph.options_);
// Remove the ";" generally ending the JavaScript statement y = {code};.
formula = formula.replace(/;$/, '');
// Create the "y = ..." label. Find the relevant part of the code.
formula = formula.substring(formula.indexOf('y = '));
formula = formula.substring(0, formula.indexOf(';'));
var funcText = document.getElementById('funcText');
funcText.replaceChild(document.createTextNode('y = ' + formula),
funcText.lastChild);
funcText.replaceChild(document.createTextNode(formula), funcText.lastChild);
};
/**
......@@ -236,7 +235,7 @@ Graph.plot = function(code) {
// TODO: Improve range and scale of graph.
for (var x = -10; x <= 10; x = Math.round((x + 0.1) * 10) / 10) {
try {
y = eval(code);
eval(code);
} catch (e) {
y = NaN;
}
......@@ -257,29 +256,6 @@ Graph.plot = function(code) {
return table;
};
/**
* Get from blocks the right hand side content of the function y = f(x).
* @return {!Array.<string>} Tuple of any function definitions and the formula
* in JavaScipt for f(x).
*/
Graph.getFunction = function() {
var topBlocks = Blockly.mainWorkspace.getTopBlocks(false);
var yBlock;
// Set yBlock to only the code plugged into 'graph_set_y'.
for (var j = 0; j < topBlocks.length; j++) {
if (topBlocks[j].type == 'graph_set_y') {
yBlock = topBlocks[j];
}
}
if (!yBlock) {
return NaN;
}
Blockly.JavaScript.init();
var code = Blockly.JavaScript.blockToCode(yBlock);
var defs = Blockly.JavaScript.finish('');
return [defs, code];
};
/**
* Initialize Blockly and the graph. Called on page load.
*/
......
demos/index.html
View file @ a633f7b9
......@@ -67,18 +67,6 @@
</td>
</tr>
<tr>
<td>
<a href="rtl/index.html">
<img src="rtl/icon.png" height=80 width=100>
</a>
</td>
<td>
<div><a href="rtl/index.html">RTL</a></div>
<div>See what Blockly looks like in right-to-left mode (for Arabic and Hebrew).</div>
</td>
</tr>
<tr>
<td>
<a href="maxBlocks/index.html">
......@@ -115,6 +103,30 @@
</td>
</tr>
<tr>
<td>
<a href="graph/index.html">
<img src="graph/icon.png" height=80 width=100>
</a>
</td>
<td>
<div><a href="graph/index.html">Graph</a></div>
<div>Instant updates when blocks are changed.</div>
</td>
</tr>
<tr>
<td>
<a href="rtl/index.html">
<img src="rtl/icon.png" height=80 width=100>
</a>
</td>
<td>
<div><a href="rtl/index.html">RTL</a></div>
<div>See what Blockly looks like in right-to-left mode (for Arabic and Hebrew).</div>
</td>
</tr>
<tr>
<td>
<a href="storage/index.html">
......
tests/playground.html
View file @ a633f7b9
......@@ -142,7 +142,7 @@ h1 {
}
#importExport {
font-family: monospace;
};
}
</style>
</head>
<body onload="start()">
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment