Development/Tutorials/Plasma4/JavaScript/NowPlaying: Difference between revisions

From KDE TechBase
m (moved Development/Tutorials/Plasma/QtScript/NowPlaying to Development/Tutorials/Plasma/JavaScript/NowPlaying: Use the term "JavaScript" rather than "QtScript", because that's the term users know)
 
(11 intermediate revisions by 5 users not shown)
Line 1: Line 1:
== Abstract ==
{{TutorialBrowser|


This will show you some slightly more advanced techniques for dealing with data engines, and give you a useful plasmoid at the end that you can easily edit to display custom information about what your favourite media player is playing (providing, of course, that your favourite media player is supported by the <tt>nowplaying</tt> data engine).
series=JavaScript Plasmoids|


We assume you've read the [[Development/Tutorials/Plasma/QtScript/DataEngine|QtScript data engine tutorial]].
name=Now Playing: Advanced DataEngine Usage|


pre=[[../DataEngine|Getting Data: How to retreive data from a data engine]]|


== Metadata.desktop ==
next=[[../SystemMonitor|System Monitor: How to access systemmonitor data engine]]|


Create a folder for your plasmoid, and create a <tt>metadata.desktop</tt> file with the following contents:
reading=[[../API|JavaScript Plasmoid API reference]], [[../SystemMonitor|How to access systemmonitor data engine]]
}}


<code ini>
== Abstract ==
[Desktop Entry]
 
Name=Simple Now Playing
This will show you some slightly more advanced techniques for dealing with data engines, and give you a useful plasmoid at the end that you can easily edit to display custom information about what your favourite media player is playing (providing, of course, that your favourite media player is supported by the <tt>nowplaying</tt> data engine).
Comment=A simple text description of what is currently playing
Icon=applications-multimedia
Type=Service
X-KDE-ServiceTypes=Plasma/Applet
X-Plasma-API=javascript
X-Plasma-MainScript=code/main.js
X-Plasma-DefaultSize=200,100
X-KDE-PluginInfo-Author=<Your name here>
X-KDE-PluginInfo-Email=<Your email here>
X-KDE-PluginInfo-Name=simplenowplaying
X-KDE-PluginInfo-Version=1.0
X-KDE-PluginInfo-Website=http://plasma.kde.org/
X-KDE-PluginInfo-Category=Multimedia
X-KDE-PluginInfo-Depends=
X-KDE-PluginInfo-License=GPL
X-KDE-PluginInfo-EnabledByDefault=true
</code>


We assume you've read the [[Development/Tutorials/Plasma/JavaScript/DataEngine|JavaScript data engine tutorial]].


== Main script ==
== Main script ==
Line 39: Line 22:
Create a <tt>contents/code/main.js</tt> file with the following contents:
Create a <tt>contents/code/main.js</tt> file with the following contents:


<code>
<syntaxhighlight lang="javascript">
layout = new LinearLayout(plasmoid);
layout = new LinearLayout(plasmoid);
layout.setOrientation(QtVertical);
layout.orientation = QtVertical;


label = new Label();
label = new Label();
Line 48: Line 31:


function firstSource() {
function firstSource() {
var sources = plasmoid.dataEngine("nowplaying").sources;
var sources = dataEngine("nowplaying").sources;
if (sources.length) {
if (sources.length) {
return sources[0];
return sources[0];
Line 57: Line 40:
}
}


plasmoid.dataUpdate = function(name, data) {
plasmoid.dataUpdated = function(name, data) {
if (source == name) {
if (source == name) {
label.text = 'Info:\n';
label.text = 'Info:\n';
Line 68: Line 51:
source = firstSource();
source = firstSource();


npDataEngine = plasmoid.dataEngine("nowplaying");
npDataEngine = dataEngine("nowplaying");


npDataEngine.sourceRemoved.connect(function(name) {
npDataEngine.sourceRemoved.connect(function(name) {
Line 89: Line 72:
npDataEngine.connectSource(source, plasmoid, 500);
npDataEngine.connectSource(source, plasmoid, 500);
}
}
</code>
</syntaxhighlight>


It looks complicated, compared to the two previous tutorials, but there is really only one new thing, and that is that we're watching for sources appearing and disappearing.
It looks complicated, compared to the two previous tutorials, but there is really only one new thing, and that is that we're watching for sources appearing and disappearing.
Line 97: Line 80:
The magic is in listening to the <tt>sourceAdded</tt> and <tt>sourceRemoved</tt> signals of the data engine.  These, unsuprisingly, are emitted when the <tt>sources</tt> property of the data engine, which lists all known sources, changes.  Note that it may be possible to sensibly request sources that are not in the <tt>sources</tt> property of a data engine - for example, the <tt>twitter</tt> data engine has a theoretically infinite number of sources available, one for each possible twitter account, and these cannot possibly be listed in the <tt>sources</tt> property.
The magic is in listening to the <tt>sourceAdded</tt> and <tt>sourceRemoved</tt> signals of the data engine.  These, unsuprisingly, are emitted when the <tt>sources</tt> property of the data engine, which lists all known sources, changes.  Note that it may be possible to sensibly request sources that are not in the <tt>sources</tt> property of a data engine - for example, the <tt>twitter</tt> data engine has a theoretically infinite number of sources available, one for each possible twitter account, and these cannot possibly be listed in the <tt>sources</tt> property.


You can learn more about using signals and slots in QtScript in the [http://doc.trolltech.com/latest/qtscript.html QtScript documentation].  Remember that any property, signal or slot and any method tagged with <tt>Q_INVOKABLE</tt> (see the [http://api.kde.org/4.x-api/kdelibs-apidocs/plasma/html/index.html Plasma API documentation] for which methods this applies to) can be called from QtScript.
You can learn more about using signals and slots in JavaScript in the [http://doc.trolltech.com/latest/qtscript.html QtScript documentation].  Remember that any property, signal or slot and any method tagged with <tt>Q_INVOKABLE</tt> (see the [http://api.kde.org/4.x-api/kdelibs-apidocs/plasma/html/index.html Plasma API documentation] for which methods this applies to) can be called from JavaScript.


== Challenge ==
== Challenge ==


Modify <tt>plasmoid.dataUpdate</tt> to display the information you care about, rather than all the information provided by the <tt>nowplaying</tt> data engine.
Modify <tt>plasmoid.dataUpdate</tt> to display the information you care about, rather than all the information provided by the <tt>nowplaying</tt> data engine.

Latest revision as of 23:27, 11 September 2014

Now Playing: Advanced DataEngine Usage

Abstract

This will show you some slightly more advanced techniques for dealing with data engines, and give you a useful plasmoid at the end that you can easily edit to display custom information about what your favourite media player is playing (providing, of course, that your favourite media player is supported by the nowplaying data engine).

We assume you've read the JavaScript data engine tutorial.

Main script

Create a contents/code/main.js file with the following contents:

layout = new LinearLayout(plasmoid);
layout.orientation = QtVertical;

label = new Label();
layout.addItem(label);
label.text = "No player found";

function firstSource() {
	var sources = dataEngine("nowplaying").sources;
	if (sources.length) {
		return sources[0];
	} else {
		label.text = "No player found";
		return '';
	}
}

plasmoid.dataUpdated = function(name, data) {
	if (source == name) {
		label.text = 'Info:\n';
		for (var key in data) {
			label.text += key + ': ' + data[key] + '\n';	
		}
	}
}

source = firstSource();

npDataEngine = dataEngine("nowplaying");

npDataEngine.sourceRemoved.connect(function(name) {
	if (name == source) {
		source = firstSource();
		if (source) {
			npDataEngine.connect(source, plasmoid, 500);
		}
	}
});

npDataEngine.sourceAdded.connect(function(name) {
	if (!source) {
		source = name;
		npDataEngine.connect(source, plasmoid, 500);
	}
});

if (source) {
	npDataEngine.connectSource(source, plasmoid, 500);
}

It looks complicated, compared to the two previous tutorials, but there is really only one new thing, and that is that we're watching for sources appearing and disappearing.

The nowplaying data engine makes sources appear and disappear as media players come and go. This plasmoid is a little stupid and only ever watches the first source in the list, but that will be enough for us.

The magic is in listening to the sourceAdded and sourceRemoved signals of the data engine. These, unsuprisingly, are emitted when the sources property of the data engine, which lists all known sources, changes. Note that it may be possible to sensibly request sources that are not in the sources property of a data engine - for example, the twitter data engine has a theoretically infinite number of sources available, one for each possible twitter account, and these cannot possibly be listed in the sources property.

You can learn more about using signals and slots in JavaScript in the QtScript documentation. Remember that any property, signal or slot and any method tagged with Q_INVOKABLE (see the Plasma API documentation for which methods this applies to) can be called from JavaScript.

Challenge

Modify plasmoid.dataUpdate to display the information you care about, rather than all the information provided by the nowplaying data engine.