Trying to create/display a button in desktop app | Deno | Page 1

vestal violet Jul 7, 2023, 8:39 PM

#

Hello everyone, I felt down the rabbit hole of trying to build some desktop app's GUI.

I'm using the dwm lib from Deno Windowing, and I managed to open a new window following the tutos. I went through the imgui2.ts example which showcases lots of widgets, from buttons to more advanced structures. Still I can't seem to understand how to create a simple widget, be it a button, a checkbox, or anything else..

The file itself contains the code to print a cube and make it rotate in 3dimensions and the demoWindow but nothing more. I then went to the showDemoWindow() definition; to the skia canvas repo, and many other resources. I lost my mind ending in the c++ repository of ocornut's imgui but more than probably I missed something on the way.

I think the context thing is what makes me bug somehow.. there is the window context, and the canvas context, which are different, I suppose.. right? right ?
So I probably should act on the canvas context to build the GUI.

My code crashes instantly if I un-comment the 2 commented lines - the rest of it is the same as imgui2.ts, I just removed the rotating cube part pretty much. That is the window gets opened then instantly closed.

If someone could point me to the right direction it would be awesome ❤️

Also, sorry for the noobism lmao x)

PS: should I tag dwm's repo maintainers ?

#

//main.ts

import { getPrimaryMonitor, getProcAddress, mainloop, WindowCanvas } from "../lib/x/dwm-main/ext/canvas.ts";
import { createContext, destroyContext, imgui, ImVec2 } from "../lib/x/dwm-main/ext/imgui.ts";
import * as gl from "https://deno.land/x/gluten@0.1.3/api/gles23.2.ts";

const win = new WindowCanvas({
    title: "my window",
    width: 1024,
    height: 768,
    resizable: true,
})
const monitor = getPrimaryMonitor();

gl.load(getProcAddress);

addEventListener("close", (_event) => {
    destroyContext(imguiContext);
});
  
const imguiContext = createContext(win.window);

imgui.implOpenGL3NewFrame();
win.window.position = {
    x: (monitor.workArea.width - win.canvas.width)/2,
    y: (monitor.workArea.height - win.canvas.height)/2,
};

const ctx = win.ctx;

const position: ImVec2 = new ImVec2( 50, 50 );
const size : ImVec2 = new ImVec2( 100, 30 );
// imgui.setCursorPos(position);
// imgui.button("mybutton", size);

