1650962780
Diseñe Componentes Fundamentales Y Reutilizables Con Style Dictionary
¿Qué son los sistemas de diseño?
Un sistema de diseño es más que un simple kit de interfaz de usuario; es una colección de fichas de diseño, prácticas y componentes reutilizables que mantienen la coherencia para sus equipos de diseño y productos. Logra una apariencia uniforme en todos los productos que pueden mejorar la creatividad y la productividad.
Los sistemas de diseño también funcionan como un lenguaje común para los equipos y establecen pautas y recopilan recursos de diseño desde el comienzo de un proyecto.
La creación de un sistema de diseño en las primeras etapas de un proyecto acelera el proceso de diseño y codificación, integra a todas las personas involucradas y mejora la consistencia del producto. Un sistema de diseño debe ser una única fuente de verdad completa, flexible y escalable.
Style Dictionary es un sistema que le permite definir estilos una vez, de manera que cualquier plataforma o idioma los consuma. Proporciona un lugar único para crear y editar sus estilos, y un solo comando exporta estas reglas a todos los lugares donde las necesitamos: iOS, Android, CSS, JS, HTML, archivos de boceto, documentación de estilo y más.
Style Dictionary tiene como objetivo resolver los errores, los obstáculos y las ineficiencias del flujo de trabajo que existen cuando los equipos multidisciplinarios de diseñadores, desarrolladores, PM y otros intentan tener una documentación de estilo coherente y actualizada.
En este artículo, aprenderemos sobre los beneficios de usar un sistema de diseño en equipo, cómo funcionan los sistemas de diseño y veremos cómo usar el Diccionario de estilo para que el proceso sea rápido y fácil.
Los beneficios de usar un sistema de diseño
Si bien el desarrollo de sistemas de diseño puede requerir una cantidad considerable de tiempo y recursos, esta inversión vale la pena a largo plazo. Veamos algunos de los beneficios de usar un sistema de diseño consistente mientras se trabaja en un proyecto de equipo más grande.
Primero, los sistemas de diseño promueven la consistencia y aseguran que tengamos estilos y comportamientos consistentes en todos nuestros productos.
El segundo beneficio de los sistemas de diseño es promover un tiempo de comercialización más corto. Los sistemas de diseño siempre mejorarán la velocidad, la calidad y la consistencia a largo plazo. Una mayor velocidad de desarrollo significa que menos personas pueden hacer más y podemos enviar al mercado más rápido.
El tercero es la mantenibilidad y la mejora continua. La naturaleza centralizada de los sistemas de diseño facilita el mantenimiento de los productos. Además, las correcciones y mejoras en el sistema de diseño se propagan instantáneamente a todos los productos.
El cuarto es la uniformidad y colaboración del equipo. Los sistemas de diseño se construyen mediante el esfuerzo conjunto de diferentes equipos en una organización, desde desarrolladores, diseñadores, líderes de productos y más. Esto facilita la colaboración en equipo y ayuda a los miembros a tomar mejores decisiones al establecer un flujo de trabajo más organizado. También aumenta la autonomía y acelera tanto el desarrollo como las pruebas, y acelera el proceso de incorporación de nuevos miembros del equipo.
Finalmente, los sistemas de diseño crean una identidad de marca definida y memorable. Las pautas y reglas definidas para las imágenes, los marcadores de marca e incluso el tono pueden comunicar un sentimiento e identidad específicos detrás de los productos que envían las marcas. El comportamiento y la apariencia consistentes en los productos de una marca brindan a los clientes un mayor sentido de confianza y conexión con la marca.
¿Qué son las fichas de diseño?
Los tokens de diseño son los valores de estilo de los elementos de la interfaz de usuario, como la tipografía, los colores, los puntos de interrupción, los espacios, las sombras, las animaciones, el radio del borde y más, representados como datos.
Los tokens son bloques de construcción del sistema de diseño. Representan todos los atributos individuales de un sistema de diseño.
Los tokens reemplazan los valores estáticos, como los códigos hexadecimales de color, con nombres que se explican por sí mismos.
Si el color principal de nuestra marca es #276EE5, podemos crear el siguiente token de diseño para reflejar esa decisión de estilo: primary-color: #276EE5. El nombre del token es primary-color, y su valor es #276EE5.
Los tokens de diseño se integran directamente en nuestras bibliotecas de componentes y kits de interfaz de usuario. Garantizan que se utilicen los mismos valores de estilo en los archivos de diseño y el código.
Hay tres tipos de fichas de diseño:
Primero están los tokens globales, que pueden usarse globalmente o ser consumidos por otros tokens. No están vinculados a un caso de uso específico, por ejemplo, blue-100: #2680eb.
En segundo lugar están los tokens de alias. Los tokens de alias se relacionan con un contexto o propósito específico. Estos no son tokens genéricos; más bien, son tokens para un caso de uso que podría describirse en su nombre. Son efectivos cuando un valor con una sola intención aparecerá en varios lugares, por ejemplo, primary-cta-background-color: #133.
En tercer lugar, están los tokens específicos de componentes, que representan las propiedades asociadas con un componente, por ejemplo, card-background-color: #132a3b.
Primeros pasos con el diccionario de estilo
Ahora que tenemos experiencia en sistemas de diseño, pasemos a crear nuestro propio sistema de diseño usando Style Dictionary.
Podemos instalar Style Dictionary usando la CLI o como una dependencia de npm.
Para usar la CLI, ejecute el siguiente comando:
npm install -g style-dictionaryEjecute el siguiente comando para instalar como una dependencia:
npm install -D style-dictionaryLuego crea un directorio y ejecuta el siguiente comando:
style-dictionary init basic Este comando copiará los archivos de ejemplo configurados en la carpeta de ejemplos del repositorio de Style Dictionary.
La CLI nos da una buildcarpeta que contiene diferentes formatos del token de diseño para las diferentes plataformas donde queramos usarlos. También hay especificaciones tokens, colory sizejunto con un config.jsonarchivo. Analicemos la salida de la CLI.
La buildcarpeta contiene la salida del token para los diferentes formatos y plataformas donde queremos usar los estilos. Al escribir estas líneas, hay 15 plataformas predefinidas .
La color carpeta contiene dos archivos base.json, y font.json.
El base.jsonarchivo contiene algunas definiciones de color base, que puede ver aquí:
{
"color": {
"base": {
"gray": {
"light" : { "value": "#CCCCCC" },
"medium": { "value": "#999999" },
"dark" : { "value": "#111111" }
},
"red": { "value": "#FF0000" },
"green": { "value": "#00FF00" }
}
}
}El font.jsonarchivo contiene los estilos de color para diferentes tamaños de fuente:
{
"color": {
"font": {
"base" : { "value": "{color.base.red.value}" },
"secondary": { "value": "{color.base.green.value}" },
"tertiary" : { "value": "{color.base.gray.light.value}" }
}
}
}La sizescarpeta contiene un font.jsonarchivo que contiene las definiciones de estilo para diferentes tamaños de fuente:
{
"size": {
"font": {
"small" : {
"value": "0.75",
"comment": "the small size of the font"
},
"medium": {
"value": "1",
"comment": "the medium size of the font"
},
"large" : {
"value": "2",
"comment": "the large size of the font"
},
"base" : {
"value": "{size.font.medium.value}",
"comment": "the base size of the font"
}
}
}
}Finalmente, tenemos el config.jsonarchivo. El diccionario de estilo está basado en la configuración. La configuración permite que el sistema de compilación de Style Dictionary sepa dónde encontrar los tokens de diseño y cómo transformar y formatear los tokens para generar archivos de salida.
Diccionario de estilo en la práctica
Digamos que tenemos tres botones con diferentes colores de fondo. Veamos cómo podemos usar Style Dictionary para definir los tokens de diseño y manejar la entrega de salida.
Para este ejemplo, queremos una salida CSS, por lo que ese es el único formato que definimos en la configuración. Sin embargo, podemos definir varios formatos de salida :
{
"source": ["tokens/**/*.json"],
"platforms": {
"css": {
"transformGroup": "css",
"buildPath": "build/css/",
"files": [
{
"destination": "_variables.css",
"format": "css/variables"
}
]
}
}
}Creamos un button.jsonarchivo y definimos los tokens para los botones allí. Tenga en cuenta que somos libres de estructurar tokens como queramos:
{
"color": {
"button": {
"background": {
"primary": {
"value": "red",
"comment": "the primary buttons's background color"
},
"secondary": { "value": "green" },
"tertiary": { "value": "blue" }
}
}
}
}Hay tres botones: primario, secundario y terciario, por lo que creamos tres tokens para cada botón.
Podemos agregar comentarios a los tokens con fines de documentación. Aquí, agregamos un comentario al token del botón principal.
Habiendo definido los tokens, necesitamos obtener la salida CSS. Para hacer eso, necesitamos ejecutar el comando de compilación en nuestra terminal. Esto transformará los tokens y generará el activo CSS.
compilación de diccionario de estilo
Ahora tenemos la salida CSS para el token de botón:
/**
* Do not edit directly
* Generated on Tue, 05 Apr 2022 05:52:57 GMT
*/
:root {
--color-button-background-primary: #ff0000; /* the primary buttons's background color */
--color-button-background-secondary: #008000;
--color-button-background-tertiary: #0000ff;
}Aquí, podemos ver que el comentario está incluido en la salida.
Con esto, podemos importar las variables a nuestra hoja de estilo principal y comenzar a usarlas en nuestras aplicaciones.
Estructuración de tokens de diseño con Style Dictionary
Style Dictionary recomienda utilizar la estructura Categoría/Tipo/Artículo (CTI) para nuestros tokens.
Sin embargo, somos libres de estructurar tokens como queramos . Por ejemplo, podríamos reestructurar los tokens de los botones así:
{
"button": {
"color": {
"background": {
"primary": { "value": "red" },
"secondary": { "value": "green" },
"tertiary": { "value": "blue" }
}
}
}
}Los nombres de las variables de activos cambiarán para reflejar la nueva estructura:
:root {
--button-color-background-primary: red;
--button-color-background-secondary: green;
--button-color-background-tertiary: blue;
}El patio de recreo del diccionario de estilos
Hay un patio de recreo interactivo donde podemos jugar y editar tokens JSON. El patio de recreo es una excelente manera de familiarizarse con Style Dictionary y cómo funciona.
Conclusión
Un sistema de diseño te ayudará a ti y a tu equipo a tener un producto consistente, robusto, flexible y accesible.
Uno de los mayores puntos de venta de Style Dictionary es que se mantiene independiente de la plataforma y la tecnología en su configuración, pero nos permite apuntar a varias plataformas y formatos.
En este artículo, aprendimos sobre Style Dictionary y cómo nos permite administrar tokens de diseño y transformarlos en salidas específicas de plataforma y formato.
Fuente: https://blog.logrocket.com/design-foundational-reusable-components-style-dictionary/
What is GEEK
Buddha Community
1650962780
Diseñe Componentes Fundamentales Y Reutilizables Con Style Dictionary
¿Qué son los sistemas de diseño?
Un sistema de diseño es más que un simple kit de interfaz de usuario; es una colección de fichas de diseño, prácticas y componentes reutilizables que mantienen la coherencia para sus equipos de diseño y productos. Logra una apariencia uniforme en todos los productos que pueden mejorar la creatividad y la productividad.
Los sistemas de diseño también funcionan como un lenguaje común para los equipos y establecen pautas y recopilan recursos de diseño desde el comienzo de un proyecto.
La creación de un sistema de diseño en las primeras etapas de un proyecto acelera el proceso de diseño y codificación, integra a todas las personas involucradas y mejora la consistencia del producto. Un sistema de diseño debe ser una única fuente de verdad completa, flexible y escalable.
Style Dictionary es un sistema que le permite definir estilos una vez, de manera que cualquier plataforma o idioma los consuma. Proporciona un lugar único para crear y editar sus estilos, y un solo comando exporta estas reglas a todos los lugares donde las necesitamos: iOS, Android, CSS, JS, HTML, archivos de boceto, documentación de estilo y más.
Style Dictionary tiene como objetivo resolver los errores, los obstáculos y las ineficiencias del flujo de trabajo que existen cuando los equipos multidisciplinarios de diseñadores, desarrolladores, PM y otros intentan tener una documentación de estilo coherente y actualizada.
En este artículo, aprenderemos sobre los beneficios de usar un sistema de diseño en equipo, cómo funcionan los sistemas de diseño y veremos cómo usar el Diccionario de estilo para que el proceso sea rápido y fácil.
Los beneficios de usar un sistema de diseño
Si bien el desarrollo de sistemas de diseño puede requerir una cantidad considerable de tiempo y recursos, esta inversión vale la pena a largo plazo. Veamos algunos de los beneficios de usar un sistema de diseño consistente mientras se trabaja en un proyecto de equipo más grande.
Primero, los sistemas de diseño promueven la consistencia y aseguran que tengamos estilos y comportamientos consistentes en todos nuestros productos.
El segundo beneficio de los sistemas de diseño es promover un tiempo de comercialización más corto. Los sistemas de diseño siempre mejorarán la velocidad, la calidad y la consistencia a largo plazo. Una mayor velocidad de desarrollo significa que menos personas pueden hacer más y podemos enviar al mercado más rápido.
El tercero es la mantenibilidad y la mejora continua. La naturaleza centralizada de los sistemas de diseño facilita el mantenimiento de los productos. Además, las correcciones y mejoras en el sistema de diseño se propagan instantáneamente a todos los productos.
El cuarto es la uniformidad y colaboración del equipo. Los sistemas de diseño se construyen mediante el esfuerzo conjunto de diferentes equipos en una organización, desde desarrolladores, diseñadores, líderes de productos y más. Esto facilita la colaboración en equipo y ayuda a los miembros a tomar mejores decisiones al establecer un flujo de trabajo más organizado. También aumenta la autonomía y acelera tanto el desarrollo como las pruebas, y acelera el proceso de incorporación de nuevos miembros del equipo.
Finalmente, los sistemas de diseño crean una identidad de marca definida y memorable. Las pautas y reglas definidas para las imágenes, los marcadores de marca e incluso el tono pueden comunicar un sentimiento e identidad específicos detrás de los productos que envían las marcas. El comportamiento y la apariencia consistentes en los productos de una marca brindan a los clientes un mayor sentido de confianza y conexión con la marca.
¿Qué son las fichas de diseño?
Los tokens de diseño son los valores de estilo de los elementos de la interfaz de usuario, como la tipografía, los colores, los puntos de interrupción, los espacios, las sombras, las animaciones, el radio del borde y más, representados como datos.
Los tokens son bloques de construcción del sistema de diseño. Representan todos los atributos individuales de un sistema de diseño.
Los tokens reemplazan los valores estáticos, como los códigos hexadecimales de color, con nombres que se explican por sí mismos.
Si el color principal de nuestra marca es #276EE5, podemos crear el siguiente token de diseño para reflejar esa decisión de estilo: primary-color: #276EE5. El nombre del token es primary-color, y su valor es #276EE5.
Los tokens de diseño se integran directamente en nuestras bibliotecas de componentes y kits de interfaz de usuario. Garantizan que se utilicen los mismos valores de estilo en los archivos de diseño y el código.
Hay tres tipos de fichas de diseño:
Primero están los tokens globales, que pueden usarse globalmente o ser consumidos por otros tokens. No están vinculados a un caso de uso específico, por ejemplo, blue-100: #2680eb.
En segundo lugar están los tokens de alias. Los tokens de alias se relacionan con un contexto o propósito específico. Estos no son tokens genéricos; más bien, son tokens para un caso de uso que podría describirse en su nombre. Son efectivos cuando un valor con una sola intención aparecerá en varios lugares, por ejemplo, primary-cta-background-color: #133.
En tercer lugar, están los tokens específicos de componentes, que representan las propiedades asociadas con un componente, por ejemplo, card-background-color: #132a3b.
Primeros pasos con el diccionario de estilo
Ahora que tenemos experiencia en sistemas de diseño, pasemos a crear nuestro propio sistema de diseño usando Style Dictionary.
Podemos instalar Style Dictionary usando la CLI o como una dependencia de npm.
Para usar la CLI, ejecute el siguiente comando:
npm install -g style-dictionaryEjecute el siguiente comando para instalar como una dependencia:
npm install -D style-dictionaryLuego crea un directorio y ejecuta el siguiente comando:
style-dictionary init basic Este comando copiará los archivos de ejemplo configurados en la carpeta de ejemplos del repositorio de Style Dictionary.
La CLI nos da una buildcarpeta que contiene diferentes formatos del token de diseño para las diferentes plataformas donde queramos usarlos. También hay especificaciones tokens, colory sizejunto con un config.jsonarchivo. Analicemos la salida de la CLI.
La buildcarpeta contiene la salida del token para los diferentes formatos y plataformas donde queremos usar los estilos. Al escribir estas líneas, hay 15 plataformas predefinidas .
La color carpeta contiene dos archivos base.json, y font.json.
El base.jsonarchivo contiene algunas definiciones de color base, que puede ver aquí:
{
"color": {
"base": {
"gray": {
"light" : { "value": "#CCCCCC" },
"medium": { "value": "#999999" },
"dark" : { "value": "#111111" }
},
"red": { "value": "#FF0000" },
"green": { "value": "#00FF00" }
}
}
}El font.jsonarchivo contiene los estilos de color para diferentes tamaños de fuente:
{
"color": {
"font": {
"base" : { "value": "{color.base.red.value}" },
"secondary": { "value": "{color.base.green.value}" },
"tertiary" : { "value": "{color.base.gray.light.value}" }
}
}
}La sizescarpeta contiene un font.jsonarchivo que contiene las definiciones de estilo para diferentes tamaños de fuente:
{
"size": {
"font": {
"small" : {
"value": "0.75",
"comment": "the small size of the font"
},
"medium": {
"value": "1",
"comment": "the medium size of the font"
},
"large" : {
"value": "2",
"comment": "the large size of the font"
},
"base" : {
"value": "{size.font.medium.value}",
"comment": "the base size of the font"
}
}
}
}Finalmente, tenemos el config.jsonarchivo. El diccionario de estilo está basado en la configuración. La configuración permite que el sistema de compilación de Style Dictionary sepa dónde encontrar los tokens de diseño y cómo transformar y formatear los tokens para generar archivos de salida.
Diccionario de estilo en la práctica
Digamos que tenemos tres botones con diferentes colores de fondo. Veamos cómo podemos usar Style Dictionary para definir los tokens de diseño y manejar la entrega de salida.
Para este ejemplo, queremos una salida CSS, por lo que ese es el único formato que definimos en la configuración. Sin embargo, podemos definir varios formatos de salida :
{
"source": ["tokens/**/*.json"],
"platforms": {
"css": {
"transformGroup": "css",
"buildPath": "build/css/",
"files": [
{
"destination": "_variables.css",
"format": "css/variables"
}
]
}
}
}Creamos un button.jsonarchivo y definimos los tokens para los botones allí. Tenga en cuenta que somos libres de estructurar tokens como queramos:
{
"color": {
"button": {
"background": {
"primary": {
"value": "red",
"comment": "the primary buttons's background color"
},
"secondary": { "value": "green" },
"tertiary": { "value": "blue" }
}
}
}
}Hay tres botones: primario, secundario y terciario, por lo que creamos tres tokens para cada botón.
Podemos agregar comentarios a los tokens con fines de documentación. Aquí, agregamos un comentario al token del botón principal.
Habiendo definido los tokens, necesitamos obtener la salida CSS. Para hacer eso, necesitamos ejecutar el comando de compilación en nuestra terminal. Esto transformará los tokens y generará el activo CSS.
compilación de diccionario de estilo
Ahora tenemos la salida CSS para el token de botón:
/**
* Do not edit directly
* Generated on Tue, 05 Apr 2022 05:52:57 GMT
*/
:root {
--color-button-background-primary: #ff0000; /* the primary buttons's background color */
--color-button-background-secondary: #008000;
--color-button-background-tertiary: #0000ff;
}Aquí, podemos ver que el comentario está incluido en la salida.
Con esto, podemos importar las variables a nuestra hoja de estilo principal y comenzar a usarlas en nuestras aplicaciones.
Estructuración de tokens de diseño con Style Dictionary
Style Dictionary recomienda utilizar la estructura Categoría/Tipo/Artículo (CTI) para nuestros tokens.
Sin embargo, somos libres de estructurar tokens como queramos . Por ejemplo, podríamos reestructurar los tokens de los botones así:
{
"button": {
"color": {
"background": {
"primary": { "value": "red" },
"secondary": { "value": "green" },
"tertiary": { "value": "blue" }
}
}
}
}Los nombres de las variables de activos cambiarán para reflejar la nueva estructura:
:root {
--button-color-background-primary: red;
--button-color-background-secondary: green;
--button-color-background-tertiary: blue;
}El patio de recreo del diccionario de estilos
Hay un patio de recreo interactivo donde podemos jugar y editar tokens JSON. El patio de recreo es una excelente manera de familiarizarse con Style Dictionary y cómo funciona.
Conclusión
Un sistema de diseño te ayudará a ti y a tu equipo a tener un producto consistente, robusto, flexible y accesible.
Uno de los mayores puntos de venta de Style Dictionary es que se mantiene independiente de la plataforma y la tecnología en su configuración, pero nos permite apuntar a varias plataformas y formatos.
En este artículo, aprendimos sobre Style Dictionary y cómo nos permite administrar tokens de diseño y transformarlos en salidas específicas de plataforma y formato.
Fuente: https://blog.logrocket.com/design-foundational-reusable-components-style-dictionary/
1623077700
Working with Python dictionaries: a cheat sheet
Accessing, editing and looping through dictionary items
Dictionaries in Python are a collection of key-value pairs — meaning every item in the dictionary has a key and an associated value.
If we want to write down prices of some items in a grocery store, normally we will note them on a piece of paper like this:
eggs - 4.99
banana - 1.49
cheese- 4.5
eggplant - 2.5
bread - 3.99
In Python dictionary lingo, the name of each item is “key” and the associated price is “value” and they appear in pairs. We can represent the same in a Python dictionary data structure as follows:
{"eggs": 4.99,
"banana": 1.49,
"cheese": 4.5,
"eggplant": 2.5,
"bread": 3.99}
Notice the differences. In the dictionary
- each key is within quotation marks because they are strings
- the associated values are not quoted because they are numeric
- keys and values are separated by a colon (:)
- the items are comma-separated
#dictionary #python #artificial-intelligence #dictionaries #python dictionary #working with python dictionaries
1594744680
Art Style Transfer using Neural Networks
Introduction
Art Style Transfer consists in the transformation of an image into a similar one that seems to have been painted by an artist.
If we are Vincent van Gogh fans, and we love German Shepherds, we may like to get a picture of our favorite dog painted in van Gogh’s Starry Night fashion.
Image by author
Starry Night by Vincent van Gogh, Public Domain
The resulting picture can be something like this:
Image by author
Instead, if we like Katsushika Hokusai’s Great Wave off Kanagawa, we may obtain a picture like this one:
The Great wave of Kanagawa by Katsushika Hokusai, Public Domain
Image by author
And something like the following picture, if we prefer Wassily Kandinsky’s Composition 7:
Compositions 7 by Wassily Kandinsky, Public Domain
Image by author
These image transformations are possible thanks to advances in computing processing power that allowed the usage of more complex neural networks.
The Convolutional Neural Networks (CNN), composed of a series of layers of convolutional matrix operations, are ideal for image analysis and object identification. They employ a similar concept to graphic filters and detectors used in applications like Gimp or Photoshop, but in a much powerful and complex way.
A basic example of a matrix operation is performed by an edge detector. It takes a small picture sample of NxN pixels (5x5 in the following example), multiplies it’s values by a predefined NxN convolution matrix and obtains a value that indicates if an edge is present in that portion of the image. Repeating this procedure for all the NxN portions of the image, we can generate a new image where we have detected the borders of the objects present in there.
Image by author
The two main features of CNNs are:
- The numeric values of the convolutional matrices are not predefined to find specific image features like edges. Those values are automatically generated during the optimization processes, so they will be able to detect more complex features than borders.
- They have a layered structure, so the first layers will detect simple image features (edges, color blocks, etc.) and the latest layers will use the information from the previous ones to detect complex objects like people, animals, cars, etc.
This is the typical structure of a Convolutional Neural Network:
Image by Aphex34 / CC BY-SA 4.0
Thanks to papers like “Visualizing and Understanding Convolutional Networks”[1] by Matthew D. Zeiler, Rob Fergus and “Feature Visualization”[12] by Chris Olah, Alexander Mordvintsev, Ludwig Schubert, we can visually understand what features are detected by the different CNN layers:
Image by Matthew D. Zeiler et al. “Visualizing and Understanding Convolutional Networks”[1], usage authorized
The first layers detect the most basic features of the image like edges.
Image by Matthew D. Zeiler et al. “Visualizing and Understanding Convolutional Networks”[1], usage authorized
The next layers combine the information of the previous layer to detect more complex features like textures.
Image by Matthew D. Zeiler et al. “Visualizing and Understanding Convolutional Networks”[1], usage authorized
Following layers, continue to use the previous information to detect features like repetitive patterns.
Image by Matthew D. Zeiler et al. “Visualizing and Understanding Convolutional Networks”[1], usage authorized
The latest network layers are able to detect complex features like object parts.
Image by Matthew D. Zeiler et al. “Visualizing and Understanding Convolutional Networks”[1], usage authorized
The final layers are capable of classifying complete objects present in the image.
The possibility of detecting complex image features is the key enabler to perform complex transformations to those features, but still perceiving the same content in the image.
#style-transfer-online #artificial-intelligence #neural-style-transfer #art-style-transfer #neural networks
1599732900
Python Dictionary
Overview
A dictionary in python is unordered, changeable and indexed. It is unordered because it does not keep track of the order of data inserted. It is changeable because you can change the values of keys. It is indexed because it retrieves data based on the key meaning each key only has one value.
New Dictionary
To create a dictionary you can use curly braces or the dict() constructor.
dictionary = {
"name": "Bob",
"age": 21,
"email": "bob@email.com"
}
otherDictionary = dict(name="Bob", age=21, email="bob@emai.com")
It is possible to have empty string and None value as keys and values. It is not possible to have duplicate keys.
Read
To get values from the dictionary you need to provide the key inside square brackets or use the get() method
dictionary = {
"name": "Bob",
"age": 21,
"email": "bob@email.com"
}
print(dictionary["name"])
>> Bob
print(dictionary.get("age"))
>> 21
#computer-science #data-structures #dictionary #python #python-dictionaries
1655243220
A Weather_widget Used for Flutter with Many Custom Config
weather_widget
Simple weather related widget, which can be freely combined to form a variety of weather backgrounds
Getting Started
depend
Add this to your package's pubspec.yaml file:
dependencies:
weather_widget: ^1.0.6
Weatherwidget is easy to use, just add weatherwidget to start using
WeatherWidget(
size:Size.infinite,
weather:'Sunny',
sunConfig:SunConfig()
),
This will add a sunny day using the default settings
or other weather type
(Note: Raindrops and snowflakes need to specify the default number, and they will move randomly within the range)
WeatherWidget(
size:Size.infinite,
weather:'Cloudy',
cloudConfig:CloudConfig()
),
WeatherWidget(
size:Size.infinite,
weather:'Rainy',
rainConfig:RainConfig(
rainNum:'the num of raindrops you want'
)
),
WeatherWidget(
size:Size.infinite,
weather:'Snowy',
snowConfig:SnowConfig(
snowNum:'the num of snowflakes you want'
)
),
WeatherWidget(
size:Size.infinite,
weather:'Thunder',
thunderConfig:ThunderConfig()
),
Of course, each config contains other settings, such as the range, size, length, falling speed and color of random raindrops. You can use them to create hailstones and other weather features
If the default weather is not enough, you can use individual widgets and stack() widget to piece together the desired weather
Like this sunset breeze, etc
These are include in this widget
background
BackgroundWidget（List<Color>,size）
cloud
CloudWidget (Color)
A single random raindrop
RainWidget (
@required rainRangeXStart, #X-axis starting point of raindrop random occurrence
@required rainRangeXEnd,
@required rainRangeYStart,
@required rainRangeYEnd,
@required durationRangeStartMill, #Minimum time to fall
@required durationRangeEndMill,
rainLength,
rainWidth,
rainColor,
rainCurve #Curve of falling animation
)
A single random snowflake
SnowWidget (
this.snowAreaXStart, #X-axis starting point of snowflake random occurrence
this.snowAreaXEnd,
this.snowWaveRangeMin, #The minimum floating distance of snowflakes
this.snowWaveRangeMax,
this.snowFallSecMin, #Minimum time of snowflake falling
this.snowFallSecMax,
this.snowWaveSecMin, #Minimum time for snowflake to float
this.snowWaveSecMax,
this.snowSize,
this.snowColor,
this.snowAreaYStart, #Y-axis point of snowflake occurrence
this.snowAreaYEnd,
this.waveCurve, #Floating animation curve
this.fadeCurve #Vanish animation curve
)
A single flash
ThunderWidget (
this.flashMillStart, #Minimum flashing time
this.flashMillEnd,
this.pauseMillStart, #Minimum interval time
this.pauseMillEnd,
this.blurStyle, #blur model
this.blurSigma,
this.points,
this.color,
this.width
)
a single wind
WindWidget (
this.pauseMillStart, #Minimum interval time
this.pauseMillEnd,
this.windPositionY, #Y-axis point of wind occurrence
this.windSlideMill, #Passing time
this.windColor,
this.windWidth,
this.windSlideXEnd,
this.windSlideXStart,
this.windGap, #line spacing in a wind
this.blurStyle,
this.blurSigma
)
Using sunny weather by set the WeatherWidget background config in a sunConfig()
Installing
Use this package as a library
Depend on it
Run this command:
With Flutter:
$ flutter pub add weather_widgetThis will add a line like this to your package's pubspec.yaml (and run an implicit flutter pub get):
dependencies:
weather_widget: ^1.0.6Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.
Import it
Now in your Dart code, you can use:
import 'package:weather_widget/WeatherWidget.dart';
import 'package:weather_widget/example/main.dart';example/main.dart
import 'package:flutter/material.dart';
import 'package:weather_widget/WeatherWidget.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: WeatherWidget(
size: Size.infinite,
weather: 'Thunder',
thunderConfig:ThunderConfig(
thunderWidth:12
)
)
);
}
}chinese 中文README
Author: Carendule
Source Code: https://github.com/carendule/WeatherWidget
License: View license