Getting Started

Install tool

Requirements: Python 2.7

  1. Open your terminal or command line program.

  2. Check that you have Python 2.7 installed by entering in:

    python

    It should say something like this:

    Python 2.7.10 (default, Jul 13 2015, 12:05:58) [GCC 4.2.1 Compatible Apple LLVM 6.1.0 (clang-602.0.53)] on darwin Type "help", "copyright", "credits" or "license" for more information.

    Get out of the Python shell by typing in

    quit()

  3. Type in the following line to download the files:

    git clone https://github.com/klyap/PStreams-UI.git

  4. Navigate to the folder with the code in it by typing in terminal/command line:

    cd src/root/nested

  5. Run the tool by typing in:

    python run.py FILENAMEHERE.json

    where FILENAMEHERE is the name of a JSON file downloaded from flowhub.com or one that is in the special format for this tool.

Download UI parts

Get started with Github and Flowhub to use the graph-maker. These graphs will turn into a Python program!

Get our special pre-made components for your graph

  1. Go to https://github.com/
  2. Sign up for a Github account or log in
  3. Copy the files over to your account by going to https://github.com/klyap/StreamPy-UI-components and clicking “Fork” in the top right corner
  4. Check that it’s in your account by going to https://github.com/YOURUSERNAME?tab=repositories, where YOURUSERNAME is your Github username.

Set up your Flowhub workspace

  1. Go to https://app.flowhub.io/

  2. Log in using your Github account.

  3. Import the special pre-made components that you forked onto your Github account by clicking on ‘Github’, then ‘Add a repository’. Enter in the repository name, where YOURUSERNAME is your Github username:

    YOURUSERNAME/StreamPy-UI-components

    static/get_github_repo.png
    static/have_github_repo.png
  4. Grab a local copy of the repository by clicking on the cloud
    static/cloud.png

    next to the repository’s name.

  5. Go to ‘On device’. Your repository should be there, ready for use!

Make a graph

  1. Click into the Flowhub repository you just got from Github.
    static/ready_github_repo.png
  2. Click on the side bar and check that you have premade components
    static/check_sidebar.png

    Click on the side bar again to close it.

  3. Start looking for the components you want by clicking on the name of the graph. It should turn into a search bar. You can look for components you want by typing in its name and selecting it.

    static/search_bar.png
    static/search_bar_open.png
  4. Try getting the generate_stream_of_random_integers, multiply_elements and print_value_stream components on the canvas using the search bar.
    static/getting_components.png

  5. Zoom in on multiply_elements and notice that the ports are labelled. Click on it. You can enter values for these parameters in the form on the left corner.

    1. func : name of the basic Python function that corresponds to this component

      If you don’t type in anything, it will be the name of the component

    2. type : PStreams wrapper type. What do you expect the input value to be? Just a simple value (element), a list (list) or something else?

      If you don’t type in anything, it will be element

    3. state : (optional) state of the function

      If you don’t type in anything, it’s assumed the function is stateless

    4. multiplier, and other labels : constant parameter. Some functions require additional information that is applied to all the input values it takes in. In this example, it is the number you want to multiply the input value by.

      If you don’t type in anything, it will be left empty

    5. in : input stream

      Leave this blank! This port is where the data stream comes in!

    static/zoom_component.png
  6. For this example, type in any number in the multiplier port. Leave everything else blank. Zoom out when you’re done.
    static/modify_parameter.png
  7. Click on the print_value component and type in 0 for its state label.
    static/print_state.png
  8. Connect the components up!
    static/connected_graph.png

  9. You’re done!

Turn your graph into code

  1. Click on the cog button on the top left.
    static/cog.png
  2. On the pop up window, click on the download button.
    static/download.png
    static/graph_settings.png

    Hint: You should see something like this that indicates that you have successfully downloaded the graph.

    static/downloaded.png

Run the tool

  1. Make sure you have the tool downloaded. install_tool

  2. Open your terminal/command line (make sure it’s open in the folder that the tool is). Type in python run.py main.json and hit enter.

    static/run_simple_graph.png

    Because the numbers were generated, the final numbers that are printed out will be different. I chose a multiplier of 1000, so all the numbers that printed out have 3 zeroes at the end of them.

Visual debugger

  1. After you run the tool. a window should pop up with an animated graph on it. This is the visual debugger. You can see numbers get multiplied as they pass through the graph.
    static/animated_simple_graph.png
    Hint: If this doesn’t happen automatically, go to PStreams-UI/src/root/nested/web and open main.html in your browser (Chrome, Safari, Internet Explorer, etc).
    static/manual_debugger.png

  2. Congrats! You built your first streaming Python program!