Reference Error

[dev3060]

When I run the application I get a reference error message background is not defined. I'm not sure were I messed up. This is happening at line 22 and I really am not understanding what this means. The code is based off the introduction to QT creater doc:
@import QtQuick 2.2

Rectangle {
id: root

property bool showDate: true
property bool showSeconds: true
property string currentTime: "17:11"
property string currentDate: "16.08.14"
property real borderPropertion: 0.1
property real dateTextPropertion: 0.5
property string textColor: "red"

height: 240
width: 400

Image   {
    id: backgrond
    source: "/home/phoenix/SwordNote1/content/resources/Images/light_background.png"
    fillMode: "Tile"
    anchors.fill: parent
    onStatusChanged: if (background.status == Image.Error)
                         console.log (qsTr ("Background image \"") +
                                      source +
                                      qsTr("\"cannot be loaded"))
}

FontLoader  {
    id: ledFont
    source: "/home/phoenix/SwordNote1/content/resources/font/LED_REAL.TTF"
    onStatusChanged: if (ledFont.status == FontLoader.Error)
                         console.log (qsTr ("Font \"") +
                                 source +
                                 qsTr ("\" cannot be loaded"))
}
Column  {
    id: clockText
    anchors.centerIn: parent
    spacing: root.height * root.borderPropertion

    Text {
        id: timeText
        text: root.currentTime
        font.pixelSize: root.height * root.timeTextProportion
        font.family: ledFont.name
        font.bold: true
        style: Text.Raised
        styleColor: "black"
    }
    
    Text {
        id: dateText
        text: currentDate
        color: textColor 
        anchors.horizontalCenter: parent.horizontalCenter
        font.family: ledFont.name
        font.pixelSize: root.height * root.dateTextPropertion
        visible: showDate
        style: Text.Raised
        styleColor: "black"
    }
}

}

@

[dev3060]

So I can only narrow it down to a library not being imported. Figuring out which one is the next challenge. If anyone has any suggestions it would be greatly appreciated. Thanks.

[p3c0]

Hi,

For the undefined behavior i see a spelling mistake(to be specific backgrond is not background) and for using absolute paths please prepend the path with file://

[dev3060]

I made those changes but I'm still getting the reference error background not defined. Also, the font can't be loaded and the image will not open. I've been at this for hours and I still can't figure it out and thanks p3c0 for catching those intial silly mistakes.

[p3c0]

Can you post your updated code ?

[dev3060]

so I was able to fix everything I guess it just needed some added bits of code. I was following the guide from the examples and at certain points it gets those errors until the whole code is completed. I'm not sure if that is some thing I should be wary of in the future.

@import QtQuick 2.0
import QtQuick 1.1

Rectangle {
id: root

property bool showDate: true
property bool showSeconds: true
property string currentTime
property string currentDate
// the sizes are in proportion to the hight of the clock.
// There are three borders, text and date.
// 3*borderProportion+timeTextProportion+dateTextProportion has to be 1.0
property real borderProportion: 0.1
property real timeTextProportion: 0.5
property real dateTextProportion: 0.2
property string textColor: "red"
property string timeFormat: "hh :mm"
property string dateFormat: "dd/MM/yy"

height:120
width:250

color: "transparent"

// returns formated time and date
function getFormattedDateTime(format) {
    var date = new Date
    return Qt.formatDateTime(date, format)
}

function updateTime() {
    root.currentTime = "<big>" +
            getFormattedDateTime(timeFormat) +
            "</big>" +
            (showSeconds ? "<sup><small> " + getFormattedDateTime("ss") +
                           "</small></sup>" : "");
    root.currentDate = getFormattedDateTime(dateFormat);
}

Image {
    id: background
    source: "File:/home/phoenix/QtExamples/content/resources/light_background.png"
    fillMode: "Tile"
    anchors.fill: parent
    onStatusChanged: if (background.status == Image.Error)
                         console.log (qsTr("Background image \"") +
                                      source +
                                      qsTr("\" cannot be loaded"))
}

FontLoader {
    id: ledFont
    // unfortunately, the font will not load on a Symbian device,
    // and the default font will be used:
    // http://bugreports.qt-project.org/browse/QTBUG-6611
    // The bug should be fixed in 4.8
    source: "File:/home/phoenix/QtExamples/content/resources/font/LED_REAL.TTF"
    onStatusChanged: if (ledFont.status == FontLoader.Error)
                         console.log("Font \"" + source + "\" cannot be loaded")
}

Timer {
    id: updateTimer
    running: Qt.application.active && visible == true
    repeat: true
    triggeredOnStart: true
    onTriggered: {
        updateTime()
        // refresh the interval to update the time each second or minute.
        // consider the delta in order to update on a full minute
        interval = 1000*(showSeconds? 1 : (60 - getFormattedDateTime("ss")))
    }
}

// trigger an update if the showSeconds setting has changed
onShowSecondsChanged: {
    updateTime()
}

Column {
    id: clockText
    anchors.centerIn: parent
    spacing: root.height*root.borderProportion

    Text {
        id: timeText
        textFormat: Text.RichText
        text: root.currentTime
        font.pixelSize: root.height*root.timeTextProportion
        font.family: ledFont.name // use "Series 60 ZDigi" on Symbian instead
        font.bold: true
        color: root.textColor
        style: Text.Raised
        styleColor: "black"
    }

    Text {
        id: dateText
        text: root.currentDate
        color: root.textColor
        anchors.horizontalCenter: parent.horizontalCenter
        font.family: ledFont.name // use "Series 60 ZDigi" on Symbian instead
        font.pixelSize: root.height*root.dateTextProportion
        visible: root.showDate
        style: Text.Raised
        styleColor: "black"
    }
}

}

@