I used to be able to do

+= view

. Any api change or i have to import something?

What's wrong with my constraint?? Code in 🧵

Hello, can

margin

be applied to a view itself instead of on the

constraint

?

Hello, I'm here once again. I have a couple of views that goes off screen, how can I make the parent scrollable. I tried to use

ScrollPanel

with a

SimpleMutableListModel

Happy new year. Is there a way I can update a layout? After init and stuffs

0.9.0 Released (https://github.com/nacular/doodle/releases/tag/v0.9.0) This release has lots of new features including: • Revamped Animation APIs • New Constraint Layout Engine • Improved Tables and TreeTables • New FileSelector Control • New Form Controls (

slider

,

rangeSlider

,

circularSlider

,

circularRangeSlider

,

file

and

files

) It also brings some performance improvements and fixes.

Doodle now has 400 ⭐ on github 🎉

Hello, is there a reason that a View's layout or render is not exposed? for example

val view = object: View(){}

The

layout

is

protected

to prevent arbitrary code from changing it for a view that assumes it has a particular one. Same goes for the render. But it’s easy to make a new view with whatever you’d like for these. The first option is to use the view builder. This will let you specify the render behavior (but not layout, though this might make sense to expose there as well).

val view = view {
    render = {
       // this points to a Canvas
       rect(…)
    }
}

The second is to override render or set layout in a derived class:

object: View() {
    init {
      layout = …
    }

    override render(…) {…}
}

Hey anyone's here can guide me to use javascript code in kotlinjs? Please

Do you mean generally? Or via a framework like Doodle?

Generally

Is there any special method for framework?

Hello, I get a weird behaviour with

simpleLayout

code in thread

Hello, I wanna style some widgets like button. Add some rounded corners and elevation. I figured out from the documentation that i need a behavior but the documentation is not very clear. 1. Is there ready to use behaviour that i can extend from? 2. Can I customize colors like primary secondary using Theme?

I have a question about Doodle. What is the main difference between it and Compose? Sorry for my poor English.

Hello, how can i use the

renderProperty

, to change the value of textField? When I try, I get:

Hi! Could anyone please explain why my simple project doesn't work? build.gradle.kts

plugins {
    id ("org.jetbrains.kotlin.js") version "1.7.21"
}

group = "org.example"
version = "1.0-SNAPSHOT"

repositories {
    mavenCentral()
}

kotlin {
    js().browser()

    val doodleVersion = "0.9.0" // <--- Latest Doodle version

    dependencies {
        implementation ("io.nacular.doodle:core:$doodleVersion"   )
        implementation ("io.nacular.doodle:browser:$doodleVersion")

        // Optional
        implementation ("io.nacular.doodle:controls:$doodleVersion" )
        implementation ("io.nacular.doodle:animation:$doodleVersion")
        implementation ("io.nacular.doodle:themes:$doodleVersion"   )
    }
}

Main.kt

import io.nacular.doodle.application.Application
import io.nacular.doodle.application.application

fun main() {
    application {
        UsefulApp()
    }
}

class UsefulApp: Application {
    init {
        //println("Hi!")
    }

    override fun shutdown() {}
}

When I run gradle task 'browserRun', I get this

do you have an html file in your src/resources dir? and does it include the js file created by the build? see this for an example https://github.com/nacular/doodle-tutorials/tree/master/PhotoStream/src/main/resources

hmm. this should work (and does when i try it locally). are you sure the js file you have in index.html is the right one? also, can you add

println

statements to verify that your code is being executed? last thing to consider is whether

display.size

is empty by chance. that would mean your view has no size. as defined, your view's size will be a fixed value and won't change as you resize the window. you can fix that by doing:

class HelloDoodle(display: Display): Application {
    init {
        val view = view {
            render = {
                text("Hello, Doodle!", color = Black)
            }
        }

        display += view
        display.fill(White.paint)
        display.layout = constrain(view, fill) // adds a constraint based layout that causes view to fit the display
    }

    override fun shutdown() {}
}

Can i implement margin without wrapping my view within a container or another view. I thought I could use

view.bounds

but couldn't so far

Hi! I am trying to create a simple Tic Tac Toe. I am creating my custom View called Cell, which is basically a rectangle with a text on it, but I can't make the size of the text equal to the size of the rectangle. Could anybody help me, please?

