Skip to content

Commit

Permalink
Redid web interface menus, moved from queues to pipes, redid logger
Browse files Browse the repository at this point in the history
  • Loading branch information
@netham45
netham45 committed May 9, 2024
1 parent 5dc470a commit d934a7d
Show file tree
Hide file tree
Showing 21 changed files with 860 additions and 617 deletions.
2 changes: 1 addition & 1 deletion site/imports/selects.html.jinja
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{% macro option(value, label, class="", data="{}", checked=False) %}
<OPTION VALUE="{{value}}" CLASS="{{class}}" {% for name, datum in data %}DATA-{{name}}="{{datum}}" {% endfor %}{{"SELECTED" if checked}}>{{label}}</OPTION>
<SPAN VALUE="{{value}}" CLASS="{{class}}" ONCLICK="option_onclick(event)" {% for name, datum in data %}DATA-{{name}}="{{datum}}" {% endfor %}DATA-TYPE="{{data.__class__.__name__}}" {{"SELECTED" if checked}}><SPAN CLASS="button-icon" ONCLICK="equalizer_icon_onclick(event)">🎚️</SPAN><SPAN CLASS="button-icon" ONCLICK="update_icon_onclick(event)">⚙️</SPAN><SPAN CLASS="button-icon" ONCLICK="volume_icon_onclick(event)">{{ "🔊" if data["enabled"] else "🔇"}}</SPAN><SPAN CLASS="button-icon" ONCLICK="remove_icon_onclick(event)">➖</SPAN>{% if (data.__class__.__name__ == "SinkDescription" and not data.is_group) %}<SPAN CLASS="button-icon" ONCLICK="listen_icon_onclick(event)">📻</SPAN>{% endif %}{{label}}</SPAN>
{%- endmacro %}

{% macro make_multiple_options(options, data="{}") %}
Expand Down
48 changes: 15 additions & 33 deletions site/index.html.jinja
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,26 +22,21 @@
</DIV>
<DIV CLASS="section-buttons select-container">
<INPUT TYPE="range" ID="source_volume" ONCHANGE="source_volume_change()" DISABLED>
{{- buttons.button("add_source_button", "Add Source", "section-button")}}
{{- buttons.button("remove_source_button", "Remove Source", "section-button")}}
{{- buttons.button("update_source_button", "Edit Source", "section-button")}}
{{- buttons.button("enable_source_button", "Enable Source", "section-button")}}
{{- buttons.button("disable_source_button", "Disable Source", "section-button")}}
{{- buttons.button("update_source_equalizer_button", "Equalizer", "section-button")}}
{{- buttons.button("add_source_button", "➕", "section-button")}}
{{- buttons.button("add_source_group_button", "Add Group", "section-button")}}
<SELECT ID="select-sources" CLASS="main-select" SIZE="{{sources | length}}" ONCHANGE="select_source_change()" MULTIPLE>
<DIV ID="select-sources" CLASS="main-select" SIZE="{{sources | length}}" ONCHANGE="select_source_change()" MULTIPLE>
{%- set options = namespace(options=[]) %}
{%- for source in sources %}
{%- set enabled_str = "Enabled" if source.enabled else "Disabled" %}
{{- source.type }}
{%- set enabled_class_str = "enabled" if source.enabled else "disabled" %}
{%- set _option = {"value": source.name,
"label": "%s [%s]" % (source.name, enabled_str),
"label": source.name,
"class": "option option-%s" % enabled_class_str,
"data": source} %}
{%- set options.options = options.options + [_option] %}
{%- endfor %}
{{- selects.make_multiple_options(options.options, sources) }}
</SELECT>
</DIV>
</DIV>
</DIV>
</DIV>
Expand All @@ -52,28 +47,22 @@
</DIV>
<DIV CLASS="section-buttons select-container">
<INPUT TYPE="range" ID="route_volume" ONCHANGE="route_volume_change()" DISABLED>
{{- buttons.button("add_route_button", "Add Route", "section-button")}}
{{- buttons.button("remove_route_button", "Remove Route", "section-button")}}
{{- buttons.button("update_route_button", "Edit Route", "section-button")}}
{{- buttons.button("enable_route_button", "Enable Route", "section-button")}}
{{- buttons.button("disable_route_button", "Disable Route", "section-button")}}
{{- buttons.button("update_route_equalizer_button", "Equalizer", "section-button")}}
<SELECT ID="select-routes" CLASS="main-select" SIZE="{{routes | length}}" ONCHANGE="select_route_change()" MULTIPLE>
{{- buttons.button("add_route_button", "➕", "section-button")}}
<DIV ID="select-routes" CLASS="main-select" SIZE="{{routes | length}}" ONCHANGE="select_route_change()" MULTIPLE>
{%- set options = namespace(options=[]) %}
{%- for route in routes %}
{%- set enabled_str = "Enabled" if route.enabled else "Disabled" %}
{{- route.type }}
{%- set enabled_class_str = "enabled" if route.enabled else "disabled" %}
{%- set _option = {"value": route.name,
"label": "%s [%s->%s] [%s]" % (route.name,
"label": "%s [%s->%s]" % (route.name,
route.source,
route.sink,
enabled_str),
route.sink),
"class": "option option-%s" % enabled_class_str,
"data": route} %}
{%- set options.options = options.options + [_option] %}
{%- endfor %}
{{- selects.make_multiple_options(options.options, routes) }}
</SELECT>
</DIV>
</DIV>
</DIV>
</DIV>
Expand All @@ -84,27 +73,20 @@
</DIV>
<DIV CLASS="section-buttons select-container">
<INPUT TYPE="range" ID="sink_volume" ONCHANGE="sink_volume_change()" DISABLED>
{{- buttons.button("add_sink_button", "Add Sink", "section-button")}}
{{- buttons.button("remove_sink_button", "Remove Sink", "section-button")}}
{{- buttons.button("update_sink_button", "Edit Sink", "section-button")}}
{{- buttons.button("enable_sink_button", "Enable Sink", "section-button")}}
{{- buttons.button("disable_sink_button", "Disable Sink", "section-button")}}
{{- buttons.button("update_sink_equalizer_button", "Equalizer", "section-button")}}
{{- buttons.button("listen_to_sink_button", "Listen to Sink", "section-button")}}
{{- buttons.button("add_sink_button", "➕", "section-button")}}
{{- buttons.button("add_sink_group_button", "Add Group", "section-button")}}
<SELECT ID="select-sinks" CLASS="main-select" SIZE="{{sinks | length}}" ONCHANGE="select_sink_change()" MULTIPLE>
<DIV ID="select-sinks" CLASS="main-select" SIZE="{{sinks | length}}" ONCHANGE="select_sink_change()" MULTIPLE>
{%- set options = namespace(options=[]) %}
{%- for sink in sinks %}
{%- set enabled_str = "Enabled" if sink.enabled else "Disabled" %}
{%- set enabled_class_str = "enabled" if sink.enabled else "disabled" %}
{%- set _option = {"value": sink.name,
"label": "%s [%s]" % (sink.name, enabled_str),
"label": sink.name,
"class": "option option-%s" % enabled_class_str,
"data": sink} %}
{%- set options.options = options.options + [_option] %}
{%- endfor %}
{{- selects.make_multiple_options(options.options, sinks) }}
</SELECT>
</DIV>
</DIV>
</DIV>
</DIV>
Expand Down
93 changes: 85 additions & 8 deletions site/screamrouter.css.jinja
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ DIV.section-name {
}

