https://kotlinlang.org logo
#doodle
Title
# doodle
s

Stan

03/02/2023, 1:18 PM
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",
Copy code
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.)
a

ayodele

03/02/2023, 3:10 PM
Nice of you to pick doodle. 1. It's VERY active. And the framework is stable. 2. If any of the views don't render, you didn't give it a
size
or
behavior
. I've not used animations that much but you can post issues here. 3. Uhm. @Nick will be the best to answer that 4. Yes, but just web and desktop FOR now.
n

Nick

03/02/2023, 4:09 PM
Hey @Stan! Glad to hear you’d like to try Doodle. 1) The project is still very active. In fact, 0.9.1 is in the works now. 2) The issues you call out have never been reported, so thanks for sharing. This might be a result of the OS/browser combo. Can you share which browser you’re using, and a quick screen recoding to show the behavior? 3) Not sure about this. Doodle is still a bit young, so it doesn’t have any built-in support for some of the tool chains that might exist already for animations. I’ve been thinking about how I might support Lottie for example. That would allow animation creation outside the code. But no concrete plan for this right now. That said, Doodle should be able to work with a range of image formats and is flexible enough to do a lot with animations. 4) Yes-ish. As Joe mentioned, Doodle is a multi platform framework. And a single app can work on both web and desktop, with shared ui and biz logic. But there isn’t mobile support yet.
r

Ruckus

03/02/2023, 5:32 PM
For 2), I have the same issue. I'm using Firefox 110 on Fedora 37. Unfortunately I cannot provide a recording at the moment.
I also have an issue with focus. If I load one of the textfield demos, open the side pane and click any of the checkboxes, I can no longer add spaces to the text field. Even when I click on it and try to type, whatever checkbox I clicked last keeps the focus and toggles whenever I hit space, consuming the event and not adding a space to the text.
s

Stan

03/02/2023, 5:41 PM
Replying to a few of your questions...
• OS/browser combo: Ubnutu w/ Firefox & Chrome (I'll be back later with screen-shots)
• 3) Not sure about this.... Just had a chat with the lapidarista, who has little in the way of technical skills with image manipulation, but has some friends who are, and she's getting familiar with something called Rhinocerous. I think she means this: https://www.rhino3d.com
• 4) But there isn’t mobile support yet. I was going to be focusing only on web anyway, for quite some time. That will have to be enough for her and her customers as I have too much to learn already. I was hoping to eventually get to building mobile uis w/ KMM, with the common, shared biz-logic, (like ktor, rest, etc).
• @ Ruckus T-Boom (I like yr name): I might just use doodle for image rotation, lighting, superimposing small imgs on big ones -- like all the different pendants that can be placed on the necklaces -- background colors, 3d(?), just img manipulation and superimposition. Then use old, conventional html.index importing kotlin-js for inputs, buttons, etc.
I want to avoid having to tweak complex css to manipulate images, or I have already failed.
I'm still uncertain if doodle is the right tech for what I want to do, even if all the demos did work on Linux. BTW: most of the end-users will be on Windows & Mac.
I promise screen recordings later today or tomorrow.
.stop.
Here are screen recordings, hopefully not too large to upload...
I could not get Animations to work, excepting one of them. Am I doing something wrong?
Animations-Ubuntu22-Firefox-PrivWindow.webm.webm
I could see ui-components if I click on the code (usage) link, then return to demo...
UI-Components-Ubuntu22-Firefox-PrivWindow.webm
Pretty damn cool... Hope I can make it work. I know I can understand the code; I know I could never understand the CSS to do these things.
n

Nick

03/03/2023, 1:58 AM
@Stan this is really interesting. Thanks for reporting! The docs themselves are a mix of React (Docusaurus and Doodle). The Doodle apps are embedded in React components (the tabs). I found that there are bugs w/ this integration based on how/when React initializes the tab content. So I'm curious if you can reproduce similar issues with the apps in the Tutorials site that are not within a React tabbed control. Or with their full-screen versions (accessible via links in each tutorial).
@Ruckus I'll take a look at the issue you are having as well. Thanks for reporting it.
s

Stan

03/03/2023, 1:59 PM
@Nick I cannot promise (today) to get to "reproducing similar issues with the apps in the Tutorials site that are not within a React tabbed control." But I will try. If not, then Sunday at latest.
n

Nick

03/03/2023, 4:03 PM
@Ruckus, the issue you reported is valid. The reason it happens is actually not a bug, and due to the way I developed the doc apps. I migrated the apps to use 2 apps when I released 0.9.0. There is an outer app and a nested one for the component being demoed. The reason for this was to make the code for the nested app isolated from the wrapper that provides the side panel. This was meant to help when I move the code for these apps to OSS; since they are all "pure" now, without the noise of the panel (which is really just a way to configure them). This approach handles focus management between the two apps fine (as long as the inner app uses the FocusManager). But some of the apps, like the TextField ones, don't. That means the outer app retains focus even after you click onto the TextField. The fix is purely within the doc apps themselves. They will now give up focus whenever the inner app is clicked. That fix is going to ship today. Thanks again for reporting this. 🙏
r

Ruckus

03/03/2023, 4:08 PM
Ah that makes sense. Thanks for the update, and for the usual shockingly quick fix 😀
n

Nick

03/03/2023, 4:32 PM
Fix is live.
s

Stan

03/03/2023, 4:42 PM
@Nick RE: "So I'm curious if you can reproduce similar issues with the apps in the Tutorials site that are not within a React tabbed control. Or with their full-screen versions (accessible via links in each tutorial)."
I did not have any problems with the Tutorials site, yesterday or now.
n

Nick

03/03/2023, 4:44 PM
K, so seems to be an interaction with React. I’ll try to repro on my end with Ubuntu VM. Plan to try 22.04.
s

Stan

03/03/2023, 4:47 PM
@Nick RE: "Fix is live." I just looked the animations and component lib catalog pages, and there is no change in the behavior I reported yesterday. (But I'm not sure that fix is live means the src repo's main branch has the fix, but not the live demo site.)
Anyway... you said you were going to fire up an Ubuntu 22.04 vm. I too thank you for quick response!
n

Nick

03/03/2023, 4:51 PM
The fix was for the focus issue Ruckus reported. Will be looking into your issue.
r

Ruckus

03/03/2023, 5:01 PM
Can confirm. Working fine now. Thanks again!
n

Nick

03/06/2023, 3:51 PM
@Stan the issue you reported on Linux should now be fixed. Turns out it was a font loading problem.
r

Ruckus

03/06/2023, 4:14 PM
I can't speak for @Stan, but the it does appear fixed for me on Fedora. Thanks!
n

Nick

03/06/2023, 4:22 PM
Sounds good. The doc apps were using a font that didn't load well on Linux. So needed to provide a fallback.
s

Stan

03/06/2023, 4:38 PM
Yes! All fixed! Lovely.
Demo forms and form controls look good too.
6 Views