class TicTacToe(display: Display, textMetrics: TextMetrics) : Application {

    private var playerMoves = Player.X

    private fun getPlayerName(): String {
        val playerName = playerMoves.toString()
        playerMoves = playerMoves.next
        return playerName
    }
    init {

        val panel = GridPanel().apply {
            rowSpacing         = { 10.0 }
            columnSpacing      = { 10.0 }
            rowSizingPolicy    = FitPanel // FitContent, or custom policy
            columnSizingPolicy = FitPanel // FitContent, or custom policy


            for (i in 0..2)
                for (j in 0..2) {
                    add(Cell(textMetrics, ::getPlayerName), row = i, column = j)
                }

            val panelSize = min(display.width, display.height) * 0.8
            size = Size(panelSize, panelSize)
            Resizer(this).apply { movable = false }

        }

        display += panel
        display.layout = constrain(display.first(), center)
    }

    override fun shutdown() {}
}

class Cell(textMetrics: TextMetrics, getPlayerName: () -> String) : View() {

    var text by renderProperty("")

    init {
        this.pointerChanged += object : PointerListener {

            override fun clicked(event: PointerEvent) {
                if (text.isEmpty()) text = getPlayerName()
            }
        }
    }
    override fun render(canvas: Canvas) {
        canvas.rect(bounds.atOrigin, Blue.lighter(0.4f))

        canvas.text(text, at = Point(width / 2, height / 2), color = White)
    }

}

enum class Player {
    X {
        override fun toString(): String {
            return "X";
        }
    },

    O {
        override fun toString(): String {
            return "O";
        }
    };

    val next
        get() = if (this == X) O else X
}

fun main() {

    application(modules = listOf(PointerModule)) {
        TicTacToe(display = instance(), textMetrics = instance())
    }
}

image.png

General question. At the university, instead of an exam, there will be a project (web application) on the subject of 'Web programming', the topic of which I have to come up with. The teacher uses .Net and React, so the lectures will be based on these technologies, but students can use anything they like. I was learning Kotlin and started learning Android (TO-DO is the hardest thing I've done), so I want to do a project in an already familiar language. Project requirements: 1. Swagger UI 2. Authorization using a Google account or Azure AD 3. Use a database and ORM 4. Dependency injection 5. Use an open API 6. Data processing algorithm (conversion, mapping, calculation) 7. Use Azure Monitor (Application Insights) to store and analyze application logs 8. Deployment of the project in Azure 9. All code must be stored on GitHub with constant updates 10. Configure Continuous Integration / Continuous Delivery There is documentation and testing as well. It looks terrifying, because I, like most students, am 0 in the front-end. I only tried Ktor a little. I thought about using Compose for Web, but there is not much information. There are no courses or books, the documentation is minimal. The Kotlin documentation has this https://kotlinlang.org/docs/multiplatform-full-stack-app.html#serve-the-frontend, but I don't know React, so I think it won't be easy. Finally the question. Would you recommend Doodle to me? I like Kotlin and I like Doodle, but there is not much information. I mean I can't just find an answer on stackoverflow for my newbie question. And one more question. Do you have a group in Telegram or any other messenger for a Doodle community? Thank you very much for your reply

Hello doodle-devs. I want to experiment with doodle. I want to build a beautiful web-ui for someone who takes old jewelry and reshapes it to designs worked out between the artist and the jewelry owner. Every thing is done face-to-face, and she would like to be able to move a lot of this work on-line. I was thinking doodle could be very useful in rendering 3d images for clients to gawk at, while they go back and forth with the artist to get the designs just right. I'm motivated to spend some time figuring out how to work with doodle, but have some questions before I dive in. Some background: I'm new to Kotlin, but old (very) in Java. My UI (styling) chops are horrible, but server side (incl web-app, rest), and code organization skills are good. My questions: 1) I see the last check-in on the project was two months ago, and there are four contributors. "Two months ago" is pretty recent, but I wonder, and ask,

is the project really active?

2) Many of the UI components don't render until I click the "Usage" link, then go back to "Demo". https://nacular.github.io/doodle/docs/ui_components/overview The ony Animations demo that renders is the #key-frames demo. https://nacular.github.io/doodle/docs/animations https://nacular.github.io/doodle/docs/animations#key-frames

