Comments (6)
I saw this recently with the latest stage3 compiler and I was able to run the zig build commands by appending -fstage1.
from cosmic.
I want to make a library that makes one user interface format for both HTML DOM and Cosmic WASM. I would think of it is a Mithril JS/DOM abstraction layer. Theoretically I should be able to make a social media site that works on Cosmic with legacy HTML support. Using the UI library I hope to make a simple calculator and a phone interface resembling that of an Amazon Kindle but the status bar is at the bottom and you pull it up to close the application one is in. Once 3d is working good, theoretically Astronomy Engine (cosinekitty) could start producing some accurate representation of the solar system. My questions are, does Cosmic want to support first person simulation in a representation of the solar system as standard to Cosmic? And does Cosmic want something like a Mithril JS abstraction to be standard?
from cosmic.
I want to point out I condense code a lot more than you do. I hope this would not be an issue
const std = @import("std"); const builtin = @import("builtin");
const IsWasm = builtin.target.isWasm(); const stdx = @import("stdx");
const platform = @import("platform"); const graphics = @import("graphics");
const Color = graphics.Color; const ui = @import("ui"); const w = ui.widgets;
const helper = @import("helper.zig"); const log = stdx.log.scoped(.main);
pub const App = struct { counter: u32,
pub fn init(self: *App, _: *ui.InitContext) void { self.counter = 0; }
pub fn build(self: *App, c: *ui.BuildContext) ui.FrameId {
const S = struct { fn onClick(self_: *App, _: ui.MouseUpEvent) void {
self_.counter += 1;}};
return w.Center(.{},
w.Row(.{}, &.{
w.Padding(.{ .padding = 10, .pad_left = 30, .pad_right = 30 },
w.Text(.{ .text = c.fmt("{}", .{self.counter}), .color = Color.White})),
w.TextButton(.{ .text = "Count", .onClick = c.funcExt(self, S.onClick),
.corner_radius = 10 }),}),);}};
var app: helper.App = undefined;
pub fn main() !void { // This is the app loop for desktop. For web/wasm see wasm exports below.
try app.init("Counter"); defer app.deinit(); app.runEventLoop(update); }
fn update(delta_ms: f32) void { const S = struct {
fn buildRoot(_: void, c: *ui.BuildContext) ui.FrameId { return c.build(App, .{}); } };
const ui_width = @intToFloat(f32, app.win.getWidth());
const ui_height = @intToFloat(f32, app.win.getHeight());
app.ui_mod.updateAndRender(delta_ms, {}, S.buildRoot, ui_width, ui_height) catch unreachable; }
pub usingnamespace if (IsWasm) struct {
export fn wasmInit() [*]const u8 { return helper.wasmInit(&app, "Counter"); }
export fn wasmUpdate(cur_time_ms: f64, input_buffer_len: u32) [*]const u8 {
return helper.wasmUpdate(cur_time_ms, input_buffer_len, &app, update); }
export fn wasmDeinit() void { app.deinit(); stdx.wasm.deinit(); }
} else struct {};
const std = @import("std"); const module = @import("module.zig");
const events = @import("events.zig"); const build = @import("build.zig");
const config = @import("config.zig"); const frame = @import("frame.zig");
const widget = @import("widget.zig"); pub const widgets = @import("widgets.zig");
const text = @import("text.zig"); const tween = @import("tween.zig");
pub const OverlayId = @import("widgets/root.zig").OverlayId;
///Module
pub const Module = module.Module; pub const Layout = module.Layout;
pub const TextMeasureId = module.TextMeasureId; pub const RenderContext = module.RenderContext;
pub const LayoutContext = module.LayoutContext; pub const InitContext = module.InitContext;
pub const ModuleContext = module.ModuleContext; pub const CommonContext = module.CommonContext;
pub const IntervalId = module.IntervalId; pub const WidgetProps = module.WidgetProps;
pub const SizeConstraints = module.SizeConstraints;
///Events
pub const Event = events.Event; pub const IntervalEvent = events.IntervalEvent;
pub const KeyDownEvent = events.KeyDownEvent; pub const KeyUpEvent = events.KeyUpEvent;
pub const MouseDownEvent = events.MouseDownEvent; pub const MouseUpEvent = events.MouseUpEvent;
pub const MouseMoveEvent = events.MouseMoveEvent; pub const MouseScrollEvent = events.MouseScrollEvent;
pub const HoverChangeEvent = events.HoverChangeEvent; pub const DragStartEvent = events.DragStartEvent;
pub const DragMoveEvent = events.DragMoveEvent; pub const EventContext = events.EventContext;
pub const EventResult = events.EventResult;
///Build, Config
pub const BuildContext = build.BuildContext; pub const PtrId = build.PtrId;
pub const Config = config.Config; pub const Import = config.Import;
///Frame
pub const Frame = frame.Frame; pub const FrameId = frame.FrameId;
pub const NullId = @import("std").math.maxInt(u32); pub const NullFrameId = frame.NullFrameId;
pub const FrameListPtr = frame.FrameListPtr; pub const FramePropsPtr = frame.FramePropsPtr;
pub const NoChild = NullId;
///Widget
pub const Node = widget.Node; pub const NodeRef = widget.NodeRef;
pub const NodeStateMasks = widget.NodeStateMasks; pub const EventHandlerMasks = widget.EventHandlerMasks;
pub const WidgetTypeId = widget.WidgetTypeId; pub const WidgetUserId = widget.WidgetUserId;
pub const WidgetKey = widget.WidgetKey; pub const WidgetKeyId = widget.WidgetKeyId;
pub const WidgetRef = widget.WidgetRef; pub const NodeRefMap = widget.NodeRefMap;
pub const BindNodeFunc = widget.BindNodeFunc; pub const WidgetVTable = widget.WidgetVTable;
pub const LayoutSize = widget.LayoutSize;
///Text, Tween
pub const TextMeasure = text.TextMeasure;
pub const Tween = tween.Tween; pub const SimpleTween = tween.SimpleTween;
///User Interface
pub const ExpandedWidth = std.math.inf_f32;
pub const ExpandedHeight = std.math.inf_f32;
pub const VAlign = enum(u2) { Top = 0, Center = 1, Bottom = 2, };
pub const HAlign = enum(u2) { Left = 0, Center = 1, Right = 2, };
/// FlexFit
/// Prefers to fit exactly the available space.
/// Prefers to wrap the child. If the available space is less than the child's dimension, prefers to fit the available space.
/// Like Shrink but in the case that the child size is less than the available space; instead of skipping the missing space to the next flex widget,
/// that missing space is given to the next flex widget, which can make the next flex widget bigger than it's calculated flex size.
pub const FlexFit = enum(u2) { Exact = 0, Shrink = 1, ShrinkAndGive = 2, };
pub const FlexInfo = struct { val: u32, fit: FlexFit, };
/// Create a declaration function for a Widget.
pub fn createDeclFn(comptime Widget: type) fn (*BuildContext, anytype) callconv(.Inline) FrameId {
const S = struct { inline fn decl(c: *BuildContext, props: anytype) FrameId {
return c.build(Widget, props);} }; return S.decl;}
It generally is half the length of the other code without being wider.
from cosmic.
Seems you want to build an astronomy app using dom like widgets? I would love to see someone get started creating dom like widgets and in the process we can discover what we're missing in the ui lib. mythriljs is a reactive lib? If so it should share similar goals with our ui lib.
Are you asking if this code style is good for merging? I agree it's condensed but it's not very readable. It's better to follow the same conventions as the lib for readability and consistency.
from cosmic.
The long style code is fine. Mithril is a single page application, reactive, an alternative to JSX. I think the user should be able to import CSS from Javascript. Here is a basic outline of a Kindle UI
var House = { view: function() { return m("main", [ m("nav", [
m("a", { class: "topbar", href: "#!/house" }, "House"),
m("a", { class: "topbar", href: "#!/library" }, "Library") ] ),
m("div", {id: "house"}, [
m("p", "to-do!")]),
m("footer", [
m("p", { id: "clock" }, "15:45"),
m("p", { id: "indicators" }, "to-do"),
m("menu", { id: "expansion"},
m("p", "Additional settings"))])])}}
the idea is to create a unique Mithril
library into Cosmic that can read the same things and do routing the same way.
from cosmic.
Interesting, so you want it to render html as a backend using the Cosmic widgets? That would be cool as well. A nice starting point I guess is to try getting one of the example apps to do that.
One of the things I want to add to cscript is to sugar function calls to look like declarative statements. This should make it easier to compose widgets:
using cs.widgets
count = 0
Widget:
TextInput:
.onChange: fun (val) => cs.log(val)
Column:
Row(flex: 1):
TextButton('Count'):
.onClick: fun (val) => count += 1
Row(flex: 2):
Canvas(width: 400, height: 300):
.onRender = fun (ctx):
ctx.rect(0, 0, 100, 100)
These element names are just functions that build up the model. Here's an example:
fun Canvas(width, height, onRender, @bodyArray children) Widget:
// Build
from cosmic.
Related Issues (20)
- UI Framework HOT 1
- Native async File IO
- Sync and Native async network IO
- JS Web Target
- WASM Web Target
- Crash on zig build get-deps HOT 3
- Example build error HOT 3
- Text_demo 'Load Font' crash HOT 1
- Text_demo 'Text Wrap' doesn't seem to work HOT 1
- Text_demo: clicking on scroll bar
- Text_demo: double click to open directory
- Support Vulkan on Windows
- Easier development with Vulkan on macOS
- build error: redeclaration of succcess_cb HOT 2
- segfault HOT 4
- Text To Speech, Speech To Text HOT 1
- Build on Windows fails due to missing SDL2 files HOT 3
- Build error HOT 1
- Build error. Multiple errors "local variable is never mutated" and other errors HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from cosmic.