UI and frontend software design and consulting since 1991
FreeConferenceCall company has published new version of their video conferencing application that aims at one-presenter-thousands-viewers video conferences and screen sharing.
Their application works on Windows and OS X and uses solely Sciter based UI with extensive use of Sciter’s unique popup DOM elements. Even video is rendered by Sciter with custom native video frames providers.
It is probably hard to realize, but that bar on the top and popup from it is HTML/CSS in reality.
Here is selfie of syntax (tiscript) colorizer – the text below is a full source code of syntax highlighting routine.
The code has colorized itself:
Can your browser do that in 40 lines of code?
And here are styles that define style of tokens:
plaintext > text::mark(number) { color: brown; }
plaintext > text::mark(number-unit) { color: brown; }
plaintext > text::mark(string) { color: teal; }
plaintext > text::mark(keyword) { color: blue; }
plaintext > text::mark(symbol) { color: brown; }
plaintext > text::mark(literal) { color: brown; }
plaintext > text::mark(comment) { color: green; }
Easy, no?
And even shorter selfie, colorizer wrapped as an aspect component (referenced from colorizer.css):
Please consider these tasks:
Currently you can do #1 and #2 by wrapping each text found into <span>s with specific classes – thus to modify DOM structure of the document. Such modification by itself is a) not trivial to implement, b) is highly non-desirable (consider text editor with syntax highlighting) and c) even impossible in case of <textarea> for example.
Ideally we should have some facility that will allow us to a) mark text fragments, b) apply styling to such marked runs through CSS and c) do that without DOM tree modifications.
As a result upcoming Sciter will have:
::mark(...name[s]...) pseudo element.Selection.applyMark(start,end, ... mark names...); – to add marks to the range.Selection.clearMark(start,end, ... mark names...); – to clear marks from the range.Example, CSS:
div::mark(hilite) { background-color:lime; }
div::mark(hilite2) { background-color:cyan; }
div::mark(literal,string) { font-style:italic; color: red; }
First rule will tell the engine to set background color on all text runs that are marked by “hilite” to “lime”.
And script code
var text = $(div).firstNode;
var start = [bookmark: text, 6, false];
var end = [bookmark: text, 11, false];
Selection.applyMark(start,end,"hilite");
will apply mark “hilite” to the text node from 6th until 11th position and so you will have the following rendering:
Note: this will not change DOM structure but rather apply some meta information to characters in the text.
ENTER in that input triggers script evaluation: inspector asks the “inspectee” to execute that script in context of its selected element.
I am adding CSS filter property support to upcoming Sciter version. That involved Windows backend refactoring to support Direct2D v.1.1 if it is available.
Sciter’s is getting new Inspector tool.
New Inspector is a standalone executable that communicates with the inspectable Sciter window (view) over TCP/IP using DataSockets.
There are few reasons behind such architecture:
Each Sciter application that wants to be inspectable shall allow connection with the Inspector explicitly by calling SciterSetOption(hwnd | NULL, SCITER_SET_DEBUG_MODE, TRUE); before loading HTML into Sciter’s window. In response Sciter engine injects so called inspector peer script into the view. Inspector peer script is a small script block that establish event handlers and interceptors (e.g. stdout/stderr proxies). The script adds the following method
function view.connectToInspector(rootEl = null, inspectorHostIP = null);
to the view instance and registers CTRL+SHIFT+I (connect to inspector) and CTRL+SHIFT+Click (select DOM element for the inspection).
CTRL+SHIFT+I is used to connect with the inspector when it runs on the same machine.
The same Inspector instance can serve multiple windows/views, even from different processes or GUI threads.
