[Дизайн] Дизайн сцен - Погода (вертикальная)

Оформление сцен, меню, страниц

Модераторы: immortal, newz20

Аватара пользователя
Sandr
Сообщения: 124
Зарегистрирован: Пн ноя 16, 2015 5:10 pm
Благодарил (а): 19 раз
Поблагодарили: 26 раз

[Дизайн] Дизайн сцен - Погода (вертикальная)

Сообщение Sandr » Чт май 05, 2016 11:09 am

Воодушевившись темой Дизайн сцен
адаптировал для своих задач выложенные там сцены - у меня планшет висит в вертикальном положении
Но вот сцена погоды мне не очень понравилась - результат своего творчества выкладываю
Сразу оговорюсь - анимация страниц мне не нужна - если кому надо - сами возитесь :)
00.jpg
00.jpg (51.41 КБ) 11599 просмотров
screenshotsПоказать
05.jpg
05.jpg (107.34 КБ) 11599 просмотров
03.jpg
03.jpg (113.33 КБ) 11599 просмотров
01.jpg
01.jpg (105.65 КБ) 11599 просмотров
04.jpg
04.jpg (115.49 КБ) 11599 просмотров
02.jpg
02.jpg (91.78 КБ) 11599 просмотров
Требования к сцене:
установленный модуль Погода от OpenWeatherMap
Установка:
1. Создаем сценарий calculate_realfeel
calculate_realfeelПоказать

Код: Выделить всё

$t = gg('ow_day0.temperature'); // температура на улице
$h = gg('ow_day0.humidity'); // влажность на улице
$w = gg('ow_day0.wind_speed'); // данные о ветре из прогноза OpenWeather
$w=$w*3.6/1.609;//m/s -> mph
$tF = $t *1.8+32; // перевод температуры в Farenheit

if ($t > 26.6){
 // Считаем HeatIndex по Rothfusz
 $_f=-42.379 + 2.04901523*$tF + 10.14333127*$h - 0.22475541*$tF*$h - 0.00683783*$tF*$tF - 0.05481717*$h*$h + 0.00122874*$tF*$tF*$h + 0.00085282*$tF*$h*$h -0.00000199*$tF*$tF*$h*$h;
   if(($tF<112)&&($h<13)){
   // If the RH is less than 13% and the temperature is between 80 and 112 degrees F, then the following adjustment is subtracted from HI: 
     $_f=$_f-((13-$h)/4)*sqrt((17-abs($tF-95.))/17);
   }
   if(($tF<88)&&($h>85)){
    // On the other hand, if the RH is greater than 85% and the temperature is between 80 and 87 degrees F, then the following adjustment is added to HI:
    //ADJUSTMENT = [(RH-85)/10] * [(87-T)/5]
    $_f=$_f+(($h-85)/10)*((87-$tF)/5);
   }
}else if ($t <= 10){
 // Считаем фактор WindChild
 $_f = 35.74+(0.6215*$tF)-(35.75*pow($w,0.16))+((0.4275*$tF)*pow($w,0.16));
}else{
 //считаем по упрощенной формуле
 $_f = 0.5*($tF+61+(($tF-68)*1.2)+($h*0.094));
}
// переводим в цельсии
 $rf = round(($_f-32)/1.8,0);
//и пропишем значение
sg("ThisComputer.reelFeel",$rf);
// внесем дни недели прогноза
$numD=gg("ow_setting.forecast_interval");
$day[0]="ВСК";
$day[1]="ПНД";
$day[2]="ВТР";
$day[3]="СРД";
$day[4]="ЧТВ";
$day[5]="ПТН";
$day[6]="СБТ";
for ($i = 1; $i < $numD; $i++) {
 $dayNum = date("w", strtotime($date .' +'.$i.' day'));
 $name = $day[date("w", strtotime($date .' +'.$i.' day'))];
 sg("ow_day".$i.".name", $name);
 } 
2. Заходим в настройки Погода от OpenWeatherMap и устанавливаем внастройках После обновления выполнить сценарий: calculate_realfeel
3. onNewHour привести к следующему виду (добавить):
onNewHourПоказать

Код: Выделить всё

