Страницы

Поиск по вопросам

Показаны сообщения с ярлыком filter. Показать все сообщения
Показаны сообщения с ярлыком filter. Показать все сообщения

воскресенье, 29 марта 2020 г.

Как добавить свойство filter drop-shadow в ie11?

#css #css3 #svg #internet_explorer #filter


Есть прозрачная картинка с декоративным шрифтом при ховере на которую накладывается
filter со свойством drop-shadow.

Как применить аналогичный эффект в ie11 ?

Код


img:hover {
  filter: drop-shadow(0 0 0.5em #009af7) drop-shadow(0 0 0.2em rgba(255, 255, 255,
0.5));
  -webkit-filter: drop-shadow(0 0 0.5em #009af7) drop-shadow(0 0 0.2em rgba(255,
255, 255, 0.5));
}




    


Ответы

Ответ 1



Как вариант, можно использовать svg фильтры, поддержка дает зеленый цвет. Ниже в примере я наложил img и svg с фильтром друг на друга, чтобы при hoverе плавно показывать фильтр через opacity и transition. Другого варианта я пока не придумал) .filter-wrap { position: relative; } .filter-wrap:hover .filter-wrap__svg { opacity: 1; } .filter-wrap__image { position: relative; z-index: 2; } .filter-wrap__svg { position: absolute; left: 0; top: 0; opacity: 0; transition: opacity 200ms ease-out; }


воскресенье, 9 февраля 2020 г.

Кроссбраузерность SVG фильтров

#svg #filter


Имеем некий фильтр который по разному выглядит в Edge и Chrome

Я хочу что бы этот фильтр выглядел так же как и в Edge но тщетно ..

Как можно стандартными средствами получить такой же эффект как это выглядит в Edge ?





  
 
  
  
  
  
 
  
  
  
   
  
 
  
    
    
  

organic

      stackoverflow
    





Что бы было удобнее смотреть в Edge я прикреплю песочницу: codepen/pen

Скрины позволяющие понять ситуацию 



    


Ответы

Ответ 1



Задача была поставлена довольно трудная, так как Chrome убрал поддержку фильтров svg для текстов. В свою очередь Edge изначально не поддерживает svg filter через css свойства. И все вместе браузеры немного по разному обрабатывают и отражают одни и те же фильтры с одинаковыми настройками. Решение Чтобы обойти ограничение Chrome на применение фильтров к текстам, решил попробовать заменить буквы на unicode аналоги - не сработало. С помощью векторного редактора оконтурил буквы и забрал их path Это сработало Применил другое количество и другие svg фильтры С помощью изменения атрибутов фильтров можно в широком диапазоне менять внешний вид надписи. В результате данный текстурный эффект работает во всех браузерах включая IE и Edge и Chrome Образец, практически, как в вопросе
Настройки Уменьшение baseFrequency="0.027 0.027" увеличивает волновое искажение
при baseFrequency="0.4 0.4" буквы принимают вид мозаики или как из под баллончика с краской
seed="30" задает количество слоев для искажения

Ответ 2



Sara Soueidan, автор этого эффекта, пишет в статье, что данный эффект имеет ограниченную поддержку современными браузерами. This said, Chrome has recently stopped applying the distortion effect on the text. There’s some more information about this issue in this thread. При этом Chrome недавно прекратил применять эффект искажения к тексту. Есть еще немного информации об этой проблеме в этом репорте бага Chrome Работает: Проверил, данный эффект работает только в Firefoxи Edge Не работает: Все браузеры на WebKit движках не воспроизводят данный эффект Chrome, Opera, Yandex, Safari Поэтому проблему кроссбраузерности в этом вопросе решить невозможно.

вторник, 28 января 2020 г.

Как изменить цвет svg объекта, добавленного с помощью img?

#css #css3 #html5 #svg #filter


