Recherche avancée

Médias (0)

Mot : - Tags -/logo

Aucun média correspondant à vos critères n’est disponible sur le site.

Autres articles (51)

  • HTML5 audio and video support

    13 avril 2011, par

    MediaSPIP uses HTML5 video and audio tags to play multimedia files, taking advantage of the latest W3C innovations supported by modern browsers.
    The MediaSPIP player used has been created specifically for MediaSPIP and can be easily adapted to fit in with a specific theme.
    For older browsers the Flowplayer flash fallback is used.
    MediaSPIP allows for media playback on major mobile platforms with the above (...)

  • Support audio et vidéo HTML5

    10 avril 2011

    MediaSPIP utilise les balises HTML5 video et audio pour la lecture de documents multimedia en profitant des dernières innovations du W3C supportées par les navigateurs modernes.
    Pour les navigateurs plus anciens, le lecteur flash Flowplayer est utilisé.
    Le lecteur HTML5 utilisé a été spécifiquement créé pour MediaSPIP : il est complètement modifiable graphiquement pour correspondre à un thème choisi.
    Ces technologies permettent de distribuer vidéo et son à la fois sur des ordinateurs conventionnels (...)

  • Librairies et binaires spécifiques au traitement vidéo et sonore

    31 janvier 2010, par

    Les logiciels et librairies suivantes sont utilisées par SPIPmotion d’une manière ou d’une autre.
    Binaires obligatoires FFMpeg : encodeur principal, permet de transcoder presque tous les types de fichiers vidéo et sonores dans les formats lisibles sur Internet. CF ce tutoriel pour son installation ; Oggz-tools : outils d’inspection de fichiers ogg ; Mediainfo : récupération d’informations depuis la plupart des formats vidéos et sonores ;
    Binaires complémentaires et facultatifs flvtool2 : (...)

