Upload files to "Magic Mirror"
This commit is contained in:
@@ -0,0 +1,100 @@
|
||||
[](https://github.com/MichMich/MagicMirror)
|
||||
|
||||
MagicMirror² is an open source modular smart mirror platform. With a growing list of installable modules, the MagicMirror² allows you to convert your hallway or bathroom mirror into your personal assistant.
|
||||
|
||||
In some cases, you want to start the application without an actual app window. In this case, you can start MagicMirror² in server only mode by manually running node serveronly or using Docker. This will start the server, after which you can open the application in your browser of choice.
|
||||
|
||||
## Setting up the container
|
||||
|
||||
Go to `Containers` > `Add Container`
|
||||
|
||||
Set *Name* to:
|
||||
```
|
||||
magicmirror
|
||||
```
|
||||
|
||||
Set *Image* to:
|
||||
```
|
||||
bastilimbach/docker-magicmirror
|
||||
```
|
||||
|
||||
Click `publish a new network port` next to `Manual network port publishing`.
|
||||
|
||||
Set the host port as desired (I set `8044`) and the container port to `8080`.
|
||||
|
||||
|
||||
### Set the following volumes:
|
||||
|
||||
Add this to syncronize the time of the host with the docker container.
|
||||
|
||||
Container:
|
||||
```
|
||||
/etc/localtime:ro
|
||||
```
|
||||
|
||||
Volume:
|
||||
|
||||
```
|
||||
/etc/localtime
|
||||
```
|
||||
|
||||
Mount this folder to insert your own config into the docker container. If the folder is empty the container will create a default configuration which can be adapted to you likings.
|
||||
|
||||
Container:
|
||||
```
|
||||
/opt/magic_mirror/config
|
||||
```
|
||||
|
||||
Volume:
|
||||
|
||||
```
|
||||
/portainer/Files/AppData/Config/magic_mirror/config
|
||||
```
|
||||
|
||||
Mount this folder to add your own custom modules into the docker container. If the folder is empty the container will copy the default modules from the MagicMirror² repository into the volume.
|
||||
|
||||
Container:
|
||||
```
|
||||
/opt/magic_mirror/modules
|
||||
```
|
||||
|
||||
Volume:
|
||||
|
||||
```
|
||||
/portainer/Files/AppData/Config/magic_mirror/modules
|
||||
```
|
||||
|
||||
Mount this file to add your own custom css into the docker container.
|
||||
|
||||
**Important:** You need to create the file before you run the container otherwise Docker will create a custom.css folder. You can find the default custom.css template [here](custom.css).
|
||||
|
||||
Container:
|
||||
```
|
||||
/opt/magic_mirror/css/custom.css
|
||||
```
|
||||
|
||||
Volume:
|
||||
|
||||
```
|
||||
/portainer/Files/AppData/Config/magic_mirror/config/custom.css
|
||||
```
|
||||
|
||||
### Set the following environmental variables:
|
||||
|
||||
Name:
|
||||
```
|
||||
TZ
|
||||
```
|
||||
|
||||
Value: *Find you time zone [here](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones) and enter your appropriate value.*
|
||||
```
|
||||
Europe/London
|
||||
```
|
||||
|
||||
### Set the restart policy:
|
||||
|
||||
I always tend to set `Unless Stopped`
|
||||
|
||||
### Deploy
|
||||
|
||||
This should be all you need to deploy the basic set up, just click `Deploy the container` and head over to `yourIP:selectedPort` (In my case `192.168.1.227:8044`) and you should be greeted with the default magic mirror. Have a look through the documentation and update your settings in `/portainer/Files/AppData/Config/magic_mirror/config/` to personalise your display.
|
||||
@@ -0,0 +1,248 @@
|
||||
:root {
|
||||
--color-text: #999;
|
||||
--color-text-dimmed: #666;
|
||||
--color-text-bright: #fff;
|
||||
--color-background: #000;
|
||||
|
||||
--font-primary: "Roboto Condensed";
|
||||
--font-secondary: "Roboto";
|
||||
|
||||
--font-size: 20px;
|
||||
--font-size-xsmall: 0.75rem;
|
||||
--font-size-small: 1rem;
|
||||
--font-size-medium: 1.5rem;
|
||||
--font-size-large: 3.25rem;
|
||||
--font-size-xlarge: 3.75rem;
|
||||
|
||||
--gap-body-top: 60px;
|
||||
--gap-body-right: 60px;
|
||||
--gap-body-bottom: 60px;
|
||||
--gap-body-left: 60px;
|
||||
|
||||
--gap-modules: 30px;
|
||||
}
|
||||
|
||||
html {
|
||||
cursor: none;
|
||||
overflow: hidden;
|
||||
background: var(--color-background);
|
||||
user-select: none;
|
||||
font-size: var(--font-size);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: var(--gap-body-top) var(--gap-body-right) var(--gap-body-bottom) var(--gap-body-left);
|
||||
position: absolute;
|
||||
height: calc(100% - var(--gap-body-top) - var(--gap-body-bottom));
|
||||
width: calc(100% - var(--gap-body-right) - var(--gap-body-left));
|
||||
background: var(--color-background);
|
||||
color: var(--color-text);
|
||||
font-family: var(--font-primary), sans-serif;
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
/**
|
||||
* Default styles.
|
||||
*/
|
||||
|
||||
.dimmed {
|
||||
color: var(--color-text-dimmed);
|
||||
}
|
||||
|
||||
.normal {
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.bright {
|
||||
color: var(--color-text-bright);
|
||||
}
|
||||
|
||||
.xsmall {
|
||||
font-size: var(--font-size-xsmall);
|
||||
line-height: 1.275;
|
||||
}
|
||||
|
||||
.small {
|
||||
font-size: var(--font-size-small);
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
.medium {
|
||||
font-size: var(--font-size-medium);
|
||||
line-height: 1.225;
|
||||
}
|
||||
|
||||
.large {
|
||||
font-size: var(--font-size-large);
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.xlarge {
|
||||
font-size: var(--font-size-xlarge);
|
||||
line-height: 1;
|
||||
letter-spacing: -3px;
|
||||
}
|
||||
|
||||
.thin {
|
||||
font-family: var(--font-secondary), sans-serif;
|
||||
font-weight: 100;
|
||||
}
|
||||
|
||||
.light {
|
||||
font-family: var(--font-primary), sans-serif;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.regular {
|
||||
font-family: var(--font-primary), sans-serif;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.bold {
|
||||
font-family: var(--font-primary), sans-serif;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.align-right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.align-left {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
header {
|
||||
text-transform: uppercase;
|
||||
font-size: var(--font-size-xsmall);
|
||||
font-family: var(--font-primary), Arial, Helvetica, sans-serif;
|
||||
font-weight: 400;
|
||||
border-bottom: 1px solid var(--color-text-dimmed);
|
||||
line-height: 15px;
|
||||
padding-bottom: 5px;
|
||||
margin-bottom: 10px;
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
sup {
|
||||
font-size: 50%;
|
||||
line-height: 50%;
|
||||
}
|
||||
|
||||
/**
|
||||
* Module styles.
|
||||
*/
|
||||
|
||||
.module {
|
||||
margin-bottom: var(--gap-modules);
|
||||
}
|
||||
|
||||
.module.hidden {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.module:not(.hidden) {
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.region.bottom .module {
|
||||
margin-top: var(--gap-modules);
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.no-wrap {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.pre-line {
|
||||
white-space: pre-line;
|
||||
}
|
||||
|
||||
/**
|
||||
* Region Definitions.
|
||||
*/
|
||||
|
||||
.region {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.region.fullscreen {
|
||||
position: absolute;
|
||||
top: calc(-1 * var(--gap-body-top));
|
||||
left: calc(-1 * var(--gap-body-left));
|
||||
right: calc(-1 * var(--gap-body-right));
|
||||
bottom: calc(-1 * var(--gap-body-bottom));
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.region.right {
|
||||
right: 0;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.region.top {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.region.top.center,
|
||||
.region.bottom.center {
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.region.top.right,
|
||||
.region.top.left,
|
||||
.region.top.center {
|
||||
top: 100%;
|
||||
}
|
||||
|
||||
.region.bottom {
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.region.bottom.right,
|
||||
.region.bottom.center,
|
||||
.region.bottom.left {
|
||||
bottom: 100%;
|
||||
}
|
||||
|
||||
.region.bar {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.region.third,
|
||||
.region.middle.center {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.region.upper.third {
|
||||
top: 33%;
|
||||
}
|
||||
|
||||
.region.middle.center {
|
||||
top: 50%;
|
||||
}
|
||||
|
||||
.region.lower.third {
|
||||
top: 66%;
|
||||
}
|
||||
|
||||
.region.left {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.region table {
|
||||
width: 100%;
|
||||
border-spacing: 0;
|
||||
border-collapse: separate;
|
||||
}
|
||||
Reference in New Issue
Block a user