Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[BasicUI] Add preview color to Colorpicker widget #2873

Merged
merged 3 commits into from
Nov 18, 2024
Merged

[BasicUI] Add preview color to Colorpicker widget #2873

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
81dfcc7
[BasicUI] Add preview color to Colorpicker widget
lolodomo Nov 16, 2024
0e32c28
Merge branch 'main' into basicui_color_preview
lolodomo Nov 17, 2024
b4b3f4f
Merge picker button and preview circle
lolodomo Nov 17, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 3 additions & 2 deletions bundles/org.openhab.ui.basic/snippets-src/colorpicker.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,9 @@
<i class="material-icons">&#xE316;</i>
</button>
<button class="mdl-button mdl-button--raised mdl-js-button mdl-js-ripple-effect mdl-form__colorpicker--pick">
<!-- color_lens -->
<i class="material-icons">&#xE3B7;</i>
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<rect width="100" height="100" x="0" y="0" rx="20" fill="Gray"/>
</svg>
</button>
<button class="mdl-button mdl-button--raised mdl-js-button mdl-js-ripple-effect mdl-form__colorpicker--down">
<!-- keyboard_arrow_down -->
Expand Down
8 changes: 2 additions & 6 deletions bundles/org.openhab.ui.basic/snippets-src/colortemppicker.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,13 +25,9 @@
data-gradient-colors="%gradientColors%"
>
<button class="mdl-button mdl-button--raised mdl-js-button mdl-js-ripple-effect mdl-form__colortemppicker--pick">
<!-- colorize -->
<i class="material-icons">&#xE3B8;</i>
</button>
<span class="mdl-form__colortemppicker--preview">
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="44" fill="Gray" stroke="LightGray" stroke-width="6" />
<rect width="100" height="100" x="0" y="0" rx="20" fill="Gray"/>
</svg>
</span>
</button>
</div>
</div>
15 changes: 1 addition & 14 deletions ...nhab.ui.basic/src/main/java/org/openhab/ui/basic/internal/render/ColorpickerRenderer.java
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,6 @@
import org.openhab.core.model.sitemap.sitemap.Widget;
import org.openhab.core.types.State;
import org.openhab.core.ui.items.ItemUIRegistry;
import org.openhab.ui.basic.internal.servlet.WebAppServlet;
import org.openhab.ui.basic.render.RenderException;
import org.openhab.ui.basic.render.WidgetRenderer;
import org.osgi.framework.BundleContext;
Expand Down Expand Up @@ -65,23 +64,11 @@ public EList<Widget> renderWidget(Widget w, StringBuilder sb, String sitemap) th
// get RGB hex value
State state = itemUIRegistry.getState(cp);
String hexValue = getRGBHexCodeFromItemState(state);
if (hexValue == null) {
hexValue = "#ffffff";
}
String purelabel = itemUIRegistry.getLabel(w);
if (purelabel != null) {
purelabel = purelabel.replaceAll("\\\"", "\\\\'");
}

// Should be called before preprocessSnippet
snippet = snippet.replace("%state%", hexValue);
snippet = snippet.replace("%state_in_url%", escapeURL(hexValue));
snippet = snippet.replace("%state%", hexValue == null ? "#ffffff" : hexValue);

snippet = preprocessSnippet(snippet, w);
if (purelabel != null) {
snippet = snippet.replace("%purelabel%", purelabel);
}
snippet = snippet.replace("%servletname%", WebAppServlet.SERVLET_PATH);

// Process the color tags
snippet = processColor(w, snippet);
Expand Down
10 changes: 7 additions & 3 deletions bundles/org.openhab.ui.basic/web-src/_layout.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -348,10 +348,14 @@
padding-top: 6px;
}
}
&__colortemppicker--preview {
&__colorpicker--pick,
&__colortemppicker--pick {
padding-top: 0px !important;
padding-left: 7px;
padding-right: 7px;
svg {
width: 36px;
height: 36px;
width: 26px;
height: 26px;
object-fit: contain;
}
}
Expand Down
42 changes: 34 additions & 8 deletions bundles/org.openhab.ui.basic/web-src/smarthome.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2121,6 +2121,7 @@

var
_t = this,
color,
repeatInterval = 300,
interval;

Expand All @@ -2132,23 +2133,47 @@
};
}

