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.

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

Docfixes #332

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
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
10 changes: 5 additions & 5 deletions docs/src/custom_widgets.md
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
# Custom widgets

Besides the standard widgets, Interact provides a framework to define custom GUIs. This is currently possible with two approaches, the full featured `Widget` type and the simple to use but more basic [`@manipulate`](@ref) macro.
Besides the standard widgets, Interact provides a framework to define custom GUIs. This is currently possible with two approaches: the full-featured `Widget` type, and the simpler but more basic [`@manipulate`](@ref) macro.

## The Widget type

The `Widget` type can be used to create custom widgets. The types is parametric, with the parameter being the name of the widget and it takes as argument a `OrderedDict` of children.
The `Widget` type can be used to create custom widgets. This type is parametric, with the parameter being the name of the widget, and it takes as argument a `OrderedDict` of children.

For example:

Expand All @@ -25,10 +25,10 @@ Optionally, the `Widget` can have some output, which should be an `Observable`:
```julia
d = OrderedDict(:label => "My label", :button => button("My button"))
output = map(t -> t > 5 ? "You pressed me many times" : "You didn't press me enough", d[:button])
w = Interact.Widget{:mywidget}(d, output = output)
w = Interact.Widget{:mywidget}(d, output=output)
```

Finally the [`@layout!`](@ref) macro allows us to set the layout of the widget:
Finally, the [`@layout!`](@ref) macro allows us to set the widget layout:

```julia
@layout! w hbox(vbox(:label, :button), observe(_)) # observe(_) refers to the output of the widget
Expand All @@ -41,7 +41,7 @@ Interact.@layout

## Defining custom widgets without depending on Interact

This is only relevant for package authors: it is not necessary to depend on Interact to define custom widgets. One can instead use the low-dependency package [Widgets](https://github.com/piever/Widgets.jl) that defines (but does not export) all the widgets. For example:
This is only relevant for package authors; it is not necessary to depend on Interact to define custom widgets. One can instead use the low-dependency package [Widgets](https://github.com/piever/Widgets.jl) that defines (but does not export) all standard widgets. For example:

```julia
# in the package MyPackage defining the recipe:
Expand Down
11 changes: 7 additions & 4 deletions docs/src/deploying.md
Original file line number Diff line number Diff line change
Expand Up @@ -20,14 +20,17 @@ display(ui)
Note that using Interact in Jupyter Lab requires installing an extension first:

```julia
cd(Pkg.dir("WebIO", "assets"))
;jupyter labextension install webio
;jupyter labextension enable webio/jupyterlab_entry
using Pkg
Pkg.add("WebIO")
using WebIO
cd(joinpath(dirname(pathof(WebIO)), "..", "packages"))
;jupyter labextension link webio
;jupyter labextension install jupyter-lab-provider
```

## Electron window

