Simple web app controls LEDs connected to an RPI

yakir12 · February 20, 2020, 10:41am

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:

How do I code a website like that (I literally need one radio button and one slider) and
how do I serve this website from the RPI (unless there is an even simpler way to server it)?
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…

sdanisch · February 20, 2020, 11:30am

I started SmartHomy for that purpose:

I render a UI with JSServe:

The webserver:

github.com

SimonDanisch/SmartHomy/blob/master/web_app.jl

using PyCall, Markdown, JSServe
push!(Base.LOAD_PATH, @__DIR__)
using SmartHomy
using TPLink
using SmartHomy: start!, stop!, AbstractLight, AbstractPlug, μg_m³
using JSServe.DOM

include("hm3301.jl")
include("lywsd02.jl")
include("dht_sensors.jl")

sensors = [HM3301(), LYWSD02("E7:2E:00:B0:70:A4"), DHTSensor(22, 22)]
Threads.@spawn begin
    foreach(start!, sensors)
end

foreach(stop!, sensors)
devices = TPLink.query_devices()
lights = filter(x-> x isa AbstractLight, devices)
plugs = filter(x-> x isa AbstractPlug, devices)

This file has been truncated. show original

The rendering:

github.com

SimonDanisch/SmartHomy/blob/master/SmartHomy/src/smartdevice.jl#L155


        (stop - start) ÷ 100
    end
    slider = JSServe.Slider(start:tick:stop, class="custom-range")
    slider[] = attribute[]
    on(slider) do val
        attribute[] = val
    end
    return slider
end


function JSServe.jsrender(session::JSServe.Session, attribute::AttributeField)
    if is_readonly(attribute)
        return JSServe.jsrender(session, attribute.attribute)
    else
        attribute_widget(attribute)
    end
end


function JSServe.jsrender(session::JSServe.Session, device::SmartDevice)
    return DOM.div(all_attributes(device))
end

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:

github.com

SimonDanisch/JSServe.jl/blob/master/examples/markdown.jl

using Hyperscript, Markdown
using JSServe, Observables
using JSServe: Session, evaljs, linkjs, div, active_sessions
using JSServe: @js_str, onjs, Button, TextField, Slider, JSString, Dependency, Asset
using WGLMakie, AbstractPlotting

markdown_css = Asset(JSServe.dependency_path("markdown.css"))

function test_handler(session, req)
    button = Button("click")
    slider = Slider(1:100)

    signal = map(slider) do value
        sin.(LinRange(0, value, 1000))
    end

    scene = scatter(signal, markersize=(10.0,10.0), resolution=(500,200), limits=FRect(0, -1, 1000, 2))

    on(button) do val
        scene[end].color = rand(RGBf0)

This file has been truncated. show original

github.com

SimonDanisch/JSServe.jl/blob/master/examples/serve.jl

using Hyperscript
using JSServe, Observables
using JSServe: Application, Session, evaljs, linkjs, update_dom!, div, active_sessions
using JSServe: @js_str, onjs, Button, TextField, Slider, JSString, Dependency, with_session
using JSServe.DOM

function dom_handler(session, request)
    s1 = Slider(1:100)
    s2 = Slider(1:100)
    b = Button("hi")
    t = TextField("lol")
    s_value = s1.value
    linkjs(session, s1.value, s2.value)
    onjs(session, s1.value, js"(v)=> console.log(v)")
    on(t) do text
        println(text)
    end
    return DOM.div(s1, s2, b, t)
end;

This file has been truncated. show original

johnh · February 20, 2020, 11:32am

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!

yakir12 · February 20, 2020, 11:44am

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…

kristoffer.carlsson · February 20, 2020, 11:45am

You can use https://ngrok.com maybe.

yakir12 · February 20, 2020, 11:49am

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)?

sdanisch · February 20, 2020, 11:54am

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

yakir12 · February 20, 2020, 12:01pm

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

yakir12 · February 20, 2020, 9:04pm

@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.

yakir12 · February 21, 2020, 10:15am

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…

yakir12 · February 22, 2020, 10:36am

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…

Janis_Erdmanis · February 22, 2020, 10:58am

Have you tried SMTPClient.jl as repleacement for smtplib?

yakir12 · February 22, 2020, 11:30am

Nope! Will try on Monday! Thanks!

yakir12 · February 22, 2020, 11:59am

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.

Iulian.Cioarca · October 7, 2020, 12:42pm

Noob question: How do I access the web app?
I put this code in a .jl file and then hit include in the REPL. 127.0.0.1 in the browser does nothing.

yakir12 · October 7, 2020, 1:35pm

Sorry for the slow reply, try http://127.0.0.1:8081/