SVG Support

[mwx23]

This might be out of scope, but it would be super cool if you could manipulate svg elements with lona.

I've tried the following and appears in the DOM when you inspect it, but doesn't render.

from lona import LonaApp, LonaView
from lona.html import Node, HTML

app = LonaApp(__file__)


class Svg(Node):
    TAG_NAME = 'svg'
    ATTRIBUTES = {
        'xmlns': "http://www.w3.org/2000/svg",
    }


class Circle(Node):
    TAG_NAME = 'circle'
    SELF_CLOSING_TAG = True


@app.route('/')
class MyView(LonaView):

    def handle_request(self, request):
        html = HTML(
            Svg(
                Circle(cx="50", cy="50", r="40", stroke="green", stroke_width="4", fill="yellow"),
                width="100",
                height="100",
            )
        )

        return html


app.run(port=8080)

I'm working on some widgets that I'll share when they're decent. It was super easy to wire them up, I'm experimenting with different patterns to expose the data back to lona. I'll post some new issues with questions I have regarding that.

As per usual, lona rocks!

[mwx23]

Also something I noticed with the above code was that even though I set SELF_CLOSING_TAG = True for the Circle class, when it renders to the DOM it appears as <circle></circle>. Not sure if that is intended or not. I expected setting SELF_CLOSING_TAG = TRUE to appear as <circle />.

[fscherf]

Hi @mwx23,

I thought of this too and started with this: https://github.com/lona-web-org/lona/tree/fscherf/canvas-support

My idea was to add API to use a canvas object in python like in Javascript

from lona.html import Canvas, HTML, H1, P
from lona import LonaView


class CanvasView(LonaView):
    def handle_request(self, request):
        canvas = Canvas(width='300px', height='300px')

        canvas.ctx.lineWidth = 10
        canvas.ctx.strokeRect(75, 140, 150, 110)
        canvas.ctx.fillRect(130, 190, 40, 60)
        canvas.ctx.moveTo(50, 140)
        canvas.ctx.lineTo(150, 60)
        canvas.ctx.lineTo(250, 140)
        canvas.ctx.closePath()
        canvas.ctx.stroke()

        return HTML(
            H1('Canvas'),
            P('This should show a house'),
            canvas,
        )

Btw: Did you receive my email?

[fscherf]

@mwx23 SELF_CLOSING_TAG gets only used for the server side representation. The client renders tags on its own, without this information. The renderer was not made with SVGs in mind, so maybe we use not the right APIs to handle self closing tags in SVGs correctly.

[mwx23]

@fscherf I've been avoiding emails but I'll check it in the morning :)

Could you point me to the part in the client code where it receives the svg element? I'd like to better understand that process so I can hopefully contribute some extensions to the browser API that lona can interact with.

[fscherf]

@mwx23 :)

Sure! When a node gets redered initially lona/client/dom-renderer.js is used. When a node receives updates lona/client/dom-updater.js gets used.

[fscherf]

@mwx23 i converted the issue into a discussion

[mwx23]

All these GitHub features I didn't know about!

Just saw the 1.7.3 release with view events! That's amazing. I assume that means I can do things like send a message from one connected user to another? Can't wait to have a play.

I'll have a crack at trying to get SVG elements working on the weekend.

I implemented your canvas-support branch code for interacting with the AutoNumeric.js widget I'm working on. Your way of interacting with the instantiated JS object was much nicer than mine.

At the moment I'm stuck on how to return the result of a calling a method on the JS object back to lona.

//autonumeric.js
function AutoNumericWidget(lona_window) {
    this.lona_window = lona_window;


    this._run_operations = function () {
        console.log('>> _run_operations', this.data)
        for (var index in this.data['operations']) {
            var operation = this.data['operations'][index];

            // set
            if (operation[0] == 'set') {
                eval('this.autonumeric.' + operation[1] + ' = operation[2];');

                // call
            } else if (operation[0] == 'call') {
                let result = eval('this.autonumeric.' + operation[1] + '(...operation[2]);');
                console.log('>> result', result);
                // somehow get result back to lona... maybe:
                // lona_window.fire_input_event(undefined, operation[1], result );
            };
        };
    };

    this.setup = function () {
        var lona_window = this.lona_window;
        this.options = this.data.options;
        this.autonumeric = new AutoNumeric(this.nodes[0], this.options);

        this._run_operations();
    };

    this.data_updated = function () {
        this._run_operations();
    };
};

Lona.register_widget_class('AutoNumericWidget', AutoNumericWidget);

As you can see I thought of firing off an input event, and then in the Widget class handle the event and store the result somewhere. Does that sound sane to you?

In particular I'm trying to get the result of the .getNumericString() method in AutoNumeric.

[fscherf]

All these GitHub features I didn't know about!

Discussions are new to me too. I am not completely sure if i am happy with them though. For now it's an experiment.

Just saw the 1.7.3 release with view events! That's amazing. I assume that means I can do things like send a message from one connected user to another? Can't wait to have a play.

Yes! I currently work on an demo for this feature, which will be a multi-user chat application.

At the moment I'm stuck on how to return the result of a calling a method on the JS object back to lona.
As you can see I thought of firing off an input event, and then in the Widget class handle the event and store the result somewhere. Does that sound sane to you?

That's totally sane. Widgets are not meant to alter state that is interesting for the view, because real state changes should only happen in python code to make the views self contained. A widget should only send events, to trigger the view to change it's state.

fire_input_event() is exactly meant for the use case you are describing.

[mwx23]

Thanks @fscherf !

Widgets are not meant to alter state that is interesting for the view, because real state changes should only happen in python code to make the views self contained. A widget should only send events, to trigger the view to change it's state.

This got me thinking, and I ditched using the JavaScript library and came up with this solution in pure lona! Need to change how I think about problems.

This is what I came up with to allow the user to input a number and have it displayed back with a dollar sign and thousand separator.

import re
from typing import Union

from lona.html import Widget, TextInput


class CurrencyIntegerInput(Widget):
    _input: TextInput
    _value: int

    def __init__(self, *args, **kwargs):
        self._input = TextInput(*args, handle_change=self.on_change, **kwargs)
        self.nodes = [
            self._input,
        ]

    @property
    def value(self) -> int:
        return self._value
    @value.setter
    def value(self, new_value: Union[int, str]):
        try:
            self._value = int(re.sub(r'[^0-9-]', '', str(new_value)))
        except ValueError:
            self._value = 0
        self._input.value = f'$ {self._value:,}'

    def on_change(self, input_event):
        self.value = input_event.data

It blows my mind how easy that was! Needs a bit more polish, but the basic functionality I want is there.

[fscherf]

@mwx23 Ouh! Much nicer implementation! I am always a fan of full-python code :)