[mario661]

Hi all,

First of all - don't comment on the name yet. I could not think of anything else for the moment.

Inspired by LCDproc (and my up to today useless build-in TFT screen in my PC chassis), I would like to share my hours of work I did up to now.

What it's NOT:
This web interface is NOT a remote. There are several very nice interfaces for that. Could not add to it if I wanted to, I think.

So what it IS:
If you know LCDProc, you can imagine how easy it can be navigating though Kodi (often for music) so you don't need to turn on your TV.
If you, like me, "upgraded" to a build-in TFT screen (instead of the LCD display) and came to the conclusion that it would be very cool to see similar stuff on it, well - this might be the plugin for you! It's a web interface that will show you your currently playing media or your place in Kodi while you navigate though the menus and libraries.

OK, now a word of caution: I have build this from the ground up. It's far from a complete solution, but you should find that the above description should work perfectly for you. Use Chrome or Firefox in fullscreen mode (check to see what works best for you) and give it a go. I did this work for myself to start with, but thought it would be nice to share it. Look at it, tinker with it. If you think you can add to the project, please do.

So WHERE it is:
For the time being, please download from here:
http://www.oldfield.nl/webinterface.porthole-0.3.zip (updated on May 1, 2015)

Additional info:
This web interface relies solely on websockets. You need to make sure it's running on your default port (9090) and can be accessed and is enabled in the system settings of Kodi.

I will add this project to GitHub if there is enough interest and the project is somewhat more mature.

Have fun with it, hopefully as much as I had creating this.

Mario.

[Mizaki]

Re: Where. Just use github like almost everyone else It's free and when you are ready to go into the official repo there are lots of examples on pull requests.

[tuxfuxch]

Hi,

did not investigate very closely, but in line 250 (in my version):


this.ws = new WebSocket('ws://' + window.location.hostname + ':9090/jsonrpc');

does not work. linux and firefox in my case. also when i adjusted the port it did not work.
The port is hardcoded, which is not ideal (well in alpha it's ok i guess )

when i adjust it hardcoded to my situation it does not work eighter (here is where i stoped looking into it... sorry):
this.ws = new WebSocket('ws://localhost:8088/jsonrpc');//maybe i don't know how to do it properly... asume i am an idiot

i don't know about websocket, maybe you have a good reason to do it.

here is how i do it:
================
jQuery.ajax({
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
type: "POST",
async: async,
'url': '/jsonrpc?' + name,
'data': data,
'dataType': 'json',
'success': success
});
===================

there should also be a readme, with attribution for the artwork, which seems not to be from you. unless it's public domain, you need to attribute.

i also use github. i read into the topic for my interface, and it was totaly worth it.

[tuxfuxch]

oh btw: it would also be an idea, that you change the backgroud to the fanart of the playing media, if there is something playing.
on the other hand, it might be difficult, when the screens are very different (wide screen vs "the opposite")

[mario661]

Hi,
It's default port 9090 for websockets, i think you are trying the regular http port which does not work. And when you get it working, you will see the background fanart. ;-)
Anyway, please check your firewall settings. You can test by opening a telnet session to localhost 9090. On my Kodi system, under Settings-Services-Remote Control I had to turn on BOTH "allow programs on this system to control Kodi" and "Allow programs on other systems to control Kodi" AND restarted Kodi after turning them on to get the websocket port 9090 to respond (even though I tried to open telnet to 9090 via localhost. For development I used the windows version, so I just tried which Ubuntu settings were needed. Try this, should work. Port 9090 can only be altered via the advancedsettings.xml.

To START the web interface, you need to point your browser to your normal web interface port (probably 8088 in your case judging from your text). If you see the normal (default) web interface, open the url on http:// localhost:8088/addons/ and you should find the porthole webinterface. Don't forget to restore the port in the script back to 9090.

As for the artwork: good point. I really can't remember where I found it. Would be safest to remove it alltogether. Glad it's not on github yet. ;-)))

[tuxfuxch]

Hehe,

ok the "assume i am an idot" was it then it was the second setting i had not set ("Allow programs on other systems to control Kodi"). works perfectly now.

if i may ask, what is the reason you have chosen websocket, rather than the http solution? is it something technical, or more a matter of taste?

nice work. i like it. simple and plain infoscreen. the fanart of a movie i started was a bit streched in width, but not much. maybe you could set only hight, but not width, or the other way around.

on my mobile ("high screen") it makes not so good use of space, but its okay and still looks good.

about the artwork: well it's from the default skin, so it should be under a "open" license. you would most probably not get real big problems. but it's about respect of the work of others too.

this webinterface it not something i have use for. but please keep us posted here about enhancement. i will test them.

[mario661]

