mQuery - keeping things simple

Talk about ManiaLink development in this forum

Moderator: NADEO

zocka
Posts: 205
Joined: 15 Jun 2010, 17:56

mQuery - keeping things simple

Post by zocka »

Hey everyone,

I want to share my latest project regarding Manialink development, I already introduced in the german mania-community blog.

While I originally didn't had the intention to create something like it is now, mQuery became a framework primarily handling ManiaScript on your Manialinks.

mQuery now is a framework to help you with the little things. Since the most Manialinks don't use excessive amounts of ManiaScript for humble purposes, I wanted to make (my) process of Manialink creating a bit more easy with that.

Since I already wrote quite a lot about the usage and functions on GitHub, I recommend having a look at the Wiki there. To make it interesting for you though, I'll give you a few examples here:

Code: Select all

$("#myElement, .theseElements:gt(2)").click(function(){
  log($this.ControlId);
});
This very basic example looks for a mouseclick on an element with ControlId "myElement" or on every occurence of an element with the class "theseElements" from the 3rd occurence on. Then it will log it's id. For example when there are similar things to do for each matched element with some minor differences, it can be switch-cased in there.

Code: Select all

$(".naviIcon").hover(function(){
  $this.Scale = 1.2;
  $this.PosnY += 2;
}, function(){
  $this.Scale = 1.0;
  $this.PosnY -= 2;
});
Let's say, you have multiple icons represting a horizontal navigation. Each element has "naviIcon" as class. The mQuery code above will now create mouseover und mouseout events to make an icon bigger and shift it up when you move your mouse over it and will reset on leaving the element.

On the project's manialink (which is completely organized with mQuery of course) I have linked some demos where you can also have a look on the code.
[maniaplanet]mQuery?demo=mqUiElements[/maniaplanet] shows something, I like mQuery very much for:

Code: Select all

$("#myEntry").ui_checkbox();
// This creates a checkbox with different looks for each state, you can use it in a form or get the value with ManiaScript
And this is just one example about how you basic usage of ManiaScript is made incredibly simple!

At last a minor interesting thing: Since you can't directly style the checkbox looks (to stick to that example) since they are generated automatically, css-like code can be used to style elements of your Manialink. For example the whole project's Manialink uses things like

Code: Select all

label {
  textcolor: 333;
}
.naviLink {
  textprefix: $i$o;
  scale: 1.2;
}
In the end, all labels have textcolor="333" (if there are no different rules somewhere else) and the labels with class "naviLink" also have the textprefix="$i$o" and the defined scale. With that I can avoid spaming these attributes in every label and my code stays relatively clean.

Since everything is auto-generated it might be quite a mess in some places, but I haven't stoped my work on this project. Because of that there are some bugs remaining and I won't guarantee that everything should work.


Anyway I would be interested in some opinions and maybe some testing experiences.
manialink minigame shatter
my manialink: zockaml
my maniaflash: maniaflash?zocka
User avatar
spaii
Posts: 1075
Joined: 19 Jun 2010, 00:04
Location: Rémy - France
Contact:

Re: mQuery - keeping things simple

Post by spaii »

Woaw, great :thumbsup:
The_Big_Boo
Posts: 1026
Joined: 15 Jun 2010, 15:46

Re: mQuery - keeping things simple

Post by The_Big_Boo »

I had a quick look and it seems you did a great amount of work. The idea to take the same syntax as jQuery is cool and useful for people who are already comfortable with it. The CSS-like part is also nice to avoid repetitive tasks.

However, imho, there are some flaws and I'm really wondering about overall performances.
- Parsing a script on the fly needs an optimized interpreter/compiler and not so many languages allow this. PHP, which is already interpreted is not a good solution.
- You're doing things on the server side that prevent caching, which would be really useful here. The maniascript will be a bit more optimized (as you're doing part of its job) but the befenits don't worth the drawbacks, especially with lots of hits on your pages.
- As people are often already using PHP to generate the manialink itself, it leads to a bad workflow of "build, unbuild, rebuild" instead of only "build".

Anyway, as I said, there are some very good ideas so I really don't want to discourage you. Keep up the good work!
OS: Win 7 Pro x64
RAM: 2x4GB Corsair @ 1600MHz
CPU: Intel i5 760 @ 3.6GHz
Mobo: Asus P7P55D-E
GPU: NVidia GTX 760 2GB
HDD: WD Black 1TB
Sound: VIA VT1828S (onboard)
Peripherals: Razer DeathAdder - Razer DeathStalker - Logitech F310
zocka
Posts: 205
Joined: 15 Jun 2010, 17:56

Re: mQuery - keeping things simple

Post by zocka »

