How to have an application Icon with Elixir desktop?

Background

I am trying to have an Elixir desktop application, and I am using elixir-desktop-app as a starting point.

Problem

The only thing I want is to have an icon represent my app. However, this is not happening (left side bar has what appears to be an empty icon instead of a real icon):

I ran this application with the following commands:

  • mix deps.get
  • cd assets/
  • npm install
  • cd ..
  • mix assets.deploy
  • ./run

And when I run the script, I see no errors:

$ ./run 
Erlang/OTP 24 [erts-12.1.5] [source] [64-bit] [smp:12:12] [ds:12:12:10] [async-threads:1] [jit]

warning: use Mix.Config is deprecated. Use the Config module instead
  config/dev.exs:1


12:05:52.202 [info]  Application eex started at :nonode@nohost
 
12:05:52.208 [info]  Application mime started at :nonode@nohost
 
12:05:52.208 [info]  Child Agent of Supervisor Plug.Crypto.Application started
Pid: #PID<0.283.0>
Start Call: Agent.start_link(#Function<0.16488927/0 in Plug.Crypto.Application."-fun.start_crypto_keys/0-">)
Restart: :permanent
Shutdown: 5000
Type: :worker
 
12:05:52.211 [info]  Application plug_crypto started at :nonode@nohost
 
12:05:52.213 [info]  Child :telemetry_handler_table of Supervisor :telemetry_sup started
Pid: #PID<0.288.0>
Start Call: :telemetry_handler_table.start_link()
Restart: :permanent
Shutdown: 5000
Type: :worker
 
12:05:52.213 [info]  Application telemetry started at :nonode@nohost
 
12:05:52.214 [info]  Child Plug.Upload of Supervisor Plug.Application started
Pid: #PID<0.293.0>
Start Call: Plug.Upload.start_link([])
Restart: :permanent
Shutdown: 5000
Type: :worker
 
12:05:52.215 [info]  Application plug started at :nonode@nohost
 
12:05:52.216 [info]  Child :pg of Supervisor #PID<0.297.0> (Supervisor.Default) started
Pid: #PID<0.298.0>
Start Call: :pg.start_link(Phoenix.PubSub)
Restart: :permanent
Shutdown: 5000
Type: :worker
 
12:05:52.216 [info]  Application phoenix_pubsub started at :nonode@nohost
 
12:05:52.216 [info]  Application phoenix_view started at :nonode@nohost
 
12:05:52.222 [info]  Child Phoenix.CodeReloader.Server of Supervisor Phoenix.Supervisor started
Pid: #PID<0.304.0>
Start Call: Phoenix.CodeReloader.Server.start_link([])
Restart: :permanent
Shutdown: 5000
Type: :worker
 
12:05:52.222 [info]  Child Phoenix.Transports.LongPoll.Supervisor of Supervisor Phoenix.Supervisor started
Pid: #PID<0.305.0>
Start Call: DynamicSupervisor.start_link([name: Phoenix.Transports.LongPoll.Supervisor, strategy: :one_for_one])
Restart: :permanent
Shutdown: :infinity
Type: :supervisor
 
12:05:52.222 [info]  Application phoenix started at :nonode@nohost
 
12:05:52.235 [info]  Child Gettext.ExtractorAgent of Supervisor #PID<0.309.0> (Supervisor.Default) started
Pid: #PID<0.310.0>
Start Call: Gettext.ExtractorAgent.start_link([])
Restart: :permanent
Shutdown: 5000 
Type: :worker
 
12:05:52.235 [info]  Application gettext started at :nonode@nohost
 
12:05:52.250 [info]  Child :disk_log_sup of Supervisor :kernel_safe_sup started
Pid: #PID<0.311.0>
Start Call: :disk_log_sup.start_link()
Restart: :permanent
Shutdown: 1000
Type: :supervisor
 
12:05:52.250 [info]  Child :disk_log_server of Supervisor :kernel_safe_sup started
Pid: #PID<0.312.0>
Start Call: :disk_log_server.start_link()
Restart: :permanent
Shutdown: 2000
Type: :worker
Sass is watching for changes. Press Ctrl-C to stop.

[watch] build finished, watching for changes...
[notice] Connecting to UNIX socket: "/run/user/1000/bus"

[notice] DBUS auth: sending initial data

[notice] Got GUID '027f216ba8c2148b5e89683862860b5f' from the server

[notice] Succesfully negotiated UNIX FD passing

[notice] Calling "/"::"org.freedesktop.DBus".:Hello([])

I understand this can be an issue from my OS version (although I found nothing indicating that):

$ lsb_release -a
No LSB modules are available.
Distributor ID: Ubuntu
Description:    Ubuntu 20.04.4 LTS
Release:        20.04
Codename:       focal

I also tried replacing the image inside static/icon.png with something else, but it didn’t work either.

Questions

  • Am I doing something wrong?
  • Will this same icon show up in both Windows and Linux?
1 Like

Indeed strange, no as far as I can tell you’re not doing anything wrong. This application icon is loaded IMHO by erlang native based on the environment variable WX_APP_ICON which is being set in the ./run bash script using export WX_APP_ICON="priv/icon.png"

Do you have any mismatches there? Is the priv/icon.png not present anymore?

This are the contents of run:

#!/bin/bash
export WX_APP_ICON="priv/icon.png"
export WX_APP_TITLE="Todo"
exec iex -S mix

And this is the directory structure with all the files:

.
β”œβ”€β”€ assets
β”‚   β”œβ”€β”€ css
β”‚   β”‚   β”œβ”€β”€ app.scss
β”‚   β”‚   └── todo.scss
β”‚   β”œβ”€β”€ js
β”‚   β”‚   └── app.js
β”‚   β”œβ”€β”€ node_modules
β”‚   β”‚   └── nprogress
β”‚   β”‚       β”œβ”€β”€ bower.json
β”‚   β”‚       β”œβ”€β”€ component.json
β”‚   β”‚       β”œβ”€β”€ History.md
β”‚   β”‚       β”œβ”€β”€ License.md
β”‚   β”‚       β”œβ”€β”€ Notes.md
β”‚   β”‚       β”œβ”€β”€ nprogress.css
β”‚   β”‚       β”œβ”€β”€ nprogress.js
β”‚   β”‚       β”œβ”€β”€ package.json
β”‚   β”‚       β”œβ”€β”€ Readme.md
β”‚   β”‚       └── test
β”‚   β”‚           β”œβ”€β”€ component.html
β”‚   β”‚           └── test.js
β”‚   β”œβ”€β”€ package.json
β”‚   └── package-lock.json
β”œβ”€β”€ config
β”‚   β”œβ”€β”€ config.exs
β”‚   β”œβ”€β”€ dev.exs
β”‚   β”œβ”€β”€ prod.exs
β”‚   └── test.exs
β”œβ”€β”€ lib
β”‚   β”œβ”€β”€ todo_app
β”‚   β”‚   β”œβ”€β”€ menu_bar.ex
β”‚   β”‚   β”œβ”€β”€ menu.ex
β”‚   β”‚   β”œβ”€β”€ menu.html.heex
β”‚   β”‚   β”œβ”€β”€ repo.ex
β”‚   β”‚   └── todo.ex
β”‚   β”œβ”€β”€ todo_app.ex
β”‚   β”œβ”€β”€ todo_web
β”‚   β”‚   β”œβ”€β”€ channels
β”‚   β”‚   β”‚   └── user_socket.ex
β”‚   β”‚   β”œβ”€β”€ controllers
β”‚   β”‚   β”‚   └── error.ex
β”‚   β”‚   β”œβ”€β”€ endpoint.ex
β”‚   β”‚   β”œβ”€β”€ gettext.ex
β”‚   β”‚   β”œβ”€β”€ live
β”‚   β”‚   β”‚   β”œβ”€β”€ todo_live.ex
β”‚   β”‚   β”‚   └── todo_live.html.leex
β”‚   β”‚   β”œβ”€β”€ router.ex
β”‚   β”‚   β”œβ”€β”€ sup.ex
β”‚   β”‚   β”œβ”€β”€ templates
β”‚   β”‚   β”‚   └── layout
β”‚   β”‚   β”‚       β”œβ”€β”€ app.html.eex
β”‚   β”‚   β”‚       β”œβ”€β”€ live.html.leex
β”‚   β”‚   β”‚       └── root.html.leex
β”‚   β”‚   └── views
β”‚   β”‚       β”œβ”€β”€ error_helpers.ex
β”‚   β”‚       β”œβ”€β”€ error_view.ex
β”‚   β”‚       └── layout_view.ex
β”‚   └── todo_web.ex
β”œβ”€β”€ mix.exs
β”œβ”€β”€ mix.lock
β”œβ”€β”€ nodeploy
β”‚   β”œβ”€β”€ android_todo.png
β”‚   β”œβ”€β”€ icon.png
β”‚   β”œβ”€β”€ ios_todo.png
β”‚   β”œβ”€β”€ linux_todo.png
β”‚   β”œβ”€β”€ logo2.svg
β”‚   β”œβ”€β”€ logo.svg
β”‚   β”œβ”€β”€ macos_todo.png
β”‚   └── windows_todo.png
β”œβ”€β”€ priv
β”‚   β”œβ”€β”€ gettext
β”‚   β”‚   β”œβ”€β”€ de
β”‚   β”‚   β”‚   └── LC_MESSAGES
β”‚   β”‚   β”‚       └── default.po
β”‚   β”‚   └── default.pot
β”‚   β”œβ”€β”€ icon.png
β”‚   β”œβ”€β”€ icon32x32-done.png
β”‚   β”œβ”€β”€ icon32x32.png
β”‚   └── static
β”‚       β”œβ”€β”€ assets
β”‚       β”‚   β”œβ”€β”€ app-4a3041c06bffeb8037c41842519865bf.css
β”‚       β”‚   β”œβ”€β”€ app-4a3041c06bffeb8037c41842519865bf.css.gz
β”‚       β”‚   β”œβ”€β”€ app.css
β”‚       β”‚   β”œβ”€β”€ app.css.gz
β”‚       β”‚   β”œβ”€β”€ app-ff0646ba3b536d27d22b58ff63cb77af.js
β”‚       β”‚   β”œβ”€β”€ app-ff0646ba3b536d27d22b58ff63cb77af.js.gz
β”‚       β”‚   β”œβ”€β”€ app.js
β”‚       β”‚   └── app.js.gz
β”‚       β”œβ”€β”€ cache_manifest.json
β”‚       β”œβ”€β”€ favicon-16a9a02d013524d236c09776f9c9302b.ico
β”‚       β”œβ”€β”€ favicon.ico
β”‚       β”œβ”€β”€ images
β”‚       β”‚   β”œβ”€β”€ icon-a1aeeeb2169d741501861d0b319d2755.svg
β”‚       β”‚   β”œβ”€β”€ icon-a1aeeeb2169d741501861d0b319d2755.svg.gz
β”‚       β”‚   β”œβ”€β”€ icon.svg
β”‚       β”‚   └── icon.svg.gz
β”‚       β”œβ”€β”€ robots-067185ba27a5d9139b10a759679045bf.txt
β”‚       β”œβ”€β”€ robots-067185ba27a5d9139b10a759679045bf.txt.gz
β”‚       β”œβ”€β”€ robots.txt
β”‚       └── robots.txt.gz
β”œβ”€β”€ README.md
β”œβ”€β”€ run
β”œβ”€β”€ run.bat
└── test
    β”œβ”€β”€ support
    β”‚   β”œβ”€β”€ channel_case.ex
    β”‚   └── conn_case.ex
    └── test_helper.exs

It looks to me like everything is in place.