retro-imager/main.qml

912 lines
29 KiB
QML

/*
* SPDX-License-Identifier: Apache-2.0
* Copyright (C) 2020 Raspberry Pi (Trading) Limited
*/
import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.0
import QtQuick.Controls.Material 2.2
import Qt.labs.settings 1.0
ApplicationWindow {
id: window
visible: true
width: 680
height: 420
minimumWidth: 680
maximumWidth: 680
minimumHeight: 420
maximumHeight: 420
title: qsTr("Raspberry Pi Imager")
FontLoader {id: roboto; source: "fonts/Roboto-Regular.ttf"}
FontLoader {id: robotoLight; source: "fonts/Roboto-Light.ttf"}
FontLoader {id: robotoBold; source: "fonts/Roboto-Bold.ttf"}
ColumnLayout {
id: bg
spacing: 0
Image {
id: image
Layout.fillWidth: true
Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
Layout.preferredWidth: window.width
fillMode: Image.PreserveAspectFit
source: "icons/rpi2.png"
}
Rectangle {
color: "#c31c4a"
implicitWidth: window.width
implicitHeight: window.height/2
GridLayout {
id: gridLayout
rowSpacing: 25
anchors.fill: parent
anchors.topMargin: 25
anchors.rightMargin: 50
anchors.leftMargin: 50
rows: 3
columns: 3
columnSpacing: 25
ColumnLayout {
id: columnLayout
spacing: 0
Layout.fillWidth: true
anchors.top: parent.top
Text {
id: text1
color: "#ffffff"
text: qsTr("Operating System")
Layout.fillWidth: true
Layout.preferredHeight: 17
Layout.preferredWidth: 100
font.pixelSize: 12
font.family: robotoBold.name
font.bold: true
horizontalAlignment: Text.AlignHCenter
}
Button {
id: osbutton
text: imageWriter.srcFileName() === "" ? qsTr("CHOOSE OS") : imageWriter.srcFileName()
font.family: roboto.name
spacing: 0
padding: 0
bottomPadding: 0
topPadding: 0
Layout.minimumHeight: 40
Layout.fillWidth: true
onClicked: ospopup.open()
Material.background: "#ffffff"
Material.foreground: "#c51a4a"
}
}
ColumnLayout {
id: columnLayout2
spacing: 0
Layout.fillWidth: true
anchors.top: parent.top
Text {
id: text2
color: "#ffffff"
text: qsTr("SD Card")
Layout.fillWidth: true
Layout.preferredHeight: 17
Layout.preferredWidth: 100
font.pixelSize: 12
font.family: robotoBold.name
font.bold: true
horizontalAlignment: Text.AlignHCenter
}
Button {
id: dstbutton
text: qsTr("CHOOSE SD CARD")
font.family: roboto.name
Layout.minimumHeight: 40
Layout.preferredWidth: 100
Layout.fillWidth: true
onClicked: {
imageWriter.refreshDriveList()
drivePollTimer.start()
dstpopup.open()
}
Material.background: "#ffffff"
Material.foreground: "#c51a4a"
}
}
ColumnLayout {
spacing: 0
Layout.fillWidth: true
anchors.top: parent.top
Text {
text: " "
Layout.preferredHeight: 17
Layout.preferredWidth: 100
}
Button {
id: writebutton
text: qsTr("WRITE")
font.family: roboto.name
Layout.minimumHeight: 40
Layout.fillWidth: true
enabled: false
Material.background: "#ffffff"
Material.foreground: "#c51a4a"
onClicked: {
if (!imageWriter.readyToWrite())
return;
enabled = false
cancelwritebutton.enabled = true
cancelwritebutton.visible = true
cancelverifybutton.enabled = true
progressText.text = qsTr("Writing... %1%").arg("0")
progressText.visible = true
progressBar.visible = true
progressBar.indeterminate = true
progressBar.Material.accent = "#ffffff"
osbutton.enabled = false
dstbutton.enabled = false
imageWriter.setVerifyEnabled(true)
imageWriter.startWrite()
}
}
}
ColumnLayout {
id: columnLayout3
Layout.columnSpan: 3
Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
Text {
id: progressText
font.pointSize: 10
color: "white"
font.family: robotoBold.name
font.bold: true
visible: false
horizontalAlignment: Text.AlignHCenter
Layout.fillWidth: true
}
ProgressBar {
id: progressBar
Layout.fillWidth: true
visible: false
Material.background: "#d15d7d"
}
Button {
id: cancelwritebutton
text: qsTr("CANCEL WRITE")
onClicked: {
enabled = false
progressText.text = qsTr("Cancelling...")
imageWriter.cancelWrite()
}
Material.background: "#ffffff"
Material.foreground: "#c51a4a"
Layout.alignment: Qt.AlignRight
visible: false
font.family: roboto.name
}
Button {
id: cancelverifybutton
text: qsTr("CANCEL VERIFY")
onClicked: {
enabled = false
progressText.text = qsTr("Finalizing...")
imageWriter.setVerifyEnabled(false)
}
Material.background: "#ffffff"
Material.foreground: "#c51a4a"
Layout.alignment: Qt.AlignRight
visible: false
font.family: roboto.name
}
}
}
}
}
/*
Popup for OS selection
*/
Popup {
id: ospopup
x: 50
y: 25
width: parent.width-100
height: parent.height-50
padding: 0
focus: true
closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutside
// background of title
Rectangle {
color: "#f5f5f5"
anchors.right: parent.right
anchors.top: parent.top
height: 35
width: parent.width
}
// line under title
Rectangle {
color: "#afafaf"
width: parent.width
y: 35
implicitHeight: 1
}
Text {
text: "X"
anchors.right: parent.right
anchors.top: parent.top
anchors.rightMargin: 25
anchors.topMargin: 10
font.family: roboto.name
font.bold: true
MouseArea {
anchors.fill: parent
cursorShape: Qt.PointingHandCursor
onClicked: {
ospopup.close()
}
}
}
ColumnLayout {
spacing: 10
Text {
text: qsTr("Operating System")
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
Layout.fillWidth: true
Layout.topMargin: 10
font.family: roboto.name
font.bold: true
}
Item {
clip: true
width: oslist.width
height: oslist.height
SwipeView {
id: osswipeview
interactive: false
ListView {
id: oslist
model: osmodel
delegate: osdelegate
width: window.width-100
height: window.height-100
focus: true
boundsBehavior: Flickable.StopAtBounds
ScrollBar.vertical: ScrollBar {
width: 10
//policy: ScrollBar.AlwaysOn
}
}
ListView {
id: suboslist
model: subosmodel
delegate: osdelegate
width: window.width-100
height: window.height-100
boundsBehavior: Flickable.StopAtBounds
ScrollBar.vertical: ScrollBar {
width: 10
//policy: ScrollBar.AlwaysOn
}
}
}
}
}
}
ListModel {
id: osmodel
ListElement {
url: "internal://format"
icon: "icons/ic_delete_40px.png"
extract_size: 0
image_download_size: 0
extract_sha256: ""
contains_multiple_files: false
release_date: ""
subitems_url: ""
subitems: []
name: qsTr("Erase")
description: qsTr("Format card as FAT32")
}
ListElement {
url: ""
icon: "icons/ic_computer_40px.png"
name: qsTr("Use custom")
description: qsTr("Select a custom .img from your computer")
}
Component.onCompleted: {
httpRequest(imageWriter.constantOsListUrl(), function (x) {
var o = JSON.parse(x.responseText)
if (!"os_list" in o) {
onError(qsTr("Error parsing os_list.json"))
return;
}
var oslist = o["os_list"]
for (var i in oslist) {
osmodel.insert(osmodel.count-2, oslist[i])
}
})
}
}
ListModel {
id: subosmodel
ListElement {
url: ""
icon: "icons/ic_chevron_left_40px.png"
extract_size: 0
image_download_size: 0
extract_sha256: ""
contains_multiple_files: false
release_date: ""
subitems_url: "internal://back"
subitems: []
name: qsTr("Back")
description: qsTr("Go back to main menu")
}
}
Component {
id: osdelegate
Item {
width: window.width-100
height: image_download_size ? 100 : 60
Rectangle {
id: bgrect
anchors.fill: parent
color: "#f5f5f5"
visible: false
}
Rectangle {
id: borderrect
implicitHeight: 1
implicitWidth: parent.width
color: "#dcdcdc"
y: parent.height
}
Row {
leftPadding: 25
Column {
width: 64
Image {
source: icon == "icons/ic_build_48px.svg" ? "icons/ic_build_40px.png": icon
verticalAlignment: Image.AlignVCenter
height: parent.parent.parent.height
fillMode: Image.Pad
}
Text {
text: " "
// visible: !icon
}
}
Column {
width: parent.parent.width-64-50-25
Text {
verticalAlignment: Text.AlignVCenter
height: parent.parent.parent.height
font.family: roboto.name
textFormat: Text.RichText
text: {
var txt = "<p style='margin-bottom: 5px;'><b>"+name+"</b></p>"
txt += "<font color='#1a1a1a'>"+description+"</font><font style='font-weight: 200' color='#646464'>"
if (typeof(release_date) == "string" && release_date)
txt += "<br>"+qsTr("Released: %1").arg(release_date)
if (typeof(url) == "string" && url != "" && url != "internal://format") {
if (typeof(extract_sha256) != "undefined" && imageWriter.isCached(url,extract_sha256)) {
txt += "<br>"+qsTr("Cached on your computer")
} else {
txt += "<br>"+qsTr("Online - %1 GB download").arg((image_download_size/1073741824).toFixed(1));
}
}
txt += "</font>";
return txt;
}
}
}
Column {
Image {
source: "icons/ic_chevron_right_40px.png"
visible: (typeof(subitems) == "object" && subitems.count) || (typeof(subitems_url) == "string" && subitems_url != "" && subitems_url != "internal://back")
height: parent.parent.parent.height
fillMode: Image.Pad
}
}
}
MouseArea {
anchors.fill: parent
cursorShape: Qt.PointingHandCursor
hoverEnabled: true
onEntered: {
bgrect.visible = true
}
onExited: {
bgrect.visible = false
}
onClicked: {
if (typeof(subitems) == "object" && subitems.count) {
if (subosmodel.count>1)
{
subosmodel.remove(1, subosmodel.count-1)
}
for (var i=0; i<subitems.count; i++)
{
subosmodel.append(subitems.get(i))
}
osswipeview.setCurrentIndex(1)
} else if (typeof(subitems_url) == "string" && subitems_url != "") {
if (subitems_url == "internal://back")
{
osswipeview.setCurrentIndex(0)
}
else
{
if (subosmodel.count>1)
{
subosmodel.remove(1, subosmodel.count-1)
}
httpRequest(subitems_url, function (x) {
var o = JSON.parse(x.responseText)
if (!"os_list" in o) {
onError(qsTr("Error parsing os_list.json"))
return;
}
var oslist = o["os_list"]
for (var i in oslist) {
subosmodel.append(oslist[i])
}
})
osswipeview.setCurrentIndex(1)
}
} else if (url == "") {
imageWriter.openFileDialog()
} else {
imageWriter.setSrc(url, image_download_size, extract_size, typeof(extract_sha256) != "undefined" ? extract_sha256 : "", typeof(contains_multiple_files) != "undefined" ? contains_multiple_files : false)
osbutton.text = name
ospopup.close()
if (imageWriter.readyToWrite()) {
writebutton.enabled = true
}
}
}
}
}
}
/*
Popup for SD card device selection
*/
Popup {
id: dstpopup
x: 50
y: 25
width: parent.width-100
height: parent.height-50
padding: 0
focus: true
closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutside
// background of title
Rectangle {
color: "#f5f5f5"
anchors.right: parent.right
anchors.top: parent.top
height: 35
width: parent.width
}
// line under title
Rectangle {
color: "#afafaf"
width: parent.width
y: 35
implicitHeight: 1
}
Text {
text: "X"
anchors.right: parent.right
anchors.top: parent.top
anchors.rightMargin: 25
anchors.topMargin: 10
font.family: roboto.name
font.bold: true
MouseArea {
anchors.fill: parent
cursorShape: Qt.PointingHandCursor
onClicked: {
dstpopup.close()
}
}
}
ColumnLayout {
spacing: 10
Text {
text: qsTr("SD Card")
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
Layout.fillWidth: true
Layout.topMargin: 10
font.family: roboto.name
font.bold: true
}
Item {
clip: true
width: dstlist.width
height: dstlist.height
ListView {
id: dstlist
model: driveListModel
delegate: dstdelegate
width: window.width-100
height: window.height-170
focus: true
boundsBehavior: Flickable.StopAtBounds
ScrollBar.vertical: ScrollBar {
width: 10
}
}
}
}
}
Component {
id: dstdelegate
Item {
width: window.width-100
height: 60
Rectangle {
id: dstbgrect
anchors.fill: parent
color: "#f5f5f5"
visible: false
}
Rectangle {
id: dstborderrect
implicitHeight: 1
implicitWidth: parent.width
color: "#dcdcdc"
y: parent.height
}
Row {
leftPadding: 25
Column {
width: 64
Image {
source: isUsb ? "icons/ic_usb_40px.png" : isScsi ? "icons/ic_storage_40px.png" : "icons/ic_sd_storage_40px.png"
verticalAlignment: Image.AlignVCenter
height: parent.parent.parent.height
fillMode: Image.Pad
}
}
Column {
width: parent.parent.width-64
Text {
textFormat: Text.StyledText
height: parent.parent.parent.height
verticalAlignment: Text.AlignVCenter
font.family: roboto.name
text: {
var txt = "<p><font size='4'>"+description+" - "+(size/1000000000).toFixed(1)+" GB"+"</font></p>"
if (mountpoints.length > 0) {
txt += "<font color='grey'>"+qsTr("Mounted as %1").arg(mountpoints.join(", "))+"</font>"
}
return txt;
}
}
}
}
MouseArea {
anchors.fill: parent
cursorShape: Qt.PointingHandCursor
hoverEnabled: true
onEntered: {
dstbgrect.visible = true
}
onExited: {
dstbgrect.visible = false
}
onClicked: {
drivePollTimer.stop()
dstpopup.close()
imageWriter.setDst(device, size)
dstbutton.text = description
if (imageWriter.readyToWrite()) {
writebutton.enabled = true
}
}
}
}
}
Popup {
id: msgpopup
x: 75
y: parent.height/2-100
width: parent.width-150
height: msgpopupbody.implicitHeight+150 //200
padding: 0
focus: true
closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutside
// background of title
Rectangle {
color: "#f5f5f5"
anchors.right: parent.right
anchors.top: parent.top
height: 35
width: parent.width
}
// line under title
Rectangle {
color: "#afafaf"
width: parent.width
y: 35
implicitHeight: 1
}
Text {
id: msgx
text: "X"
anchors.right: parent.right
anchors.top: parent.top
anchors.rightMargin: 25
anchors.topMargin: 10
font.family: roboto.name
font.bold: true
MouseArea {
anchors.fill: parent
cursorShape: Qt.PointingHandCursor
onClicked: {
if (continuebutton.visible)
msgpopup.close()
else
Qt.quit()
}
}
}
ColumnLayout {
spacing: 20
anchors.fill: parent
Text {
id: msgpopupheader
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
Layout.fillWidth: true
anchors.top: parent.top
anchors.topMargin: 10
font.family: roboto.name
font.bold: true
}
Text {
id: msgpopupbody
font.pointSize: 12
wrapMode: Text.Wrap
textFormat: Text.StyledText
font.family: roboto.name
Layout.maximumWidth: msgpopup.width-50
Layout.fillHeight: true
Layout.leftMargin: 25
Layout.topMargin: 25
}
RowLayout {
Layout.alignment: Qt.AlignCenter | Qt.AlignBottom
Layout.bottomMargin: 10
spacing: 20
Button {
id: quitbutton
text: qsTr("QUIT APP")
onClicked: Qt.quit()
Material.foreground: "#ffffff"
Material.background: "#c51a4a"
font.family: roboto.name
visible: false
}
Button {
id: continuebutton
text: qsTr("CONTINUE")
onClicked: msgpopup.close()
Material.foreground: "#ffffff"
Material.background: "#c51a4a"
font.family: roboto.name
}
Text { text: " " }
}
}
}
/* Persistent settings */
Settings {
category: "General"
property alias x: window.x
property alias y: window.y
}
/* Timer for polling drivelist changes */
Timer {
id: drivePollTimer
repeat: true
onTriggered: imageWriter.refreshDriveList()
}
/* Utility functions */
function httpRequest(url, callback) {
var xhr = new XMLHttpRequest();
xhr.timeout = 5000
xhr.onreadystatechange = (function(x) {
return function() {
if (x.readyState === x.DONE)
{
if (x.status === 200)
{
callback(x)
}
else
{
onError(qsTr("Error downloading OS list from Internet"))
}
}
}
})(xhr)
xhr.open("GET", url)
xhr.send()
}
/* Slots for signals imagewrite emits */
function onDownloadProgress(now,total) {
var newPos
if (total) {
newPos = now/(total+1)
} else {
newPos = 0
}
if (progressBar.value != newPos) {
if (progressText.text == qsTr("Cancelling..."))
return
progressText.text = qsTr("Writing... %1%").arg(Math.floor(newPos*100))
progressBar.indeterminate = false
progressBar.value = newPos
}
}
function onVerifyProgress(now,total) {
var newPos
if (total) {
newPos = now/total
} else {
newPos = 0
}
if (progressBar.value != newPos) {
if (cancelwritebutton.visible) {
cancelwritebutton.visible = false
cancelverifybutton.visible = true
}
if (progressText.text == qsTr("Finalizing..."))
return
progressText.text = qsTr("Verifying... %1%").arg(Math.floor(newPos*100))
progressBar.Material.accent = "#6cc04a"
progressBar.value = newPos
}
}
function resetWriteButton() {
progressText.visible = false
progressBar.visible = false
osbutton.enabled = true
dstbutton.enabled = true
writebutton.visible = true
writebutton.enabled = imageWriter.readyToWrite()
cancelwritebutton.visible = false
cancelverifybutton.visible = false
}
function onError(msg) {
msgpopupheader.text = qsTr("Error")
msgpopupbody.text = msg
msgpopup.open()
resetWriteButton()
}
function onSuccess() {
msgpopupheader.text = qsTr("Write Successful")
msgpopupbody.text = qsTr("<b>%1</b> has been written to <b>%2</b><br><br>You can now remove the SD card from the reader").arg(osbutton.text).arg(dstbutton.text)
msgpopup.open()
imageWriter.setDst("")
dstbutton.text = qsTr("CHOOSE SD CARD")
resetWriteButton()
}
function onFileSelected(file) {
imageWriter.setSrc(file)
osbutton.text = imageWriter.srcFileName()
ospopup.close()
if (imageWriter.readyToWrite()) {
writebutton.enabled = true
}
}
function onCancelled() {
resetWriteButton()
}
function onFinalizing() {
progressText.text = qsTr("Finalizing...")
}
}