$h=(int)date('G',time());
if (gg('ThisComputer.DateD')!=date("d", time())) {
$day[0]="воскресенье";
$day[1]="понедельник";
$day[2]="вторник";
$day[3]="среда";
$day[4]="четверг";
$day[5]="пятница";
$day[6]="суббота";
$month[1]="января";
$monthAlt[1]="ЯНВАРЬ";
$monthShrt[1]="ЯНВ";
$month[2]="февраля";
$monthAlt[2]="ФЕВРАЛЬ";
$monthShrt[2]="ФЕВ";
$month[3]="марта";
$monthAlt[3]="МАРТ";
$monthShrt[3]="МАРТ";
$month[4]="апреля";
$monthAlt[4]="АПРЕЛЬ";
$monthShrt[4]="АПР";
$month[5]="мая";
$monthAlt[5]="МАЙ";
$monthShrt[5]="МАЙ";
$month[6]="июня";
$monthAlt[6]="ИЮНЬ";
$monthShrt[6]="ИЮНЬ";
$month[7]="июля";
$monthAlt[7]="ИЮЛЬ";
$monthShrt[7]="ИЮЛЬ";
$month[8]="августа";
$monthAlt[8]="АВГУСТ";
$monthShrt[8]="АВГ";
$month[9]="сентября";
$monthAlt[9]="СЕНТЯБРЬ"; 
$monthShrt[9]="СЕН"; 
$month[10]="октября";
$monthAlt[10]="ОКТЯБРЬ";
$monthShrt[10]="ОКТ";
$month[11]="ноября";
$monthAlt[11]="НОЯБРЬ";
$monthShrt[11]="НБР";
$month[12]="декабря";
$monthAlt[12]="ДЕКАБРЬ";
$monthShrt[12]="ДЕК";
sg("ThisComputer.DateD",date( "d", time()));
sg("ThisComputer.DateM",date( "m", time()));
sg("ThisComputer.DateY",date( "Y", time()));
sg("ThisComputer.Date",date( "d.m.Y", time()));
sg("ThisComputer.Day",$day[date("w")]);
sg("ThisComputer.Month",$month[date("n")]);
sg("ThisComputer.MonthAlt",$monthAlt[date("n")]);
sg("ThisComputer.MonthShrt",$monthShrt[date("n")]);
} 
$h=(int)date('G',time());
//часы с нулем впереди
if($h<10)
{$h1="0".$h;} 
else 
{$h1=$h;}; 
sg("ThisComputer.timeHH",$h1); 
4. распаковать в корень сайта архив (добавлена стрелка направления ветра и несколько фонов, нет зимних фонов)
5. импортировать сцену:
для планшета:
погода2.scene.zip
(3.71 КБ) 218 скачиваний
для MajorDroid разрешение экрана FullHD:
droid_погода.scene.zip
(3.86 КБ) 179 скачиваний
староеПоказать
На данный момент картинки фона и иконки именуются по классификации OpenWeatherMaps icons по 9 состояний погоды на день / ночь, в теории есть возможность привязаться к Weather condition codes и там вариаций уже тьма :)

Файл + элементы + SQL + картинки https://yadi.sk/d/sV9RHqQbrWi2i
Элементы сцен

В системе MJD внесены дополнительно:
  • Используется модуль OpenWeatherMap с прогнозом на 5 дней
  • Сокращение дней недели (onNewHour)
  • Расчет RealFeel
onNewHour

Код: Выделить всё

// раскидываем дату и время если изменилось в Windows
$h=(int)date('G',time());

