HUD: Rewrite chapter

This commit is contained in:
rubenwardy 2017-12-17 16:01:29 +00:00 committed by GitHub
parent 426ee5bd3f
commit ca85ccf13c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 888 additions and 70 deletions

View File

@ -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). The HUD doesn't accept user input. For that, you should use a [Formspec](formspecs.html).
* [Basic Interface](#basic-interface)
* [Positioning](#positioning) * [Positioning](#positioning)
* [Position and Offset](#position-and-offset)
* [Alignment](#alignment)
* [Scoreboard](#scoreboard)
* [Text Elements](#text-elements) * [Text Elements](#text-elements)
* [Parameters](#parameters)
* [Our Example](#our-example)
* [Image Elements](#image-elements) * [Image Elements](#image-elements)
* [Parameters](#parameters-1)
* [Scale](#scale)
* [Changing an Element](#changing-an-element)
* [Storing IDs](#storing-ids)
* [Other Elements](#other-elements) * [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 ## Positioning
Screens come in different sizes, and HUD elements need to work well on all screens. ### Position and Offset
You locate an element using a combination of a position and an offset.
The position is a co-ordinate between (0, 0) and (1, 1) which determines where, <figure class="right_image">
relative to the screen width and height, the element is located. <img
For example, an element with a position of (0.5, 0.5) will be in the center of the screen. 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.\\ Screens come in a variety of different physical sizes and resolutions, and
For example, an element with a position of (0, 0) and an offset of (10, 10) will be at the screen the HUD needs to work well on all screen types.
co-ordinates (0 * width + 10, 0 * height + 10).
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 ## Text Elements
A text element is the simplest type of HUD element.\\ You can create a hud element once you have a copy of the player object:
Here is the earlier example, but with comments to explain each part:
{% highlight lua %} {% highlight lua %}
local player = minetest.get_player_by_name("username")
local idx = player:hud_add({ local idx = player:hud_add({
hud_elem_type = "text", -- This is a text element hud_elem_type = "text",
position = {x = 1, y = 0}, position = {x = 0.5, y = 0.5},
offset = {x=-100, y = 20}, offset = {x = 0, y = 0},
scale = {x = 100, y = 100}, -- Maximum size of text, text outside these bounds is cropped text = "Hello world!",
text = "My Text" -- The actual text shown alignment = {x = 0, y = 0}, -- center aligned
scale = {x = 100, y = 100}, -- covered later
}) })
{% endhighlight %} {% 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. ### Parameters
Colors are in [Hexadecimal form](http://www.colorpicker.com/).
For example: 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 %}
player:hud_add({
hud_elem_type = "text",
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 are created in a very similar way to text elements:
{% 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 %} {% highlight lua %}
local idx = player:hud_add({ local idx = player:hud_add({
hud_elem_type = "text", hud_elem_type = "text",
position = {x = 1, y = 0}, text = "Hello world!",
offset = {x=-100, y = 20}, -- parameters removed for brevity
scale = {x = 100, y = 100}, })
text = "My Text",
number = 0xFF0000 -- Red 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 %} {% endhighlight %}
## Image Elements ## Storing IDs
Image elements display an image on the HUD. {% highlight lua %}
scoreboard = {}
local saved_huds = {}
The X co-ordinate of the `scale` attribute is the scale of the image, with 1 being the original texture size. function scoreboard.update_hud(player)
Negative values represent the percentage of the screen the image should use. For example, x=-100 means 100% (width). 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 ## Other Elements

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.5 KiB

View 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

View 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

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.1 KiB

BIN
static/hud_text.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 207 KiB