HUD: Rewrite chapter
This commit is contained in:
rubenwardy
GitHub
parent
426ee5bd3f
commit
ca85ccf13c
@ -10,106 +10,283 @@ Heads Up Display (HUD) elements allow you to show text, images, and other graphi
|
||||
|
||||
The HUD doesn't accept user input. For that, you should use a [Formspec](formspecs.html).
|
||||
|
||||
* [Basic Interface](#basic-interface)
|
||||
* [Positioning](#positioning)
|
||||
* [Position and Offset](#position-and-offset)
|
||||
* [Alignment](#alignment)
|
||||
* [Scoreboard](#scoreboard)
|
||||
* [Text Elements](#text-elements)
|
||||
* [Parameters](#parameters)
|
||||
* [Our Example](#our-example)
|
||||
* [Image Elements](#image-elements)
|
||||
* [Parameters](#parameters-1)
|
||||
* [Scale](#scale)
|
||||
* [Changing an Element](#changing-an-element)
|
||||
* [Storing IDs](#storing-ids)
|
||||
* [Other Elements](#other-elements)
|
||||
|
||||
## Basic Interface
|
||||
|
||||
HUD elements are created using a player object.
|
||||
You can get the player object from a username:
|
||||
|
||||
{% highlight lua %}
|
||||
local player = minetest.get_player_by_name("username")
|
||||
{% endhighlight %}
|
||||
|
||||
Once you have the player object, you can create a HUD element:
|
||||
|
||||
{% highlight lua %}
|
||||
local idx = player:hud_add({
|
||||
hud_elem_type = "text",
|
||||
position = {x = 1, y = 0},
|
||||
offset = {x=-100, y = 20},
|
||||
scale = {x = 100, y = 100},
|
||||
text = "My Text"
|
||||
})
|
||||
{% endhighlight %}
|
||||
|
||||
The attributes in the HUD element table and what they do vary depending on
|
||||
the `hud_elem_type`.\\
|
||||
The `hud_add` function returns a number which is needed to identify the HUD element
|
||||
if you wanted to change or delete it.
|
||||
|
||||
You can change an attribute after creating a HUD element. For example, you can change
|
||||
the text:
|
||||
|
||||
{% highlight lua %}
|
||||
player:hud_change(idx, "text", "New Text")
|
||||
{% endhighlight %}
|
||||
|
||||
You can also delete the element:
|
||||
|
||||
{% highlight lua %}
|
||||
player:hud_remove(idx)
|
||||
{% endhighlight %}
|
||||
|
||||
## Positioning
|
||||
|
||||
Screens come in different sizes, and HUD elements need to work well on all screens.
|
||||
You locate an element using a combination of a position and an offset.
|
||||
### Position and Offset
|
||||
|
||||
The position is a co-ordinate between (0, 0) and (1, 1) which determines where,
|
||||
relative to the screen width and height, the element is located.
|
||||
For example, an element with a position of (0.5, 0.5) will be in the center of the screen.
|
||||
<figure class="right_image">
|
||||
<img
|
||||
width="300"
|
||||
src="{{ page.root }}/static/hud_diagram_center.svg"
|
||||
alt="Diagram showing a centered text element">
|
||||
</figure>
|
||||
|
||||
The offset applies a pixel offset to the position.\\
|
||||
For example, an element with a position of (0, 0) and an offset of (10, 10) will be at the screen
|
||||
co-ordinates (0 * width + 10, 0 * height + 10).
|
||||
Screens come in a variety of different physical sizes and resolutions, and
|
||||
the HUD needs to work well on all screen types.
|
||||
|
||||
Please note that offset scales to DPI and a user defined factor.
|
||||
Minetest's solution to this is to specify the location of an element using both
|
||||
a percentage position and an offset.
|
||||
The percentage position is relative to the screen size, so to place an element
|
||||
in the center of the screen you would need to provide a percentage position of half
|
||||
the screen, eg (50%, 50%), and an offset of (0, 0).
|
||||
|
||||
The offset is then used to move an element relative to the percentage position.
|
||||
|
||||
<div style="clear:both;"></div>
|
||||
|
||||
### Alignment
|
||||
|
||||
Alignment is where the result of position and offset is on the element -
|
||||
for example, `{x = -1.0, y = 0.0}` will make the result of position and offset point
|
||||
to the left of the element's bounds. This is particularly useful when you want to
|
||||
make a text element left, center, or right justified.
|
||||
|
||||
<figure>
|
||||
<img
|
||||
width="500"
|
||||
src="{{ page.root }}/static/hud_diagram_alignment.svg"
|
||||
alt="Diagram showing alignment">
|
||||
</figure>
|
||||
|
||||
The above diagram shows 3 windows (blue), each with a single HUD element (yellow)
|
||||
with a different alignment each time. The arrow is the result of the position
|
||||
and offset calculation.
|
||||
|
||||
### Scoreboard
|
||||
|
||||
For the purposes of this chapter, you will learn how to position and update a
|
||||
score panel like so:
|
||||
|
||||
<figure>
|
||||
<img
|
||||
src="{{ page.root }}/static/hud_final.png"
|
||||
alt="screenshot of the HUD we're aiming for">
|
||||
</figure>
|
||||
|
||||
In the above screenshot all of the elements have the same percentage position -
|
||||
(100%, 50%) - but different offsets. This allows the whole thing to be anchored
|
||||
to the right of the window, but to resize without breaking.
|
||||
|
||||
## Text Elements
|
||||
|
||||
A text element is the simplest type of HUD element.\\
|
||||
Here is the earlier example, but with comments to explain each part:
|
||||
You can create a hud element once you have a copy of the player object:
|
||||
|
||||
{% highlight lua %}
|
||||
local player = minetest.get_player_by_name("username")
|
||||
local idx = player:hud_add({
|
||||
hud_elem_type = "text", -- This is a text element
|
||||
position = {x = 1, y = 0},
|
||||
offset = {x=-100, y = 20},
|
||||
scale = {x = 100, y = 100}, -- Maximum size of text, text outside these bounds is cropped
|
||||
text = "My Text" -- The actual text shown
|
||||
hud_elem_type = "text",
|
||||
position = {x = 0.5, y = 0.5},
|
||||
offset = {x = 0, y = 0},
|
||||
text = "Hello world!",
|
||||
alignment = {x = 0, y = 0}, -- center aligned
|
||||
scale = {x = 100, y = 100}, -- covered later
|
||||
})
|
||||
{% endhighlight %}
|
||||
|
||||
### Colors
|
||||
The `hud_add` function returns an element ID - this can be used later to modify
|
||||
or remove a HUD element.
|
||||
|
||||
Use the `number` attribute to apply colors to the text.
|
||||
Colors are in [Hexadecimal form](http://www.colorpicker.com/).
|
||||
For example:
|
||||
### Parameters
|
||||
|
||||
The element's type is given using the `hud_elem_type` property in the definition
|
||||
table. The meaning of other properties varies based on this type.
|
||||
|
||||
`scale` is the maximum bounds of text, text outside these bounds is cropped, eg: `{x=100, y=100}`.
|
||||
|
||||
The text's color in [Hexadecimal form](http://www.colorpicker.com/), eg: `0xFF0000`,
|
||||
and stored in
|
||||
|
||||
|
||||
### Our Example
|
||||
|
||||
Let's go ahead, and place all of the text in our score panel:
|
||||
|
||||
{% highlight lua %}
|
||||
local idx = player:hud_add({
|
||||
player:hud_add({
|
||||
hud_elem_type = "text",
|
||||
position = {x = 1, y = 0},
|
||||
offset = {x=-100, y = 20},
|
||||
scale = {x = 100, y = 100},
|
||||
text = "My Text",
|
||||
number = 0xFF0000 -- Red
|
||||
position = {x = 1, y = 0.5},
|
||||
offset = {x = -120, y = -25},
|
||||
text = "Stats",
|
||||
alignment = 0,
|
||||
scale = { x = 100, y = 30},
|
||||
number = 0xFFFFFF,
|
||||
})
|
||||
|
||||
-- Get the dig and place count from storage, or default to 0
|
||||
local digs = tonumber(player:get_attribute("scoreboard:digs") or 0)
|
||||
local digs_text = "Digs: " .. digs
|
||||
local places = tonumber(player:get_attribute("scoreboard:digs") or 0)
|
||||
local places_text = "Places: " .. places
|
||||
|
||||
player:hud_add({
|
||||
hud_elem_type = "text",
|
||||
position = {x = 1, y = 0.5},
|
||||
offset = {x = -180, y = 0},
|
||||
text = digs_text,
|
||||
alignment = -1,
|
||||
scale = { x = 50, y = 10},
|
||||
number = 0xFFFFFF,
|
||||
})
|
||||
|
||||
player:hud_add({
|
||||
hud_elem_type = "text",
|
||||
position = {x = 1, y = 0.5},
|
||||
offset = {x = -70, y = 0},
|
||||
text = places_text,
|
||||
alignment = -1,
|
||||
scale = { x = 50, y = 10},
|
||||
number = 0xFFFFFF,
|
||||
})
|
||||
{% endhighlight %}
|
||||
|
||||
This results in the following:
|
||||
|
||||
<figure>
|
||||
<img
|
||||
src="{{ page.root }}/static/hud_text.png"
|
||||
alt="screenshot of the HUD we're aiming for">
|
||||
</figure>
|
||||
|
||||
|
||||
## Image Elements
|
||||
|
||||
Image elements display an image on the HUD.
|
||||
Image elements are created in a very similar way to text elements:
|
||||
|
||||
The X co-ordinate of the `scale` attribute is the scale of the image, with 1 being the original texture size.
|
||||
Negative values represent the percentage of the screen the image should use. For example, x=-100 means 100% (width).
|
||||
{% highlight lua %}
|
||||
player:hud_add({
|
||||
hud_elem_type = "image",
|
||||
position = {x = 1, y = 0.5},
|
||||
offset = {x = -220, y = 0},
|
||||
text = "scoreboard_background.png",
|
||||
scale = { x = 1, y = 1},
|
||||
alignment = { x = 1, y = 0 },
|
||||
})
|
||||
{% endhighlight %}
|
||||
|
||||
You will now have this:
|
||||
|
||||
<figure>
|
||||
<img
|
||||
src="{{ page.root }}/static/hud_background_img.png"
|
||||
alt="screenshot of the HUD so far">
|
||||
</figure>
|
||||
|
||||
### Parameters
|
||||
|
||||
The `text` field is used to provide the image name.
|
||||
|
||||
If a co-ordinate is positive, then it is a scale factor with 1 being the
|
||||
original image size, and 2 being double the size, and so on.
|
||||
However, if a co-ordinate is negative it is a percentage of the screensize.
|
||||
For example, `x=-100` is 100% of the width.
|
||||
|
||||
### Scale
|
||||
|
||||
Let's make the progress bar for our score panel as an example of scale:
|
||||
|
||||
{% highlight lua %}
|
||||
local percent = tonumber(player:get_attribute("scoreboard:score") or 0.2)
|
||||
|
||||
player:hud_add({
|
||||
hud_elem_type = "image",
|
||||
position = {x = 1, y = 0.5},
|
||||
offset = {x = -215, y = 23},
|
||||
text = "scoreboard_bar_empty.png",
|
||||
scale = { x = 1, y = 1},
|
||||
alignment = { x = 1, y = 0 },
|
||||
})
|
||||
|
||||
player:hud_add({
|
||||
hud_elem_type = "image",
|
||||
position = {x = 1, y = 0.5},
|
||||
offset = {x = -215, y = 23},
|
||||
text = "scoreboard_bar_full.png",
|
||||
scale = { x = percent, y = 1},
|
||||
alignment = { x = 1, y = 0 },
|
||||
})
|
||||
{% endhighlight %}
|
||||
|
||||
We now have a HUD that looks like the one in the first post! There is one problem however, it won't update when the stats change
|
||||
|
||||
## Changing an Element
|
||||
|
||||
You can use the ID returned by the hud_add method to update or remove it later.
|
||||
|
||||
{% highlight lua %}
|
||||
local idx = player:hud_add({
|
||||
hud_elem_type = "text",
|
||||
text = "Hello world!",
|
||||
-- parameters removed for brevity
|
||||
})
|
||||
|
||||
player:hud_change(idx, "text", "New Text")
|
||||
player:hud_remove(idx)
|
||||
{% endhighlight %}
|
||||
|
||||
The `hud_change` method takes the element ID, the property to change, and the new
|
||||
value. The above call changes the `text` property from "Hello World" to "Test".
|
||||
|
||||
This means that doing the `hud_change` immediately after the `hud_add` is
|
||||
functionally equivalent to the following, in a rather inefficient way:
|
||||
|
||||
{% highlight lua %}
|
||||
local idx = player:hud_add({
|
||||
hud_elem_type = "text",
|
||||
text = "New Text",
|
||||
})
|
||||
{% endhighlight %}
|
||||
|
||||
## Storing IDs
|
||||
|
||||
{% highlight lua %}
|
||||
scoreboard = {}
|
||||
local saved_huds = {}
|
||||
|
||||
function scoreboard.update_hud(player)
|
||||
local player_name = player:get_player_name()
|
||||
|
||||
local digs = tonumber(player:get_attribute("scoreboard:digs") or 0)
|
||||
local digs_text = "Digs: " .. digs
|
||||
local places = tonumber(player:get_attribute("scoreboard:digs") or 0)
|
||||
local places_text = "Places: " .. places
|
||||
|
||||
local percent = tonumber(player:get_attribute("scoreboard:score") or 0.2)
|
||||
|
||||
local ids = saved_huds[player_name]
|
||||
if ids then
|
||||
player:hud_change(ids["places"], "text", places_text)
|
||||
player:hud_change(ids["digs"], "text", digs_text)
|
||||
player:hud_change(ids["bar_foreground"],
|
||||
"scale", { x = percent, y = 1 })
|
||||
else
|
||||
ids = {}
|
||||
saved_huds[player_name] = ids
|
||||
|
||||
-- create HUD elements and set ids into `ids`
|
||||
end
|
||||
end
|
||||
|
||||
minetest.register_on_joinplayer(scoreboard.update_hud)
|
||||
|
||||
minetest.register_on_leaveplayer(function(player)
|
||||
saved_huds[player:get_player_name()] = nil
|
||||
end)
|
||||
{% endhighlight %}
|
||||
|
||||
Use `text` to specify the name of the texture.
|
||||
|
||||
## Other Elements
|
||||
|
||||
|
||||
BIN
static/hud_background_img.png
Normal file
BIN
static/hud_background_img.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.5 KiB |
436
static/hud_diagram_alignment.svg
Normal file
436
static/hud_diagram_alignment.svg
Normal file
@ -0,0 +1,436 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
width="175mm"
|
||||
height="50mm"
|
||||
viewBox="0 0 175 50"
|
||||
version="1.1"
|
||||
id="svg8"
|
||||
inkscape:version="0.92.1 r15371"
|
||||
sodipodi:docname="hud_diagram_alignment.svg">
|
||||
<defs
|
||||
id="defs2">
|
||||
<marker
|
||||
inkscape:isstock="true"
|
||||
style="overflow:visible"
|
||||
id="marker7113"
|
||||
refX="0"
|
||||
refY="0"
|
||||
orient="auto"
|
||||
inkscape:stockid="Arrow1Lend">
|
||||
<path
|
||||
inkscape:connector-curvature="0"
|
||||
transform="matrix(-0.8,0,0,-0.8,-10,0)"
|
||||
style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1.00000003pt;stroke-opacity:1"
|
||||
d="M 0,0 5,-5 -12.5,0 5,5 Z"
|
||||
id="path7111" />
|
||||
</marker>
|
||||
<marker
|
||||
inkscape:stockid="Arrow1Lend"
|
||||
orient="auto"
|
||||
refY="0.0"
|
||||
refX="0.0"
|
||||
id="marker7067"
|
||||
style="overflow:visible;"
|
||||
inkscape:isstock="true">
|
||||
<path
|
||||
id="path7065"
|
||||
d="M 0.0,0.0 L 5.0,-5.0 L -12.5,0.0 L 5.0,5.0 L 0.0,0.0 z "
|
||||
style="fill-rule:evenodd;stroke:#000000;stroke-width:1pt;stroke-opacity:1;fill:#000000;fill-opacity:0"
|
||||
transform="scale(0.8) rotate(180) translate(12.5,0)" />
|
||||
</marker>
|
||||
<marker
|
||||
inkscape:isstock="true"
|
||||
style="overflow:visible"
|
||||
id="marker5486"
|
||||
refX="0"
|
||||
refY="0"
|
||||
orient="auto"
|
||||
inkscape:stockid="Arrow1Lend">
|
||||
<path
|
||||
transform="matrix(-0.8,0,0,-0.8,-10,0)"
|
||||
style="fill:#000000;fill-opacity:0;fill-rule:evenodd;stroke:#000000;stroke-width:1.00000003pt;stroke-opacity:1"
|
||||
d="M 0,0 5,-5 -12.5,0 5,5 Z"
|
||||
id="path5484"
|
||||
inkscape:connector-curvature="0" />
|
||||
</marker>
|
||||
<marker
|
||||
inkscape:isstock="true"
|
||||
style="overflow:visible"
|
||||
id="marker5421"
|
||||
refX="0"
|
||||
refY="0"
|
||||
orient="auto"
|
||||
inkscape:stockid="Arrow1Lend">
|
||||
<path
|
||||
transform="matrix(-0.8,0,0,-0.8,-10,0)"
|
||||
style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1.00000003pt;stroke-opacity:1"
|
||||
d="M 0,0 5,-5 -12.5,0 5,5 Z"
|
||||
id="path5419"
|
||||
inkscape:connector-curvature="0" />
|
||||
</marker>
|
||||
<marker
|
||||
inkscape:stockid="Arrow1Lend"
|
||||
orient="auto"
|
||||
refY="0"
|
||||
refX="0"
|
||||
id="Arrow1Lend"
|
||||
style="overflow:visible"
|
||||
inkscape:isstock="true"
|
||||
inkscape:collect="always">
|
||||
<path
|
||||
id="path4509"
|
||||
d="M 0,0 5,-5 -12.5,0 5,5 Z"
|
||||
style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1.00000003pt;stroke-opacity:1"
|
||||
transform="matrix(-0.8,0,0,-0.8,-10,0)"
|
||||
inkscape:connector-curvature="0" />
|
||||
</marker>
|
||||
</defs>
|
||||
<sodipodi:namedview
|
||||
id="base"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1.0"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:zoom="1.4"
|
||||
inkscape:cx="319.66048"
|
||||
inkscape:cy="-16.217462"
|
||||
inkscape:document-units="mm"
|
||||
inkscape:current-layer="layer1"
|
||||
showgrid="false"
|
||||
showguides="true"
|
||||
inkscape:guide-bbox="true"
|
||||
inkscape:window-width="1871"
|
||||
inkscape:window-height="1052"
|
||||
inkscape:window-x="1920"
|
||||
inkscape:window-y="0"
|
||||
inkscape:window-maximized="1">
|
||||
<sodipodi:guide
|
||||
position="68.224703,148.73363"
|
||||
orientation="0,1"
|
||||
id="guide5896"
|
||||
inkscape:locked="false" />
|
||||
<sodipodi:guide
|
||||
position="109.6131,138.52827"
|
||||
orientation="0,1"
|
||||
id="guide5898"
|
||||
inkscape:locked="false" />
|
||||
<sodipodi:guide
|
||||
position="88.921,143.01749"
|
||||
orientation="0,1"
|
||||
id="guide5900"
|
||||
inkscape:locked="false" />
|
||||
</sodipodi:namedview>
|
||||
<metadata
|
||||
id="metadata5">
|
||||
<rdf:RDF>
|
||||
<cc:Work
|
||||
rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
<dc:title></dc:title>
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<g
|
||||
inkscape:label="Layer 1"
|
||||
inkscape:groupmode="layer"
|
||||
id="layer1"
|
||||
transform="translate(0,-247)">
|
||||
<rect
|
||||
style="fill:#87ceeb;fill-opacity:1;stroke:#000000;stroke-width:0.88910496;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
id="rect4485"
|
||||
width="54.604465"
|
||||
height="34.004765"
|
||||
x="1.8019325"
|
||||
y="249.42618" />
|
||||
<rect
|
||||
style="fill:#ffff00;fill-opacity:1;stroke:#000000;stroke-width:0.91528624;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
id="rect4502"
|
||||
width="24.907154"
|
||||
height="9.5991192"
|
||||
x="29.407284"
|
||||
y="262.10141" />
|
||||
<path
|
||||
style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:0.23530653;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-end:url(#marker5421)"
|
||||
d="M 1.8879263,249.49678 29.097762,266.88394"
|
||||
id="path4504"
|
||||
inkscape:connector-curvature="0" />
|
||||
<rect
|
||||
y="249.42619"
|
||||
x="60.199261"
|
||||
height="34.004765"
|
||||
width="54.604465"
|
||||
id="rect5408"
|
||||
style="fill:#87ceeb;fill-opacity:1;stroke:#000000;stroke-width:0.88910496;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
|
||||
<rect
|
||||
y="261.77405"
|
||||
x="74.197479"
|
||||
height="9.5991192"
|
||||
width="24.907154"
|
||||
id="rect5410"
|
||||
style="fill:#ffff00;fill-opacity:1;stroke:#000000;stroke-width:0.91528624;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
|
||||
<path
|
||||
inkscape:connector-curvature="0"
|
||||
id="path5412"
|
||||
d="m 60.199262,249.42619 27.209835,17.38715"
|
||||
style="fill:none;fill-opacity:0;stroke:#000000;stroke-width:0.235;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-end:url(#marker7113)" />
|
||||
<rect
|
||||
style="fill:#87ceeb;fill-opacity:1;stroke:#000000;stroke-width:0.88910496;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
id="rect5456"
|
||||
width="54.604465"
|
||||
height="34.004765"
|
||||
x="118.67216"
|
||||
y="249.42619" />
|
||||
<rect
|
||||
style="fill:#ffff00;fill-opacity:1;stroke:#000000;stroke-width:0.91528624;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
id="rect5458"
|
||||
width="24.907154"
|
||||
height="9.5991192"
|
||||
x="120.42397"
|
||||
y="261.96912" />
|
||||
<path
|
||||
style="fill:none;stroke:#000000;stroke-width:0.23530653;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-end:url(#Arrow1Lend)"
|
||||
d="m 118.67218,249.42619 27.20984,17.38715"
|
||||
id="path5460"
|
||||
inkscape:connector-curvature="0" />
|
||||
<text
|
||||
xml:space="preserve"
|
||||
style="font-style:normal;font-weight:normal;font-size:10.58333302px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.26458332"
|
||||
x="15.82502"
|
||||
y="294.30679"
|
||||
id="text5957"><tspan
|
||||
sodipodi:role="line"
|
||||
x="15.82502"
|
||||
y="294.30679"
|
||||
id="tspan5955"
|
||||
style="stroke-width:0.26458332"><tspan
|
||||
x="15.82502"
|
||||
y="294.30679"
|
||||
id="tspan5951"
|
||||
style="stroke-width:0.26458332">-1, 0</tspan><tspan
|
||||
dx="0"
|
||||
x="39.864899"
|
||||
y="294.30679"
|
||||
id="tspan5953"
|
||||
style="stroke-width:0.26458332" /></tspan></text>
|
||||
<text
|
||||
xml:space="preserve"
|
||||
style="font-style:normal;font-weight:normal;font-size:10.58333302px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.26458332"
|
||||
x="76.4524"
|
||||
y="295.06274"
|
||||
id="text5965"><tspan
|
||||
sodipodi:role="line"
|
||||
x="76.4524"
|
||||
y="295.06274"
|
||||
id="tspan5963"
|
||||
style="stroke-width:0.26458332"><tspan
|
||||
x="76.4524"
|
||||
y="295.06274"
|
||||
id="tspan5959"
|
||||
style="stroke-width:0.26458332">0, 0</tspan><tspan
|
||||
dx="0"
|
||||
x="96.668221"
|
||||
y="295.06274"
|
||||
id="tspan5961"
|
||||
style="stroke-width:0.26458332" /></tspan></text>
|
||||
<text
|
||||
xml:space="preserve"
|
||||
style="font-style:normal;font-weight:normal;font-size:10.58333302px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.26458332"
|
||||
x="135.22772"
|
||||
y="294.68478"
|
||||
id="text5973"><tspan
|
||||
sodipodi:role="line"
|
||||
x="135.22772"
|
||||
y="294.68478"
|
||||
id="tspan5971"
|
||||
style="stroke-width:0.26458332"><tspan
|
||||
x="135.22772"
|
||||
y="294.68478"
|
||||
id="tspan5967"
|
||||
style="stroke-width:0.26458332">1, 0</tspan><tspan
|
||||
dx="0"
|
||||
x="155.44354"
|
||||
y="294.68478"
|
||||
id="tspan5969"
|
||||
style="stroke-width:0.26458332" /></tspan></text>
|
||||
<rect
|
||||
style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:0.07062794;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
id="rect1253"
|
||||
width="2.7703061"
|
||||
height="2.7703061"
|
||||
x="17.192215"
|
||||
y="279.10538" />
|
||||
<rect
|
||||
style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:0.07062794;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
id="rect1253-3"
|
||||
width="2.7703061"
|
||||
height="2.7703061"
|
||||
x="21.275724"
|
||||
y="279.10538" />
|
||||
<rect
|
||||
style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:0.07062794;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
id="rect1253-6"
|
||||
width="2.7703061"
|
||||
height="2.7703061"
|
||||
x="25.359228"
|
||||
y="279.10538" />
|
||||
<rect
|
||||
style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:0.07062794;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
id="rect1253-7"
|
||||
width="2.7703061"
|
||||
height="2.7703061"
|
||||
x="29.442732"
|
||||
y="279.10538" />
|
||||
<rect
|
||||
style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:0.07062794;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
id="rect1253-5"
|
||||
width="2.7703061"
|
||||
height="2.7703061"
|
||||
x="33.526234"
|
||||
y="279.10538" />
|
||||
<rect
|
||||
style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:0.07062794;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
id="rect1253-35"
|
||||
width="2.7703061"
|
||||
height="2.7703061"
|
||||
x="37.609734"
|
||||
y="279.10538" />
|
||||
<rect
|
||||
style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:0.07062794;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
id="rect1253-62"
|
||||
width="2.7703061"
|
||||
height="2.7703061"
|
||||
x="41.693245"
|
||||
y="279.10538" />
|
||||
<rect
|
||||
style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:0.07062794;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
id="rect1253-9"
|
||||
width="2.7703061"
|
||||
height="2.7703061"
|
||||
x="13.108707"
|
||||
y="279.10538" />
|
||||
<rect
|
||||
y="279.10538"
|
||||
x="74.833588"
|
||||
height="2.7703061"
|
||||
width="2.7703061"
|
||||
id="rect7193"
|
||||
style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:0.07062794;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
|
||||
<rect
|
||||
y="279.10538"
|
||||
x="78.917091"
|
||||
height="2.7703061"
|
||||
width="2.7703061"
|
||||
id="rect7195"
|
||||
style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:0.07062794;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
|
||||
<rect
|
||||
y="279.10538"
|
||||
x="83.000595"
|
||||
height="2.7703061"
|
||||
width="2.7703061"
|
||||
id="rect7197"
|
||||
style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:0.07062794;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
|
||||
<rect
|
||||
y="279.10538"
|
||||
x="87.084099"
|
||||
height="2.7703061"
|
||||
width="2.7703061"
|
||||
id="rect7199"
|
||||
style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:0.07062794;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
|
||||
<rect
|
||||
y="279.10538"
|
||||
x="91.167603"
|
||||
height="2.7703061"
|
||||
width="2.7703061"
|
||||
id="rect7201"
|
||||
style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:0.07062794;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
|
||||
<rect
|
||||
y="279.10538"
|
||||
x="95.251106"
|
||||
height="2.7703061"
|
||||
width="2.7703061"
|
||||
id="rect7203"
|
||||
style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:0.07062794;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
|
||||
<rect
|
||||
y="279.10538"
|
||||
x="99.334618"
|
||||
height="2.7703061"
|
||||
width="2.7703061"
|
||||
id="rect7205"
|
||||
style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:0.07062794;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
|
||||
<rect
|
||||
y="279.10538"
|
||||
x="70.750076"
|
||||
height="2.7703061"
|
||||
width="2.7703061"
|
||||
id="rect7207"
|
||||
style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:0.07062794;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
|
||||
<rect
|
||||
style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:0.07062794;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
id="rect7209"
|
||||
width="2.7703061"
|
||||
height="2.7703061"
|
||||
x="135.12079"
|
||||
y="278.91638" />
|
||||
<rect
|
||||
style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:0.07062794;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
id="rect7211"
|
||||
width="2.7703061"
|
||||
height="2.7703061"
|
||||
x="139.2043"
|
||||
y="278.91638" />
|
||||
<rect
|
||||
style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:0.07062794;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
id="rect7213"
|
||||
width="2.7703061"
|
||||
height="2.7703061"
|
||||
x="143.2878"
|
||||
y="278.91638" />
|
||||
<rect
|
||||
style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:0.07062794;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
id="rect7215"
|
||||
width="2.7703061"
|
||||
height="2.7703061"
|
||||
x="147.37131"
|
||||
y="278.91638" />
|
||||
<rect
|
||||
style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:0.07062794;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
id="rect7217"
|
||||
width="2.7703061"
|
||||
height="2.7703061"
|
||||
x="151.4548"
|
||||
y="278.91638" />
|
||||
<rect
|
||||
style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:0.07062794;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
id="rect7219"
|
||||
width="2.7703061"
|
||||
height="2.7703061"
|
||||
x="155.53831"
|
||||
y="278.91638" />
|
||||
<rect
|
||||
style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:0.07062794;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
id="rect7221"
|
||||
width="2.7703061"
|
||||
height="2.7703061"
|
||||
x="159.62183"
|
||||
y="278.91638" />
|
||||
<rect
|
||||
style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:0.07062794;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
id="rect7223"
|
||||
width="2.7703061"
|
||||
height="2.7703061"
|
||||
x="131.03728"
|
||||
y="278.91638" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 16 KiB |
205
static/hud_diagram_center.svg
Normal file
205
static/hud_diagram_center.svg
Normal file
@ -0,0 +1,205 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
width="210mm"
|
||||
height="210mm"
|
||||
viewBox="0 0 210 210"
|
||||
version="1.1"
|
||||
id="svg8"
|
||||
inkscape:version="0.92.1 r15371"
|
||||
sodipodi:docname="hud_diagram_center.svg">
|
||||
<defs
|
||||
id="defs2">
|
||||
<marker
|
||||
inkscape:isstock="true"
|
||||
style="overflow:visible;"
|
||||
id="marker1973"
|
||||
refX="0.0"
|
||||
refY="0.0"
|
||||
orient="auto"
|
||||
inkscape:stockid="Arrow1Lend">
|
||||
<path
|
||||
transform="scale(0.8) rotate(180) translate(12.5,0)"
|
||||
style="fill-rule:evenodd;stroke:#000000;stroke-width:1pt;stroke-opacity:1;fill:#000000;fill-opacity:1"
|
||||
d="M 0.0,0.0 L 5.0,-5.0 L -12.5,0.0 L 5.0,5.0 L 0.0,0.0 z "
|
||||
id="path1971" />
|
||||
</marker>
|
||||
<marker
|
||||
inkscape:stockid="Arrow1Lend"
|
||||
orient="auto"
|
||||
refY="0.0"
|
||||
refX="0.0"
|
||||
id="marker1127"
|
||||
style="overflow:visible;"
|
||||
inkscape:isstock="true">
|
||||
<path
|
||||
id="path1125"
|
||||
d="M 0.0,0.0 L 5.0,-5.0 L -12.5,0.0 L 5.0,5.0 L 0.0,0.0 z "
|
||||
style="fill-rule:evenodd;stroke:#000000;stroke-width:1pt;stroke-opacity:1;fill:#000000;fill-opacity:1"
|
||||
transform="scale(0.8) rotate(180) translate(12.5,0)" />
|
||||
</marker>
|
||||
<marker
|
||||
inkscape:stockid="Arrow1Lend"
|
||||
orient="auto"
|
||||
refY="0.0"
|
||||
refX="0.0"
|
||||
id="Arrow1Lend"
|
||||
style="overflow:visible;"
|
||||
inkscape:isstock="true"
|
||||
inkscape:collect="always">
|
||||
<path
|
||||
id="path834"
|
||||
d="M 0.0,0.0 L 5.0,-5.0 L -12.5,0.0 L 5.0,5.0 L 0.0,0.0 z "
|
||||
style="fill-rule:evenodd;stroke:#000000;stroke-width:1pt;stroke-opacity:1;fill:#000000;fill-opacity:1"
|
||||
transform="scale(0.8) rotate(180) translate(12.5,0)" />
|
||||
</marker>
|
||||
</defs>
|
||||
<sodipodi:namedview
|
||||
id="base"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1.0"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:zoom="0.49497475"
|
||||
inkscape:cx="-69.417631"
|
||||
inkscape:cy="512.02035"
|
||||
inkscape:document-units="mm"
|
||||
inkscape:current-layer="layer1"
|
||||
showgrid="false"
|
||||
inkscape:window-width="1871"
|
||||
inkscape:window-height="1052"
|
||||
inkscape:window-x="1920"
|
||||
inkscape:window-y="0"
|
||||
inkscape:window-maximized="1" />
|
||||
<metadata
|
||||
id="metadata5">
|
||||
<rdf:RDF>
|
||||
<cc:Work
|
||||
rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
<dc:title />
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<g
|
||||
inkscape:label="Layer 1"
|
||||
inkscape:groupmode="layer"
|
||||
id="layer1"
|
||||
transform="translate(0,-87)">
|
||||
<rect
|
||||
style="fill:#87ceeb;fill-opacity:1;stroke-width:1.565;stroke:#000000;stroke-opacity:1;stroke-miterlimit:4;stroke-dasharray:none"
|
||||
id="rect10"
|
||||
width="193.90178"
|
||||
height="193.90178"
|
||||
x="7.9374995"
|
||||
y="95.160721" />
|
||||
<text
|
||||
xml:space="preserve"
|
||||
style="font-style:normal;font-weight:normal;font-size:10.58333302px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.26458332"
|
||||
x="73.873444"
|
||||
y="199.0827"
|
||||
id="text2080"><tspan
|
||||
sodipodi:role="line"
|
||||
x="73.873444"
|
||||
y="199.0827"
|
||||
id="tspan2078"
|
||||
style="stroke-width:0.26458332"><tspan
|
||||
x="73.873444"
|
||||
y="199.0827"
|
||||
id="tspan2076"
|
||||
style="stroke-width:0.26458332">Hello world!</tspan></tspan></text>
|
||||
<path
|
||||
style="fill:none;stroke:#000000;stroke-width:1.06500006;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-end:url(#Arrow1Lend)"
|
||||
d="M 7.9374994,95.160721 100.5719,189.52965"
|
||||
id="path829"
|
||||
inkscape:connector-curvature="0"
|
||||
sodipodi:nodetypes="cc" />
|
||||
<text
|
||||
xml:space="preserve"
|
||||
style="font-style:normal;font-weight:normal;font-size:8.46666622px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.26458332"
|
||||
x="55.992992"
|
||||
y="136.24463"
|
||||
id="text2096"><tspan
|
||||
sodipodi:role="line"
|
||||
x="55.992992"
|
||||
y="136.24463"
|
||||
id="tspan2094"
|
||||
style="stroke-width:0.26458332"><tspan
|
||||
x="55.992992"
|
||||
y="136.24463"
|
||||
id="tspan2090"
|
||||
style="stroke-width:0.26458332">(50%, 50%)</tspan><tspan
|
||||
dx="0"
|
||||
x="105.66851"
|
||||
y="136.24463"
|
||||
id="tspan2092"
|
||||
style="stroke-width:0.26458332" /></tspan></text>
|
||||
<rect
|
||||
style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:0.26499999;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
id="rect1253"
|
||||
width="10.394345"
|
||||
height="10.394345"
|
||||
x="61.812603"
|
||||
y="274.68228" />
|
||||
<rect
|
||||
style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:0.26499999;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
id="rect1253-3"
|
||||
width="10.394345"
|
||||
height="10.394345"
|
||||
x="77.134148"
|
||||
y="274.68228" />
|
||||
<rect
|
||||
style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:0.26499999;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
id="rect1253-6"
|
||||
width="10.394345"
|
||||
height="10.394345"
|
||||
x="92.455681"
|
||||
y="274.68228" />
|
||||
<rect
|
||||
style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:0.26499999;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
id="rect1253-7"
|
||||
width="10.394345"
|
||||
height="10.394345"
|
||||
x="107.77721"
|
||||
y="274.68228" />
|
||||
<rect
|
||||
style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:0.26499999;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
id="rect1253-5"
|
||||
width="10.394345"
|
||||
height="10.394345"
|
||||
x="123.09875"
|
||||
y="274.68228" />
|
||||
<rect
|
||||
style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:0.26499999;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
id="rect1253-35"
|
||||
width="10.394345"
|
||||
height="10.394345"
|
||||
x="138.42027"
|
||||
y="274.68228" />
|
||||
<rect
|
||||
style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:0.26499999;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
id="rect1253-62"
|
||||
width="10.394345"
|
||||
height="10.394345"
|
||||
x="153.74182"
|
||||
y="274.68228" />
|
||||
<rect
|
||||
style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:0.26499999;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
id="rect1253-9"
|
||||
width="10.394345"
|
||||
height="10.394345"
|
||||
x="46.491066"
|
||||
y="274.68228" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 7.1 KiB |
BIN
static/hud_final.png
Normal file
BIN
static/hud_final.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.1 KiB |
BIN
static/hud_text.png
Normal file
BIN
static/hud_text.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 207 KiB |
Loading…
Reference in New Issue
Block a user