SAVING rectangle when mousearea is clicked to an API offline storage



  • @import QtQuick 1.0
    import Qt 4.7
    import "storage.js" as Storage
    Rectangle {
    width: 360
    height: 490

    property int maxhunger: 100;
    property int minhunger: 0;
    property int defaulthunger: 50;
    AnimatedImage { id: home_aspin; x: 0; y: 0; width: 360; height: 490
       source: "Home(Aspin)new" }
    

    MouseArea {
    id: ahome2map
    x: 264
    y: 429
    width: 96
    height: 49
    onClicked: {mainLoader.source = "map.qml";}
    }

    MouseArea {
    id: ahome2status
    x: 139
    y: 429
    width: 101
    height: 49
    onClicked: {mainLoader.source = "status.qml";
    }
    }

    MouseArea {
    id: ahome2sleep
    x: 6
    y: 331
    width: 99
    height: 46
    onClicked: {mainLoader.source = "sleep.qml";}
    }

    MouseArea {
    id: ahome2play
    x: 6
    y: 384
    width: 92
    height: 46
    onClicked: {mainLoader.source = "walk.qml";}
    }

    MouseArea {
    id: ahome2bath
    x: 6
    y: 438
    width: 92
    height: 46
    onClicked: {mainLoader.source = "bath.qml";}
    }
    Rectangle {
    id: rectangle1
    x: 96
    y: 90
    width: 50
    height: 21
    color: "#60b131"

    }
    MouseArea {
    id: ahome2feed
    x: 6
    y: 278
    width: 99
    height: 46
    opacity: 1
    onClicked:{
    rectangle1.width = (rectangle1.width+25);

         }
       Component.onCompleted: {
           // Initialize the database
           Storage.initialize();
           // Sets a value in the database
           Storage.setSetting("mySetting",rectangle1.width);
    
       }
    

    }

    Text {
    id: text1
    x: 96
    y: 90
    width: 80
    height: 20
    text: "Hungry-------------------FULL"
    font.bold: true
    font.pixelSize: 15
    }

    }

    @

    @//storage.js
    // First, let's create a short helper function to get the database connection
    function getDatabase() {
    return openDatabaseSync("MyAppName", "1.0", "StorageDatabase", 100000);
    }

    // At the start of the application, we can initialize the tables we need if they haven't been created yet
    function initialize() {
    var db = getDatabase();
    db.transaction(
    function(tx) {
    // Create the settings table if it doesn't already exist
    // If the table exists, this is skipped
    tx.executeSql('CREATE TABLE IF NOT EXISTS settings(setting TEXT UNIQUE, value TEXT)');
    });
    }

    // This function is used to write a setting into the database
    function setSetting(setting, value) {
    function setSetting(setting1, value2){
    // setting: string representing the setting name (eg: “username”)
    // value: string representing the value of the setting (eg: “myUsername”)
    var db = getDatabase();
    var res = "";
    db.transaction(function(tx) {
    var rs = tx.executeSql('INSERT OR REPLACE INTO settings VALUES (?,?);', [setting,value]);
    //console.log(rs.rowsAffected)
    if (rs.rowsAffected > 0) {
    res = "OK";
    } else {
    res = "Error";
    }
    }
    );
    // The function returns “OK” if it was successful, or “Error” if it wasn't
    return res;
    }
    // This function is used to retrieve a setting from the database
    function getSetting(setting) {
    var db = getDatabase();
    var res="";
    db.transaction(function(tx) {
    var rs = tx.executeSql('SELECT value FROM settings WHERE setting=?;', [setting]);
    if (rs.rows.length > 0) {
    res = rs.rows.item(0).value;
    } else {
    res = "Unknown";
    }
    })
    // The function returns “Unknown” if the setting was not found in the database
    // For more advanced projects, this should probably be handled through error codes
    return res
    }
    }
    @

    When im loading another qml, the rectangle resets to its own state, it means that the rectangle didnt save in my offline storage,
    How can i do this?

    Thanks



  • [code] onClicked:{
    rectangle1.width = (rectangle1.width+25);

         }
       Component.onCompleted: {
           // Initialize the database
           Storage.initialize();
           // Sets a value in the database
           Storage.setSetting("mySetting",rectangle1.width);
    
       }[/code] In this section, you save the rectangle1's width into the offline storage when the component is finished being created. However, you do not re-save it when the width is updated. You need to add [code]Storage.setSetting("mySetting",rectangle1.width);[/code] in the onClicked function.

Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.