import QtQuick 2.12 import QtQuick.Controls 2.12 Popup { id: boite_dialogue_affichage_duree // Propriétés fixes : readonly property double pourcentage_hauteur_page_popup: 0.7 readonly property double pourcentage_hauteur_titre: 0.3 readonly property double pourcentage_hauteur_compteur: 1 - pourcentage_hauteur_titre - pourcentage_hauteur_bargraph - pourcentage_hauteur_ligne_boutons readonly property double pourcentage_hauteur_bargraph: 0.07 readonly property double pourcentage_hauteur_ligne_boutons: 0.25 readonly property int bouton_hauteur: 60 readonly property int hauteur_progress_bar: 30 readonly property double pourcentage_largeur_page_popup: 0.8 readonly property int bouton_largeur: 200 readonly property int padding_popup: 20 readonly property int periode_raffraichissement_parametres: 100 // En ms readonly property int step_timer_appui_long: 30 // en ms // Propriétés : property int compteur: 0 property int diviseur: 1 property string libelle_compteur_initial: "" property string type: "minuteur" // Soit "chrono", soit "minuteur" // Propriétés alias : //------------------------------------------------- // Signaux : //------------------------------------------------- signal clicked(int bouton) // Valeurs à lire lorsque le "OnClicked' est activé //------------------------------------------------- // Ouverture : //------------------------------------------------- onAboutToShow: { // Activé une fois quand le popup va être affiché init(); // L'init n'a d'utilité que lorsqu'on va l'afficher... timer_raffraichissement_parametres.start(); } //------------------------------------------------- // Fermeture : //------------------------------------------------- onAboutToHide: { timer_raffraichissement_parametres.stop(); } //=========================================================== // Timer periode raffraichissement parametres : //=========================================================== Timer { id: timer_raffraichissement_parametres interval: periode_raffraichissement_parametres triggeredOnStart: false running: false repeat: true onTriggered: { mise_a_jour() } } x: (shipheart_largeur_page * (1 - pourcentage_largeur_page_popup)) / 2; y: (shipheart_hauteur_page * (1 - pourcentage_hauteur_page_popup)) / 2; width: shipheart_largeur_page * pourcentage_largeur_page_popup; height: shipheart_hauteur_page * pourcentage_hauteur_page_popup; padding: padding_popup modal: true // focus: true // SDIR # 224 : Il ne faut PAS activer le focus. Sinon, à la fermeture, le focus précédent est réactivé (comme le dernier TextField par exemple) closePolicy: Popup.NoAutoClose //Popup.CloseOnPressOutside background: Rectangle { color: shipheart_couleur_fond_boite_dialogue_niveau_0 radius: 20 } Column { id: affichage_boite_dialogue spacing: 20 //========================================================================= // Titre : //========================================================================= Rectangle { id: titre_boite_dialogue width: boite_dialogue_affichage_duree.width - (2 * padding_popup) height: (boite_dialogue_affichage_duree.height - (2 * padding_popup) - (2 * affichage_boite_dialogue.spacing)) * pourcentage_hauteur_titre color: "transparent" Image { id: image_titre source: "" sourceSize.height: 120 anchors { verticalCenter: parent.verticalCenter horizontalCenter: parent.horizontalCenter } visible: true } } //========================================================================= // Zone principale : //========================================================================= Rectangle { id: zone_principale width: boite_dialogue_affichage_duree.width - (2 * padding_popup) height: (boite_dialogue_affichage_duree.height - (2 * padding_popup) - (3 * affichage_boite_dialogue.spacing)) * pourcentage_hauteur_compteur color: "transparent" Label { text: Math.trunc(compteur / (60 * 60 * diviseur)).toString().padStart(2, '0') + ":" + Math.trunc((compteur / (60 * diviseur)) % 60).toString().padStart(2, '0') + ":" + Math.trunc((compteur / diviseur) % 60).toString().padStart(2, '0') + ((diviseur > 1) ? ("," + (compteur % diviseur)) : "") anchors.fill: parent verticalAlignment: Text.AlignBottom horizontalAlignment: Text.AlignHCenter wrapMode: Text.Wrap color: couleur_blanc_casse font.pixelSize:150 font.weight: Font.Bold } } //========================================================================= // Barre d'avancement : //========================================================================= ProgressBar { id: progress_bar width: parent.width height: (boite_dialogue_affichage_duree.height - (2 * padding_popup) - (3 * affichage_boite_dialogue.spacing)) * pourcentage_hauteur_bargraph value: (page_accueil.compteur_initial_minuteur !== 0) ? (compteur_minuteur / page_accueil.compteur_initial_minuteur) : 0 visible: type === "minuteur" background: Rectangle { implicitWidth: parent.width implicitHeight: hauteur_progress_bar color: shipheart_couleur_fond_bouton //"transparent" radius: shipheart_rayon_bouton Text { // text: (progress_bar.value * 100).toFixed(0) + "%" text: "[ " + libelle_compteur_initial + " ]" anchors.fill: parent verticalAlignment: Text.AlignVCenter horizontalAlignment: Text.AlignHCenter color: shipheart_couleur_texte_slider font.pixelSize:18 font.weight: Font.Bold } } contentItem: Item { implicitWidth: parent.width implicitHeight: hauteur_progress_bar Rectangle { width: progress_bar.value * parent.width height: parent.height radius: shipheart_rayon_bouton color: shipheart_couleur_fond_bouton_actif } } } //========================================================================= // Boutons de bas de fenêtre : //========================================================================= Row { height: (boite_dialogue_affichage_duree.height - (2 * padding_popup) - (3 * affichage_boite_dialogue.spacing)) * pourcentage_hauteur_ligne_boutons anchors.horizontalCenter: parent.horizontalCenter spacing: 20 //....................................................... // Bouton Ok : //....................................................... Rectangle { id: bouton_ok width: bouton_largeur height: bouton_hauteur anchors.verticalCenter: parent.verticalCenter radius: shipheart_rayon_bouton color: couleur_gris_tres_fonce Label { anchors.centerIn: parent text: qsTr("Ok") color: couleur_blanc_casse font.pixelSize:20 } MouseArea { anchors.fill: parent onClicked: { shipheart_clic(); boite_dialogue_affichage_duree.clicked(shipheart_boite_dialogue_bouton_1); } } } } } //============================================================================================================= // Transitions d'ouverture et de fermeture de la boite de dialogue //============================================================================================================= enter: Transition { ParallelAnimation { NumberAnimation { property: "opacity" from: 0.0 to: 1.0 //easing.type: Easing.InElastic duration: 200 } NumberAnimation { property: "scale" from: 0.0 to: 1.0 // easing.type: Easing.OutBack duration: 200 } } } exit: Transition { ParallelAnimation { NumberAnimation { property: "opacity" from: 1.0 to: 0.0 duration: 200 } NumberAnimation { property: "scale" from: 1.0 to: 0.0 duration: 200 } } } //============================================================================================================= // Init des données de la boite de dialogue //============================================================================================================= function init() { if (type === "chrono") { image_titre.source = "/images/chronometre.png" diviseur = 10; } else if (type === "minuteur") { image_titre.source = "/images/sablier.png" diviseur = 1; libelle_compteur_initial = Math.trunc(page_accueil.compteur_initial_minuteur / (60 * 60 * diviseur)).toString().padStart(2, '0') + ":" + Math.trunc((page_accueil.compteur_initial_minuteur / (60 * diviseur)) % 60).toString().padStart(2, '0') + ":" + Math.trunc((page_accueil.compteur_initial_minuteur / diviseur) % 60).toString().padStart(2, '0') } mise_a_jour(); } //============================================================================================================= // Mise à jour des données de la boite de dialogue //============================================================================================================= function mise_a_jour() { if (type === "chrono") { compteur = page_accueil.compteur_chrono; } else if (type === "minuteur") { compteur = page_accueil.compteur_minuteur; } if (compteur <= 0) boite_dialogue_affichage_duree.close(); // A l'expiration du compteur, on ferme la boite dans tous les cas. } }