diff --git a/website/docs/_start_q.md b/website/docs/_start_q.md deleted file mode 100644 index a99e699089..0000000000 --- a/website/docs/_start_q.md +++ /dev/null @@ -1,23 +0,0 @@ -To start the Wave server, simply open a new terminal window and execute `waved` (or `waved.exe` on Windows). - -```shell -cd $HOME/wave -./waved -``` - -``` -2020/10/27 16:16:34 # -2020/10/27 16:16:34 # ┌─────────────────────────┐ -2020/10/27 16:16:34 # │ ┌ ┌ ┌──┐ ┌ ┌ ┌──┐ │ H2O Wave -2020/10/27 16:16:34 # │ │ ┌──┘ │──│ │ │ └┐ │ (version) (build) -2020/10/27 16:16:34 # │ └─┘ ┘ ┘ └──┘ └─┘ │ © 2020 H2O.ai, Inc. -2020/10/27 16:16:34 # └─────────────────────────┘ -2020/10/27 16:16:34 # -2020/10/27 16:16:34 # {"address":":10101","t":"listen","webroot":"/home/elp/wave/www"} -``` - -The Wave server should now be running at [http://localhost:10101](http://localhost:10101). - -:::caution Don't close this terminal window! -To run any Wave app, you need the Wave server up and running at all times. Your web browser communicates with the Wave server, and the Wave server in turn communicates with the Wave app. -::: diff --git a/website/docs/installation-8-20.mdx b/website/docs/installation-8-20.mdx deleted file mode 100644 index 7c27a80ce8..0000000000 --- a/website/docs/installation-8-20.mdx +++ /dev/null @@ -1,211 +0,0 @@ ---- -title: Installation v0.19 or older ---- - -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; - - -:::important -For v0.20 or later versions, [click here](/docs/installation). -::: - -To set up H2O Wave, simply download and extract a release (~10MB). The release ships with a precompiled binary executable, so no explicit installation step is necessary. - -## Prerequisites - -H2O Wave runs on Linux, macOS, and Windows, having Python 3.6+ for v0.20.0 and 3.7+ onwards. - -## Setup - -### Step 1: Download - -Download the H2O Wave SDK for your platform from [Github](https://github.com/h2oai/wave/releases/latest) or here. - -If you are unsure which package to pick, here is a helper table: - -| **Your OS** | **Wave server** | **Python client** | -|:-----------:|:---------------:|:------------------:| -| Mac | darwin-amd64 | macosx_10_9_x86_64 | -| Mac M1 | darwin-arm64 | macosx_11_0_arm64 | -| Windows | windows-amd64 | win_amd64 | -| Linux | linux-amd64 | manylinux1_x86_64 | - -import { Downloads } from '@site/src/components/downloads' - - - -### Step 2: Extract - -Extract your download. - - - - - -```shell -tar -xzf wave-x.y.z-linux-amd64.tar.gz -``` - - - - -Unzip using [7zip](https://www.7-zip.org/download.html) or anything similar. - - - - - -### Step 3: Move - -Move it to a convenient location, say `$HOME/wave/`. - - - - - -```shell - mv wave-x.y.z-linux-amd64 $HOME/wave -``` - - - - -Use Windows file explorer to move to a convenient location, e.g. desktop. - - - - - -:::note -If you have a previous version of Wave installed, be sure to remove it before installing another. To remove it, simply delete the previous directory. -::: - -Inspect your `$HOME/wave (or desktop/wave for windows)` directory. You should see the following content: - -``` -. -├── examples/ ... Examples -├── test/ ... Browser testing framework -├── www/ ... Wave server web root (do not modify!) -└── waved ... Wave server executable -``` - -### Step 4: Run - -Go to your Wave directory. - -```shell -cd $HOME/wave -``` - -Start the Wave server. - -```shell -./waved -``` - -``` -2020/10/27 16:16:34 # -2020/10/27 16:16:34 # ┌─────────────────────────┐ -2020/10/27 16:16:34 # │ ┌ ┌ ┌──┐ ┌ ┌ ┌──┐ │ H2O Wave -2020/10/27 16:16:34 # │ │ ┌──┘ │──│ │ │ └┐ │ (version) (build) -2020/10/27 16:16:34 # │ └─┘ ┘ ┘ └──┘ └─┘ │ © 2020 H2O.ai, Inc. -2020/10/27 16:16:34 # └─────────────────────────┘ -2020/10/27 16:16:34 # -2020/10/27 16:16:34 # {"address":":10101","t":"listen","webroot":"/home/elp/wave/www"} -``` - -:::info -On Windows, run `waved.exe` to start the server. -::: - -### Step 5: Verify - -Finally, point your web browser to [http://localhost:10101/](http://localhost:10101/). You should see an empty page with a blinker that looks like this: - -![blinker](assets/installation__waiting.gif) - -Congratulations! Wave is now running, but doesn't have any content yet (hence the spinner). - -In the next few sections, we'll add some content and see what the fuss is all about. - -## Run the tour - -import StartQ from './_start_q.md' - -Your Wave release download ships with over 200 examples. - -You can play around with these examples in your browser using `tour.py`, a Python script (itself a Wave app) located in `examples/`: - -```none title="Contents of $HOME/wave" -wave/ -├── examples/ <-- Examples live here. -| └── tour.py <-- The Wave Tour. -├── test/ -├── www/ -└── waved -``` - -To run the tour, as with any Wave app, we need to start both the Wave server (`waved`) and the tour (`tour.py`). Let's go ahead and do that. - -### Step 1: Start the Wave server - - - -### Step 2: Run the tour - -First, create a [virtual environment](https://docs.python.org/3/tutorial/venv.html), install the tour's dependencies. - -:::important -Do this from a new terminal window! -::: - -```shell -cd $HOME/wave -python3 -m venv venv -source venv/bin/activate -pip install -r examples/requirements.txt -``` - -On Windows: - -```shell -cd $HOME\wave -python3 -m venv venv -venv\Scripts\activate -pip install -r examples\requirements.txt -``` - -Finally, run the tour: - -```shell -wave run --no-reload examples.tour -``` - -### Step 3: Enjoy the tour - -Go to [http://localhost:10101/tour](http://localhost:10101/tour) to access the tour. - -![tour](assets/tour__tour.png) - -`tour.py` is an ordinary Wave app that runs other apps. The tour itself runs at the route `/tour`, and each of the examples runs at `/demo`. - -:::tip -To play with the tour's active example in isolation, simply open a new browser tab and head to [http://localhost:10101/demo](http://localhost:10101/demo). -::: - -## Smoother dev experience - -For Wave-specific IDE autocomplete and additional snippets that will make your life way easier, we recommend installing [VSCode extension](https://marketplace.visualstudio.com/items?itemName=h2oai.h2o-wave) or [Jetbrains Plugin](https://plugins.jetbrains.com/plugin/18530-h2o-wave) depending on the IDE of your choice. -Feel free to read more at [this](/blog/h2o-wave-vscode-extension) and [this](/blog/h2o-wave-pycharm-plugin) blog posts. - -## Wrapping up - -In this section, we started the Wave server and then launched `tour.py` to experience the tour. In general, this is how you'd typically launch any app, including your own. There is nothing special about `tour.py`. In fact, to run any example, all you need to do is repeat the steps above in a new terminal window. For example, to run `todo.py`, simply run: - -```shell -wave run examples.todo -``` - -You can now access the example at [http://localhost:10101/demo](http://localhost:10101/demo). Simple! diff --git a/website/docs/installation.mdx b/website/docs/installation.mdx index 0a3325ff46..207c3c45ad 100644 --- a/website/docs/installation.mdx +++ b/website/docs/installation.mdx @@ -6,12 +6,6 @@ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; -## Install - -:::important -These instructions apply to v0.20 or later. For previous versions, [click here](/docs/installation-8-20). -::: - @@ -29,7 +23,7 @@ conda config --append channels conda-forge conda install -c h2oai h2o-wave ``` :::info -Conda packaging does not contain Wave server which means, you will still need to run the wave server (waved) yourself. See how to run it [here](/docs/installation-8-20#setup). +Conda packaging does not contain Wave server which means, you will still need to run the wave server (waved) [separately](/docs/tutorial-hello#step-1-start-the-wave-server). ::: @@ -40,7 +34,7 @@ To install in a virtual environment (recommended): - + ```shell python3 -m venv venv @@ -71,7 +65,7 @@ conda install -c h2oai h2o-wave ``` :::info -Conda packaging does not contain Wave server which means, you will still need to run the wave server (waved) yourself. See how to run it [here](/docs/installation-8-20#setup). +Conda packaging does not contain Wave server which means, you will still need to run the wave server (waved) [separately](/docs/tutorial-hello#step-1-start-the-wave-server). ::: @@ -120,7 +114,7 @@ Automated test harness........ /home/wave/test Wave daemon for deployments... /home/wave ``` -You should now have access to 200+ examples locally. +You now have access to 200+ examples locally. :::info On recent versions of OSX, it's possible to run into certificate verification errors while running `wave fetch`, specifically `urllib.error.URLError: urlopen error [SSL: CERTIFICATE_VERIFY_FAILED] certificate verify failed: unable to get local issuer certificate`. To fix this problem, navigate to `Application/Python 3.7` on your system and execute `Install Certificates.command`. @@ -150,11 +144,11 @@ To play with the tour's active example in isolation, simply open a new browser t ## Downloading Wave -If you would like to run Wave server manually (e.g. for [deployment](/docs/deployment)), you can download it either from here or from our [Github releases](https://github.com/h2oai/wave/releases). +If you would like to run Wave server manually (e.g. for [deployment](/docs/deployment) or [Wave scripts](/docs/scripts)), you can download it either from here or from our [Github releases](https://github.com/h2oai/wave/releases). -If you are unsure which package to pick, here is a helper table: +If unsure which package to pick, here is a helper table: -| **Your OS** | **Wave server** | **Python client** | +| **OS** | **Wave server** | **Python client** | |:-----------:|:---------------:|:------------------:| | Mac | darwin-amd64 | macosx_10_9_x86_64 | | Mac M1 | darwin-arm64 | macosx_11_0_arm64 | diff --git a/website/docs/scripts.md b/website/docs/scripts.md index e82c83c787..692123f03f 100644 --- a/website/docs/scripts.md +++ b/website/docs/scripts.md @@ -24,7 +24,7 @@ page['qux'] = ui.some_card() page.save() ``` -You can run it by using `python my_script.py` assuming your [Wave server](/docs/installation-8-20#step-4-run) is running. +You can run it by using `python my_script.py` assuming your [Wave server](/docs/tutorial-hello#step-1-start-the-wave-server) is running. Here is the skeleton of a Wave script that continuously updates a page ([example](tutorial-monitor.md)): diff --git a/website/docs/tutorial-beer.md b/website/docs/tutorial-beer.md index d5474651b7..a58f6c9c95 100644 --- a/website/docs/tutorial-beer.md +++ b/website/docs/tutorial-beer.md @@ -28,7 +28,7 @@ This tutorial assumes your Wave server is up and running, and you have a working Our program looks like this. It's mostly similar to the one in the [Hello World tutorial](tutorial-hello.mdx), with one exception: we're setting the markdown card's content inside a `for` loop. -```py {13-18} title="$HOME/wave-apps/beer_wall.py" +```py {13-18} title="beer_wall.py" import time from h2o_wave import site, ui @@ -53,8 +53,7 @@ Take one down, pass it around, {i - 1} bottles of beer on the wall... ## Step 2: Run your program ```shell -cd $HOME/wave-apps -./venv/bin/python beer_wall.py +python beer_wall.py ``` ## Step 3: Watch updates live @@ -67,7 +66,7 @@ Point your browser to [http://localhost:10101/beer](http://localhost:10101/beer) Our program is accurate, but not necessarily efficient. Every second, it sends the entire verse in its entirety to the Wave server, with only minuscule changes (`i` and `i-1`). You can observe this in the Wave server's log (switch to the terminal window running the Wave server to view the log): -``` +```sh 2020/10/02 12:13:43 * /beer {"d":[{"k":"wall content","v":"\n98 bottles of beer on the wall, 98 bottles of beer.\n\nTake one down, pass it around, 97 bottles of beer on the wall...\n"}]} 2020/10/02 12:13:44 * /beer {"d":[{"k":"wall content","v":"\n97 bottles of beer on the wall, 97 bottles of beer.\n\nTake one down, pass it around, 96 bottles of beer on the wall...\n"}]} 2020/10/02 12:13:46 * /beer {"d":[{"k":"wall content","v":"\n96 bottles of beer on the wall, 96 bottles of beer.\n\nTake one down, pass it around, 95 bottles of beer on the wall...\n"}]} @@ -138,7 +137,7 @@ for i in range(99, 0, -1): Run your program again. You should see the same results in your browser as before, but you'll notice that the information flowing through the Wave server is significantly less than before: -``` +```sh 2020/10/02 13:53:11 * /beer {"d":[{"k":"wall data before","v":"98"},{"k":"wall data after","v":"97"}]} 2020/10/02 13:53:12 * /beer {"d":[{"k":"wall data before","v":"97"},{"k":"wall data after","v":"96"}]} 2020/10/02 13:53:13 * /beer {"d":[{"k":"wall data before","v":"96"},{"k":"wall data after","v":"95"}]} diff --git a/website/docs/tutorial-counter.md b/website/docs/tutorial-counter.md index 19757bae65..5f9733779a 100644 --- a/website/docs/tutorial-counter.md +++ b/website/docs/tutorial-counter.md @@ -12,13 +12,13 @@ This tutorial outlines the basics of how to handle events, update the UI, manage ## Prerequisites -This tutorial assumes your Wave server is up and running, and you have a working directory for authoring programs. If not, head over to the [Hello World tutorial](tutorial-hello.mdx) and complete steps 1 and 2. +This tutorial assumes you have a working directory for authoring programs. If not, head over to the [Hello World tutorial](tutorial-hello.mdx) and complete step 2. ## Step 1: Start listening The first step towards listening to events from the UI is to define an `@app` function: -```py title="$HOME/wave-apps/counter.py" +```py title="counter.py" from h2o_wave import Q, main, app @app('/counter') @@ -34,15 +34,13 @@ We named the function `serve()`, but you can call it anything you please, like ` Lastly, note that we've imported the symbol `main` into our `.py` file. You don't have to do anything with `main` except import it. -To run your app, use `wave run`: +To run your app, use `wave run` within your activated virtual environment: ```shell -cd $HOME/wave-apps -source venv/bin/activate wave run counter ``` -The `wave run` command runs your app in *development mode*, and the app is automatically reloaded when edited. +The `wave run` command runs your app in *development mode*, and the app is automatically reloaded when edited. Additionally, it starts Wave server under the hood for you if not already running or explicitly told not to. At this point, your app will be up and running, but it doesn't do anything yet. Let's change that in a second. @@ -52,7 +50,7 @@ Let's add a button to our app. Our goal is to increment and display the bean cou To do this, we declare a variable called `bean_count`, and use `form_card()` to add a [form](https://en.wikipedia.org/wiki/Form_(document)) to our page. A form card is a special type of card that displays a vertical stack of [components](/docs/widgets/form/overview) (also called *widgets*). In this case, our form contains a solitary button named `increment`, with a caption showing the current `bean_count`. The button is marked as `primary`, which serves no other purpose than to make it look tall, dark, and handsome. -```py {5-18} title="$HOME/wave-apps/counter.py" +```py {5-18} title="counter.py" from h2o_wave import Q, main, app, ui @app('/counter') @@ -93,7 +91,7 @@ If you click on the button, you'll notice that it doesn't do anything. This is b Add a condition to check if the button is clicked, and if so, increment the bean count. -```py {5-7} title="$HOME/wave-apps/counter.py" +```py {5-7} title="counter.py" from h2o_wave import Q, main, app, ui @app('/counter') @@ -143,7 +141,7 @@ To view the Wave server's log, switch to the terminal window running the Wave se Let's wrinkle our noses in disgust and fix this gross inefficiency right away to make our little bean counter web-scale for great good. -```py {9-10,22-23} title="$HOME/wave-apps/counter.py" +```py {9-10,22-23} title="counter.py" from h2o_wave import Q, main, app, ui @app('/counter') @@ -166,14 +164,14 @@ async def serve(q: Q): ], ) else: - q.page['beans'].items[0].button.caption = f'{bean_count} beans' + q.page['beans'].increment.caption = f'{bean_count} beans' await q.page.save() ``` In the above edit, we check for an arbitrary flag in `q.client` called `initialized`. - If the flag is not set, we assume that the request is originating from a new, empty client. If so, we set `initialized` to `True` (to make a note to ourselves that the client is not empty anymore), then add our form card to the page. -- If the flag is already set, we assume that the form card (and the button inside it) are already on the page, and simply update the button's caption with the new bean count. +- If the flag is already set, we assume that the form card (and the button inside it) are already on the page, and simply update the button's caption with the new bean count. We can refereence the button by simply using its `name` attribute - `increment`. ## Intermission: Understanding state @@ -201,7 +199,7 @@ In other words, your Wave app is multi-user by default, but how the app manages To maintain bean counts at the user level, all we have to do is store `bean_count` in `q.user` instead of `q.client`. -```py {5,7} title="$HOME/wave-apps/counter.py" +```py {5,7} title="counter.py" from h2o_wave import Q, main, app, ui @app('/counter') @@ -224,7 +222,7 @@ async def serve(q: Q): ], ) else: - q.page['beans'].items[0].button.caption = f'{bean_count} beans' + q.page['beans'].increment.caption = f'{bean_count} beans' await q.page.save() ``` @@ -236,7 +234,7 @@ This would be considered normal behavior for a typical web application, and most This is easier done than said - simply change the app mode to `multicast` to enable realtime sync across clients: -```py {27} title="$HOME/wave-apps/counter.py" +```py {27} title="counter.py" from h2o_wave import Q, main, app, ui @app('/counter', mode='multicast') @@ -259,7 +257,7 @@ async def serve(q: Q): ], ) else: - q.page['beans'].items[0].button.caption = f'{bean_count} beans' + q.page['beans'].increment.caption = f'{bean_count} beans' await q.page.save() ``` @@ -275,7 +273,7 @@ If you play with your app now, you'll see that the user-level bean count indeed Going from user-level bean counting to app-level bean counting is easy: simply store `bean_count` on `q.app` instead of `q.user`, and switch the app mode to `broadcast`: -```py {5,7,27} title="$HOME/wave-apps/counter.py" +```py {5,7,27} title="counter.py" from h2o_wave import Q, main, app, ui @app('/counter', mode='broadcast') @@ -298,7 +296,7 @@ async def serve(q: Q): ], ) else: - q.page['beans'].items[0].button.caption = f'{bean_count} beans' + q.page['beans'].increment.caption = f'{bean_count} beans' await q.page.save() ``` diff --git a/website/docs/tutorial-hello.mdx b/website/docs/tutorial-hello.mdx index d4e7efb495..044910a4ba 100644 --- a/website/docs/tutorial-hello.mdx +++ b/website/docs/tutorial-hello.mdx @@ -5,8 +5,6 @@ title: "Tutorial: Hello World" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; -import StartQ from './_start_q.md' - In this section, we'll learn how to author our first Wave program from scratch, and understand the basics of how to display content in a web browser. :::note @@ -15,28 +13,59 @@ These tutorials assume that you have some familiarity with the Python programmin ## Step 1: Start the Wave server -:::important -You can skip this step if you're running Wave 0.20.0 or later. -::: +[Download](/docs/installation#downloading-wave) the most recent version `.tar.gz` file for your operating system, and extract (unzip) it to a directory of your choice. +Once done, open a terminal, cd into the extracted dir and start the Wave server. - + -## Step 2: Set up a working directory + + +```shell +./waved +``` + -Next, let's set up a working directory to author our program. + -### Create a directory ```shell -mkdir $HOME/wave-apps -cd $HOME/wave-apps +waved.exe ``` + + + + + +```sh +2020/10/27 16:16:34 # +2020/10/27 16:16:34 # ┌─────────────────────────┐ +2020/10/27 16:16:34 # │ ┌ ┌ ┌──┐ ┌ ┌ ┌──┐ │ H2O Wave +2020/10/27 16:16:34 # │ │ ┌──┘ │──│ │ │ └┐ │ (version) (build) +2020/10/27 16:16:34 # │ └─┘ ┘ ┘ └──┘ └─┘ │ © 2020 H2O.ai, Inc. +2020/10/27 16:16:34 # └─────────────────────────┘ +2020/10/27 16:16:34 # +2020/10/27 16:16:34 # {"address":":10101","t":"listen","webroot":"/home/elp/wave/www"} +``` + +The Wave server should now be running at . + +:::caution Don't close this terminal window! +To run any Wave app or script, you need the Wave server up and running at all times. Your web browser communicates with the Wave server, and the Wave server in turn communicates with the Wave app. + +Apps can start Wave server automatically via `wave run` command. So this step is only necessary for Wave scripts. +::: + +## Step 2: Set up a working directory + +Next, let's set up a working directory to author our program. Create a new directory and open it in a terminal. + ### Set up a virtual environment + A [virtual environment](https://docs.python.org/3/tutorial/venv.html) helps us manage our program's dependencies without interfering with system-wide packages. - + ```shell python3 -m venv venv @@ -55,8 +84,6 @@ python -m venv venv -If you are using Conda as your package manager, - ```shell conda create -n venv conda activate venv @@ -88,11 +115,11 @@ conda install -c h2oai h2o-wave ## Step 3: Write your program -Next, open your preferred text editor, create a Python script called `hello_world.py` in the `$HOME/wave-apps` directory, and copy-paste the following. +Next, open your preferred text editor, create a Python script called `hello_world.py`, and copy-paste the following. For now, don't worry too much about what this program is doing. We'll get to that shortly. -```py title="$HOME/wave-apps/hello_world.py" +```py title="hello_world.py" from h2o_wave import site, ui # Grab a reference to the page at route '/hello' @@ -113,8 +140,7 @@ page.save() ## Step 4: Run your program ```shell -cd $HOME/wave-apps -./venv/bin/python hello_world.py +python hello_world.py ``` ## Step 5: Admire your creation diff --git a/website/docs/tutorial-monitor.md b/website/docs/tutorial-monitor.md index 09f7afd6f1..fa07188b90 100644 --- a/website/docs/tutorial-monitor.md +++ b/website/docs/tutorial-monitor.md @@ -19,15 +19,14 @@ This tutorial assumes your Wave server is up and running, and you have a working We'll be using the excellent `psutil` package to read system stats. Let's go ahead and install that in our virtual environment: ```shell -cd $HOME/wave-apps -./venv/bin/pip install psutil +pip install psutil ``` ## Step 2: Monitor CPU usage Here's what our program looks like: -```py {7,12,25} title="$HOME/wave-apps/system_monitor.py" +```py {7,12,25} title="system_monitor.py" import time import psutil from h2o_wave import site, ui, data @@ -61,8 +60,7 @@ while True: ## Step 3: Run your program ```shell -cd $HOME/wave-apps -./venv/bin/python system_monitor.py +python system_monitor.py ``` Point your browser to [http://localhost:10101/monitor](http://localhost:10101/monitor). @@ -100,7 +98,7 @@ The [data buffer](buffers.md) topic covers different types of buffers in more de In this case, we declare a *cyclic buffer*, a [FIFO](https://en.wikipedia.org/wiki/FIFO_(computing_and_electronics)) data structure that holds a fixed number of rows, and can only be appended to. Our buffer holds at most 15 rows, and has exactly two columns: `tick` (a one-up integer) and `usage` (the CPU usage). ```py - plot_data=data('tick usage', -15), +plot_data=data('tick usage', -15), ``` Internally, the card's data buffer might look like this in memory when first created: @@ -118,7 +116,7 @@ Internally, the card's data buffer might look like this in memory when first cre Lastly, we measure CPU usage every second and append a new row to the end of card's data buffer, like this: ```py - cpu_card.plot_data[-1] = [tick, cpu_usage] +cpu_card.plot_data[-1] = [tick, cpu_usage] ``` Internally, the card's data buffer might look like this in memory while in use: @@ -135,7 +133,7 @@ Internally, the card's data buffer might look like this in memory while in use: As a final step, we can duplicate parts of our program to create another card that displays memory stats. The two cards behave identically, except that one displays CPU usage and the other, memory. -```py {18-28,38-40} title="$HOME/wave-apps/system_monitor.py" +```py {18-28,38-40} title="system_monitor.py" import time import psutil from h2o_wave import site, ui, data @@ -183,11 +181,10 @@ while True: ## Step 6: Run your program again -Terminate your program (`^C`) and restart it: +Terminate your program (`CTRL + C`) and restart it: ```shell -cd $HOME/wave-apps -./venv/bin/python system_monitor.py +python system_monitor.py ``` Point your browser to [http://localhost:10101/monitor](http://localhost:10101/monitor). You should now see both CPU and memory stats live: diff --git a/website/docs/tutorial-todo.md b/website/docs/tutorial-todo.md index 709ff06284..bb2b6fa514 100644 --- a/website/docs/tutorial-todo.md +++ b/website/docs/tutorial-todo.md @@ -14,7 +14,7 @@ We'll start with a basic skeleton and then work our way up from there. The first step is to define an `@app` function. Also, we want the landing page to show a list of to-dos, so we'll throw in an empty `show_todos()` function for now, and call it from `serve()`. -```py {6,10-11} title="$HOME/wave-apps/todo.py" +```py {6,10-11} title="todo.py" from h2o_wave import Q, main, app, ui @@ -32,7 +32,7 @@ def show_todos(q: Q): A to-do item has some basic attributes: an ID, some text content, and whether it's completed or not. Let's define a `class` for that, with a global one-up `id`. -```py {3-13} title="$HOME/wave-apps/todo.py" +```py {3-13} title="todo.py" from h2o_wave import Q, main, app, ui _id = 0 @@ -64,7 +64,7 @@ Since we want each user to have a separate to-do list, it's appropriate to keep Here, we attempt to fetch the list from `q.user` and create one if it doesn't exist. We also throw in some sample to-do items for good measure. -```py {1,23-28} title="$HOME/wave-apps/todo.py" +```py {1,23-28} title="todo.py" from typing import List from h2o_wave import Q, main, app, ui @@ -104,7 +104,7 @@ Also, we want each checkbox to raise an event immediately when checked, so we se Several [components](/docs/widgets/form/overview) have a `trigger` attribute. Normally, an event is triggered only when a command-like component (a button, menu, or tab) is clicked. If you want a component to immediately trigger an event when changed, set `trigger` to `True`. ::: -```py {1,30-37} title="$HOME/wave-apps/todo.py" +```py {1,30-37} title="todo.py" from typing import List from h2o_wave import Q, main, app, ui @@ -148,7 +148,7 @@ def show_todos(q: Q): We also turn each completed to-do item into another list of checkboxes, checked by default (using its `value` attribute). We append this to the form card and put a separator in between (using `ui.separator()`) to distinguish the completed items from the incomplete ones. -```py {31,38-39} title="$HOME/wave-apps/todo.py" +```py {31,38-39} title="todo.py" from typing import List from h2o_wave import Q, main, app, ui @@ -214,7 +214,7 @@ Each time a checkbox is checked or unchecked, our `serve()` function is called, So, we iterate through all the to-do items and set their `done` attribute based on the value of their corresponding checkbox. -```py {30-33} title="$HOME/wave-apps/todo.py" +```py {30-33} title="todo.py" from typing import List from h2o_wave import Q, main, app, ui @@ -274,7 +274,7 @@ Next, let's display a form to add new items to our list. For that, we'll add a n In the `new_todo()` function, we display a new form containing a textbox (using `ui.textbox()`) and a set of buttons to add the item or return to to-do list (a `ui.buttons()` helps us display buttons side-by-side). -```py {18-21,45,52-61} title="$HOME/wave-apps/todo.py" +```py {18-21,45,52-61} title="todo.py" from typing import List from h2o_wave import Q, main, app, ui @@ -350,7 +350,7 @@ Finally, we handle the `add_todo` button-click, redirecting `serve()` to a new ` In this example, for clarity, we named both the buttons and their corresponding functions `new_todo` and `add_todo`, but this is not necessary. ::: -```py {20-21,54-59} title="$HOME/wave-apps/todo.py" +```py {20-21,54-59} title="todo.py" from typing import List from h2o_wave import Q, main, app, ui @@ -432,7 +432,7 @@ You should now be able to add new to-do items to your list. Congratulations! To make your app realtime, simply pass `mode='multicast'` to `@app()`. -```py title="$HOME/wave-apps/todo.py" +```py title="todo.py" @app('/todo', mode='multicast') ``` diff --git a/website/sidebars.js b/website/sidebars.js index cf3ee4297b..0b5117ba57 100644 --- a/website/sidebars.js +++ b/website/sidebars.js @@ -5,7 +5,6 @@ module.exports = { 'Getting Started': [ 'getting-started', 'installation', - 'installation-8-20', 'tutorial-hello', 'tutorial-beer', 'tutorial-monitor',