Apple iPhone Forum und Community

@JH97
Welche Version hast Du denn geladen ?

Hallo oldster,
ich habe die Version NewHTC-V3 für PerPage!

Die Größe der Layer stellt man in der style.css an folgender Position ein:

Zitat:/*****forecast*****/
#pos_forecast {
position:absolute;
top:20px;
left:10px;
width:300px;
height:55px;
background: rgba(0,0,0,0.3);
border-radius: 10px;
z-index:1;
}

#pos_forecast_back {
position:absolute;
top:20px;
left:10px;
width:300px;
height:55px;
background: rgba(0,0,0,0.3);
border-radius: 10px;
z-index:1;
}

Darauf achten, beide Layer müssen geändert werden. Also pos_forecast und pos_forecast_back. Wenn die Breite geändert wird, muss auch der linke Abstand verändert werden.

Danke oldster, hat super geklappt

@ oldster!!

Hallo
Hast du eine Idee wie ich dieses Problem lösen kann?
Ich würde sehr gerne eine Sonnenauf,- und Sonnenuntergang einbauen. Zwischen Tag und Nacht.

Du steuerst die Sonne und den Mond über koordinaten Du lässt das eine x.png von links nach rechts wandern.
Tag und Nacht steuerst du über yahoo!? Bin mir aber nicht sicher.

Meine erste Idee war die Sonne über Zeit zu steuern mit verschiedenen Bilder.
z.B.: =6Uhr Bild Sonne1.png.
Dann müsste man aber Winter,- und Sommerzeit berücksichtigen usw..

Habe ich leider nicht hin bekommen

Hast du eine Idee, wie man bei deiner PerPageHtml "V3" einen Sonnenauf und Untergang programmieren kann??? Das nur die erste und in der letzte Stunde vom Tag die Sonne oragnge ist.

Danke im Vorhinaus.

Das ist eine Interessante Aufgabe
Die Lösung sollte ich wohl bis zum WE hinbekommen haben.
Mein Ansatz wäre so: 2 Sonnen übereinander (unten orange, oben gelb), danach die gelbe Sonne langsam Ein- bzw. Ausblenden.

Meine neue Idee wäre mit if und else.

Wenn die Sonne an den ersten Koordinaten und bei den letzten Koordinaten ist, soll das Bild x.png gezeigt werden. Ansonsten sun.png.

Muss ich aber noch ausprobieren.

OK, und wenn Du nicht weiter kommst, melde dich

Ich habe es schon fertig. Habe es so gemacht, wie vorher geschrieben. Die Sonne beginnt orange, und wechselt dann mit der Zeit zum sun.png. Das heisst, wenn die Sonne voll sichtbar ist, wird nur noch das sun.png angezeigt. Und abends ist es umgekehrt. Wenn die Sonne den rechten Rand erreicht, geht sie langsam ins orange über.

Ich werde es heute in der Nachtschicht angehen. Aber deine Lösung klingt schon eleganter als meine Idee!
Bei meiner Idee verschwindet die orange Sonne einfach!

Du kennst dich mit diesem Gebiet so richtig aus!? Du hast sofort eine Lösung gehabt!
Ich probiere schon seit über einer Woche.
Hast du in deiner Arbeit mit html usw. zu tun oder ist das nur ein Hobby von dir?

Es ist NUR ein Hobby

Aber deine Idee mit if und else ist genau richtig. Nur das ich nicht sage, ab der Position x tausche ich die beiden Bilder für die Sonne.

Ich finde das programmieren von Widgets grenz genial, aber leider kenne ich micht zu wenig aus!!
Hatte zwar in der Schule (vor langer Zeit) ein paar Basics, aber diese habe ich alle wieder vergessen. Learning by doing


Mein Plan: Ich möchte ein Bild "sunorange.png" mit dem Bild sun.png und sunray.png mit bewegen und dann aus und ein Blenben..!

Ich weiß aber nicht was ich falsch mache!!!

UniAW.css
Baue ich ein

#sunorange{
background:url('Images/Weather/sun/sunorange.png') center no-repeat;
background-size: 600px 600px;
background-color: transparent;
position: absolute;
top: -290px;
left: -300px;
width: 600px;
height: 600px;
margin : auto 0;
z-index: 21;
display: none;
}

Uni.js
....
pTranslate = parseInt(((time_to_change_wall - dayhour)/ DurationOfDay)*320);
psunorange = parseInt(((time_to_change_wall - dayhour)/ DurationOfDay)*320);
}
document.getElementById("sun").style.webkitTransform = "translateX("+pTranslate+"px)";
document.getElementById("sunray").style.webkitTransform = "translateX("+pTranslate+"px)";
document.getElementById("sunorange").style.webkitTransform = "translateX("+psunorange+"px)";
.....

(Das ist doch der Befehl für die Bewegung der Sonne!?)