I found working with websockets a lot easier then fireing a ajax request every 0.25 second. ;-) I use the css3 background style "cover" which should prevent stretching? Weird that it should stretch the image. Since my main "design" idea was for build in monitors, which are 800x600 or 1024x768 I did not have portrait displays on mind. And I surely didn't want to assume an idiot, sorry bad habbits. I am a software developer and alas sometimes get stuck in "user answering mode". :-) So don't take it personal. :-)
Thanks for giving it a spin.

[tuxfuxch]

Hey,

first of all. i said in the first post, "assume i am an idiot" and concluded in the second, that i was. so no offence taken from you, only from myselfe your answer was even a reputation point worth for me.

to the image: it's not the background, but the cover image. for music album images it's good, but not for movie images. the problem is the 35% width in img#art. when i switch it off, it apears ok. but then there is unused space between the fanart and description. i would recommend to do the image and use the rest for description. on small screens it seems not a problem, but on larger ones. for your intended form-facotor it is good i think. but maybe someone wants to use it differently as you intended. so i think it would be a good thing to meet all of them. if you need a screenshot, tell me.

edit: also, you could take away in div#details the margin-left: 37%; then it apears to be solved. but for posters with extrem width, it could look a bit funny. but it's unlikley.
it also has the advantage, that it uses full width for details if there is no fanart.

i am not a webdev and have to thanks for your hint of websocket, i will have a look into it. i indeed fire a request every second, which is not ideal.

[mario661]

Hi,

I have played around with the layout so much, I might have made it more complex than need be. so I will try your recommendations. For portrait screens, the layout might have to be much more different. I'm gonna think what I can do with that.

About websockets, I can tell that's quite easy to use. The added benefit is that the connection stays open all the time and when handled, you get events when the connection gets closed.

With regards of the messages you receive over the open connection, this is really great. You get messages when the user starts, pauses or stops playback etc. One of the things I like about my webinterface is that is will dim the display when Kodi's screensaver kicks in.

But I am rambling on. I hope to work on it some more after the weekend. Thanks for your input and reputation point.

[tuxfuxch]

Hey,

thanks. since i have your addon, i have something to try around. but i think, if i implement it, i will do it on a later release, since i had do do some major rework. don't know yet. if you tried my webinterface, you know it can do quite a few things... anyway, thanks for the hints! much appreciated!

about the layout: if you try what i said, it's not perfect, but already quite good. best you try it with a smartphone (ahhh portrait, the word i was looking for ^^)
you could maybe do something with responsive design. or i think you can handle things when it's portrait
example:
*****in this manner****
@Media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
*********

but i am sure you know better about that than me.

happy playing around and keep us posted here what is happening.

btw: i really like the dimming thing,

[Mizaki]

Got it installed now. I like the simpleness of the task

If you want to to crib some stuff from AWXi it can do the following in fullscreen:
Extra fan art rotating
Lyrics (follow along with right format)
Control keys (send left, right, enter, etc.)

Regarding the covers you should find that they are never bigger than 720 as this is what they are reduced to when they are cached.

[mario661]

Hi,

Both, thanks for the feedback. I have uploaded a new alpha version: http://www.oldfield.nl/webinterface.porthole-0.2.zip. Tux: indeed I found the styling for portrait / landscape modes and integrated that. I hope the result will now look a bit better on those screens.
Mizaki: I tried to do that with a real skin, was a real pain too. But I really like the idea to handle the keyboard input. I'm gonna steal that idea from you!
I also want to create a layout for when the user calls up the weather information window. So much to do, so much work too.

[tuxfuxch]

Hey, just tried it. it's great! looks very nice now. when i have my mobile on portrait, the prev Picture and also the description overlaps with the "where am i in the menue". but it does not bother at all, and since it is slightly trasnparent, i still can read it.

i also realised, that the desciption text is not all showed. i think you don't want, that someone needs to scroll. then it's fine, and i can read most of the things. i would leave that how it is. wanted just to tell how it comes on my screen.

[mario661]

Thanks tux for the feedback.

I tried to apply a scrollbar for long text, but found it quite ugly. I am trying out some jQuery scrollbars, but up to now I did not find one that I thought looked nice.

Can you tell me your device's dimensions for portrait? I want to try to keep the text outside the menu position if I can. Perhaps I can tweak that a little using a specific viewport style setting.

Kind regards,
Mario

[tuxfuxch]

hey,

well, i was just testing for you. giving feedback. i don't use it in portrait. well a scrollbar is nice for small screens. maybe you find something.

about the menu: i think it's okay like it is as i said. i would not do something for specific dimension. i would do it, as it is best for most screen it's used for.

as long as it stays transparent, i think it's okay.

the keyboard input handling is for sure useful. this might help: http://kodi.wiki/view/Keyboard_controls

edit: and since you use jquery, this might be useful too: https://api.jquery.com/keydown/ (in the demo you can find out the keykodes to use)