Peter Hartmann c199a3bb59
Add IOT dashboard example (#116)
* Add IOT dashboard example

* Add images

* more content

* add pie chart

* Add skin factories etc.

* more work on the pie chart

* Try to use quick shapes

* Revert "Try to use quick shapes"

This reverts commit df6b5b22a339173d2a70ed85744b598811c26b30.

Doesn't work that easily unfortunately.

* implement design

* Add fonts; for now as a resource

We should use fontconfig of course later

* improve menu bar

* implement top bar

* use QNanoPainter for circular graphs

* Revert "use QNanoPainter for circular graphs"

This reverts commit ba0263cb1c19462cc41063ec7087c95e176c8293.

Try with QQuickPaintedItem instead for now.

* use painted items for circular bar graphs (for now)

* use different colors

* use some gradients

all of this is very hackish still

* add to top bar

* fix fonts and time display

* implement usage

* implement indoor temperature

* implement Humidity

* implement My Devices

* fix opacity issue with devices

* make icons quadratic

with some quick fixes as usual

* Add diagram

* try to smooth out curves

* Add diagram caption

* use tiny font

* make caption smaller

* add wekdays

* add grid lines

* fix my devices

* add light intensity

* add box around each section

* rename Card to Box

* Put indoor temperature inside a box

* put Humidity in a box

* put the rest in a box

* some small stuff

* add kirigami code

* something works somehow

* maybe we don't need our own class

still some work to do, but the main thing works

* add shadow from outside

... because the class is not a QskControl

* fine-tune the layout

* cross compilation: Make sure examples find libraries at link time

* fix compilation for embedded target

* add night time skin

* add new button class to better style it

* more hints for the night time skin

* change hints for dimmer

* change hints for progress bars

* Use animator for light dimmer

* use animator for progress bars

* Add Kirigami code

It was on oversight that this was forgotten earlier. We could of course
strip this down a lot to the part that we are actually using (i.e. the
shadowed rectangle).

* fix build with new QSkinny version

* fix paddings, something in the API changed

* fix stretch factors

* fix build with new version

* clang tidy fixes

* fix unused parameter warnings

should clean this up properly

* beautify example

* use astyle

* style menu bar properly

* fix warning

* more size hints

* refactor skins

* more skin hints

* graphic label skin hints

* menu item states instead of own API

* main grid box styling

* top bar styling

* fix build

* style round progress bars

* style time

* style indoor temperature and humidity

* simplify temperature and humidity

* style some more

* style My Devices section

* style My Devices some more

* fix styles when switching between them

* style diagram

* style more elements inside diagram

* more diagram style

* fix skin changes

* style light intensity

* Fix Humidity

* fix light intensity layout and other stuff

* style light intensity

* style button value label

* style round button

* style button boxes some more

* style menu bar top label

* style menu bar icons

* remove ShadowBox, it is not used

* style shadow boxes

* remove QskShadowedRectangle

We are not using it

* style usage spacer

* fine tune

* Refactor diagram before replacing it

* Add Diagram drawn with OpenGL

* use new Diagram class

* Support more than one data point in a diagram

* change data points and colors a bit

* position caption box

* adapt the spline to show nice curves

* remove boost::math dependency

We just hardcode the values here so we can get rid of the dependency.

* Remove kirigami code that we don't need

We only need the shadow

* move kirigami code

* rename header guards

* add license headers

* rename some classes
2021-04-26 06:22:35 +02:00

240 lines
7.7 KiB
GLSL

// SPDX-FileCopyrightText: 2020 Arjen Hiemstra <ahiemstra@heimr.nl>
// SPDX-FileCopyrightText: 2017 Inigo Quilez
//
// SPDX-License-Identifier: MIT
//
// This file is based on
// https://iquilezles.org/www/articles/distfunctions2d/distfunctions2d.htm
//if not GLES
// include "desktop_header.glsl"
//else
// include "es_header.glsl"
// A maximum point count to be used for sdf_polygon input arrays.
// Unfortunately even function inputs require a fixed size at declaration time
// for arrays, unless we were to use OpenGL 4.5.
// Since the polygon is most likely to be defined in a uniform, this should be
// at least less than MAX_FRAGMENT_UNIFORM_COMPONENTS / 2 (since we need vec2).
#define SDF_POLYGON_MAX_POINT_COUNT 400
/*********************************
Shapes
*********************************/
// Distance field for a circle.
//
// \param point A point on the distance field.
// \param radius The radius of the circle.
//
// \return The signed distance from point to the circle. If negative, point is
// inside the circle.
lowp float sdf_circle(in lowp vec2 point, in lowp float radius)
{
return length(point) - radius;
}
// Distance field for a triangle.
//
// \param point A point on the distance field.
// \param p0 The first vertex of the triangle.
// \param p0 The second vertex of the triangle.
// \param p0 The third vertex of the triangle.
//
// \note The ordering of the three vertices does not matter.
//
// \return The signed distance from point to triangle. If negative, point is
// inside the triangle.
lowp float sdf_triangle(in lowp vec2 point, in lowp vec2 p0, in lowp vec2 p1, in lowp vec2 p2)
{
lowp vec2 e0 = p1 - p0;
lowp vec2 e1 = p2 - p1;
lowp vec2 e2 = p0 - p2;
lowp vec2 v0 = point - p0;
lowp vec2 v1 = point - p1;
lowp vec2 v2 = point - p2;
lowp vec2 pq0 = v0 - e0 * clamp( dot(v0, e0) / dot(e0, e0), 0.0, 1.0 );
lowp vec2 pq1 = v1 - e1 * clamp( dot(v1, e1) / dot(e1, e1), 0.0, 1.0 );
lowp vec2 pq2 = v2 - e2 * clamp( dot(v2, e2) / dot(e2, e2), 0.0, 1.0 );
lowp float s = sign( e0.x*e2.y - e0.y*e2.x );
lowp vec2 d = min(min(vec2(dot(pq0,pq0), s*(v0.x*e0.y-v0.y*e0.x)),
vec2(dot(pq1,pq1), s*(v1.x*e1.y-v1.y*e1.x))),
vec2(dot(pq2,pq2), s*(v2.x*e2.y-v2.y*e2.x)));
return -sqrt(d.x)*sign(d.y);
}
// Distance field for a rectangle.
//
// \param point A point on the distance field.
// \param rect A vec2 with the size of the rectangle.
//
// \return The signed distance from point to rectangle. If negative, point is
// inside the rectangle.
lowp float sdf_rectangle(in lowp vec2 point, in lowp vec2 rect)
{
lowp vec2 d = abs(point) - rect;
return length(max(d, 0.0)) + min(max(d.x, d.y), 0.0);
}
// Distance field for a rectangle with rounded corners.
//
// \param point The point to calculate the distance of.
// \param rect The rectangle to calculate the distance of.
// \param radius A vec4 with the radius of each corner. Order is top right, bottom right, top left, bottom left.
//
// \return The signed distance from point to rectangle. If negative, point is
// inside the rectangle.
lowp float sdf_rounded_rectangle(in lowp vec2 point, in lowp vec2 rect, in lowp vec4 radius)
{
radius.xy = (point.x > 0.0) ? radius.xy : radius.zw;
radius.x = (point.y > 0.0) ? radius.x : radius.y;
lowp vec2 d = abs(point) - rect + radius.x;
return min(max(d.x, d.y), 0.0) + length(max(d, 0.0)) - radius.x;
}
/*********************
Operators
*********************/
// Convert a distance field to an annular (hollow) distance field.
//
// \param sdf The result of an sdf shape to convert.
// \param thickness The thickness of the resulting shape.
//
// \return The value of sdf modified to an annular shape.
lowp float sdf_annular(in lowp float sdf, in lowp float thickness)
{
return abs(sdf) - thickness;
}
// Union two sdf shapes together.
//
// \param sdf1 The first sdf shape.
// \param sdf2 The second sdf shape.
//
// \return The union of sdf1 and sdf2, that is, the distance to both sdf1 and
// sdf2.
lowp float sdf_union(in lowp float sdf1, in lowp float sdf2)
{
return min(sdf1, sdf2);
}
// Subtract two sdf shapes.
//
// \param sdf1 The first sdf shape.
// \param sdf2 The second sdf shape.
//
// \return sdf1 with sdf2 subtracted from it.
lowp float sdf_subtract(in lowp float sdf1, in lowp float sdf2)
{
return max(sdf1, -sdf2);
}
// Intersect two sdf shapes.
//
// \param sdf1 The first sdf shape.
// \param sdf2 The second sdf shape.
//
// \return The intersection between sdf1 and sdf2, that is, the area where both
// sdf1 and sdf2 provide the same distance value.
lowp float sdf_intersect(in lowp float sdf1, in lowp float sdf2)
{
return max(sdf1, sdf2);
}
// Smoothly intersect two sdf shapes.
//
// \param sdf1 The first sdf shape.
// \param sdf2 The second sdf shape.
// \param smoothing The amount of smoothing to apply.
//
// \return A smoothed version of the intersect operation.
lowp float sdf_intersect_smooth(in lowp float sdf1, in lowp float sdf2, in lowp float smoothing)
{
lowp float h = clamp(0.5 - 0.5 * (sdf1 - sdf2) / smoothing, 0.0, 1.0);
return mix(sdf1, sdf2, h) + smoothing * h * (1.0 - h);
}
// Round an sdf shape.
//
// \param sdf The sdf shape to round.
// \param amount The amount of rounding to apply.
//
// \return The rounded shape of sdf.
// Note that rounding happens by basically selecting an isoline of sdf,
// therefore, the resulting shape may be larger than the input shape.
lowp float sdf_round(in lowp float sdf, in lowp float amount)
{
return sdf - amount;
}
// Convert an sdf shape to an outline of its shape.
//
// \param sdf The sdf shape to turn into an outline.
//
// \return The outline of sdf.
lowp float sdf_outline(in lowp float sdf)
{
return abs(sdf);
}
/********************
Convenience
********************/
// A constant to represent a "null" value of an sdf.
//
// Since 0 is a point exactly on the outline of an sdf shape, and negative
// values are inside the shape, this uses a very large positive constant to
// indicate a value that is really far away from the actual sdf shape.
const lowp float sdf_null = 99999.0;
// A constant for a default level of smoothing when rendering an sdf.
//
// This
const lowp float sdf_default_smoothing = 0.625;
// Render an sdf shape alpha-blended onto an existing color.
//
// This is an overload of sdf_render(float, vec4, vec4) that allows specifying a
// blending amount and a smoothing amount.
//
// \param alpha The alpha to use for blending.
// \param smoothing The amount of smoothing to apply to the sdf.
//
lowp vec4 sdf_render(in lowp float sdf, in lowp vec4 sourceColor, in lowp vec4 sdfColor, in lowp float alpha, in lowp float smoothing)
{
return mix(sourceColor, sdfColor, alpha * (1.0 - clamp(sdf * 300.0, 0.0, 1.0)));
}
// Render an sdf shape.
//
// This will render the sdf shape on top of whatever source color is input,
// making sure to apply smoothing if desired.
//
// \param sdf The sdf shape to render.
// \param sourceColor The source color to render on top of.
// \param sdfColor The color to use for rendering the sdf shape.
//
// \return sourceColor with the sdf shape rendered on top.
lowp vec4 sdf_render(in lowp float sdf, in lowp vec4 sourceColor, in lowp vec4 sdfColor)
{
return sdf_render(sdf, sourceColor, sdfColor, 1.0, sdf_default_smoothing);
}
// Render an sdf shape.
//
// This is an overload of sdf_render(float, vec4, vec4) that allows specifying a
// smoothing amount.
//
// \param smoothing The amount of smoothing to apply to the sdf.
//
lowp vec4 sdf_render(in lowp float sdf, in lowp vec4 sourceColor, in lowp vec4 sdfColor, in lowp float smoothing)
{
return sdf_render(sdf, sourceColor, sdfColor, 1.0, smoothing);
}