Are there known issues about many of the demos not rendering?

I know the project is young and you say there are / will be bugs, and they could be due to other reasons, i.e., browser extensions? OS (Linux) related? PEBKAC? Regardless, I'm still interested. 3) I'm particularly interested in the doodle rendering and animations -- no CSS!?! Did I mention no CSS!?! Do you think there is a chance that any of the jewlry maker's photoshop chops transfer to any aspects or concepts behind doodle code supporting image design, rendering, and/or animations? 4) Finally, can I "Build a full-stack web app with Kotlin Multiplatform",

using only the doodle
	ui-components I mentioned in item (#3 rendering and animations)?

https://kotlinlang.org/docs/multiplatform-full-stack-app.html In other words, I want to build a Kotlin KMM system (first for web, then mobile,) with a small number doodle widgets, not a a full blown "doodle system". Does that make sense? Or do I have to go "all in"? That is probably a dumb question, due to my lack of Kotlin chops. My java experience tells me "of course" I can use just the doodle widgets I need in the web views that need them, but ask anyway. (You can laugh.)

Hey folks. I just published 0.9.1-SNAPSHOT and would love to get some feedback before a full release. You can try it out by pointing to `maven { url = uri("`https://oss.sonatype.org/content/repositories/snapshots`") }` Here's what's included so far... New PopupManager You can now present top-level Views that will cover all other existing ones in a safe and reliable way using the new

PopupManager

. Before, you could make custom popups by directly adding items to the

Display

. This worked in many cases, but had a lot of limitations. For example, Views added this way would be affected by any

Layout

on the

Display

, which meant you couldn't control these Popups as easily. Also, new Views added to the

Display

after a custom popup was shown could overlay the popup. So there was no way to guarantee that a popup remained the top-most View. The new PopupManager fixes these limitations and provides a simple API for showing popups. Any View Can Be A Popup The PopupManager's API works with

View

, so you can make anything a popup. Simply do the following:

popupManager.show(myView) {
    it.center eq parent.center
}

// ...

popupManager.hide(myView)

Views that are shown as popups will automatically become top-level (being removed from their existing parent if already displayed) and sit above all other existing Views. Hiding a popup removes it from the

Display

, but it won't return the View to a previous parent if it had one. Popup Layouts Popups are shown with layout information directly. There are two ways to show a popup: relative to the

Display

, or relative to another

View

and the

Display

. There is an API call for each: Here,

myView

is positioned with only a "reference" to the Display (parent).

popupManager.show(myView) {
    it.center eq parent.center
}

But sometimes a popup needs to be positioned relative to another View. This shows how to place

myView

so it tracks the bounds of

someView

. The PopupManager will handle keeping the popup aligned with

someView

.

// myView is positioned with only a "reference" to the Display (parent)
popupManager.show(myView, relativeTo = someView) { popup, anchor ->
    <http://popup.top|popup.top>     greaterEq 0                             // Popup top-left always visible
    popup.left    greaterEq 0                             // Popup top-left always visible
    popup.width.preserve                                  // don't shrink popup
    popup.height.preserve                                 // don't shrink popup

   (popup.right   lessEq    parent.right ) .. Strong      // stay in parent as long as doesn't compress popup
   (popup.bottom  lessEq    parent.bottom) .. Strong      // stay in parent as long as doesn't compress popup 
  
   (<http://popup.top|popup.top>     eq        anchor.bottom + 10) .. Medium // follow anchor, as long as stronger constraints not in conflict 
   (popup.centerY eq        anchor.centerY    ) .. Medium // follow anchor, as long as stronger constraints not in conflict
}

More Powerful Text Rendering Text Alignment There is a new

TextAlignment

enum that controls how wrapped text is displayed within its margins. This is a replacement for

HorizontalAlignment

, which currently uses

Left

,

Right

(instead of

Start

,

End

) and does not support

Justify

. You can justify text by doing the following:

canvas.wrapped(
  text,
  at          = Origin,
  leftMargin  = 0.0,
  rightMargin = width,
  alignment   = TextAlignment.Justify,
  fill        = Black.paint
)

canvas.wrapped(
  styledText,
  at          = Origin,
  leftMargin  = 0.0,
  rightMargin = width,
  alignment   = TextAlignment.Justify,
)

Letter, Word, And Line Spacing You can now control the way letters, words and lines are spaced when rendering text. Letter and words spacing can be provided to the text rendering methods on

Canvas

using the new

TextSpacing

class. This information can also be passed to

TextMetrics

when measuring text.

Label

also has support for both letter and word spacing. Line spacing can also be specified whenever you deal with wrapped text. APIs •

Rectangle.toPath

that allows specifying each corner radius • Exposing

insets

in

simpleTextButtonRenderer

function •

repeat

and

loop

animations can now have delays •

Canvas

can now render wrapped text with custom line-spacing •

Label

now has

lineSpacing

property which controls how it displays wrapped text • Animatable Properties are no longer restricted to use within Views • New method to create

Ellipse

and

Circle

by inscribing within

Rectangle

• New

Circle.diameter

property • New constructor for

StyledText

that takes a

String

and

Style

Accessibility • Browser ◦

Button

now sets

accessibilityLabel

to its

text

if no label is already provided ◦

HyperLink

with native behavior will now apply aria-label to the anchor tag using the HyperLink's text when the

AccessibilityManager

is present Fixes | Improvements • General ◦ Bug with empty AnimationBlock when created during active animation ◦ Wrapped text not correctly aligned ◦ Bug in

FilteredList

iterator.remove ◦

CommonLabelBehavior

no longer provides an x offset for wrapped text since the alignment is handled correctly by

Canvas

◦ Edge case where layout can hang b/c of double imprecision ◦ Issue where

CommonLabelBehavior

overrides

Label.foregroundColor

on uninstall ◦ Bug where incorrect item could be removed from

RenderManagerImpl.pendingLayout

◦ Bug where some View properties lost during behavior install ◦ Bug where some views not cleaned up by

RenderManager

◦ Bug in pointer handling when

Display

transformed ◦

ToggleButton

no longer relies on being displayed to listen to its model ◦

StyledText.text

now returns correct value • Browser ◦ Misidentifying elements as native scroll panels led to incorrect pointer behavior ◦ Reuse instances for linear/radial gradient paints ◦ Reusing clipped images ◦ Hyperlinks now open in new tab ◦ Shadow render bug when using SVG ◦ Element sometimes not reused when drawing shadow ◦ Remove overflow on element w/ shadow ◦ Fixed wrapped

StyledText

rendering ◦ Wrapped

StyledText

now supports text decoration on previously unsupported cases • Desktop ◦ Fixed SVG image file loading issue ◦ Fixed rendering of images with radius ◦ Issue where font families weren't being properly tracked and therefore incorrectly applied ◦ Incorrect paragraph width measurement

I want to build a very simple UI for users who only use their smart-phones for internet access (almost exclusively iPhone). But, I understand "SVG capabilities on mobile browsers are not equal to SVG capabilities on modern desktop computer browsers, and mobile browsers may support fewer SVG features, or may have slower performance when rendering complex SVG graphics. Additionally, mobile browsers may have different support for SVG-related technologies, such as animation and scripting, than desktop browsers." -- ChatGPT That said, do you think it is not worth attempting to build a doodle UI for iPhone Safari that does basically one thing, varying only the images (pictures) displayed. This is the use case: - Display an image of a ring (jewelry) with an empty setting in the middle of the page. - Display a vertical strip of small images (stones) on the right side of the page. As the user moves her finger down the sliding, vertical strip of stone images, the image at y-coordinate=0 appears in the ring's setting (in the center of the page). The only variations of this use case are displaying a different model ring (or necklace) in the center of the page, and different stones or pendants in the right-hand-side vertical (sliding) strip. Do you think doodle-svg could do this in iOS Safari? Do you think I should even try?

What I did not do before asking that question is trying to run your tutorial demos on an ipad & iphone. Oops. Sorry 'bout that.

Hey @Stan. I think this should be doable w/ Doodle and it should work just fine on Safari mobile. Everything you mentioned is already supported by Doodle and works well on mobile. All the tutorials you see and the docs use SVG when necessary to render (i.e. https://nacular.github.io/doodle/docs/rendering/overview#pattern-paints). These all work as expected on mobile Safari.