Pogoda na pulpicie w systemie Linux

miękki

Najlepszym wskaźnikiem pogody dla Ubuntu

 

Dzisiaj mówimy o wielkiej aplikacji do oglądania on-line Pogoda Ubuntu rozwiniętym zespołem Atareao. Wyświetla pogodę w obecnych lub innych miejscach na panelu. Możesz dodać wskaźnik do dwóch lokalizacjach. Aplikacja wyświetla pełne informacje o pogodzie w wykazie wskaźników i dostępny dla widżetów pulpitu z różnych wzorów są również dostępne.

b_675_675_16777215_10_images_5_my-pogoda-1_1.jpg

Istnieje kilka widżety do wyświetlania informacji o pogodzie.

b_675_675_16777215_10_images_5_my-pogoda-2.jpg

Graficzny Mapy prognoz daje informacje o pogodzie, takie jak śnieg, deszcz, wiatr, ciśnienie, zachmurzenia i innych danych - wszystko w czasie rzeczywistym.

b_675_675_16777215_10_images_5_my-pogoda-8.jpg
Tego wskaźnika, można dodać do dwóch lokalizacjach. Dostępne są również opcje wyświetlania temperatury na panelu wyświetlacza i ostrzeżenia pogodowe. Więcej, jeśli ustawisz «Lokalizacja Auto» jako głównej lokalizacji, sama aplikacja będzie automatycznie wykryć swoją lokalizację. Można również wybierać spośród różnych skórek do widgetu na pulpicie.

b_675_675_16777215_10_images_5_my-pogoda-4.jpg
Istnieją cztery źródła prognoza pogody: Yahoo, otwarta mapa pogody, Wunderground i World Weather Online. Można wybrać usługi, które najbardziej lubisz.

b_675_675_16777215_10_images_5_my-pogoda-5.jpg
Można zmienić ustawienie temperatury i szczegóły dotyczące pogody.

b_675_675_16777215_10_images_5_my-pogoda-6.jpg

W ustawieniach można wybrać opcję, aby uruchomić aplikację przy starcie systemu. Można również ustawić częstotliwość aktualizacji pogodowych, a także wybierać między ciemnymi i jasnymi ikonę na panelu.

b_675_675_16777215_10_images_5_my-pogoda-7.jpg

Aplikacja może pracować w każdych warunkach stacjonarnych, takich jak Gnome Shell, cynamon, Mate, ale niektóre z nich nie zostanie wyświetlony wskaźnik, a trzeba użyć tylko widgetów na pulpicie.

Aby zainstalować wskaźnik My-Pogoda w Ubuntu / Linux Mint, otwórz terminal (użyj skrótu klawiaturowego Ctrl + Alt + T) i uruchom następujące polecenia w nim:

sudo apt-add-repository ppa: atareao / atareao
sudo apt-get update
sudo apt-get install my-pogody-wskaźnik

I to wszystko, co mam.

 

 

Komentarze   

 

+1


# 4
XXX-Man
10.08.2013 13:48

Wow, co za piękny widget, podobnie jak w telefonie. Spróbuj teraz ustawione.
Szacunek.


cytować

 
 

+2


. # 3
Yurik
29.09.2013 20:08

I set (nie był to problem). Wszedł do ustawienia i wszystko skonfigurować, ale tam nie wydaje: Sad:


cytować

 
 

+1


# 2
xxx
04.09.2013 00:42

Cytując Romek:

Żadna krzywda mogła opisać w jaki sposób skonfigurować usługi i pogoda Wunderground WWO. Cóż, nie wszystko udało się przeczytać instrukcję z oficjalnej strony internetowej w języku hiszpańskim.

mm jak nigdy yuzayu myślał o potrzebie, gdy jesteś w temacie - może oświecić jaka jest ich urok?


cytować

 
 

8


# 1
przez Romka
8.26.2013 06:18

Dobrze, aby zakończyć byłoby dodać, że program rusyfikacji (jakoś ekrany - w języku angielskim) w repozytorium wersji 0.6.5 (która jest w screeny) - tylko dla 13.04; do 12/04 - wersja 0.6.3. Żadna krzywda mogła opisać w jaki sposób skonfigurować usługi i pogoda Wunderground WWO. Cóż, nie wszystko udało się przeczytać instrukcję z oficjalnej strony internetowej w języku hiszpańskim. I skróty do instrukcji do ofsayte nie mieszać.


cytować

 

Dodaj komentarz













Kod zabezpieczający
aktualizacja

wysłać

JAK TO INSTALL Widget Weather Ubuntu | LINUXSOID - Open Source ...

W niniejszym artykule zostanie wprowadzony do React - biblioteki do tworzenia interfejsów użytkownika. React pojawił się w 2013 roku i szybko stał się popularny wśród programistów. Dziś praca na aplikacji internetowych, jest ona wykorzystywana przez Facebook, Instagram, Trello, Airbnb PayPal. Z tego artykułu, będziemy mogli napisać aplikację prognozę pogody, z wykorzystaniem instalacji create-react-app (projekt na GitHub) API do podłączenia i style bootswatch.

