wip
This commit is contained in:
jr-k
parent
0bb72c03fc
commit
4b228cccf0
@ -31,6 +31,7 @@
|
||||
|
||||
// Import pages styles
|
||||
@import 'pages/content';
|
||||
@import 'pages/content-composition';
|
||||
@import 'pages/logs';
|
||||
@import 'pages/node-player';
|
||||
@import 'pages/playlist';
|
||||
|
||||
176
data/www/scss/pages/_content-composition.scss
Normal file
176
data/www/scss/pages/_content-composition.scss
Normal file
@ -0,0 +1,176 @@
|
||||
.view-content-edit.view-content-edit-composition main .main-container {
|
||||
|
||||
.page-panel.left-panel {
|
||||
flex: 1;
|
||||
|
||||
.form-holder {
|
||||
margin: 20px 20px 20px 10px;
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.page-content {
|
||||
flex: 2;
|
||||
}
|
||||
|
||||
.page-panel.right-panel {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
.screen-holder {
|
||||
//display: flex;
|
||||
//flex-direction: row;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
padding-top: 56.25%; /* 16:9 aspect ratio */
|
||||
overflow: hidden;
|
||||
border-radius: $baseRadius;
|
||||
outline: 4px solid rgba($gscaleF, .1);
|
||||
|
||||
|
||||
.screen {
|
||||
background-color: #ddd;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: none;
|
||||
|
||||
.element {
|
||||
position: absolute !important;
|
||||
background-color: #f0f0f0;
|
||||
outline: 1px solid rgba($black, .5);
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
|
||||
&.focused {
|
||||
border: none;
|
||||
outline: 2px solid blue;
|
||||
z-index: 89 !important;
|
||||
|
||||
.ui-resizable-handle {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.rotate-handle {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: red;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: -15px;
|
||||
cursor: pointer;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.ui-resizable-handle {
|
||||
background: black;
|
||||
border: 1px solid #000;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
z-index: 90;
|
||||
display: none;
|
||||
position: absolute;
|
||||
|
||||
&.ui-resizable-nw {
|
||||
cursor: nw-resize;
|
||||
top: -5px;
|
||||
left: -5px;
|
||||
}
|
||||
|
||||
&.ui-resizable-ne {
|
||||
cursor: ne-resize;
|
||||
top: -5px;
|
||||
right: -5px;
|
||||
}
|
||||
|
||||
&.ui-resizable-sw {
|
||||
cursor: sw-resize;
|
||||
bottom: -5px;
|
||||
left: -5px;
|
||||
}
|
||||
|
||||
&.ui-resizable-se {
|
||||
cursor: se-resize;
|
||||
bottom: -5px;
|
||||
right: -5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.elements-holder {
|
||||
align-self: stretch;
|
||||
|
||||
h3 {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: $gscaleD;
|
||||
text-decoration: none;
|
||||
margin: 0 0 20px 0;
|
||||
|
||||
&.divide {
|
||||
border-top: 1px solid $gscale2;
|
||||
margin-top: 10px;
|
||||
padding-top: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.form-elements-list {
|
||||
background: $gscale2;
|
||||
padding: 10px;
|
||||
border-radius: $baseRadius;
|
||||
|
||||
.element-list-item {
|
||||
cursor: pointer;
|
||||
padding: 5px;
|
||||
border: 1px solid #ccc;
|
||||
margin-bottom: 5px;
|
||||
|
||||
&.focused {
|
||||
background-color: #d0ebff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.form-element-properties {
|
||||
margin-left: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f9f9f9;
|
||||
border: 1px solid #ccc;
|
||||
|
||||
form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
label,
|
||||
input {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
#elementList {
|
||||
h3 {
|
||||
margin: 0 0 10px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -89,180 +89,3 @@
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.view-content-edit.view-content-edit-composition main .main-container {
|
||||
|
||||
.page-panel.left-panel {
|
||||
flex: 1;
|
||||
|
||||
.form-holder {
|
||||
margin: 20px 20px 20px 10px;
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.page-content {
|
||||
flex: 2;
|
||||
}
|
||||
|
||||
.page-panel.right-panel {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
.screen-holder {
|
||||
//display: flex;
|
||||
//flex-direction: row;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
padding-top: 56.25%; /* 16:9 aspect ratio */
|
||||
overflow: hidden;
|
||||
border-radius: $baseRadius;
|
||||
outline: 4px solid rgba($gscaleF, .1);
|
||||
|
||||
|
||||
.screen {
|
||||
background-color: #ddd;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: none;
|
||||
|
||||
.element {
|
||||
position: absolute !important;
|
||||
background-color: #f0f0f0;
|
||||
outline: 1px solid rgba($black, .5);
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
|
||||
&.focused {
|
||||
border: none;
|
||||
outline: 2px solid blue;
|
||||
z-index: 89 !important;
|
||||
|
||||
.ui-resizable-handle {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.rotate-handle {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: red;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: -15px;
|
||||
cursor: pointer;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.ui-resizable-handle {
|
||||
background: black;
|
||||
border: 1px solid #000;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
z-index: 90;
|
||||
display: none;
|
||||
position: absolute;
|
||||
|
||||
&.ui-resizable-nw {
|
||||
cursor: nw-resize;
|
||||
top: -5px;
|
||||
left: -5px;
|
||||
}
|
||||
|
||||
&.ui-resizable-ne {
|
||||
cursor: ne-resize;
|
||||
top: -5px;
|
||||
right: -5px;
|
||||
}
|
||||
|
||||
&.ui-resizable-sw {
|
||||
cursor: sw-resize;
|
||||
bottom: -5px;
|
||||
left: -5px;
|
||||
}
|
||||
|
||||
&.ui-resizable-se {
|
||||
cursor: se-resize;
|
||||
bottom: -5px;
|
||||
right: -5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.elements-holder {
|
||||
align-self: stretch;
|
||||
|
||||
h3 {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: $gscaleD;
|
||||
text-decoration: none;
|
||||
margin: 0 0 20px 0;
|
||||
|
||||
&.divide {
|
||||
border-top: 1px solid $gscale2;
|
||||
margin-top: 10px;
|
||||
padding-top: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.form-elements-list {
|
||||
background: $gscale2;
|
||||
padding: 10px;
|
||||
border-radius: $baseRadius;
|
||||
|
||||
.element-list-item {
|
||||
cursor: pointer;
|
||||
padding: 5px;
|
||||
border: 1px solid #ccc;
|
||||
margin-bottom: 5px;
|
||||
|
||||
&.focused {
|
||||
background-color: #d0ebff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.form-element-properties {
|
||||
margin-left: 20px;
|
||||
padding: 10px;
|
||||
background-color: #f9f9f9;
|
||||
border: 1px solid #ccc;
|
||||
|
||||
form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
label,
|
||||
input {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
#elementList {
|
||||
h3 {
|
||||
margin: 0 0 10px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -104,7 +104,7 @@ sudo reboot
|
||||
1. Just use systemctl `sudo systemctl restart obscreen-player.service`
|
||||
|
||||
#### How to enable sound
|
||||
1. First you have to reboot your device with `sudo reboot`
|
||||
1. First you have to reboot your device if you never did after obscreen player installation; with command `sudo reboot`
|
||||
2. You have to set audio channel to HDMI `sudo raspi-config nonint do_audio 1` (0 is for jack 3.5 output)
|
||||
|
||||
---
|
||||
|
||||
@ -42,7 +42,6 @@ class TemplateRenderer:
|
||||
external_url=self._model_store.variable().map().get('external_url').as_string().strip('/'),
|
||||
last_pillmenu_fleet=self._model_store.variable().map().get('last_pillmenu_fleet').as_string(),
|
||||
last_pillmenu_security=self._model_store.variable().map().get('last_pillmenu_security').as_string(),
|
||||
external_url=self._model_store.variable().map().get('external_url').as_string(),
|
||||
track_created=self._model_store.user().track_user_created,
|
||||
track_updated=self._model_store.user().track_user_updated,
|
||||
PORT=self._model_store.config().map().get('port'),
|
||||
|
||||
@ -42,7 +42,7 @@ usermod -aG plugdev $OWNER
|
||||
# Automount script for external storage
|
||||
# ============================================================
|
||||
|
||||
curl https://raw.githubusercontent.com/jr-k/obscreen/master/system/external-storage/10-obscreen-media-automount.rules | sed "s#/home/pi#$WORKING_DIR#g" | tee /etc/udev/rules.d/10-obscreen-media-automount.rules
|
||||
curl https://raw.githubusercontent.com/jr-k/obscreen/master/system/external-storage/10-obscreen-media-automount.rules | sed "s#/home/pi#$WORKING_DIR#g" | tee /etc/udev/rules.d/10-obscreen-media-automount.rules
|
||||
udevadm control --reload-rules
|
||||
systemctl restart udev
|
||||
udevadm trigger
|
||||
|
||||
@ -15,7 +15,7 @@
|
||||
<script src="{{ STATIC_PREFIX }}js/lib/jquery-explr-1.4.js"></script>
|
||||
<script src="{{ STATIC_PREFIX }}js/slideshow/contents.js"></script>
|
||||
<script src="{{ STATIC_PREFIX }}js/lib/jquery-ui.min.js"></script>
|
||||
{# <script src="{{ STATIC_PREFIX }}js/lib/jquery-ui-rotatable.min.js"></script> #}
|
||||
{# <script src="{{ STATIC_PREFIX }} js/lib/jquery-ui-rotatable.min.js"></script> #}
|
||||
<script src="{{ STATIC_PREFIX }}js/slideshow/content-composition.js"></script>
|
||||
{{ HOOK(H_SLIDESHOW_CONTENT_JAVASCRIPT) }}
|
||||
{% endblock %}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user