Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add Slint #6750

Merged
merged 1 commit into from
Mar 13, 2024
Merged

Add Slint #6750

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions .gitmodules
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1034,6 +1034,9 @@
[submodule "vendor/grammars/shaders-tmLanguage"]
path = vendor/grammars/shaders-tmLanguage
url = https://github.com/tgjones/shaders-tmLanguage
[submodule "vendor/grammars/slint-tmLanguage"]
path = vendor/grammars/slint-tmLanguage
url = https://github.com/slint-ui/slint-tmLanguage.git
[submodule "vendor/grammars/smali-sublime"]
path = vendor/grammars/smali-sublime
url = https://github.com/ShaneWilton/sublime-smali
Expand Down
2 changes: 2 additions & 0 deletions grammars.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -948,6 +948,8 @@ vendor/grammars/selinux-policy-languages:
vendor/grammars/shaders-tmLanguage:
- source.hlsl
- source.shaderlab
vendor/grammars/slint-tmLanguage:
- source.slint
vendor/grammars/smali-sublime:
- source.smali
vendor/grammars/smalltalk-tmbundle:
Expand Down
8 changes: 8 additions & 0 deletions lib/linguist/languages.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6671,6 +6671,14 @@ Slim:
codemirror_mode: slim
codemirror_mime_type: text/x-slim
language_id: 350
Slint:
type: markup
color: "#2379F4"
extensions:
- ".slint"
tm_scope: source.slint
ace_mode: text
language_id: 119900149
SmPL:
type: programming
extensions:
Expand Down
356 changes: 356 additions & 0 deletions samples/Slint/iot-dashboard.slint
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,356 @@
// Copyright © SixtyFPS GmbH <info@slint.dev>
// SPDX-License-Identifier: MIT

import { StyleMetrics } from "std-widgets.slint";

struct Palette {
menuBar : brush,
mainContent : brush,
box : brush,
lightDisplay : brush,
pieChart : brush,
roundButton : brush,
weekdayBox : brush,
text : brush,
shadow : brush,
}

global Skin {
in property <bool> day: !StyleMetrics.dark-color-scheme;
out property <Palette> palette : root.day ? {
menuBar : #6D7BFB,
mainContent : #fbfbfb,
box : #ffffff,
lightDisplay : #ffffff,
pieChart : #ffffff,
roundButton : #f7f7f7,
weekdayBox : #f4f4f4,
text : #000,
shadow : #0001, // ### added alpha
} : {
menuBar : #2937A7,
mainContent : #040404,
box : #000000,
lightDisplay : #000000,
pieChart : #000000,
roundButton : #0a0a0a,
weekdayBox : #0c0c0c,
text : #fff,
shadow : #fff1, // ### added alpha
};

// From Skin::initHints in Skin.cpp
out property <length> DefaultFont: 12px;
out property <length> TinyFont: 9px;
out property <length> SmallFont: 10px;
out property <length> MediumFont: 13px;
out property <length> LargeFont: 20px;
out property <length> HugeFont: 27px; // (also, bold)
out property <length> TitleFont: 10px; // (also, bold)
}

export component Clock inherits VerticalLayout {
in property <string> time <=> time-label.text;

Text {
text: "Current time";
font-size: Skin.TitleFont;
font-weight: 700;
}
time-label := Text {
// FIXME: actual time
text: "10:02:45";
font-size: Skin.HugeFont;
font-weight: 700;
color: #6776FF;
}
}

component PieChartBackground inherits Path {
in property <float> thickness;
in property <float> inner-radius;

fill: #aaaaaa40;

viewbox-width: 100;
viewbox-height: 100;

MoveTo {
x: 50;
y: 0;
}
ArcTo {
radius-x: 50;
radius-y: 50;
x: 50;
y: 100;
sweep: true;
}
ArcTo {
radius-x: 50;
radius-y: 50;
x: 50;
y: 0;
sweep: true;
}
LineTo {
x: 50;
y: root.thickness;
}
ArcTo {
radius-x: root.inner-radius;
radius-y: root.inner-radius;
x: 50;
y: 100 - root.thickness;
}
ArcTo {
radius-x: root.inner-radius;
radius-y: root.inner-radius;
x: 50;
y: root.thickness;
}
}

component PieChartFill inherits Path {
in property <float> thickness;
in property <float> inner-radius;
in property <float> progress;
in property <float> start : 0;

viewbox-width: 100;
viewbox-height: 100;

MoveTo {
y: 50 - 50 * cos(-root.start * 360deg);
x: 50 - 50 * sin(-root.start * 360deg);
}

LineTo {
y: 50 - root.inner-radius * cos(-root.start * 360deg);
x: 50 - root.inner-radius * sin(-root.start * 360deg);
}

ArcTo {
radius-x: root.inner-radius;
radius-y: root.inner-radius;
y: 50 - root.inner-radius*cos(-(root.start + root.progress) * 360deg);
x: 50 - root.inner-radius*sin(-(root.start + root.progress) * 360deg);
sweep: root.progress > 0;
large-arc: root.progress > 0.5;
}

LineTo {
y: 50 - 50*cos(-(root.start + root.progress) * 360deg);
x: 50 - 50*sin(-(root.start + root.progress) * 360deg);
}

ArcTo {
radius-x: 50;
radius-y: 50;
y: 50 - 50 * cos(-root.start * 360deg);
x: 50 - 50 * sin(-root.start * 360deg);
sweep: root.progress < 0;
large-arc: root.progress > 0.5;
}

LineTo {
y: 50 - 50 * cos(-root.start * 360deg);
x: 50 - 50 * sin(-root.start * 360deg);
}
}