Funktioniert nicht!!!!!

Zum Ein und Ausblenden bin ich noch garn nicht gekommen.

Dein Ansatz ist genau richtig.
2 Änderungen im Vorfeld, und dann komme ich zum eigentlichem "Problem"
1. Ich würde den z-index so aufbauen.
#sun = 23
#sunorange = 22
#sunray=21

2. die Berechnung psunorange ist nicht nötig, ist ja die gleiche wie pTranslate.

Du hast nichts davon geschrieben, dass Du die LockBackground.html geändert hast. Also falls nicht geschehen, kommt da noch folgendes rein:
<div id="sunorange"></div>

Und jetzt kommt der aufwendige Teil.
Es müssen noch die ganzen UniAW Wetter html's angepasst werden. Da dieser ja die Steuerung für Tag/Nacht übernehmen. Also im Ordner UniAW/JavaScript/Weather die html Dateien bearbeiten, in den sun und moon vorkommt. Dort müssen dann diese beiden Zeilen eingefügt werden.
document.getElementById("sunorange").style.display='block';
document.getElementById("sunorange").style.display='none';

Testen kannst Du das ganz einfach, man braucht nur in der
document.getElementById("sunorange").style.webkitTransform = "translateX("+psunorange+"px)";
für psunorange eine Zahl zwischen 0-320 eingeben.

Hab jetzt bei der Widget.hmtl:
...
<div id="sunray"></div>
<div id="sunorange"></div>
<div id="sun"></div>
...

,dann bei der UniAW.css folgendes eingefügt:
...
#sun{
background:url('Images/Weather/sun/sun.png') center no-repeat;
background-size: 600px 600px;
background-color: transparent;
position: absolute;
top: -290px;
left: -300px;
width: 600px;
height: 600px;
margin : auto 0;
z-index: 23;
display: none;
}

sunorange{
background:url('Images/Weather/sun/sunorange.png') center no-repeat;
background-size: 600px 600px;
background-color: transparent;
position: absolute;
top: -290px;
left: -300px;
width: 600px;
height: 600px;
margin : auto 0;
z-index: 22;
display: none;
}

#sunray{.....

in der Uni.js:
...
} else {
where = "day";
if (Sun_Moon_from_right_to_left === true){
pTranslate = parseInt((1-(time_to_change_wall - dayhour)/ DurationOfDay)*320);
} else {
pTranslate = parseInt(((time_to_change_wall - dayhour)/ DurationOfDay)*320);
}
document.getElementById("sun").style.webkitTransform = "translateX("+pTranslate+"px)";
document.getElementById("sunorange").style.webkitTransform = "translateX("+pTranslate+"px)";
document.getElementById("sunray").style.webkitTransform = "translateX("+pTranslate+"px)";
}...

und in den JavaScript Ordner bei allein Animationen (z.B. Cloud) die Zeilen:
...
if (where == "day") {
document.getElementById("moon").style.display='none';
document.getElementById("sun").style.display='none';
document.getElementById("moonray").style.display='none';
document.getElementById("sunorange").style.display='none';
document.getElementById("sunray").style.display='none';
} else {
document.getElementById("moon").style.display='none';
document.getElementById("sun").style.display='none';
document.getElementById("moonray").style.display='none';
document.getElementById("sunorange").style.display='none';
document.getElementById("sunray").style.display='none';
}

eingefügt!!

!!!!Funktioniert, danke!!!!!

Wie kann ich es am Anfang verschwinden und kurz vorm Ende erscheinen lassen?? Da bin ich mir noch nicht sicher, es fehlt mir noch die Zeit!!

Sind das diese befehle??

@-webkit-keyframes xxxxxxxx {
0% {opacity: 0.3;}
50% {opacity: 1.0;}
100% {opacity: 0.3;}

Perfekt
Hat da nicht jemand gesagt, er hätte alles wieder vergessen

Ich zeige dir mal meinen code (gehört in die UniAW.js, vor die document.getElementById("sun").style.webkitTransform =) :

Zitat:sun_layer=0;
if(pTranslate <= 45) {
sun_layer = pTranslate * .022;
document.getElementById("sun").style.opacity=" "+sun_layer+" " ;

}
else if(pTranslate > 45 && pTranslate < 285) {
document.getElementById("sun").style.opacity="1.0";

}
else {
sun_layer = (320 - pTranslate) * .028;
document.getElementById("sun").style.opacity=" "+sun_layer+" " ;


}

Kurz zur Erklärung der if Anweisungen:
Wenn pTranslate <45 ist, dann ist die Sonne noch nicht ganz auf dem Bildschirm erschienen. Mit der Variablen sun_layer steuere ich den Wert für opacity.
0=transparen 1=voll sichtbar
Zwischen 45 und 285 ist die Sonne immer sichtbar.
Ab 285 hat sie den rechten Rand erreicht und wird langsam ausgeblendet.

Aber auch nur dank deiner Hilfe!!!

Wie kann ich überprüfen??

Setze vor sun_layer=0; eine Zeile mit
pTranslate = xx;
ein. xx steht für eine Zahl zwischen 0...320.

Aber denke daran, die Zeile nach dem Testen wieder zu löschen.

Solange das Theme noch im day Modus ist, kannst man somit die Sonne an jedem beliebigen Punkt setzen.

****Schaut genial aus****



Vielen Dank, dass du für uns Amateure Zeit hast, hilfsbereit bist und sofort Antwortest!!
Macht nicht ein jeder!!

Ich habe sunrayorange.png auch noch eingebaut!! Sieht noch besser aus!!
Ich schicke dir per E-Mail einen Link mit meinem veränderten Widget:
[Layer.png und Backround (0,0,0,1) im Hintergrund ist Absicht]
[Steuerung der Icons mit den Ordnern "Day, Night, TodayCodeDay" und TodayCodeNight) ist auch beabsichtigt]

