Git Product home page Git Product logo

hue-debugger-ui's Introduction

Hue Debugger UI Tweet

Github License Build Status React Version Electron Version

example

Graphical interface for observing and interacting directly with Hue API

Table of content

Getting Started

You can get up and running with Hue Debugger UI quickly in three ways

  • Download and install for Windows, macOS or Linux
  • Start in your browser using Docker
  • Clone repository and run with Node

Download executable

Run with Docker

Use the following command:

docker run -p 5000:80 silind/hue-debugger-ui:2.0.0

Hue Debugger UI will now be available in your browser on http://localhost:5000

Run with Node

Clone this repository, and run Hue Debugger UI from a local server using Node.

Prerequisites

You need to have Node installed on your computer.

Installing

  • Clone this repository
  • Extract the files and navigate to folder from command prompt or terminal.
  • Use the command
npm install
  • After installing, start the local server by using the command
npm start

Hue Debugger UI should prompt in your browser on localhost:3000

Built With

A JavaScript library for building user interfaces

Build cross platform desktop apps with JavaScript, HTML, and CSS

Contributing

Issues

In the case of a bug report, bugfix or a suggestions, please feel very free to open an issue.

Pull request

Pull requests are always welcome, and I'll do my best to do reviews as fast as I can.

License

This project is licensed under the MIT License

Get Help

Motivation

An enhanced substitute for the API Debug Tool
Every Hue bridge comes with a simple web app built into it, the API Debug Tool, which you can use to learn how the Hue REST API works 'under the hood' and which can be useful to debug your app during development.

However, the API Debug Tool quickly becomes tedious to use, and especially when doing continuous debugging of larger and more complex projects, debugging with this tool will feel cumbersome.

This is the main motivation for building an enhanced graphical user interface to interact with the Hue REST API in a much more convenient way.

Acknowledgements

hue-debugger-ui's People

Contributors

dependabot[bot] avatar simonhoiberg avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

hue-debugger-ui's Issues

body contains invalid json

Trying to delete apps from the whitelist:

image

There it says body contains invalid json but unfortunately the application isn't quite detailed nough to show that body 😞

I'm thinking updating the config is broken, because it can't even switch off automatic updates:

image

/config/on doesn't feel like the correct address for this.

UI layout suggestions

For polish, I suggest having a resize handle for the left contents pane, as it seems to have a fixed width which is not always enough to show the full ID and name. Also allow the full ID/name to appear in a tooltip when truncated for space.

Also, the console view seems to overlap the entire bottom of the interface such that even when the upper panes are scrolled all the way down the console obscures parts of them. It should function like an independent pane as well, ideally resizable, and without making other parts of the interface inaccessible behind it.

ability to copy text?

not much of an issue but it'd be handy to be able to copy the Scene names or text from the left side of the pane . is that something thats doable?

Can't create new scene using the debugger UI

When trying to create new item in the Scenes section clicking the "Create new" button doesn't actually don anything. It shows the "check mark" icon but the scene is actually not saved.

Edit values by clicking

For editing node values, I think being able to click on the value directly to make it editable would be a convenient shortcut for having to click the edit button out to the side. The new/edit/delete buttons are kind of small and close together, and edit is right in the middle, so it's possible to click the wrong one by mistake. Since editing a value will probably be the most common operation used, being able to click the value itself to go straight into editing would make the mouse target larger and thus easier to hit, and I think it's also an intuitive action.

hue-debugger-ui.com redirects to spam site

I'm guessing the domain wasn't renewed, but the URL for the project, hue-debugger-ui.com, currently redirects to http://unitju.com/xr.php, which then further attempts to redirect to a malicious spam-vertising page full of malware links that immediately asks to send you notifications - and potentially tries to do other things, but I had my browser pretty locked down when accessing it, as I had to bypass an AdGuard warning screen just to access it.

Since the URL is no longer active, it really should be removed from the project page, since, as it stands, it leads to a malicious site.

Unable to delete Scenes.

Hi,
I have a bunch of Scenes, seemingly created by Google Assistant, for waking up to "sunrise". We use the GA all the time to turn on morning alarms.

However it seems they take up tons of space on the bridge because they get repeated.
image

When I click on the Trash button in Debugger-UI and select OK from the confirmation the Scenes are still there. How can I permanently delete them?

Thanks!

Direct editing of regions as JSON, etc.

Just an idea based on how HTML inspection tools work in browsers like Firefox/Chrome/Chromium where you have a tree view of the document and can select “Edit as HTML” to edit it as text: It might be nice to be able to take a node and its children in the view and edit the chunk as JSON in a textarea. This could be used to make several changes at once quickly. It would also allow for convenient clipboard copy/paste. It’d be a nice feature, though would probably be some work since you’d have to parse it, have error handling, and logic to figure out how to translate the complete chunk into the proper sequence of bridge API calls.

Double check-mark buttons when editing

When editing certain items (such as values under “lights/<ID>/state”), I sometimes get two green checkmark buttons, as shown in the screenshot. I'm not clear on the difference between these two, and they don't appear to have any descriptive tooltips. The lower one seems to work as expected, but clicking the upper one causes an error in the console like the following:

error: type 7
address: /lights/12/state/on
description: invalid value,  true }, for parameter, on

I'm not sure if this is a bug or if the other green button is supposed to be an alternate function. If it's an intentional feature, I think the UI could be a bit more clear.

image

Automatic ID/name lookup and resource cross-referencing features

I think one of the most useful things to have in a tool like this is an interface that makes references to other bridge resources easy to recognize and identify at a glance as well as making it convenient to insert resource references during editing, without having to manually remember or look up raw IDs.

I'm imagining it could be something like this:

  1. IDs or references (whether in API path form, such as “/<resource-type>/<ID>/…”, or as raw IDs) could have the human-friendly name assigned to that resource shown next to it in the GUI for easy identification. If the resource/ID isn't actually found on the bridge, there could be an indication like “ID/resource not found” or a similar string where the name would appear, maybe with a small yellow-exclamation-warning type icon or similar

  2. Hovering the mouse over the name could show a pop-up listing other interesting attributes/values of the resource at a glance, and clicking it could navigate directly to that resource in the main view. (A web-browser-like back/forward function for returning back to the original spot again might also be useful if this sort of hyperlinking is implemented.)

  3. When entering an ID or resource, there could be a pop-up menu or similar mechanism available for selecting appropriate choices. This would show resource names next to their IDs so it's easy to find the desired one and have its ID/path automatically pasted in when selected.

For recognizing resources/IDs in the datastore for cross-referencing purposes, I've used an algorithm like this:

if node name is “lightstates”:
    assume names of child nodes are light IDs
if node name is “address”:
    assume value is resource path
if node name is “scene”:
    assume value is scene ID
if node value is a list of strings:
    if node name is “lights”, assume list of light IDs
    if node name is “links”, assume list of resource paths

Copying to clipboard

Being able to copy regions of the right pane to the clipboard as JSON would be a good feature. This could be pasted into forum posts, other tools, or in the text box when creating a new item (such as if you want to create a new item based on an existing one, you could copy the code in the view and then paste it in the box for editing).

Timestamp in console keeps updating

The timestamp in console acts as a clock rather than a timestamp. It updates for all entries based on the current time. Also doesn't respect system time formatting (shows AM/PM when system clock is 24hr)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.