_t.value = hex2rgb(_t.parentNode.getAttribute("data-value"));
function rgb2color(rgb) {
var
r = Math.round(rgb.r).toString(16),
g = Math.round(rgb.g).toString(16),
b = Math.round(rgb.b).toString(16);

return "#" + (r.length < 2 ? "0" : "") + r + (g.length < 2 ? "0" : "") + g + (b.length < 2 ? "0" : "") + b;
}

color = _t.parentNode.getAttribute("data-value");
_t.value = hex2rgb(color);
_t.modalControl = null;
_t.buttonUp = _t.parentNode.querySelector(o.colorpicker.up);
_t.buttonDown = _t.parentNode.querySelector(o.colorpicker.down);
_t.buttonPick = _t.parentNode.querySelector(o.colorpicker.pick);
_t.colorPreview = _t.parentNode.querySelector(o.colorpicker.rectSvg);
_t.colorPreview.setAttribute("fill", color);
_t.longPress = false;
_t.pressed = false;

_t.setValue = function(value, itemState) {
var
t = itemState.split(","),
t,
hsv,
color;

if (itemState === "NULL" || itemState === "UNDEF") {
color = "#ffffff";
_t.value = hex2rgb(color);
} else {
t = itemState.split(",");
hsv = {
h: t[0] / 360,
s: t[1] / 100,
v: t[2] / 100
};
_t.value = Colorpicker.hsv2rgb(hsv);
_t.value = Colorpicker.hsv2rgb(hsv);
color = rgb2color(_t.value);
}

_t.colorPreview.setAttribute("fill", color);

if (_t.modalControl !== null) {
_t.modalControl.updateColor(_t.value);
Expand Down Expand Up @@ -2361,10 +2386,10 @@
_t.colors = (_t.gradientColors === "" ? "Gray" : _t.gradientColors).split(",");
_t.modalControl = null;
_t.buttonPick = _t.parentNode.querySelector(o.colortemppicker.pick);
_t.circle = _t.parentNode.querySelector(o.colortemppicker.circle);
_t.colorPreview = _t.parentNode.querySelector(o.colortemppicker.rectSvg);
color = _t.parentNode.getAttribute("data-color");
if (color !== "") {
_t.circle.setAttribute("fill", color);
_t.colorPreview.setAttribute("fill", color);
}

_t.setValuePrivate = function(value, itemState) {
Expand All @@ -2383,8 +2408,8 @@
_t.value = itemState * 1;
}

// Set the color in the preview circle with the most approaching color used to generate the gradient
_t.circle.setAttribute("fill", (isNaN(_t.value) || _t.value < _t.min || _t.value > _t.max)
// Set the color in the preview rectange with the most approaching color used to generate the gradient
_t.colorPreview.setAttribute("fill", (isNaN(_t.value) || _t.value < _t.min || _t.value > _t.max)
? "Gray"
: _t.colors[Math.round((_t.value - _t.min) * (_t.colors.length - 1) / (_t.max - _t.min))]);

Expand Down Expand Up @@ -3946,6 +3971,7 @@
up: ".mdl-form__colorpicker--up",
down: ".mdl-form__colorpicker--down",
pick: ".mdl-form__colorpicker--pick",
rectSvg: ".mdl-form__colorpicker--pick > svg > rect",
modalClass: "mdl-modal--colorpicker",
image: ".colorpicker__image",
handle: ".colorpicker__handle",
Expand All @@ -3956,7 +3982,7 @@
},
colortemppicker: {
pick: ".mdl-form__colortemppicker--pick",
circle: ".mdl-form__colortemppicker--preview > svg > circle",
rectSvg: ".mdl-form__colortemppicker--pick > svg > rect",
modalClass: "mdl-modal--colortemppicker",
slider: ".colortemppicker__input",
colortemppicker: ".colortemppicker",
Expand Down