if (gg('ThisComputer.DateD')!=date("d", time())) {

$day[0]="воскресенье";
$day[1]="понедельник";
$day[2]="вторник";
$day[3]="среда";
$day[4]="четверг";
$day[5]="пятница";
$day[6]="суббота";

$month[1]="января";
$monthAlt[1]="ЯНВАРЬ";
$monthShrt[1]="ЯНВ";
$month[2]="февраля";
$monthAlt[2]="ФЕВРАЛЬ";
$monthShrt[2]="ФЕВ";
$month[3]="марта";
$monthAlt[3]="МАРТ";
$monthShrt[3]="МАРТ";
$month[4]="апреля";
$monthAlt[4]="АПРЕЛЬ";
$monthShrt[4]="АПР";
$month[5]="мая";
$monthAlt[5]="МАЙ";
$monthShrt[5]="МАЙ";
$month[6]="июня";
$monthAlt[6]="ИЮНЬ";
$monthShrt[6]="ИЮНЬ";
$month[7]="июля";
$monthAlt[7]="ИЮЛЬ";
$monthShrt[7]="ИЮЛЬ";
$month[8]="августа";
$monthAlt[8]="АВГУСТ";
$monthShrt[8]="АВГ";
$month[9]="сентября";
$monthAlt[9]="СЕНТЯБРЬ"; 
$monthShrt[9]="СЕН"; 
$month[10]="октября";
$monthAlt[10]="ОКТЯБРЬ";
$monthShrt[10]="ОКТ";
$month[11]="ноября";
$monthAlt[11]="НОЯБРЬ";
$monthShrt[11]="НБР";
$month[12]="декабря";
$monthAlt[12]="ДЕКАБРЬ";
$monthShrt[12]="ДЕК";

sg("ThisComputer.DateD",date( "d", time()));
sg("ThisComputer.DateM",date( "m", time()));
sg("ThisComputer.DateY",date( "Y", time()));
sg("ThisComputer.Date",date( "d.m.Y", time()));
sg("ThisComputer.Day",$day[date("w")]);
sg("ThisComputer.Month",$month[date("n")]);
sg("ThisComputer.MonthAlt",$monthAlt[date("n")]);
sg("ThisComputer.monthShrt",$monthShrt[date("n")]);
}
В планах:
  • Разобраться с фонами - к сожалению background-image: в CSS пока мне не удалось динамически подменять как происходит с иконками при смене прогноза, и фон изменится лишь при перезагрузке страницы
  • Пока не удалось прописать стрелку компаса направления ветра :( - буду рад помощи.

PS: предлагаю выкладывать свои наборы фонов/иконок в этой теме :)

Решение проблемы с импортом
Последний раз редактировалось Sandr Пт май 06, 2016 12:44 pm, всего редактировалось 2 раза.
За это сообщение автора Sandr поблагодарили (всего 5):
ivannag (Чт май 05, 2016 12:29 pm) • kawkay (Чт май 05, 2016 2:08 pm) • samum (Пт авг 26, 2016 11:23 pm) • shemnik69 (Ср ноя 09, 2016 10:47 am) • Sergey.Chek (Чт окт 17, 2019 8:19 am)
Рейтинг: 6.33%
Win Home Serv 2011 / Intel Core i3 / 32 GB ram /
Сцена погода (вертикальная)
mySensor скетчи ( 4х канальный димер | Оптимизация скетчей )
Ну и конечно моя маленькая фабрика - 3D печать / фрезеровка / литье
ivannag
Сообщения: 146
Зарегистрирован: Вт апр 12, 2016 12:19 am
Благодарил (а): 18 раз
Поблагодарили: 27 раз

Re: Дизайн сцен - Погода (вертикальная)

Сообщение ivannag » Чт май 05, 2016 12:29 pm

Лишь собрался переделывать погоду (именно под этот стиль) - как тут уже и готовый вариант выложили...))))
Спасибо!!
Насколько помню, указатель направления ветра поворачивают средствами css, нам даже не нужно его пересчитывать, поскольку OpenWeather хранит его уже в градусах, свойство .wind_direction.
подсмотрел в шпаргалку на синтаксис css, чтобы это отобразить:

Код: Выделить всё

 {
   -webkit-transform: rotate(45deg);
   -moz-transform: rotate(45deg);
}
 
я так понимаю достаточно назначить этот стиль стрелке и вместо указания градусов подставить значение .wind_direction
Как будет время постараюсь разобраться в вашей сцене и переделать ветер (если к тому времени оно еще будет актуально).
ivannag
Сообщения: 146
Зарегистрирован: Вт апр 12, 2016 12:19 am
Благодарил (а): 18 раз
Поблагодарили: 27 раз

Re: Дизайн сцен - Погода (вертикальная)

Сообщение ivannag » Чт май 05, 2016 3:23 pm

