Jump to content

IPlugin vs BasePlugin

DSinapellido

By DSinapellido
in Developer API

 Share

Recommended Posts

DSinapellido

DSinapellido   7

Posted
Posted

On the dev wiki, on the "Automated Type Discovery" page it says that if I want to put an html config page within the Dashboard, I should implement the IPluginConfigurationPage interface ("a full guide for this is coming soon"), which uses IPlugin.

The thing is that in "Getting started" I should create a BasePlugin class.

 

When I see code of other plugins, like Roku Bif Plugin, they implement the IHasWebpages interface.

 

How should I do the config of my plugin?

 

Also, where can I find info about the configPage.html?

Link to comment
Share on other sites
Luke Emby Team

Luke   37116

Posted
Posted

Iwebpages is the newer way of doing it. I will need to update the wiki.

 

What info do you need about the the HTML?

Link to comment
Share on other sites
chef

chef   3746

Posted
Posted

@@Luke will the webpages interface you mentioned mean an update to current plugins, or it's optional to have it in the dashboard Nav

Link to comment
Share on other sites
DSinapellido

DSinapellido   7

Posted
  • Author
Posted

Iwebpages is the newer way of doing it. I will need to update the wiki.

 

What info do you need about the the HTML?

What classes there are? What should I have to display things properly, etc.

Link to comment
Share on other sites
chef

chef   3746

Posted
Posted (edited)

NOt sure if this will help you but this is what my plugin class looks like:

using System;
using System.Collections.Generic;
using System.Threading;
using MediaBrowser.Common.Configuration;
using MediaBrowser.Common.Plugins;
using MediaBrowser.Model.Plugins;
using MediaBrowser.Model.Serialization;


namespace {YOUR_PLUGIN_NAMESPACE}
{
    public class Plugin : BasePlugin<PluginConfiguration>, IHasWebPages
    {
        public Plugin(IApplicationPaths applicationPaths, IXmlSerializer xmlSerializer)
            : base(applicationPaths, xmlSerializer)
        {
            Instance = this;
        }

        
        public static Plugin Instance { get; private set; }

        
        private Guid _id = new Guid("{YOUR_PLUGIN_GUID}");
        public override Guid Id
        {
            get { return _id; }
        }

        public override string Name
        {
            get { return "{YOUR_PLUGIN_NAME"}; }
        }

        public IEnumerable<PluginPageInfo> GetPages()
        {
            return new[]
            {
                new PluginPageInfo
                {
                    Name = "MainPluginConfigurationPage", //THIS PAGE WILL DIRECTFROM THE NAV LINK
                    EmbeddedResourcePath = GetType().Namespace + ".Configuration.MainPluginConfigurationPage.html",
                    EnableInMainMenu = true, //THIS ENABLES NAV MENU OPTION!!!!
                    DisplayName = "{NAME_FOR_NAV}"
                },
                new PluginPageInfo
                {
                    Name = "ClientConfigPage", //SOME KIND OF OTHER CONFIG PAGE HERE
                    EmbeddedResourcePath = GetType().Namespace + ".Configuration.ClientConfigPage.html"
                }
            };
        }
    }
}

Make sure your html is embedded Resources

 

 

Did I help?

Edited by chef
Link to comment
Share on other sites
chef

chef   3746

Posted
Posted (edited)

Here is a config page:

<!DOCTYPE html>
<html>

<head>
    <title>{YOUR_CONFIG_PAGE_TITLE_AND_SHIT_HERE_LOL</title>
	<style>
	h4 {
		color: grey !important;
	}

	</style>
</head>

<body>

    <!-- ReSharper disable UnknownCssClass -->
    <!-- ReSharper disable CssBrowserCompatibility -->

    <div data-role="page" class="page type-interior pluginConfigurationPage MainPluginConfigurationPage" data-require="emby-button,emby-input,emby-select">

        <div class="row">

            <div class="content-primary col-sm-3 col-md-6 col-lg-9">
                <div id="mainPage">

                    <form id="mainFormConfig">
                        <div class="paperlist" id="veraDash" style="background-color: white; border-radius: 10px; border: 2px solid rgb(82,181,75); padding-top: 20px; height: 200px;" data-inline="true">

                            <img id="deviceModel" style="float:left; max-width: 100%; height: 100%; margin-left: 20px; color: rgb(82,181,75)" alt="0000" src=""/>
								<h1 id="inactiveMessage" style="color: rgb(82,181,75); font-size: 20px; padding-top: 8%; padding-left: 43%; text-shadow: 2px 2px 5px rgba(0,0,0,0.158);">
									<span>Vera Controller</span>
								</h1>

                        </div>

                        <br />
						<div class="paperlist" style="padding-right: 5px; padding-left: 10px; padding-bottom: 20px; border: 1px solid grey; border-radius: 10px;">
                            
							<h4>Optional: This plugin locates the first Vera Device found on the network. <br />
								For users who have more then one Vera device on their network, override the IP to another Vera device.</h4>
							<input is="emby-input" id="veraIpOverride"></input>

							<button id="saveVeraDeviceIp" is="emby-button" type="button" data-theme="b" class="raised button-submit block">Save Manual Vera Device IP</button>
                        
						</div> 

						<br />

                        <div class="paperlist" style="padding-right: 5px; padding-left: 10px; padding-bottom: 20px; border: 1px solid grey; border-radius: 10px;">
                            <h4>Choose an Emby device from the list below to begin adding functionality with Vera Home Automation.</h4>

                            <h3>Devices:</h3>

                            <select is="emby-select" name="deviceName" id="deviceName" data-inline="true">
                            </select>
                            <br />
                            <button id="addButton" is="emby-button" type="button" data-theme="b" class="raised button-submit block">Add<i class="md-icon">add</i></button>
                           
                            <br />
                            <br />
                            <h3>Saved Profiles:</h3>
                            <div class="paperlist" data-role='listview' data-inset='true' data-split-icon='delete' id='clientProfiles'>
                            </div>

                        </div>
                        <br />
                       
                        <br />
                        <h3 style="position: absolute; right: 8px; top: 50px"><a href="https://www.paypal.me/BenjaminA/4">Donate</a></h3>
                    </form>
                </div>
            </div>

        </div>
        <!-- ReSharper restore UnknownCssClass -->
        <!-- ReSharper disable UseOfImplicitGlobalInFunctionScope -->
        <!-- ReSharper disable WrongExpressionStatement -->
        <script type="text/javascript">
            (function () {
                var pluginId = "{YOUR_PLUGIN_GUID_HERE!!}";
				                
                function getClientHtml(device) {

                    var html = "";
					html += '<div name="' + device.Name + '" id="' + device.Id + '" style="box-shadow: 2px 2px 5px rgba(0,0,0,0.2); border-radius: 5px; border: 1px solid rgba(0,0,0,0.158)" class="clientProfile listItem">';
					html += '<i class="md-icon sidebarLinkIcon listItemIcon">dvr</i>';
					html += '<div class="listItemBody">';
                    html += '<h3 class="listItemBodyText">' + device.Name + '</h3>';
                    html += '</div>';
                    html += '<i class="md-icon btnDeleteProfile" data-index="0">close</i>';
					html += '</div>';
					html += '<br />';
                    return html;
                };
				
                function deviceImageLink(model) {
                    if (model.indexOf("VeraLite") > -1) {
                        return "https://home.getvera.com/assets/portal_getvera_ui7/images/veralite_front.jpg";
                    }
                    if (model.indexOf("VeraEdge") > -1) {
                        return "https://home.getvera.com/assets/portal_getvera_ui7/images/veraedge_front.jpg";
                    }
                    if (model.indexOf("VeraLite G") > -1) {
                        return "https://home.getvera.com/assets/portal_getvera_ui7/images/veraliteg_front.jpg";
                    }
                    if (model.indexOf("NA900") > -1) {
                        return "https://home.getvera.com/assets/portal_getvera_ui7/images/vera3_front.jpg";
                    }
                    if (model.indexOf("G450") > -1) {
                        return "http://getvera.com/wp-content/uploads/VeraPlus_Controller_TOP_LEDs-640x640.jpg";
                    }
                    return "http://getvera.com/wp-content/uploads/VeraPlus_Controller_TOP_LEDs-640x640.jpg";
                };

				function endpointDeviceList(){
					ApiClient.ajax({
						url: ApiClient.getUrl("Devices"),
						type:"GET",
						dataType: "json",
						
					}).then(function(data){
						for (var x = 0; x < data.length; x++) {
               
							console.log("VERA SAYS: " + data.Items);
						}
					})
				}
                function loadPageData(page, config) {

					endpointDeviceList();

					//Model may return null if the user is either using a custom IP override, 
					//or a Virtual Machine replicating Vera Devices.
                    var model;
					if(config.Model != null){
						if (config.Model.indexOf("G450") > -1) {
							model = "MiCasaVerde Vera Plus";
						} else if (config.Model.indexOf("NA900") > -1) {
							model = "MiCasaVerde Vera 3";
						} else {
							model = config.Model;
						}
					} else {
						model = "G450"; // Give the model anything so it returns an image for the user.
					}

                    if (config.InternalIp != null) {
                        $('#inactiveMessage', page).text(model + ": " + config.InternalIp).css('color', '#52B54B');
                        // Place the image for the users MiCasaVerde Device in an image.                   
                        $('#deviceModel', page).attr('src', deviceImageLink(config.Model));

                    } else {

                        $('#inactiveMessage', page).css('color', 'darkred').text("No Device Detected!");
                    }

                    var deviceListLength = $('#deviceName option').length;
                    if (deviceListLength > 0) {
                        $('#deviceName').children().remove().end();

                    }



                    //Put the List of Devices in the Selection Box
                    if (config.EmbyReadyNetworkDevices) {
                        config.EmbyReadyNetworkDevices.forEach(function (c) {
                            $("#deviceName", page).append('<option value="' + c.Name + '">' + c.Name + '</option>');
                        });

                    }
                    if (config.SavedDeviceProfiles) {
                        config.SavedDeviceProfiles.forEach(function (device) {
                            $('#clientProfiles', page).append(getClientHtml(device));
                        });
                    }
                }
				
                function loadConfig(page) {
                    ApiClient.getPluginConfiguration(pluginId).then(function (config) {

                        loadPageData(page, config);

                        Dashboard.hideLoadingMsg;

                    });
                }


                $('.MainPluginConfigurationPage').on('pagebeforeshow', function () {

                    var page = this;
                    loadConfig(page);

                }).on('pageshow', function () {

                    var page = this;
                    //addToSidebar();

					$('#saveVeraDeviceIp', page).on('click', function() {
						 ApiClient.getPluginConfiguration(pluginId).then(function (config) {
						    
								config.InternalIp = $('#veraIpOverride').val();
														
							ApiClient.updatePluginConfiguration(pluginId, config).then(function (result) {
                                Dashboard.hideLoadingMsg();
                                Dashboard.processPluginConfigurationUpdateResult(result);
                            });
						});
					});
					
                    $('#addButton', page).on('click', function () {

                        var deviceName = $('#deviceName option:selected').text();

                        ApiClient.getPluginConfiguration(pluginId).then(function (config) {

                            config.EmbyReadyNetworkDevices.forEach(function (deviceProfile) {

                                if (deviceProfile.Name.indexOf(deviceName) > -1) {

                                    config.SavedDeviceProfiles.push({
                                        Name: deviceProfile.Name,
                                        Id: deviceProfile.Id,
                                        MoviesPlaybackStarted: null,
                                        MoviesPlaybackStopped: null,
                                        MoviesPlaybackPaused: null,
                                        MoviesPlaybackUnpaused: null,
                                        SeriesPlaybackStarted: null,
                                        SeriesPlaybackStopped: null,
                                        SeriesPlaybackPaused: null,
                                        SeriesPlaybackUnpaused: null,
                                        MusicPlaybackStarted: null,
                                        MusicPlaybackStopped: null,
                                        MusicPlaybackPaused: null,
                                        MusicPlaybackUnpaused: null,
                                        SessionEnded: null,
                                        SessionStarted: null,
                                        SceneSchedule: null
                                    });

                                    config = {
                                        SavedDeviceProfiles: config.SavedDeviceProfiles
                                    }

                                    ApiClient.updatePluginConfiguration(pluginId, config).then(function (result) {
                                        Dashboard.hideLoadingMsg();
                                        Dashboard.processPluginConfigurationUpdateResult(result);
                                    });


                                    $('#clientProfiles', page).append(getClientHtml(deviceProfile));
                                }

                            });

                        });

                    });

                    $('#clientProfiles', page).on('click', '.btnDeleteProfile', function () {
                        // Remove the physical item from html
                        $(this).parent().remove();
                        // the device name the user wants to remove from configuration
                        var name = $(this).parent().attr("name");

                        //
                        // Our list of devices to write to the Configuration
                        var devices = [];
                        // Our list of devices that already exsist - with the exception of the device which was just removed from the list

                        ApiClient.getPluginConfiguration(pluginId).then(function (config) {

                            config.SavedDeviceProfiles.forEach(function (c) {

                                if (c.Name != name) {

                                    devices.push(c);
                                }

                            });

                            config.SavedDeviceProfiles = devices;

                            ApiClient.updatePluginConfiguration(pluginId, config).then(function (result) {
                                Dashboard.hideLoadingMsg();
                                Dashboard.processPluginConfigurationUpdateResult(result);
                            });
                        });

                        return false;

                    });

                    $('#clientProfiles', page).on('click', '.clientProfile', function () {

                        // Retrieve name and id info about the Media Browser Network Device the user has clicked on
                        var profileId = $(this).attr('id');
                        var profileName = $(this).attr("name");

                        // Build the new Client Configuration object to reference in the setup page
                        var newClientConfiguration = {
                            Name: profileName,
                            Id: profileId
                        }

                        //Build a new config file with all the objects we want to reference
                        var newClientConfigurationEntry = {
                            DeviceConfiguration: newClientConfiguration,
                        }

                        ApiClient.updatePluginConfiguration(pluginId, newClientConfigurationEntry).then(function () {

                        });

                        var url = Dashboard.getConfigurationPageUrl("ClientConfigPage");
                        $(window.location).attr('href', url);

                        return false;
                    });

                    // Event handler to open Vera Dashboard/Media Browser Dashboard Hybrid page
                    $('#veraDash').click(function () {
                        var url = Dashboard.getConfigurationPageUrl("VeraDashboardPage");
                        $(window.location).attr('href', url);
                    });

                    $('#refreshDeviceList', page).on('click', function () {

                        //loadConfig(page);
                        //$('#refreshDeviceList').prop('disabled', true);

                        $('#deviceName').children().remove().end();
                        $('#deviceName', page).append('<option value""></option>');
                        ApiClient.getPluginConfiguration(pluginId).then(function (x) {

                            // 
                            //Put the List of Devices in the Selection Box
                            //if (config.EmbyReadyNetworkDevices) {
                            x.EmbyReadyNetworkDevices.forEach(function (c) {
                                $('#deviceName', page).append('<option value="' + c.Name + '">' + c.Name + '</option>');
                            });
                            //}

                        });

                        Dashboard.hideLoadingMsg();

                        $('#refreshDeviceList').prop('disabled', false);

                    });

                    Dashboard.hideLoadingMsg();
                });
            })();

        </script>
        <!-- ReSharper restore WrongExpressionStatement -->
        <!-- ReSharper restore UseOfImplicitGlobalInFunctionScope -->

    </div>

</body>
</html>

There is a bunch in that code that it unique to my plugin, but maybe you get the gist of it.

 

Aren't hundreds of lines of code soooo much fun?!?

Edited by chef
Link to comment
Share on other sites
DSinapellido

DSinapellido   7

Posted
  • Author
Posted (edited)

Only another question.

How would you do an slider on an input form?

Edit: I mean, are there any classes, data- or anything?

Edited by DSinapellido
Link to comment
Share on other sites
chef

chef   3746

Posted
Posted (edited)

Most of the classes in HTML are written like "is='emby-input' "

 

Otherwise you'll have to create one using CSS.

 

You could try is="emby-slider"

 

Or, and this is a cool trick, look at:

 

Materializecss

 

On google, and add the CDN to the top of the page.

 

There is a slider in material design that will match with emby quite nicely.

Edited by chef
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...