diff --git a/app/css/app.css b/app/css/app.css
index ef158f2..e4f41ce 100644
--- a/app/css/app.css
+++ b/app/css/app.css
@@ -97,6 +97,124 @@ footer {
left: -8px;
font-size: 27px;
}
+#dial-c {
+ margin-top: 85px;
+ margin-left: 15px;
+}
+#dial-c .dial-wedge,
+#dial-c .dial-marker {
+ background: #00FFFF;
+}
+#dial-c input {
+ color: #00FFFF;
+ border-color: #00FFFF;
+}
+#dial-m {
+ margin-top: 85px;
+ margin-left: 105px;
+}
+#dial-m .dial-wedge,
+#dial-m .dial-marker {
+ background: #FF00FF;
+}
+#dial-m input {
+ color: #FF00FF;
+ border-color: #FF00FF;
+}
+#dial-y {
+ margin-top: 85px;
+ margin-left: 195px;
+}
+#dial-y .dial-wedge,
+#dial-y .dial-marker {
+ background: #FFFF00;
+}
+#dial-y input {
+ color: #FFFF00;
+ border-color: #FFFF00;
+}
+.dial-wrapper {
+ position: absolute;
+ width: 5.5em;
+ height: 5.5em;
+}
+.dial-wrapper:after {
+ content: "";
+ background: #272b30;
+ border-radius: 50%;
+ width: 5em;
+ height: 5em;
+ position: absolute;
+ top: 0.25em;
+ left: 0.25em;
+}
+.dial-wrapper input {
+ margin-top: 6em;
+ width: 4.5em;
+ margin-left: 1em;
+ background: #272b30;
+ border: 1px solid;
+ text-align: center;
+}
+.dial-container {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ overflow: hidden;
+ width: 2.75em;
+}
+.dial-container.dial-container1 {
+ left: 2.75em;
+}
+.dial-container.dial-container1 .dial-wedge {
+ transform: rotateZ(360deg);
+ border-radius: 0 5.5em 5.5em 0;
+ left: 0;
+ transform-origin: 0 50%;
+}
+.dial-container.dial-container2 {
+ left: 0;
+}
+.dial-container.dial-container2 .dial-wedge {
+ transform: rotateZ(0);
+ border-radius: 5.5em 0 0 5.5em;
+ transform-origin: 5.5em 5.5em;
+}
+.dial-wedge {
+ height: 5.5em;
+ width: 2.75em;
+}
+.dial-marker {
+ border-radius: 50%;
+ height: 0.25em;
+ width: 0.25em;
+ position: absolute;
+ top: 0;
+ left: calc(49%);
+}
+.dial-end {
+ transform: rotateZ(360deg);
+ transform-origin: 50% 2.75em;
+}
+/*@keyframes rotate-bg-1 {
+ 50%, 100% {
+ transform: rotateZ(180deg);
+ }
+}
+@keyframes rotate-bg-2 {
+ 0%, 50% {
+ transform: rotateZ(0);
+ }
+ 100% {
+ transform: rotateZ(180deg);
+ }
+}
+@keyframes rotate-marker {
+ 100% {
+ transform: rotateZ(360deg);
+ }
+}
+*/
.mcopy-light {
background: #000;
width: 15px;
diff --git a/app/css/app.less b/app/css/app.less
index 7dc815a..84f9b66 100644
--- a/app/css/app.less
+++ b/app/css/app.less
@@ -141,7 +141,7 @@ footer{
left: -1px;
top: -2px;
&:before{
- font-family:'FontAwesome';
+ font-family: 'FontAwesome';
content: '\f107';
position: absolute;
color: #000;
@@ -150,6 +150,135 @@ footer{
font-size: 27px;
}
}
+
+@dial_size : 5.5em;
+@dial_thickness : 0.5em;
+@dial_cyan : #00FFFF;
+@dial_magenta : #FF00FF;
+@dial_yellow : #FFFF00;
+@dial_left : 15px;
+@dial_spacing : 90px;
+
+#dial-c {
+ margin-top: 85px;
+ margin-left: @dial_left;
+ .dial-wedge,
+ .dial-marker{
+ background: @dial_cyan;
+ }
+ input{
+ color: @dial_cyan;
+ border-color: @dial_cyan;
+ }
+}
+#dial-m {
+ margin-top: 85px;
+ margin-left: @dial_left + @dial_spacing;
+ .dial-wedge,
+ .dial-marker{
+ background: @dial_magenta;
+ }
+ input{
+ color: @dial_magenta;
+ border-color: @dial_magenta;
+ }
+}
+#dial-y {
+ margin-top: 85px;
+ margin-left: @dial_left + (@dial_spacing * 2);
+ .dial-wedge,
+ .dial-marker{
+ background: @dial_yellow;
+ }
+ input{
+ color: @dial_yellow;
+ border-color: @dial_yellow;
+ }
+}
+
+.dial-wrapper {
+ position: absolute;
+ width: @dial_size;
+ height: @dial_size;
+ &:after {
+ content: "";
+ background: @BG;
+ border-radius: 50%;
+ width: @dial_size - @dial_thickness;
+ height: @dial_size - @dial_thickness;
+ position: absolute;
+ top: @dial_thickness / 2;
+ left: @dial_thickness / 2;
+ }
+ input{
+ margin-top: @dial_size + 0.5em;
+ width: @dial_size - 1em;
+ margin-left: 1em;
+ background: @BG;
+ border: 1px solid;
+ text-align: center;
+ }
+}
+.dial-container {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ overflow: hidden;
+ width: @dial_size / 2;
+ &.dial-container1 {
+ left: @dial_size / 2;
+ .dial-wedge {
+ transform: rotateZ(360deg);
+ border-radius: 0 @dial_size @dial_size 0;
+ left: 0;
+ transform-origin: 0 50%;
+ }
+ }
+ &.dial-container2 {
+ left: 0;
+ .dial-wedge {
+ transform: rotateZ(0);
+ border-radius: @dial_size 0 0 @dial_size;
+ transform-origin: @dial_size @dial_size;
+ }
+ }
+}
+.dial-wedge {
+ height: @dial_size;
+ width: @dial_size / 2;
+}
+.dial-marker {
+ border-radius: 50%;
+ height: @dial_thickness / 2;
+ width: @dial_thickness / 2;
+ position: absolute;
+ top: 0;
+ left: calc(50% - (@dial_thickness * 2));
+}
+.dial-end {
+ transform: rotateZ(360deg);
+ transform-origin: 50% @dial_size / 2;
+}
+/*@keyframes rotate-bg-1 {
+ 50%, 100% {
+ transform: rotateZ(180deg);
+ }
+}
+@keyframes rotate-bg-2 {
+ 0%, 50% {
+ transform: rotateZ(0);
+ }
+ 100% {
+ transform: rotateZ(180deg);
+ }
+}
+@keyframes rotate-marker {
+ 100% {
+ transform: rotateZ(360deg);
+ }
+}
+*/
+
.mcopy-light{
background: #000;
width: 15px;
diff --git a/app/index.html b/app/index.html
index 67cfe77..94e242d 100644
--- a/app/index.html
+++ b/app/index.html
@@ -97,6 +97,39 @@
diff --git a/app/js/app.js b/app/js/app.js
index 66adf33..46f3f7e 100644
--- a/app/js/app.js
+++ b/app/js/app.js
@@ -3806,6 +3806,12 @@ light.cmy.init = function () {
};
+light.cmy.setDial = function (dial, val) {
+ 'use strict';
+ var elem = $('#dial-' + dial);
+
+};
+
//RGB GUI
light.rgb = {};
light.rgb.elem;
diff --git a/app/src/index.js b/app/src/index.js
index bef3159..cecfc95 100644
--- a/app/src/index.js
+++ b/app/src/index.js
@@ -767,6 +767,12 @@ light.cmy.init = function () {
};
+light.cmy.setDial = function (dial, val) {
+ 'use strict';
+ var elem = $('#dial-' + dial);
+
+};
+
//RGB GUI
light.rgb = {};
light.rgb.elem;