RGB modes

This commit is contained in:
Alex Solomaha
2016-12-30 00:03:53 +02:00
parent 4252193b2e
commit 0fbfde25f4
11 changed files with 277 additions and 71 deletions

View File

@@ -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(),

View File

@@ -0,0 +1,16 @@
<?php
use yii\db\Migration;
class m161229_202800_fix_history_item_id extends Migration
{
public function safeUp()
{
$this->alterColumn('history', 'item_id', $this->integer());
}
public function safeDown()
{
$this->alterColumn('history', 'item_id', $this->integer()->notNull());
}
}

View File

@@ -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,
];
}
}

View File

@@ -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;
}
/**

37
views/panel/_rgb.php Normal file
View File

@@ -0,0 +1,37 @@
<?php
/* @var $this yii\web\View */
/* @var $item \app\models\Item */
?>
<div class="col-md-4 panel-item item-rgb" data-item-id="<?= $item->id ?>">
<div class="info-box bg-<?= $item->bg ?> <?= $item->class ?>">
<span class="info-box-icon"><i class="fa fa-<?= $item->icon ?>"></i></span>
<div class="info-box-content">
<div class="col-xs-4 border-right">
<span class="info-box-text"><?= $item->name ?></span>
<span class="info-box-number"><input type="text"
id="colorpicker-<?= $item->id ?>"
class="rgb-colorpicker"
data-item-id="<?= $item->id ?>"></span>
<label>
<input type="checkbox" class="fade-checkbox" data-item-id="<?= $item->id ?>" checked>
Плавно
</label>
</div>
<div class="col-xs-8">
<span class="info-box-text">Режимы</span>
<div class="rgb-modes-list">
<div class="rgb-mode" data-mode="rainbow">
<div class="rgb-mode-image rgb-mode-rainbow"></div>
</div>
<div class="rgb-mode" data-mode="breath">
<div class="rgb-mode-image rgb-mode-breath"></div>
</div>
</div>
</div>
</div>
</div>
</div>

22
views/panel/_switch.php Normal file
View File

@@ -0,0 +1,22 @@
<?php
/* @var $this yii\web\View */
/* @var $item \app\models\Item */
?>
<div class="col-md-3 col-sm-4 control-panel-item item-switch"
data-item-id="<?= $item->id ?>">
<div class="info-box bg-<?= $item->bg ?> <?= $item->class ?>">
<div class="info-box-action material-switch">
<input id="switch-for-item-<?= $item->id ?>" class="item-switch-checkbox"
type="checkbox" data-item-id="<?= $item->id ?>">
<label for="switch-for-item-<?= $item->id ?>" class="label-default"></label>
</div>
<div class="info-box-content">
<span class="info-box-text"><?= $item->name ?></span>
</div>
<!-- /.info-box-content -->
</div>
</div>

24
views/panel/_variable.php Normal file
View File

@@ -0,0 +1,24 @@
<?php
/* @var $this yii\web\View */
/* @var $item \app\models\Item */
use app\models\Item;
?>
<div class="col-md-3 col-sm-4 control-panel-item item-variable"
data-item-id="<?= $item->id ?>">
<div class="info-box bg-<?= $item->bg ?> <?= $item->class ?>">
<span class="info-box-icon"><i class="fa fa-<?= $item->icon ?>"></i></span>
<div class="info-box-content">
<span class="info-box-text"><?= $item->name ?></span>
<span
class="info-box-number item-value <?= ($item->type === Item::TYPE_VARIABLE_TEMPERATURE or $item->type === Item::TYPE_VARIABLE_HUMIDITY) ? 'temperature' : '' ?>">
НЕИЗВЕСТНО
</span>
</div>
<!-- /.info-box-content -->
</div>
</div>

View File

@@ -33,56 +33,23 @@ WSClientAsset::register($this);
<div class="box-body control-panel-items">
<div class="row items-variable">
<?php foreach ($room->getItems()->variables()->active()->all() as $item): ?>
<div class="col-md-3 col-sm-4 control-panel-item item-variable"
data-item-id="<?= $item->id ?>">
<div class="info-box bg-<?= $item->bg ?> <?= $item->class ?>">
<span class="info-box-icon"><i class="fa fa-<?= $item->icon ?>"></i></span>
<div class="info-box-content">
<span class="info-box-text"><?= $item->name ?></span>
<span
class="info-box-number item-value <?= ($item->type === Item::TYPE_VARIABLE_TEMPERATURE or $item->type === Item::TYPE_VARIABLE_HUMIDITY) ? 'temperature' : '' ?>">
НЕИЗВЕСТНО
</span>
</div>
<!-- /.info-box-content -->
</div>
</div>
<?= $this->render('_variable', [
'item' => $item,
]) ?>
<?php endforeach; ?>
</div>
<div class="row items-switch">
<?php foreach ($room->getItems()->switches()->active()->all() as $item): ?>
<div class="col-md-3 col-sm-4 control-panel-item item-switch"
data-item-id="<?= $item->id ?>">
<div class="info-box bg-<?= $item->bg ?> <?= $item->class ?>">
<div class="info-box-action material-switch">
<input id="switch-for-item-<?= $item->id ?>" class="item-switch-checkbox"
type="checkbox" data-item-id="<?= $item->id ?>">
<label for="switch-for-item-<?= $item->id ?>" class="label-default"></label>
</div>
<div class="info-box-content">
<span class="info-box-text"><?= $item->name ?></span>
</div>
<!-- /.info-box-content -->
</div>
</div>
<?= $this->render('_switch', [
'item' => $item,
]) ?>
<?php endforeach; ?>
</div>
<div class="row items-rgb">
<?php foreach ($room->getItems()->rgb()->all() as $item): ?>
<div class="col-md-3 col-sm-4 control-panel-item item-rgb"
data-item-id="<?= $item->id ?>">
<div class="info-box bg-<?= $item->bg ?> <?= $item->class ?>">
<span class="info-box-icon"><i class="fa fa-<?= $item->icon ?>"></i></span>
<div class="info-box-content">
<span class="info-box-text"><?= $item->name ?></span>
<input type="text" id="colorpicker-<?= $item->id ?>" class="rgb-colorpicker" data-item-id="<?= $item->id ?>">
</div>
<!-- /.info-box-content -->
</div>
</div>
<?= $this->render('_rgb', [
'item' => $item,
]) ?>
<?php endforeach; ?>
</div>
</div>

View File

@@ -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;
}

View File

@@ -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);
}

View File

@@ -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
});
});
});
});