useablity: Embed in UI and update dynamic update

[wojons]

I would like to be able to put this into an existing UI. It would be useful if I can control which dom element the code ran in, and that did not have to click on the little box in the conner always.

Also I would like to be able to update the data inside using some sort of onchange.

[aterrien]

Can you give us a use case ?

[wojons]

If i put my forp traces into a database and then wanted to have an interface that listed recent traces and then can click a link and the trace is loaded.

[aterrien]

I've just added "embedded" mode (vs default mode=fixed).

Now, you can do something like this :

(function(f) {
            var stack = #result of your xhr here = json_encode(forp_dump())#;
            f.find("#target")
             .forp({
                stack : stack
             });
})(forp);

I've not tested dynamic update yet.

[wojons]

thank you it works with a minor bug to get it to work in the target i had to give it a height. I was ableto see the control interface without a hight but for the content below it it was rendered in the html but hidden becuase it was suming the height of the whole thing was just like 50px.

<script> /_(new forp.Controller()) .setStack() .runOnReady();_/ (function(f) { //var stack = #result of your xhr here = json_encode(forp_dump())#; var stack = ; f.find("#target") .forp({ stack : stack }); })(forp); </script>

[aterrien]

Now, you can use "each" to setup style attribute (forp-ui contains a pico-jQuery-like-framework:)).

Example :

        (function(f) {
            f.find(".forp")
             .each(
                function(el) {
                    el.css('margin:50px;height:300px;border:1px solid #333');
                }
             )
             .forp({
                stack : <?php echo json_encode(forp_dump()); ?>,
             })
        })(forp);

[wojons]

I do find that the light theme works fine with this but not the dark theme.