mirror of
				https://github.com/slint-ui/slint.git
				synced 2025-11-03 21:24:17 +00:00 
			
		
		
		
	Add real-time clock to home automation demo (#8390)
This commit is contained in:
		
							parent
							
								
									6ba3b8586e
								
							
						
					
					
						commit
						0051c95b1b
					
				
					 4 changed files with 46 additions and 4 deletions
				
			
		| 
						 | 
					@ -6,5 +6,21 @@ import * as slint from "slint-ui";
 | 
				
			||||||
 | 
					
 | 
				
			||||||
const ui = slint.loadFile("../ui/demo.slint");
 | 
					const ui = slint.loadFile("../ui/demo.slint");
 | 
				
			||||||
const window = new ui.AppWindow();
 | 
					const window = new ui.AppWindow();
 | 
				
			||||||
 | 
					const api = window.Api;
 | 
				
			||||||
 | 
					const date = api.current_date;
 | 
				
			||||||
 | 
					const time = api.current_time;
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					const timer = setInterval(() => {
 | 
				
			||||||
 | 
					    const now = new Date();
 | 
				
			||||||
 | 
					    date.year = now.getFullYear();
 | 
				
			||||||
 | 
					    date.month = now.getMonth() + 1;
 | 
				
			||||||
 | 
					    date.day = now.getDate();
 | 
				
			||||||
 | 
					    api.current_date = date;
 | 
				
			||||||
 | 
					    time.hour = now.getHours();
 | 
				
			||||||
 | 
					    time.minute = now.getMinutes();
 | 
				
			||||||
 | 
					    time.second = now.getSeconds();
 | 
				
			||||||
 | 
					    api.current_time = time;
 | 
				
			||||||
 | 
					}, 1000);
 | 
				
			||||||
 | 
					
 | 
				
			||||||
await window.run();
 | 
					await window.run();
 | 
				
			||||||
 | 
					clearInterval(timer);
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -20,6 +20,7 @@ name = "home_automation_lib"
 | 
				
			||||||
 | 
					
 | 
				
			||||||
[dependencies]
 | 
					[dependencies]
 | 
				
			||||||
slint = { path = "../../../api/rs/slint" }
 | 
					slint = { path = "../../../api/rs/slint" }
 | 
				
			||||||
 | 
					chrono = "0.4"
 | 
				
			||||||
 | 
					
 | 
				
			||||||
[target.'cfg(target_arch = "wasm32")'.dependencies]
 | 
					[target.'cfg(target_arch = "wasm32")'.dependencies]
 | 
				
			||||||
wasm-bindgen = { version = "0.2" }
 | 
					wasm-bindgen = { version = "0.2" }
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -1,11 +1,14 @@
 | 
				
			||||||
// Copyright © SixtyFPS GmbH <info@slint.dev>
 | 
					// Copyright © SixtyFPS GmbH <info@slint.dev>
 | 
				
			||||||
// SPDX-License-Identifier: MIT
 | 
					// SPDX-License-Identifier: MIT
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					use chrono::{Datelike, Local, Timelike};
 | 
				
			||||||
 | 
					use slint::{Timer, TimerMode};
 | 
				
			||||||
 | 
					
 | 
				
			||||||
#[cfg(target_arch = "wasm32")]
 | 
					#[cfg(target_arch = "wasm32")]
 | 
				
			||||||
use wasm_bindgen::prelude::*;
 | 
					use wasm_bindgen::prelude::*;
 | 
				
			||||||
 | 
					
 | 
				
			||||||
slint::slint! {
 | 
					slint::slint! {
 | 
				
			||||||
    export { AppWindow } from "../ui/demo.slint";
 | 
					    export { Api, AppWindow } from "../ui/demo.slint";
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
#[cfg_attr(target_arch = "wasm32", wasm_bindgen(start))]
 | 
					#[cfg_attr(target_arch = "wasm32", wasm_bindgen(start))]
 | 
				
			||||||
| 
						 | 
					@ -15,5 +18,27 @@ pub fn main() {
 | 
				
			||||||
    #[cfg(all(debug_assertions, target_arch = "wasm32"))]
 | 
					    #[cfg(all(debug_assertions, target_arch = "wasm32"))]
 | 
				
			||||||
    console_error_panic_hook::set_once();
 | 
					    console_error_panic_hook::set_once();
 | 
				
			||||||
 | 
					
 | 
				
			||||||
    AppWindow::new().expect("AppWindow::new() failed").run().expect("AppWindow::run() failed");
 | 
					    let app = AppWindow::new().expect("AppWindow::new() failed");
 | 
				
			||||||
 | 
					    let app_weak = app.as_weak();
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					    let timer = Timer::default();
 | 
				
			||||||
 | 
					    timer.start(TimerMode::Repeated, std::time::Duration::from_millis(1000), move || {
 | 
				
			||||||
 | 
					        if let Some(app) = app_weak.upgrade() {
 | 
				
			||||||
 | 
					            let api = app.global::<Api>();
 | 
				
			||||||
 | 
					            let now = Local::now();
 | 
				
			||||||
 | 
					            let mut date = Date::default();
 | 
				
			||||||
 | 
					            date.year = now.year() as i32;
 | 
				
			||||||
 | 
					            date.month = now.month() as i32;
 | 
				
			||||||
 | 
					            date.day = now.day() as i32;
 | 
				
			||||||
 | 
					            api.set_current_date(date);
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					            let mut time = Time::default();
 | 
				
			||||||
 | 
					            time.hour = now.hour() as i32;
 | 
				
			||||||
 | 
					            time.minute = now.minute() as i32;
 | 
				
			||||||
 | 
					            time.second = now.second() as i32;
 | 
				
			||||||
 | 
					            api.set_current_time(time);
 | 
				
			||||||
 | 
					        }
 | 
				
			||||||
 | 
					    });
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					    app.run().expect("AppWindow::run() failed");
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -27,13 +27,13 @@ export global Api {
 | 
				
			||||||
    out property <Orientation> orientation <=> AppState.orientation;
 | 
					    out property <Orientation> orientation <=> AppState.orientation;
 | 
				
			||||||
    in-out property <bool> graphics-accelerator-available <=> AppState.graphics-accelerator-available;
 | 
					    in-out property <bool> graphics-accelerator-available <=> AppState.graphics-accelerator-available;
 | 
				
			||||||
 | 
					
 | 
				
			||||||
    in property <Date> current-date: {
 | 
					    in-out property <Date> current-date: {
 | 
				
			||||||
        year: 2025,
 | 
					        year: 2025,
 | 
				
			||||||
        month: 3,
 | 
					        month: 3,
 | 
				
			||||||
        day: 18,
 | 
					        day: 18,
 | 
				
			||||||
    };
 | 
					    };
 | 
				
			||||||
 | 
					
 | 
				
			||||||
    in property <Time> current-time: {
 | 
					    in-out property <Time> current-time: {
 | 
				
			||||||
        hour: 15,
 | 
					        hour: 15,
 | 
				
			||||||
        minute: 12,
 | 
					        minute: 12,
 | 
				
			||||||
        second: 33,
 | 
					        second: 33,
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue