#tray

1 messages · Page 1 of 1 (latest)

halcyon lantern
#

Tauri doesn't expose an API that lets you do this but if it is possible through system APIs then it is possible in Rust with enough effort.

#

I've never seen any apps with icons capable of that on Linux or Windows. I'm pretty sure the battery icon on macOS is capable of it so, in theory, it should be possible for other apps too.

sage drum
#

ah thats very a shame, you can easily do it on swift its a native feature of osx i think im not sure how it would look on windows.

#

actually you can do this in electron

halcyon lantern
#

That's interesting. Do you have an example app for Linux or Windows that you can point me to?

sage drum
#

im looking for the example i had rust implementation to add an icon

#

cant find it back think in showcase

#

even looked at the code ugh really cant find back atm

halcyon lantern
sage drum
#

ah wrong

screenshot.png
#

not actually "beside" the icon

#

in electron its possible but the problem is without this featuer i cannot even continue with tauri PepeHands

#

since my app would be a indicator for surfing conditions and i need those data beside the icon and also update it from time to time

#

electron was quite terrible to be fair i really love tauris structure much better

#

this is a quick and dirty demo i did with electron tray

Screenshot_2023-06-30_at_04.30.32.png
#

the grid + 20 is mine

halcyon lantern
#

Tauri doesn't have much platform-specific API unless there's a major need for it. I definitely think a plugin for the tray icon title would be great but it would only work on macOS which feels very much counter to Tauri's cross-platform goals.

#

That's not to say it won't ever happen.

sage drum
#

hmm no workarounds? such a thing is complex to create?

#

then i just have to cancel this whole tauri thing and just the *gly electron instead just to be able to ship

#

like perhaps if i would with some help be able to do this myself i would be happy to contribute not sure on the efforts if it would be a prox a few hours a day a week

halcyon lantern
#

Do you know Rust?

sage drum
#

I used it before but call me novice rust user im more into ts etc

halcyon lantern
#

This would definitely require some advanced Rust knowledge as you would have to interact with the macOS API directly.

#

That typically involves raw pointers, bytecodes, etc.

sage drum
#

seems like not something that is very enjoyable. tauri is so amazing shame this thing is such a dealbreaker for my purpose 😦

#

ah right, that would be probably something im def not going to enjoy i have no idea on how you would approach never done such thing icb

#

i started in swift but it wasent pleased moved to electron and then came across tauri and thought this is it ill build my app on this one.

#

perhaps there is some hack workaround.

#

or perhaps revert back to swift. maybe swift can compile to windows too atleast leaving linux out of the eq if not supported sup-optimal though

#

i was looking for an example of icon | text and could not find anything now we know why

halcyon lantern
#

