399 lines
15 KiB
Plaintext
399 lines
15 KiB
Plaintext
import { Button, TabWidget, LineEdit, GroupBox, ComboBox, CheckBox } from "std-widgets.slint";
|
|
|
|
export enum State {
|
|
Project,
|
|
ConvertImage,
|
|
}
|
|
|
|
component ProjectWidget inherits Rectangle {
|
|
in-out property <string> open_project_path;
|
|
in-out property <string> save_project_path;
|
|
in-out property <bool> append_project_elements;
|
|
in-out property <bool> use_rel_paths;
|
|
|
|
callback load_project_clicked();
|
|
callback save_project_clicked();
|
|
callback browse_open_project_clicked();
|
|
callback browse_save_project_clicked();
|
|
|
|
background: #D0D0D0;
|
|
|
|
VerticalLayout {
|
|
alignment: start;
|
|
padding: 4px;
|
|
GroupBox {
|
|
title: "Open Project";
|
|
VerticalLayout {
|
|
alignment: start;
|
|
Text {
|
|
text: "Select a project to open.";
|
|
}
|
|
HorizontalLayout {
|
|
alignment: start;
|
|
LineEdit {
|
|
width: 300pt;
|
|
text: root.open_project_path;
|
|
}
|
|
Button {
|
|
text: "Browse";
|
|
clicked => {
|
|
root.browse_open_project_clicked();
|
|
}
|
|
}
|
|
}
|
|
HorizontalLayout {
|
|
alignment: start;
|
|
CheckBox {
|
|
text: "Append elements from project to existing elements";
|
|
toggled() => {
|
|
root.append_project_elements = self.checked;
|
|
}
|
|
}
|
|
}
|
|
HorizontalLayout {
|
|
alignment: start;
|
|
Button {
|
|
text: "Load";
|
|
clicked => {
|
|
root.load_project_clicked();
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
GroupBox {
|
|
title: "Save Project";
|
|
VerticalLayout {
|
|
alignment: start;
|
|
padding: 4px;
|
|
Text {
|
|
text: "Save the current project";
|
|
}
|
|
HorizontalLayout {
|
|
alignment: start;
|
|
LineEdit {
|
|
width: 300pt;
|
|
text: root.save_project_path;
|
|
}
|
|
Button {
|
|
text: "Browse";
|
|
clicked => {
|
|
root.browse_save_project_clicked();
|
|
}
|
|
}
|
|
}
|
|
CheckBox {
|
|
text: "Use relative path for files";
|
|
checked: root.use_rel_paths;
|
|
}
|
|
HorizontalLayout {
|
|
alignment: start;
|
|
Button {
|
|
text: "Save";
|
|
clicked => {
|
|
root.save_project_clicked();
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
component ConvertImageWidget inherits Rectangle {
|
|
in-out property <[string]> encoding_options: [];
|
|
in-out property <string> image_path;
|
|
in-out property <string> image_name;
|
|
in-out property <image> image_data;
|
|
in-out property <int> image-width;
|
|
in-out property <int> image-height;
|
|
in-out property <image> palette_data;
|
|
in-out property <int> palette_width: 0;
|
|
in-out property <int> palette_height: 0;
|
|
in-out property <string> selected_encoding;
|
|
in-out property <bool> enable_view: false;
|
|
in-out property <bool> palette_visible: false;
|
|
|
|
callback browse_clicked();
|
|
callback add_clicked();
|
|
callback update_palette_size(int, int);
|
|
|
|
background: #D0D0D0;
|
|
|
|
VerticalLayout {
|
|
alignment: start;
|
|
GroupBox {
|
|
title: "Add image file";
|
|
VerticalLayout {
|
|
alignment: start;
|
|
padding: 4px;
|
|
Text {
|
|
text: "Select image file to convert to be used with TIM Tool";
|
|
}
|
|
HorizontalLayout {
|
|
alignment: start;
|
|
padding: 4px;
|
|
LineEdit {
|
|
width: 300pt;
|
|
text: image_path;
|
|
}
|
|
Button {
|
|
text: "Browse";
|
|
clicked => {browse_clicked();}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
GroupBox {
|
|
title: "Loaded image and palette";
|
|
VerticalLayout {
|
|
alignment: start;
|
|
padding: 4px;
|
|
HorizontalLayout {
|
|
alignment: center;
|
|
VerticalLayout {
|
|
Rectangle {
|
|
width: 256px + 2*4px; // < Because of border
|
|
height: 256px + 2*4px; // < Because of border
|
|
background: #404040;
|
|
border-color: #808080;
|
|
border-width: 4px;
|
|
Image {
|
|
width: 256px;
|
|
height: 256px;
|
|
source: root.image_data;
|
|
image-fit: contain;
|
|
image-rendering: pixelated;
|
|
}
|
|
}
|
|
VerticalLayout {
|
|
alignment: center;
|
|
Text {
|
|
text: "Width: " + root.image-width;
|
|
}
|
|
}
|
|
VerticalLayout {
|
|
alignment: center;
|
|
Text {
|
|
text: "Height: " + root.image-height;
|
|
}
|
|
}
|
|
VerticalLayout {
|
|
alignment: center;
|
|
ComboBox {
|
|
model: root.encoding_options;
|
|
enabled: root.enable_view;
|
|
|
|
selected(current-value) => {
|
|
root.selected_encoding = current-value;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
Rectangle {
|
|
// Fake padding because the padding setting for the HorizontalLayout would not work
|
|
width: 4px;
|
|
height: 1px;
|
|
}
|
|
VerticalLayout {
|
|
Rectangle {
|
|
width: 256px + 2*4px; // < Because of border
|
|
height: 256px + 2*4px; // < Because of border
|
|
background: #404040;
|
|
border-color: #808080;
|
|
border-width: 4px;
|
|
palette_image := Image {
|
|
width: 256px;
|
|
height: 256px;
|
|
source: root.palette_data;
|
|
visible: root.palette_visible;
|
|
image-fit: contain;
|
|
image-rendering: pixelated;
|
|
}
|
|
}
|
|
HorizontalLayout {
|
|
alignment: start;
|
|
VerticalLayout {
|
|
VerticalLayout {
|
|
alignment: center;
|
|
Text {
|
|
text: "Width: ";
|
|
}
|
|
}
|
|
VerticalLayout {
|
|
alignment: center;
|
|
Text {
|
|
text: "Height: ";
|
|
}
|
|
}
|
|
}
|
|
VerticalLayout {
|
|
palette_width_edit := LineEdit {
|
|
width: 40pt;
|
|
input-type: number;
|
|
enabled: root.palette_visible;
|
|
text: root.palette_width;
|
|
|
|
accepted(text) => {
|
|
update_palette_size(palette_width_edit.text.to-float(), palette_height_edit.text.to-float());
|
|
}
|
|
}
|
|
palette_height_edit := LineEdit {
|
|
width: 40pt;
|
|
input-type: number;
|
|
enabled: root.palette_visible;
|
|
text: root.palette_height;
|
|
|
|
accepted(text) => {
|
|
update_palette_size(palette_width_edit.text.to-float(), palette_height_edit.text.to-float());
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
HorizontalLayout {
|
|
alignment: start;
|
|
padding: 4px;
|
|
VerticalLayout {
|
|
alignment: center;
|
|
Text {
|
|
text: "Name: ";
|
|
}
|
|
}
|
|
LineEdit {
|
|
text: root.image_name;
|
|
}
|
|
}
|
|
HorizontalLayout {
|
|
alignment: start;
|
|
padding: 4px;
|
|
Button {
|
|
text: "Add Image";
|
|
enabled: root.enable_view;
|
|
clicked => {root.add_clicked();}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
public function set_palette_image(image: image) {
|
|
palette_image.source = image;
|
|
palette_image.visible = true;
|
|
}
|
|
|
|
public function clear_palette_image() {
|
|
palette_image.visible = false;
|
|
}
|
|
}
|
|
|
|
export component FileTab inherits Rectangle {
|
|
in-out property <State> state;
|
|
// For project widget
|
|
in-out property <string> project_widget-open_project_path;
|
|
in-out property <string> project_widget-save_project_path;
|
|
in-out property <bool> project_widget-append_project_elements;
|
|
in-out property <bool> project_widget-use_rel_paths;
|
|
callback project_widget-load_project_clicked();
|
|
callback project_widget-save_project_clicked();
|
|
callback project_widget-browse_open_project_clicked();
|
|
callback project_widget-browse_save_project_clicked();
|
|
|
|
// For image conversion widget
|
|
in-out property <[string]> conv-encoding_options;
|
|
in-out property <string> conv-image_path;
|
|
in-out property <string> conv-image_name;
|
|
in-out property <image> conv-image_data;
|
|
in-out property <int> conv-image_width;
|
|
in-out property <int> conv-image_height;
|
|
in-out property <image> conv-palette_data;
|
|
in-out property <int> conv-palette_width;
|
|
in-out property <int> conv-palette_height;
|
|
in-out property <string> conv-selected_encoding;
|
|
in-out property <bool> conv-palette_enable;
|
|
in-out property <bool> conv-enable_view;
|
|
callback conv-image_update_palette_size(int, int);
|
|
callback conv-image_browse_clicked;
|
|
callback conv-image_add_clicked;
|
|
|
|
x: 0px;
|
|
y: 0px;
|
|
|
|
HorizontalLayout {
|
|
padding: 4px;
|
|
VerticalLayout {
|
|
padding: 4px;
|
|
width: 20%;
|
|
alignment: start;
|
|
|
|
Button {
|
|
text: "Projects";
|
|
clicked => {
|
|
root.state = State.Project;
|
|
}
|
|
}
|
|
Button {
|
|
text: "Add Image";
|
|
clicked => {
|
|
root.state = State.ConvertImage;
|
|
}
|
|
}
|
|
}
|
|
|
|
VerticalLayout {
|
|
padding: 4px;
|
|
alignment: start;
|
|
if root.state == State.Project : ProjectWidget {
|
|
open_project_path <=> root.project_widget-open_project_path;
|
|
save_project_path <=> root.project_widget-save_project_path;
|
|
append_project_elements <=> root.project_widget-append_project_elements;
|
|
use_rel_paths <=> root.project_widget-use_rel_paths;
|
|
|
|
load_project_clicked() => {
|
|
root.project_widget-load_project_clicked();
|
|
}
|
|
|
|
save_project_clicked() => {
|
|
root.project_widget-save_project_clicked();
|
|
}
|
|
|
|
browse_open_project_clicked() => {
|
|
root.project_widget-browse_open_project_clicked();
|
|
}
|
|
|
|
browse_save_project_clicked() => {
|
|
root.project_widget-browse_save_project_clicked();
|
|
}
|
|
}
|
|
|
|
if root.state == State.ConvertImage : ConvertImageWidget {
|
|
encoding_options <=> root.conv-encoding_options;
|
|
image_path <=> root.conv-image_path;
|
|
image_data <=> root.conv-image_data;
|
|
image-width <=> root.conv-image_width;
|
|
image-height <=> root.conv-image_height;
|
|
palette_data <=> root.conv-palette_data;
|
|
palette_width <=> root.conv-palette_width;
|
|
palette_height <=> root.conv-palette_height;
|
|
palette_visible <=> root.conv-palette_enable;
|
|
selected_encoding <=> root.conv-selected_encoding;
|
|
image_name <=> root.conv-image_name;
|
|
enable_view <=> root.conv-enable_view;
|
|
|
|
update_palette_size(width, height) => {
|
|
root.conv-image_update_palette_size(width, height);
|
|
}
|
|
|
|
browse_clicked => {
|
|
root.conv-image_browse_clicked();
|
|
}
|
|
|
|
add_clicked => {
|
|
root.conv-image_add_clicked();
|
|
}
|
|
}
|
|
}
|
|
}
|
|
} |