Practice Rust and TAURI: Make an Image Viewer #1

mar-m. nakamura

3 min readJan 16, 2022

I will make an image viewer and study. 😊

The goal

Make an image viewer to display the local image file.

Operate with the keyboard.
Display when the image file is in focus.
List all files. (experiment of list view creation)

Setup

I practice on Windows as usual.
For Windows, in addition to the normal Rust setup, install the following:

Microsoft Visual Studio C ++ Build Tool
Node.js runtime and npm or yarn
WebView2 (Windows 11 is pre-installed)

See the official TAURI setup page for more information.

Project folder

Now let’s create a project folder.

This time, I’ll leave everything to command create tauri-app.
Prepare the project folder by doing the following:

> yarn create tauri-app
  :
? What is your app name? tauri_imgv
? What should the window title be? Tauri App
? What UI recipe would you like to add? Vanilla.js (html, css, and js without the bundlers)
? Add "@tauri-apps/api" npm package? Yes
  :
  Your installation completed.  $ cd tauri_imgv
  $ yarn install
  $ yarn tauri devDone in 257.39s.

The folder name for web assets will be “dist”.
The following will bring up the first window after compilation.

> cd tauri_imgv
> yarn install
> yarn tauri dev

Wow easy!😀
Close the window.

Enable “with Global Tauri”

I will not use the bundler this time either. I study lazy with “with Global Tauri” enabled.😙

Edit and Change : tauri_imgv/src-tauri/tauri.conf.json .

:
  “build”: {
    :
    “withGlobalTauri”: true,
    :
  },
:

Hot reload

Enable hot reload if you like. I used live-server.

> yarn add live-server

Edit the following files.

tauri_imgv/package.json

:
  "scripts": {
    "tauri": "tauri",
    "dev": "live-server dist --port=5555 --no-browser"
  },
  "devDependencies": {
    "@tauri-apps/cli": "^1.0.0-beta.10"
  },
  "dependencies": {
    "@tauri-apps/api": "^1.0.0-beta.8",
    "live-server": "^1.2.1"
  }
}

tauri_imgv/src-tauri/tauri.conf.json

:
  "build": {
    "distDir": "../dist",
    "devPath": "http://localhost:5555",
    "withGlobalTauri": true,
    "beforeDevCommand": "yarn dev",
    "beforeBuildCommand": ""
 },
:

Run and verify that it will be hot reloaded by changing “tauri_imgv/dist/index.html”.

> yarn tauri dev

Thank you for your hard work. Ready!🎉

Make the first screen

I will make the first template and finish today’s study.

Edit : tauri_imgv/dist/index.html

<!DOCTYPE html>
<head>
  <meta charset="UTF-8">
  <script src="main.js"></script>
  <link rel="stylesheet" href="default.css">
</head><body>
  <div class="container">
    <info>Drive list</info>
    <imageview><img id="img_preview" src=""></imageview>
    <list>Directories and files</list>
  </div>
</body>

Create : tauri_imgv/dist/default.css

* {
  margin: 0;
  padding: 0;
}
body {
  height: 100vh;
}
.container {
  background-color: lightslategrey;
  height: 100%;
  display: grid;
  grid-template-rows: 45vh 4fr;
  grid-template-columns: 4fr 45vh;
  grid-gap: 0;
}info {
  background-color: red;
  padding: 0.5em;
  margin: 4px;
}imageview {
  position: relative;
  background-color: lightgray;
  margin: 4px;
  margin-left: 0;
}
#img_preview {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width:auto;
  height:auto;
  max-width:100%;
  max-height:100%;
  background-image:
    linear-gradient(45deg, #8884 25%, transparent 25%, transparent 75%, #8884 75%),
    linear-gradient(45deg, #8884 25%, transparent 25%, transparent 75%, #8884 75%);
  background-position: 0 0, 10px 10px;
  background-size: 20px 20px;
}list {
  background-color: green;
  padding: 0.5em;
  margin: 4px;
  margin-top: 0;
  grid-area: 2/1/2/3;
}

When executed, the following window will open.

Thank you for reading. 🤗

Next time, I will use this template to create a PC drive list acquisition process.