any kind of tool to create html-PROGMEN-code with drag & drop?

Hi everybody,

I know only a few things about creating html-websites. For creating small websites on microcontrolles
it would be nice to have a software-tool which ideally works as WYSIWYG (what you see is what you get)
editor with some basic elements like text sliders, buttons, checkboxex

So in this tool you could drag and drop those elements with the mouse to arrange them
click "create" and the corresponding html-code gets created.

If this tool could even create the PROGMEN-commands needed to store the website-structure in flash-memory
this would be the greatest like "DD has left earth" ;-))

So can anybody recommend a small easy to learn WYSIWYG-Website editor?

best regards Stefan

If this tool could even create the PROGMEN-commands needed to store the website-structure in flash-memory
this would be the greatest

easiest way for a simple copy paste to PROGMEM would be something like:

const char WEBSITE[] PROGMEM = R"(<!DOCTYPE HTML>
<html lang="de">
  <head>

I have no advices regarding a WYSIWYG-Website editor. Imho this is a pita because you never get what you see, it depends to much on your browser.
normalize.css? ok but how many css to you want to hold on your arduino…

. . . and with the matching terminator and something to make it more unique:

const char WEBSITE[] PROGMEM = R"=====(<!DOCTYPE HTML>
<html lang="de">
  <head>
)====="

It is the C++11 raw string literal construct.

plenty of choices for WYSIWYG editors (many articles on line too - here is one or another one)

HI J-M-L,
thank you for posting the links. I did a quick scroll-read.
Maybe I have to re-write my question. "real" websites need all kind of design-elements.
For me having some basic elements is enough. For me microcontrollers Websites have to be just functional

a certain aspekt is more important for me: drag & drop by mouse.
I came to the conclusion this is a different question. So this thread could be closed I will open a new one that is
focused on that aspect.

best regards Stefan

Hi everyone,

I have asked for html-editors lately but did focus on the wrong aspect in my titel-question.

I guess most of you know how a word-editor like MS word oder OpenOffice. This kind of software has
graphical elements like circles, rectangles and some more special shaped one.

These elements can be added with click, drag & drop to a document. And then these elements can be modified in size by push/pull "grip-points.

So what I am looking for is such a click, drag & drop push/pull modify functionality for

  • slider
  • button
  • table
  • textboxes
  • checkboxes
  • single line text input-field

best regards Stefan

If you want simple design, just learn a bit of CSS, HTML and JavaScript and you’ll be on your way with deeper control of what’s going on in your page.

StefanL38:
a certain aspekt is more important for me: drag & drop by mouse.

so you want drag and drop elements on your page - not to design the page by drag & drop?

This might give you a good start: HTML Drag and Drop API

Drag and drop to where? Where does the editor "live" on the Arduino? Where is the site to be hosted? Why the use of PROGMEM?

-jim lee

OH I aplogise for describing not detailed enough.
An editor running on my computer (= not the microcontroller) to design a small website by drag & drop.

This editor should provide elements like

  • buttons
  • sliders
  • checkboxex
  • showing textfields
  • single line text-input-fields

For the functionality of the website stored in PROGMEM of the microcontrollers flash-memory it is enough if it is able to - - update the text shown on textfileds

  • taking over the input from single-line input-fields
  • transmit new slider-position to the microcontroller
  • transmit button-presses to the microcontroller

This editor should be able to save the html-code with no or minimal manual re-editing to paste it into the microcontrollers code as a PROGMEN-section

best regards Stefan

I’m now not sure if you mean an editor to develop the html, or you mean a runtime system which handles the interaction between your Arduino application and the client web browser, maybe giving you a simple API to use from the “Arduino ” or maybe both. The analogy could be the development environment for the Nextion Led/Lcd screen which is pc based, but generates code which can be talked to from a Arduino library.

PROGMEM is essentially static. You can, however, have fully static html file (maybe in Flash memory) which you send to the browser, then forces the browser to issue a command like XMLHttpRequest()to fetch all the variable parameters (say in Jason format) from the server during the loading of the page. This is Ajax.

I am not aware of such a dedicated tool handling both the design and the arduino c++ code with zero work.

J-M-L:
I am not aware of such a dedicated tool handling both the design and the arduino c++ code with zero work.

Nor am I. But it would be good. It could save of tedious work. Let's hope the OP is successful in finding one, if that is, indeed, what he is looking for!

yeah - may be something to explore here

as far as I'm concerned I like to be in fine control of my code both on the web side and arduino side and found that the the minute you start looking at the glue/abstraction added by tools for a minimal UI is costly.

I had a very quick look. I'd never heard of it before, but it does appear to go in the direction of a Web UI generator with API for an "Arduino" class MCU. Another problem is that, unless it covers 100% of the needs, the user is left hacking in amongst a lot of complex generated code in order add some missing functionality.

same question as in your other thread as asked by @6v6gt: do you require as well that the code for the Arduino side is also generated?

As discussed tons of pure WYSIWYG HTML editors otherwise supporting the widgets you mention but none I’m aware of that are dedicated to generating Arduino C++ code to drive the form

I'm sorry, I still don't understand what StefanL38's trying to design. Why do I want .html code in my Arduino? Does it become a server? Is this possibly attempting to be a way of controlling the Arduino remotely with an interface that it stores in itself?

-jim lee

Is this possibly attempting to be a way of controlling the Arduino remotely with an interface that it stores in itself?

yes.
see: https://www.arduino.cc/en/Tutorial/LibraryExamples/WebServer

Ah, ok. this is starting to make some sense.

How about, instead of html and al that nonsense. Could you just put a Java applet created by processing into the Arduino? Then you'd have a much greater scope for your control panel.

-jim lee

Topics merged at the request of the OP