From 0fbfde25f406bed8279444605f7dc01371cfdf19 Mon Sep 17 00:00:00 2001 From: Alex Solomaha Date: Fri, 30 Dec 2016 00:03:53 +0200 Subject: [PATCH] RGB modes --- migrations/m160922_192435_init.php | 14 --- .../m161229_202800_fix_history_item_id.php | 16 ++++ models/Item.php | 8 ++ servers/Panel.php | 47 +++++++++- views/panel/_rgb.php | 37 ++++++++ views/panel/_switch.php | 22 +++++ views/panel/_variable.php | 24 +++++ views/panel/index.php | 51 ++--------- web/css/site.css | 4 + web/css/wsclient.css | 91 +++++++++++++++++-- web/js/wsclient.js | 34 ++++++- 11 files changed, 277 insertions(+), 71 deletions(-) create mode 100644 migrations/m161229_202800_fix_history_item_id.php create mode 100644 views/panel/_rgb.php create mode 100644 views/panel/_switch.php create mode 100644 views/panel/_variable.php diff --git a/migrations/m160922_192435_init.php b/migrations/m160922_192435_init.php index 066949b..d71b845 100644 --- a/migrations/m160922_192435_init.php +++ b/migrations/m160922_192435_init.php @@ -26,20 +26,6 @@ class m160922_192435_init extends Migration 'updated_at' => $this->integer()->notNull(), ], $tableOptions); - // Register admin account - $user = new User([ - 'scenario' => 'create', - ]); - - $user->username = 'admin'; - $user->email = 'admin@domain.com'; - $user->setPassword('admin'); - $user->generateAuthKey(); - - if (!$user->save()) { - echo 'Cannot create admin account' . PHP_EOL; - } - $this->createTable('board', [ 'id' => $this->primaryKey(), 'type' => $this->smallInteger()->notNull(), diff --git a/migrations/m161229_202800_fix_history_item_id.php b/migrations/m161229_202800_fix_history_item_id.php new file mode 100644 index 0000000..4ef85a7 --- /dev/null +++ b/migrations/m161229_202800_fix_history_item_id.php @@ -0,0 +1,16 @@ +alterColumn('history', 'item_id', $this->integer()); + } + + public function safeDown() + { + $this->alterColumn('history', 'item_id', $this->integer()->notNull()); + } +} diff --git a/models/Item.php b/models/Item.php index ba2c04a..823d0d1 100644 --- a/models/Item.php +++ b/models/Item.php @@ -168,4 +168,12 @@ class Item extends ActiveRecord { return ArrayHelper::map(self::find()->all(), 'id', 'name'); } + + public static function getModesArray() + { + return [ + self::MODE_RAINBOW, + self::MODE_BREATH, + ]; + } } diff --git a/servers/Panel.php b/servers/Panel.php index 169aac3..d895093 100644 --- a/servers/Panel.php +++ b/servers/Panel.php @@ -414,6 +414,42 @@ class Panel implements MessageComponentInterface // Save to history $this->logItemValue($item, $value); + break; + case 'rgbMode': + $value = $data['mode']; + $pin = (integer)$data['pin']; + $start = (bool)$data['start']; + + $item = Item::findOne([ + 'board_id' => $board->id, + 'pin' => $pin, + ]); + + if (!$item) { + return $this->log('Trying to use unknown item'); + } + + // Trig event + // TODO +// $this->triggerItemValue($item, $value); + + if ($start) { + $this->items[$item->id]['value'] = $value; + } else { + $this->items[$item->id]['value'] = [0,0,0]; + } + + $this->sendUsers([ + 'type' => 'value', + 'item_id' => $item->id, + 'item_type' => $item->type, + 'value' => $value, + ]); + + // Save to history + // TODO +// $this->logItemValue($item, $value); + break; case 'values': unset($data['type']); @@ -702,8 +738,9 @@ class Panel implements MessageComponentInterface } $mode = $data['mode']; + $start = (bool)$data['start']; - if (!in_array($mode, [Item::MODE_BREATH, Item::MODE_RAINBOW])) { + if (!in_array($mode, Item::getModesArray())) { return $from->send(Json::encode([ 'type' => 'error', 'message' => 'Неизвестный режим', @@ -716,7 +753,6 @@ class Panel implements MessageComponentInterface case Board::TYPE_AREST: throw new NotSupportedException(); - break; case Board::TYPE_WEBSOCKET: if (!$this->isBoardConnected($board->id)) { return $from->send(Json::encode([ @@ -728,6 +764,7 @@ class Panel implements MessageComponentInterface $this->sendToBoard($board->id, [ 'type' => 'rgbMode', 'mode' => $mode, + 'action' => $start ? 'start' : 'stop', ]); break; @@ -738,7 +775,7 @@ class Panel implements MessageComponentInterface $history->user_id = $user->id; $history->item_id = $item->id; $history->commited_at = time(); - $history->value = $mode; + $history->value = $mode . ', ' . $start ? 'start' : 'stop'; if (!$history->save()) { $this->log("Cannot log: "); @@ -755,7 +792,9 @@ class Panel implements MessageComponentInterface */ private function handleScheduleTriggers($from, $user, $data) { - return $this->scheduleTriggers(); + $this->scheduleTriggers(); + + return; } /** diff --git a/views/panel/_rgb.php b/views/panel/_rgb.php new file mode 100644 index 0000000..d5a0b04 --- /dev/null +++ b/views/panel/_rgb.php @@ -0,0 +1,37 @@ + + +
+
+ + +
+
+ name ?> + + +
+
+ Режимы +
+
+
+
+
+
+
+
+
+
+
+
diff --git a/views/panel/_switch.php b/views/panel/_switch.php new file mode 100644 index 0000000..fdabf0a --- /dev/null +++ b/views/panel/_switch.php @@ -0,0 +1,22 @@ + + +
+
+
+ + +
+ +
+ name ?> +
+ +
+
diff --git a/views/panel/_variable.php b/views/panel/_variable.php new file mode 100644 index 0000000..5a56924 --- /dev/null +++ b/views/panel/_variable.php @@ -0,0 +1,24 @@ + + +
+
+ + +
+ name ?> + + НЕИЗВЕСТНО + +
+ +
+
diff --git a/views/panel/index.php b/views/panel/index.php index 1fc8192..f142c08 100644 --- a/views/panel/index.php +++ b/views/panel/index.php @@ -33,56 +33,23 @@ WSClientAsset::register($this);
getItems()->variables()->active()->all() as $item): ?> -
-
- - -
- name ?> - - НЕИЗВЕСТНО - -
- -
-
+ render('_variable', [ + 'item' => $item, + ]) ?>
getItems()->switches()->active()->all() as $item): ?> -
-
-
- - -
- -
- name ?> -
- -
-
+ render('_switch', [ + 'item' => $item, + ]) ?>
getItems()->rgb()->all() as $item): ?> -
-
- - -
- name ?> - -
- -
-
+ render('_rgb', [ + 'item' => $item, + ]) ?>
diff --git a/web/css/site.css b/web/css/site.css index 1cf2c4f..7b79487 100644 --- a/web/css/site.css +++ b/web/css/site.css @@ -33,6 +33,10 @@ background-size: cover; } +.login-box { + box-shadow: 0 0 10px 0 rgba(0,0,0,0.5); +} + .material-switch > input[type="checkbox"] { display: none; } diff --git a/web/css/wsclient.css b/web/css/wsclient.css index a455671..e0be0f5 100644 --- a/web/css/wsclient.css +++ b/web/css/wsclient.css @@ -2,24 +2,99 @@ font-size: 40px; } -.sp-replacer { - margin: 10px 0; - padding: 5px; +.item-rgb .sp-replacer { + margin: 4px 0; + padding: 0; border: 0; - border-radius: 5px; + border-radius: 0; color: inherit; background: #efefef; - display: block; + display: inline-block; position: relative; + height: 30px; + width: 100%; + box-shadow: 0 0 10px rgba(0,0,0,0.5); } -.sp-preview { +.item-rgb .sp-preview { border: none; margin-right: 0; - width: 100%; height: 30px; + width: 100%; } -.sp-dd { +.item-rgb .sp-dd { display: none; } + +.item-rgb label { + margin: 0; +} + +.item-rgb .col-xs-4 { + margin: 0; + padding: 0; + padding-right: 10px; +} + +.item-rgb .col-xs-8 { + margin: 0; + padding: 0; + padding-left: 10px; +} + +.item-rgb .border-right { + border-right: 1px solid rgba(255, 255, 255, 0.5); +} + +.item-rgb .rgb-mode { + display: inline-block; + width: 60px; + height: 50px; + cursor: pointer; + margin: 5px 10px 0 0; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); + transition: 0.5s; +} + +.item-rgb .rgb-mode.active { + /*border: 1px solid #fff;*/ +} + +.item-rgb .rgb-mode.active .rgb-mode-image { + box-shadow: inset 0 0 0 2px #fff; +} + +.item-rgb .rgb-mode-image { + height: 100%; + width: 100%; + transition: 0.5s; +} + +.item-rgb .rgb-mode-rainbow { + background: red; /* not working, let's see some red */ + background: -moz-linear-gradient(left, + rgba(255, 0, 0, 1) 0%, + rgba(255, 255, 0, 1) 15%, + rgba(0, 255, 0, 1) 30%, + rgba(0, 255, 255, 1) 50%, + rgba(0, 0, 255, 1) 65%, + rgba(255, 0, 255, 1) 80%, + rgba(255, 0, 0, 1) 100%); + background: -webkit-gradient(linear, left top, right top, + color-stop(0%, rgba(255, 0, 0, 1)), + color-stop(15%, rgba(255, 255, 0, 1)), + color-stop(30%, rgba(0, 255, 0, 1)), + color-stop(50%, rgba(0, 255, 255, 1)), + color-stop(65%, rgba(0, 0, 255, 1)), + color-stop(80%, rgba(255, 0, 255, 1)), + color-stop(100%, rgba(255, 0, 0, 1))); +} + +.item-rgb .rgb-mode-breath { + background: #000000; /* Old browsers */ + background: -moz-linear-gradient(left, #000000 0%, #30ff60 51%, #000000 100%); /* FF3.6-15 */ + background: -webkit-linear-gradient(left, #000000 0%, #30ff60 51%, #000000 100%); /* Chrome10-25,Safari5.1-6 */ + background: linear-gradient(to right, #000000 0%, #30ff60 51%, #000000 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#000000', GradientType=1); +} diff --git a/web/js/wsclient.js b/web/js/wsclient.js index 93eec30..4780822 100644 --- a/web/js/wsclient.js +++ b/web/js/wsclient.js @@ -114,9 +114,15 @@ function updateItemValue(id, type, value) { break; case 30: // RGB - var $colorPicker = $('#colorpicker-' + id); + if (typeof value === 'string') { + $('.item-rgb[data-item-id="' + id + '"]') + .find('.rgb-mode[data-mode="' + value + '"]') + .addClass('active'); + } else { + var $colorPicker = $('#colorpicker-' + id); - $colorPicker.spectrum('set', 'rgb(' + value[0] + ', ' + value[1] + ', ' + value[2] + ')'); + $colorPicker.spectrum('set', 'rgb(' + value[0] + ', ' + value[1] + ', ' + value[2] + ')'); + } break; } @@ -127,15 +133,18 @@ $(document).ready(function () { showInput: true, showButtons: false, preferredFormat: 'rgb', - change: function(color) { + change: function (color) { var item_id = $(this).data('item-id'); var red = Math.round(color._r); var green = Math.round(color._g); var blue = Math.round(color._b); + var fade = ($('.fade-checkbox[data-item-id="' + item_id + '"]:checked').length > 0); + send({ 'type': 'rgb', 'item_id': item_id, + 'fade': fade, 'red': red, 'green': green, 'blue': blue @@ -166,5 +175,24 @@ $(document).ready(function () { $(this).find('.item-switch-checkbox').click(); }); + + $('.rgb-mode').click(function (e) { + e.preventDefault(); + + var mode = $(this).data('mode'); + var start = true; + var item_id = $(this).parents('.item-rgb').data('item-id'); + + if ($(this).hasClass('active')) { + start = false + } + + send({ + "type": "rgbMode", + "item_id": item_id, + "mode": mode, + "start": start + }); + }); }); });