From a633f7b9617396a5b66adf96d4c884b0e07ac960 Mon Sep 17 00:00:00 2001 From: Neil Fraser Date: Wed, 12 Nov 2014 14:30:45 -0800 Subject: [PATCH] Completed Graph demo. --- demos/graph/icon.png | Bin 0 -> 1762 bytes demos/graph/index.html | 48 +++++++++++------------------------------ demos/index.html | 36 ++++++++++++++++++++----------- tests/playground.html | 2 +- 4 files changed, 37 insertions(+), 49 deletions(-) create mode 100644 demos/graph/icon.png diff --git a/demos/graph/icon.png b/demos/graph/icon.png new file mode 100644 index 0000000000000000000000000000000000000000..ad8b582f69db7b102629ff4086ec495c5369d966 GIT binary patch literal 1762 zcmV<81|9i{P)UtpvFXuLY!G*CTijWWs{`1VIr7pP__#PCHpELLxB?L4lQ3hyC|F?Eu|ml^eyuI zFW+e&g^c2-!uUsW!SfW}8k3Te@ZiA%a2!V?DUqs81L8t(q1izuD@^LNjibJK1ZowBqP#et=PCm2 z++wlFa?vkyzZYti0HUyW`viWo{vs`q^z?LDew-ZrM#A;BcJi?H+Mrf(IQ`akpXSP9 zvG_Jw@$vCwZ$i|?n*K#2E5Cin^XJcLL_-R5?da;6K!Q$z;(Y)9+~m|{(kMTT>$UDb zbosG$et(XD$fVD{`diHCddpc6kT9yL-GL^Hdl7i{WMV*{B_J}Gs!zY{1pt&BUhA>n zK|mOqs`3kPO@->f2}qDpRJCb9 ze6S`#r@)EVc^u1=XRpXBkgl#S7>!0Kl}fl=E?l{C1qOp*S%GM3cc8vy1Wgu)*jAJu zhr)fjMYmxk2XgAvDU_C$;>eLBxOM9m%F4>n(9rNw18B33p{v`4R_hpk>i7q|QxK2k zW@%BB7a#QMJ7gd&EiJfr?;ZdkCnpC+qcI{)Nxyy4J)^r_a5(?a-UVCkTQtzfr5zqNk?^8jS`HhXcvU$rv6U zMn*;klff61@qpR@PO}YoB?(;2M(Mx9X#<=#2#yYb?*KP3z~r}joguq-?}piIMnORV z%w{t(Gcy4I*REX)+g%)^{4~CMGJ?9t!(wDJR|z@=HpIG3$g9aJXkt8*4%e%yQBqvw z(XNSEfmD4o0APKra>f*G3+Z~L8V9dHE?>S3qtS>PH*Ub?a-p)al37#(0BRM7orYD| zX^26pJ{mg>YQOrbI)5L<`5!GQU*;9a)~#F7*w`5MywIKRhf!7gzp2Ph(;zQP8&dXk zsVO4XA)UP(KDqO|=v>1Y)ew*cQxQ{0(JOKG9X$-m(aUxr$_&UTKaERwpNYOgu2cj8 z@e@XA#h>DX^CbsdvZW%Hnxa_4xLUp$hD3o#umCa_Mv7jEZ$3|5*8YMykV|);&6ydS z!kUsGAoCY#bpzs4L|4l<6AYF>n%W(xu5%~(z9>y1GsO}}-{7Qpuj_k-34W(N2#8EN zf3pv~Q$Ti_Ca8N|35bNc-Dnpp7kvEodKzt(K>7wJ#V3f)olGPr&Kk&EQ?;D3wGj!V zsog=QN=hK1)H)gEr*UECQQ(rpYspjvD9LM`)I7AKf5@Fmr>Kgt$r|OS#qxFU7p|kx z4R(f{IdcXT6%|k@6tLUv&}bHR!oF&J)cv>uymKW|H%udH%!)wDj8F}g8TopR!u-R& zUenM!Fd<|VKNT{Hp9&p+x#)EjLG~+It&`b$P`O!J%2mnbL;S6EGPlZq5$*i3cj`3{ z?c(fMj(3Vg6p*=*RqktA8d26j=9bN-)OrK}@l`gP6lNfcmCYuF8OUN~vq@nD(l8mND8wo&6&F(tph5N`{F$ZF59ucb;P?{tHfXu#~^7#HZ8bQ`T zW~=-IK=zJRG=i*wJo?!UBR5M+&O8!;%&yF7At;aj1Kv1pF literal 0 HcmV?d00001 diff --git a/demos/graph/index.html b/demos/graph/index.html index 02d8cca13..d8a3c31a3 100644 --- a/demos/graph/index.html +++ b/demos/graph/index.html @@ -2,7 +2,7 @@ - Blockly Demo: Graphing Calculator + Blockly Demo: Graph @@ -49,7 +49,7 @@

Blockly > - Demos > Graphing Calculator

+ Demos > Graph

This is a demo of giving instant feedback as blocks are changed.

@@ -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.} 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. */ diff --git a/demos/index.html b/demos/index.html index c6be6ce41..19a94ffa2 100644 --- a/demos/index.html +++ b/demos/index.html @@ -67,18 +67,6 @@ - - - - - - - - -
See what Blockly looks like in right-to-left mode (for Arabic and Hebrew).
- - - @@ -115,6 +103,30 @@ + + + + + + + + +
Instant updates when blocks are changed.
+ + + + + + + + + + + +
See what Blockly looks like in right-to-left mode (for Arabic and Hebrew).
+ + + diff --git a/tests/playground.html b/tests/playground.html index ab8b9249b..4c3c9efd4 100644 --- a/tests/playground.html +++ b/tests/playground.html @@ -142,7 +142,7 @@ h1 { } #importExport { font-family: monospace; -}; +}