# Simple web app controls LEDs connected to an RPI

**URL:** https://discourse.julialang.org/t/simple-web-app-controls-leds-connected-to-an-rpi/34896
**Category:** General Usage
**Tags:** question, webapps
**Created:** [February 20, 2020, 10:41am UTC](https://discourse.julialang.org/t/simple-web-app-controls-leds-connected-to-an-rpi/34896 "2020-02-20T10:41:49Z")
**Posts on this page:** 16
**Page:** 1

<div class="post-metadata">

### Author: ![yakir12](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/yakir12/32/297_2.png) [@yakir12](https://discourse.julialang.org/u/yakir12)
#### Post date: [February 20, 2020, 10:41am UTC](https://discourse.julialang.org/t/simple-web-app-controls-leds-connected-to-an-rpi/34896/1 "2020-02-20T10:41:49Z")

</div>

I want a user to browse to a website, move one radio button and one slider, and a Raspberry Pi which is listening to that website will control a few LED strips connected to it depending on the user’s choices (the whole set up includes a video camera as well and some other minor details). This is not meant to be used by tons of users, or even multiple users. I’m pretty sure there would be just one user at a time.

I have the RPI (version 4) connected via an ethernet cable to the web, so it’s always online. I know how to control the LED strips from the RPI itself (mainly using Python’s `adafruit-circuitpython-dotstar`). I kind of know how to use `Interact.jl` and `Blink.jl`. What I don’t know is how to build that website, nor how to host and listen to that website from the RPI.

I assume that the easiest thing to do is for the RPI itself to host that website – I mean, unless the RPI is on the LED strips won’t be on and there will be no point for a user to fiddle with the widgets on that website, so RPI on → website on → controlling the LEDs becomes possible.

Here are my concrete questions:

1. How do I code a website like that (I literally need one radio button and one slider) and
2. how do I serve this website from the RPI (unless there is an even simpler way to server it)?
3. How does the RPI fetch the choices of the user, preferably, as s/he moves the sliders etc?

Much thanks! And keep in mind that I am not a web developer, so the more details the better…

---

<div class="post-metadata">

### Author: ![sdanisch](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/sdanisch/32/1406_2.png) [@sdanisch](https://discourse.julialang.org/u/sdanisch)
#### Post date: [February 20, 2020, 11:30am UTC](https://discourse.julialang.org/t/simple-web-app-controls-leds-connected-to-an-rpi/34896/2 "2020-02-20T11:30:29Z")

</div>

I started SmartHomy for that purpose:

> **[GitHub - SimonDanisch/SmartHomy: Julia's Smarthome](https://github.com/SimonDanisch/SmartHomy)**
>
> Julia's Smarthome. Contribute to SimonDanisch/SmartHomy development by creating an account on GitHub.

I render a UI with JSServe:

 ![image](https://global.discourse-cdn.com/julialang/original/3X/0/1/01e3d42b3bfc54f9d7443d7c7a797c896d5d91dd.png)

The webserver:

> <https://github.com/SimonDanisch/SmartHomy/blob/master/web_app.jl>

The rendering:

> <https://github.com/SimonDanisch/SmartHomy/blob/master/SmartHomy/src/smartdevice.jl#L155>

It’s maybe a bit not trivial how to see how to do this, if you’re not familiar with JSServe 😃  
Maybe these example help:

> <https://github.com/SimonDanisch/JSServe.jl/blob/master/examples/markdown.jl>

> <https://github.com/SimonDanisch/JSServe.jl/blob/master/examples/serve.jl>

---

<div class="post-metadata">

### Author: ![johnh](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/johnh/32/3615_2.png) [@johnh](https://discourse.julialang.org/u/johnh)
#### Post date: [February 20, 2020, 11:32am UTC](https://discourse.julialang.org/t/simple-web-app-controls-leds-connected-to-an-rpi/34896/3 "2020-02-20T11:32:52Z")

</div>

[https://github.com/JuliaBerry](https://github.com/JuliaBerry)

[https://github.com/JuliaBerry/PiGPIO.jl](https://github.com/JuliaBerry/PiGPIO.jl)

The Jetson Nano has the same connector for hats as the Raspberry PI - so you can use the same GPIO and Sense hats.  
I tried this on my Nano but did not have much success. I note that there are changes within the last two months - so it is still nder development, which is good!

---

<div class="post-metadata">

### Author: ![yakir12](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/yakir12/32/297_2.png) [@yakir12](https://discourse.julialang.org/u/yakir12)
#### Post date: [February 20, 2020, 11:44am UTC](https://discourse.julialang.org/t/simple-web-app-controls-leds-connected-to-an-rpi/34896/4 "2020-02-20T11:44:15Z")

</div>

Looks promising, but will this only work on the local network, or can you access it from outside? I’m on a uni network, so while the IP addresses are almost persistent (or as persistent as I care), I don’t have access to the router and stuff like that…

---

<div class="post-metadata">

### Author: ![kristoffer.carlsson](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/kristoffer.carlsson/32/22_2.png) [@kristoffer.carlsson](https://discourse.julialang.org/u/kristoffer.carlsson)
#### Post date: [February 20, 2020, 11:45am UTC](https://discourse.julialang.org/t/simple-web-app-controls-leds-connected-to-an-rpi/34896/5 "2020-02-20T11:45:40Z")

</div>

You can use [https://ngrok.com](https://ngrok.com) maybe.

---

<div class="post-metadata">

### Author: ![yakir12](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/yakir12/32/297_2.png) [@yakir12](https://discourse.julialang.org/u/yakir12)
#### Post date: [February 20, 2020, 11:49am UTC](https://discourse.julialang.org/t/simple-web-app-controls-leds-connected-to-an-rpi/34896/6 "2020-02-20T11:49:33Z")

</div>

This looks like a vital part in the puzzle. I’ll check it out! What’s the name of the package that can serve websites (the thing I’ll have on the RPI), and what’s the name of the one that can listen on (the thing I’ll have on the client side)?

---

<div class="post-metadata">

### Author: ![sdanisch](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/sdanisch/32/1406_2.png) [@sdanisch](https://discourse.julialang.org/u/sdanisch)
#### Post date: [February 20, 2020, 11:54am UTC](https://discourse.julialang.org/t/simple-web-app-controls-leds-connected-to-an-rpi/34896/7 "2020-02-20T11:54:30Z")

</div>

> Looks promising, but will this only work on the local network, or can you access it from outside? I’m on a uni network, so while the IP addresses are almost persistent (or as persistent as I care), I don’t have access to the router and stuff like that…

As @kristoffer.carlsson suggests, ngrok may work… Only other option is likely, to speak with your unis network admin… You should probably anyways, if you plan to open up uni servers to the public. It might also well be, that they already have infrastructure for this in place 😉

---

<div class="post-metadata">

### Author: ![yakir12](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/yakir12/32/297_2.png) [@yakir12](https://discourse.julialang.org/u/yakir12)
#### Post date: [February 20, 2020, 12:01pm UTC](https://discourse.julialang.org/t/simple-web-app-controls-leds-connected-to-an-rpi/34896/8 "2020-02-20T12:01:36Z")

</div>

I’ll try my luck with ngrok… OK, I’ll try and use `JSServe` to make this happen!

---

<div class="post-metadata">

### Author: ![yakir12](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/yakir12/32/297_2.png) [@yakir12](https://discourse.julialang.org/u/yakir12)
#### Post date: [February 20, 2020, 9:04pm UTC](https://discourse.julialang.org/t/simple-web-app-controls-leds-connected-to-an-rpi/34896/9 "2020-02-20T21:04:44Z")

</div>

@sdanisch @kristoffer.carlsson !!! IT WORKED!!!  
This is huge! Using `ngrok` and your `markdown.jl` example I could play with that plot on my phone off of the local network! Boom!  
Thanks a ton! I’m really looking forward to implementing this for my system!  
OK, I’ll calm down now.

---

<div class="post-metadata">

### Author: ![yakir12](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/yakir12/32/297_2.png) [@yakir12](https://discourse.julialang.org/u/yakir12)
#### Post date: [February 21, 2020, 10:15am UTC](https://discourse.julialang.org/t/simple-web-app-controls-leds-connected-to-an-rpi/34896/10 "2020-02-21T10:15:56Z")

</div>

More overly excited news:  
The markdown example works from the RPI!!! This means that among other miracles, `WGLMakie` does work on ARM7 32 bits! So sick! (ok, the fonts are not displaying yet, but everything else just works)

Side note: irritating I can’t forward the resulting (random) address ngrok generates to an email or something…

---

<div class="post-metadata">

### Author: ![yakir12](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/yakir12/32/297_2.png) [@yakir12](https://discourse.julialang.org/u/yakir12)
#### Post date: [February 22, 2020, 10:36am UTC](https://discourse.julialang.org/t/simple-web-app-controls-leds-connected-to-an-rpi/34896/11 "2020-02-22T10:36:27Z")

</div>

another update: I found out that I can `wget` the local address on the RPI and use JSON(3) to fish out the address ngrok is using. Email that to the users, and done! Feels like I’m cheating ngrok out of their income a bit but but…

Next irritating point: Julia doesn’t have an email package like Python’s `smtplib`…

---

<div class="post-metadata">

### Author: ![Janis\_Erdmanis](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/janis_erdmanis/32/10869_2.png) [@Janis\_Erdmanis](https://discourse.julialang.org/u/Janis_Erdmanis)
#### Post date: [February 22, 2020, 10:58am UTC](https://discourse.julialang.org/t/simple-web-app-controls-leds-connected-to-an-rpi/34896/12 "2020-02-22T10:58:16Z")

</div>

Have you tried `SMTPClient.jl` as repleacement for `smtplib`?

---

<div class="post-metadata">

### Author: ![yakir12](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/yakir12/32/297_2.png) [@yakir12](https://discourse.julialang.org/u/yakir12)
#### Post date: [February 22, 2020, 11:30am UTC](https://discourse.julialang.org/t/simple-web-app-controls-leds-connected-to-an-rpi/34896/13 "2020-02-22T11:30:44Z")

</div>

Nope! Will try on Monday! Thanks!

---

<div class="post-metadata">

### Author: ![yakir12](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/yakir12/32/297_2.png) [@yakir12](https://discourse.julialang.org/u/yakir12)
#### Post date: [February 22, 2020, 11:59am UTC](https://discourse.julialang.org/t/simple-web-app-controls-leds-connected-to-an-rpi/34896/14 "2020-02-22T11:59:53Z")

</div>

This does look promising. I would however need to implement a package to control the DotStar LED strip, basically what `adafruit-circuitpython-dotstar` is doing. It **is** tempting cause I’m only using basic stuff from that library and what with `SMTPClient.jl` I could remove all python dependencies… so… but I’ll look into that once I have a functioning finished version.

---

<div class="post-metadata">

### Author: ![Iulian.Cioarca](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/iulian.cioarca/32/30166_2.png) [@Iulian.Cioarca](https://discourse.julialang.org/u/Iulian.Cioarca)
#### Post date: [October 7, 2020, 12:42pm UTC](https://discourse.julialang.org/t/simple-web-app-controls-leds-connected-to-an-rpi/34896/15 "2020-10-07T12:42:04Z")

</div>

Noob question: How do I access the web app?  
I put this [code](https://github.com/SimonDanisch/JSServe.jl/blob/master/examples/serve.jl) in a .jl file and then hit `include` in the REPL. 127.0.0.1 in the browser does nothing.

---

<div class="post-metadata">

### Author: ![yakir12](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/yakir12/32/297_2.png) [@yakir12](https://discourse.julialang.org/u/yakir12)
#### Post date: [October 7, 2020, 1:35pm UTC](https://discourse.julialang.org/t/simple-web-app-controls-leds-connected-to-an-rpi/34896/16 "2020-10-07T13:35:03Z")

</div>

Sorry for the slow reply, try [http://127.0.0.1:8081/](http://127.0.0.1:8081/)
