Kodi Community Forum
MediaFrontPage - Web interface with widget type architecture to control multiple apps - Printable Version

+- Kodi Community Forum (https://forum.kodi.tv)
+-- Forum: Support (https://forum.kodi.tv/forumdisplay.php?fid=33)
+--- Forum: Supplementary Tools for Kodi (https://forum.kodi.tv/forumdisplay.php?fid=116)
+--- Thread: MediaFrontPage - Web interface with widget type architecture to control multiple apps (/showthread.php?tid=83304)



- mdaddy - 2011-08-21

_Mikie_ Wrote:Personally instead of going through all the hassle of editing configs and ini's and because you don't know exactly what everything links to rather just hard code the values into the widget and then when you update your install just back up a copy of your layout and that widget. I haven't looked at the widget though so I don't know how much work it entails. I'll look at it later next week and maybe make a branch with it in so you can just download it from there with everything in place

Ok, job done. I think the longest part was figuring out that I had to change the front.css file too!

Otherwise, I only had to hardcode a specific json service uri in my widget.php as you suggested:

It was a bit tricky to find all the variables (local PHP variables, global PHP variables, and embedded javascript variables) I had to rename to <name2>.

$results = jsonmethodcall("VideoPlaylist.GetItems");

becomes

$results = jsonmethodcall("VideoPlaylist.GetItems", array(), 'http://antec.local:8080/jsonrpc');

$ cat front.css
Code:
/* wNOWPLAYING */
#wNowPlaying img, #wNowPlaying2 img {
    float: left;
    padding: 0 5px 5px 0;
    max-height: 100px;
    max-width: 100px;
}
#wNowPlaying div.progressbar, #wNowPlaying2 div.progressbar {
    width: 100%;
    height: 10px;
    clear:both;
}
#wNowPlaying div.controls, #wNowPlaying2 div.controls {
    margin-top:5px;
}
#wNowPlaying .playlist-item, #wNowPlaying2 .playlist-item2 {
    display: block;
    height:100px;
    margin-top:15px;
}
#wNowPlaying #thumbblock img, #wNowPlaying2 #thumbblock2 img {
    /* border: 1px solid #000; */
    border: none;
}