I'm aware of the problems you mentioned and already thought about some kind of "compiler" in a different language as well. However I see some problem with prebuilt or cached manialinks in some cases. The mQuery manialink is close to completely static, I could save the generated code in a xml file and output this, but as soon as the framework interferes with dynamic contents (dynamic amounts of matched elements etc.) I see not many possiblities for caching - caching the final product partwise is something I can't achieve by now :(
The problem with the workflow is not that drastic imo. Since the mQuery selectors and the whole concept is based on manipulating the DOM, it's the easiest way to use the final structure and edit this instead of going into that somewhere on the fly. Which would require using the framework for pretty much the whole building process. This was not my original intention.
manialink minigame shatter
my manialink: zockaml
my maniaflash: maniaflash?zocka
User avatar
Nerpson
Translator
Translator
Posts: 1554
Joined: 27 Sep 2013, 18:02
Location: France
Contact:

Re: mQuery - keeping things simple

Post by Nerpson »

Hey.

Does this tool still working?
I wanted to use it but I encountered some issues.
When I wanted to write a CSS file for my page, it didn't apply. When I write some mQuery code, it shows me compilation errors (that are never hiding even if there is not longer any line of mQuery code).

Have a nice day.
ImageImageImageImage
zocka
Posts: 205
Joined: 15 Jun 2010, 17:56

Re: mQuery - keeping things simple

Post by zocka »

I just downloaded a fresh version from GitHub and tested the checkbox function as an easy demo and it worked.

Code: Select all

<?xml version="1.0" encoding="UTF-8"?>
<manialink version="2">
    <style href="inc/styles/mq_ui.css" />
    <entry name="myCheckbox" id="myCheckbox" posn="0 0 0" />
    <mquery>
        $("#myCheckbox").ui_checkbox();
    </mquery>
</manialink>
Note: Since the framework creates all script-tags on it's own don't interfere with that!
(https://github.com/PRGfx/mQuery/wiki/mQuery-Code)
You can not write your own script tags unfortunately, if that was the case with your problem. You would have to write these in $.body(), $.main() or $.loop().
Including third person libraries is not that easy as well :(

As for the css, I have to admit a lack of documentation. It should accept all control attributes, things like "text" expect values without surrounding quotes.
Worked for me when I just tried, code below:

Code: Select all

label {
	textcolor: #09f;
	textsize: 8;
	rot: 40;
	text: test;
}
As for now (and for me) the system works, but as mentioned before, it lacks performance, got a bit outdated as ManiaScript became better (almost all functions in my TextExt lib weren't included in the TextLib at that time :D ) and might be kind of a mess to convert back to pure ManiaScript if you decide to do so.

The idea with anonymous callbacks and generated manialink controls are indeed quite neat, but as time went on, I came to accept the pure version as it is :D

I hope this will help you a bit to solve your problem or get to another solution :thumbsup:
manialink minigame shatter
my manialink: zockaml
my maniaflash: maniaflash?zocka
User avatar
Nerpson
Translator
Translator
Posts: 1554
Joined: 27 Sep 2013, 18:02
Location: France
Contact:

Re: mQuery - keeping things simple

Post by Nerpson »

I still have some troubles.

Here's my manialink page:

Code: Select all

<manialink version="2" background="0">

	
	<quad id="background" posn="0 0 0" sizen="320 180" bgcolor="FFFA" image="http://127.0.0.1/Nerpson/inc/img/bg.png" halign="center" valign="center" opacity="0.9"/>
	<quad posn="0 0 -1" sizen="320 180" bgcolor="FFFA" style="Bgs1" substyle="BgDialogBlur" halign="center" valign="center" opacity="0"/>

	<frame id="header" posn="-100 60">
		<quad posn="0 0 1" sizen="100 40" bgcolor="FFFA" image="http://127.0.0.1/Nerpson/inc/img/pseudo.png" halign="center" valign="center"/>
		<frame id="nav" posn="80">
			<label class="lol" posn="0 0 0" sizen="80 40" text="Home" valign="center2" style="TextButtonMedium" textsize="5" halign="center" scriptevents="1"/>
			<label posn="50 0 0" sizen="80 40" text="Videos" valign="center2" style="TextButtonMedium" textsize="5" halign="center" scriptevents="1"/>
			<label posn="100 0 0" sizen="80 40" text="Images" valign="center2" style="TextButtonMedium" textsize="5" halign="center" scriptevents="1"/>
			<label posn="150 0 0" sizen="80 40" text="Contact" valign="center2" style="TextButtonMedium" textsize="5" halign="center" scriptevents="1"/>
		</frame>
	</frame>

	<frame id="content" posn="0 -22">
		<quad posn="0 0 0" sizen="250 150" bgcolor="FFFA" valign="center" halign="center" style="Bgs1" substyle="BgWindow4" opacity="0.1"/>
		<label posn="-80 69 0" sizen="40 10" text="NEWS" style="TextButtonBig" textsize="10" halign="center" valign="center2"/>
		<frame posn="0 55">
			<frame posn="-115 0" class="article">
				<quad posn="115 -10 0" sizen="240 35" bgcolor="FFFA" valign="center" halign="center" style="Bgs1" substyle="BgWindow4" opacity="0.1"/>
				<label posn="0 0 0" sizen="230 10" text="FindMe : Powerful search engine by Domino54" style="TextButtonBig" valign="center2" halign="left" textsize="4"/>
				<label posn="0 -5 0" sizen="230 20" text="Lorem ipsum Culpa et Duis consectetur ut id nisi minim amet aliquip nulla sed esse dolore Duis mollit aute sed exercitation proident est. Lorem ipsum Culpa et Duis consectetur ut id nisi minim amet aliquip nulla sed esse dolore Duis mollit aute sed exercitation proident est. Lorem ipsum Culpa et Duis consectetur ut id nisi minim amet aliquip nulla sed esse dolore Duis mollit aute sed exercitation proident est." autonewline="1"/>
			</frame>
			<frame posn="-115 -45" class="article">
				<quad posn="115 -10 0" sizen="240 35" bgcolor="FFFA" valign="center" halign="center" style="Bgs1" substyle="BgWindow4" opacity="0.1"/>
				<label posn="0 0 0" sizen="230 10" text="Amazing video by Purification" style="TextButtonBig" valign="center2" halign="left" textsize="4"/>
				<label posn="0 -5 0" sizen="230 20" text="Lorem ipsum Culpa et Duis consectetur ut id nisi minim amet aliquip nulla sed esse dolore Duis mollit aute sed exercitation proident est. Lorem ipsum Culpa et Duis consectetur ut id nisi minim amet aliquip nulla sed esse dolore Duis mollit aute sed exercitation proident est. Lorem ipsum Culpa et Duis consectetur ut id nisi minim amet aliquip nulla sed esse dolore Duis mollit aute sed exercitation proident est." autonewline="1"/>
			</frame>
			<frame posn="-115 -90" class="article">
				<quad posn="115 -10 0" sizen="240 35" bgcolor="FFFA" valign="center" halign="center" style="Bgs1" substyle="BgWindow4" opacity="0.1"/>
				<label posn="0 0 0" sizen="230 10" text="New video : Together" style="TextButtonBig" valign="center2" halign="left" textsize="4"/>
				<label posn="0 -5 0" sizen="230 20" text="Lorem ipsum Culpa et Duis consectetur ut id nisi minim amet aliquip nulla sed esse dolore Duis mollit aute sed exercitation proident est. Lorem ipsum Culpa et Duis consectetur ut id nisi minim amet aliquip nulla sed esse dolore Duis mollit aute sed exercitation proident est. Lorem ipsum Culpa et Duis consectetur ut id nisi minim amet aliquip nulla sed esse dolore Duis mollit aute sed exercitation proident est." autonewline="1"/>
			</frame>
		</frame>
	</frame>
	<label posn="143 -85 0" sizen="30 10" text="#JeSuisCharlie" valign="center2" halign="center" opacity="0.5"/>
</manialink>
This code gives that:
Click here for the image

When I add some mQuery code, it messes the concerned element.

Code: Select all

<mquery>
		global var header = $("#header");
		$("#header").hover(function(){
			header.Show();
		}, function(){
			header.Hide();
		});
	</mquery>
With the mQuery code, this is the result:
Click here for the image
ImageImageImageImage
zocka
Posts: 205
Joined: 15 Jun 2010, 17:56

Re: mQuery - keeping things simple

Post by zocka »

Oh I see the problem, it's connected to accessing frame elements with mQuery and is based on my shitty DOM parsing.

Hover would not work on frames anyway since frames don't have (did not have until the clipping thingy) a size, so just make a transparent quad as bounding box or something like that ;) Actually you would never need to call a mQuery function on a frame, your part with the variable assignment works as it is ;)

You might want to have a look at something like that: https://github.com/PRGfx/mQscripts/blob ... t.txt#L357
Since you trigger a mouseout event on the boundingbox when you hover for example a link over the area, you should check, if you are still on the bounding box, in case you are going for something like

Code: Select all

container
   boundingbox(hover=navi.Show(),navi.Hide())
   navi
      navi-element

I hope the last thing was not too confusing :D
manialink minigame shatter
my manialink: zockaml
my maniaflash: maniaflash?zocka
User avatar
Nerpson
Translator
Translator
Posts: 1554
Joined: 27 Sep 2013, 18:02
Location: France
Contact:

Re: mQuery - keeping things simple

Post by Nerpson »

OK. :)

I have another question : Where can I get a list of all accessible variables?

You wrote this here

Code: Select all

$(".clickable").mouseover(function(){
    $this.PosnX -= 10;
}).click(function(){
    $this.PosnX = 50.;
    log("Position reset.");
});
Here there are PosnX and PosnY, but I can't fin others variables like SizenX, SizenY or Scale, etc.
ImageImageImageImage
zocka
Posts: 205
Joined: 15 Jun 2010, 17:56

Re: mQuery - keeping things simple

Post by zocka »

There are some pages hosting the latest ManiaScript documentation.

FYI: PosnX logs the warning, that it is deprecated now (another outdated thing in my work :( )
Instead of the code from my example it would now be

Code: Select all

$this.RelativePosition[0] -= 10.;
manialink minigame shatter
my manialink: zockaml
my maniaflash: maniaflash?zocka
Post Reply

Return to “ManiaLink”

Who is online

Users browsing this forum: No registered users and 0 guests