Попытался импортировать вашу сцену, импортировались только контейнеры и стили... элементов нету...
Хотя открыл сцену блокнотом и вижу, что вроде-бы они там описаны в самом низу... только у меня одного так или еще у кого-то похожая проблема с импортом?
Для отображения основных панелей необходимо править general_CSS и указывать там новые element_id а вот сами самих элементов таки нет... нужно самому создавать и навешивать...(((
DiArt
Сообщения: 210
Зарегистрирован: Пт апр 12, 2013 2:27 pm
Откуда: Уфа
Благодарил (а): 28 раз
Поблагодарили: 15 раз

Re: Дизайн сцен - Погода (вертикальная)

Сообщение DiArt » Чт май 05, 2016 7:42 pm

Подтверждаю. Сохрани отдельно элементы сцены и выложи сюда плиз
Система на Неттоп 3Q Nettop Qoo!
(Intel Celeron J1800, 2x2410 МГц, 4096 Мб, HDD 1000 Гб, HDMI, VGA , Wi-Fi, Ethernet, Ubuntu 14.04.2)
Вторая система на Raspberry Pi 3.
D-Link DCS-930L/Broadlink RM2-Pro/BroadLink SP3 CC/Ginzzu HS-K07W
Я в CONNECT
Аватара пользователя
Sandr
Сообщения: 124
Зарегистрирован: Пн ноя 16, 2015 5:10 pm
Благодарил (а): 19 раз
Поблагодарили: 26 раз

Re: Дизайн сцен - Погода (вертикальная)

Сообщение Sandr » Чт май 05, 2016 10:13 pm

Приношу извинения :)
вот файл Элементов отдельно
Погода_элементы.zip
(2.52 КБ) 269 скачиваний
И в шапке архив тоже обновил
Win Home Serv 2011 / Intel Core i3 / 32 GB ram /
Сцена погода (вертикальная)
mySensor скетчи ( 4х канальный димер | Оптимизация скетчей )
Ну и конечно моя маленькая фабрика - 3D печать / фрезеровка / литье
ivannag
Сообщения: 146
Зарегистрирован: Вт апр 12, 2016 12:19 am
Благодарил (а): 18 раз
Поблагодарили: 27 раз

Re: Дизайн сцен - Погода (вертикальная)

Сообщение ivannag » Пт май 06, 2016 12:18 am

вроде ничего не изменилось... импортировались только контейнеры... а элементов по-прежнему нет...
Вложения
no_elements.jpg
no_elements.jpg (79.05 КБ) 11438 просмотров
Аватара пользователя
Sandr
Сообщения: 124
Зарегистрирован: Пн ноя 16, 2015 5:10 pm
Благодарил (а): 19 раз
Поблагодарили: 26 раз

Re: Дизайн сцен - Погода (вертикальная)

Сообщение Sandr » Пт май 06, 2016 8:53 am

Действительно наблюдаю косяк экспорта
Все элементы прописаны в файле .scene но по какой то причине не импортируются

PS: Провел тестовый импорт - все элементы вложенные в контейнеры, импортируются в контейнеры из оригинальной сцены
То есть привязка по ID при экспорте сохраняется - вообщем не сложно и исправить ID после импорта - но это косяк экспорта/импорта
Win Home Serv 2011 / Intel Core i3 / 32 GB ram /
Сцена погода (вертикальная)
mySensor скетчи ( 4х канальный димер | Оптимизация скетчей )
Ну и конечно моя маленькая фабрика - 3D печать / фрезеровка / литье
Аватара пользователя
Sandr
Сообщения: 124
Зарегистрирован: Пн ноя 16, 2015 5:10 pm
Благодарил (а): 19 раз
Поблагодарили: 26 раз

Re: Дизайн сцен - Погода (вертикальная)

Сообщение Sandr » Пт май 06, 2016 11:37 am

Вообщем резюме с косяком экспорта/импорта
СпойлерПоказать
У каждого элемента есть свой уникальный ID в том числе и у контейнера
При экспорте "CONTAINER_ID";s:4:"1001" сохраняется в файле

Например есть контейнер C (id)1 и элемент E (id2) в контейнере 1
при импорте присваиваются новые уникальные ID причем их нумерация связана с AUTOINCRENEMENT в MySQL
В результате при импорте Сцены
контейнер C получил новый ID например 235
а элемент E получил ID например 236 но в его привязке номер контейнера обнуляется "CONTAINER_ID";s:4:"0"
и мы эти элементы теперь можем только ручками по новым контейнерам распихать
Есть два выхода из положения
  • Импортировать сцену напрямую в MySQL - Самый простой способ
    Погода.sql.zip
    Файл SQL для прямого импорта в MySQL
    (3.66 КБ) 185 скачиваний
  • Импортировать файл .elements в пустую сцену и ручками раскидать элементы по контейнерам согласно структуре
    ПОгода.png
    Структура сцены
    ПОгода.png (8.46 КБ) 11375 просмотров
    Погода.elements.zip
    (3.64 КБ) 201 скачивание
Импорт в MysqlПоказать
Открыть PHPMyAdmin на вашем сервере MJD
Обычно это http://127.0.0.1/phpmyadmin4/index.php?db=db_terminal
Логин обычно root
пароль пустой
и проимпортировать файл .sql (в db_terminal )
Win Home Serv 2011 / Intel Core i3 / 32 GB ram /
Сцена погода (вертикальная)
mySensor скетчи ( 4х канальный димер | Оптимизация скетчей )
Ну и конечно моя маленькая фабрика - 3D печать / фрезеровка / литье
ivannag
Сообщения: 146
Зарегистрирован: Вт апр 12, 2016 12:19 am
Благодарил (а): 18 раз
Поблагодарили: 27 раз

Re: Дизайн сцен - Погода (вертикальная)

Сообщение ivannag » Пт май 06, 2016 5:39 pm

Спасибо, теперь все получилось...
Насчет разговора об указании направления...

1. создаем новый класс для css (пока просто дописал в general_css), срабатывает правда только при обновлении страницы... возможно правильнее прописать его в теле хтмл блока (если сработает там) или еще где-то... незнаю, только учусь)))

