Habbo Landing View huge tutorial
So, because of how Habbo improved over the years, things got much more complicated. Where in the past you could change a simple image, the "hotel view" (nowadays known as the landing view) is much more complicated. However, today I finally found out the whole landing page and I'm here to show it with you.
Please keep in mind, this tutorial is written on PRODUCTION-201806111206-307916718, a fairly new SWF, so things COULD be different in your version!
Let's get started!
1. Changing the hotel view images & colors
So, ever wonder how to get the hotel view exactly like Habbo? There are a few variable entries for this:
PHP Code:
landing.view.background_gradient.uri=${image.library.url}reception/summer18_background_gradient.png
landing.view.background_gradient_top.uri=${image.library.url}reception/summer18_background_gradient.png
landing.view.background_hotel_top.uri=${image.library.url}reception/summer18_background_hotel_top.png
landing.view.background_left.uri=${image.library.url}reception/summer2018_background_left.png
landing.view.background_right.uri=${image.library.url}reception/habbo15_background_right.png
Those are the ones you need to modify. Of course getting the right images is kind of a pain in the ass, but you can also style your own if you feel like it! So let's go over each and every one of them.
PHP Code:
landing.view.background_left.uri
This is the image that displays at the bottom left side of the landing view.
PHP Code:
landing.view.background_right.uri
This is the image that displays at the bottom right side of the landing view.
PHP Code:
landing.view.background_gradient.uri & landing.view.background_gradient_top.uri
The landing view gradient, simply, the color scheme in a way.
PHP Code:
landing.view.background_hotel_top.uri
Not sure to be honest, maybe some colors for the top of the hotel (left/right image)?
So, simply change the images and the hotel view will change! Using these entries will allow you to have the same hotel view as Habbo does currently. I recommend putting it in your overrides to make editing much easier (same goes with the rest of this tutorial).
2. Changing the landing data
This is going to be the hardest part to explain. And not all research is done for this. So, we need a few variable entries (NOTE: this is from my external_variables and already edited!)
PHP Code:
landing.view.dynamic.slot.1.widget=bonusrare
landing.view.dynamic.slot.2.conf=
landing.view.dynamic.slot.2.layout=
landing.view.dynamic.slot.2.widget=promoarticle
landing.view.dynamic.slot.3.conf=2018-03-04 12:00,jul18music;2018-07-12 15:00,jul18ltd;2018-07-16 11:00,jul18summer
landing.view.dynamic.slot.3.layout=
landing.view.dynamic.slot.3.widget=
landing.view.dynamic.slot.4.conf=
landing.view.dynamic.slot.4.layout=
landing.view.dynamic.slot.4.separator=
landing.view.dynamic.slot.4.title=
landing.view.dynamic.slot.4.widget=
landing.view.dynamic.slot.5.conf=
landing.view.dynamic.slot.5.layout=
landing.view.dynamic.slot.5.separator=
landing.view.dynamic.slot.5.title=
landing.view.dynamic.slot.5.widget=
landing.view.dynamic.slot.6.conf=2013-05-08 13:00,gamesmaker;2013-05-11 13:00
landing.view.dynamic.slot.6.widget=achievementcompetition_hall_of_fame
Each part of the landing view is assigned to a slot. The slot determines the placement of the various "elements". Using the current configuration, it'll result in the landing view looking like this:
https://i.imgur.com/TDTjIIj.png
Now, I'll switch the "bonusrare" and the "promoarticle" around so that bonusrare is the widget of slot 2 and the promoarticle is the widget of slot 1. Now it'll result in the landing view looking like this:
https://i.imgur.com/uOtQDId.png
See how my promoarticles are now at the top instead of the bonus rare? For future images, I DID change this back. Okay, this is cool to know, but our landing is really empty right now.
Now, you cannot simply add some data by a packet and pray it works. The way it works, is as following:
First, the dynamic slots say which widgets are placed where, and what the data of those widgets is (the "conf". Also, this is the complete data the client sends to the server in the HotelViewData packet).
Now, I changed slot 3 in this:
PHP Code:
landing.view.dynamic.slot.3.conf=2018-03-04 12:00,jul18music;2018-07-12 15:00,jul18ltd;2018-07-16 11:00,jul18summer
landing.view.dynamic.slot.3.layout=
landing.view.dynamic.slot.3.widget=widgetcontainer
What this does is, it will change slot 3 into a widgetcontainer (this is the most basic widget which can contain a lot of data). It will also make the client send the value that is in the ".conf" to the server. This way, in the server you can handle which conf value to exactly use (for example, "jul18music" displays something else than "jul18ltd").
Simply, when I receive the HotelViewData packet from the client, I handle it as following:
PHP Code:
public async Task Run(Session session, Request request)
{
Response response = new Response(ResponseHeaders.HotelViewData);
string first = request.ReadString();
if (string.IsNullOrEmpty(first)) //Initialize it.
{
response.WriteString("");
response.WriteString("");
await session.SendResponse(response);
return;
}
string value = first.Split(',')[1];
ConsoleLogger.Debug(value);
response.WriteString(first);
response.WriteString(value.Split(';')[0]); // <-- this is jul18music, also the KEY for future references
await session.SendResponse(response);
}
This will result in the client putting "jul18music" as the first widget.
Now, if I go to the hotel now, it'll result in the landing view looking like this:
https://i.imgur.com/TDTjIIj.png
Now, simply putting something in there WON'T work. The client doesn't know WHAT to display EXACTLY. It doesn't know what "jul18music" is. This is where all the huge landing view variables come into place.
You need a few entries for "jul18music", which is in the following format:
PHP Code:
landing.view.KEY.conf=CONF
landing.view.KEY.layout=LAYOUT/IMG
landing.view.KEY.widget=WIDGET_TYPE
In Habbo's case, the entries are as following:
PHP Code:
landing.view.jul18music.conf=caption,landing.view.jul18music.header;bodytext,landing.view.jul18music.body;catalogbutton,landing.view.jul18music.button,jul18music
landing.view.jul18music.layout=bitmap.uri,${image.library.url}web_promo_small/spromo_sum18_paloozapack.png;bitmap.x,50;bitmap.y,0;container.height,250
landing.view.jul18music.widget=generic
Because I sent "jul18music" in the hotel view data packet I send back to the client, it'll look for the "landing.view.jul18music.conf/layout/widget" entries, so whatever you send back, add those 3 entry formats and make sure you change "KEY" to the second string of the packet.
Let's go over those 3 entries.
PHP Code:
landing.view.jul18music.conf
This tells what to display. In clean format, it'll look something like:
PHP Code:
[
'caption' => 'landing.view.jul18music.header',
'bodytext' => landing.view.jul18music.body',
'catalogbutton' => 'landing.view.jul18music.button,jul18music'
]
The "caption" is basically the title, in this case it'll use flash_texts key "landing.view.jul18music.header"
The "bodytext" is the body texts key, in this case it'll use flash_texts key "landing.view.jul18music.body"
The catalogbutton displays a button which you can click on to open a catalogue page. In this case, for the text of the button it'll use flash_texts key "landing.view.jul18music.button", and when you click on it it'll go to the catalogue page "jul18music" (this is NOT the name the catalogue displays but the INDEX name (string above display name and below id in packet)
Keep in mind, it'll use the flash_texts, so do NOT put actual text in those values. Don't use the array as well, it was just to make it display it better. (the various keys are separated from each other using ";", the key and value of every key are separated from each other using ",").
PHP Code:
landing.view.jul18music.layout=bitmap.uri,${image.library.url}web_promo_small/spromo_sum18_paloozapack.png;bitmap.x,50;bitmap.y,0;container.height,250
This is the image it'll display. Now, I really don't want to go in depth of this as everything is pretty straight forward.
PHP Code:
landing.view.jul18music.widget=generic
No research done for this.
Now, if I add these entries, it'll result in the landing page looking like this:
https://i.imgur.com/RQLGEJs.png
(the slot probably isn't big enough for image and data).
Now, in the next part I want to go in depth about the multiple widgets you can use and how to get the promo articles back. All this research is 100% done by me and I'd appreciate it if you don't post it anywhere else (if you want to share this anywhere else, tell me and I'll post it myself).
Leave a like and comment if you don't understand a part or add me on discord: navv13#8055
Next part comes as soon as I've done some more research. Keep in mind, I do all research on my own without any other research, and I don't do research 24/7, so I can't say when the next part will be.
Re: Habbo Landing View huge tutorial
If you have questions about certain widgets just message me @Navine I think I have a list of all widgets somewhere.
Re: Habbo Landing View huge tutorial
Re: Habbo Landing View huge tutorial
Quote:
Originally Posted by
Reservoir
List of widgets?
I haven't taken much time into it, but I will in these days release a list with usable widgets.
Re: Habbo Landing View huge tutorial
Re: Habbo Landing View huge tutorial
Quote:
Originally Posted by
harbihotel
Any news on this?
I haven't had time nor motivation to do any Habbo shit at all.
Re: Habbo Landing View huge tutorial
Thanks for the breakdown, got handy for me and spared me some hours.
oh and: TIL that like 9/10 of the external variables are landing view promo variables, pretty sick.
Re: Habbo Landing View huge tutorial
Late to the party, but just came across this and wanted to +1 for this detailed topic.
Re: Habbo Landing View huge tutorial
How can i change the color of dynamic news.
