ManiacalLabs / SimPixel

WebGL Pixel Art Visualizer
http://simpixel.io
GNU General Public License v3.0
9 stars 7 forks source link

Get BP server URL from query parameters #28

Closed vingkan closed 6 years ago

vingkan commented 6 years ago

Use Case: Teachers and students programming with BiblioPixel in an online development environment want to open a direct link to the visualization in SimPixel so they can get started faster.

I changed the bpHost() function to check if there is a host query parameter in the URL and, if there is one, return its value for the BP host. This way, students could have a direct link that connects SimPixel to their own websocket URL.

Is host the best name for such a parameter?

Example Link: http://simpixel.io/?host=wss://boring-vor_80.ide.mimir.io

Here, the BiblioPixel program is running on a web-based IDE with the websocket: wss://boring-vor_80.ide.mimir.io. When the above link opens, SimPixel will automatically try/retry to connect to that host. I envision this kind of link being automatically generated by an online coding tool so students can just copy/paste the URL or click a button to open the visualization. The SimPixel view could also be iframed so that students don't have to switch tabs when testing.

vingkan commented 6 years ago

For reference, here is the README we wrote for students using the Mimir online IDE and a sample program written by instructor Radha Ramachandran and her team:

Sample Program: ChasingRainbowLoop.py

from LEDsetup import*

while(True):

    for x in range(0,15):
        led.set(x,Red)
        led.set(x-1,Orange)
        led.set(x-2,Yellow)
        led.set(x-3,Green)
        led.set(x-4,Blue)
        led.set(x-5,Purple)
        led.update()
        time.sleep(0.03)
        led.set(x-5,Off)
        led.update()

README: Programming LEDs

Dependencies

Install the BiblioPixel library with this command:

pip3 install --user BiblioPixel

The command pip3 makes sure the library is installed with Python version 3 and --user saves the library with your home directory so that next time you use the IDE you won't have to re-install it.

Instructions

Program the LEDs in a python script and run it with the command below.

python3 filename

In interactive mode, your script will run and then let you continue typing commands in the Python REPL. To run in interactive mode, use this command:

python3 -i filename

After starting your program, open the SimPixel website in another tab. This website will help you visualize your virtual LEDs!

To connect your program to SimPixel, click on View > View Ports > Port 80 in the IDE menu. Copy that URL and change https:// to wss:// and then past the new URL into the "Server" box in the top right corner of the SimPixel website.

It may take a few seconds for the LED animations to take effect. If the SimPixel website says it cannot connect, check that the URL in the server box is correct or refresh the SimPixel webpage, update the server URL, and restart your program.

Methods

Here are examples of the methods you can use. Can you figure out what they do?

from LEDsetup import *

led.fill(Red)
led.fill(Blue, 2, 4)
led.set(6, Yellow)
led.update()
rec commented 6 years ago

Good stuff! Thanks for doing this.

We're starting another documentation run, so we'll use some of this in it...

On Mon, May 14, 2018 at 4:15 PM, Adam Haile notifications@github.com wrote:

Merged #28 https://github.com/ManiacalLabs/SimPixel/pull/28.

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/ManiacalLabs/SimPixel/pull/28#event-1624916491, or mute the thread https://github.com/notifications/unsubscribe-auth/AAPdsgYt4Mu7VbDl4H-eKGiL871KCCWkks5tyZF5gaJpZM4TKrSP .

-- /t

https://tom.ritchford.com https://tom.ritchford.com https://tom.swirly.com https://tom.swirly.com

vingkan commented 6 years ago

@adammhaile @rec Can we add a URL parameter for specifying the point size as well? That point size resets every time the program runs. I can't figure out what parts of the code affect point size. Could you point me in the right direction? I can make another PR.

adammhaile commented 6 years ago

@vingkan - Sure, it's right here -> https://github.com/ManiacalLabs/SimPixel/blob/master/src/js/view.js#L13 I would probably update the bp_host() function you changed before to not just rturn the hostname but other URL params, as a dictionary. It gets read here -> https://github.com/ManiacalLabs/SimPixel/blob/master/src/js/main.js#L4 Instead of calling it directly in the Network() invocation, get the dict, the pass the host to Network() and set view.sizeDefault to whatever you read from the URL if it exists. I think that should automatically update the point size... @mwcz would know more as he wrote that ;)

mwcz commented 6 years ago

I think that @adamhaile's suggestion should work. There's another option for preserving config values across page refreshes that might fit even better. The config panel, dat-gui, has a feature where you can save all config values (into localStorage), and restore then when the page is refreshed. This way you'll get point size as well as all other configuration values that exist now or in the future. Here's an example.

Hope this helps!

adamhaile commented 6 years ago

@mwcz I think you wanted @adammhaile :)

adammhaile commented 6 years ago

Haha... oops. I have a dopelganger. Sorry @adamhaile :P

On Fri, Jul 27, 2018 at 9:55 AM Adam Haile notifications@github.com wrote:

@mwcz https://github.com/mwcz I think you wanted @adammhaile https://github.com/adammhaile :)

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/ManiacalLabs/SimPixel/pull/28#issuecomment-408425994, or mute the thread https://github.com/notifications/unsubscribe-auth/AA6a6kiPIpkuzXdAbzKYPwZQ2dd2rcnVks5uKxvigaJpZM4TKrSP .

mwcz commented 6 years ago

@adamhaile Dangit! Sorry. :) The github app on my phone doesn't have name autocomplete.