Skip to content

Add http backend#202

Draft
almarklein wants to merge 14 commits into
mainfrom
http
Draft

Add http backend#202
almarklein wants to merge 14 commits into
mainfrom
http

Conversation

@almarklein
Copy link
Copy Markdown
Member

@almarklein almarklein commented Mar 26, 2026

A backend that runs a webserver that you can connect to with your browser. Multiple clients are supported (eventually).

Using ASGI, so it can run on any ASGI server and we don't have any hard dependencies 🚀

  • ASGI server.
  • Websocket connection.
  • Implement JS to be a AFM (anywidget front-end module) host. Or JS to control the renderview directly.
  • Python backend module.
  • Support for multiple simultaneous clients.
  • Support for including this in a larger web app, e.g. FastAPI.
  • Allow customizing the html and e.g. add a logo.
  • docs
  • Cleanup

WIP AFM host code, saving here for reference, but I think I'll skip the afm:

        import {default as afm_factory} from './renderview-afm.js'
        const afm = afm_factory();

        // Open websocket
        const ws = new WebSocket("ws://" + location.host + "/ws");

        ws.onopen = (e) => {


        };
        ws.onerror = (e) =?
        ws.onmessage = (e) => {
            let msg = e.data
            if msg.
        }
        ws.onclose = (e) => {
        }

        const callbacks = {}
        const store = {"css_height"}
        let storeChanges = {}

        class AfmModel {
            on (eventName, callback) {
                callbacks[eventName] |= []
                callbacks[eventName].push(callback)
            }
            get (key) {
                return store[key]
            }
            set (key, value ) {
                store[key] = value
                storeChanges[key] = value
            }
            save_changes () {
                ws.send({'type': 'storeChanges', 'data': storeChanges})
                storeChanges = {}
            }
            send (ob) {
                ws.send(ob)
            }
        }

        const model = AfmModel();
        const el = document.getElementById('canvas')

        afm.initialize({model});
        afm.render({el})

@almarklein
Copy link
Copy Markdown
Member Author

almarklein commented Apr 9, 2026

Progress! You can basically replace one line to say from rendercanvas.http import RenderCanvas, loop, and run the same code, but now its a webserver 🚀

image

@almarklein
Copy link
Copy Markdown
Member Author

This is nearly done. Need some cleanup, and resolving some small todos. The server can take multiple clients, who each see the same rendered image. The stream is currently throttled by the slowest connection. Only one client is active: it determines the size of the canvas, and the controls the mouse etc.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant