mirror of
https://github.com/CyanoFresh/SmartHomePHP.git
synced 2026-03-14 22:06:50 +01:00
RGB modes
This commit is contained in:
@@ -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(),
|
||||
|
||||
16
migrations/m161229_202800_fix_history_item_id.php
Normal file
16
migrations/m161229_202800_fix_history_item_id.php
Normal 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());
|
||||
}
|
||||
}
|
||||
@@ -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,
|
||||
];
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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
37
views/panel/_rgb.php
Normal 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
22
views/panel/_switch.php
Normal 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
24
views/panel/_variable.php
Normal 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>
|
||||
@@ -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>
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
@@ -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
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user