To deploy the app as a standalone Electron window, one would use [Blink.jl](https://github.com/JunoLab/Blink.jl):
To deploy the app as a standalone Electron window, use [Blink.jl](https://github.com/JunoLab/Blink.jl):

```julia
using Interact, Blink
Expand Down
10 changes: 2 additions & 8 deletions docs/src/getting_started.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,17 +2,11 @@

## Installing Interact

To install Interact, simply type

```julia
Pkg.add("Interact")
```

in the REPL.
Install Interact with `using Pkg; Pkg.add("Interact")`, or `]add Interact` in the REPL.

## Usage

The basic behavior (in Juno or Jupyter lab/notebook) is as follows:
Try entering the following minimal example in Juno or Jupyter notebook:

```julia
using Interact
Expand Down
20 changes: 9 additions & 11 deletions docs/src/index.md
Original file line number Diff line number Diff line change
@@ -1,34 +1,32 @@
# Interact

Interact allows to create small GUIs in Julia based on web technology. These GUIs can be deployed in jupyter notebooks, in the Juno IDE plot pane, in an Electron window or in the browser.
Interact uses web technologies to let you create straightforward graphical user interfaces (GUIs) for your Julia code. These GUIs can be used in jupyter notebooks, in the Juno IDE plot pane, in an Electron window, or in the browser.

To understand how to use it go through the [Tutorial](@ref). The tutorial is also available [here](https://github.com/JuliaGizmos/Interact.jl/blob/master/doc/notebooks/tutorial.ipynb) as a Jupyter notebook.
To understand how to use it, go through the [Tutorial](@ref), which is also available [here](https://github.com/JuliaGizmos/Interact.jl/blob/master/doc/notebooks/tutorial.ipynb) as a Jupyter notebook.

[InteractBase](https://github.com/piever/InteractBase.jl), [Knockout](https://github.com/JuliaGizmos/Knockout.jl) and [WebIO](https://github.com/JuliaGizmos/WebIO.jl) provide the logic that allows the communication between Julia and Javascript and the organization of the widgets.
[InteractBase](https://github.com/piever/InteractBase.jl), [Knockout](https://github.com/JuliaGizmos/Knockout.jl), and [WebIO](https://github.com/JuliaGizmos/WebIO.jl) provide the widgets and allow for communication between Julia and Javascript.

## Overview

Creating an app in Interact requires three ingredients:

- [Observables](@ref): references that can listen to changes in other references
- [Widgets](@ref): the graphical elements that make up the app
- [Layout](@ref): tools to assemble together different widgets
- [Observables](@ref): references that listen to changes in other references
- [Widgets](@ref): interactive graphical elements
- [Layout](@ref): tools for combining various widgets in a display

To get a quick overview of how these tools work together, go to [Tutorial](@ref).
The [Tutorial](@ref) provides a quick overview of how these tools work together.

## CSS framework

Interact widgets are by default styled with the [Bulma](https://bulma.io/) CSS framework (the previously supported [UIkit](https://getuikit.com/) backend is now deprecated). Bulma is a pure CSS framework (no extra Javascript), which leaves Julia fully in control of manipulating the DOM (which in turn means less surface area for bugs).
Interact widgets are styled with the [Bulma](https://bulma.io/) CSS framework by default (the previously-supported [UIkit](https://getuikit.com/) backend is now deprecated). Because Bulma is a pure CSS framework (no extra Javascript), Julia is fully in control of manipulating the DOM, which leaves less surface area for bugs.

To use unstyled widgets in the middle of the session (or to style them again) simply do:
To switch between unstyled and Bulma-styled widgets in the middle of a session, use the following:

```julia
settheme!(:nativehtml)
settheme!(:bulma)
```

respectively.

## Deployment

InteractBase works with the following frontends:
Expand Down
4 changes: 2 additions & 2 deletions docs/src/layout.md
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
# Layout

Several utilities are provided to create and align
various web elements on the DOM.
various web elements in the DOM.

## Example Usage
```julia
using Interact

el1 =button("Hello world!")
el1 = button("Hello world!")
el2 = button("Goodbye world!")

el3 = hbox(el1, el2) # aligns horizontally
Expand Down
2 changes: 1 addition & 1 deletion docs/src/modifiers.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# Modifiers

Interact provides some modifiers to change an existing widget (or return a tranformed version of the widget):
Interact provides some modifiers to change an existing widget (or return a transformed version of the widget):

```@docs
InteractBase.tooltip!
Expand Down
13 changes: 6 additions & 7 deletions docs/src/observables.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# Observables

Observables are like `Ref`s but you can listen to changes.
Observables are like `Ref`s, but listen to changes.

```@repl manual
using Interact
Expand All @@ -14,22 +14,21 @@ end
observable[] = 42
```

To get the value of an observable index it with no arguments
To get the value of an observable, index it with no arguments:
```@repl manual
observable[]
```

To remove a handler use `off` with the return value of `on`:

To remove a handler, use `off` with the return value of `on`:
```@repl manual
off(observable, h)
```

### How is it different from Reactive.jl?
### How is this different from Reactive.jl?

The main difference is `Signal`s are manipulated mostly by converting one signal to another. For example, with signals, you can construct a changing UI by creating a `Signal` of UI objects and rendering them as the signal changes. On the other hand, you can use an Observable both as an input and an output. You can arbitrarily attach outputs to inputs allowing structuring code in a [signals-and-slots](http://doc.qt.io/qt-4.8/signalsandslots.html) kind of pattern.
The main difference is `Signal`s are manipulated mostly by converting one signal to another. For example, with signals, you can construct a changing UI by creating a `Signal` of UI objects and rendering them as the signal changes. On the other hand, you can use an Observable both as an input and an output. You can arbitrarily attach outputs to inputs, so code can be structured in a [signals-and-slots](http://doc.qt.io/qt-4.8/signalsandslots.html) pattern.

Another difference is Observables are synchronous, Signals are asynchronous. Observables may be better suited for an imperative style of programming.
Observables are also synchronous, whereas Signals are asynchronous. Observables may be better suited for an imperative style of programming.

## API

Expand Down
Loading