Ok. Trans. Jeśli zaczniesz studiować React, należy również przeczytać nasz materiał, w którym deweloper dzieli się wskazówki dotyczące korzystania z tej biblioteki.

Materiał ten został napisany dla warsztatu Open Source Dev Garage, która odbyła się w 2017 Developer Conference F8, aby lepiej zrozumieć, jak napisać aplikację, zobacz 48-minutowy film lub wykonaj pisemne instrukcje w tym podręczniku.

Zobacz seminarium lub do odkrywania instrukcji, będzie stworzenie prostego stosowania prognozowania pogody:

Reagować

Zaczynajmy.

Tworzenie pierwszej aplikacji

Przede wszystkim trzeba node.js i edytor kodu, na przykład, Atom.

Otwórz terminal i zainstalować create-react-app:

npm install -g create-react-app

Uwaga: użytkownicy systemu Linux lub MacOS, mogą wymagać dodatkowego zespołu wejść sudoprzed npm install -g.

Zacznijmy tworząc naszą prognozę pogody app:

create-react-app weather

Polecenie to będziemy tworzyć zestaw narzędzi, które pomogą stworzyć naszą aplikację reagować,. Po zakończeniu instalacji, możemy uruchomić komendę do wniosku:

cd weather
npm start

Nowa aplikacja automatycznie otworzy przeglądarkę!

Reagować

Funkcje i elementy

Spójrzmy na aplikacji, która create-react-appjest generowana automatycznie. W edytorze kodu otworzy weather/src/App.js:

class App extends Component { render() { return ( 
logo

Welcome to React

To get started, edit src/App.js and save to reload.

); } }

Nasza aplikacja składa się z jednego elementu, w którym funkcja render()jest jego głównym składnikiem. Napisać jakiś tekst, zapisać zmiany i zobaczyć, jak aplikacja będzie automatycznie stosować je!

Teraz utworzyć nowy element WeatherDisplay. Ponieważ funkcja render()- „sercem” składnika, a następnie określa, co będzie wyświetlane. Po pierwsze, należy utworzyć tag z tekstem w nim:

class WeatherDisplay extends Component { render() { return ( 

Displaying some Weather!

); } }

Zmień komponent Appdo wyświetlania nasz WeatherDisplay:

class App extends Component { render() { return ( 
); } }

Jak widać, mamy przeniesione dane, które stanowiło zmianę zipw składniku WeatherDisplay. Nazywane są właściwości (rekwizyty). Możemy modyfikować nasz komponent do wyświetlania przesyłanych danych:

class WeatherDisplay extends Component { render() { return ( 

Displaying weather for city {this.props.zip}

); } }

Gdzieś na początku pliku dodać kilka miast, dla których chcielibyśmy, aby wyświetlić pogodę:

const PLACES = [ { name: "Palo Alto", zip: "94303" }, { name: "San Jose", zip: "94088" }, { name: "Santa Cruz", zip: "95062" }, { name: "Honolulu", zip: "96803" }
];

Zaktualizować render()komponent App, w którym przechodzi tablicy PLACES, utworzyć znacznik buttondla każdego miasta:

return ( 
{PLACES.map((place, index) => ( ))}
);

Ze zbioru danych, stworzymy zestaw przedmiotów buttoni przypisać właściwość key, aby wszyscy wiedzieli, React kolejność elementów w tablicy.

Posiada również moduł obsługi zdarzeń onClick, który po naciśnięciu wyświetli komunikat w konsoli przeglądarki. Otwarcie pulpit programisty w przeglądarce, można zobaczyć dzienniki zdarzeń. Aplikacja powinna wyglądać następująco:

Reagować

Na tym etapie, plik App.jspowinien wyglądać.

stan

Chcemy, aby w zgłoszeniu była możliwość przełączania pomiędzy lokalizacjami, więc możemy użyć stanu ( state) do przechowywania danych w komponencie App.

Najpierw dodać funkcję konstruktora, który będzie używany super(), a następnie ustawić stan początkowy this.state:

constructor() { super(); this.state = { activePlace: 0, };
}

Funkcja render()może przyjmować dane z this.statew przygotowaniu interfejsu użytkownika. Aby to zrobić, możemy użyć metody setStateReact składnik, który zmienia stan i ponownie uruchamia funkcję render()do zmiany interfejsu użytkownika.

Zastosowanie this.statei this.setStatenaszego komponentu App:

class App extends Component { constructor() { super(); this.state = { activePlace: 0, }; } render() { const activePlace = this.state.activePlace; return ( 
{PLACES.map((place, index) => ( ))}
); } }

Reagować

Na tym etapie, plik App.jspowinien wyglądać.

Cykl życia komponentów i przykładowe dane