component PieChartPainted inherits Rectangle {
in property <brush> brush <=> p.fill;
in property <float> progress;
in property <float> thickness: 15;
in property <float> inner-radius: 50 - root.thickness;

back := PieChartBackground {
width: 100%;
height: 100%;
thickness: root.thickness;
inner-radius: root.inner-radius;
}

p := PieChartFill {
width: 100%;
height: 100%;
thickness: root.thickness;
inner-radius: root.inner-radius;
progress: root.progress;
}
}


// From TopBar.cpp
export component TopBar inherits HorizontalLayout {
padding-left: 25px;
padding-top: 35px;
padding-right: 25px;
padding-bottom: 0px;
spacing: 0px;

for item in [
{ string: "Living Room", progress: 25, value: 175, color: #ff3122, gradient: @linear-gradient(0deg, #FF5C00, #FF3122) },
{ string: "Bedroom", progress: 45, value: 205, color: #6776ff, gradient: @linear-gradient(0deg, #6776FF, #6100FF) },
{ string: "Bathroom", progress: 15, value: 115, color: #f99055, gradient: @linear-gradient(0deg, #FFCE50, #FF3122) },
{ string: "Kitchen", progress: 86, value: 289, color: #6776ff, gradient: @linear-gradient(0deg, #6776FF, #6100FF) },
] : VerticalLayout {
padding: 0px;
spacing: 0px;

Text {
font-size: Skin.SmallFont;
text: item.string;
}

HorizontalLayout {
PieChartPainted {
brush: item.gradient;
progress: item.progress / 100;

Text {
width: 100%;
height: 100%;
vertical-alignment: center;
horizontal-alignment: center;
text: item.progress + "%";
color: item.color;
font-size: Skin.TinyFont;
}
}

VerticalLayout {
Text {
text: item.value;
font-size: Skin.MediumFont;
}
Text {
text: "kwH";
font-size: Skin.SmallFont;
}
}
Rectangle {}
}
}
@children
}

// From Box.cpp

// This element is not in the C++ version, created to share code between Box and the Usage element
component BoxBase inherits Rectangle {
background: Skin.palette.box;
drop-shadow-offset-x: 6px;
drop-shadow-offset-y: 6px;
drop-shadow-blur: 6px;
drop-shadow-color: Skin.palette.shadow;
}

component Box inherits BoxBase {
in property <string> title;

VerticalLayout {
if (root.title != "") : Text {
text <=> root.title;
font-size: Skin.TitleFont;
font-weight: 700;
}
spacing: 10px;
padding: 15px;

@children
}
}

// From RoundedIcon.cpp
component RoundedIcon inherits Rectangle {
in property <bool> isBright;
in property <bool> isSmall;
in property <image> iconName <=> m-graphicLabel.source;
in property <float> background-opacity <=> background-fill.opacity;

height: root.isSmall ? 60px : 68px;
width: root.isSmall ? 60px : 68px;

background-fill := Rectangle {
background: root.isBright ? @linear-gradient(180deg, #ff7d34, #ff3122) : @linear-gradient(180deg, #6776FF, #6100FF);
border-radius: 6px;
opacity: 1.0;
}

m-graphicLabel := Image {
x: (parent.width - self.width) / 2;
y: (parent.height - self.height) / 2;
}
}

//from Usage.cpp
component UsageSpacer inherits Text {
text: "_____";
font-size: Skin.SmallFont;
color: #dddddd;
horizontal-stretch: 2;
}

// Deviation: To align the items visually better, this is using a grid layout
export component Usage inherits Box {
title: "Usage";
horizontal-stretch: 1;

GridLayout {
spacing: 0px;
vertical-stretch: 1;
Row { Rectangle { vertical-stretch: 0; } }

Row {
Text { text: "Usage Today"; font-size: Skin.SmallFont; }
UsageSpacer { }
Text { text: "0,5 kwH"; font-size: Skin.SmallFont; }
}

Row {
Text { text: "Usage this month"; font-size: Skin.SmallFont; }
UsageSpacer { }
Text { text: "60 kwH"; font-size: Skin.SmallFont; }
}

Row {
Text { text: "Total working hours"; font-size: Skin.SmallFont; }
UsageSpacer { }
Text { text: "125 hrs"; font-size: Skin.SmallFont; }
}
}
}

// From UpAndDownButton.cpp
component RoundButton inherits Image { //### QskPushButton
in property <bool> is-up; // ### QskAspect
in property <color> color: #929CB2; // Taken from the fill in the svg itself.

callback clicked <=> ta.clicked;

width: 30px;

Image {
source: root.is-up ? @image-url("images/up.svg") : @image-url("images/down.svg");
x: (parent.width - self.width) / 2;
y: (parent.height - self.height) / 2;
// Deviation from qskinny: Show a darker color when pressing the button to provide feedback.
colorize: ta.pressed ? root.color.darker(80%) : root.color;
}

ta := TouchArea { }
}
component UpAndDownButton inherits Rectangle {
callback changed(int);
// FIXME: this is actually on the RoundButton
border-radius: root.width / 2;
background: Skin.palette.roundButton;

VerticalLayout {
u := RoundButton { is-up: true; clicked => { root.changed(+1) }}
d := RoundButton { is-up: false; clicked => { root.changed(-1) }}
}
}

Loading
Loading