Zurück zum Sonnen Auf,- und Untergang:
Lese ich das Richtig raus? Für Tag und Nacht kommt der Befehl von Yahoo oder schaltet der Widget beim Erreichen der 320px um??

Hallo
ihr seit so geil.
Wann können wir mal euer Werk begutachten?
mfg buck

Hallo odster!!

Leider hat man die orangen Strahlen immer gesehen!!
Jetzt habe ich es umgebaut. Ist das so Richtig??

UniAW.css
#sunorange = 24
#sun = 23
#sunray = 22
#sunrayorange = 21

und in der UniAW.js:
sunorange_layer=1;
sunrayorange_layer=1;
if(pTranslate <= 45) {
sun_layer = pTranslate * .022;
sunray_layer = pTranslate * .022;
document.getElementById("sunorange").style.opacity=" "+sunorange_layer+" " ;
document.getElementById("sunrayorange").style.opacity=" "+sunrayorange_layer+" " ;

}
else if(pTranslate > 45 && pTranslate < 285) {
document.getElementById("sunorange").style.opacity="0";
document.getElementById("sunrayorange").style.opacity="0";

}
else {
sun_layer = (320 - pTranslate) * .028;
document.getElementById("sunorange").style.opacity=" "+sunorange_layer+" " ;
document.getElementById("sunrayorange").style.opacity=" "+sunrayorange_layer+" " ;
}
document.getElementById("sunorange").style.webkitTransform = "translateX("+pTranslate+"px)";
document.getElementById("sun").style.webkitTransform = "translateX("+pTranslate+"px)";
document.getElementById("sunrayorange").style.webkitTransform = "translateX("+pTranslate+"px)";
document.getElementById("sunray").style.webkitTransform = "translateX("+pTranslate+"px)";
}

Ich möchte die sunorange und sunrayorange ausblenden und kurz vorm Ende wieder einblenden!!
Stimmt das so??

Hier mal meine Korrektur.
Du möchtest ja "orange" langsam ausblenden.

Zitat:UniAW.css
#sunorange = 24
#sun = 22
#sunray = 21
#sunrayorange = 23

und in der UniAW.js:
sunorange_layer=0;
sunrayorange_layer=0;
if(pTranslate <= 45) {
sun_layer = 1 - pTranslate * .022;
sunray_layer = 1 - pTranslate * .022;
document.getElementById("sunorange").style.opacity=" "+sunorange_layer+" " ;
document.getElementById("sunrayorange").style.opacity=" "+sunrayorange_layer+" " ;

}
else if(pTranslate > 45 && pTranslate < 285) {
document.getElementById("sunorange").style.opacity="0";
document.getElementById("sunrayorange").style.opacity="0";

}
else {
sun_layer = 1 - (320 - pTranslate) * .028;
document.getElementById("sunorange").style.opacity=" "+sunorange_layer+" " ;
document.getElementById("sunrayorange").style.opacity=" "+sunrayorange_layer+" " ;
}
document.getElementById("sunorange").style.webkitTransform = "translateX("+pTranslate+"px)";
document.getElementById("sun").style.webkitTransform = "translateX("+pTranslate+"px)";
document.getElementById("sunrayorange").style.webkitTransform = "translateX("+pTranslate+"px)";
document.getElementById("sunray").style.webkitTransform = "translateX("+pTranslate+"px)";
}

Die html's hast Du auch geändert ??

---

(29.06.2013, 12:13)buck schrieb: [ -> ]Hallo
ihr seit so geil.
Wann können wir mal euer Werk begutachten?
mfg buck

Ich denke mal, wenn "Martins Iphone" mit seinem Theme fertig ist, wird er bestimmt einen download hier reinstellen.

Ist ja schließlich seine Idee mit dem animierten Sonnenauf/untergang gewesen.

Ich gebe ja nur ein wenig Hilfestellung