Skocz do zawartości


Zdjęcie

Silverlight Intelligent Background®


  • Zamknięty Temat jest zamknięty
3 odpowiedzi w tym temacie

#1 Silverlight

Silverlight

    Just brilliant. It's Sense.

  • Dekorator
  • 3422 postów

Napisano 2012.03.24, 10:29

Silverlight Intelligent Background®

Przedstawiam system skalowania tła Silverlight Intelligent Background® do zastosowań w kompozycjach wizualnych. Co on takiego ciekawego oferuje? Oferuje skalowanie dowolnego tła z zachowaniem jego proporcji. W zależności od proporcji okna tło jest skalowane pionowo (wtedy wysokość to wysokość okna, a szerokość jest dynamiczna) lub poziomo (wtedy szerokość to szerokość okna, a wysokość jest dynamiczna). Widocznym fragmentem tła jest zawsze jego centralny obszar. Dynamiczna szerokość i wysokość mogą być mniejsze od szerokości/wysokości okna, wówczas fragment tła, który nie mieści się, jest po prostu wyciągany poza krawędzie okna. Dodatkowo tło na zakładkach SMS i Powiadomienia jest dostosowane względem tła listy kontaktów (efekt nieruchomego tła, przy przechodzeniu między zakładkami sprawia to wrażenie jakby tło w ogóle nie uległo zmianie, wydaje się wręcz, że forma SMS/forma CP/zakładki CP zostały absolutnie naniesione na nie nie powodując jego przesunięć.

Jak to działa będziecie mogli zobaczyć jeszcze dzisiaj w kompozycji wizualnej Silverlight Dark Amber v1.2 lub prawdopodobnie w Guild Wars autorstwa vBz, ponieważ prywatnie wyraził zainteresowanie skorzystaniem z omawianego fjuczera.

Dołączona grafika Wymagania: kompozycja wizualna, oparta na !DOCTYPE (ponieważ wymagana jest obsługa position:fixed); obecność DIV#list_content w każdym oknie, w którym system skalowania jest wykorzystywany (np. w oknie rozmowy w trochę ułomnej wersji pod postacią DIV#window_dimensions, ale spokojnie, wszystko jest w porządku Dołączona grafika); AQQ 2.4.1.10 lub nowsze.

Dołączona grafika Instrukcja obsługi (w sensie jak zastosować to w swojej kompozycji):

Sprawdzamy, czy w każdym oknie mamy dodany DIV#list_content. Jeżeli nie, dodajemy luzem nad wszystkimi innymi DIV#window_dimensions (on będzie służył tylko zwracaniu prawidłowych wartości wymiarów okna, niestety clientHeight zawodzi w oknie rozmowy dlatego nie mogę korzystać z takich ogólników i ten DIV jest koniecznością). Przykładowo w oknie rozmowy powinno to wyglądać tak:

<BODY onDragStart="return false">
  <DIV id="window_dimensions"></DIV>
  <DIV id="0"></DIV>
</BODY>

Teraz dodajemy linijkę, która wywołuje funkcję preparującą tło:

<BODY onDragStart="return false">
  <DIV id="window_dimensions"></DIV>
  <DIV id="0"></DIV>
  <SCRIPT type="text/javascript">preparebg();</SCRIPT>
</BODY>

Dla naszego świeżo dodanego DIV#window_dimensions nadajemy następujące style (przypominam, że jeżeli DIV#list_content występuje w oknie, np. na liście kontaktów, to nie zmieniasz żadnych styli ani w ogóle nie dodajesz DIV#window_dimensions, wszystko zostaje tak, jak jest):

#window_dimensions {
  position: fixed;
  z-index: -2;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

A teraz przechodzimy do umieszczenia tła. Tło będzie miało klasę .background_image, zatem ją stylujemy. Dodajemy sobie w stylach pozycjonowanie ustalone i jakiś ujemny zIndex tak, aby tło się znalazło pod wszystkim. Proponuję tak:

.background_image {
  position: fixed;
  z-index: -1;
}

A teraz specyficznie dla każdego okna trochę inny skrypt dodajemy w sekcji <HEAD> naszego dokumentu HTML:

Lista kontaktów:

<SCRIPT type="text/javascript">
var bgobj,
	ratio_horiz,
	ratio_vert;
function preparebg() {
  var calculateratios=function () {
	bgobj.className="background_image";
	ratio_horiz=bgobj.width/bgobj.height;
	ratio_vert=1/ratio_horiz;
	bgscale();
	document.body.appendChild(bgobj);
	document.body.onresize=bgscale;
  }
  bgobj=document.createElement("img");
  bgobj.src="background_image_opacity.png";
  if((bgobj.width===0) || (bgobj.height===0)) {bgobj.onload=calculateratios;}
  else if((bgobj.width>0) && (bgobj.height>0)) {calculateratios();}
}
function bgscale() {
  var list_width=document.body.clientWidth,
	  list_height=document.getElementById("list_content").offsetHeight;
  if(ratio_horiz*list_height>list_width) {
	bgobj.style.top="22px";
	bgobj.style.left=0.5*(list_width-ratio_horiz*list_height);
	bgobj.style.width=ratio_horiz*list_height;
	bgobj.style.height=list_height;
  }
  else {
	bgobj.style.top=0.5*(list_height-ratio_vert*list_width)+22;
	bgobj.style.left="0";
	bgobj.style.width=list_width;
	bgobj.style.height=ratio_vert*list_width;
  }
}
</SCRIPT>

!! W linijce bgobj.src="background_image_opacity.png"; podajemy zamiast background_image_opacity.png ścieżkę do obrazka!

Zakładka SMS:

<SCRIPT type="text/javascript">
var bgobj,
	ratio_horiz,
	ratio_vert;
function preparebg() {
  var calculateratios=function () {
	bgobj.className="background_image";
	ratio_horiz=bgobj.width/bgobj.height;
	ratio_vert=1/ratio_horiz;
	bgscale();
	document.body.appendChild(bgobj);
	document.body.onresize=bgscale;
  }
  bgobj=document.createElement("img");
  bgobj.src="../Contacts/background_image_opacity.png";
  if((bgobj.width===0) || (bgobj.height===0)) {bgobj.onload=calculateratios;}
  else if((bgobj.width>0) && (bgobj.height>0)) {calculateratios();}
}
function bgscale() {
  var list_width=document.body.clientWidth,
	  list_height=document.getElementById("window_dimensions").offsetHeight+225;
  if(ratio_horiz*list_height>list_width) {
	bgobj.style.top="-225px";
	bgobj.style.left=0.5*(list_width-ratio_horiz*list_height);
	bgobj.style.width=ratio_horiz*list_height;
	bgobj.style.height=list_height;
  }
  else {
	bgobj.style.top=0.5*(list_height-ratio_vert*list_width)-225;
	bgobj.style.left="0";
	bgobj.style.width=list_width;
	bgobj.style.height=ratio_vert*list_width;
  }
}
</SCRIPT>

!! W linijce bgobj.src="background_image_opacity.png"; podajemy zamiast background_image_opacity.png ścieżkę do obrazka! Jeżeli w SMS-ach miałeś DIV-a list_content, to zamień w powyższym skrypcie window_dimensions na list_content!

Zakładka Powiadomienia:

Tu jest troszeczkę inna sprawa, bo musimy dodać trochę więcej elementów :(

Po pierwsze na sam spód (ale przed <SCRIPT>, o którym mowa była na samym początku tego tematu!) dwa dodatkowe DIV-y:

  <DIV id="AQQ_HideSocialTabs" onClick="sthidden();"></DIV>
  <DIV id="AQQ_ShowSocialTabs" onClick="stshowed();"></DIV>

I te DIV-y sobie pięknie chowamy żeby nam czasem w czymś nie przeszkodziły:

#AQQ_HideSocialTabs, #AQQ_ShowSocialTabs {display: none;}

No i skrypt do <HEAD>:

<SCRIPT type="text/javascript">
function stshowed() {
  stshift=40;
  preparebg();
}
function sthidden() {
  stshift=0;
  preparebg();
}
var bgobj,
	ratio_horiz,
	ratio_vert;
function preparebg() {
  var calculateratios=function () {
	bgobj.className="background_image";
	ratio_horiz=bgobj.width/bgobj.height;
	ratio_vert=1/ratio_horiz;
	bgscale();
	document.body.appendChild(bgobj);
	document.body.onresize=bgscale;
  }
  bgobj=document.createElement("img");
  bgobj.src="../Contacts/background_image_opacity.png";
  if((bgobj.width===0) || (bgobj.height===0)) {bgobj.onload=calculateratios;}
  else if((bgobj.width>0) && (bgobj.height>0)) {calculateratios();}
}
function bgscale() {
  var list_width=document.body.clientWidth,
	  list_height=document.getElementById("window_dimensions").offsetHeight+65+stshift;
  if(ratio_horiz*list_height>list_width) {
	bgobj.style.top="-65px";
	bgobj.style.left=0.5*(list_width-ratio_horiz*list_height);
	bgobj.style.width=ratio_horiz*list_height;
	bgobj.style.height=list_height;
  }
  else {
	bgobj.style.top=0.5*(list_height-ratio_vert*list_width)-65;
	bgobj.style.left="0";
	bgobj.style.width=list_width;
	bgobj.style.height=ratio_vert*list_width;
  }
}
</SCRIPT>

I jeszcze do tego dwa DIV-y za wszystkimi innymi:

<BODY onDragStart="return false" onSelectStart="return false">
  <DIV id="list_content">
	<DIV id="0"></DIV>
  </DIV>
  <DIV id="background_image"></DIV>
  <DIV id="AQQ_HideSocialTabs" onClick="AQQ_HideSocialTabs()"></DIV>
  <DIV id="AQQ_ShowSocialTabs" onClick="AQQ_ShowSocialTabs()"></DIV>
</BODY>

!! W linijce bgobj.src="background_image_opacity.png"; podajemy zamiast background_image_opacity.png ścieżkę do obrazka! Jeżeli w SMS-ach miałeś DIV-a list_content, to zamień w powyższym skrypcie window_dimensions na list_content!

Okno rozmowy, historii i okna: Windows/emots.htm oraz Windows/avatars.htm:

<SCRIPT type="text/javascript">
var bgobj,
	ratio_horiz,
	ratio_vert;
function preparebg() {
  var calculateratios=function () {
	bgobj.className="background_image";
	ratio_horiz=bgobj.width/bgobj.height;
	ratio_vert=1/ratio_horiz;
	bgscale();
	document.body.appendChild(bgobj);
	document.body.onresize=bgscale;
  }
  bgobj=document.createElement("img");
  bgobj.src="background_image_opacity.png";
  if((bgobj.width===0) || (bgobj.height===0)) {bgobj.onload=calculateratios;}
  else if((bgobj.width>0) && (bgobj.height>0)) {calculateratios();}
}
function bgscale() {
  var window_width=document.body.clientWidth,
	  window_height=document.getElementById("window_dimensions").offsetHeight;
  if(ratio_horiz*window_height>window_width) {
	bgobj.style.top="0";
	bgobj.style.left=0.5*(window_width-ratio_horiz*window_height);
	bgobj.style.width=ratio_horiz*window_height;
	bgobj.style.height=window_height;
  }
  else {
	bgobj.style.top=0.5*(window_height-ratio_vert*window_width);
	bgobj.style.left="0";
	bgobj.style.width=window_width;
	bgobj.style.height=ratio_vert*window_width;
  }
}
</SCRIPT>

Życzę przyjemności! Dołączona grafika

Użytkownik Silverlight edytował ten post 2012.05.06, 23:02

  • Czajo, KAmerOK i vBz lubią to

Windows 10 Home x64 ● Internet Explorer 11Intel i7 3gen 4x2,3~3,3 GHz8 GB RAMnVIDIA GeForce 650M 2 GB 1920x1080Intel SSD 530 240GBBlu-ray RW


#2 vBz

vBz

    Expert

  • Dekorator
  • 828 postów

Napisano 2012.03.24, 16:40

Good work. Działa jak trzeba :D
  • Silverlight lubi to

#3 Killer

Killer

    Expert

  • Użytkownik
  • 1129 postów

Napisano 2012.03.24, 16:48

Bez ® w nazwie, bo nie masz zastrzeżonej tej nazwy. A poza tym "Silverlight" należy do Microsoftu, więc nie da się tego zarejestrować. :]
  • Lord ByRad i kr2ysiek lubią to

Beta testy AQQ:

PC: AQQ (zawsze najnowsza beta), Edge, Windows 10 x64 | Kompozycja: GG11, Wtyczki: dostarczane z AQQ
Asus 1215N: AQQ (zawsze najnowsza beta), Edge, Windows 10 x64 | Kompozycja: GG11, Wtyczki: dostarczane z AQQ


#4 Silverlight

Silverlight

    Just brilliant. It's Sense.

  • Dekorator
  • 3422 postów

Napisano 2012.05.06, 23:05

Zaszła poważna aktualizacja tego systemu skalowania tła w związku z nową wersją (2.4) kompozycji Silverlight Dark Amber. Proszę się zapoznać ze zmianami.

Od teraz nie podajemy żadnych współczynników. Jedyne, co robicie, to pilnujecie DIV#list_content/window_dimensions (aby był któryś z nich i odpowiednio na nie wskazujecie w skrypcie) oraz dodajecie skrypty i podajecie ścieżkę do obrazka. Skrypt sam oblicza współczynniki, których podstawianie uprzednio było istną mordęgą. Dodatkowo system nie działa już w oparciu o expression - można stosować w trybie IE-edge ( !! ).

Windows 10 Home x64 ● Internet Explorer 11Intel i7 3gen 4x2,3~3,3 GHz8 GB RAMnVIDIA GeForce 650M 2 GB 1920x1080Intel SSD 530 240GBBlu-ray RW





Użytkownicy przeglądający ten temat: 0

0 użytkowników, 0 gości, 0 anonimowych