await mainloop(() =>{
    gl.Clear(gl.COLOR_BUFFER_BIT);
    win.draw();
    imgui.implGlfwNewFrame();
    imgui.newFrame();
    imgui.showDemoWindow(null);
    imgui.render();
    const drawData = imgui.getDrawData();
    imgui.implOpenGL3RenderDrawData(drawData);
});```

main ridge Jul 7, 2023, 8:48 PM

#

This is an older attempt, but has all the required elements of a GUI framework based on DWM and Skia-canvas.
https://github.com/nhrones/SkiaSurface/blob/master/readme.md

vestal violet Jul 7, 2023, 9:01 PM

#

I saw it during my searches yesterday I think, but I already was too overwhelmed to try harder at that point. At first glance it looks even more complicated, adding more terminology such as views and viewmodels.

#

I'm not sure to understand the integration of imgui firstly I have to say..

ebon kestrel Jul 7, 2023, 9:24 PM

#

2D is doable, but 3D is quite tough to do from scratch. People usually use libs like threejs, Babylon or others

main ridge Jul 7, 2023, 9:25 PM

#

ebon kestrel 2D is doable, but 3D is quite tough to do from scratch. People usually use libs ...

Most Graphical User Iterface is simple 2D.

vestal violet Jul 7, 2023, 9:30 PM

#

Yeah I want to build some 2D interface.. some buttons, checkboxes, dataTables.. quite basic I guess but still struggling xD From what I understand so far, the viewmodel is a sort of middleware

main ridge Jul 7, 2023, 9:31 PM

#

Why do you want a Desktop App? You seem to understand Web Apps. Why not just write a PWA?

#

https://web.dev/what-are-pwas/

vestal violet Jul 7, 2023, 9:37 PM

#

Hm.. actually I started this project learning fresh but it doesn't fit my needs. I want a desktop app mainly to rely on deno as much as possible, using "native" windows and not having the need for a browser to run the app..

main ridge Jul 7, 2023, 9:41 PM

#

Perhaps Deno TUI 2.0 would work for you.
https://github.com/Im-Beast/deno_tui
Otherwise why not just write a native app? Why do you need Deno?

ebon kestrel Jul 7, 2023, 9:45 PM

#

I guess for the same reason why people use Electron

vestal violet Jul 7, 2023, 9:46 PM

#

main ridge Perhaps Deno TUI 2.0 would work for you. https://github.com/Im-Beast/deno_tui Ot...

The app will have a backend part managing websockets connection to display live data at some point

main ridge Jul 7, 2023, 9:47 PM

#

Any native app can do that.

vestal violet Jul 7, 2023, 9:48 PM

#

wdym by native app ?

main ridge Jul 7, 2023, 9:49 PM

#

A Windows app written in C#, An android app writen in kotlin, An IOS app written in swift. A react native app writen in js.

#

From what you're describing, a Fresh app would work nicely.

vestal violet Jul 7, 2023, 9:54 PM

#

yeah but fresh is for web apps ? you still need a browser to read your project

#

which I don't want

#

"native" deno app in plain ts would just be awesome, why shouldn't I consider it ?

main ridge Jul 7, 2023, 9:56 PM

#

vestal violet yeah but fresh is for web apps ? you still need a browser to read your project

It doesn't exist!

vestal violet Jul 7, 2023, 9:58 PM

#

what is not existing ? if you can open a window with the same syntax accross different os's it definitely exists (?)

#

you made a dice game, so it exists

main ridge Jul 7, 2023, 10:00 PM

#

But you didn't like the framework?
Try pasting this in your terminal.

deno run -A --unstable https://raw.githubusercontent.com/nhrones/DWM-GUI-New/main/Examples/TextArea/main.ts

vestal violet Jul 7, 2023, 10:02 PM

#

Not that I didn't like it, it's more I felt exhausted trying to understand all the concepts from windowing to UI.. Looking into lots of different resources that are overlapping each others

main ridge Jul 7, 2023, 10:03 PM

#

Yes, that's what a framework is! The thing about the DWM-GUI is that it is pure Deno Typescript!

vestal violet Jul 7, 2023, 10:04 PM

#

yeah I saw your post in dev-desktop and read your blog about it too

#

"blog"

main ridge Jul 7, 2023, 10:06 PM

#

That was the old framework! I haven't completed/released the new one yet. It will be quite simple to use! as simple as html/css. This framework is no more complicated than Fresh. Have you studied the Fresh framework?

vestal violet Jul 7, 2023, 10:12 PM

#

As I said , I'm a newbie at this. I'm "used" to scripting in python and javascript, but not really a dev. I'm learning typescript on the fly.. Since I figured that python wouldn't fit my needs and I would need a backend in Node.js (but opted for Deno since I have no affinity with Node).

I like the approach of your skiasurface framework, it is very similar to fresh in the sense of it keeps the code very modular, using sort of signals to communicate from UI (frontend) to datalayer(backend) , through a viewmodel (middleware)

#

Yes I spent few days on fresh and I have to say it is very good for what it is supposed to do, it definitely would be my fit if I opted for a web app 🤪

main ridge Jul 7, 2023, 10:14 PM

#

Do you have any experience with HTML/CSS?

vestal violet Jul 7, 2023, 10:16 PM

#

experience is not the proper word but I do know some basics yeah

main ridge Jul 7, 2023, 10:16 PM

#

I have a super simple Fresh example that make help you understand how it works.
https://nhrones-simple.deno.dev/

#

Anyway. Good luck with your adventure!

vestal violet Jul 7, 2023, 10:28 PM

#

thank you, do you have any ETA for your upcoming framework ?

#

if it offers the ease of fresh but to build desktop app, it would be insane fr

junior chasm Jul 7, 2023, 10:36 PM

#

I'm cooking something but if you're hoping for an electron alternative it'll take some time before it's stable

main ridge Jul 7, 2023, 10:39 PM

#

vestal violet thank you, do you have any ETA for your upcoming framework ?

My framework is just a toy. It will never be as capable as a Fresh app. I don't know why your resisting deploying in a browser, but just remember that browsers are everywhere! That means your app could run in places even a native app would struggle with. I strongly recommend you learn web apps; especially Fresh as it delivers a highly efficient Developer eXperience (DX).

vestal violet Jul 7, 2023, 11:15 PM

#

junior chasm I'm cooking something but if you're hoping for an electron alternative it'll tak...

I heard of it but never used it so I do not expect anything specific xD

vestal violet Jul 7, 2023, 11:24 PM

#

main ridge My framework is just a toy. It will never be as capable as a Fresh app. I don'...

I left fresh because I don't want a web app. browsers evolve and I think it would be less painful to maintain in the future if I don't use them at all. Anyway from what I understood skiacanvas is the way chrome is handling the display, correct me if I'm wrong? I still could change my mind later on and reconsider it.. acquired knowledge won't be lost ( ? )

main ridge Jul 7, 2023, 11:59 PM

#

Learn Fresh! You'll never regret it! You'll first need to learn a little JSX. Don't just copy/paste. If you don't fully understand something, stop and take the time to learn it. The web is full of useful learning recourses. Don't be in a hurry. Deno Fresh on Deno Deploy gives you everything you'll need including a free database.

vestal violet Jul 8, 2023, 12:01 AM

#

Fresh doesnt fit my needs bro as I already said x)

#

it can be an inspiration for architectural style of my app, but I don't need the framework

main ridge Jul 8, 2023, 12:03 AM

#

https://reactnative.dev/

React Native · Learn once, write anywhere

A framework for building native apps using React

vestal violet Jul 8, 2023, 12:34 AM

#

it looks interesting, but maybe too complete x) I might be looking for something more vanilla or Idk

#

Ill continue the read for now 🙂 does it integrate easily with deno ?

ebon kestrel Jul 8, 2023, 12:36 AM

#

junior chasm I'm cooking something but if you're hoping for an electron alternative it'll tak...

That could be huge for Deno. Looking forward to it!

versed hill Jul 8, 2023, 12:41 AM

#

I'm in the same boat, I think it is designed for mobile apps

vestal violet Jul 8, 2023, 1:09 AM

#

yeah well thats not what I need

#

I would prefer to use fresh directly

#

btw thanks for making your desktop stuff private 🥲 it will reduce my possibilities.. back to the dimgui rabbit hole now, the never ending loop xD

#Trying to create/display a button in desktop app