Я добавляю svg изображение в HTML разметку с помощью тега .
 Изображение чёрно-белое. Необходимо закрасить его, допустим в синий или зелёный цвет. 

Применение правил CSS для svg fill, stroke не даёт нужного эффекта.  



.img1 {
fill:dodgerblue; 
stroke:white;
path:inherit;
stroke:inherit;
}






Есть ли другие способы получить нужный результат?
    


Ответы

Ответ 1



Есть еще один способ. Всем элементам img с svg в разметке добавим класс .svg, затем выберем и заменим их на svg с помощью Javascript. Не работает в IE11, Opera Mini document.querySelectorAll('img.svg').forEach(img => { var imgId = img.id; var imgClass = img.className; var imgURL = img.src; var imgFill = img.getAttribute('data-fill'); fetch(imgURL).then(r => r.text()).then(text => { var parser = new DOMParser(); var xmlDoc = parser.parseFromString(text, "text/xml"); var svg = xmlDoc.getElementsByTagName('svg')[0]; if (typeof imgId !== 'undefined') { svg.setAttribute('id', imgId); } if (typeof imgClass !== 'undefined') { svg.setAttribute('class', imgClass); } if (typeof imgFill !== 'undefined') { svg.setAttribute('fill', imgFill); } img.parentNode.replaceChild(svg, img); }).catch(console.error); }); .svg { width:25px; height:25px; -webkit-transition: fill 280ms ease; -moz-transition: fill 280ms ease; -ms-transition: fill 280ms ease; -o-transition: fill 280ms ease; transition: fill 280ms ease; } .svg:hover { fill: green; cursor: pointer; } #test2 { fill:orange; } #test2:hover { fill:purple; }

Ответ 2



