forked from openhab/openhab-webui
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[BasicUI] Implement Buttongrid widget
Related to openhab/openhab-core#3441 Signed-off-by: Laurent Garnier <lg.hc@free.fr>
- Loading branch information
Showing
7 changed files
with
260 additions
and
6 deletions.
There are no files selected for viewing
215 changes: 215 additions & 0 deletions
215
...enhab.ui.basic/src/main/java/org/openhab/ui/basic/internal/render/ButtongridRenderer.java
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,215 @@ | ||
/** | ||
* Copyright (c) 2010-2023 Contributors to the openHAB project | ||
* | ||
* See the NOTICE file(s) distributed with this work for additional | ||
* information. | ||
* | ||
* This program and the accompanying materials are made available under the | ||
* terms of the Eclipse Public License 2.0 which is available at | ||
* http://www.eclipse.org/legal/epl-2.0 | ||
* | ||
* SPDX-License-Identifier: EPL-2.0 | ||
*/ | ||
package org.openhab.ui.basic.internal.render; | ||
|
||
import java.util.HashMap; | ||
import java.util.Map; | ||
|
||
import org.eclipse.emf.common.util.ECollections; | ||
import org.eclipse.emf.common.util.EList; | ||
import org.eclipse.jdt.annotation.NonNullByDefault; | ||
import org.eclipse.jdt.annotation.Nullable; | ||
import org.openhab.core.i18n.LocaleProvider; | ||
import org.openhab.core.i18n.TranslationProvider; | ||
import org.openhab.core.model.sitemap.sitemap.Button; | ||
import org.openhab.core.model.sitemap.sitemap.Buttongrid; | ||
import org.openhab.core.model.sitemap.sitemap.Widget; | ||
import org.openhab.core.ui.items.ItemUIRegistry; | ||
import org.openhab.ui.basic.internal.WebAppConfig; | ||
import org.openhab.ui.basic.render.RenderException; | ||
import org.openhab.ui.basic.render.WidgetRenderer; | ||
import org.osgi.framework.BundleContext; | ||
import org.osgi.service.component.annotations.Activate; | ||
import org.osgi.service.component.annotations.Component; | ||
import org.osgi.service.component.annotations.Reference; | ||
import org.slf4j.Logger; | ||
import org.slf4j.LoggerFactory; | ||
|
||
/** | ||
* This is an implementation of the {@link WidgetRenderer} interface, which | ||
* can produce HTML code for Buttongrid widgets. | ||
* | ||
* @author Laurent Garnier - Initial contribution | ||
*/ | ||
@Component(service = WidgetRenderer.class) | ||
@NonNullByDefault | ||
public class ButtongridRenderer extends AbstractWidgetRenderer { | ||
|
||
private final Logger logger = LoggerFactory.getLogger(ButtongridRenderer.class); | ||
|
||
// private static final int MAX_LABEL_SIZE = 9; | ||
private static final String ELLIPSIS = "\u2026"; | ||
|
||
@Activate | ||
public ButtongridRenderer(final BundleContext bundleContext, final @Reference TranslationProvider i18nProvider, | ||
final @Reference ItemUIRegistry itemUIRegistry, final @Reference LocaleProvider localeProvider) { | ||
super(bundleContext, i18nProvider, itemUIRegistry, localeProvider); | ||
} | ||
|
||
@Override | ||
public boolean canRender(Widget w) { | ||
return w instanceof Buttongrid; | ||
} | ||
|
||
@Override | ||
public EList<Widget> renderWidget(Widget w, StringBuilder sb, String sitemap) throws RenderException { | ||
Buttongrid grid = (Buttongrid) w; | ||
int buttonsPerLine = grid.getColumns(); | ||
|
||
if (buttonsPerLine < 1) { | ||
logger.warn("Invalid value ({}) for \"columns\" parameter; use 1", buttonsPerLine); | ||
buttonsPerLine = 1; | ||
} | ||
|
||
Map<Integer, Map<Integer, Button>> rows = new HashMap<>(); | ||
|
||
int maxColumn = 0; | ||
int mawRow = 0; | ||
for (Button button : grid.getButtons()) { | ||
int row = (button.getPosition() - 1) / buttonsPerLine + 1; | ||
// int row = button.getRow(); | ||
int column = (button.getPosition() - 1) % buttonsPerLine + 1; | ||
// int column = button.getColumn(); | ||
if (row < 1 || column < 1) { | ||
logger.warn("Invalid row or column number; button at position {}:{} is ignored", row, column); | ||
continue; | ||
} | ||
if (row > mawRow) { | ||
mawRow = row; | ||
} | ||
if (column > maxColumn) { | ||
maxColumn = column; | ||
} | ||
|
||
Map<Integer, Button> columns = rows.get(row); | ||
if (columns == null) { | ||
columns = new HashMap<>(); | ||
rows.put(row, columns); | ||
} | ||
columns.put(column, button); | ||
} | ||
|
||
if (mawRow > 50 || maxColumn > 12) { | ||
logger.warn("The button grid is too big ({},{})", mawRow, maxColumn); | ||
return ECollections.emptyEList(); | ||
} | ||
|
||
String snippet = getSnippet("buttongrid"); | ||
|
||
boolean showHeaderRow = grid.getLabel() != null; | ||
snippet = snippet.replace("%header_visibility_class%", | ||
showHeaderRow ? "%visibility_class%" : "mdl-form__row--hidden"); | ||
snippet = snippet.replace("%header_row%", Boolean.valueOf(showHeaderRow).toString()); | ||
|
||
snippet = preprocessSnippet(snippet, w, true); | ||
|
||
// Process the color tags | ||
snippet = processColor(w, snippet); | ||
|
||
StringBuilder buttons = new StringBuilder(); | ||
for (int row = 1; row <= mawRow; row++) { | ||
buildRow(grid.getItem(), buttonsPerLine, rows.get(row), buttons); | ||
} | ||
snippet = snippet.replace("%buttons%", buttons.toString()); | ||
|
||
sb.append(snippet); | ||
return ECollections.emptyEList(); | ||
} | ||
|
||
private void buildRow(String item, int columns, @Nullable Map<Integer, Button> buttonsInRow, StringBuilder builder) | ||
throws RenderException { | ||
int sizeDessktop = Math.max(1, 12 / columns); | ||
int sizeTablet = Math.max(1, 8 / columns); | ||
int sizePhone = Math.max(1, 4 / columns); | ||
for (int col = 1; col <= columns; col++) { | ||
Button button = buttonsInRow == null ? null : buttonsInRow.get(col); | ||
if (button != null) { | ||
String buttonHtml = buildButton(item, button.getLabel(), button.getCmd(), button.getIcon()); | ||
buildCell(false, sizeDessktop, col > 8, sizeTablet, col > 4, sizePhone, "", buttonHtml, builder); | ||
} else { | ||
buildEmptyCell(false, sizeDessktop, col > 8, sizeTablet, col > 4, sizePhone, builder); | ||
} | ||
} | ||
int extraCellSizeDesktop = 12 % columns; | ||
int extraCellSizeTablet = columns > 8 ? 0 : 8 % columns; | ||
int col = columns + 1; | ||
if (extraCellSizeDesktop > 0) { | ||
buildEmptyCell(false, extraCellSizeDesktop, col > 8, extraCellSizeTablet > 0 ? extraCellSizeTablet : 1, | ||
col > 4, 1, builder); | ||
} else if (extraCellSizeTablet > 0 && columns < 8) { | ||
buildEmptyCell(true, 1, false, extraCellSizeTablet, col > 4, 1, builder); | ||
} | ||
} | ||
|
||
private void buildEmptyCell(boolean hideDesktop, int sizeDessktop, boolean hideTablet, int sizeTablet, | ||
boolean hidePhone, int sizePhone, StringBuilder builder) throws RenderException { | ||
buildCell(hideDesktop, sizeDessktop, hideTablet, sizeTablet, hidePhone, sizePhone, "buttongrid-empty-button", | ||
"", builder); | ||
} | ||
|
||
private void buildCell(boolean hideDesktop, int sizeDessktop, boolean hideTablet, int sizeTablet, boolean hidePhone, | ||
int sizePhone, String divClass, String buttonHtml, StringBuilder builder) throws RenderException { | ||
String divClasses = divClass; | ||
if (hideDesktop) { | ||
divClasses += " mdl-cell--hide-desktop"; | ||
} | ||
if (hideTablet) { | ||
divClasses += " mdl-cell--hide-tablet"; | ||
} | ||
if (hidePhone) { | ||
divClasses += " mdl-cell--hide-phone"; | ||
} | ||
String buttonDiv = getSnippet("buttondiv"); | ||
buttonDiv = buttonDiv.replace("%size_desktop%", String.valueOf(sizeDessktop)); | ||
buttonDiv = buttonDiv.replace("%size_tablet%", String.valueOf(sizeTablet)); | ||
buttonDiv = buttonDiv.replace("%size_phone%", String.valueOf(sizePhone)); | ||
buttonDiv = buttonDiv.replace("%class%", divClasses); | ||
buttonDiv = buttonDiv.replace("%button%", buttonHtml); | ||
builder.append(buttonDiv); | ||
} | ||
|
||
private String buildButton(String item, @Nullable String lab, String cmd, @Nullable String icon) | ||
throws RenderException { | ||
String button = getSnippet("button"); | ||
|
||
String command = cmd; | ||
String label = lab == null ? cmd : lab; | ||
|
||
button = button.replace("%item%", item); | ||
button = button.replace("%cmd%", escapeHtml(command)); | ||
String buttonClass = "buttongrid-button"; | ||
String style = ""; | ||
if (icon == null || !config.isIconsEnabled()) { | ||
button = button.replace("%label%", escapeHtml(label)); | ||
button = button.replace("%icon_snippet%", ""); | ||
} else { | ||
button = button.replace("%label%", ""); | ||
button = preprocessIcon(button, icon, true); | ||
buttonClass += " mdl-button-icon"; | ||
switch (config.getTheme()) { | ||
case WebAppConfig.THEME_NAME_BRIGHT: | ||
style = "style=\"color-scheme: light\""; | ||
break; | ||
case WebAppConfig.THEME_NAME_DARK: | ||
style = "style=\"color-scheme: dark\""; | ||
break; | ||
default: | ||
break; | ||
} | ||
} | ||
button = button.replace("%buttonstyle%", style); | ||
button = button.replace("%class%", buttonClass); | ||
|
||
return button; | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
3 changes: 3 additions & 0 deletions
3
bundles/org.openhab.ui.basic/src/main/resources/snippets/buttondiv.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
<div class="mdl-cell mdl-cell--%size_desktop%-col mdl-cell--%size_tablet%-col-tablet mdl-cell--%size_phone%-col-phone buttongrid-div-button %class%"> | ||
%button% | ||
</div> |
20 changes: 20 additions & 0 deletions
20
bundles/org.openhab.ui.basic/src/main/resources/snippets/buttongrid.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,20 @@ | ||
<div class="mdl-form__row mdl-form__row--header mdl-cell mdl-cell--12-col %header_visibility_class%"> | ||
<span %iconstyle% class="mdl-form__icon"> | ||
%icon_snippet% | ||
</span> | ||
<span %labelstyle% class="mdl-form__label"> | ||
%label% | ||
</span> | ||
</div> | ||
<div class="mdl-form__row--height-auto mdl-cell mdl-cell--12-col %visibility_class%"> | ||
<div | ||
class="mdl-form__control mdl-form__buttons mdl-grid mdl-grid--no-spacing" | ||
data-control-type="buttons" | ||
data-item="%item%" | ||
data-ignore-state="true" | ||
data-widget-id="%widget_id%" | ||
data-header-row="%header_row%" | ||
> | ||
%buttons% | ||
</div> | ||
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters