Something I'm working on ...

Cato

Great idea! Super easy to add modules!

Will you make the library browsable/searchable?

Cato

I noticed that when looking at a single module the URL isn’t 100% friendly. It has a “8” in there.

Maybe category? Will it stay constant?

I would rather link to my modules in my signature to this page instead of to a forum post or GitHub repository. But then I have to trust the links to be permanent.

MichMich

Yes it will be searchable. You can already click on a tag or category to filter.

The number you see in the link is the ID of the module in the database. This will anger change. Even if you change the name of your module, the link will remain working.

If you have multiple modules, you can also link to an overview of all your modules: click on your name in the top right, and choose “my modules”.

strawberry 3.141

Are you fine with using your api endpoint http://beta.magicmirror.builders/api/module for mobile app or remote control?

MichMich

@strawberry-3-141 Feel free to use it, BUT …

Keep in mind the URL will change in the future.
I can’t promise it will stay the same.
Keep in mind that it will only give you a subset of the modules. (user query paramaters limit and offset to get more)

If it turns out external API usage will be too heavy, I might limit the access using API keys.

roramirez

Its great. With this, I was thinking is possible create a installer system, its somethings i was thinking from time ago.

Using the API and the parameters of configuration per every module its possible create the section of module for add into the config.js

MichMich

By the way, this project is in a horrible raw early alpha stage … buttt, if someone is interested to contribute, the source code is available here: https://github.com/MichMich/MagicMirror-Website/tree/develop

Be advised: the code needs a lot of refactoring and misses a lot of commenting.

The frontend is a SPA based on Vue.js and a bit of Vuex. The Backend/Api is based on Laravel.

If you clone the repo, take the following steps to get it up and running:

Run: composer install
Run npm install
Create an environment configuration: cp .env.example .env
Run php artisan key:generate`
Modify the database and github settings in the .env file. (You need to create a github app for testing.)
Run php artisan migrate --seed to setup the database.

If you make any changes to /resources/assets/js or /resources/assets/sass, make sure to run gulp to compile.

Jopyth

@roramirez Installer system is a great idea, however this is something that @strawberry-3-141 will implement as a mobile app, from what I hear plus I am building something like this into my remote control (a website - currently on the develop branch). So maybe have a look at it, before you start something completely new. Although, if there is a good reason for building this again or in a different way, count me in.

yawns

Very nice, MichMich. I like the integration with github pulling almost all data and as such removing the need to enter description and all that over and over again. I added my modules

roramirez

Thanks @MichMich the information. I will take a look of code :)

Hi @Jopyth , do you know where I can find some code or design about the @strawberry-3-141 app?

I think we can bootstrap a app for install apps (modules) into a MagicMirror with API provider by modules section of web. The idea it’s most like a packages manager + configuration.

MichMich

If you work on such an installer. Make sure it’s based on the module infrastructure where possible. That we you can develop and test is, without the need of directly integrating it in mm2. If It’s fully up and running and tested, we can integrate it by adding it to the list of default modules.

Cato

@MichMich I noticed that format of table markdown is not optimal. The rows should be alternating color. A good example that current format is bad is here: http://beta.magicmirror.builders/module/29/motioneye. Notice that it’s difficult to see what configuration value belongs to which description…

LukeCodewalker

Hey,
another problem with tables:

if you use html-tables in your GitHub README.md it’s not displayed the right way.
Example: http://beta.magicmirror.builders/module/33/soccerlivescore

chrisfoerg

It is only an idea. In Wordpress the themes have all the same style at the beginning in the css file for the declaration of the theme:

/*
Theme Name: Tutorial
Theme URI: http://wordpress.lernenhoch2.de
Description: Template zum WordPress Tutorial auf http://wordpress.lernenhoch2.de
Author: Christian Strang
Author URI: http://lernenhoch2.de
*/

https://codex.wordpress.org/Theme_Development#Theme_Stylesheet

maybe it is something for you to use?

MichMich

@LukeCodewalker It seems the html is malformed and thus the markdown parser in unable to parse it correctly. It looks like the table contains white lines which are not allowed. If you run your markdown thru a markdown linter, you’ll see there is an issue with the markdown of that readme file.

Cato

@MichMich I guess both @LukeCodewalker and me have the same issue. I’ve included my markdown below and as far as I can see there should be no issue with it. The only thing might be the inclusion of
tags for new line.

Configuration option | Comment | Default 
---|---|---
url | Video Streaming URL.<br><br>You find it in <i>Motion Eye</i> in the <i>Video Streaming Section</i> under <i>Usefull URLs</i> by by clicking the <i>Streaming URL</i> link.<br><br>It should look something like this: `http://motioneye:8081` (probably an IP instead of hostname) | No default
autoHide | If you want the camera to only be visible on the mirror when there is motion, set this to true. You will then have to enable "Call a Web Hook" in Motion Eye under the Motion Notifications section: <br><br> - Web Hook URL: <b>[http://URL of your mirror]/motioneye</b>. Example: http://192.168.1.11:8080/motioneye<br> - HTTP Method: <b>GET</b><br><br>Remember to update IP white list to enable access from your Motion Eye box.|false
autoHideDelay|If autoHide is enabled you can decide how long to wait before hiding the camera|60000 (60 seconds)
width|Width of camera image. You have to try out what fits YOUR monitor | 400px
debug|Show messages in the log|false

MichMich

@Cato That’s correct. You’re mixing html and markdown. Which is not supported within a markdown table. The markdown parser is very strict about this due to security reasons. (We want to prevent code injection via a readme file at all costs.)

I just use the parser used/developed by/for https://www.npmjs.com, so this is not something I can change.

Cato

@MichMich Are you sure about that?

I thought InLine HTML was perfectly allowed. See:

MichMich

@Cato Yes, it’s allowed, but not within a markdown table.

Cato

Ok, I’ll reformat my documentation when I get time.

I found this nice tool: https://dlaa.me/markdownlint/ for checking syntax.