Développer un Widget pour Neotess

Transcription

www.neotess.fr
Tél : + 33 (0) 477 91 21 91
Mail : [email protected]
Développer un Widget pour
Neotess
RCS 821 120 581 - N° SIRET 821 120 581 00011 - TVA FR1821120581 – – www.dedicast.fr – [email protected]
1
www.neotess.fr
Tél : + 33 (0) 477 91 21 91
Sommaire
1.
Le fichier Widget ............................................................................................................................................................................ 3
1.1.
Contenu du fichier widget ............................................................................................................................................... 4
1.2. Réalisation du fichier widget ......................................................................................................................................... 4
2.
Côté interface utilisateur : widget.xml ......................................................................................................................... 4
3.
Côté affichage : widget.qml .................................................................................................................................................. 9
3.1. Extensions Neotess................................................................................................................................................................. 9
3.2. Base de fonctionnement................................................................................................................................................. 10
3.3. Skins ..................................................................................................................................................................................................12
3.3.1.
Utilisation manuelle de la Skin ................................................................................................................ 12
3.3.2.
Utilisation automatique de la Skin ........................................................................................................ 13
3.4. Astuces ............................................................................................................................................................................................15
3.4.1.
Echelle et déformation de l’animation ................................................................................................. 15
3.4.2.
Texte simple ou riche et Qml Text ......................................................................................................... 16
3.4.3.
Adapter la taille des textes ....................................................................................................................... 16
3.4.4.
Manipuler des dates .................................................................................................................................... 18
3.4.5.
Utiliser une source de données texte csv, json................................................................................. 18
3.4.6.
Utiliser une source de données xml ...................................................................................................... 19
3.4.7.
Inclure un contenu de la Bibliothèque................................................................................................. 20
3.5. Référence ....................................................................................................................................................................................20
3.5.1.
Item Widget .................................................................................................................................................... 20
3.5.2.
Dans la méthode start() lorsque le widget n’est pas prêt à être affiché Objet content ... 21
3.5.3.
Item SkinLayout (correspond aux composants SkinBackground ou SkinCell) ..................... 22
3.5.4.
Objet SkinComponent ................................................................................................................................ 23
3.5.5.
Objet ShellItem.............................................................................................................................................. 23
3.5.6.
Objet ServerEventItem ............................................................................................................................... 23
Développer un Flash pour Neotess ......................................................................................................................................... 24
2
www.neotess.fr
Tél : + 33 (0) 477 91 21 91
Un Widget Neotess est un type de Contenu, paramétrable dans l'Interface Neotess et qui
peut être affiché à l'écran ou dans une Zone de Template. Cet affichage peut être animé
(effets, vidéos), dynamique (informations changeantes dans le temps) et aussi interactif
(« clic » de l’utilisateur »).
Plusieurs versions des widgets ont existé : les « widgets 1 », compatibles avec les players
Neotess 2012 et aujourd’hui obsolètes ; et les « widgets 2 », compatibles avec le serveur et les
players Neotess 2014 et ultérieurs.
Il existe des widgets prenant en charge l’affichage des contenus dits « internes » du logiciel :
images, vidéos, playlists, templates. Ceux-ci sont communs à tous les clients d’un même
serveur Neotess. Ils sont utilisés en conjonction avec des fichiers importés dans la
bibliothèque ou au moyen de l’éditeur de playlists et de template.
D’autres widgets, sur lesquels porte ce document, permettent à l’utilisateur de saisir des
paramètres au moyen de l’interface « Nouveau contenu » de Neotess, et d’afficher à l’écran
une animation prédéfinie au moyen de ces paramètres. Ces widgets peuvent être proposés
par défaut dans les comptes client du serveur, ou bien être installés par l’utilisateur dans son
compte client :
o
o
Soit depuis un dialogue proposant de télécharger et d'installer une liste de
Widgets proposés par Neotess
Soit en choisissant un fichier depuis son disque dur.
L'objet de ce document est d'expliquer la réalisation de Widget en version 2.
1. Le fichier Widget
Le fichier Widget est une archive zip :
Elle porte le nom du widget sans espaces avec les premières lettres des mots en
Majuscules (seuls les widgets internes ont des noms en minuscules).
Son extension est .zip en minuscules.
3
www.neotess.fr
Tél : + 33 (0) 477 91 21 91
1.1.
Contenu du fichier widget
L'archive zip contient à sa racine les fichiers suivants :
widget.xml : le fichier nécessaire à l'interface d'édition
widget.qml : le fichier nécessaire à l'affichage
skins (optionnel) : un répertoire contenant des sous-répertoires contenant des Skins
(widget.png : l'icône utilisée par le Widget et par les fichiers du type de ce Widget)
(thumbnail.png : l'imagette du Widget)
Ainsi que des répertoires et autres fichiers utilisés par widget.qml
1.2.
Réalisation du fichier widget
Sous linux utilisez la commande :
zip –r MonWidget.zip widget.* thumbnail.png skins
Sous windows, sélectionnez widget.xml, widget.qml ainsi que les autre fichiers et répertoires
(ne sélectionnez pas le répertoire parent !) puis dans le menu contextuel choisissez "Envoyer
Vers" puis "Dossier Compressé".
2. Côté interface utilisateur : widget.xml
Neotess présente un formulaire lors de la création ou de l’édition d’un contenu widget.
4
www.neotess.fr
Tél : + 33 (0) 477 91 21 91
widget.xml décrit ce formulaire de création ou de modification du Contenu. Il doit respecter
la syntaxe XML suivante :
<?xml version="1.0" encoding="utf-8"?>
<widget>
<extension>textexample</extension>
L'extension du fichier Contenu associé
<name>TextExample</name>
Le nom du Widget dans l'interface
<version>1</version>
Un numéro de version
<desc>Texte sur fond coloré</desc>
Description apparaissant en haut du formulaire
<categories>
┐
<category>Texte</category>
│ Les catégories dans lesquelles le widget est
<category>Grand</category>
│ proposé à l'utilisateur dans l’interface
</categories>
┘
<parsable>content</parsable>
Indique que le fichier Contenu est au format
XML
<maxWidth>1920</maxWidth>
Largeur dans laquelle est exprimée l’animation
<maxHeight>1080</maxHeight>
Hauteur dans laquelle est exprimée l’animation
<params>
┐
<param type="LONGTEXT"
name="texte" label="Texte"/>
<param type="COLOR" name="couleur"
label="Couleur du fond"/>
│
│ La liste de paramètres éditables par
│ l'utilisateur
</params>
│
</widget>
┘
L’<extension> est utilisée comme extension de fichier et doit être unique dans le compte
client.
5
www.neotess.fr
Tél : + 33 (0) 477 91 21 91
<maxWidth> et <maxHeight> sont la largeur et la hauteur de référence dans laquelle
l’animation est exprimée au moyen des fonctions scaleX, scaleY et scaleXY (cf objet
Content). Il est plus facile d’utiliser ici les dimensions en pixels de l’animation à l’échelle dans
laquelle elle est réalisée.
Les paramètres <param> sont affichés en tant que champs du formulaire. Ils disposent au
minimum d’un type ci-après et d’un name ; les attributs ci-dessous sont communs à tous les
types :
name = le nom de variable, sans espaces ni caractères spéciaux ; unique dans le
formulaire
label = le texte affiché dans l'interface
orderColumn="true" le paramètre est utilisé comme critère de tri des contenus dans
un répertoire spécialisé lors de son affichage dans l’interface (mais pas lors de la
diffusion du répertoire !).
Type
Description
Attributs
NONE
paramètre ignoré : non affiché dans le
formulaire et non enregistré dans le
contenu
EDIT
Champ de saisie de texte monoligne
default = le texte par défaut pour un
nouveau Contenu
CHECK
Boite à cocher. Le paramètre prend la
valeur « true » ou « false »
default = la valeur par défaut « true » ou
« false » pour un nouveau contenu
RSS
Champ de saisie d'URL avec proposition
en dropdown des URLs des chaînes
disponibles dans l’agrégateur RSS
nouveau Contenu
cache = true/false : l'URL est téléchargée
en cache avant l'affichage du widget
cacheTimeout = âge en secondes après
lequel l'URL est retéléchargée
cacheExpires = âge en secondes après
lequel l'URL est expirée et n'est plus
affichée
6
www.neotess.fr
Tél : + 33 (0) 477 91 21 91
SKINS
Liste déroulante des Skins disponibles
default = le nom de la Skin proposée par
défaut pour un nouveau contenu
TOWNS
Liste prédéfinie des villes en France
Métropolitaine supportées par le widget
Meteo.
nouveau Contenu
Saisir la première lettre de la ville en
majuscules puis sélectionner le nom dans
la liste proposée
LONGTEXT
Champ de saisie de texte multiligne.
default = le texte par pour un nouveau
Contenu (texte simple sur 1 seule ligne)
RICHTEXT
Champ de saisie de texte enrichi
nouveau Contenu (texte simple sur 1 seule
ligne)
SIMPLERICHTEXT
Champ de saisie de texte enrichi autres
boutons
nouveau Contenu (texte simple sur 1 seule
ligne)
INTEGER
Champ de saisie d’un nombre entier
default = la valeur par défaut
Seulement chiffres et - autorisés
DECIMAL
Champ de saisie d’un nombre décimal
default = la valeur par défaut avec un .
comme séparateur décimal
Seulement chiffres et - autorisés ainsi que
, ou . selon la langue de l’interface
Toujours enregistré avec un . comme
séparateur décimal
OPACITY
Slider à 101 positions, valeur entière de 1 à
100
default = la valeur entière par défaut
FONTSIZE
Slider à 101 positions, valeur entière de 3 à
500 (par incréments de 2 ou 3)
default = la valeur entière par défaut
7
www.neotess.fr
Tél : + 33 (0) 477 91 21 91
DATE
Champ calendrier de saisie de date
Par défaut la date du jour
Format : 2014/05/15 15:40:12
TIME
Champ de saisie d’heure
Par défaut l’heure courante
Format : 17:40:14
WEEK
Champ de saisie du numéro de semaine ;
indique la date du lundi et du vendredi
de la semaine choisie
Par défaut la semaine courante
Format : 20150216,20150220
LIST
Liste déroulante de valeurs prédéfinies
values = liste séparée par des virgules des
valeurs imposées : « valeur 1,valeur 2 »
Ou liste en format clé,libellé : « valeur
1,libelle 1;valeur 2,libelle 2 »
default = le choix par défaut pour un
nouveau Contenu ; si invalide ou non
défini alors la valeur pourrait être
enregistrée vide et donc différente des
valeurs imposées
DROPDOWN
Champ de saisie de texte monoligne avec
proposition déroulante de valeurs
prédéfinies
values = liste séparée par des virgules des
valeurs proposées. Ex : « valeur 1,valeur 2 »
nouveau Contenu
CONTENT
Champ de sélection d’un contenu dans la
Bibliothèque de contenus
8
www.neotess.fr
Tél : + 33 (0) 477 91 21 91
IMAGECONTENT
Champ de sélection d’un contenu image
(png, jpeg) dans la Bibliothèque de
contenus
COLOR
Champ de saisie de couleur RVB avec
nuancier
default = la couleur par défaut pour un
nouveau Contenu
Format : #aabbcc
PASSWORD
Champ de saisie de mot de passe avec
caractères masqués à l’affichage
nouveau Contenu
Attention : transmis et stocké en clair
Note : les valeurs sont encodées pour leur stockage et fournies décodées à l’animation qml ;
les valeurs par défaut doivent être encodées dans widget.xml avec le même format.
3. Côté affichage : widget.qml
Le fichier QML widget.qml définit ce qui est affiché à l’emplacement du Widget à l’écran.
C’est un fichier au format qml (Qt Quick 2) utilisant des extensions propres à Neotess.
Premiers pas avec QML : http://qt-project.org/doc/qt-5/qmlfirststeps.html
Une introduction à QML : http://qt-project.org/doc/qt-5/qmlapplications.html
La référence de QML : http://qt-project.org/doc/qt-5/qmlreference.html
La référence Qt Quick : http://qt-project.org/doc/qt-5/qtquick-index.html
Vérifiez sor vos players la version de Qt/QML disponible dont dépendent certaines
fonctionnalités : F8 puis F1.
3.1.
Extensions Neotess
Neotess ajoute des extensions au langage QML. Elles doivent être incluses au moyen de
l’instruction :
import QtQuick 2.0
import Neotess 1.0
Celles-ci ajoutent (cf Référence ci-dessous) :
9
www.neotess.fr
Tél : + 33 (0) 477 91 21 91
-
Les Items Widget, Web, Video, List, Template, Content, Equipment, Session, Shell, ServerEvent,
-
Les objets Javascript content, session et equipment et les variables contenturl et
ListTransition, SkinLayout, SkinComponent, (Kinect, Leap)
contentduration
3.2.
Base de fonctionnement
L’item racine du code du widget Neotess doit être un item Widget. Ici on le baptise
« widget » :
Widget {
id: widget
}
Il est habituellement affiché à la taille du contenu :
width: content.width()
height: content.height()
Les paramètres définis par l’utilisateur sont accessibles au moyen de content.param(). Il est
pratique de les définir comme propriété de l’item Widget et de définir leur éventuelle valeur
par défaut :
property string texte: content.param("texte")
property string couleur:
content.param("couleur")==""?"#FFFFFF":content.param("couleur")
property real opacite: content.param("couleur")==""?0:0.8
La hiérarchie des items QtQuick définit ce qui va être affiché dans le widget. Ici un rectangle
coloré ave un texte à l’intérieur :
Rectangle {
width: parent.width
height: parent.height
color: couleur
opacity: opacite
10
www.neotess.fr
Tél : + 33 (0) 477 91 21 91
Text {
id: textItem
anchors.centerIn: parent
font.pixelSize: content.scaleY(80)
text: texte
}
}
content.duration() et widget.nextContent() permettent de contrôler la durée d’affichage.
content.loop() indique (si true) que le widget est seul dans sa playlist et peut donc être
affiché indéfiniment :
Timer {
id: durationTimer
interval: content.duration() * 1000;
running: !content.loop(); repeat: false;
onTriggered: { widget.nextContent(); }
}
Les fonctions start(), stop() de Widget doivent être surdéfinies pour contrôler l’animation du
widget. L’animation démarre lors de start() et doit s’arrêter lors de stop(). Ici une animation
sur l’échelle du texte :
SequentialAnimation {
id: widgetAnimation
loops: Animation.Infinite
PropertyAnimation { target: textItem; property: "scale";
to: 0.5; duration: 500; easing.type: Easing.InOutQuad; }
PropertyAnimation { target: textItem; property: "scale";
to: 2; duration: 500; easing.type: Easing.InOutQuad; }
11
www.neotess.fr
Tél : + 33 (0) 477 91 21 91
}
function start() {
widgetAnimation.start();
}
function stop() {
widgetAnimation.complete() ;
}
3.3.
Skins
Des Skins peuvent être utilisées pour proposer plusieurs comportements de widgets
différents : habillages, animations, comportements.
Chaque Skin est composée d’un sous-répertoire dans le répertoire « skins » du Widget. Le
nom du répertoire est le nom de la Skin, qui doit être sans espace ni caractères spéciaux.
Pour utiliser les Skins, widget.xml doit contenir un param de type SKINS. Celui-ci permet à
l'utilisateur de choisir une Skin parmi celles proposées.
Le répertoire de la Skin contient :
o
o
o
skin.xml : un fichier xml de paramètres pouvant changer d'une Skin à l'autre
les images de la Skin : celle-ci sont utilisées dans widget.qml au moyen de
content.skinUrl()
d’autres fichiers, eux aussi utilisés dans widget.qml (polices TTF…)
3.3.1. Utilisation manuelle de la Skin
Par exemple le fichier skin.xml suivant :
<skin name="xyz">
<image x="530" y="110" width="600" height="140" border="false"/>
12
www.neotess.fr
Tél : + 33 (0) 477 91 21 91
<text x="530" y="250" width="600" height="400" font="Arial" size="24"
align="left" bold="false" color="#555555"/>
</skin>
widget.qml utilise les valeurs de la skin sélectionnée au moyen des fonctions suivantes :
content.skinAttribute("image", "y") retourne "110"
content.skinRootAttr("name") retourne "xyz"
content.skinUrl("background.jpg") retourne
"file://skins/LaSkin/background.jpg"
3.3.2. Utilisation automatique de la Skin
Un skin.xml auto-génère automatiquement des composants QML SkinBackground et
SkinCell qu’il est possible d’insérer dans widget.qml.
SkinBackground contient tous les éléments de premier niveau entre les balises <skin></skin>
SkinCell contient tous les éléments de premier niveau entre les balises <grid></grid>
Les éléments xml composants la Skin sont transformés en trois Items QML :
o Rectangle : un élément contenant l’attribut background="#color" est
o
transformé en Item Rectangle
Image : un élément contenant l’attribut image="nom_de_l’image" est
o
transformé en Item Image
Text : un élément ne contenant ni background ni image est transformé en Item
Text
Les attributs des éléments xml :
o
o
o
o
x, y, width, height, color sont transformés en attributs des Items QML du même
nom
font -> font.family, size ->font.pointSize, bold -> font.bold, align ->
horizontalAlignment
showDelay, showDuration, showEffect déterminent le temps entre le début de
l’animation et le déclenchement de l’effet d’apparition, la durée de l’effet
d’apparition et l’effet d’apparition
hideDelay, hideDuration, hideEffect déterminent le temps entre le début de
l’animation et le déclenchement de l’effet de disparition, la durée de l’effet de
disparition et l’effet de disparition
13
www.neotess.fr
Tél : + 33 (0) 477 91 21 91
Les items contenus dans les items SkinBackground et SkinCell sont adressables par les
méthodes suivantes :
setValue(nom d’élément, valeur)
setProperty(nom d’élément, nom d’attribut, valeur)
Par exemple le fichier skin.xml suivant
<skin name="xyz">
<image x="530" y="110" width="600" height="140" border="false"/>
<text x="530" y="250" width="600" height="400" font="Arial" size="24"
align="left" bold="false" color="#555555"/>
<grid>
<nom1 x="553" y="37" width="80" height="80" image="."
color="#000000" showDelay="1000" showDuration="500" showEffect="fade"/>
<nom2 x="553" y="37" width="80" height="50" font="Raleway"
size="60" align="center" bold="false" color="#ffffff" showDelay="1000"
showDuration="500" showEffect="fade"/>
<nom3 x="436" y="109" width="80" height="80" image="."
color="#000000" showDelay="1250" showDuration="500" showEffect="fade"/>
</grid>
</skin>
Dans widget.qml :
SkinBackground {
id: infos
// contient image et test positionnés avec les attributs de la
skin
SkinCell {
id: cell
14
www.neotess.fr
Tél : + 33 (0) 477 91 21 91
//contient nom1 à nom3
}
}
start() {
cell.setValue("nom1", content.skinUrl("1.png"));
cell.setValue("nom2", content.skinUrl("titre"));
}
3.4.
Astuces
3.4.1. Echelle et déformation de l’animation
L’animation QML est réalisée dans une résolution native souvent dictée par les éléments
graphiques (images bitmap fournies par le graphiste).
L’animation doit avoir un comportement pour son utilisation à des tailles non natives : le
comportement peut être différent lorsque l’animation est déformée : 16/9, carré, étiré
horizontalement ou verticalement. C’est alors au développeur à prévoir si nécessaire ces
comportements (étirement, centrage, changement de mise en page).
Lorsqu’elle est utilisée à des tailles de même ratio ratio (1920x1080, 1280x720) ou sur le
Diewer/Desktop (1024x600), le comportement préconisé est un redimensionnement.
Pour conserver ce même ratio il est suggéré de procéder comme suit.
Définir dans widget.xml la résolution native de l’animation
<maxWidth>1920</maxWidth>
<maxHeight>1080</maxHeight>
Utiliser dans widget.qml content.scaleX, content.scaleY et content.scaleXY en
remplacement des dimensions natives
Text {
width: content.scaleX(1920); height: content.scaleY(1080/3)
x: 0; y: content.scaleY(320)
15
www.neotess.fr
Tél : + 33 (0) 477 91 21 91
font.pixelSize: content.scaleXY(80)
text: texte
}
3.4.2. Texte simple ou riche et Qml Text
L’item QML Text peut afficher à la fois du texte simple et du texte riche : il est recommandé
de définir le format de texte par la propriété textFormat afin de fiabiliser l’affichage des
caractères spéciaux.
Lorsque il est saisi comme texte simple par l’utilisateur, et affiché comme texte « enrichi »
par le widget, il convient de protéger notamment « & » qui pourra sinon être interprété
comme caractère d’entité html, voire « < > ».
Exemple, affichage de texte simple :
Text {
textFormat: Text.PlainText
text: content.param("texte")
}
Exemple, affichage de texte riche :
Text {
textFormat: Text.RichText
text: "<b>Titre</b><br/>" +
content.param("texte").replace(/&/g,"&")
}
3.4.3. Adapter la taille des textes
Il est souvent souhaité d’adapter un texte à un espace disponible, en jouant sur la taille des
caractères.
Sur une seule ligne :
L’item Texte de QTQuick propose la propriété fontSizeMode dont la valeur Text.Fit permet
d’obtenir l’effet souhaité avec un texte monoligne.
16
www.neotess.fr
Tél : + 33 (0) 477 91 21 91
On peut aussi choisir d’élider la fin du texte :
Text {
x:content.scaleX(20); y:content.scaleY(188);
width:content.scaleX(288); height:content.scaleY(64);
text: hippodrome; font.pixelSize: content.scaleY(55);
onPaintedWidthChanged: { if (paintedWidth>width)
text=(text.slice(-3)=="..."?text.slice(0, text.length-4):text.slice(0,
text.length-1))+"..."; }
}
Sur plusieurs lignes de texte riche :
Il n’existe pas de propriété toute faite donnant le résultat souhaité. Le code ci-dessous peut
aider :
Text {
property int it: 0
width: widget.width
wrapMode: Text.Wrap
font.pixelSize: content.scaleXY(80)
onTextChanged: { it=0; }
onPaintedHeightChanged: { if((it++<10 &&
paintedHeight<widget.height*8/10) || (paintedHeight>widget.height))
font.pixelSize=(font.pixelSize*Math.sqrt(0.9*widget.height/paintedHeight)).
toFixed(); }
}
Sur un arbre d’items QML :
L’astuce ci-dessous consiste à rendre l’arbre dans une taille par défaut avant de l’agrandir
pour occuper un maximum d’espace.
Widget {
id: widget
width: content.width()
height: content.height()
17
www.neotess.fr
Tél : + 33 (0) 477 91 21 91
GridLayout {
id:table
anchors.centerIn: parent
/* Tout un tas d’items */
}
function start() {
table.scale=Math.min(parseFloat(widget.height)/table.height,par
seFloat(widget.width)/table.width);
}
}
3.4.4. Manipuler des dates
Les dates peuvent être utilisées au moyen de l’objet Date de javascript.
Il permet d’utiliser les dates en paramètre de widget :
var date=new Date(content.param("date"))
var time=new Date(date.getFullYear()+"/"+ (date.getMonth()+1)+"/"+
date.getDate()+" "+ content.param("time"))
console.log(time)
Il permet de calculer des décalages de date :
property int forecastDay: (new Date((new Date()).getTime()+
forecastIndex * 12 * 3600 * 1000)).getDate(); //1 a 31
Il peut être affiché selon un format défini et localisé :
Qt.formatDateTime(date, "dddd d MMMM yyyy") ; //Lundi 3 Mars 2014
3.4.5. Utiliser une source de données texte csv, json
Un widget peut accéder à une source de données texte, ceci au moyen de la fonction
content.cacheUrlContent. Le traitement des données est à la charge du code javascript.
Exemple :
18
www.neotess.fr
Tél : + 33 (0) 477 91 21 91
url = "http://download.finance.yahoo.com/d/quotes.csv?s=" +
content.param("ticker") + "&f=sl1d1t1c1p2ohgv&e=.csv";
var csv = content.cacheUrlContent(url, 128, 3600, 43200);
var elem = csv.split(",");
if(elem[0] == "") { widget.nextContent(); return; }
tickerText.text = content.param("ticker") + " " + elem[1];
3.4.6. Utiliser une source de données xml
L’item QtQuick XmlListModel permet d’accéder à une source de données xml et de réaliser
son analyse. Exemple :
import QtQuick.XmlListModel 2.0
XmlListModel {
id: model
source: content.cachedParam("url")
query: "/rss/channel/item"
XmlRole { name: "title"; query: 'title/string()' }
XmlRole { name: "description"; query: 'description/string()' }
XmlRole { name: "image"; query: 'enclosure/@url/string()' }
onStatusChanged: {
if(status == XmlListModel.Error) { widget.nextContent();
}
if(status == XmlListModel.Ready) {
if(count<1) { widget.nextContent(); }
console.log("news count: " + count);
for(var i = 0; i < count; i++)
19
www.neotess.fr
Tél : + 33 (0) 477 91 21 91
console.log("news: " + model.get(i).title);
} } }
3.4.7. Inclure un contenu de la Bibliothèque
L’utilisateur peut choisir un contenu de la bibliothèque au moyen de propriété de type
CONTENT ou IMAGECONTENT. Dans widget.xml :
<param type="CONTENT" name="contenu" label="Un contenu de la Bibliotheque"/>
Celui-ci peut être inséré dans widget.qml. Exemple :
Content {
id: contentItem
anchors.fill: parent
source: content.param("contenu")
onContentEnd: { widget.nextContent(); }
}
3.5.
Référence
3.5.1. Item Widget
L’item QML Widget est utilisé comme la racine de tout widget. Il dispose des méthodes de
démarrage et d’arrêt du widget.
Méthodes :
start()
Réimplémentée dans le widget, est appelée à chaque démarrage de l’animation du widget.
Est utilisée pour démarrer les animations du widget, charger et analyser les données
externes, etc.
stop()
Réimplémentée dans le widget, est appelée avant le démarrage du contenu suivant.
20
www.neotess.fr
Tél : + 33 (0) 477 91 21 91
Est utilisée pour arrêter les animations du widget et décharger les objet volumineux en RAM
(pour libérer des ressources pour l’animation des autres contenus).
nextContent()
Déclenche la fin de l’affichage du widget en vue de l’affichage du contenu suivant.
Doit être appelé par le widget notamment dans les cas suivants :
3.5.2. Dans la méthode start() lorsque le widget n’est pas prêt à être affiché Objet
content
L’objet content est accessible globalement dans le code javascript du widget. Il donne accès
à des informations relatives au contenu.
Méthodes :
int content.width() : retourne la largeur de la zone dans laquelle est affiché le contenu
int content.height() : retourne la hauteur de la zone dans laquelle est affiché le contenu
int content.duration() : retourne la durée en secondes du contenu
bool content.isLoop() : retourne true si le contenu doit reboucler sur lui-même
string content.name() : retourne le nom du contenu dans la Bibliothèque
string content.url() : retourne l'url absolue du contenu dans le système de fichiers
string content.uuid() : retourne l'uuid associé au contenu
string content.param(nom du paramètre) : retourne la valeur du paramètre nommé ou
chaine vide si erreur. Le nom du paramètre est l'un de ceux déclarés dans widget.xml ; la
valeur est celle renseignée par l'utilisateur dans le fichier Contenu (anciennes appellations :
content.p())
string content.cacheParamFile(nom du paramètre) : si le nom du paramètre est
déclaré dans widget.xml comme de type RSS, et si le fichier se trouvant à l'URL saisie par
l'utilisateur a été correctement mis en cache et n'est pas expiré, alors retourne l'url absolue
de ce fichier dans la cache. Retourne une chaine vide si erreur (anciennes appellations :
content.pc() ou content.cachedParam())
21
www.neotess.fr
Tél : + 33 (0) 477 91 21 91
string content.cacheParamContent(nom du paramètre, int length) : comme
cacheParamFile, mais retourne les length premiers caractères du fichier, ou chaîne vide si
erreur.
string content.cacheUrlFile(url, int refresh, int expires) : demande la mise
en cache du fichier se trouvant à l'URL. Retourne l'url absolue de ce fichier dans la cache si le
fichier est déjà disponible et pas expiré ou chaine vide sinon. refresh est le délai en secondes
de rafraichissement de la cache. expires est l'âge en secondes après lequel le contenu en
cache est trop vieux pour être utilisé.
string content.cacheUrlContent(url, int length, int refresh, int expires) :
comme cacheUrlFile, mais retourne les length premiers caractères du fichier, ou chaîne vide
si erreur.
string content.skinName() : retourne le nom de la skin associee au contenu, ou une
chaine vide si aucune skin n'est sélectionnée
string content.skinAttribute(nom d'élément, nom d'attribut) : retourne la valeur
de l'attribut de l'élément du fichier skin.xml de la Skin sélectionnée. Pour cela, un param de
type SKINS doit être présent dans widget.xml.
string content.skinUrl(url) : url doit être le nom d'un fichier présent dans toutes les
skins du Widget. Retourne l'url absolue de ce fichier, dans le répertoire de la Skin
sélectionnée. Pour cela, un param de type SKINS doit être présent dans widget.xml.
int content.scaleX(int) : retourne la valeur int multipliée par l'étirement sur l'axe X
int content.scaleY(int) : retourne la valeur int multipliée par l'étirement sur l'axe Y
int content.scaleXY(int) : retourne la valeur int multipliée par l'étirement
homothétique
void content.log(string) : enregistre la chaîne string dans le log du processus NeoPlayer
string urlForContent(string) : retourne le chemin d’accès du contenu dont l’url
Neotess est string
3.5.3. Item SkinLayout (correspond aux composants SkinBackground ou SkinCell)
Une Skin auto-génère des composants QML SkinBackground et SkinCell qu’il est possible
d’insérer dans widget.qml.
22
www.neotess.fr
Tél : + 33 (0) 477 91 21 91
Ces composants contiennent eux-mêmes des items QtQuick enfants pré-paramétrés avec
les paramètres de la Skin et qu’il est possible de modifier dynamiquement.
Méthodes :
setProperty(areaName, property, value) : donne la valeur value à la propriété property
de l’item areaName
string getProperty(areaName, property) : retourne la valeur de la propriété property
de l’item areaName
setValue(areaName, value) : selon le type de l’item areaName, change le texte ou l’url de
l’image
string value(areaName) : selon le type de l’item areaName, retourne le texte ou l’url de
l’image
object area(areaName) : retourne l’élément QML nommé areaName
3.5.4. Objet SkinComponent
Propriété source
Propriété item
Propriété skin
3.5.5. Objet ShellItem
Propriété command
Méthode execute()
Méthode kill()
3.5.6. Objet ServerEventItem
Propriété interval (ms). Par defaut 15000
Propriété serverUrl
23
www.neotess.fr
Tél : + 33 (0) 477 91 21 91
Développer un Flash pour Neotess
Une animation Flash (fichier avec extension .swf) peut être est affichée par le Player Neotess.
Lorsque diffusée seule, elle est affichée à l'écran de manière permanente. Pour cette raison, il
est recommandé à son concepteur de réaliser une animation rebouclant sur elle-même.
Lorsque diffusée en Playlist ou en Template, elle est affichée à l'écran pendant la durée
spécifiée par l'utilisateur dans la Playlist ou la Template. Lorsque l'utilisateur n'est pas le
concepteur de l'animation, il lui est alors recommandé de mesurer la durée de l'animation
en secondes afin de préciser sa durée la plus juste dans la Playlist ou la Template.
Lorsqu'une animation est conçue pour son affichage sur Neotess, son concepteur peut alors
utiliser les fonctions de contrôle depuis le code de l'animation flash :
fonction javavascript firstFrame() : appelé au démarrage de l'animation, a pour effet d'ignorer
la durée spécifiée par l'utilisateur afin que l'animation ne soit pas interrompue
arbitrairement. Si elle n'est pas utilisée, alors l'utilisateur doit spécifier une durée de lecture
plus importante que la durée de l'animation afin que celle-ci ne soit pas interrompue avant
sa fin. Ceci peut être utilisé comme "Chien de garde" en cas de plantage de l'animation.
fonction javascript lastFrame() : appelé à la fin de l'animation, signale la fin de sa lecture. Il
déclenche la lecture du contenu suivant ou bien le redémarrage du contenu flash.
Exemple de code actionscript d'appel des fonctions fistFrame() et lastFrame():
//import de la class external
import flash.external.ExternalInterface ;
//nom de la fonction à appeler et le paramètre à passer
ExternalInterface.call("firstFrame");
ExternalInterface.call("lastFrame");
L'URL d'appel de l'objet flash contient un paramètre loop qui peut prendre les valeurs
suivantes
loop=true : l'animation est seule à être affichée et peut donc continuer à jouer ou
reboucler indéfiniment sans appeler la fonction lastFrame()
loop=false : l'animation n'est pas seule à jouer et doit donc appeler lastFrame() ou
bien sera terminée à l'écoulement du temps spécifié dans la Playlist ou la Template.
24

Développer un Widget pour Neotess

Transcription

Documents pareils

TP 2 - Youssef RIDENE

Mode d`emploi

Mapa Web - Alimentación.es

Annexe 4 : Créer un widget de type flux RSS

ajout d`un post-it - Premiers pas Konica Minolta

Welcome to TAFE SA English Language Services (ELS)

Plateforme de consultations juridiques AVOCAT.FR

Téléchargez le programme

Formation création site web avec Adobe Muse - Créa

L`offre de performance content Développement d`une plateforme

Mise à jour de Neotess 2012 widgets 1 vers Neotess 2014 widgets 2