Sur d’autres sites (7927)

  • Problems with Streaming a Multicast RTSP Stream with Live555

    16 juin 2014, par ALM865

    I am having trouble setting up a Multicast RTSP session using Live555. The examples included with Live555 are mostly irrelevant as they deal with reading in files and my code differs because it reads in encoded frames generated from a FFMPEG thread within my own program (no pipes, no saving to disk, it is genuinely passing pointers to memory that contain the encoded frames for Live555 to stream).

    My Live555 project that uses a custom Server Media Subsession so that I can receive data from an FFMPEG thread within my program (instead of Live555’s default reading from a file, yuk !). This is a requirement of my program as it reads in a GigEVision stream in one thread, sends the decoded raw RGB packets to the FFMPEG thread, which then in turn sends the encoded frames off to Live555 for RTSP streaming.

    For the life of me I can’t work out how to send the RTSP stream as multicast instead of unicast !

    Just a note, my program works perfectly at the moment streaming Unicast, so there is nothing wrong with my Live555 implementation (before you go crazy picking out irrelevant errors !). I just need to know how to modify my existing code to stream Multicast instead of Unicast.

    My program is way too big to upload and share so I’m just going to share the important bits :

    Live_AnalysingServerMediaSubsession.h

    #ifndef _ANALYSING_SERVER_MEDIA_SUBSESSION_HH
    #define _ANALYSING_SERVER_MEDIA_SUBSESSION_HH

    #include
    #include "Live_AnalyserInput.h"

    class AnalysingServerMediaSubsession: public OnDemandServerMediaSubsession {

    public:
     static AnalysingServerMediaSubsession*
     createNew(UsageEnvironment& env, AnalyserInput& analyserInput, unsigned estimatedBitrate,
           Boolean iFramesOnly = False,
               double vshPeriod = 5.0
               /* how often (in seconds) to inject a Video_Sequence_Header,
                  if one doesn't already appear in the stream */);

    protected: // we're a virtual base class
     AnalysingServerMediaSubsession(UsageEnvironment& env, AnalyserInput& AnalyserInput, unsigned estimatedBitrate, Boolean iFramesOnly, double vshPeriod);
     virtual ~AnalysingServerMediaSubsession();

    protected:
     AnalyserInput& fAnalyserInput;
     unsigned fEstimatedKbps;

    private:
     Boolean fIFramesOnly;
     double fVSHPeriod;

     // redefined virtual functions
     virtual FramedSource* createNewStreamSource(unsigned clientSessionId, unsigned& estBitrate);
     virtual RTPSink* createNewRTPSink(Groupsock* rtpGroupsock, unsigned char rtpPayloadTypeIfDynamic, FramedSource* inputSource);

    };

    #endif

    And "Live_AnalysingServerMediaSubsession.cpp"

    #include "Live_AnalysingServerMediaSubsession.h"
    #include
    #include
    #include

    AnalysingServerMediaSubsession* AnalysingServerMediaSubsession::createNew(UsageEnvironment& env, AnalyserInput& wisInput, unsigned estimatedBitrate,
       Boolean iFramesOnly,
       double vshPeriod) {
           return new AnalysingServerMediaSubsession(env, wisInput, estimatedBitrate,
               iFramesOnly, vshPeriod);
    }

    AnalysingServerMediaSubsession
       ::AnalysingServerMediaSubsession(UsageEnvironment& env, AnalyserInput& analyserInput,   unsigned estimatedBitrate, Boolean iFramesOnly, double vshPeriod)
       : OnDemandServerMediaSubsession(env, True /*reuse the first source*/),

       fAnalyserInput(analyserInput), fIFramesOnly(iFramesOnly), fVSHPeriod(vshPeriod) {
           fEstimatedKbps = (estimatedBitrate + 500)/1000;

    }

    AnalysingServerMediaSubsession
       ::~AnalysingServerMediaSubsession() {
    }

    FramedSource* AnalysingServerMediaSubsession ::createNewStreamSource(unsigned /*clientSessionId*/, unsigned& estBitrate) {
       estBitrate = fEstimatedKbps;

       // Create a framer for the Video Elementary Stream:
       //LOG_MSG("Create Net Stream Source [%d]", estBitrate);

       return MPEG1or2VideoStreamDiscreteFramer::createNew(envir(), fAnalyserInput.videoSource());
    }

    RTPSink* AnalysingServerMediaSubsession ::createNewRTPSink(Groupsock* rtpGroupsock, unsigned char /*rtpPayloadTypeIfDynamic*/, FramedSource* /*inputSource*/) {
       setVideoRTPSinkBufferSize();
       /*
       struct in_addr destinationAddress;
       destinationAddress.s_addr = inet_addr("239.255.12.42");

       rtpGroupsock->addDestination(destinationAddress,8888);
       rtpGroupsock->multicastSendOnly();
       */
       return MPEG1or2VideoRTPSink::createNew(envir(), rtpGroupsock);
    }

    Live_AnalyserSouce.h

    #ifndef _ANALYSER_SOURCE_HH
    #define _ANALYSER_SOURCE_HH

    #ifndef _FRAMED_SOURCE_HH
    #include "FramedSource.hh"
    #endif

    class FFMPEG;

    // The following class can be used to define specific encoder parameters
    class AnalyserParameters {
    public:
     FFMPEG * Encoding_Source;
    };

    class AnalyserSource: public FramedSource {
    public:
     static AnalyserSource* createNew(UsageEnvironment& env, FFMPEG * E_Source);
     static unsigned GetRefCount();


    public:
     static EventTriggerId eventTriggerId;

    protected:
     AnalyserSource(UsageEnvironment& env, FFMPEG *  E_Source);
     // called only by createNew(), or by subclass constructors
     virtual ~AnalyserSource();

    private:
     // redefined virtual functions:
     virtual void doGetNextFrame();

    private:
     static void deliverFrame0(void* clientData);
     void deliverFrame();


    private:
     static unsigned referenceCount; // used to count how many instances of this class currently exist
     FFMPEG * Encoding_Source;

     unsigned int Last_Sent_Frame_ID;
    };

    #endif

    Live_AnalyserSource.cpp

    #include "Live_AnalyserSource.h"
    #include  // for "gettimeofday()"
    #include "FFMPEGClass.h"

    AnalyserSource* AnalyserSource::createNew(UsageEnvironment& env, FFMPEG * E_Source) {
     return new AnalyserSource(env, E_Source);
    }


    EventTriggerId AnalyserSource::eventTriggerId = 0;

    unsigned AnalyserSource::referenceCount = 0;

    AnalyserSource::AnalyserSource(UsageEnvironment& env, FFMPEG * E_Source) : FramedSource(env), Encoding_Source(E_Source) {
     if (referenceCount == 0) {
       // Any global initialization of the device would be done here:

     }
     ++referenceCount;

     // Any instance-specific initialization of the device would be done here:
     Last_Sent_Frame_ID = 0;

     /* register us with the Encoding thread so we'll get notices when new frame data turns up.. */
     Encoding_Source->RegisterRTSP_Source(&(env.taskScheduler()), this);

     // We arrange here for our "deliverFrame" member function to be called
     // whenever the next frame of data becomes available from the device.
     //
     // If the device can be accessed as a readable socket, then one easy way to do this is using a call to
     //     envir().taskScheduler().turnOnBackgroundReadHandling( ... )
     // (See examples of this call in the "liveMedia" directory.)
     //
     // If, however, the device *cannot* be accessed as a readable socket, then instead we can implement is using 'event triggers':
     // Create an 'event trigger' for this device (if it hasn't already been done):
     if (eventTriggerId == 0) {
       eventTriggerId = envir().taskScheduler().createEventTrigger(deliverFrame0);
     }
    }

    AnalyserSource::~AnalyserSource() {
     // Any instance-specific 'destruction' (i.e., resetting) of the device would be done here:

     /* de-register this source from the Encoding thread, since we no longer need notices.. */
     Encoding_Source->Un_RegisterRTSP_Source(this);

     --referenceCount;
     if (referenceCount == 0) {
       // Any global 'destruction' (i.e., resetting) of the device would be done here:

       // Reclaim our 'event trigger'
       envir().taskScheduler().deleteEventTrigger(eventTriggerId);
       eventTriggerId = 0;
     }

    }

    unsigned AnalyserSource::GetRefCount() {
     return referenceCount;
    }

    void AnalyserSource::doGetNextFrame() {
     // This function is called (by our 'downstream' object) when it asks for new data.
     //LOG_MSG("Do Next Frame..");
     // Note: If, for some reason, the source device stops being readable (e.g., it gets closed), then you do the following:
     //if (0 /* the source stops being readable */ /*%%% TO BE WRITTEN %%%*/) {
     unsigned int FrameID = Encoding_Source->GetFrameID();
     if (FrameID == 0){
       //LOG_MSG("No Data. Close");
       handleClosure(this);
       return;
     }



     // If a new frame of data is immediately available to be delivered, then do this now:
     if (Last_Sent_Frame_ID != FrameID){
       deliverFrame();
       //DEBUG_MSG("Frame ID: %d",FrameID);
     }

     // No new data is immediately available to be delivered.  We don't do anything more here.
     // Instead, our event trigger must be called (e.g., from a separate thread) when new data becomes available.
    }

    void AnalyserSource::deliverFrame0(void* clientData) {
     ((AnalyserSource*)clientData)->deliverFrame();
    }

    void AnalyserSource::deliverFrame() {

     if (!isCurrentlyAwaitingData()) return; // we're not ready for the data yet


     static u_int8_t* newFrameDataStart;
     static unsigned newFrameSize = 0;

     /* get the data frame from the Encoding thread.. */
     if (Encoding_Source->GetFrame(&newFrameDataStart, &newFrameSize, &Last_Sent_Frame_ID)){
       if (newFrameDataStart!=NULL) {
           /* This should never happen, but check anyway.. */
           if (newFrameSize > fMaxSize) {
             fFrameSize = fMaxSize;
             fNumTruncatedBytes = newFrameSize - fMaxSize;
           } else {
             fFrameSize = newFrameSize;
           }
           gettimeofday(&fPresentationTime, NULL); // If you have a more accurate time - e.g., from an encoder - then use that instead.
           // If the device is *not* a 'live source' (e.g., it comes instead from a file or buffer), then set "fDurationInMicroseconds" here.
           /* move the data to be sent off.. */
           memmove(fTo, newFrameDataStart, fFrameSize);

           /* release the Mutex we had on the Frame's buffer.. */
           Encoding_Source->ReleaseFrame();
       }
       else {
           //AM Added, something bad happened
           //ALTRACE("LIVE555: FRAME NULL\n");
           fFrameSize=0;
           fTo=NULL;
           handleClosure(this);
       }
     }
     else {
       //LOG_MSG("Closing Connection due to Frame Error..");
       handleClosure(this);
     }


     // After delivering the data, inform the reader that it is now available:
     FramedSource::afterGetting(this);
    }

    Live_AnalyserInput.cpp

    #include "Live_AnalyserInput.h"
    #include "Live_AnalyserSource.h"


    ////////// WISInput implementation //////////

    AnalyserInput* AnalyserInput::createNew(UsageEnvironment& env, FFMPEG *Encoder) {
     if (!fHaveInitialized) {
       //if (!initialize(env)) return NULL;
       fHaveInitialized = True;
     }

     return new AnalyserInput(env, Encoder);
    }


    FramedSource* AnalyserInput::videoSource() {
     if (fOurVideoSource == NULL || AnalyserSource::GetRefCount() == 0) {
       fOurVideoSource = AnalyserSource::createNew(envir(), m_Encoder);
     }
     return fOurVideoSource;
    }


    AnalyserInput::AnalyserInput(UsageEnvironment& env, FFMPEG *Encoder): Medium(env), m_Encoder(Encoder) {
    }

    AnalyserInput::~AnalyserInput() {
     /* When we get destroyed, make sure our source is also destroyed.. */
     if (fOurVideoSource != NULL && AnalyserSource::GetRefCount() != 0) {
       AnalyserSource::handleClosure(fOurVideoSource);
     }
    }




    Boolean AnalyserInput::fHaveInitialized = False;
    int AnalyserInput::fOurVideoFileNo = -1;
    FramedSource* AnalyserInput::fOurVideoSource = NULL;

    Live_AnalyserInput.h

    #ifndef _ANALYSER_INPUT_HH
    #define _ANALYSER_INPUT_HH

    #include
    #include "FFMPEGClass.h"


    class AnalyserInput: public Medium {
    public:
     static AnalyserInput* createNew(UsageEnvironment& env, FFMPEG *Encoder);

     FramedSource* videoSource();

    private:
     AnalyserInput(UsageEnvironment& env, FFMPEG *Encoder); // called only by createNew()
     virtual ~AnalyserInput();

    private:
     friend class WISVideoOpenFileSource;
     static Boolean fHaveInitialized;
     static int fOurVideoFileNo;
     static FramedSource* fOurVideoSource;
     FFMPEG *m_Encoder;
    };

    // Functions to set the optimal buffer size for RTP sink objects.
    // These should be called before each RTPSink is created.
    #define VIDEO_MAX_FRAME_SIZE 300000
    inline void setVideoRTPSinkBufferSize() { OutPacketBuffer::maxSize = VIDEO_MAX_FRAME_SIZE; }

    #endif

    And finally the relevant code from my Live555 worker thread that starts the whole process :

       Stop_RTSP_Loop=0;
       //  MediaSession     *ms;
       TaskScheduler    *scheduler;
       UsageEnvironment *env ;
       //  RTSPClient       *rtsp;
       //  MediaSubsession  *Video_Sub;

       char RTSP_Address[1024];
       RTSP_Address[0]=0x00;

       if (m_Encoder == NULL){
           //DEBUG_MSG("No Video Encoder registered for the RTSP Encoder");
           return 0;
       }

       scheduler = BasicTaskScheduler::createNew();
       env = BasicUsageEnvironment::createNew(*scheduler);

       UserAuthenticationDatabase* authDB = NULL;
    #ifdef ACCESS_CONTROL
       // To implement client access control to the RTSP server, do the following:

       if (m_Enable_Pass){
           authDB = new UserAuthenticationDatabase;
           authDB->addUserRecord(UserN, PassW);
       }
       ////////// authDB = new UserAuthenticationDatabase;
       ////////// authDB->addUserRecord((char*)"Admin", (char*)"Admin"); // replace these with real strings
       // Repeat the above with each <username>, <password> that you wish to allow
       // access to the server.
    #endif

       // Create the RTSP server:
       RTSPServer* rtspServer = RTSPServer::createNew(*env, 554, authDB);
       ServerMediaSession* sms;

       AnalyserInput* inputDevice;


       if (rtspServer == NULL) {
           TRACE("LIVE555: Failed to create RTSP server: %s\n", env->getResultMsg());
           return 0;
       }
       else {
           char const* descriptionString = "Session streamed by \"IMC Server\"";



           // Initialize the WIS input device:
           inputDevice = AnalyserInput::createNew(*env, m_Encoder);
           if (inputDevice == NULL) {
               TRACE("Live555: Failed to create WIS input device\n");
               return 0;
           }
           else {
               // A MPEG-1 or 2 video elementary stream:
               /* Increase the buffer size so we can handle the high res stream.. */
               OutPacketBuffer::maxSize = 300000;
               // NOTE: This *must* be a Video Elementary Stream; not a Program Stream
               sms = ServerMediaSession::createNew(*env, RTSP_Address, RTSP_Address, descriptionString);

               //sms->addSubsession(MPEG1or2VideoFileServerMediaSubsession::createNew(*env, inputFileName, reuseFirstSource, iFramesOnly));

               sms->addSubsession(AnalysingServerMediaSubsession::createNew(*env, *inputDevice, m_Encoder->Get_Bitrate()));
               //sms->addSubsession(WISMPEG1or2VideoServerMediaSubsession::createNew(sms->envir(), inputDevice, videoBitrate));

               rtspServer->addServerMediaSession(sms);

               //announceStream(rtspServer, sms, streamName, inputFileName);
               //LOG_MSG("Play this stream using the URL %s", rtspServer->rtspURL(sms));

           }
       }

       Stop_RTSP_Loop=0;

       for (;;)
       {
           /* The actual work is all carried out inside the LIVE555 Task scheduler */
           env->taskScheduler().doEventLoop(&amp;Stop_RTSP_Loop); // does not return

           if (mStop) {
               break;
           }
       }

       Medium::close(rtspServer); // will also reclaim "sms" and its "ServerMediaSubsession"s
       Medium::close(inputDevice);
    </password></username>
  • How to create a widget – Introducing the Piwik Platform

    4 septembre 2014, par Thomas Steur — Development

    This is the next post of our blog series where we introduce the capabilities of the Piwik platform (our previous post was How to create a scheduled task in Piwik). This time you’ll learn how to create a new widget. For this tutorial you will need to have basic knowledge of PHP.

    What is a widget in Piwik ?

    Widgets can be added to your dashboards or exported via a URL to embed it on any page. Most widgets in Piwik represent a report but a widget can display anything. For instance a RSS feed of your corporate news. If you prefer to have most of your business relevant data in one dashboard why not display the number of offline sales, the latest stock price, or other key metrics together with your analytics data ?

    Getting started

    In this series of posts, we assume that you have already set up your development environment. If not, visit the Piwik Developer Zone where you’ll find the tutorial Setting up Piwik.

    To summarize the things you have to do to get setup :

    • Install Piwik (for instance via git).
    • Activate the developer mode : ./console development:enable --full.
    • Generate a plugin : ./console generate:plugin --name="MyWidgetPlugin". There should now be a folder plugins/MyWidgetPlugin.
    • And activate the created plugin under Settings => Plugins.

    Let’s start creating a widget

    We start by using the Piwik Console to create a widget template :

    ./console generate:widget

    The command will ask you to enter the name of the plugin the widget should belong to. I will simply use the above chosen plugin name “MyWidgetPlugin”. It will ask you for a widget category as well. You can select any existing category, for instance “Visitors”, “Live !” or “Actions”, or you can define a new category, for instance your company name. There should now be a file plugins/MyWidgetPlugin/Widgets.php which contains already some examples to get you started easily :

    1. class Widgets extends \Piwik\Plugin\Widgets
    2. {
    3.     /**
    4.      * Here you can define the category the widget belongs to. You can reuse any existing widget category or define your own category.
    5.      * @var string
    6.      */
    7.     protected $category = 'ExampleCompany';
    8.  
    9.     /**
    10.      * Here you can add one or multiple widgets. You can add a widget by calling the method "addWidget()" and pass the name of the widget as well as a method name that should be called to render the widget. The method can be defined either directly here in this widget class or in the controller in case you want to reuse the same action for instance in the menu etc.
    11.      */
    12.     protected function init()
    13.     {
    14.         $this-&gt;addWidget('Example Widget Name', $method = 'myExampleWidget');
    15.         $this-&gt;addWidget('Example Widget 2',    $method = 'myExampleWidget', $params = array('myparam' =&gt; 'myvalue'));
    16.     }
    17.  
    18.     /**
    19.      * This method renders a widget as defined in "init()". It's on you how to generate the content of the widget. As long as you return a string everything is fine. You can use for instance a "Piwik\View" to render a twig template. In such a case don't forget to create a twig template (eg. myViewTemplate.twig) in the "templates" directory of your plugin.
    20.      *
    21.      * @return string
    22.      */
    23.     public function myExampleWidget()
    24.     {
    25.         $view = new View('@MyWidgetPlugin/myViewTemplate');
    26.         return $view-&gt;render();
    27.     }
    28. }

    Télécharger

    As you might have noticed in the generated template we put emphasis on adding comments to explain you directly how to continue and where to get more information. Ideally this saves you some time and you don’t even have to search for more information on our developer pages. The category is defined in the property $category and can be changed at any time. Starting from Piwik 2.6.0 the generator will directly create a translation key if necessary to make it easy to translate the category into any language. Translations will be a topic in one of our future posts until then you can explore this feature on our Internationalization guide.

    A simple example

    We can define one or multiple widgets in the init method by calling addWidget($widgetName, $methodName). To do so we define the name of a widget which will be seen by your users as well as the name of the method that shall render the widget.

    protected $category = 'Example Company';

    public function init()
    {
       // Registers a widget named 'News' under the category 'Example Company'.
       // The method 'myCorporateNews' will be used to render the widget.
       $this-&gt;addWidget('News', $method = 'myCorporateNews');
    }

    public function myCorporateNews()
    {
       return file_get_contents('http://example.com/news');
    }

    This example would display the content of the specified URL within the widget as defined in the method myCorporateNews. It’s on you how to generate the content of the widget. Any string returned by this method will be displayed within the widget. You can use for example a View to render a Twig template. For simplification we are fetching the content from another site. A more complex version would cache this content for faster performance. Caching and views will be covered in one of our future posts as well.

    Example Widget

    Did you know ? To make your life as a developer as stress-free as possible the platform checks whether the registered method actually exists and whether the method is public. If not, Piwik will display a notification in the UI and advice you with the next step.

    Checking permissions

    Often you do not want to have the content of a widget visible to everyone. You can check for permissions by using one of our many convenient methods which all start with \Piwik\Piwik::checkUser*. Just to introduce some of them :

    // Make sure the current user has super user access
    \Piwik\Piwik::checkUserHasSuperUserAccess();

    // Make sure the current user is logged in and not anonymous
    \Piwik\Piwik::checkUserIsNotAnonymous();

    And here is an example how you can use it within your widget :

    public function myCorporateNews()
    {
       // Make sure there is an idSite URL parameter
       $idSite = Common::getRequestVar('idSite', null, 'int');

       // Make sure the user has at least view access for the specified site. This is useful if you want to display data that is related to the specified site.
       Piwik::checkUserHasViewAccess($idSite);

       $siteUrl = \Piwik\Site::getMainUrlFor($idSite);

       return file_get_contents($siteUrl . '/news');
    }

    In case any condition is not met an exception will be thrown and an error message will be presented to the user explaining that he does not have enough permissions. You’ll find the documentation for those methods in the Piwik class reference.

    How to test a widget

    After you have created your widgets you are surely wondering how to test it. First, you should write a unit or integration test which we will cover in one of our future blog posts. Just one hint : You can use the command ./console generate:test to create a test. To manually test a widget you can add a widget to a dashboard or export it.

    Publishing your Plugin on the Marketplace

    In case you want to share your widgets with other Piwik users you can do this by pushing your plugin to a public GitHub repository and creating a tag. Easy as that. Read more about how to distribute a plugin.

    Advanced features

    Isn’t it easy to create a widget ? We never even created a file ! Of course, based on our API design principle “The complexity of our API should never exceed the complexity of your use case.” you can accomplish more if you want : You can clarify parameters that will be passed to your widget, you can create a method in the Controller instead of the Widget class to make the same method also reusable for adding it to the menu, you can assign different categories to different widgets, you can remove any widgets that were added by the Piwik core or other plugins and more.

    Would you like to know more about widgets ? Go to our Widgets class reference in the Piwik Developer Zone.

    If you have any feedback regarding our APIs or our guides in the Developer Zone feel free to send it to us.

  • How to add new pages and menu items to Piwik – Introducing the Piwik Platform

    11 septembre 2014, par Thomas Steur — Development

    This is the next post of our blog series where we introduce the capabilities of the Piwik platform (our previous post was How to create a widget). This time you’ll learn how to extend Piwik by adding new pages and menu items. For this tutorial you will need to have basic knowledge of PHP and optionally of Twig which is the template engine we use.

    What can be displayed in a page ?

    To make it short : You can display any corporate related content, key metrics, news, help pages, custom reports, contact details, information about your server, forms to manage any data and anything else.

    Getting started

    In this series of posts, we assume that you have already set up your development environment. If not, visit the Piwik Developer Zone where you’ll find the tutorial Setting up Piwik.

    To summarize the things you have to do to get setup :

    • Install Piwik (for instance via git).
    • Activate the developer mode : ./console development:enable --full.
    • Generate a plugin : ./console generate:plugin --name="MyControllerPlugin". There should now be a folder plugins/MyControllerPlugin.
    • And activate the created plugin under Settings => Plugins.

    Let’s start creating a page

    We start by using the Piwik Console to create a new page :

    ./console generate:controller

    The command will ask you to enter the name of the plugin the controller should belong to. I will simply use the above chosen plugin name “MyControllerPlugin”. There should now be two files plugins/MyControllerPlugin/Controller.php and plugins/MyControllerPlugin/templates/index.twig which both already contain an example to get you started easily :

    Controller.php

    1. class Controller extends \Piwik\Plugin\Controller
    2. {
    3.     public function index()
    4.     {
    5.         return $this-&gt;renderTemplate('index', array(
    6.              'answerToLife' =&gt; 42
    7.         ));
    8.     }
    9. }

    Télécharger

    and templates/index.twig

    1. {% extends 'dashboard.twig' %}
    2.  
    3. {% block content %}
    4.     &lt;strong&gt;Hello world!&lt;/strong&gt;
    5.     &lt;br/&gt;
    6.  
    7.     The answer to life is {{ answerToLife }}
    8. {% endblock %}

    Télécharger

    Note : If you are generating the Controller before Piwik 2.7.0 the example will look slightly different.

    The controller action index assigns the view variable answerToLife to the view and renders the Twig template templates/index.twig. Any variable assigned this way can then be used in the view using for example {{ answerToLife }}.

    Using a Twig template to generate the content of your page is actually optional : instead feel free to generate any content as desired and return a string in your controller action.

    As the above template index.twig is extending the dashboard template the Logo as well as the top menu will automatically appear on top of your content which is defined within the block content.

    Rendered page content

    How to display the page within the admin

    If you would like to add the admin menu on the left you have to modify the following parts :

    • Extend \Piwik\Plugin\ControllerAdmin instead of \Piwik\Plugin\Controller in the file Controller.php. In a future version of Piwik this step will be no longer neccessary, see #6151
    • Extend the template admin.twig instead of dashboard.twig
    • Define a headline using an H2-element
    1. {% extends 'admin.twig' %}
    2.  
    3. {% block content %}
    4.     &lt;h2&gt;Hello world!&lt;/h2&gt;
    5.     &lt;br/&gt;
    6.  
    7.     The answer to life is {{ answerToLife }}
    8. {% endblock %}

    Télécharger

    Note : Often one needs to add a page to the admin to make a plugin configurable. We have a unified solution for this using the Settings API.

    Admin page

    How to display a blank page

    If you would like to generate a blank page that shows only your content the template should contain only your markup as follows :

    1. &lt;strong&gt;Hello world!&lt;/strong&gt;
    2. &lt;br/&gt;
    3.  
    4. The answer to life is {{ answerToLife }}

    Télécharger

    Predefined variables, UI components, security and accessing query parameters

    In this blog post we only cover the basics to get you started. We highly recommend to read the MVC guide on our developer pages which covers some of those advanced topics. For instance you might be wondering how to securely access $_GET or $_POST parameters, you might want to restrict the content of your page depending on a user role, and much more.

    If you would like to know how to make use of JavaScript, CSS and Less have a look at our Working with Piwik’s UI guide.

    Note : How to include existing UI components such as a site selector or a date selector will be covered in a future blog post. Also, there are default variables assigned to the view depending on the context. A list of those variables that may or may not be defined is unfortunately not available yet but we will catch up on this.

    Let’s add a menu item to make the page accessible

    So far you have created a page but you can still not access it. Therefore we need to add a menu item to one of the Piwik menus. We start by using the Piwik Console to create a menu template :

    ./console generate:menu

    The command will ask you to enter the name of the plugin the menu should belong to. I will use again the above chosen plugin name “MyControllerPlugin”. There should now be a file plugins/MyControllerPlugin/Menu.php which contains an example to get you started easily :

    Menu.php

    1. class Menu extends \Piwik\Plugin\Menu
    2. {
    3.     public function configureUserMenu(MenuUser $menu)
    4.     {
    5.         // reuse an existing category.
    6.         $menu-&gt;addManageItem('My User Item', $this-&gt;urlForAction('showList'));
    7.  
    8.         // or create a custom category
    9.         $menu-&gt;addItem('My Custom Category', 'My User Item', $this-&gt;urlForDefaultAction());
    10.     }
    11. }

    Télécharger

    This is only a part of the generated template since all the examples of the different menus are similar. You can add items to four menus :

    • configureReportingMenu To add a new item to the reporting menu which includes all the reports like “Actions” and “Visitors”.
    • configureAdminMenu To add a new item to the admin menu which includes items like “User settings” and “Websites”.
    • configureTopMenu To add a new item to the top menu which includes items like “All Websites” and “Logout”.
    • configureUserMenu To add a new item to the user menu which is accessible when clicking on the username on the top right.

    In this blog post we will add a new item to the user menu and to do so we adjust the generated template like this :

    1. class Menu extends \Piwik\Plugin\Menu
    2. {
    3.     public function configureUserMenu(MenuUser $menu)
    4.     {
    5.         $menu-&gt;addManageItem('My User Item', $this-&gt;urlForAction($method = 'index'), $orderId = 30);
    6.     }
    7. }

    Télécharger

    That’s it. This will add a menu item named “My User Item” to the “Manage” section of the user menu. When a user chooses the menu item, the “index” method of your controller will be executed and your previously created page will be first rendered and then displayed. Optionally, you can define an order to influence the position of the menu item within the manage section. Following this example you can add an item to any menu for any action. I think you get the point !

    User menu

    Note : In Piwik 2.6.0 and before the above example would look like this :

    1. class Menu extends \Piwik\Plugin\Menu
    2. {
    3.     public function configureUserMenu(MenuUser $menu)
    4.     {
    5.         $menu-&gt;addManageItem('My User Item', array($module = 'MyControllerPlugin', $action = 'index'), $orderId = 30);
    6.     }
    7. }

    Télécharger

    How to test a page

    After you have created your page you are surely wondering how to test it. A controller should be usually very simple as it is only the connector between model and view. Therefore, we do usually not create unit or integration test for controllers and for the view less than ever. Instead we would create a UI test that takes a screenshot of your page and compares it with an expected screenshot. Luckily, there is already a section UI tests in our Automated tests guide.

    Publishing your Plugin on the Marketplace

    In case you want to share your page with other Piwik users you can do this by pushing your plugin to a public GitHub repository and creating a tag. Easy as that. Read more about how to distribute a plugin.

    Advanced features

    Isn’t it easy to create a page ? We never even created a file ! Of course, based on our API design principle “The complexity of our API should never exceed the complexity of your use case.” you can accomplish more if you want : You can make use of Vanilla JavaScript, jQuery, AngularJS, Less and CSS, you can reuse UI components, you can access query parameters and much more.

    Would you like to know more about this ? Go to our MVC (Model-View-Controller) and Working with Piwik’s UI guides in the Piwik Developer Zone.

    If you have any feedback regarding our APIs or our guides in the Developer Zone feel free to send it to us.