I might have been wrong, I just took another look at the Rust code that Tauri uses for managing the tray and it has "set_title" (https://docs.rs/tray-icon/latest/tray_icon/struct.TrayIcon.html#method.set_title) but the description says "tooltip" which I understand as only showing when you hover your mouse. I will make a quick test on Linux to see. It says unsupported on Windows though, unfortunately.

sage drum
#

i dont think windows has any indicators beside the icon at all? i could check

halcyon lantern
#

I have never seen a Windows app with anything but a square border around the tray icon.

sage drum
#

i dont think windows have a indicator

Screenshot_2023-06-30_at_04.50.51.png
#

maybe a widget feature that tauri could expose

#

this is a pesky thing to figure out and a big dealbreaker

#

i could consider building a swift version for osx and use something else for windows but it would kinda suck having 2 codebases

#

or we have to find a solution for this problem in tauri ;p

tawdry cloud
#

I dont know if Tauri would ever expose something like that, since technically doesn’t actually care about your UI. It just provides rust bindings and platform-specific stuff

#

Like for the menu bar thing on Mac, the most I could see being done is facilitating the ability to write some Swift that does the rendering

sage drum
#

swift inside rust / tauri ?

#

seems compiling swift to windows is also not possible solution swift ui and osx specific sdks are not ported eithe

tawdry cloud
#

Swift alongside your rust, since that menubar stuff is rendered using UIKit elements

sage drum
#

is that possible? interesting

tawdry cloud
#

Sure yeah, i made a whole crate for it haha

sage drum
#

it does look better on osx anyway althought thats preference, i like the native ui better but thats to be expected

tawdry cloud
#

Even if u could do swift on windows, it probs wouldn’t help since windows would have its own specific way to do menu item UI

sage drum
#

so you basically steal the swift ui kit elements and render them with rust then wrapp your regular app in very blatently speaking from me as total newbie

tawdry cloud
#

Not quite, the way I’d do it is write some swift code that does all of the menubar item rendering, write some setup function in swift that makes it all work, and then call that setup function from swift

#

Not sure if it’d really be that easy but something like that might work

sage drum
#

well just the temperature indicator would be good enough ;p

#

but i was just very curious about the possibilities

tawdry cloud
#

As we’ve learned the hard way at Spacedrive, building a good desktop experience involves a lot of splintering your code into platform-specific bits. Most of our app is rust + js but we have a decent amount of swift too and will have more in future

sage drum
#

ah cool your the guys from spacedrive i installed it and tested it loved the onboarding backgrounds and the tabs

#

i wondered what ui framework they where but havent checked yet.

tawdry cloud
#

Ooo glad u like it haha, we use react with a lot of custom styling

sage drum
#

but that was my idea like making 2 trays for windows and mobile or basically the default tray component does that

#

perhaps ican fill a github issue with request might be not that hard for one of the die-hard coders maybe somene finds it interesting or i can work at it if i have some documentation figure it out 80% and then some more expierienced users can finalize it where im lacking skill dunno

#

its just a menu text but its very important to see the data without having to open the tray

tawdry cloud
#

Yeah if Spacedrive needed menu bar stuff we’d just write whatever Swift was necessary to make it happen, it’s definitely not possible in JS and probably not possible in Rust

#

Though there are rust UIKit bindings

sage drum
#

yes you mentioned before but how do you use swift for osx specific in tauri app then?

#

as if i undertand you correctly you mean this would be possible?

tawdry cloud
#

Not saying it is, just that it might be

#

We’d expose some functions from Swift to Rust that would allow controlling the menubar ui

#

And then conditionally enable that code with cfg blocks

#

We already do so a fair bit if you check out our desktop app code

sage drum
#

ok but not in need for a app icon indicator yet 😉 haha

#

i really have to dive bedd im making sick insane hours like all night

#

hope to figure out a sol tomorrow else i just going to build a swift version for mac and drop the whole windows linux for now

#

its really pity since osx is the only one needing it

#

i mean supporting it probably not sure about linux

tawdry cloud
#

Are you going to build the main UI with a webview?

sage drum
#

im not sure its react for now with tailwind i go probably

tawdry cloud
#

Good choice haha

sage drum
#

so yes webview i would like it more native looking but understand thats not really possible

tawdry cloud
#

Id say you can make stuff feel pretty native on Mac if you don’t use the pointer cursor on links and buttons and add some window transparency

sage drum
#

yeah its simple app so tauri would have been amazing but its key feature to have that info next to the icon

#

else its really not that usefull you have to click on the icon each time

tawdry cloud
#

Hey I wouldn’t count Tauri out for that yet, you can always add some custom Swift

#

Just gotta figure out if the Swift APIs exist for it

sage drum
#

really have to run much appreciated if you have some pointers on how to approach would love to dive into it perhaps i can make for osx only a call to them and still be able to render it

tawdry cloud
#

Yeah I’d be surprised if that’s not possible, don’t have much info on the menubar APIs tho, I’d imagine there’s a way to customise the menubar for the current NSApplication or something

tawdry cloud
halcyon lantern
vital blaze
sage drum
#

It would be really cool if this would be possible thank you guys and for holding up with me as newbie asking that one thing that is not easy possible

#

What would be the best approach is there any way i can contribute to this or use a “hack” for now to get this implemented before the v2?

sage drum
vital blaze
#

using tray-icon directly may actually work 🤔

sage drum
#

I see no property for text beside the icon?

#

The next challange would be how to update the temperature text while the app runs

#

Not sure if it has access or how it gets rendered

vital blaze
sage drum
#

I thought i update it every 10 minutes with some “cronjob”

#

Not behind the desk have to study it

sage drum
#

Idea if it would support updating the contens also? I guess the application could somehow update a const that fills the temperature title object or re render it at certain intervals?

#

Really cool from a techincal point of view you can interact with the os ui library

vital blaze
sage drum
#

i really need to dive the docs, so i add an use statement and then run carbo build to install the package does that work for this tray package to?

vital blaze
#

well, that's the start yes. a use statement really only puts it into scope like import in javascript

#

it doesn't actually do anything

sage drum
#

i look the docs i also had to add them to cargo deps somewhere i recall

vital blaze
#

yep, that's the equivalent to adding something to package.json

sage drum
# 
use tao::event_loop::{ControlFlow, EventLoopBuilder};
use tray_icon::{
    menu::{AboutMetadata, Menu, MenuEvent, MenuItem, PredefinedMenuItem},
    TrayEvent, TrayIconBuilder,
};
// end custom imports


fn main() {

    let path = concat!(env!("CARGO_MANIFEST_DIR"), "/assets/custom_icon.png");
    let icon = load_icon(std::path::Path::new(path));```
#

or do i again use a default tauri method for loading that icon which i have not included a use statement in my code

vital blaze
#

doesn't matter if you choose the tao or winit example

#

you don't use that part of the example (the event loop) anyway

sage drum
#

ah ok for now i just happy if it runs haha 🤣 will dive the docs for cross os specifics later. then i need to add tao to cargo.toml deps. which i did used latest version. but then ````error: failed to select a version for gdk-sys.
... required by package webkit2gtk v0.19.1
... which satisfies dependency webkit2gtk = "^0.19.1" of package tauri v2.0.0-alpha.9
... which satisfies dependency tauri = "^2.0.0-alpha.9" of package tauri-plugin-shell v2.0.0-alpha.0
... which satisfies dependency tauri-plugin-shell = "^2.0.0-alpha" ```

#

these are my deps [dependencies] tauri = { version = "2.0.0-alpha", features = [] } tauri-plugin-window = "2.0.0-alpha" tauri-plugin-shell = "2.0.0-alpha" serde = { version = "1.0", features = ["derive"] } serde_json = "1.0" tray-icon = "0.6.0" tao = "0.16.2" do you have an idea how i could resolve this one

vital blaze
#

then i need to add tao to cargo.toml deps.
No, don't.

#

tao is used inside tauri, if you add it on top it won't work

sage drum
#

not? oh i assumed i had to install it specific cause i got an error the icon method did not exists.

#

i see i also defined serde double , removing that

vital blaze
sage drum
#

no i got let icon = load_icon(std::path::Path::new(path)); not found in this scope

#

no nevermind my mistake ;p

#

serde and serde_json are ofcourse 2 seperate packages

vital blaze
sage drum
#

totally missed that one too also fixed its quite danting this. i try do ask not to much to soon sorry about that.

#

but now i only get this ```error[E0433]: failed to resolve: use of undeclared crate or module image

vital blaze
#

it's not an internal dep in this case

#

the load_icon function uses it

sage drum
#

adding that image to my cargo build then i end with a good build but then it complains again ``` use tao::event_loop::{ControlFlow, EventLoopBuilder};

vital blaze
vital blaze
sage drum
#

ok all changed. ended up with this ( also removed the event loop code ) ```// Prevents additional console window on Windows in release, DO NOT REMOVE!!
#![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]

#![allow(unused)]

// start custom imports
use tray_icon::{
menu::{AboutMetadata, Menu, MenuEvent, MenuItem, PredefinedMenuItem},
TrayEvent, TrayIconBuilder,
};
// end custom imports

fn main() {
let path = concat!(env!("CARGO_MANIFEST_DIR"), "/icons/icon.png");
let icon = load_icon(std::path::Path::new(path));

let tray_menu = Menu::new();

let quit_i = MenuItem::new("Quit", true, None);
tray_menu.append_items(&[
    &PredefinedMenuItem::about(
        None,
        Some(AboutMetadata {
            name: Some("tao".to_string()),
            copyright: Some("Copyright tao".to_string()),
            ..Default::default()
        }),
    ),
    &PredefinedMenuItem::separator(),
    &quit_i,
]);

let mut tray_icon = Some(
    TrayIconBuilder::new()
        .with_menu(Box::new(tray_menu))
        .with_tooltip("tao - awesome windowing lib")
        .with_icon(icon)
        .build()
        .unwrap(),
);

let menu_channel = MenuEvent::receiver();
let tray_channel = TrayEvent::receiver();

}

fn load_icon(path: &std::path::Path) -> tray_icon::icon::Icon {
let (icon_rgba, icon_width, icon_height) = {
let image = image::open(path)
.expect("Failed to open icon path")
.into_rgba8();
let (width, height) = image.dimensions();
let rgba = image.into_raw();
(rgba, width, height)
};
tray_icon::icon::Icon::from_rgba(icon_rgba, icon_width, icon_height)
.expect("Failed to open icon")
}

#

but then i end up with a crash like ``` Finished dev [unoptimized + debuginfo] target(s) in 0.51s
Assertion failed: (CGAtomicGet(&is_initialized)), function CGSConnectionByID, file CGSConnection.mm, line 422.

Process finished with exit code 0

vital blaze
#

that one isn't really clear, but i'd imagine it's because there's no gtk event loop running, mainly because you completely removed the tauri app

sage drum
#

ah that makes sense to..

#

so i have to include the tauri builder in a way that it loads the tray also

sage drum
#

its logical you have to define the tray and then add it to the tauri builder that is what i understand but with those docs its really unclear on the right syntax.

# 
// start custom imports
use tray_icon::{
    menu::{AboutMetadata, Menu, MenuEvent, MenuItem, PredefinedMenuItem},
    TrayEvent, TrayIconBuilder,
};
// end custom imports

fn main() {
    let path = std::path::Path::new(concat!(env!("CARGO_MANIFEST_DIR"), "/icons/icon.png"));
    let icon = load_icon(path);
    let tray_menu = Menu::new();
    let tray_icon = TrayIconBuilder::new()
        .with_menu(tray_menu)
        .with_tooltip("system-tray - tray icon library!")
        .with_icon(icon)
        .build()
        .unwrap();

    tauri::Builder::default()
        .system_tray(tray_icon)
        .plugin(tauri_plugin_window::init())
        .plugin(tauri_plugin_shell::init())
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
}```
#

the error ``` |
25 | / tauri::Builder::default()
26 | | .tray_icon()
| | -^^^^^^^^^ method not found in Builder<Wry<EventLoopMessage>>

vital blaze
#

but with those docs its really unclear on the right syntax.
but with those docs for a newbie this is undo-able
Well, the crate was not designed for direct use in a tauri app so the docs reflect that by not holding your hands when doing so.

#

and that same applies to the code itself, since it was not meant for this, there aren't any convenience functions/integrations, like calling tray_icon on the Tauri builder. Basically tauri and the tray will be mostly seperate.

sage drum
#

I tried to add them both but nothing tray like appears

#

What ehould i do then if i want the icon plus temp next to it??

#

I just want a working version dony mayter much else i have to switch back electron

sage drum
vital blaze
vital blaze
# sage drum I just want a working version dony mayter much else i have to switch back electr...

tbh just switch back then. v2 will use tray-icon under the hood so at that point it will also support text in the tray.
I don't have the time right now to make an example of tauri + tray-icon so if you're under time pressure you should just switch for now.
Also i said it may work, i never said it will work so there's definitly a chance that it just doesn't work if not tightly integrated into tauri itself

sage drum
#

Im using v2 yes

#

So i should just use the default tray in v2? Could you only tell me how i add a text then? Since it seems not documented or i source the sourcecode🙏

vital blaze
#

because in this context it's still the same as v1

sage drum
#

yeah can't wait i need to build this thing ;p when using v2 for adding the icon it says i need feature icon-png and icon-ico but seems not existant on v2 i think if i have just the correct impl it should work or else i just leave the featuer out then for now

#

this one on `tauri-build`, with features: `icon-png` but `tauri-build` does not have these features

vital blaze
sage drum
#

I added them like this [dependencies] tauri = { version = "2.0.0-alpha", features = ["icon-png", "notification-all", "shell-open", "system-tray"] } tauri-plugin-window = "2.0.0-alpha" tauri-plugin-shell = "2.0.0-alpha" serde = { version = "1.0", features = ["derive"] } serde_json = "1.0" but get a ```failed to select a version for tauri.
... required by package monitor v0.0.0 (/Users/jordan/Desktop/surfer/client/src-tauri)
versions that meet the requirements ^2.0.0-alpha (locked to 2.0.0-alpha.10) are: 2.0.0-alpha.10

the package surfer depends on tauri, with features: shell-open but tauri does not have these features.

#

perhaps i should use electron first 😅

vital blaze
#

followed the docs on tray perhaps they are not updated yet
Correct, at least notification and shell were moved to plugins (which is why you have tauri-plugin-shell in there) the docs pipeline can't handle multiple crates tho so it's still on alpha.8 or something

sage drum
#

could you tell me how i can just implement the tray correctly? else i just have to switch to electron which i really dont like

#

i have this obscure electron app that implements it, i could just use that as base but i really love tauri and need mobile versoins of several apps so i better invest in tauri. but this has been a bit of a headache guess im the only person who needs this feature so far. would make a cool demo though my surfer app

Screenshot_2023-07-03_at_14.02.55.png
vital blaze
#

the guide you linked above still works exactly the same. I just copy pasted what it said and ended up with: https://github.com/FabianLars/v2-tray which has a working system tray. Again though, this does not include the text! (couldn't test it anyway since i'm on windows)

sage drum
#

i see my mistake, i will not bother you with this further sorry. i just build it without the text beside the icon, if you might find it an interesting case and lateron find a solution or hack i could implement it would love to know ❤️

#

one - last resort thing is i could change the icon itself maybe with an indicator like show the wind conditions by replacing the icon on runtime - not sure if that is possible

halcyon lantern
#

I know a lot of weather apps on Windows mix the sun/cloud/rain with a thermometer that changes shade. Not the most accurate reading, but hovering or opening the app tells you the details.

vital blaze
sage drum
#

Fixed it with the set title think we can closr this down 🙏