$ diff wNowPlaying2.php wNowPlaying.php
Code:
2,13c2,13
< $wdgtNowPlayingAjax2 = array("type" => "ajax", "block" => "nowplayingwrapper2", "call" => "widgets/wNowPlaying2.php?ajax=w", "interval" => 1000);
< $wdgtNowPlayingControls2 = array("type" => "inline", "function" => "widgetNowPlayingControls2();", "headerfunction" => "widgetNowPlayingHeader2();");
< $wdgtNowPlaying2 = array("name" => "Now Playing2", "type" => "mixed", "parts" => array($wdgtNowPlayingAjax2, $wdgtNowPlayingControls2));
< $wIndex["wNowPlaying2"] = $wdgtNowPlaying2;
<
< function widgetNowPlayingControls2($baseurl = "") {
<     echo "<div id=\"nowplaying-controls2\" class=\"controls\">\n";
<     echo "\t".anchorControlButton2($baseurl, 'SkipPrevious', 'btnSkipBackward.png', 'Skip Back')."\n";
<     echo "\t".anchorControlButton2($baseurl, 'PlayPause', 'btnPlayPause.png', 'Play/Pause')."\n";
<     echo "\t".anchorControlButton2($baseurl, 'Stop', 'btnStop.png')."\n";
<     echo "\t".anchorControlButton2($baseurl, 'SkipNext', 'btnSkipForward.png', 'Skip Next')."\n";
<     echo "\t".anchorControlButton2($baseurl, 'ShowPlaylist', 'btnPlayList.png')."\n";
---
> $wdgtNowPlayingAjax = array("type" => "ajax", "block" => "nowplayingwrapper", "call" => "widgets/wNowPlaying.php?ajax=w", "interval" => 1000);
> $wdgtNowPlayingControls = array("type" => "inline", "function" => "widgetNowPlayingControls();", "headerfunction" => "widgetNowPlayingHeader();");
> $wdgtNowPlaying = array("name" => "Now Playing", "type" => "mixed", "parts" => array($wdgtNowPlayingAjax, $wdgtNowPlayingControls));
> $wIndex["wNowPlaying"] = $wdgtNowPlaying;
>
> function widgetNowPlayingControls($baseurl = "") {
>     echo "<div id=\"nowplaying-controls\" class=\"controls\">\n";
>     echo "\t".anchorControlButton($baseurl, 'SkipPrevious', 'btnSkipBackward.png', 'Skip Back')."\n";
>     echo "\t".anchorControlButton($baseurl, 'PlayPause', 'btnPlayPause.png', 'Play/Pause')."\n";
>     echo "\t".anchorControlButton($baseurl, 'Stop', 'btnStop.png')."\n";
>     echo "\t".anchorControlButton($baseurl, 'SkipNext', 'btnSkipForward.png', 'Skip Next')."\n";
>     echo "\t".anchorControlButton($baseurl, 'ShowPlaylist', 'btnPlayList.png')."\n";
16c16
<     echo "<div id=\"nowplaying-list2\"></div>\n";
---
>     echo "<div id=\"nowplaying-list\"></div>\n";
18c18
< function widgetNowPlayingHeader2() {
---
> function widgetNowPlayingHeader() {
22,28c22,28
<             function cmdNowPlaying2(cmd) {
<                 var cmdXbmcPlayingRequest2 = new ajaxRequest();
<                 cmdXbmcPlayingRequest2.open("GET", "widgets/wNowPlaying2.php?ajax=c&command="+cmd, true);
<                     cmdXbmcPlayingRequest2.onreadystatechange = function() {
<                         if (cmdXbmcPlayingRequest2.readyState==4) {
<                             if (cmdXbmcPlayingRequest2.status==200 || window.location.href.indexOf("http")==-1) {
<                                 document.getElementById("nowplaying-list2").innerHTML=cmdXbmcPlayingRequest2.responseText;
---
>             function cmdNowPlaying(cmd) {
>                 var cmdXbmcPlayingRequest = new ajaxRequest();
>                 cmdXbmcPlayingRequest.open("GET", "widgets/wNowPlaying.php?ajax=c&command="+cmd, true);
>                     cmdXbmcPlayingRequest.onreadystatechange = function() {
>                         if (cmdXbmcPlayingRequest.readyState==4) {
>                             if (cmdXbmcPlayingRequest.status==200 || window.location.href.indexOf("http")==-1) {
>                                 document.getElementById("nowplaying-list").innerHTML=cmdXbmcPlayingRequest.responseText;
35c35
<                 cmdXbmcPlayingRequest2.send(null);
---
>                 cmdXbmcPlayingRequest.send(null);
44c44
< function anchorControlButton2($baseurl, $cmd, $img = "", $label = "") {
---
> function anchorControlButton($baseurl, $cmd, $img = "", $label = "") {
55c55
<         $anchorlink = "onclick=\"cmdNowPlaying2('".$cmd."');\" href=\"#\"";
---
>         $anchorlink = "onclick=\"cmdNowPlaying('".$cmd."');\" href=\"#\"";
60,61c60,61
< function displayNowPlaying2($baseurl = "") {
<     $xbmcimgpath = "http://antec.local:8080/vfs/";
---
> function displayNowPlaying($baseurl = "") {
>     global $xbmcimgpath;
64c64
<         processCommand2($_GET['cmd']);
---
>         processCommand($_GET['cmd']);
67c67
<     echo "<div id=\"nowplaying2\">\n";
---
>     echo "<div id=\"nowplaying\">\n";
70c70
<     $results = jsonmethodcall("Player.GetActivePlayers", array(), 'http://antec.local:8080/jsonrpc');
---
>     $results = jsonmethodcall("Player.GetActivePlayers");
74c74
<         $jsonVersion = jsonmethodcall("JSONRPC.Version", array(), 'http://antec.local:8080/jsonrpc'); //pull the JSON version # from XBMC
---
>         $jsonVersion = jsonmethodcall("JSONRPC.Version"); //pull the JSON version # from XBMC
78c78
<             $results = jsonmethodcall("VideoPlaylist.GetItems", array(), 'http://antec.local:8080/jsonrpc'); //Pull the current "playlist"
---
>             $results = jsonmethodcall("VideoPlaylist.GetItems"); //Pull the current "playlist"
152c152
<             $results = jsonmethodcall("VideoPlaylistV3.GetItems", array(), 'http://antec.local:8080/jsonrpc'); //Pull the current "playlist"
---
>             $results = jsonmethodcall("VideoPlaylistV3.GetItems"); //Pull the current "playlist"
223c223
<                 echo "\t<div id=\"thumbblock2\" class=\"thumbblockvideo\">\n";
---
>                 echo "\t<div id=\"thumbblock\" class=\"thumbblockvideo\">\n";
234c234
<             echo "\t\t<p>".$line3."</p>\n";
---
>             echo "\t\t<p>".$line3."</p>\n"; // Plot Summary
236c236
<         $results = jsonmethodcall("VideoPlayer.GetTime", array(), 'http://antec.local:8080/jsonrpc');
---
>         $results = jsonmethodcall("VideoPlayer.GetTime");
262c262
<         $results = jsonmethodcall("VideoPlayer.GetPercentage", array(), 'http://antec.local:8080/jsonrpc');
---
>         $results = jsonmethodcall("VideoPlayer.GetPercentage");
267c267
<             widgetNowPlayingControls2($baseurl);
---
>             widgetNowPlayingControls($baseurl);
271c271
<         $results = jsonmethodcall("AudioPlaylist.GetItems", array(), 'http://antec.local:8080/jsonrpc');
---
>         $results = jsonmethodcall("AudioPlaylist.GetItems");
280c280
<             echo "\t<div id=\"thumbblock2\" class=\"thumbblockaudio\">\n";
---
>             echo "\t<div id=\"thumbblock\" class=\"thumbblockaudio\">\n";
295c295
<         $results = jsonmethodcall("AudioPlayer.GetTime", array(), 'http://antec.local:8080/jsonrpc');
---
>         $results = jsonmethodcall("AudioPlayer.GetTime");
305c305
<         $results = jsonmethodcall("AudioPlayer.GetPercentage", array(), 'http://antec.local:8080/jsonrpc');
---
>         $results = jsonmethodcall("AudioPlayer.GetPercentage");
310c310
<             widgetNowPlayingControls2($baseurl);
---
>             widgetNowPlayingControls($baseurl);
317,318c317,318
< function processCommand2($command) {
<     $xbmcimgpath = "http://antec.local:8080/vfs/";
---
> function processCommand($command) {
>     global $xbmcimgpath;
322c322
<             $results = jsonmethodcall("Player.GetActivePlayers", array(), 'http://antec.local:8080/jsonrpc');
---
>             $results = jsonmethodcall("Player.GetActivePlayers");
326c326
<                 $results = jsonmethodcall("AudioPlaylist.GetItems", array(), 'http://antec.local:8080/jsonrpc');
---
>                 $results = jsonmethodcall("AudioPlaylist.GetItems");
342c342
<                                 echo "<div id=\"playlist-item2-".$i."\" class=\"playlist-item\">\n";
---
>                                 echo "<div id=\"playlist-item-".$i."\" class=\"playlist-item\">\n";
372c372
<         $results = jsonmethodcall("Player.GetActivePlayers", array(), 'http://antec.local:8080/jsonrpc');
---
>         $results = jsonmethodcall("Player.GetActivePlayers");
385c385
<             $results = jsonmethodcall($player.'.'.$command, array(), 'http://antec.local:8080/jsonrpc');
---
>             $results = jsonmethodcall($player.'.'.$command);
403c403
<     displayNowPlaying2();
---
>     displayNowPlaying();
412c412
<         processCommand2($command);
---
>         processCommand($command);
432c432
<         displayNowPlaying2();
---
>         displayNowPlaying();
438c438
<         displayNowPlaying2();
---
>         displayNowPlaying();



- gugahoi - 2011-08-21

Nick8888 Wrote:Could someone please explain the donation button? I couldn't find any discussion on this. Mainly which paypal account it is linked to and what the donations will be used for?

Paypayl account is linked to me. No donations yet. Deja and I discussed back then and tried to contact most of the people that do the coding (Nick, Archigos and Mikie, maybe other people too, can't remember). I was happy to just split whatever we get equally not fussed there. I just figured Deja and I were spending so much time coding for this it wouldn't hurt to get a little bit in return.


- Aenima99x - 2011-08-21

Just pulled the latest git from master and now the Coming Episodes aren't loading anymore....anyone else seeing this problem?
**EDIT** - got it fixed, the log pointed to Safe Mode set to On in the php.ini blocking access to the Coming Episodes.

Another question though, I noticed that my apache log is getting slammed with a couple errors.
File does not exist: /var/www/jsonrpc
File does not exist: /var/www/mfp/css/.css


- Nick8888 - 2011-08-21

gugahoi Wrote:Paypayl account is linked to me. No donations yet. Deja and I discussed back then and tried to contact most of the people that do the coding (Nick, Archigos and Mikie, maybe other people too, can't remember). I was happy to just split whatever we get equally not fussed there. I just figured Deja and I were spending so much time coding for this it wouldn't hurt to get a little bit in return.

While I agree it would be nice to receive something in return for the effort put into this project, it is open source with many contributors. Accepting donations causes all sorts of problems in terms of inactive/past contributors (Zarquon comes to mind. He put alot of hard work into this project in its early stages).

I started this project for my own purposes but decided to share it in an effort to give something back to the xbmc community. That is why in the past I have been happy to redirect people offering donations to xbmc's own donation system.

If you wish to maintain the donate button in your own repo then that is fine but I don't think it is something that should be in the main repo. In addition, at the very least it should have a description of who the donation is going to, for what reason (ie your contributions) and state that you are not the only developer of the MediaFrontPage project.


- tscheff - 2011-08-21

what's the easiest way to get a 3 column layout ? (without having one spare)


- DejaVu - 2011-08-21

Using my Repo it's in the settings. You change the 3 column widths (4th = 0%).

Make sure you drag all the widgets from the 4th column first.


- _Mikie_ - 2011-08-21

tscheff Wrote:what's the easiest way to get a 3 column layout ? (without having one spare)

The master will have it as soon as some other changes are decided on Smile


- DejaVu - 2011-08-21

_Mikie_ Wrote:The master will have it as soon as some other changes are decided on Smile

I was thinking - Radio buttons that activate 4 or 3 Columns...?


- gugahoi - 2011-08-22

Nick8888 Wrote:Could someone please explain the donation button? I couldn't find any discussion on this. Mainly which paypal account it is linked to and what the donations will be used for?

Nick8888 Wrote:While I agree it would be nice to receive something in return for the effort put into this project, it is open source with many contributors. Accepting donations causes all sorts of problems in terms of inactive/past contributors (Zarquon comes to mind. He put alot of hard work into this project in its early stages).

I started this project for my own purposes but decided to share it in an effort to give something back to the xbmc community. That is why in the past I have been happy to redirect people offering donations to xbmc's own donation system.

If you wish to maintain the donate button in your own repo then that is fine but I don't think it is something that should be in the main repo. In addition, at the very least it should have a description of who the donation is going to, for what reason (ie your contributions) and state that you are not the only developer of the MediaFrontPage project.

Fair enough, I'll respect your wishes as they are completely fair. However this will probably mean my pull requests will always come with my donate button...


- gugahoi - 2011-08-22

DejaVu Wrote:I was thinking - Radio buttons that activate 4 or 3 Columns...?

_Mikie_ Wrote:The master will have it as soon as some other changes are decided on Smile

Hey fellas, sorry I've been a bit MIA lately. I'm hoping to have some time this week for some coding. What is the latest news regarding layout organisation?


- DejaVu - 2011-08-22

gugahoi Wrote:Hey fellas, sorry I've been a bit MIA lately. I'm hoping to have some time this week for some coding. What is the latest news regarding layout organisation?

Checkout my Repo and see what you think. Mikie's created a Widget 'Activator' and 'Column Width' settings. Works well, although I do not suggest trying it in Firefox! Wink

EDIT- The Program Check is far better now too. Smile


- _Mikie_ - 2011-08-22

@DejaVu I like the ability to custom to any width. Like I might want a bigger middle column than you in 3 column view. I was thinking of having.

3 columns - radio button
4 columns - radio button
Custom - 4 text boxes appear on select of radio button

I ran into an issue of not knowing how to set a radio button to have multiple values though and a lack of time to try it out properly.

@gugahoi As you can see from DejaVu repo it works. I want to implement it into my repo again and then to push to master but I'm waiting on the settings push to be decided on. It would be much easier to do once that has been accepted. If you get a change please look at it and also at the ability to use drop downs with settings.

Thanks!


- DejaVu - 2011-08-22

_Mikie_ Wrote:@DejaVu I like the ability to custom to any width. Like I might want a bigger middle column than you in 3 column view. I was thinking of having.

3 columns - radio button
4 columns - radio button
Custom - 4 text boxes appear on select of radio button

Seeing as I'm a useless coder, I'm using my 'initative' to get something similar and functional.
Watch this space!

--EDIT
I have something 'funtional' I just need a way to change a value of a text box to '0' once it's hidden via CSS... I gather using Javascript.

You will still have your custom fields! Wink


- _Mikie_ - 2011-08-22

gugahoi Wrote:Fair enough, I'll respect your wishes as they are completely fair. However this will probably mean my pull requests will always come with my donate button...

Use a branch as your 'master' without the donate button and then just push that to your actual master and to the mfp repo master. It will sort it out merging wise.


- thezoggy - 2011-08-22

_Mikie_ Wrote:Use a branch as your 'master' without the donate button and then just push that to your actual master and to the mfp repo master. It will sort it out merging wise.

jesus why have so many versions of the same app.. why not just have someone create an organization and add all these people as teams. have the offical repo and then x+y can have their unoffical repo in the same spot with their changes.. then you can just merge + cherry pick their changes into the offical repo if need be