Tauri/Premier exemple

Retour à la page parente : Tauri

Nom du projet : Navig2

Généralité

Fichiers C:\Prog\Navig2\src-tauri\tauri.conf.json

Détails :

• Nom de la fenêtre : "title": "Navigation",

index.html

• C:\Prog\Navig2\src\index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="styles.css" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Mon application Tauri</title>
    <script type="module" src="/main.js" defer></script>
  </head>
  <body>
      <div class="titlebar"><span class="grip-btn-g" >⠿</span><span class="title">Barre de déplacement</span><span class="grip-btn-d">⠿</span></div>
      <h1>Bienvenue sur Tauri !</h1>
      <div class="row">
        <a href="https://tauri.app" target="_blank"> <img src="/assets/tauri.svg" class="logo tauri" alt="Tauri logo" /></a>
        <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript" target="_blank" ><img src="/assets/javascript.svg" class="logo vanilla" alt="JavaScript logo" /></a>
      </div>
      <p>Cliquer sur le logo Tauri ou JavaScript pour en apprendre plus.</p>
      <form class="row" id="greet-form">
        <input id="greet-input" placeholder="Saisir un nom..." />
        <button type="submit">Salut</button>
      </form>
      <p id="greet-msg"></p>
  </body>
</html>

styles.css

• C:\Prog\Navig2\src\styles.css

body {
  margin: 0;
  padding-top: 10vh;
  padding-top: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

.logo.tauri:hover {
  filter: drop-shadow(0 0 2em #24c8db);
}
.logo.vanilla:hover {
  filter: drop-shadow(0 0 2em #ffe21c);
}

:root {
  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;

  color: #0f0f0f;
  background-color: #f6f6f6;

  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
}

.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: 0.4s;  
}

.row {
  display: flex;
  justify-content: center;
}

a {
  font-weight: 500;
  color: #646cff;
  text-decoration: inherit;
}

a:hover {
  color: #535bf2;
}

h1 {
  text-align: center;
}

input, button {
  border-radius: 8px;
  border: 1px solid transparent;
  padding: 0.6em 1.2em;
  font-size: 1em;
  font-weight: 500;
  font-family: inherit;
  color: #0f0f0f;
  background-color: #ffffff;
  transition: border-color 0.25s;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
}

button {
  cursor: pointer;
}

button:hover {
  border-color: #396cd8;
}
button:active {
  border-color: #396cd8;
  background-color: #e8e8e8;
}

input, button {
  outline: none;
}

#greet-input {
  margin-right: 5px;
}

@media (prefers-color-scheme: dark) {
  :root {
    color: #f6f6f6;
    background-color: #2f2f2f;
  }

  a:hover {
    color: #24c8db;
  }

  input, button {
    color: #ffffff;
    background-color: #0f0f0f98;
  }
  button:active {
    background-color: #0f0f0f69;
  }
}
.titlebar {
  height: 50px;
  display: flex;
  align-items: center;
  background: #0f3460;
  -webkit-app-region: drag;
}
.grip-btn-g { font-size: 2em; color: #4a6fa5; cursor: grab; }
.grip-btn-d { font-size: 2em; color: #4a6fa5; cursor: grab; }
.title { font-size: 1.1em; color: #8899aa; margin:auto; }

main.js

• C:\Prog\Navig2\src\main.js

const { invoke } = window.__TAURI__.core;

let greetInputEl;
let greetMsgEl;

async function greet() {
  // Learn more about Tauri commands at https://tauri.app/develop/calling-rust/
  greetMsgEl.textContent = await invoke("greet", { name: greetInputEl.value });
}

window.addEventListener("DOMContentLoaded", () => {
  greetInputEl = document.querySelector("#greet-input");
  greetMsgEl = document.querySelector("#greet-msg");
  document.querySelector("#greet-form").addEventListener("submit", (e) => {
    e.preventDefault();
    greet();
  });
});

build.rs

• C:\Prog\Navig2\src-tauri\build.rs

fn main() {
    tauri_build::build()
}

build.rs

• C:\Prog\Navig2\src-tauri\src\main.rs

// Prevents additional console window on Windows in release, DO NOT REMOVE!!
#![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]

fn main() {
    navig2_lib::run()
}

lib.rs

• C:\Prog\Navig2\src-tauri\src\lib.rs

// Learn more about Tauri commands at https://tauri.app/develop/calling-rust/
use tauri::{Manager, PhysicalPosition};

#[tauri::command]
fn greet(name: &str) -> String {
    format!("Bonjour, {} ! Bienvenue sur Tauri !", name)
}

#[cfg_attr(mobile, tauri::mobile_entry_point)]
pub fn run() {
    tauri::Builder::default()
	    .setup(|app| {
            let window   = app.get_webview_window("main").unwrap();
            let monitor  = window.primary_monitor().unwrap().unwrap();
            let screen   = monitor.size();
            let win_size = window.outer_size().unwrap();
            let x        = ((screen.width - win_size.width) / 2) as i32; // calcul du centre de l'écran
			let y        = 2 as i32; // marge en haut (utile si pas de decorations)
			//let y = margin_top;
            window.set_position(PhysicalPosition::new(x, y)).unwrap();
            Ok(())
        })
        .plugin(tauri_plugin_opener::init())
        .invoke_handler(tauri::generate_handler![greet])
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
}

tauri.conf.json

• C:\Prog\Navig2\src-tauri\tauri.conf.json

{
  "$schema": "https://schema.tauri.app/config/2",
  "productName": "navig2",
  "version": "0.1.1",
  "identifier": "com.phil.navig2",
  "build": {
    "frontendDist": "../src"
  },
  "app": {
    "withGlobalTauri": true,
    "windows": [
      {
        "title": "Navigation",
        "width": 700,
        "height": 500,
		"decorations": false,
		"alwaysOnTop": true,
		"resizable": false,
		"maximizable": false,
        "minimizable": false,
		"skipTaskbar": true
      }
    ],
    "security": {
      "csp": null
    }
  },
  "bundle": {
    "active": true,
    "targets": "all",
    "icon": [
      "icons/32x32.png",
      "icons/128x128.png",
      "icons/128x128@2x.png",
      "icons/icon.icns",
      "icons/icon.ico"
    ]
  }
}