Код: Выделить всё

.rotate {
-webkit-transform: rotate(%ow_fact.wind_direction%deg);
-moz-transform: rotate(%ow_fact.wind_direction%deg);
-ms-transform: rotate(%ow_fact.wind_direction%deg);
} 
%ow_fact.wind_direction% - текущее направление ветра из openweather

2. создаем новый элемент с типом html, (желательно в контейнере current-panel) с содержанием:

Код: Выделить всё

<div>
 <img src="/cms/scenes/weather/elements/direction.png" class="rotate"/>
</div>
 
direction.png - должен быть нарисован (скачан с инета) и помещен в соответствующую папку

3. созданный элемент в режиме "Просмотр & Редактировать" размещаем в нужном месте и затем выставляем низкий приоритет, чтобы в контейнере он был ниже всех (тогда цифра со значением скорости ветра будет поверх стрелки).

P.S. описанный мною метод один (увеерен, что не самый лучший) из вариантов решения, но надеюсь поможет автору реализовать данную функцию в своей сцене))

P.S.P.S. Уважаемый, Sandr, если не трудно выложите пожалуйста оригинальные картинки с фонами (не кадрированные), делаю сцену горизонтальную и вертикальные картинки плохо смотрятся... ))
Вложения
direction.png
direction.png (20.85 КБ) 11345 просмотров
Аватара пользователя
Sandr
Сообщения: 124
Зарегистрирован: Пн ноя 16, 2015 5:10 pm
Благодарил (а): 19 раз
Поблагодарили: 26 раз

Re: Дизайн сцен - Погода (вертикальная)

Сообщение Sandr » Сб май 07, 2016 12:19 pm

ivannag писал(а):Спасибо, теперь все получилось...
P.S.P.S. Уважаемый, Sandr, если не трудно выложите пожалуйста оригинальные картинки с фонами (не кадрированные), делаю сцену горизонтальную и вертикальные картинки плохо смотрятся... ))
Исходники к сожалению не сохранил но google нам в помощь, например вводим "clear sky field background" с разрешением "больше чем 1600х1200":
Win Home Serv 2011 / Intel Core i3 / 32 GB ram /
Сцена погода (вертикальная)
mySensor скетчи ( 4х канальный димер | Оптимизация скетчей )
Ну и конечно моя маленькая фабрика - 3D печать / фрезеровка / литье
Ответить