Czasami musimy dodać kod nadrzędny (React-Code jest zwykle deklaratywne), co jest spowodowane przez pewien czas życia komponentów. Metody cyklu życia pozwala nam napisać dodatkowy kod dla takich właśnie okazjach.

W tym przykładzie chcemy zadzwonić API, gdy składnik jest ładowany na ekranie, aby dodać ten kod componentDidMount. Aktualizacja komponentu WeatherDisplay:

class WeatherDisplay extends Component { constructor() { super(); this.state = { weatherData: null }; } componentDidMount() { const zip = this.props.zip; const URL = "//api.openweathermap.org/data/2.5/weather?q=" + zip + "&appid=b1b35bba8b434a28a0be2a3e1071ae5b&units=imperial"; fetch(URL).then(res => res.json()).then(json => { this.setState({ weatherData: json }); }); } render() { const weatherData = this.state.weatherData; if (!weatherData) return 
Loading
; return
{JSON.stringify(weatherData)}
; } }

Poprawić wyjście render()do wyprowadzania danych piękny:

const weather = weatherData.weather[0];
const iconUrl = "//openweathermap.org/img/w/" + weather.icon + ".png";
return ( 

{weather.main} in {weatherData.name} {weatherData.description}

Current: {weatherData.main.temp}°

High: {weatherData.main.temp_max}°

Low: {weatherData.main.temp_min}°

Wind Speed: {weatherData.wind.speed} mi/hr

);

Reagować

Na tym etapie, plik App.jspowinien wyglądać.

elementy instalacyjne

Nasza aplikacja nadal nie wygląda bardzo ładnie. Jest możliwe, aby go poprawić przez dodanie className(CSS arkusza stylów) we właściwościach divlub poprzez ustawienie odpowiedniej biblioteki poprzez npm.

Bootstrap - popularny zestaw narzędzi do stylizacji interfejsu użytkownika w formacie HTML i CSS. Zainstalować go wraz z react-bootstrapktóry zapewnia React komponenty bootstrap:

npm install --save bootstrap react-bootstrap

style import od bootstrappoczątku pliku:

import "bootstrap/dist/css/bootstrap.css";

Następnie import react-bootstrapkomponentów, które chcemy wykorzystać. Można je znaleźć na stronie reagować-bootstrap:

import { Navbar, NavItem, Nav, Grid, Row, Col } from "react-bootstrap";

Wymień tagi w komponencie App, aby wyświetlić elementy bootstrap:

React Simple Weather App

Select a city

Reagować

Teraz nasza aplikacja wygląda bardziej atrakcyjne, ale byłoby wspaniale, jeśli dodamy coś własnego. Aby to zrobić bootswatch:

npm install --save bootswatch

Wybierz odpowiednią konstrukcję do bootswatch stronę internetową i zainstalować go, zastępując bootstrap. W naszym przykładzie użyjemy tematujournal:

import "bootswatch/journal/bootstrap.css";

Ostateczna forma naszej aplikacji:

Reagować

Ostateczna wersja App.js.

Rozmieszczania (dodatkowy materiał)

Przede wszystkim, opublikować swój kod na Github, a następnie przejdź do repozytorium i otworzyć plik Readme, który można znaleźć instrukcje dotyczące wdrażania aplikacji na różnych popularnych usług.

Jedną z takich usług jest Netlify, zwłaszcza gdy chcesz użyć mechanizmu „ciągłego wdrażania”.

Przydatne materiały do ​​badań React i dalej z nim pracować

  • React Native Use reagować na tworzenie aplikacji mobilnych.
  • Redux: narzędzie do zarządzania danymi w dużych aplikacjach.
  • Przekaźnik: biblioteka do komunikacji i dane React komponenty GraphQL.
  • JEST: kto chce dostać się do testowania kodu JS.
  • Przepływ: narzędzie do statycznej kontroli typów.

Tłumaczenie artykułu «Intro reagować Warsztat»

FrontendConf - układ i UX-design, projektowanie, wykonanie, JS-ram i bibliotek - wszystko na jednej przedniej Konf.

  • F8 2017, JavaScript, React, Web Development, Początkujący, programowanie Edukacja

Wybierz swój język

polskiangielski niemiecki hiszpański francuski włoski portugalski turecki arabski ukraiński szwedzki węgierski bułgarski estoński Chiński (uproszczony) wietnamski rumuński tajski słoweński słowacki serbski malajski norweski łotewski litewski koreański japoński indonezyjski hinduski hebrajski fiński grecki holenderski Czech duński chorwacki Chiński (tradycyjny) Filipińska urdu Azeybardzhansky ormiański Białoruski bengalski gruziński kazachski Kataloński mongolski rosyjski Tadzhitsky Tamil'skij telugu Uzbetsky


Czytaj więcej:   ZWIĘKSZENIE RAM na Mac AIR

Dodaj komentarz

Twój e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *