Cloud Notebooks and Graphics

Jan Poeschko, Senior System Developer, Wolfram Research
John Pacey, Kernel Developer, Wolfram Research

Join the Conversation #WolframTechConf

Introduction to Cloud notebooks

Integrate[1/(1-x^20),x]

Button["Say Hello",Print["Hello"]]

Graphics

Graphics[{Thick,Green,Rectangle[{0,-1},{2,1}],Red,Disk[],Blue,Circle[{2,0}],Yellow,Polygon[{{2,0},{4,1},{4,-1}}],Purple,Arrowheads[Large],Arrow[{{4,3/2},{0,3/2},{0,0}}],Black,Dashed,Line[{{-1,0},{4,0}}]}]

GraphPlot[Table[i->Mod[i^2,102],{i,0,102}]]

ReliefPlot[Table[i+Sin[i^2+j^2],{i,-4,4,.03},{j,-4,4,.03}],ColorFunction->"SunsetColors"]

Graphics[Table[{Hue[t/20],Circle[{Cos[2Pi t/20],Sin[2Pi t/20]}]},{t,20}]]

3D Graphics

Graphics3D[{Blue,Cylinder[],Red,Sphere[{0,0,2}],Black,Thick,Dashed,Line[{{-2,0,2},{2,0,2},{0,0,4},{-2,0,2}}],Yellow,Polygon[{{-3,-3,-2},{-3,3,-2},{3,3,-2},{3,-3,-2}}],Green,Opacity[.3],Cuboid[{-2,-2,-2},{2,2,-1}]}]

ParametricPlot3D[{(3+Cos[v])Cos[u],(3+Cos[v])Sin[u],Sin[v]},{u,0,2Pi},{v,0,2Pi},Mesh->None]

Table[Graphics3D[{Orange,Specularity[White,n],Sphere[]}],{n,{5,100}}]

ChemicalData["Caffeine","MoleculePlot"]

Plot3D[Sqrt[1-x^2-y^2],{x,-1,1},{y,-1,1},Mesh->8,ColorFunction->Hue,MeshShading->{{Yellow,Orange},{Pink,Red}}]

Dynamic

Dynamic[s]

s="Hello World!";

Style[s,FontSize->100,FontColor->Dynamic[c]]

c=Red

ColorSetter[Dynamic[c]]

Continuous action and preemptive evaluations

{Slider[Dynamic[x]],Dynamic[x]}

Pause[10]

DynamicModule

c1=0;{EventHandler[Graphics[Disk[]],{"MouseMoved":>(c1=c1+1)}],Style[Dynamic[c1],100]}

DynamicModule[{c2=0},{EventHandler[Graphics[Disk[]],{"MouseMoved":>(c2=c2+1)}],Style[Dynamic[c2],100]}]

Zoomable Graphics using Dynamic and EventHandler

zoomable[g_Graphics]:=With[{
options=Options[g],originalRange=PlotRange/.Options[g,PlotRange],
primitives=First[g],
makeRectangle=({Opacity[0.25],EdgeForm[{Dashing[Small]}],FaceForm[Yellow],RectangleBox[#1,#2]}&)},
DynamicModule[{first=None,second=None,range=originalRange},
Column[{EventHandler[
Graphics[{primitives,
Dynamic[RawBoxes[If[first=!=None&&second=!=None,makeRectangle[first,second],{}]]]},
PlotRange->Dynamic@range,Sequence@@options
],{
{"MouseDown",1}:>(first=(MousePosition["Graphics"])),
{"MouseDragged",1}:>(second=MousePosition["Graphics"]),
{"MouseUp",1}:>(If[first=!=None&&second=!=None,range=Transpose@{first,second}];first=None;second=None)
}
],Button["Reset",range=originalRange]}]
]
];

zoomable[Plot[Sin[x],{x,0,2Pi}]]

Interactive Graphics

ListPlot[Table[Sin[x],{x,0,10,0.1}],Method->{"InteractiveElements"->{"Effects"->"DropLines","DropLineStyle"->Directive[Red,AbsoluteThickness[2],AbsoluteDashing[{5,10}]]}}]

ListPlot[Table[Sin[x],{x,0,10,0.1}],Method->{"InteractiveElements"->{"Effects"->"HighlightPoints","PointMagnification"->5}}]

ListPlot[Table[Sin[x],{x,0,10,0.1}],Method->{"InteractiveElements"->{"NearestPoint"->True}}]

ListPlot[Table[Sin[x],{x,0,10,0.1}]]

Manipulate

Manipulate[Factor[x^n-y^n],{n,1,20,1}]

Manipulate[Plot[Sin[a x+b],{x,0,6}],{{a,2,"Multiplier"},1,4},{{b,0,"Phase Parameter"},0,10}]

Manipulate[Plot3D[Sin[a x y+a],{x,0,3},{y,0,3}],{a,1,3}]

Manipulate[ParametricPlot[{a1 Sin[n1 (x+p1)],a2 Cos[n2 (x+p2)]},{x,0,20 Pi},PlotRange->1,PerformanceGoal->"Quality"],Dynamic[ParametricPlot[{a1 Sin[n1 (x+p1)],x},{x,0,2 Pi},ImageSize->100,AspectRatio->1,PlotRange->{{-1,1},{0,2 Pi}}]],{{n1,1,"Frequency"},1,4},{{a1,1,"Amplitude"},0,1},{{p1,0,"Phase"},0,2 Pi},Delimiter,Dynamic[Plot[a2 Sin[n2 (x+p2)],{x,0,2 Pi},ImageSize->100,AspectRatio->1,PlotRange->1]],{{n2,5/4,"Frequency"},1,4},{{a2,1,"Amplitude"},0,1},{{p2,0,"Phase"},0,2 Pi},ControlPlacement->Left]

Manipulate[Column[{PolyhedronData[g],PolyhedronData[g,p]}],{g,PolyhedronData[All]},{p,Complement@@PolyhedronData/@{"Properties","Classes"}}]

Locators

LocatorPane[{1,1}/2,Graphics[{Gray,Disk[]}]]

DynamicModule[{pt={{1,1}/2,{-1,1}/2,{1,-1}/2}},{LocatorPane[Dynamic[pt],Graphics[{Gray,Disk[]}]],Dynamic[pt]}]

DynamicModule[{pt={0,0}},{LocatorPane[Dynamic[pt],Graphics[{Gray,Disk[]}]],Slider2D[Dynamic[pt],{-1,1}]}]

Manipulate[Graphics[Polygon[pt],PlotRange->2],{{pt,{{0,0},{1,0},{1,1},{0,1},{1,-1}}},Locator}]

A=(({{-1.1, 0.9}, {-1.4, 0.3}}));
Manipulate[ParametricPlot[Evaluate[MatrixExp[A t,#]&/@pt],{t,0,10},PlotRange->5],{{pt,{{2,0},{0,1},{-3,0}}},Locator}]

Sound

Sound[{SoundNote["C"],SoundNote["G"]}]

Sound[SoundNote[#,1,RandomChoice[{"Piano","Cello"}]]& /@ RandomInteger[12, 30], 4]

Deploying notebooks to the Cloud

CloudDeploy

manipulate=Manipulate[Plot[Sin[a x+b],{x,0,6}],{{a,2,"Multiplier"},1,4},{{b,0,"Phase Parameter"},0,10}]

CloudDeploy[manipulate]

Options[%,Permissions]

Permissions

CloudDeploy[manipulate,Permissions->"Public"]

Options[%,Permissions]

Notebook HTML cache

static HTML generated when editing and closing a notebook

when opening a notebook, static HTML is rendered while loading resources

CloudDeploy[Manipulate[Pause[3];Factor[x^n+1],{n,10,100,1}]]

Embedding and controlling notebooks

embed notebooks in HTML pages

access and control the notebook from JavaScript

Hyperlink["HTML source file","jpoeschko/NotebookAPIDemo/index.html"]

Hyperlink["Notebook API Demo","jpoeschko/NotebookAPIDemo/index.html?_view=file"]

API methods

insertCellAtCursor

setCellContent, getCellContent

getElements, getElementParent

openGroup, closeGroup

setOptions, getOption

getSelection, selectElements

selectSeparatorBeforeElement, selectSeparatorAfterElement

moveSelection, moveSelectionDirections

copyData, cutData, pasteData

evaluateCell, evaluateExpression

addEventListener, removeEventListener

Future directions

complete box rendering support

documentation of limitations

two-dimensional box editing

live collaboration on cloud notebooks

Thank you!

jpoeschko@wolfram.com

jpacey@wolfram.com

Related talks

Commanding the Wolfram Cloud (Todd Gayley): Wed 10:30 – 11:30

Cloud Programming (Joel Klein): Wed 11:30 – 12:00

Private Cloud (Tom Wickham-Jones): Thu 9:30 – 10:00

Web Development in the Wolfram Language (Carlo Barbieri, Riccardo Di Virgilio): Thu 10:30 – 11:00

Principles of Dynamic Interfaces (Lou D’Andria): Thu 2:00 – 3:00