Когда файл SVG добавлен на страницу HTML с помощью тега , то он ничем не отличается от обычного изображения растрового формата. Поэтому невозможно применить стили из внешней таблицы. Но есть возможность изменить цвет фигур svg с помощью фильтров CSS или SVG. Цвет SVG фильтра можно установить любой. В примере ниже изображение будет покрашено в синий цвет .container { width:100%; height:100%; background:#d3d3d3; overflow:hidden; } .container:hover { background:black; } img { filter:url(#filter_B); }
Используя два фильтра, можно реализовать эффект наведения: img { filter:url(#filter_B); } img:hover { filter:url(#filter_G); } Ниже полный код: .container { width:100%; height:100%; background:#d3d3d3; overflow:hidden; } .container:hover { background: black; } img { filter: url(#filter_B); } img:hover { filter: url(#filter_G); }


Ответ 3



JS + svg filter Можно добавлять svg фильтры с помощью JS. В нашем случае будет использован фильтр filter:hue-rotate(120deg), который cработает при клике на svg Изменение цвета фильтра на альтернативный

пятница, 3 января 2020 г.

Как заменить черно-белую .png на цветную?

#html #css #filter #png


Есть такая картинка в формате ".png" :


  


На одном сайте увидел, что при наведении на изображение подобного формата,  изменяется
его состояние (при наведении изображение становится цветным).

Как это реализовать без grayscale-фильтра в css?
    


Ответы

Ответ 1



Использовать картинку в качестве background, а затем при наведении менять расположение(background-position): .block { display: inline-block; width: 5rem; height: 5rem; background-image: url("https://cdn-images-1.medium.com/max/924/1*ECSuMpJxNLViTxUOounYlw.png"); transition: 0.5s; } .v2 { background-position: -85px 0px; } .v3 { background-position: -170px 0px; } .v1:hover { background-position: 0 -86px; } .v2:hover { background-position: -85px -84px; } .v3:hover { background-position: -170px -84px; }


Ответ 2



Да, несколько картинок в одной и менять их позиции, это и есть: Спрайты Или на ховер менять в css background-image, что не так хорошо, ибо дергается при загрузке.

суббота, 28 декабря 2019 г.

Перевeсти HEX или RGB в feColorMatrix значения и суть каждого из них

#html #css #html5 #svg #filter


Изображение svg в формате base64
Необходимо черной фигуре svg,  задать цвет #26bf8c. Но как его записать в значениях
feColorMatriх?


  
  
    
      
    
  



Что значит каждое значение(элемент) этой матрицы?
    


Ответы

Ответ 1



Ниже на рисунке показано, за какими строчками и столбцами закреплены определенные каналы цветов и прозрачности цвета: В крайнем, правом столбце, каждая строка,- это финальный результат выполненных матричных вычислений по определенным каналам. Первая строка отвечает за красный цвет (R). Если в этой строчке будет "1", а в двух последующих строках нули, то результирующий цвет всей матрицы будет красный, чистый цвет, HEX(#ff0000),rgba(255,0,0,1) или rgba в % (100,0,0,1) Последняя строка,- это проценты прозрачности. "1" в этой строке соответствует 100% прозрачности. Пример окраски в красный цвет: С одноканальным (R) красным цветом оказалось всё просто. Также просто будет получить зеленый цвет (G), для этого нужно поставить 1 во второй строчке последнего столбца матрицы. Для подстановки значений в матрицу необходимо будет перевести шестнадцатеричные значения цветов (HEX) #26bf8c в rgba в % С помощью инженерного калькулятора переводим: шестнадцатеричное число26 это 38 в десятичной системе; bf - 191; 8c - 140 итого rgba(38,191,140) Переводим в проценты: (38/255)*100 = 15% Итого будут значения rgba в % (15,75,55,100) или для матрицы (0.15,0.75,0.55,1) 2# способ перевода из HEX значений цвета в rgba в % Этот способ намного проще, так как не надо ничего вычислять. Используется любая утилита, в которой есть возможность выбора и конвертирования цвета из одной формы записи в другую. Для этих целей я использовал ColorMania Копируем значение HEX цвета Нажимаем установку цвета (Set) Выбираем кодировку RGB % Value Забираем цифры в процентах и подставляем в виде - 1 соответствует 100% - 0.15,0.75,0.55,1 в последний, пятый столбец матрицы, как в первом способе выше.

Ответ 2



Это коэффициенты смешения цветов. Каждая строка в матрице обозначает свой цветовой канал выходного изображения (красный, зелёный, синий и непрозрачность соответственно). Коэффициенты в строке означают степень влияния каждого из входных каналов на конкретный выходной. Однако коэффициентов пять, а каналов всего четыре. Это связано с тем, что вы, возможно, захотите не просто смешать цвета, но и сдвинуть результат вверх или вниз, сделав канал безусловно темнее или светлее. То есть последний коэффициент сдвигает чёрную точку цветового канала. В вашем случае: 1 0 0 0 0 rвых = (1 * rвх) + (0 * gвх) + (0 * bвх) + (0 * aвх) + 0 1 0 0 1 0 => gвых = (1 * rвх) + (0 * gвх) + (0 * bвх) + (1 * aвх) + 0 1 0 0 0 0 bвых = (1 * rвх) + (0 * gвх) + (0 * bвх) + (0 * aвх) + 0 0 1 0 1 0 aвых = (0 * rвх) + (1 * gвх) + (0 * bвх) + (1 * aвх) + 0 это означает следующее: Красный канал остаётся как есть. Зелёный формируется путём усреднения красного и синего каналов. Причём итоговая яркость будет в два раза выше исходной (так как оба исходных канала складываются на своей полной яркости) — результат может быть ярче максимально допустимого, что приведёт к отсечению значения. Синий канал отбрасывается и замещается красным. Альфа-канал (задающий непрозрачность) также складывается из двух каналов, зелёного и исходной альфы. То есть мы сохраняем исходную альфу, но теперь на степень непрозрачности влияют и зелёные оттенки. Как это можно сочетать и использовать — остаётся на ваше художественное и дизайнерское усмотрение.

Ответ 3



Способ замещения RGB цвета CSS фильтрами. В ручную подбирать комбинацию фильтров CSS и их параметров довольно утомительное занятие. img { filter: invert(61%) sepia(10%) saturate(2853%) hue-rotate(109deg) brightness(101%) contrast(85%); } Но есть замечательный генератор, который можно скачать с Codepen или выполнить подборку фильтров онлайн. Всё просто — копируем нужный цвет и получаем подборку CSS фильтров, реализующих нужный цвет.

среда, 17 июля 2019 г.

Android. RecyclerView поиск по элементам

Использую RecyclerView для отображения списка с элементами. Хочу реализовать поиск по этому способу, желательно наиболее простым и действенным способом. Не смог разобраться в тех примерах что нашел в интернете, т.к. сложны для меня (я пока что новичок). Элемент списка:



RecyclerViewAdapter:
package com.starikov.definitions.adapters;
import android.support.v7.widget.RecyclerView; import android.view.LayoutInflater; import android.view.ViewGroup; import android.widget.LinearLayout; import android.widget.TextView;
import com.starikov.definitions.MainActivity; import com.starikov.definitions.R;
public class RecyclerViewAdapter extends RecyclerView.Adapter{
private int[] textId;
public static class ViewHolder extends RecyclerView.ViewHolder{ private LinearLayout mLinearLayout; public ViewHolder(LinearLayout v){ super(v); mLinearLayout = v; } }
public RecyclerViewAdapter(int[] textId){ this.textId = textId; }
@Override public RecyclerViewAdapter.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) { LinearLayout cv = (LinearLayout) LayoutInflater.from(parent.getContext()).inflate(R.layout.definition, parent, false); return new ViewHolder(cv); }
@Override public void onBindViewHolder(ViewHolder holder, int position) { float textSize; LinearLayout linearLayout = holder.mLinearLayout; TextView textView = linearLayout.findViewById(R.id.textId); textSize = MainActivity.sharedPreferences.getFloat(MainActivity.APP_PREFERENCES_TEXT_SIZE, 15); textView.setTextSize(textSize); textView.setText(linearLayout.getResources().getText(textId[position])); }
@Override public int getItemCount() { return textId.length; } }
Фрагмент со списком RecyclerView
package com.starikov.definitions;
import android.os.Bundle; import android.support.annotation.Nullable; import android.support.v4.app.Fragment; import android.support.v7.widget.LinearLayoutManager; import android.support.v7.widget.RecyclerView; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup;
import com.starikov.definitions.adapters.RecyclerViewAdapter; import com.starikov.definitions.definitions.Geometry;
public class GeometryDefinitionFragment extends Fragment {
private static int themePosition; private int[] definitionTexts; int formulaId = 0;
public static void setChoosedTheme(int position){ themePosition = position; }
@Nullable @Override public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) { RecyclerView formulaRecycler = (RecyclerView) inflater.inflate(R.layout.himical_definition_fragment, container, false);
switch (themePosition){ case 0: definitionTexts = new int[Geometry.ugli.length]; for (int i = 0; i < Geometry.ugli.length; ++i) { definitionTexts[formulaId] = Geometry.ugli[i].getTextId(); formulaId++; } getActivity().setTitle("Углы"); break; case 1: definitionTexts = new int[Geometry.parallenie_pryamie.length]; for (int i = 0; i < Geometry.parallenie_pryamie.length; ++i) { definitionTexts[formulaId] = Geometry.parallenie_pryamie[i].getTextId(); formulaId++; } getActivity().setTitle("Параллельные прямые"); break; case 2: definitionTexts = new int[Geometry.treugolniki.length]; for (int i = 0; i < Geometry.treugolniki.length; ++i) { definitionTexts[formulaId] = Geometry.treugolniki[i].getTextId(); formulaId++; } getActivity().setTitle("Треугольники"); break; case 3: definitionTexts = new int[Geometry.pryamoygolnii_treugolnik.length]; for (int i = 0; i < Geometry.pryamoygolnii_treugolnik.length; ++i) { definitionTexts[formulaId] = Geometry.pryamoygolnii_treugolnik[i].getTextId(); formulaId++; } getActivity().setTitle("Прямоугольный треугольник"); break; case 4: definitionTexts = new int[Geometry.gmt.length]; for (int i = 0; i < Geometry.gmt.length; ++i) { definitionTexts[formulaId] = Geometry.gmt[i].getTextId(); formulaId++; } getActivity().setTitle("Геометрические места точек"); break; case 5: definitionTexts = new int[Geometry.gomotetia.length]; for (int i = 0; i < Geometry.gomotetia.length; ++i) { definitionTexts[formulaId] = Geometry.gomotetia[i].getTextId(); formulaId++; } getActivity().setTitle("Геометрические места точек"); break; case 6: definitionTexts = new int[Geometry.chetirehugolnik.length]; for (int i = 0; i < Geometry.chetirehugolnik.length; ++i) { definitionTexts[formulaId] = Geometry.chetirehugolnik[i].getTextId(); formulaId++; } getActivity().setTitle("Четырехугольники"); break; }
RecyclerViewAdapter adapter = new RecyclerViewAdapter(definitionTexts); formulaRecycler.setAdapter(adapter); LinearLayoutManager layoutManager = new LinearLayoutManager(getActivity()); formulaRecycler.setLayoutManager(layoutManager); return formulaRecycler; }

@Override public void onResume() { super.onResume(); MainActivity.lastOpenedFragment = new GeometryDefinitionFragment(); MainActivity.genometryDefinitionFrag = true; }
@Override public void onPause() { super.onPause(); MainActivity.genometryDefinitionFrag = false; } }
В нем я получаю id с предыдущего фрагмента и для каждого id заполняю список разными элемнтами.
Класс Geometry
package com.starikov.definitions.definitions;
import com.starikov.definitions.R;
public class Geometry { private int textId;
public static final Geometry[] ugli = { new Geometry(R.string.ugol), new Geometry(R.string.razvernutii_ugol), new Geometry(R.string.pryamim_uglom), new Geometry(R.string.ostrim), new Geometry(R.string.tupim), new Geometry(R.string.smejnie), new Geometry(R.string.gradus), new Geometry(R.string.ravnimi), new Geometry(R.string.bissektrisa), new Geometry(R.string.vertical), new Geometry(R.string.uglom_mejdu_dvumya_peresekauch_praymamim), new Geometry(R.string.perpendikular), };
public static final Geometry[] parallenie_pryamie = { new Geometry(R.string.parallelnie_pryamie), new Geometry(R.string.teorema_suh_paral_pryamih), new Geometry(R.string.aksioma_paral_pryamih), new Geometry(R.string.sledstvie), new Geometry(R.string.parallelnie_pryamie_ugli), new Geometry(R.string.priznaki_parallelnosti_dvuh_prymih), new Geometry(R.string.svoistva_uglov_paral_pr), new Geometry(R.string.teorema_faleca), new Geometry(R.string.rashrir_faleca), };
public static final Geometry[] treugolniki = { new Geometry(R.string.treugolnik), new Geometry(R.string.uglom_treugolnika), new Geometry(R.string.vidi_treugolnikov), new Geometry(R.string.perimetr), new Geometry(R.string.sootnoshenie_ejdu_storonami_i_uglami_treugolnika), new Geometry(R.string.vneshnim), new Geometry(R.string.ravnimi__), new Geometry(R.string.priznaki_ravenstva_treugolnikov), new Geometry(R.string.srednyaya_linia), new Geometry(R.string.mediana), new Geometry(R.string.bissektrisa__), new Geometry(R.string.visota), new Geometry(R.string.svoistvo_srednei_linii_treugolnika), new Geometry(R.string.bissektrisa_ravnobedr), new Geometry(R.string.chetire_zamechatelnie_tochki_treugolnika), new Geometry(R.string.svoistva_median_treugolnika), new Geometry(R.string.reshit_treugolnik), };
public static final Geometry[] pryamoygolnii_treugolnik = { new Geometry(R.string.pryamougolnii_treugolnik), new Geometry(R.string.gipotenuza), new Geometry(R.string.kateti), new Geometry(R.string.swoistvo_mediani_provedennoi_na_gipotenuzu), new Geometry(R.string.priznaki_ravenstva_pryamougolnih_treugolnikov), new Geometry(R.string.v_pryamougolnom_treugolnike), new Geometry(R.string.teorema_pifagora), new Geometry(R.string.obratnaya_teorema_pifagora), new Geometry(R.string.teorema_kosinusov), new Geometry(R.string.teorema_sinusov), };
public static final Geometry[] gmt = { new Geometry(R.string.gmt), new Geometry(R.string.okrujnost), new Geometry(R.string.seredinnii_perpendikular), new Geometry(R.string.sovokupnost_dvuh_pryamih_parallelnoih_dannoi), new Geometry(R.string.parallelnaya_im_pruyamaya), new Geometry(R.string.sovokupnost_dvuh_pryamih), new Geometry(R.string.sovokupnost_dvuh_segmentov_bez_ih_konsov), };
public static final Geometry[] gomotetia = { new Geometry(R.string.gomotetia), new Geometry(R.string.preobrazovanie_podobia), new Geometry(R.string.podobnimi), new Geometry(R.string.sushestvovanie_podobnih_treugolnikov), new Geometry(R.string.svoistvo_preobrazovania_podobia), new Geometry(R.string.priznaki_podobia_treugolnikov), new Geometry(R.string.v_podobnih_treugolnikah), };
public static final Geometry[] chetirehugolnik = { new Geometry(R.string.chetirehugolnik), new Geometry(R.string.vershini_i_storoni), new Geometry(R.string.sosednie_protivoleshahie), new Geometry(R.string.sosednie_smejnie), new Geometry(R.string.diagonal), new Geometry(R.string.vipuklim), new Geometry(R.string.uglom), new Geometry(R.string.sosednie_protivoleshahie_ugli), new Geometry(R.string.svoistvo_uglov_vipuklogo_chetirehugolnika), new Geometry(R.string.perimetr___), new Geometry(R.string.svoistva_parallelograma), new Geometry(R.string.priznaki_parallelograma), new Geometry(R.string.pryamougolnik), new Geometry(R.string.svoistva_pryamougolnika), new Geometry(R.string.priaznaki_pryamougolnika), new Geometry(R.string.romb), new Geometry(R.string.svoistva_romba), new Geometry(R.string.prizanki_romba), new Geometry(R.string.kvadrat), new Geometry(R.string.svoistva_kvadrata), new Geometry(R.string.prizmnaki_kvadrata), new Geometry(R.string.eche_dva_prianaka_kvadrata), new Geometry(R.string.trapecia), new Geometry(R.string.osnovanie_trapecii), new Geometry(R.string.srednyaya_linia_trapecii), new Geometry(R.string.diagonal_trapecii), new Geometry(R.string.visota_trapecii), new Geometry(R.string.svoistva_trapecii), new Geometry(R.string.ravnobokoi_rapeciei), new Geometry(R.string.pryamougolnoi_trapeciei), new Geometry(R.string.svoistva_ravnobokoi_trapecii), };
private Geometry(int textId){ this.textId = textId; }
public int getTextId(){ return textId; } }
Прошу помощи, т.к. сам не разобрался.


Ответ

Разобрался, сделал:
activity_main.xml Тут макет для RecyclerView

android:scrollbarThumbVertical="@drawable/scrollview_thumb" и android:scrollbarTrackVertical="@drawable/vertical_scrollview_track" мои собственные макеты для полосы прокрутки (можно убрать, можно заменить своими)
MainActivity
package com.starikov.search;
import android.os.Bundle; import android.support.v4.view.MenuItemCompat; import android.support.v7.app.AppCompatActivity; import android.support.v7.widget.LinearLayoutManager; import android.support.v7.widget.RecyclerView; import android.support.v7.widget.SearchView; import android.view.Menu; import android.view.MenuItem;
import java.util.ArrayList; import java.util.Arrays;
public class MainActivity extends AppCompatActivity {
private RecyclerView mRecyclerView; private ArrayList mArrayList = new ArrayList(Formula.physicalFormuls.length); private RecyclerViewAdapter mAdapter;
@Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main);
mRecyclerView = findViewById(R.id.formula_recycler); mRecyclerView.setHasFixedSize(true); RecyclerView.LayoutManager layoutManager = new LinearLayoutManager(this); mRecyclerView.setLayoutManager(layoutManager); mArrayList = setArray(mArrayList); // Заполняем список mAdapter = new RecyclerViewAdapter(mArrayList); // Создаем адаптер mRecyclerView.setAdapter(mAdapter); // Подключаем адаптер }
@Override public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.main_menu, menu);
MenuItem search = menu.findItem(R.id.search); // Подключаем SearchView SearchView searchView = (SearchView) MenuItemCompat.getActionView(search); search(searchView); return true; }
@Override public boolean onOptionsItemSelected(MenuItem item) {
return super.onOptionsItemSelected(item); }
private void search(SearchView searchView) {
searchView.setOnQueryTextListener(new SearchView.OnQueryTextListener() { @Override public boolean onQueryTextSubmit(String query) { mAdapter.getFilter().filter(query); return false; }
@Override public boolean onQueryTextChange(String newText) { mAdapter.getFilter().filter(newText); return true; } }); }
private ArrayList setArray(ArrayList list) { // Заполняю ArrayList готовым списком из класса Formula list.addAll(Arrays.asList(Formula.physicalFormuls)); return list; } }
main_menu.xml


Formula.java
package com.starikov.search;
public class Formula { private String name; private int imageId;
public Formula(String name, int imageId){ this.name = name; this.imageId = imageId; }

public static final Formula[] physicalFormuls = { // Текст по которому будет вестись поиск, и картинка которую ищем new Formula("закон движения", R.drawable.formul_zakon_dvijenia), new Formula("координатные уравнения движения", R.drawable.formul_koordinatnie_uravneniya_dvigenia), new Formula("перемещение точки тела",R.drawable.formul_peremechenie), .... };
public String getName(){ return name; }
public int getImageId(){ return imageId; }
public String toString() { return this.name; } }
card_view.xml (макет для элемента списка)





RecyclerViewAdapter.java
package com.starikov.search;
import android.support.v7.widget.CardView; import android.support.v7.widget.RecyclerView; import android.view.LayoutInflater; import android.view.ViewGroup; import android.widget.Filter; import android.widget.Filterable; import android.widget.ImageView;
import java.util.ArrayList;
public class RecyclerViewAdapter extends RecyclerView.Adapter implements Filterable{
private ArrayList mArrayList = new ArrayList<>(); private ArrayList mFilteredList = new ArrayList<>();
@Override public Filter getFilter() { return new Filter() { @Override protected FilterResults performFiltering(CharSequence charSequence) { String charString = charSequence.toString();
if (charString.isEmpty()) { mFilteredList = mArrayList; } else { ArrayList filteredList = new ArrayList<>(); for (Formula formula : mArrayList) { if (formula.getName().toLowerCase().contains(charString)) { // Сортируем по тексту из Formula filteredList.add(formula); } } mFilteredList = filteredList; }
FilterResults filterResults = new FilterResults(); filterResults.values = mFilteredList; return filterResults; }
@Override protected void publishResults(CharSequence charSequence, FilterResults filterResults) { mFilteredList = (ArrayList) filterResults.values; notifyDataSetChanged(); } }; }
public static class ViewHolder extends RecyclerView.ViewHolder{ private CardView mCardView; private ImageView imageView; public ViewHolder(CardView v){ super(v); mCardView = v; imageView = v.findViewById(R.id.info_image); } }
public RecyclerViewAdapter(ArrayList arrayList){ mArrayList = arrayList; mFilteredList = arrayList; }
@Override public RecyclerViewAdapter.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) { CardView cv = (CardView) LayoutInflater.from(parent.getContext()).inflate(R.layout.card_view, parent, false); return new ViewHolder(cv); }
@Override public void onBindViewHolder(ViewHolder holder, int position) { holder.imageView.setImageDrawable(holder.mCardView.getResources().getDrawable(mFilteredList.get(position).getImageId())); holder.imageView.setContentDescription(mFilteredList.get(position).getName()); }
@Override public int getItemCount() { return mFilteredList.size(); } }
в Gradle зависимости для CardView и RecyclerView
compile 'com.android.support:recyclerview-v7:26.1.0' implementation 'com.android.support:cardview-v7:26.1.0'
Буду рад советам как улучшить код!

четверг, 20 июня 2019 г.

Фильтр в Django по дате

Как сделать, чтобы выводились по дате сначала новые записи, потом более старые. Сейчас выводится наоборот сначала старые
views.py:
from django.shortcuts import render, get_object_or_404 from post.models import Post from django.utils import timezone
def home(request): posts = Post.objects.filter(published_date__lte=timezone.now()).order_by('published_date') return render(request, 'frontend/home.html', {'posts': posts})
Модель:
class Post(models.Model): class Meta: db_table = "post"
author = models.ForeignKey('auth.User', default='user') title = models.CharField(max_length=200) text_preview = models.TextField(max_length=100, default='') image_preview = models.ImageField(upload_to = 'img/', default='') text = models.TextField(default='') created_date = models.DateTimeField(default=timezone.now) published_date = models.DateTimeField(blank=True, null=True)
def publish(self): self.published_date = timezone.now() self.save()
def __unicode__(self): return self.title


Ответ

Для того, чтобы вывести записи по убыванию, надо в order_by перед названием поля поставить "-".
def home(request): posts = Post.objects.filter(published_date__lte=timezone.now()).order_by('-published_date') return render(request, 'frontend/home.html', {'posts': posts})

четверг, 21 марта 2019 г.

Ajax: получение части кода со страницы

Нужно получить часть кода из блока #id с другой страницы как с помощью .load('url #id'), но .load() не получает код скриптов внутри #id
function ocmenu(linkurl){ $.ajax({ url: linkurl, cache: true }).done(function( html ) { $('.new').append(html); }); }
html.filter('#id') не работает


Ответ

Наверное надо попробовать так, аякс возвращает Вам строку, чтобы воспользоваться функциями jQuery Вам надо преобразовать в jQuery объект: ... .done(function(html){ $(html).filter('#id'); }); ...

среда, 16 января 2019 г.

Как заменить черно-белую .png на цветную?

Есть такая картинка в формате ".png" :

На одном сайте увидел, что при наведении на изображение подобного формата, изменяется его состояние (при наведении изображение становится цветным).
Как это реализовать без grayscale-фильтра в css?


Ответ

Использовать картинку в качестве background, а затем при наведении менять расположение(background-position):
.block { display: inline-block; width: 5rem; height: 5rem; background-image: url("https://cdn-images-1.medium.com/max/924/1*ECSuMpJxNLViTxUOounYlw.png"); transition: 0.5s; } .v2 { background-position: -85px 0px; } .v3 { background-position: -170px 0px; } .v1:hover { background-position: 0 -86px; } .v2:hover { background-position: -85px -84px; } .v3:hover { background-position: -170px -84px; }