language-servers/slint
1
0
Fork 0
mirror of https://github.com/slint-ui/slint.git synced 2025-08-04 18:58:36 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

Home Automation: make lamp and overhead togglable

Browse source 
User would use them to control the state of lighting components mainly.

This partially reverts the commit 287a976bd0
This commit is contained in:
Tasuku Suzuki 2025-05-19 20:02:35 +09:00
parent 23c1989e59
commit d0a5cb1a59
3 changed files with 40 additions and 60 deletions
Download patch file Download diff file Expand all files Collapse all files

1
demos/home-automation/ui/components/general/fancySlider.slint
View file

@ -51,6 +51,7 @@ export component FancySlider inherits Rectangle {
width: 100%;
height: 300%;
y: parent.height / 2 - self.height / 2;
enabled: root.opacity > 0;
clicked => {
if self.mouse-x == initial-position {

55
demos/home-automation/ui/components/lamp.slint
View file

@ -1,6 +1,6 @@
// Copyright © SixtyFPS GmbH <info@slint.dev>
// SPDX-License-Identifier: MIT
import { Measurements, Colors, Style } from "../common.slint";
import { Measurements, Colors, Style, Animation } from "../common.slint";
import { FancySlider } from "general/fancySlider.slint";
import { Control } from "control.slint";
import { AppState } from "../appState.slint";
@ -17,6 +17,16 @@ export component Lamp inherits Control {
width: 100%;
height: 100%;
property <bool> on: true;
TouchArea {
clicked => {
AppState.end-kiosk-mode();
tile.on = !tile.on;
}
}
Rectangle {
x: tile.width - self.width + 20px;
width: 70%;
@ -29,7 +39,11 @@ export component Lamp inherits Control {
Image {
y: 0;
source: @image-url("../images/lamp/0024.png");
opacity: slider.value / 24;
opacity: tile.on ? slider.value / 24 * 0.8 + 0.2 : 0;
animate opacity {
duration: 200ms;
easing: ease-in-out-sine;
}
}
}
@ -51,34 +65,15 @@ export component Lamp inherits Control {
width: root.width * 0.8;
icon: @image-url("../images/brightness.svg");
colorize-icon: Colors.black;
}
}
}
TouchArea {
clicked => {
AppState.end-kiosk-mode();
if self.mouse-x == slider.initial-position {
slider.anim-duration = 300ms;
slider.animated-value = (self.mouse-x / self.width) * (slider.maxValue - slider.minValue) + slider.minValue;
}
}
moved => {
if !slider.first-touch {
slider.first-touch = true;
slider.initial-position = self.mouse-x;
slider.initial-value = (self.mouse-x / self.width) * (slider.maxValue - slider.minValue) + slider.minValue;
slider.previous-value = slider.value;
slider.anim-duration = 0ms;
} else {
slider.change-value = ((self.mouse-x / self.width) * (slider.maxValue - slider.minValue) + slider.minValue) - slider.initial-value;
slider.value = Math.clamp(slider.previous-value + slider.change-value, slider.minValue, slider.maxValue);
slider.animated-value = slider.value;
}
}
changed pressed => {
if !self.pressed {
slider.first-touch = false;
states [
on when !tile.on: {
opacity: 0;
}
]
animate opacity {
duration: Animation.transition-duration;
easing: ease-in-out-sine;
}
}
}
}

44
demos/home-automation/ui/components/overhead.slint
View file

@ -1,6 +1,6 @@
// Copyright © SixtyFPS GmbH <info@slint.dev>
// SPDX-License-Identifier: MIT
import { Palette, Measurements } from "../common.slint";
import { Palette, Measurements, Animation } from "../common.slint";
import { FancySlider } from "general/fancySlider.slint";
import { HaText } from "general/haText.slint";
import { Control } from "control.slint";
@ -17,9 +17,11 @@ export component Overhead inherits Control {
width: 100%;
height: 100%;
property <bool> on: true;
TouchArea {
clicked => {
slider.toggle();
tile.on = !tile.on;
}
}
@ -35,37 +37,19 @@ export component Overhead inherits Control {
color: Palette.overhead-foreground;
}
slider := FancySlider {
FancySlider {
width: (root.height < Measurements.medium-height-tile) ? root.width - 0 - 18px : root.width * 0.8;
value: 0.0;
icon: @image-url("../images/brightness.svg");
}
}
}
TouchArea {
clicked => {
if self.mouse-x == slider.initial-position {
slider.anim-duration = 300ms;
slider.animated-value = (self.mouse-x / self.width) * (slider.maxValue - slider.minValue) + slider.minValue;
}
}
moved => {
if !slider.first-touch {
slider.first-touch = true;
slider.initial-position = self.mouse-x;
slider.initial-value = (self.mouse-x / self.width) * (slider.maxValue - slider.minValue) + slider.minValue;
slider.previous-value = slider.value;
slider.anim-duration = 0ms;
} else {
slider.change-value = ((self.mouse-x / self.width) * (slider.maxValue - slider.minValue) + slider.minValue) - slider.initial-value;
slider.value = Math.clamp(slider.previous-value + slider.change-value, slider.minValue, slider.maxValue);
slider.animated-value = slider.value;
}
}
changed pressed => {
if !self.pressed {
slider.first-touch = false;
states [
on when !tile.on: {
opacity: 0;
}
]
animate opacity {
duration: Animation.transition-duration;
easing: ease-in-out-sine;
}
}
}
}