diff --git a/content/pybytes/_index.md b/content/pybytes/_index.md index 5f3f407..ef5de4b 100644 --- a/content/pybytes/_index.md +++ b/content/pybytes/_index.md @@ -31,7 +31,7 @@ In a nutshell, Pybytes is an environment designed to optimise your IoT applicati ## Let's get started! -* [Getting started with Pybytes](/pybytes/getstarted) +* [Getting started with Pybytes](/pybytes/gettingstarted) * [Connect your Pycom module to Pybytes](/pybytes/connect) * [Visualise data from your device](/pybytes/dashboard) * [LoRa Servers](/pybytes/lora) diff --git a/content/pybytes/connect/_index.md b/content/pybytes/connect/_index.md index 0af6761..f52d0f1 100644 --- a/content/pybytes/connect/_index.md +++ b/content/pybytes/connect/_index.md @@ -11,18 +11,23 @@ In this section, we will explain to you how to add a device to Pybytes. Go to the *Devices* page in Pybytes: 1. Click on *Add Device*. + ![](/gitbook/assets/pybytes/add-device/add-device-btn.png) 1. Select your device (WiPy, LoPy, SiPy, etc.). + ![](/gitbook/assets/pybytes/add-device/select-device-type.png) 1. Select your network options. This will be how your device connects to both Pybytes and the internet. For now, choose WiFi. + ![](/gitbook/assets/pybytes/add-device/network-step.png) 1. Enter a unique name for your device and enter the WiFi credentials (SSID and password). You can save this WiFi, so that it will be remembered for later use when adding further devices. + ![](/gitbook/assets/pybytes/add-device/customize-step.png) 1. At the end of the *Add Device* wizard, Pybytes will show that your device profile was successfully created. + ![](/gitbook/assets/pybytes/add-device/final-step.png) ## Next step diff --git a/content/pybytes/connect/quick.md b/content/pybytes/connect/quick.md index 77d3a1b..69bac55 100644 --- a/content/pybytes/connect/quick.md +++ b/content/pybytes/connect/quick.md @@ -8,7 +8,7 @@ aliases: In this section, we explain to you how to connect your device to Pybytes quickly using the Firmware Updater tool. -### Download Pycom Firmware Updater tool +## Download Pycom Firmware Updater tool 1. At the final step of the "Add Device" process, you can download and install the [Pycom Firmware Updater tool](https://pycom.io/downloads/)). ![](/gitbook/assets/pybytes/add-device/connect-your-device-component.png) @@ -16,36 +16,29 @@ In this section, we explain to you how to connect your device to Pybytes quickly 1. Copy the activation token by pressing the Copy button. The activation token is valid for one hour. If your activation token has expired, you can create a new one. -### Flash Pybytes firmware with Pycom Firmware Updater tool +## Flash Pybytes firmware with Pycom Firmware Updater tool -#### Before you start +### Before you start * Connect your device to the computer * If your device is already connected, make sure it is not connected to Pymakr -#### Firmware update process +### Firmware update process 1. Open the Pycom Firmware Updater tool on your computer and click on the Continue button. -![](/gitbook/assets/pybytes/add-device/fw-updater/intro-screen.png) -1. Click again on the Continue button. -![](/gitbook/assets/pybytes/add-device/fw-updater/attention-screen.png) +2. Click again on the Continue button. -{{% hint style="info" %}} -If your device is already connected to your computer, on MacOS serial port will be automatically filled for you. -At this step, you can also click on Rescan ports button to update ports listed in the Firmware Updater. -{{% /hint %}} +3. Check the options "Erase flash file system" and "Force update Pybytes registration"; -1. Check the options "Erase flash file system" and "Force update Pybytes registration"; -![](/gitbook/assets/pybytes/add-device/fw-updater/settings-screen.png) +![](/gitbook/assets/pybytes/add-device/pybytes-provisioning.png) -1. Paste your activation token from Pybytes. Firmware Updater should display **Registration successful!** -![](/gitbook/assets/pybytes/add-device/fw-updater/activation-token-screen.png) +4. Paste your activation token from Pybytes. Firmware Updater should display **Registration successful!** -1. Then press the Continue button. Your device will be flashed with the Pybytes firmware. This should take about a minute. -![](/gitbook/assets/pybytes/add-device/fw-updater/update-in-progress-screen.png) +![](/gitbook/assets/pybytes/add-device/pybytes-provisioning2.png) -1. After the updating process is done, you will see the final screen. Click on Done to close the Firmware Updater. -![](/gitbook/assets/pybytes/add-device/fw-updater/success-screen.png) +5. Then press the Continue button. Your device will be flashed with the Pybytes firmware. This should take about a minute. + +6. After the updating process is done, you will see the final screen. Click on Done to close the Firmware Updater. ## Next step: Set up your device's dashboard! diff --git a/content/pybytes/dashboard.md b/content/pybytes/dashboard.md index dc80039..900102a 100644 --- a/content/pybytes/dashboard.md +++ b/content/pybytes/dashboard.md @@ -8,131 +8,70 @@ aliases: In this section, we will explain how to create widgets for data visualisation and how to set up your device's dashboard on Pybytes. -{{% hint style="info" %}} -We're assuming that you have already connected your device to Pybytes. In case you haven't, check how to [add your device here](../connect/). After you're done with that, you can proceed to the next example. -{{% /hint %}} +> We're assuming that you have already connected your device to Pybytes. In case you haven't, check how to [add your device here](../connect/). After you're done with that, you can proceed to the next example. -## Step 1: Set up your python application +## Step 1: Setup a Pymakr Project -The first step is to have your python application uploaded and running on your Pycom device. +1. Create a project in Pymakr called `Pybytes_signals`, and add the following code to `main.py`. This python application will send data from the array every 5 seconds to Pybytes. -1. Install the [Pymakr](https://atom.io/packages/pymakr) plugin. + ```python + # Import what is necessary to create a thread + import _thread + from time import sleep - (We highly recommend using Pymakr with Atom, but you can also use Pymakr with [VS Code](https://marketplace.visualstudio.com/items?itemName=pycom.Pymakr)). Learn more about Pymakr [here](/pymakr). -2. In Atom create a project folder `my-first-wipy` (any other name will work as well). -4. In your project folder create the `main.py` file -3. Copy and paste the following code into your `main.py` + # Increment index used to scan each point from vector sensors_data + def inc(index, vector): + if index < len(vector)-1: + return index+1 + else: + return 0 -{{% hint style="info" %}} -Scroll a bit down to see the picture of the project structure in Atom. -{{% /hint %}} + # Define your thread's behaviour, here it's a loop sending sensors data every 5 seconds + def send_env_data(): + idx = 0 + sensors_data = [0, -0.2, -0.5, -0.7, -0.8, -0.9, -0.9, -0.9, -0.8, -0.6, -0.4, -0.2, 0, 0.3, 0.5, 0.7, 0.8, 0.9, 0.9, 0.9, 0.8, 0.6, 0.4, 0.1] -This python application will send data from the array every 5 seconds to Pybytes. + while True: + # send one element from array `sensors_data` as signal 1 + pybytes.send_signal(1, sensors_data[idx]) + print('sent {} to Pybytes'.format(sensors_data[idx])) + idx = inc(idx, sensors_data) + sleep(5) -```python + # Start your thread + _thread.start_new_thread(send_env_data, ()) + ``` -# Import what is necessary to create a thread -import _thread -from time import sleep +2. Press *Upload* button to upload the code into your device. -# Increment index used to scan each point from vector sensors_data -def inc(index, vector): - if index < len(vector)-1: - return index+1 - else: - return 0 - -# Define your thread's behaviour, here it's a loop sending sensors data every 5 seconds -def send_env_data(): - idx = 0 - sensors_data = [0, -0.2, -0.5, -0.7, -0.8, -0.9, -0.9, -0.9, -0.8, -0.6, -0.4, -0.2, 0, 0.3, 0.5, 0.7, 0.8, 0.9, 0.9, 0.9, 0.8, 0.6, 0.4, 0.1] - - while True: - # send one element from array `sensors_data` as signal 1 - pybytes.send_signal(1, sensors_data[idx]) - idx = inc(idx, sensors_data) - sleep(5) - -# Start your thread -_thread.start_new_thread(send_env_data, ()) -``` - -{{% hint style="info" %}} -In this code, we're calling the function `pybytes.send_signal(signalNumber, value))` to send data to Pybytes. This function is part of the Pybytes library, and it has two arguments: `signalNumber` and `value`. - -* `signalNumber` represents which signal is receiving data: - - **255** different values: **0 ... 254** (signalNumber 255 is reserved for the Pybytes terminal) -* `value` is the value being attributed to that particular signal number -{{% /hint %}} - -Your example project in Atom (with Pymakr) should look like this. -Press *Upload* button to upload the code into your device. - -![](/gitbook/assets/pybytes/dashboard/pymakr-with-example-code.png) - -By default, Pymakr will upload all files like `*.py` from your project folder (`my-first-wipy` in this case). -File `main.py` will be uploaded to `/flash` folder on your device. - -After the upload is done, the device will reboot and start sending data to Pybytes. -In the Pymakr terminal, you should see messages send to Pybytes. - -![](/gitbook/assets/pybytes/dashboard/device-sending-messsages.png) - -Every line stands for one message sent every 5 seconds. Line `1 [-0.7]` means signal `1` sent value `-0.7`. +3. After the upload is done, the device will reboot and start sending data to Pybytes. In the Pymakr terminal, you should see messages send to Pybytes. +![](/gitbook/assets/pybytes/dashboard/device-send-messages.png) ## Step 2: Add a signal from your device -Go to Pybytes and on *Devices* page select your device; +1. Go to the [Pybytes device](https://pybytes.pycom.io/devices) page select your device. -![](/gitbook/assets/pybytes/dashboard/device-table.png) +2. Then go to `Signals` tab and click on *define new signal* -Then go to `Data` tab and click on the row in the *Undefined signals* table (recommended). Alternatively, you can click on *Define new signal* button. -{{% hint style="info" %}} -If you don't see your undefined signal in *Undefined signals* table, please reload your browser. -{{% /hint %}} - -![](/gitbook/assets/pybytes/dashboard/undefined-signals-table.png) - -Define new signal by entering a signal name, and optionally a unit (If you clicked on "undefined signal row" your signal number `1` will be already pre-filled). - -![](/gitbook/assets/pybytes/dashboard/define-new-signal.png) - -Your signal was defined! - -![](/gitbook/assets/pybytes/dashboard/signal-was-added.png) - -{{% hint style="info" %}} -The name and unit are labels used to identify your signal inside Pybytes (In this example we defined `Sinwave` as the name of the signal and `Rad` as the unit). - -The signal number has to match the signal number that you defined on `pybytes.send_signal` function call, inside your `main.py` code (In this example we defined `signalNumber = 1`); -{{% /hint %}} +![](/gitbook/assets/pybytes/add-device/define-signal.png) ## Step 3: Add a widget for the signal -Click on the *"signal card"*. +1. Click on the *signal card* of the selected device. -![](/gitbook/assets/pybytes/dashboard/signal-card.png) +![](/gitbook/assets/pybytes/add-device/send-signal.png) -Click on the *Create a new display* button. +2. Click on the *Create a new display* button. ![](/gitbook/assets/pybytes/dashboard/create-new-display.png) -3. Select the type of visualisation \(e.g. bar chart or line graph\). +3. Select the type of visualisation (e.g. bar chart or line graph). -![](/gitbook/assets/pybytes/dashboard/line-chart.png) - -You can adjust the parameters of your widget at `Settings`. After, click on the button `Create`. +4. You can adjust the parameters of your widget at `Settings`. After, click on the button `Create`. ![](/gitbook/assets/pybytes/dashboard/confirm-graph-creation.png) -Your widget was created. Now, add your widget to your device's dashboard. Click on the button `Edit` on your widget. - -![](/gitbook/assets/pybytes/dashboard/graph-settings-button.png) - -Mark the checkbox `Display on Dashboard` at `Settings`. Finally, click on the button `Save`. - -![](/gitbook/assets/pybytes/dashboard/display-on-dashboard-checkbox.png) +Your widget was created. Now, add your widget to your device's dashboard. Click on the button `Edit` on your widget, and mark the checkbox `Display on Dashboard` at `Settings`. Finally, click on the button `Save`. Click on the `Dashboard` tab. Your widget was successfully added there! diff --git a/content/pybytes/gettingstarted.md b/content/pybytes/gettingstarted.md index f3f2f56..e73d21c 100644 --- a/content/pybytes/gettingstarted.md +++ b/content/pybytes/gettingstarted.md @@ -43,6 +43,7 @@ After creation, you will land on the provisioning page. This is where we 'inform 2. This will ask for a `Pybytes activation token`. Generate a token from pybytes and paste it in the Firmware Updater tool. This will instantly generate a success message in Pybytes. ![](/gitbook/assets/pybytes/add-device/pybytes-provisioning2.png) + 3. Continue with the firmware update to the device. ## Step 4: Your first signal @@ -82,20 +83,14 @@ After creation, you will land on the provisioning page. This is where we 'inform >>> pybytes.send_signal(1, "hello world") ``` And it will show up on Pybytes in the `signals` tab: - ![](/gitbook/assets/pybytes/add-device/send-signal.png) - > Next to `pybytes.send_signal(...)`, we can use ... +![](/gitbook/assets/pybytes/add-device/send-signal.png) + +> Next to `pybytes.send_signal(...)`, we can use ... + ## Final remarks -If you wish to disable Pybytes, yo ucan use `pycom.pybytes_on_boot(False)` will permanently -## Step 1: Go to the registration page +If you wish to disable Pybytes, you can use `pycom.pybytes_on_boot(False)` will permanently -1. Go to [https://pybytes.pycom.io](https://pybytes.pycom.io/?utm_source=docs&utm_medium=web&utm_campaign=pybytes-getting-started). -2. Enter your full name, email address and set a password for your account. -3. Confirm the verification message sent to your email address. -4. Click on the link and complete your login. - -## Go Invent! - -Now it's time to explore Pybytes. You can start by [connecting your Pycom board to Pybytes](../connect). +Continue to [display data from your device into the Pybytes dashboard](/pybytes/dashboard/) diff --git a/static/gitbook/assets/pybytes/add-device/connect-your-device-component.png b/static/gitbook/assets/pybytes/add-device/connect-your-device-component.png index 63cb0b8..3f8d2e2 100644 Binary files a/static/gitbook/assets/pybytes/add-device/connect-your-device-component.png and b/static/gitbook/assets/pybytes/add-device/connect-your-device-component.png differ diff --git a/static/gitbook/assets/pybytes/add-device/send_signal.png b/static/gitbook/assets/pybytes/add-device/send-signal.png similarity index 99% rename from static/gitbook/assets/pybytes/add-device/send_signal.png rename to static/gitbook/assets/pybytes/add-device/send-signal.png index 0790889..ef10eab 100644 Binary files a/static/gitbook/assets/pybytes/add-device/send_signal.png and b/static/gitbook/assets/pybytes/add-device/send-signal.png differ diff --git a/static/gitbook/assets/pybytes/dashboard/confirm-graph-creation.png b/static/gitbook/assets/pybytes/dashboard/confirm-graph-creation.png index 3fe1d7c..7f48fdc 100644 Binary files a/static/gitbook/assets/pybytes/dashboard/confirm-graph-creation.png and b/static/gitbook/assets/pybytes/dashboard/confirm-graph-creation.png differ diff --git a/static/gitbook/assets/pybytes/dashboard/create-new-display.png b/static/gitbook/assets/pybytes/dashboard/create-new-display.png index 314d4cc..4d6f5e2 100644 Binary files a/static/gitbook/assets/pybytes/dashboard/create-new-display.png and b/static/gitbook/assets/pybytes/dashboard/create-new-display.png differ diff --git a/static/gitbook/assets/pybytes/dashboard/device-send-messages.png b/static/gitbook/assets/pybytes/dashboard/device-send-messages.png new file mode 100644 index 0000000..b6b9ca3 Binary files /dev/null and b/static/gitbook/assets/pybytes/dashboard/device-send-messages.png differ diff --git a/static/gitbook/assets/pybytes/dashboard/device-sending-messsages.png b/static/gitbook/assets/pybytes/dashboard/device-sending-messsages.png deleted file mode 100644 index c6410da..0000000 Binary files a/static/gitbook/assets/pybytes/dashboard/device-sending-messsages.png and /dev/null differ diff --git a/static/gitbook/assets/pybytes/dashboard/device-table.png b/static/gitbook/assets/pybytes/dashboard/device-table.png index aa2ed64..7a2ac28 100644 Binary files a/static/gitbook/assets/pybytes/dashboard/device-table.png and b/static/gitbook/assets/pybytes/dashboard/device-table.png differ diff --git a/static/gitbook/assets/pybytes/dashboard/line-chart.png b/static/gitbook/assets/pybytes/dashboard/line-chart.png deleted file mode 100644 index eafc721..0000000 Binary files a/static/gitbook/assets/pybytes/dashboard/line-chart.png and /dev/null differ diff --git a/static/gitbook/assets/pybytes/dashboard/sinwave-dashboard-widget.png b/static/gitbook/assets/pybytes/dashboard/sinwave-dashboard-widget.png index f05509d..a81a292 100644 Binary files a/static/gitbook/assets/pybytes/dashboard/sinwave-dashboard-widget.png and b/static/gitbook/assets/pybytes/dashboard/sinwave-dashboard-widget.png differ