Habbo Landing View huge tutorial

[Emily]

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:

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 butt, but you can also style your own if you feel like it! So let's go over each and every one of them.

landing.view.background_left.uri

This is the image that displays at the bottom left side of the landing view.

landing.view.background_right.uri

This is the image that displays at the bottom right side of the landing view.

landing.view.background_gradient.uri & landing.view.background_gradient_top.uri

The landing view gradient, simply, the color scheme in a way.

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!)

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:

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:

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:

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:

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:

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:

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:

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.

landing.view.jul18music.conf

This tells what to display. In clean format, it'll look something like:

[
'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 ",").

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.

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:

(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.

 

[The General]

If you have questions about certain widgets just message me Navine I think I have a list of all widgets somewhere.

 

[Reservoir]

List of widgets?

 

[Emily]

List of widgets?

I haven't taken much time into it, but I will in these days release a list with usable widgets.

 

[harbihotel]

Any news on this?

 

[Emily]

Any news on this?

I haven't had time nor motivation to do any Habbo poop at all.

 

[KittyChloe]

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

You must be registered to see links

, pretty sick.

 

[Mysterio]

Late to the party, but just came across this and wanted to +1 for this detailed topic.

 

[paulh]

How can i change the color of dynamic news.