DIV.section INPUT[TYPE="range"] {
width: 98%;
width: 95%;
display: inline-block;
}

Expand All @@ -91,7 +91,27 @@ SELECT.main-select {
padding-bottom: 5px;
}

DIV.select-container {
DIV.main-select {
width: 101%;
margin-left: -1%;
background:none;
width: 101%;
background-image: linear-gradient(rgba(60,221,90,.75),rgba(153,153,255,.75));
overflow: hidden;
padding-left: 2%;
font-size: 1.25vw;
color: #FFFFFF;
border: none;
outline: none;
padding-bottom: 15px;
border-radius: 25px;
}

SPAN.option {
width: 100%;
display: inline-block;
text-align: left;
color: #000000;
}

select[multiple] option:checked {
Expand All @@ -102,11 +122,6 @@ select[multiple]:focus option:checked {
background-image: linear-gradient(rgba(220,255,220,.75),rgba(0,192,0,.75),rgba(255,255,255,.75));
}

option.option-disabled {
background-color: rgba(55, 55, 55, .5);
color: #880000;
}

option:active, option:focus, option:hover, option:checked:after {
outline: none;
}
Expand Down Expand Up @@ -218,15 +233,32 @@ DIV#shadow {
display: none;
}


#update_source_button, #update_sink_button, #update_route_button,
#update_source_equalizer_button, #update_sink_equalizer_button, #update_route_equalizer_button,
#enable_disable_source_button, #enable_disable_route_button, #enable_disable_sink_button,
#listen_to_sink_button
{
display: none;
}

@media only screen and (max-width: 825px) {
DIV.section {
width: 100%;
margin-top: 5px;
}

BUTTON {
padding-top: 5px;
padding-bottom: 5px;
}
SELECT.main-select {

DIV.select-container {
font-size: inherit;
position: relative;
}

DIV.main-select {
font-size: inherit;
position: relative;
}
Expand All @@ -249,3 +281,48 @@ DIV#shadow {
font-size: 7.8vw;
}
}

@media (pointer: coarse) {
#update_source_button, #update_sink_button, #update_route_button,
#update_source_equalizer_button, #update_sink_equalizer_button, #update_route_equalizer_button,
#enable_disable_source_button, #enable_disable_route_button, #enable_disable_sink_button,
#listen_to_sink_button
{
display: inline;
}
span.button-icon {
font-size: 24pt;
}
}

SELECT.main-select option {
height: 14pt;
overflow: hidden;
padding-top: -15px;
padding-bottom: 10px;
}

SELECT.main-select option::before {
white-space: nowrap;
font-size: 14pt;
}

SELECT.main-select OPTION.option-enabled::before {
content: "🎚️⚙️🔊";
}

SELECT.main-select OPTION.option-disabled::before {
content: "🎚️⚙️🔇";
}

SELECT.main-select OPTION[DATA-TYPE="SinkDescription"].option-enabled::before {
content: "🎚️⚙️🔊📻";
}

SELECT.main-select OPTION[DATA-TYPE="SinkDescription"].option-disabled::before {
content: "🎚️⚙️🔇📻";
}

SPAN.option-label {
overflow: visible;
}
Loading

0 comments on commit d934a7d

Please sign in to comment.