Genie Discord forum

Author AvatarAnarchist Wolf
3/2/2023, 11:07:23 PM

Hello, im trying to create a "terminal" inside the webpage where users can type messages and then have a scrolling output similar to how the REPL works. I was hoping the chatmessage feature worked (or the dialog component in Quasar).

Author Avatarabhimanyuaryan
3/5/2023, 7:54:02 AM

chatmessage component in stipple works. I have tested it sometime back

Author AvatarAnarchist Wolf
3/6/2023, 12:03:51 AM

Sorry, I instead got the scrollarea to work instead and just out a text input under it. Though would you know how to update the scroll area whenever new information is added to it?

Author Avatarabhimanyuaryan
3/6/2023, 1:49:42 PM

scroll area doesn't have a reactive property that you can update via julia's reactive field

Author Avatarabhimanyuaryan
3/6/2023, 1:50:38 PM

the text is basically added between the tags like inner html

Author AvatarAnarchist Wolf
3/6/2023, 2:07:25 PM

Is there some other component I could use that mimics that ability or would chatmessage be my best bet?

Author AvatarAnarchist Wolf
3/6/2023, 2:07:33 PM

Appreciate all the help

Author Avatarabhimanyuaryan
3/6/2023, 2:08:27 PM

what are you using for input?

Author Avatarabhimanyuaryan
3/6/2023, 2:09:42 PM

I think for repl it makes more sense to use chatmessage

> says this
> says that
Author AvatarAnarchist Wolf
3/6/2023, 2:22:21 PM

The terminal is basically controlling a laser by serial connection. So it's just a serial terminal. I will try this out though!

Author AvatarAnarchist Wolf
3/6/2023, 3:57:48 PM
  1. Its not reactive to new messages in the vector unless I refresh the page.
Author AvatarAnarchist Wolf
3/6/2023, 3:58:19 PM
  1. It is just adding to the window and not actually creating an area that can be scrolled/contained.
Author AvatarAnarchist Wolf
3/6/2023, 3:59:13 PM
cell(class = "st-br",[Html.div(style="width: 75%; max-width: 400px, height: 200px;",[
          quasar(:chat__message, text = :consolemsg, name="Console")
          #quasar(:chat__message, text = :outputmsg, name="LASER", sent = true)
Author Avatarhhaensel
3/7/2023, 11:36:51 PM

You have to look for the last example on that page

Author AvatarAnarchist Wolf
3/8/2023, 3:57:53 AM

I get the following error...

UndefVarError: chatmessage not defined

I can run the quasar version in the previous example but not chatmessage(), Is this something to do with it being developmental?

Author Avatarhhaensel
3/8/2023, 6:44:32 AM

Indeed, I didn't realise that it's currently on master. please ]add StippleUI#master and probably ]add Stipple#master for the time being

Author AvatarAnarchist Wolf
3/8/2023, 2:55:15 PM

Is there a way for me to contain this in a separate scroll area? or should i just have a circularbuffer that it pushes too?

Author Avatarabhimanyuaryan
3/8/2023, 7:06:44 PM

why not add chatmessage as a child element of scrollarea?

ofc this is html but you get an idea? Not exactly same but similar:

You'll need to convert it to julia stipple code

<q-scroll-area ref="chatArea" @scroll="scrollinfo" >
      <div v-for="item of message" :key="">
         <q-chat-message :name="item.nickname" :text="[item.content]" :stamp="item.createTime" />
    <q-scroll-observer /> <!-- 监控滑动区域,主要监控滑动条的长度。绑定scroll方法 -->
Author AvatarAnarchist Wolf
3/8/2023, 8:14:39 PM

I'll definitely try it out! I didn't know if I could use scrollarea since it's not reactive, but that's likely my misunderstanding of how it works.

Author AvatarAnarchist Wolf
3/9/2023, 7:13:08 PM

Hopefully last question regarding this, How would i implement "setScrollPercentage" for the scroll area, I see that the example uses @click but im not sure how to implement that.

Author Avatarhhaensel
3/12/2023, 12:39:39 AM

Just added a "ScrollArea Demo.jl" to StippleDemos.jl

Author Avatarhhaensel
3/12/2023, 12:44:01 AM

The important thing is the ref attribute which is then used in the javascript call:

# ScrollArea Demo

using Stipple, Stipple.ReactiveTools
using StippleUI

@appname ScrollDemo

@app begin
    @in position = 300
    @in scroll = false

    @onbutton scroll begin
        run(__model__, "this.\$refs.scrollArea.setScrollPosition($position, 500)")
        position = rand(0:1000)

ui() = [
    heading("Scroll Area Demo" * h4("with server-side and client-side update"))
    row(cell(class = "st-module", [
        row(class = "row q-gutter-md q-mb-md", [
            btn(R"`Scroll to ${position}px`", color = "primary", @click(raw"() => this.$refs.scrollArea.setScrollPosition(position)"))
            btn(R"`Animate to ${position}px`", color = "primary", @click(:scroll))

        scrollarea(ref = "scrollArea", style = "height: 150px; max-width: 300px;",
                li(@recur("n in 1000"), key! = "n", "Lorem ipsum dolor sit amet, consectetur adipisicing elit.")

route("/") do 
    model = @init
    page(model, ui()) |> html
up(open_browser = true)
Author AvatarAnarchist Wolf
3/12/2023, 1:03:34 AM

Really appreciate the help from you and the team!