[Модуль] Open Weather (app_openweather)

[CAHbKA]

Как то ручками город можно добавить? список городов подгружается бесконечно. фаирфоксом и хромом пробовал

Ручками в базу можно напрямую ткнуть строчку...но лучше бы разобраться - почему не работает...могу подключиться посмотреть?

Пока ручками добавил. может позже. у меня 5 часов разницы с мск. неудобно удаленно координироваться.

[adzam]

Мне нужен виджет шириной 250-300 пикселей и высотой не больше 100-150 пикселей.
На виджете должен быть недельный прогноз.

0.0.png (9.93 КБ) 4798 просмотров

Попробуй виджет размер 280*140, прогноз на неделю.
Распаковать в директорию _majordomo\htdocs\templates\app_openweather\widgets

СпойлерПоказать

forecast.widget1a.rar

(1.65 КБ) 212 скачиваний

Вызывать командой [#module name="app_openweather" vid="1" widget="forecast.widget1a"#]

[Volter5000]

Помогите разобраться. В качестве док станции использую планшет acer a500 с версией андроида 4.4. При добавлении виджета widget=".forecast.widget1.swp" на сцену имею на выходе только голубую подложку и название города, анимация не проигрывается. Я подозреваю что версия оси старая и не может с ней справиться. Можно как нибудь отключить анимацию что-бы просто выводился виджет без всяких анимаций при появлении. На пк если что все четко работает.

[adzam]

Откройте файл виджета с помощью текстового редактора и в стилях удалите анимацию.

СпойлерПоказать

<style>
@import url(https://fonts.googleapis.com/css?family ... 00,400,700);
@import url(https://cdnjs.cloudflare.com/ajax/libs/ ... ns.min.css);
/* Vars */
/* Grid System */
.fc-widget-1 * {
box-sizing: border-box;
}
.fc-widget-1 {
max-width: 620px;
position: relative;
padding: 0 15;
min-width: 600px;
}
.fc-widget-1:before, .fc-widget-1:after {
content: "";
display: table;
}
.fc-widget-1:after {
clear: both;
}
.fc-widget-1 .row:before, .fc-widget-1 .row:after {
content: "";
display: table;
}
.fc-widget-1 .row:after {
clear: both;
}
.fc-widget-1 .columns {
float: left;
display: block;
margin-bottom: 0px;
vertical-align: top;
padding: 0;
}
.fc-widget-1 .columns.sm-days {
width: 14.28%;
opacity: 0;
}
/* Main Styles */
.fc-widget-1 {
color: #fff;
font-family: "Lato", "Arial", sans-serif;
font-size: 1.5rem;
line-height: 1.6;
transition: all 0.5s;
}
.fc-widget-1 {
background: rgba(64, 165, 188, 0.8);
border-radius: 0.5rem;
box-shadow: inset 0 1.5px 4px rgba(255, 255, 255, 0.25), inset 0 1.5px 6px rgba(255, 255, 255, 0.25);
min-height: 200px;
overflow: hidden;
}
/* Header Section */
.fc-widget-1 header {
font-size: 3rem;
font-weight: 300;
padding: 1rem;
text-align: center;
overflow: hidden;
}
.fc-widget-1 header h2 {
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-top: 0px;
margin-bottom: 0px;
}
.fc-widget-1 .current-city-day {
font-size: 1rem;
display: block;
}
.fc-widget-1 sup {
position: relative;
top: -1em;
font-size: 50%;
}
.fc-widget-1 .current-city-weather {
font-size: 4rem;
}
/* Week Days Section */
.fc-widget-1 .week-days {
font-weight: 700;
text-align: center;
}
.fc-widget-1 .day {
background: #55a0b3;
border: 1px solid #86bdc9;
}
.fc-widget-1 .sm-days {
border-right: 1px solid #86bdc9;
cursor: pointer;
}
.fc-widget-1 .sm-days:last-child {
border: none;
}
.fc-widget-1 .day-weather-icon,
.fc-widget-1 .day-weather-info {
margin: 1rem 0;
}

.fc-widget-1 .day-weather-info h2{
margin: 0;
}
.day-weather-icon {
font-size: 2.5rem;
}
/* Media Queries */
@media (max-width: 720px) {
.fc-widget-1 {
font-size: 12px;
}
}
@media (max-width: 520px) {

.fc-widget-1 .columns {
float: left;
margin-left: 0;
margin-top: 1rem;
}
.fc-widget-1 .columns:nth-child(odd) {
margin-left: 0;
}
.fc-widget-1 .columns.sm-four,
.fc-widget-1 .columns.sm-days {
width: 100%;
}
.fc-widget-1 .day {
padding: 1rem;
}
.fc-widget-1 .current-city-day {
font-size: 2rem;
}
}
/* Keyframes */
@keyframes fadeInUp {
0% {
opacity: 0;
transform: translate3d(0, 100%, 0);
}
100% {
opacity: 1;
transform: none;
}
}
.fc-widget-1 .fadeInUp {
animation-name: fadeInUp;
animation-duration: 1s;
animation-fill-mode: both;
}
@keyframes fadeIn {
0% {
transform: scale(0.8);
}
100% {
opacity: 1;
transform: scale(1);
}
}
.fc-widget-1 .fadeIn,
.fc-widget-1 .columns.sm-days {
animation-name: fadeIn;
animation-duration: 1s;
animation-fill-mode: both;
}
.fc-widget-1 .sm-days:nth-child(1) {
animation-delay: 0.2s;
}
.fc-widget-1 .sm-days:nth-child(2) {
animation-delay: 0.4s;
}
.fc-widget-1 .sm-days:nth-child(3) {
animation-delay: 0.6s;
}
.fc-widget-1 .sm-days:nth-child(4) {
animation-delay: 0.8s;
}
.fc-widget-1 .sm-days:nth-child(5) {
animation-delay: 1s;
}
.fc-widget-1 .sm-days:nth-child(6) {
animation-delay: 1.2s;
}
.fc-widget-1 .sm-days:nth-child(7) {
animation-delay: 1.4s;
}


</style>

[ImageMaker]

Попробуй виджет размер 280*140, прогноз на неделю.

Спасибо.

Температуру показывает, но не видны иконки погоды
Как поправить?

[Volter5000]

Откройте файл виджета с помощью текстового редактора и в стилях удалите анимацию.

СпойлерПоказать

<style>
@import url(https://fonts.googleapis.com/css?family ... 00,400,700);
@import url(https://cdnjs.cloudflare.com/ajax/libs/ ... ns.min.css);
/* Vars */
/* Grid System */
.fc-widget-1 * {
box-sizing: border-box;
}
.fc-widget-1 {
max-width: 620px;
position: relative;
padding: 0 15;
min-width: 600px;
}
.fc-widget-1:before, .fc-widget-1:after {
content: "";
display: table;
}
.fc-widget-1:after {
clear: both;
}
.fc-widget-1 .row:before, .fc-widget-1 .row:after {
content: "";
display: table;
}
.fc-widget-1 .row:after {
clear: both;
}
.fc-widget-1 .columns {
float: left;
display: block;
margin-bottom: 0px;
vertical-align: top;
padding: 0;
}
.fc-widget-1 .columns.sm-days {
width: 14.28%;
opacity: 0;
}
/* Main Styles */
.fc-widget-1 {
color: #fff;
font-family: "Lato", "Arial", sans-serif;
font-size: 1.5rem;
line-height: 1.6;
transition: all 0.5s;
}
.fc-widget-1 {
background: rgba(64, 165, 188, 0.8);
border-radius: 0.5rem;
box-shadow: inset 0 1.5px 4px rgba(255, 255, 255, 0.25), inset 0 1.5px 6px rgba(255, 255, 255, 0.25);
min-height: 200px;
overflow: hidden;
}
/* Header Section */
.fc-widget-1 header {
font-size: 3rem;
font-weight: 300;
padding: 1rem;
text-align: center;
overflow: hidden;
}
.fc-widget-1 header h2 {
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-top: 0px;
margin-bottom: 0px;
}
.fc-widget-1 .current-city-day {
font-size: 1rem;
display: block;
}
.fc-widget-1 sup {
position: relative;
top: -1em;
font-size: 50%;
}
.fc-widget-1 .current-city-weather {
font-size: 4rem;
}
/* Week Days Section */
.fc-widget-1 .week-days {
font-weight: 700;
text-align: center;
}
.fc-widget-1 .day {
background: #55a0b3;
border: 1px solid #86bdc9;
}
.fc-widget-1 .sm-days {
border-right: 1px solid #86bdc9;
cursor: pointer;
}
.fc-widget-1 .sm-days:last-child {
border: none;
}
.fc-widget-1 .day-weather-icon,
.fc-widget-1 .day-weather-info {
margin: 1rem 0;
}

.fc-widget-1 .day-weather-info h2{
margin: 0;
}
.day-weather-icon {
font-size: 2.5rem;
}
/* Media Queries */
@media (max-width: 720px) {
.fc-widget-1 {
font-size: 12px;
}
}
@media (max-width: 520px) {

.fc-widget-1 .columns {
float: left;
margin-left: 0;
margin-top: 1rem;
}
.fc-widget-1 .columns:nth-child(odd) {
margin-left: 0;
}
.fc-widget-1 .columns.sm-four,
.fc-widget-1 .columns.sm-days {
width: 100%;
}
.fc-widget-1 .day {
padding: 1rem;
}
.fc-widget-1 .current-city-day {
font-size: 2rem;
}
}
/* Keyframes */
@keyframes fadeInUp {
0% {
opacity: 0;
transform: translate3d(0, 100%, 0);
}
100% {
opacity: 1;
transform: none;
}
}
.fc-widget-1 .fadeInUp {
animation-name: fadeInUp;
animation-duration: 1s;
animation-fill-mode: both;
}
@keyframes fadeIn {
0% {
transform: scale(0.8);
}
100% {
opacity: 1;
transform: scale(1);
}
}
.fc-widget-1 .fadeIn,
.fc-widget-1 .columns.sm-days {
animation-name: fadeIn;
animation-duration: 1s;
animation-fill-mode: both;
}
.fc-widget-1 .sm-days:nth-child(1) {
animation-delay: 0.2s;
}
.fc-widget-1 .sm-days:nth-child(2) {
animation-delay: 0.4s;
}
.fc-widget-1 .sm-days:nth-child(3) {
animation-delay: 0.6s;
}
.fc-widget-1 .sm-days:nth-child(4) {
animation-delay: 0.8s;
}
.fc-widget-1 .sm-days:nth-child(5) {
animation-delay: 1s;
}
.fc-widget-1 .sm-days:nth-child(6) {
animation-delay: 1.2s;
}
.fc-widget-1 .sm-days:nth-child(7) {
animation-delay: 1.4s;
}


</style>

Пробовал так. Эффект такой же. Только теперь и на пк не отображает прогноз

[homester]

В прошлой версии была хорошая опция "После обновления выполнить сценарий". Есть надежда увидеть ее и в новой версии ?

[nick7zmail]

В прошлой версии была хорошая опция "После обновления выполнить сценарий". Есть надежда увидеть ее и в новой версии ?

Кто то ей таки пользовался? =D
Да, конечно есть, если есть такая необходимость.

[Volter5000]

Возвращаясь к моей проблеме. Можно сделать простой виджет без всяких анимаций и эффектов. Просто облачка, градусы , и сила ветра. В общем красивый минималистичный дизайн. Я думаю я не один буду с такой проблемой. Кто хорошо в этом разбирается - помогите пожалуйста.

[adzam]

Попробуйте вставить вот этот стиль в виджет, я его подкорректировал, должен работать

СпойлерПоказать

<style>
@import url(https://fonts.googleapis.com/css?family ... 00,400,700);
@import url(https://cdnjs.cloudflare.com/ajax/libs/ ... ns.min.css);
/* Vars */
/* Grid System */
.fc-widget-1a * {
box-sizing: border-box;
}
.fc-widget-1a {
max-width: 300px;
position: relative;
padding: 0 15;
min-width: 280px;
}
.fc-widget-1a:before, .fc-widget-1:after {
content: "";
display: table;
}
.fc-widget-1a:after {
clear: both;
}
.fc-widget-1a .row:before, .fc-widget-1 .row:after {
content: "";
display: table;
}
.fc-widget-1a .row:after {
clear: both;
}
.fc-widget-1a .columns {
float: left;
display: block;
margin-bottom: 0px;
vertical-align: top;
padding: 0;
}
.fc-widget-1a .columns.sm-days {
width: 14.28%;
opacity: 0;
}
/* Main Styles */
.fc-widget-1a {
color: #fff;
font-family: "Lato", "Arial", sans-serif;
font-size: 1.5rem;
line-height: 1.6;
transition: all 0.5s;
}
.fc-widget-1a {
background: rgba(64, 165, 188, 0.8);
border-radius: 0.5rem;
box-shadow: inset 0 1.5px 4px rgba(255, 255, 255, 0.25), inset 0 1.5px 6px rgba(255, 255, 255, 0.25);
min-height: 140px;
max-height: 150px;
overflow: hidden;
}
/* Header Section */
.fc-widget-1a header {
font-size: 2rem;
font-weight: 300;
padding: 0.3rem;
text-align: center;
overflow: hidden;
}
.fc-widget-1a header h2 {
font-size: 1rem;
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-top: 0px;
margin-bottom: 0px;
}

.fc-widget-1a header h2a {
font-size: 1.5rem;
margin-left: 15px;
font-weight: 300;
}

.fc-widget-1a .current-city-day {
font-size: 1rem;
display: block;
}
.fc-widget-1a sup {
position: relative;
top: -1em;
font-size: 50%;
}
.fc-widget-1a .current-city-weather {
font-size: 4rem;
}
/* Week Days Section */
.fc-widget-1a .week-days {
font-weight: 700;
text-align: center;
}
.fc-widget-1a .day {
background: #55a0b3;
border: 1px solid #86bdc9;
}
.fc-widget-1a .sm-days {
border-right: 1px solid #86bdc9;
cursor: pointer;
}
.fc-widget-1a .sm-days:last-child {
border: none;
}
.fc-widget-1a .day-weather-icon,
.fc-widget-1a .day-weather-info {
margin: 1rem 0;
font-size: 1.5rem;
}

.fc-widget-1a .day-weather-info h2{
margin: 0;
font-size: 1.2rem;
}
.day-weather-icon {
font-size: 2.5rem;
}
/* Media Queries */
@media (max-width: 720px) {
.fc-widget-1a {
font-size: 12px;
}
}
@media (max-width: 520px) {

.fc-widget-1a .columns {
float: left;
margin-left: 0;
margin-top: 1rem;
}
.fc-widget-1a .columns:nth-child(odd) {
margin-left: 0;
}
.fc-widget-1a .columns.sm-four,
.fc-widget-1a .columns.sm-days {
width: 100%;
}
.fc-widget-1a .day {
padding: 1arem;
}
.fc-widget-1a .current-city-day {
font-size: 2rem;
}
}
/* Keyframes */
@keyframes fadeInUp {
0% {
opacity: 0;
transform: translate3d(0, 100%, 0);
}
100% {
opacity: 1;
transform: none;
}
}
.fc-widget-1a .fadeInUp {
animation-name: fadeInUp;
animation-duration: 0s;
animation-fill-mode: both;
}
@keyframes fadeIn {
0% {
transform: scale(0.8);
}
100% {
opacity: 1;
transform: scale(1);
}
}
.fc-widget-1a .fadeIn,
.fc-widget-1a .columns.sm-days {
animation-name: fadeIn;
animation-duration: 0s;
animation-fill-mode: both;
}
.fc-widget-1a .sm-days:nth-child(1) {
animation-delay: 0s;
}
.fc-widget-1a .sm-days:nth-child(2) {
animation-delay: 0s;
}
.fc-widget-1a .sm-days:nth-child(3) {
animation-delay: 0s;
}
.fc-widget-1a .sm-days:nth-child(4) {
animation-delay: 0s;
}
.fc-widget-1a .sm-days:nth-child(5) {
animation-delay: 0s;
}
.fc-widget-1a .sm-days:nth-child(6) {
animation-delay: 0s;
}
.fc-widget-1a .sm-days:nth-child(7) {
animation-delay: 0s;
}


</style>